feat(web): get Env from API endpoint #678

xFJA · 2025-01-09T09:37:42Z

Checklist

My change requires a documentation update, and I have done it.
I have added tests to cover my changes.
I have filled out the description and linked the related issues.

Description

The environment variables on the client side are now obtained from an api endpoint when the app initializes. This way, you should be able to change their values without redeploying for future deployment changes.

Related Issue (Optional)

Closes #87

changeset-bot · 2025-01-09T09:37:46Z

🦋 Changeset detected

Latest commit: a84d3d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@blobscan/web	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2025-01-09T09:37:48Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blobscan-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 28, 2025 4:51am

5 Skipped Deployments

Name	Status	Preview	Updated (UTC)
blobscan-docs	⬜️ Ignored (Inspect)	Visit Preview	Jan 28, 2025 4:51am
blobscan-gnosis	⬜️ Ignored (Inspect)	Visit Preview	Jan 28, 2025 4:51am
blobscan-holesky	⬜️ Ignored (Inspect)	Visit Preview	Jan 28, 2025 4:51am
blobscan-mainnet	⬜️ Ignored (Inspect)	Visit Preview	Jan 28, 2025 4:51am
blobscan-sepolia	⬜️ Ignored (Inspect)	Visit Preview	Jan 28, 2025 4:51am

codecov · 2025-01-09T09:40:01Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 88.50%. Comparing base (2b252b1) to head (a84d3d6).
Report is 10 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #678      +/-   ##
==========================================
+ Coverage   87.79%   88.50%   +0.71%     
==========================================
  Files         158      160       +2     
  Lines       10871    10919      +48     
  Branches     1164     1201      +37     
==========================================
+ Hits         9544     9664     +120     
+ Misses       1327     1255      -72

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

github-actions · 2025-01-09T09:40:12Z

📦 Next.js Bundle Analysis for @blobscan/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`318.58 KB` (🔴 +72.96 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

New Pages Added

The following pages were added to the bundle from the code in this PR:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/block_neighbor`	`251 B`	318.83 KB	91.09%
`/stats`	`348.26 KB`	666.84 KB	190.53%

Eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/`	`355.55 KB`	674.13 KB	192.61% (🟢 -3.94%)
`/address/[address]`	`30.17 KB`	348.75 KB	99.64% (🟢 -3.87%)
`/blob/[hash]`	`30.51 KB`	349.09 KB	99.74% (🟢 -3.41%)
`/blobs`	`81.5 KB`	400.08 KB	114.31% (🟡 +13.91%)
`/block/[id]`	`15.65 KB`	334.23 KB	95.49% (🟢 -3.77%)
`/blocks`	`78.65 KB`	397.23 KB	113.49% (🟡 +13.74%)
`/tx/[hash]`	`18.85 KB`	337.43 KB	96.41% (🟡 +1.60%)
`/txs`	`78.05 KB`	396.63 KB	113.32% (🟡 +11.70%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

apps/web/src/pages/api/env/index.ts

apps/web/sentry.client.config.ts

PJColombo

Looking good.

I left some comments with some changes we should do.

packages/env/index.ts

apps/web/sentry.client.config.ts

apps/web/src/pages/api/env/index.ts

packages/env/index.ts

apps/web/src/pages/api/env/index.ts

PJColombo · 2025-01-21T15:33:00Z

apps/web/src/env.mjs

Here's a suggested change we could follow in order to export a client env vars schema that we can use later to enforce typing in the exposed env object in the Env provider

import { createEnv } from "@t3-oss/env-nextjs"; import { z } from "zod"; // See booleanSchema from packages/zod/src/schemas.ts // We need to redefine it because we can't import ts files from here const booleanSchema = z .string() .refine((s) => s === "true" || s === "false") .transform((s) => s === "true"); const networkSchema = z.enum([ "mainnet", "holesky", "sepolia", "gnosis", "chiado", "devnet", ]); const clientEnvVars = { PUBLIC_BEACON_BASE_URL: z.string().url().default("https://beaconcha.in/"), PUBLIC_BLOBSCAN_RELEASE: z.string().optional(), PUBLIC_EXPLORER_BASE_URL: z.string().url().default("https://etherscan.io/"), PUBLIC_NETWORK_NAME: networkSchema.default("mainnet"), PUBLIC_SENTRY_DSN_WEB: z.string().url().optional(), PUBLIC_POSTHOG_ID: z.string().optional(), PUBLIC_POSTHOG_HOST: z.string().default("https://us.i.posthog.com"), PUBLIC_SUPPORTED_NETWORKS: z .string() .default( '[{"label":"Ethereum Mainnet","href":"https://blobscan.com/"},{"label":"Gnosis","href":"https://gnosis.blobscan.com/"},{"label":"Holesky Testnet","href":"https://holesky.blobscan.com/"},{"label":"Sepolia Testnet","href":"https://sepolia.blobscan.com/"}]' ), PUBLIC_VERCEL_ANALYTICS_ENABLED: booleanSchema.default("false"), PUBLIC_VERCEL_GIT_COMMIT_SHA: z.string().optional(), }; export const clientEnvVarsSchema = z.object(clientEnvVars); export const env = createEnv({ /** * Specify your server-side environment variables schema here. This way you can ensure the app isn't * built with invalid env vars. */ server: { DATABASE_URL: z.string().url(), FEEDBACK_WEBHOOK_URL: z.string().optional(), NODE_ENV: z.enum(["development", "test", "production"]), METRICS_ENABLED: booleanSchema.default("false"), TRACES_ENABLED: booleanSchema.default("false"), ...clientEnvVars, }, /** * Destructure all variables from `process.env` to make sure they aren't tree-shaken away. */ runtimeEnv: { DATABASE_URL: process.env.DATABASE_URL, FEEDBACK_WEBHOOK_URL: process.env.FEEDBACK_WEBHOOK_URL, METRICS_ENABLED: process.env.METRICS_ENABLED, NODE_ENV: process.env.NODE_ENV, TRACES_ENABLED: process.env.TRACES_ENABLED, PUBLIC_BEACON_BASE_URL: process.env.PUBLIC_BEACON_BASE_URL, PUBLIC_BLOBSCAN_RELEASE: process.env.PUBLIC_BLOBSCAN_RELEASE, PUBLIC_EXPLORER_BASE_URL: process.env.PUBLIC_EXPLORER_BASE_URL, PUBLIC_NETWORK_NAME: process.env.PUBLIC_NETWORK_NAME, PUBLIC_SENTRY_DSN_WEB: process.env.PUBLIC_SENTRY_DSN_WEB, PUBLIC_POSTHOG_ID: process.env.PUBLIC_POSTHOG_ID, PUBLIC_POSTHOG_HOST: process.env.PUBLIC_POSTHOG_HOST, PUBLIC_SUPPORTED_NETWORKS: process.env.PUBLIC_SUPPORTED_NETWORKS, PUBLIC_VERCEL_ANALYTICS_ENABLED: process.env.PUBLIC_VERCEL_ANALYTICS_ENABLED, PUBLIC_VERCEL_GIT_COMMIT_SHA: process.env.PUBLIC_VERCEL_GIT_COMMIT_SHA, }, skipValidation: !!process.env.CI || !!process.env.SKIP_ENV_VALIDATION, });

We would import the clientEnvVarsSchema in the Env provider to parse the returned json coming from the api

PJColombo · 2025-01-21T16:04:38Z

One more thing: don't forget to update the docs

apps/web/src/env.mjs

PJColombo

Left some more comments.

PJColombo · 2025-01-28T22:19:02Z

apps/web/src/env.mjs

-  /**
-   * Specify your client-side environment variables schema here.
-   * For them to be exposed to the client, prefix them with `NEXT_PUBLIC_`.
-   */
  client: {


We should avoid redeclaring all the env vars in the client field again, which is what we're trying to avoid by exposing them from the server.

Upon further inspection, I realise that there're some of them we should keep defined at build time. Those are:

NEXT_PUBLIC_BLOBSCAN_RELEASE: This one we actually set it when building the docker image.

NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA: This is a default variable that Vercel uses so we can't remove the prefix

PJColombo · 2025-01-28T22:20:15Z

apps/web/src/env.mjs

@@ -26,34 +44,11 @@ export const env = createEnv({
    DATABASE_URL: z.string().url(),
    FEEDBACK_WEBHOOK_URL: z.string().optional(),
    NODE_ENV: z.enum(["development", "test", "production"]),
-    METRICS_ENABLED: booleanSchema.default("false"),
-    TRACES_ENABLED: booleanSchema.default("false"),


These are the env vars we want to expose now from the server:

PUBLIC_BEACON_BASE_URL

PUBLIC_EXPLORER_BASE_URL

PUBLIC_NETWORK_NAME

PUBLIC_POSTHOG_HOST

PUBLIC_POSTHOG_ID

PUBLIC_SENTRY_DSN_WEB

PUBLIC_SUPPORTED_NETWORKS

We remove the prefix NEXT_ to prevent nextjs from injecting them during build time

Also, remember to update the docs with the new renamed env vars and any reference to them (i.e. deploy_vercel_env.sh , turbo.json, etc)

PJColombo · 2025-01-28T22:21:39Z

apps/web/src/env.mjs

+    METRICS_ENABLED: z.boolean().default(false),
+    TRACES_ENABLED: z.boolean().default(false),


Can we rollback to booleanSchema here

It's necessary because the true or false values are set as string and we need to parse them to their boolean counterparts

PJColombo · 2025-01-28T22:24:07Z

apps/web/src/pages/api/env/index.ts

@@ -0,0 +1,33 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { env } from "@blobscan/env";


We should send the env vars located in the env.mjs file

Also, let's remove the @blobscan/env package from the package.json as those are not used in the web app

PJColombo · 2025-01-28T22:26:11Z

apps/web/src/pages/api/env/index.ts

+
+  switch (method) {
+    case "GET": {
+      const parsedEnv = clientEnvVarsSchema.safeParse(env);


There's no need to parse this again as env object is already typified.

PJColombo · 2025-01-28T22:26:55Z

apps/web/src/pages/api/env/index.ts

+
+      const clientEnv = Object.fromEntries(
+        Object.entries(parsedEnv.data)
+          .filter(([key]) => key.startsWith("NEXT_"))


If we apply the change mentioned above about removing the NEXT_ prefix we should update this to filter en vars starting with PUBLIC_ instead

xFJA added 3 commits January 9, 2025 15:50

feat(web): fetch env from API endpoint in client side

880408e

feat(web): adapt server side sentry env config for any environment

fe5837e

fix(web): limit to '1' env query

ce4bb56

xFJA changed the title ~~feat: get Env from API endpoint~~ feat(web): get Env from API endpoint Jan 9, 2025

xFJA added 3 commits January 13, 2025 10:27

refactor(web): reset 'server' and 'edge' sentry config

c3d89ca

refactor(web): move env endpoint from API package to Next API

652b4ac

feat: remove default env value

d5b8a88

vercel bot deployed to Preview – blobscan-staging January 13, 2025 04:16 View deployment

xFJA added 3 commits January 13, 2025 11:33

feat(web): use Next env api endpoint to init sentry in clientside

bbf2fbc

chore(web): remove unnecessary export

b0ef04c

refactor(web): remove unnecessary env fetch utils file

b88ada6

vercel bot deployed to Preview – blobscan-staging January 13, 2025 05:29 View deployment

Merge branch 'main' into create-env-endpoint

62bbdea

vercel bot deployed to Preview – blobscan-docs January 15, 2025 05:42 View deployment

vercel bot deployed to Preview – blobscan-staging January 15, 2025 05:45 View deployment

xFJA requested review from PabloCastellano, luis-herasme and PJColombo and removed request for PabloCastellano and luis-herasme January 18, 2025 04:36

xFJA marked this pull request as ready for review January 18, 2025 04:41

xFJA requested a review from luis-herasme January 18, 2025 04:41

luis-herasme reviewed Jan 18, 2025

View reviewed changes

apps/web/src/pages/api/env/index.ts Outdated Show resolved Hide resolved

luis-herasme reviewed Jan 18, 2025

View reviewed changes

apps/web/sentry.client.config.ts Outdated Show resolved Hide resolved

PJColombo requested changes Jan 21, 2025

View reviewed changes

xFJA added 2 commits January 27, 2025 10:05

feat(web): validate env API request json parsing

c12a61d

chore(web): update changeset

85c704a

vercel bot deployed to Preview – blobscan-staging January 27, 2025 03:09 View deployment

xFJA requested review from PJColombo and luis-herasme January 27, 2025 03:19

luis-herasme reviewed Jan 28, 2025

View reviewed changes

apps/web/src/env.mjs Show resolved Hide resolved

luis-herasme approved these changes Jan 28, 2025

View reviewed changes

refactor(web): infer clien env zod schema in Env provider

a84d3d6

vercel bot deployed to Preview – blobscan-staging January 28, 2025 04:51 View deployment

PJColombo requested changes Jan 28, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): get Env from API endpoint #678

feat(web): get Env from API endpoint #678

xFJA commented Jan 9, 2025 •

edited

Loading

changeset-bot bot commented Jan 9, 2025 •

edited

Loading

vercel bot commented Jan 9, 2025 •

edited

Loading

codecov bot commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

PJColombo left a comment

PJColombo Jan 21, 2025

PJColombo Jan 21, 2025

xFJA Jan 27, 2025

PJColombo commented Jan 21, 2025

PJColombo left a comment

PJColombo Jan 28, 2025

PJColombo Jan 28, 2025

PJColombo Jan 28, 2025 •

edited

Loading

PJColombo Jan 28, 2025

PJColombo Jan 28, 2025

PJColombo Jan 28, 2025 •

edited

Loading

PJColombo Jan 28, 2025

		METRICS_ENABLED: z.boolean().default(false),
		TRACES_ENABLED: z.boolean().default(false),

		@@ -0,0 +1,33 @@
		import type { NextApiRequest, NextApiResponse } from "next";

		import { env } from "@blobscan/env";

feat(web): get Env from API endpoint #678

Are you sure you want to change the base?

feat(web): get Env from API endpoint #678

Conversation

xFJA commented Jan 9, 2025 • edited Loading

Checklist

Description

Related Issue (Optional)

changeset-bot bot commented Jan 9, 2025 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 9, 2025 • edited Loading

codecov bot commented Jan 9, 2025 • edited Loading

Codecov Report

github-actions bot commented Jan 9, 2025 • edited Loading

📦 Next.js Bundle Analysis for @blobscan/web

⚠️ Global Bundle Size Increased

New Pages Added

Eight Pages Changed Size

PJColombo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PJColombo commented Jan 21, 2025

PJColombo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PJColombo Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PJColombo Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xFJA commented Jan 9, 2025 •

edited

Loading

changeset-bot bot commented Jan 9, 2025 •

edited

Loading

vercel bot commented Jan 9, 2025 •

edited

Loading

codecov bot commented Jan 9, 2025 •

edited

Loading

github-actions bot commented Jan 9, 2025 •

edited

Loading

PJColombo Jan 28, 2025 •

edited

Loading

PJColombo Jan 28, 2025 •

edited

Loading