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

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

@@ -0,0 +1,22 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { env } from "@blobscan/env";
+
+export default async function (req: NextApiRequest, res: NextApiResponse) {
+  const method = req.method;
+
+  switch (method) {
+    case "POST": {
+      const clientEnv = Object.entries(env)
+        .filter(([key]) => key.startsWith("NEXT_"))
+        .map(([key, value]) => [key.replace(/^NEXT_/, ""), value]);
+
+      return res.status(200).json({
+        data: Object.fromEntries(clientEnv),
+      });
+    }
+
+    default:
+      throw new Error("Method not allowed");
+  }
+}

apps/web/src/providers/Env.tsx

@@ -1,7 +1,5 @@
 import React, { createContext, useContext, useState, useEffect } from "react";
 
-import { api } from "~/api-client";
-
 interface EnvContextType {
   env: Record<string, string | boolean | undefined>;
   isLoading: boolean;
@@ -22,8 +20,6 @@ const DEFAULT_ENV = {
   PUBLIC_VERCEL_GIT_COMMIT_SHA: undefined,
 };
 
-const LOCAL_STORAGE_KEY = "env";
-
 const EnvContext = createContext<EnvContextType>({
   env: DEFAULT_ENV,
   isLoading: true,
@@ -32,32 +28,30 @@ const EnvContext = createContext<EnvContextType>({
 export const EnvProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  const { data: fetchedEnv, isLoading } = api.getEnv.useQuery(undefined, {
-    staleTime: Infinity,
-    cacheTime: Infinity,
-  });
-  const [env, setEnv] = useState<Record<string, string | boolean | undefined>>(
-    () => {
-      let storedEnv;
-      if (global?.window !== undefined) localStorage.getItem(LOCAL_STORAGE_KEY);
-      return storedEnv ? JSON.parse(storedEnv) : DEFAULT_ENV;
-    }
-  );
+  const [env, setEnv] =
+    useState<Record<string, string | boolean | undefined>>();
 
   useEffect(() => {
-    if (
-      typeof window !== undefined &&
-      localStorage &&
-      fetchedEnv &&
-      !isLoading
-    ) {
-      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(fetchedEnv));
-      setEnv(fetchedEnv);
-    }
-  }, [fetchedEnv, isLoading]);
+    const fetchEnv = async () => {
+      try {
+        const request = await fetch("/api/env", { method: "POST" });
+        const data = await request.json();
+        setEnv(data.data);
+      } catch (error) {
+        console.error(
+          "Error fetching environment variables from server side:",
+          error
+        );
+      }
+    };
+
+    fetchEnv();
+  }, []);
 
   return (
-    <EnvContext.Provider value={{ env, isLoading }}>
+    <EnvContext.Provider
+      value={{ env: env ? env : DEFAULT_ENV, isLoading: false }}
+    >
       {children}
     </EnvContext.Provider>
   );

packages/api/src/app-router.ts

@@ -1,6 +1,5 @@
 import { z } from "@blobscan/zod";
 
-import { getEnv } from "./getEnv";
 import { publicProcedure } from "./procedures";
 import { blobRouter } from "./routers/blob";
 import { blobStoragesStateRouter } from "./routers/blob-storages-state";
@@ -33,7 +32,6 @@ export const appRouter = t.router({
     .input(z.void())
     .output(z.string())
     .query(() => "yay!"),
-  getEnv: getEnv,
 });
 
 // export type definition of API