Refactor: Env to utils/constants (#210)

This PR centralizes all the environment variable references into a single constants file. The change includes replacing various `import.meta.env` references with imports from the new `utils/constants` module. This improves maintainability by providing a single place to manage environment variables.

packages/frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Projects from './pages/org-slug';
@@ -10,8 +11,8 @@ import ProjectSearchLayout from './layouts/ProjectSearch';
 import Index from './pages';
 import AuthPage from './pages/AuthPage';
 import { DashboardLayout } from './pages/org-slug/layout';
-import { useEffect } from 'react';
 import Web3Provider from 'context/Web3Provider';
+import { baseUrl } from 'utils/constants';
 
 const router = createBrowserRouter([
   {
@@ -59,7 +60,7 @@ function App() {
   // Hacky way of checking session
   // TODO: Handle redirect backs
   useEffect(() => {
-    fetch(`${import.meta.env.VITE_SERVER_URL}/auth/session`, {
+    fetch(`${baseUrl}/auth/session`, {
       credentials: 'include',
     }).then((res) => {
       if (res.status !== 200) {

packages/frontend/src/assets/templates.ts

@@ -1,16 +1,21 @@
+import {
+  VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO,
+  VITE_GITHUB_PWA_TEMPLATE_REPO,
+} from 'utils/constants';
+
 export default [
   {
     id: '1',
     name: 'Progressive Web App (PWA)',
     icon: 'pwa',
-    repoFullName: `${import.meta.env.VITE_GITHUB_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${VITE_GITHUB_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {
     id: '2',
     name: 'Image Upload PWA',
     icon: 'pwa',
-    repoFullName: `${import.meta.env.VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    repoFullName: `${VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
     isComingSoon: false,
   },
   {

packages/frontend/src/components/projects/create/ConnectAccount.tsx

@@ -14,11 +14,10 @@ import { useToast } from '../../shared/Toast';
 import { IconWithFrame } from '../../shared/IconWithFrame';
 import { Heading } from '../../shared/Heading';
 import { MockConnectGitCard } from './MockConnectGitCard';
+import { VITE_GITHUB_CLIENT_ID } from 'utils/constants';
 
 const SCOPES = 'repo user';
-const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${
+const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`;
-  import.meta.env.VITE_GITHUB_CLIENT_ID
-}&scope=${encodeURIComponent(SCOPES)}`;
 
 interface ConnectAccountInterface {
   onAuth: (token: string) => void;

packages/frontend/src/components/shared/Sidebar/Sidebar.tsx

@@ -20,6 +20,7 @@ import { cn } from 'utils/classnames';
 import { useMediaQuery } from 'usehooks-ts';
 import { SIDEBAR_MENU } from './constants';
 import { UserSelect } from 'components/shared/UserSelect';
+import { baseUrl } from 'utils/constants';
 
 interface SidebarProps {
   mobileOpen?: boolean;
@@ -83,7 +84,7 @@ export const Sidebar = ({ mobileOpen }: SidebarProps) => {
   }, [orgSlug]);
 
   const handleLogOut = useCallback(async () => {
-    await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/logout`, {
+    await fetch(`${baseUrl}/auth/logout`, {
       method: 'POST',
       credentials: 'include',
     });

packages/frontend/src/context/Web3Provider.tsx

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
+import { VITE_WALLET_CONNECT_ID } from 'utils/constants';
+
 const queryClient = new QueryClient();
 
-if (!import.meta.env.VITE_WALLET_CONNECT_ID) {
+if (!VITE_WALLET_CONNECT_ID) {
   throw new Error('Error: REACT_APP_WALLET_CONNECT_ID env config is not set');
 }
 

packages/frontend/src/index.tsx

@@ -14,6 +14,7 @@ import { GQLClientProvider } from './context/GQLClientContext';
 import { SERVER_GQL_PATH } from './constants';
 import { Toaster } from 'components/shared/Toast';
 import { LogErrorBoundary } from 'utils/log-error';
+import { baseUrl } from 'utils/constants';
 
 // @ts-ignore
 console.log(`v-${__VERSION__}`);
@@ -22,8 +23,8 @@ const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 
-assert(import.meta.env.VITE_SERVER_URL, 'VITE_SERVER_URL is not set in env');
+assert(baseUrl, 'VITE_SERVER_URL is not set in env');
-const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`;
+const gqlEndpoint = `${baseUrl}/${SERVER_GQL_PATH}`;
 
 const gqlClient = new GQLClient({ gqlEndpoint });
 

packages/frontend/src/utils/constants.ts

@@ -0,0 +1,11 @@
+export const baseUrl = import.meta.env.VITE_SERVER_URL;
+export const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
+export const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;
+export const VITE_GITHUB_PWA_TEMPLATE_REPO = import.meta.env
+  .VITE_GITHUB_PWA_TEMPLATE_REPO;
+export const VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO = import.meta.env
+  .VITE_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO;
+export const VITE_GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID;
+export const VITE_WALLET_CONNECT_ID = import.meta.env.VITE_WALLET_CONNECT_ID;
+export const VITE_BUGSNAG_API_KEY = import.meta.env.VITE_BUGSNAG_API_KEY;
+export const VITE_LIT_RELAY_API_KEY = import.meta.env.VITE_LIT_RELAY_API_KEY;

packages/frontend/src/utils/log-error.ts

@@ -1,21 +1,21 @@
+import React from 'react';
 import Bugsnag from '@bugsnag/js';
 import BugsnagPluginReact from '@bugsnag/plugin-react';
 import BugsnagPerformance from '@bugsnag/browser-performance';
-import React from 'react';
 
-const bugsnagApiKey = import.meta.env.VITE_BUGSNAG_API_KEY;
+import { VITE_BUGSNAG_API_KEY } from './constants';
 
-if (bugsnagApiKey) {
+if (VITE_BUGSNAG_API_KEY) {
   Bugsnag.start({
-    apiKey: bugsnagApiKey,
+    apiKey: VITE_BUGSNAG_API_KEY,
     plugins: [new BugsnagPluginReact()],
   });
-  BugsnagPerformance.start({ apiKey: bugsnagApiKey });
+  BugsnagPerformance.start({ apiKey: VITE_BUGSNAG_API_KEY });
 }
 
-export const errorLoggingEnabled = !!bugsnagApiKey;
+export const errorLoggingEnabled = !!VITE_BUGSNAG_API_KEY;
 
-export const LogErrorBoundary = bugsnagApiKey
+export const LogErrorBoundary = VITE_BUGSNAG_API_KEY
   ? Bugsnag.getPlugin('react')!.createErrorBoundary(React)
   : ({ children }: any) => children;
 
@@ -28,7 +28,7 @@ export function logError(error: Error) {
   }
   console.error(...errors);
 
-  if (import.meta.env.VITE_BUGSNAG_API_KEY) {
+  if (VITE_BUGSNAG_API_KEY) {
     Bugsnag.notify(error);
   }
 }

packages/frontend/src/utils/siwe.ts

@@ -2,6 +2,8 @@ import { SiweMessage } from 'siwe';
 import { PKPEthersWallet } from '@lit-protocol/pkp-ethers';
 import { v4 as uuid } from 'uuid';
 
+import { baseUrl } from './constants';
+
 const domain = window.location.host;
 const origin = window.location.origin;
 
@@ -17,7 +19,7 @@ export async function signInWithEthereum(
   );
   const signature = await wallet.signMessage(message);
 
-  const res = await fetch(`${import.meta.env.VITE_SERVER_URL}/auth/validate`, {
+  const res = await fetch(`${baseUrl}/auth/validate`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

packages/frontend/src/utils/turnkey-frontend.ts

@@ -1,10 +1,7 @@
 import { TurnkeyClient, getWebAuthnAttestation } from '@turnkey/http';
 import { WebauthnStamper } from '@turnkey/webauthn-stamper';
 
-const baseUrl = import.meta.env.VITE_SERVER_URL;
+import { baseUrl, PASSKEY_WALLET_RPID, TURNKEY_BASE_URL } from './constants';
-
-const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!;
-const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!;
 
 // All algorithms can be found here: https://www.iana.org/assignments/cose/cose.xhtml#algorithms
 // We only support ES256, which is listed here

packages/frontend/src/utils/use-snowball.ts

@@ -5,16 +5,17 @@ import {
   LitGoogleAuth,
   LitPasskeyAuth,
 } from '@snowballtools/auth-lit';
+import { VITE_LIT_RELAY_API_KEY } from './constants';
 
 export const snowball = Snowball.withAuth({
   google: LitGoogleAuth.configure({
-    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   }),
   // apple: LitAppleAuth.configure({
-  //   litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+  //   litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   // }),
   passkey: LitPasskeyAuth.configure({
-    litRelayApiKey: import.meta.env.VITE_LIT_RELAY_API_KEY!,
+    litRelayApiKey: VITE_LIT_RELAY_API_KEY!,
   }),
 }).create({
   initialChain: SnowballChain.sepolia,