feat(web): get Env from API endpoint

apps/web/sentry.client.config.ts

@@ -4,11 +4,26 @@
 
 import * as Sentry from "@sentry/nextjs";
 
-import { env } from "./src/env.mjs";
-
-Sentry.init({
-  dsn: env.NEXT_PUBLIC_SENTRY_DSN_WEB,
-  environment: env.NEXT_PUBLIC_NETWORK_NAME,
-  tracesSampleRate: 1,
-  debug: false,
-});
+const initSentry = async () => {
+  try {
+    const request = await fetch("/api/env", { method: "POST" });
+    const env = (await request.json()).data;
+
+    const dns = env["PUBLIC_SENTRY_DSN_WEB"];
+    const environment = env["PUBLIC_NETWORK_NAME"];
+
+    Sentry.init({
+      dsn: dns,
+      environment,
+      tracesSampleRate: 1,
+      debug: false,
+    });
+  } catch (error) {
+    console.error(
+      "Error fetching environment variables from server side to init sentry client:",
+      error
+    );
+  }
+};
+
+initSentry();

apps/web/src/components/BlobscanVersionInfo.tsx

@@ -1,29 +1,21 @@
-import { env } from "~/env.mjs";
+import { useEnv } from "~/providers/Env";
 import { Link } from "./Link";
 
-function getVersionData(): { url: string; label: string } {
-  if (env.NEXT_PUBLIC_BLOBSCAN_RELEASE) {
-    return {
-      url: `https://github.com/Blobscan/blobscan/releases/tag/${env.NEXT_PUBLIC_BLOBSCAN_RELEASE}`,
-      label: env.NEXT_PUBLIC_BLOBSCAN_RELEASE,
-    };
-  }
+export const BlobscanVersionInfo: React.FC = () => {
+  const { env } = useEnv();
 
-  if (env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA) {
-    return {
-      url: `https://github.com/Blobscan/blobscan/commit/${env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}`,
-      label: env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA.slice(0, 7),
-    };
-  }
+  let url = "https://github.com/Blobscan/blobscan/";
+  let label = "Development";
 
-  return {
-    url: "https://github.com/Blobscan/blobscan/",
-    label: "Development",
-  };
-}
+  if (env && env["PUBLIC_BLOBSCAN_RELEASE"]) {
+    url = `https://github.com/Blobscan/blobscan/releases/tag/${env["PUBLIC_BLOBSCAN_RELEASE"]}`;
+    label = env["PUBLIC_BLOBSCAN_RELEASE"] as string;
+  }
 
-export const BlobscanVersionInfo: React.FC = () => {
-  const { url, label } = getVersionData();
+  if (env && env["PUBLIC_VERCEL_GIT_COMMIT_SHA"]) {
+    url = `https://github.com/Blobscan/blobscan/commit/${env["PUBLIC_VERCEL_GIT_COMMIT_SHA"]}`;
+    label = (env["PUBLIC_VERCEL_GIT_COMMIT_SHA"] as string).slice(0, 7);
+  }
 
   return (
     <div className="flex items-center gap-1">

apps/web/src/components/ExplorerDetails.tsx

@@ -7,8 +7,8 @@ import Skeleton from "react-loading-skeleton";
 import { formatTtl } from "@blobscan/dates";
 
 import { api } from "~/api-client";
-import { env } from "~/env.mjs";
 import Gas from "~/icons/gas.svg";
+import { useEnv } from "~/providers/Env";
 import { capitalize, formatNumber } from "~/utils";
 import { EtherUnitDisplay } from "./Displays/EtherUnitDisplay";
 
@@ -45,11 +45,20 @@ export function ExplorerDetails({ placement }: ExplorerDetailsProps) {
   const { data: blobStoragesState } = api.blobStoragesState.getState.useQuery();
   const { data: latestBlock } = api.block.getLatestBlock.useQuery();
 
+  const { env } = useEnv();
+
   const explorerDetailsItems: ExplorerDetailsItemProps[] = [];
 
   if (placement === "top") {
     explorerDetailsItems.push(
-      { name: "Network", value: capitalize(env.NEXT_PUBLIC_NETWORK_NAME) },
+      {
+        name: "Network",
+        value: env ? (
+          capitalize(env["PUBLIC_NETWORK_NAME"] as string)
+        ) : (
+          <Skeleton height={14} width={48} />
+        ),
+      },
       {
         name: "Blob gas price",
         icon: <Gas className="h-4 w-4" />,

apps/web/src/components/Filters/RollupFilter.tsx

@@ -1,44 +1,22 @@
 import { useRef } from "react";
 import type { FC } from "react";
 
-import { getChainRollups } from "@blobscan/rollups";
-
 import { Dropdown } from "~/components/Dropdown";
 import type { DropdownProps, Option } from "~/components/Dropdown";
-import { RollupIcon } from "~/components/RollupIcon";
-import { env } from "~/env.mjs";
-import type { Rollup } from "~/types";
-import { capitalize, getChainIdByName } from "~/utils";
-import { RollupBadge } from "../Badges/RollupBadge";
 
-type RollupFilterProps = Pick<DropdownProps, "selected" | "disabled"> & {
+type RollupFilterProps = Pick<
+  DropdownProps,
+  "selected" | "disabled" | "options"
+> & {
   onChange(newRollups: Option[]): void;
   selected: Option[] | null;
 };
 
-const chainId = getChainIdByName(env.NEXT_PUBLIC_NETWORK_NAME);
-const rollups = chainId ? getChainRollups(chainId) : [];
-
-export const ROLLUP_OPTIONS = rollups.map(
-  ([name, addresses]) =>
-    ({
-      value: addresses,
-      selectedLabel: (
-        <RollupBadge rollup={name.toLowerCase() as Rollup} size="sm" />
-      ),
-      label: (
-        <div className="flex flex-row items-center gap-2">
-          <RollupIcon rollup={name.toLowerCase() as Rollup} />
-          <div>{capitalize(name)}</div>
-        </div>
-      ),
-    } satisfies Option)
-) satisfies Option[];
-
 export const RollupFilter: FC<RollupFilterProps> = function ({
   onChange,
   selected,
   disabled,
+  options,
 }) {
   const noneIsSelected = useRef<boolean>(false);
 
@@ -66,7 +44,7 @@ export const RollupFilter: FC<RollupFilterProps> = function ({
   return (
     <Dropdown
       selected={selected}
-      options={ROLLUP_OPTIONS}
+      options={options}
       onChange={handleOnChange}
       placeholder="Rollup"
       width="w-[120px] min-[440px]:w-[180px] min-[540px]:w-[260px] min-[580px]:w-[280px] sm:w-[170px] md:w-[110px] lg:w-[180px] xl:w-[200px]"

apps/web/src/components/Filters/index.tsx

@@ -1,21 +1,26 @@
-import { useEffect, useReducer } from "react";
+import { useEffect, useMemo, useReducer } from "react";
 import type { FC } from "react";
 import { useRouter } from "next/router";
 import type { DateRangeType } from "react-tailwindcss-datepicker";
 import type { UrlObject } from "url";
 
 import { Category } from "@blobscan/api/enums";
+import { getChainRollups } from "@blobscan/rollups";
 
 import { Button } from "~/components/Button";
 import type { Sort } from "~/hooks/useQueryParams";
 import { useQueryParams } from "~/hooks/useQueryParams";
-import { capitalize, getISODate } from "~/utils";
+import { useEnv } from "~/providers/Env";
+import type { Rollup } from "~/types";
+import { capitalize, getChainIdByName, getISODate } from "~/utils";
+import { RollupBadge } from "../Badges/RollupBadge";
 import { Card } from "../Cards/Card";
 import { Dropdown } from "../Dropdown";
 import type { DropdownProps, Option } from "../Dropdown";
 import type { NumberRange } from "../Inputs/NumberRangeInput";
+import { RollupIcon } from "../RollupIcon";
 import { BlockNumberFilter } from "./BlockNumberFilter";
-import { ROLLUP_OPTIONS, RollupFilter } from "./RollupFilter";
+import { RollupFilter } from "./RollupFilter";
 import { SlotFilter } from "./SlotFilter";
 import { SortToggle } from "./SortToggle";
 import { TimestampFilter } from "./TimestampFilter";
@@ -86,6 +91,8 @@ export const Filters: FC = function () {
   const router = useRouter();
   const queryParams = useQueryParams();
   const [filters, dispatch] = useReducer(reducer, INIT_STATE);
+  const { env } = useEnv();
+
   const disableClear =
     !filters.category &&
     !filters.rollups &&
@@ -162,6 +169,28 @@ export const Filters: FC = function () {
     });
   };
 
+  const rollupOptions: DropdownProps["options"] = useMemo(() => {
+    const chainId =
+      env && getChainIdByName(env["PUBLIC_NETWORK_NAME"] as string);
+    const rollups = chainId ? getChainRollups(chainId) : [];
+
+    return rollups.map(
+      ([name, addresses]) =>
+        ({
+          value: addresses,
+          selectedLabel: (
+            <RollupBadge rollup={name.toLowerCase() as Rollup} size="sm" />
+          ),
+          label: (
+            <div className="flex flex-row items-center gap-2">
+              <RollupIcon rollup={name.toLowerCase() as Rollup} />
+              <div>{capitalize(name)}</div>
+            </div>
+          ),
+        } satisfies Option)
+    );
+  }, [env]);
+
   useEffect(() => {
     const { sort } = queryParams.paginationParams;
     const {
@@ -177,21 +206,21 @@ export const Filters: FC = function () {
     const newFilters: Partial<FiltersState> = {};
 
     if (from) {
-      const rollupOptions = ROLLUP_OPTIONS.filter((opt) => {
+      const rollupOptions_ = rollupOptions.filter((opt) => {
         const fromAddresses = from?.split(FROM_ADDRESSES_FORMAT_SEPARATOR);
         const rollupOptionAddresses = Array.isArray(opt.value)
           ? opt.value
           : [opt.value];
 
         return (
           rollupOptionAddresses.filter((rollupAddress) =>
-            fromAddresses?.includes(rollupAddress)
+            fromAddresses?.includes(rollupAddress as string)
           ).length > 0
         );
       });
 
-      if (rollupOptions) {
-        newFilters.rollups = rollupOptions;
+      if (rollupOptions_) {
+        newFilters.rollups = rollupOptions_;
       }
     }
 
@@ -225,7 +254,7 @@ export const Filters: FC = function () {
     }
 
     dispatch({ type: "UPDATE", payload: newFilters });
-  }, [queryParams]);
+  }, [queryParams, rollupOptions]);
 
   return (
     <Card compact>
@@ -265,6 +294,7 @@ export const Filters: FC = function () {
             <div className="w-[120px] min-[440px]:w-[180px] min-[540px]:w-[260px] min-[580px]:w-[280px] sm:w-[170px] md:w-[110px] lg:w-[180px] xl:w-[200px]">
               <RollupFilter
                 selected={filters.rollups}
+                options={rollupOptions}
                 disabled={
                   filters.category?.value.toString().toUpperCase() !==
                   Category.ROLLUP

apps/web/src/components/NavigationMenus.tsx

@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from "react";
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import {
   Popover,
@@ -8,15 +8,36 @@ import {
   Transition,
 } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import Skeleton from "react-loading-skeleton";
 
 import { useHover } from "~/hooks/useHover";
+import { useEnv } from "~/providers/Env";
 import type { ExpandibleNavigationItem, NavigationItem } from "./content";
-import { NAVIGATION_ITEMS, isExpandibleNavigationItem } from "./content";
+import { getNavigationItems, isExpandibleNavigationItem } from "./content";
 
 export const NavigationMenus: FC = () => {
+  const { env } = useEnv();
+
+  const navigationItems = useMemo(() => {
+    const networkName = env
+      ? (env["PUBLIC_NETWORK_NAME"] as string)
+      : undefined;
+    const publicSupportedNetworks = env
+      ? (env["PUBLIC_SUPPORTED_NETWORKS"] as string)
+      : undefined;
+
+    return networkName && publicSupportedNetworks
+      ? getNavigationItems(networkName, publicSupportedNetworks)
+      : undefined;
+  }, [env]);
+
+  if (!navigationItems) {
+    return <Skeleton width={20} />;
+  }
+
   return (
     <div className="items-center gap-4 xl:flex">
-      {NAVIGATION_ITEMS.map((item) =>
+      {navigationItems.map((item) =>
         isExpandibleNavigationItem(item) ? (
           <NavigationLinksMenu key={item.label} {...item} />
         ) : (