From daa66454f0a63a8ba5e6b17bc8ac59d24b96bd66 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Fri, 21 Jun 2024 19:01:57 -0400 Subject: [PATCH] refactor: env var to utils/constants --- packages/frontend/src/App.tsx | 5 +++-- packages/frontend/src/assets/templates.ts | 9 +++++++-- .../projects/create/ConnectAccount.tsx | 5 ++--- .../src/components/shared/Sidebar/Sidebar.tsx | 3 ++- packages/frontend/src/context/Web3Provider.tsx | 4 +++- packages/frontend/src/index.tsx | 5 +++-- packages/frontend/src/utils/constants.ts | 11 +++++++++++ packages/frontend/src/utils/log-error.ts | 16 ++++++++-------- packages/frontend/src/utils/siwe.ts | 4 +++- packages/frontend/src/utils/turnkey-frontend.ts | 5 +---- packages/frontend/src/utils/use-snowball.ts | 7 ++++--- 11 files changed, 47 insertions(+), 27 deletions(-) create mode 100644 packages/frontend/src/utils/constants.ts diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index eae3b12c..06f6b0f6 100644 --- a/packages/frontend/src/App.tsx +++ b/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) { diff --git a/packages/frontend/src/assets/templates.ts b/packages/frontend/src/assets/templates.ts index b3f35a00..98bb3fe3 100644 --- a/packages/frontend/src/assets/templates.ts +++ b/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, }, { diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx index e69cd00a..d9435d7b 100644 --- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx +++ b/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=${ - import.meta.env.VITE_GITHUB_CLIENT_ID -}&scope=${encodeURIComponent(SCOPES)}`; +const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?client_id=${VITE_GITHUB_CLIENT_ID}&scope=${encodeURIComponent(SCOPES)}`; interface ConnectAccountInterface { onAuth: (token: string) => void; diff --git a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx b/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx index 6e360cbd..6ed3b6fc 100644 --- a/packages/frontend/src/components/shared/Sidebar/Sidebar.tsx +++ b/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', }); diff --git a/packages/frontend/src/context/Web3Provider.tsx b/packages/frontend/src/context/Web3Provider.tsx index 2f7e6c23..0dec85f5 100644 --- a/packages/frontend/src/context/Web3Provider.tsx +++ b/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'); } diff --git a/packages/frontend/src/index.tsx b/packages/frontend/src/index.tsx index dd173ebd..0588ebbb 100644 --- a/packages/frontend/src/index.tsx +++ b/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'); -const gqlEndpoint = `${import.meta.env.VITE_SERVER_URL}/${SERVER_GQL_PATH}`; +assert(baseUrl, 'VITE_SERVER_URL is not set in env'); +const gqlEndpoint = `${baseUrl}/${SERVER_GQL_PATH}`; const gqlClient = new GQLClient({ gqlEndpoint }); diff --git a/packages/frontend/src/utils/constants.ts b/packages/frontend/src/utils/constants.ts new file mode 100644 index 00000000..3e4b03a6 --- /dev/null +++ b/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; diff --git a/packages/frontend/src/utils/log-error.ts b/packages/frontend/src/utils/log-error.ts index 1126f4b9..ca7dfa3f 100644 --- a/packages/frontend/src/utils/log-error.ts +++ b/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); } } diff --git a/packages/frontend/src/utils/siwe.ts b/packages/frontend/src/utils/siwe.ts index 4eccc740..d45e1739 100644 --- a/packages/frontend/src/utils/siwe.ts +++ b/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', diff --git a/packages/frontend/src/utils/turnkey-frontend.ts b/packages/frontend/src/utils/turnkey-frontend.ts index e385b0ff..f670b754 100644 --- a/packages/frontend/src/utils/turnkey-frontend.ts +++ b/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; - -const PASSKEY_WALLET_RPID = import.meta.env.VITE_PASSKEY_WALLET_RPID!; -const TURNKEY_BASE_URL = import.meta.env.VITE_TURNKEY_API_BASE_URL!; +import { baseUrl, PASSKEY_WALLET_RPID, TURNKEY_BASE_URL } from './constants'; // All algorithms can be found here: https://www.iana.org/assignments/cose/cose.xhtml#algorithms // We only support ES256, which is listed here diff --git a/packages/frontend/src/utils/use-snowball.ts b/packages/frontend/src/utils/use-snowball.ts index 1b04f90b..179f4d8a 100644 --- a/packages/frontend/src/utils/use-snowball.ts +++ b/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,