normalize env vars (#45)

* normalize env vars * upgrade dependencies * use build arg instead of build secret * update node engine requirement
TreasureProject · Jul 10, 2024 · 3d7e812 · 3d7e812
1 parent 35837d5
commit 3d7e812
Show file tree

Hide file tree

Showing 16 changed files with 579 additions and 591 deletions.
diff --git a/.env.sample b/.env.sample
@@ -1,8 +1,5 @@
 MAGICSWAPV2_API_URL=
-TROVE_API_URL=https://trove-api-dev.treasure.lol
-TROVE_API_NETWORK=arbsepolia
+PUBLIC_CHAIN_ID=421614
+PUBLIC_THIRDWEB_CLIENT_ID=
+PUBLIC_WALLET_CONNECT_PROJECT_ID=
 TROVE_API_KEY=
-DEFAULT_TOKEN_ADDRESS=0x55d0cf68a1afe0932aff6f36c87efa703508191c
-VITE_ENABLE_TESTNETS=true
-VITE_THIRDWEB_CLIENT_ID=
-VITE_WALLET_CONNECT_KEY=
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -16,6 +16,6 @@ jobs:
       - name: Set up flyctl
         uses: superfly/flyctl-actions/setup-flyctl@master
       - name: Deploy
-        run: flyctl deploy --no-cache --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-secret dotenv="${{ secrets.ENV }}"
+        run: flyctl deploy --no-cache --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-arg MAGICSWAPV2_API_URL=${{ vars.MAGICSWAPV2_API_URL }}
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
diff --git a/Dockerfile b/Dockerfile
@@ -27,9 +27,9 @@ COPY --link . .
 # Install dependencies
 RUN npm install --include=dev
 
-# Create environment file
-RUN --mount=type=secret,id=dotenv,dst=env \
-    tr ' ' '\n' < env > .env
+# Set environment variables
+ARG MAGICSWAPV2_API_URL
+ENV MAGICSWAPV2_API_URL=${MAGICSWAPV2_API_URL}
 
 # Run code generation
 RUN npm run generate

diff --git a/app/api/collections.server.ts b/app/api/collections.server.ts
@@ -1,18 +1,17 @@
 import { fetchTroveTokenMapping } from "./tokens.server";
+import { ENV } from "~/lib/env.server";
 import type { Token, TroveCollection, TroveCollectionMapping } from "~/types";
 
 const fetchCollections = async (addresses: string[]) => {
-  const url = new URL(`${process.env.TROVE_API_URL}/batch-collections`);
+  const url = new URL(`${ENV.TROVE_API_URL}/batch-collections`);
   url.searchParams.set(
     "slugs",
-    addresses
-      .map((address) => `${process.env.TROVE_API_NETWORK}/${address}`)
-      .join(",")
+    addresses.map((address) => `${ENV.TROVE_API_NETWORK}/${address}`).join(",")
   );
 
   const response = await fetch(url.toString(), {
     headers: {
-      "X-API-Key": process.env.TROVE_API_KEY,
+      "X-API-Key": ENV.TROVE_API_KEY,
     },
   });
   const result = (await response.json()) as TroveCollection[];

diff --git a/app/api/tokens.server.ts b/app/api/tokens.server.ts
@@ -13,6 +13,7 @@ import {
 } from ".graphclient";
 import { sumArray } from "~/lib/array";
 import { getCachedValue } from "~/lib/cache.server";
+import { ENV } from "~/lib/env.server";
 import { createPoolToken } from "~/lib/tokens.server";
 import type { PoolToken, TroveToken, TroveTokenMapping } from "~/types";
 
@@ -51,14 +52,14 @@ export const fetchToken = (id: string) =>
   });
 
 const fetchTroveTokens = async (ids: string[]) => {
-  const response = await fetch(`${process.env.TROVE_API_URL}/batch-tokens`, {
+  const response = await fetch(`${ENV.TROVE_API_URL}/batch-tokens`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      "X-API-Key": process.env.TROVE_API_KEY,
+      "X-API-Key": ENV.TROVE_API_KEY,
     },
     body: JSON.stringify({
-      ids: ids.map((id) => `${process.env.TROVE_API_NETWORK}/${id}`),
+      ids: ids.map((id) => `${ENV.TROVE_API_NETWORK}/${id}`),
     }),
   });
   const results = (await response.json()) as TroveToken[];
@@ -78,29 +79,27 @@ export const fetchPoolTokenBalance = async (
   token: PoolToken,
   address: string
 ) => {
-  const url = new URL(`${process.env.TROVE_API_URL}/tokens-for-user`);
+  const url = new URL(`${ENV.TROVE_API_URL}/tokens-for-user`);
   url.searchParams.append("userAddress", address);
   url.searchParams.append("projection", "queryUserQuantityOwned");
 
   const tokenIds = token.collections.flatMap(({ id, tokenIds }) =>
-    tokenIds.map(
-      (tokenId) => `${process.env.TROVE_API_NETWORK}/${id}/${tokenId}`
-    )
+    tokenIds.map((tokenId) => `${ENV.TROVE_API_NETWORK}/${id}/${tokenId}`)
   );
   if (tokenIds.length > 0) {
     url.searchParams.append("ids", tokenIds.join(","));
   } else {
     url.searchParams.append(
       "slugs",
       token.collections
-        .map(({ id }) => `${process.env.TROVE_API_NETWORK}/${id}`)
+        .map(({ id }) => `${ENV.TROVE_API_NETWORK}/${id}`)
         .join(",")
     );
   }
 
   const response = await fetch(url, {
     headers: {
-      "X-API-Key": process.env.TROVE_API_KEY,
+      "X-API-Key": ENV.TROVE_API_KEY,
     },
   });
   const result = (await response.json()) as TroveToken[];
@@ -124,15 +123,14 @@ export const fetchVaultUserInventory = async ({
   }
 
   // Fetch user inventory
-  const url = new URL(`${process.env.TROVE_API_URL}/tokens-for-user`);
+  const url = new URL(`${ENV.TROVE_API_URL}/tokens-for-user`);
   url.searchParams.append("userAddress", address);
 
   const tokenIds =
     token.vaultCollections.flatMap(
       ({ collection: { id: collectionId }, tokenIds }) =>
         tokenIds?.map(
-          (tokenId) =>
-            `${process.env.TROVE_API_NETWORK}/${collectionId}/${tokenId}`
+          (tokenId) => `${ENV.TROVE_API_NETWORK}/${collectionId}/${tokenId}`
         ) ?? []
     ) ?? [];
   if (tokenIds.length > 0) {
@@ -143,15 +141,15 @@ export const fetchVaultUserInventory = async ({
       token.vaultCollections
         .map(
           ({ collection: { id: collectionId } }) =>
-            `${process.env.TROVE_API_NETWORK}/${collectionId}`
+            `${ENV.TROVE_API_NETWORK}/${collectionId}`
         )
         .join(",")
     );
   }
 
   const response = await fetch(url, {
     headers: {
-      "X-API-Key": process.env.TROVE_API_KEY,
+      "X-API-Key": ENV.TROVE_API_KEY,
     },
   });
   const results = (await response.json()) as TroveToken[];

diff --git a/app/api/user.server.ts b/app/api/user.server.ts
@@ -2,6 +2,7 @@ import type { ExecutionResult } from "graphql";
 
 import { createPoolsFromPairs } from "./pools.server";
 import { GetUserDocument, type GetUserQuery, execute } from ".graphclient";
+import { ENV } from "~/lib/env.server";
 import type { AccountDomains } from "~/types";
 
 export const fetchUser = async (address: string) => {
@@ -22,9 +23,9 @@ export const fetchUser = async (address: string) => {
 };
 
 export const fetchDomain = async (address: string) => {
-  const res = await fetch(`${process.env.TROVE_API_URL}/domain/${address}`, {
+  const res = await fetch(`${ENV.TROVE_API_URL}/domain/${address}`, {
     headers: {
-      "X-API-Key": process.env.TROVE_API_KEY,
+      "X-API-Key": ENV.TROVE_API_KEY,
     },
   });
 

diff --git a/app/lib/chain.server.ts b/app/lib/chain.server.ts
@@ -1,9 +1,12 @@
 import { createPublicClient, http } from "viem";
-import { arbitrumSepolia } from "viem/chains";
+import { arbitrum, arbitrumSepolia } from "viem/chains";
+
+import { ENV } from "./env.server";
 
 export const client = createPublicClient({
-  chain: arbitrumSepolia,
+  chain:
+    ENV.PUBLIC_CHAIN_ID === arbitrumSepolia.id ? arbitrumSepolia : arbitrum,
   transport: http(
-    `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
+    `https://${ENV.PUBLIC_CHAIN_ID}.rpc.thirdweb.com/${ENV.PUBLIC_THIRDWEB_CLIENT_ID}`
   ),
 });
diff --git a/app/lib/env.server.ts b/app/lib/env.server.ts
@@ -0,0 +1,32 @@
+import { arbitrum, arbitrumSepolia } from "viem/chains";
+
+const CHAIN_ID_TO_DEFAULT_TOKEN_ADDRESS = {
+  [arbitrumSepolia.id]: "0x23be0504127475387a459fe4b01e54f1e336ffae",
+  [arbitrum.id]: "0x0caadd427a6feb5b5fc1137eb05aa7ddd9c08ce9",
+} as const;
+
+const CHAIN_ID_TO_TROVE_API_URL = {
+  [arbitrumSepolia.id]: "https://trove-api-dev.treasure.lol",
+  [arbitrum.id]: "https://trove-api.treasure.lol",
+} as const;
+
+const CHAIN_ID_TO_TROVE_API_NETWORK = {
+  [arbitrumSepolia.id]: "arbsepolia",
+  [arbitrum.id]: "arb",
+} as const;
+
+type SupportedChainId = keyof typeof CHAIN_ID_TO_TROVE_API_URL;
+
+const CHAIN_ID = Number(process.env.PUBLIC_CHAIN_ID) as SupportedChainId;
+
+export const ENV = {
+  NODE_ENV: process.env.NODE_ENV,
+  PUBLIC_CHAIN_ID: CHAIN_ID,
+  PUBLIC_DEFAULT_TOKEN_ADDRESS: CHAIN_ID_TO_DEFAULT_TOKEN_ADDRESS[CHAIN_ID],
+  PUBLIC_THIRDWEB_CLIENT_ID: process.env.PUBLIC_THIRDWEB_CLIENT_ID,
+  PUBLIC_WALLET_CONNECT_PROJECT_ID:
+    process.env.PUBLIC_WALLET_CONNECT_PROJECT_ID,
+  TROVE_API_URL: CHAIN_ID_TO_TROVE_API_URL[CHAIN_ID],
+  TROVE_API_NETWORK: CHAIN_ID_TO_TROVE_API_NETWORK[CHAIN_ID],
+  TROVE_API_KEY: process.env.TROVE_API_KEY,
+};
diff --git a/app/root.tsx b/app/root.tsx
@@ -8,6 +8,7 @@ import {
   Scripts,
   ScrollRestoration,
   useFetchers,
+  useLoaderData,
   useNavigation,
 } from "@remix-run/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -22,6 +23,7 @@ import { arbitrum, arbitrumSepolia } from "wagmi/chains";
 import { LoaderIcon } from "./components/Icons";
 import { Layout } from "./components/Layout";
 import { AccountProvider } from "./contexts/account";
+import { ENV } from "./lib/env.server";
 import { getDomainUrl } from "./lib/seo";
 import { cn } from "./lib/utils";
 import { useSettingsStore } from "./store/settings";
@@ -36,6 +38,11 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
       origin: getDomainUrl(request),
       path: new URL(request.url).pathname,
     },
+    env: {
+      PUBLIC_CHAIN_ID: ENV.PUBLIC_CHAIN_ID,
+      PUBLIC_THIRDWEB_CLIENT_ID: ENV.PUBLIC_THIRDWEB_CLIENT_ID,
+      PUBLIC_WALLET_CONNECT_PROJECT_ID: ENV.PUBLIC_WALLET_CONNECT_PROJECT_ID,
+    },
   });
 };
 
@@ -46,23 +53,23 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => {
 export type RootLoader = typeof loader;
 
 export default function App() {
+  const { env } = useLoaderData<RootLoader>();
+
   const [client] = useState(() =>
     createConfig(
       getDefaultConfig({
         appName: "Magicswap",
         transports: {
-          [arbitrum.id]: http(
-            `https://${arbitrum.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
-          ),
-          [arbitrumSepolia.id]: http(
-            `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
+          [env.PUBLIC_CHAIN_ID]: http(
+            `https://${env.PUBLIC_CHAIN_ID}.rpc.thirdweb.com/${env.PUBLIC_THIRDWEB_CLIENT_ID}`
           ),
         },
-        walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_KEY,
-        chains:
-          import.meta.env.VITE_ENABLE_TESTNETS === "true"
-            ? [arbitrumSepolia, arbitrum]
-            : [arbitrum],
+        walletConnectProjectId: env.PUBLIC_WALLET_CONNECT_PROJECT_ID,
+        chains: [
+          env.PUBLIC_CHAIN_ID === arbitrumSepolia.id
+            ? arbitrumSepolia
+            : arbitrum,
+        ],
       })
     )
   );

diff --git a/app/routes/pools_.$id[.]png.tsx b/app/routes/pools_.$id[.]png.tsx
@@ -4,6 +4,7 @@ import invariant from "tiny-invariant";
 
 import { fetchPool } from "~/api/pools.server";
 import { formatAmount, formatTokenAmount } from "~/lib/currency";
+import { ENV } from "~/lib/env.server";
 import { bigIntToNumber, formatPercent } from "~/lib/number";
 import {
   NIGHT_100,
@@ -189,7 +190,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        import.meta.env.NODE_ENV === "development"
+        ENV.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=86400",
     },

diff --git a/app/routes/resources.og.tsx b/app/routes/resources.og.tsx
@@ -1,5 +1,6 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 
+import { ENV } from "~/lib/env.server";
 import { generateOgImage } from "~/lib/og.server";
 
 export const OG_IMAGE_WIDTH = 1200;
@@ -15,7 +16,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        import.meta.env.NODE_ENV === "development"
+        ENV.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=31536000",
     },

diff --git a/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx b/app/routes/swap.$tokenIn.$tokenOut[.]png.tsx
@@ -3,6 +3,7 @@ import { MagicSwapLogoFull } from "@treasure-project/branding";
 import invariant from "tiny-invariant";
 
 import { fetchToken } from "~/api/tokens.server";
+import { ENV } from "~/lib/env.server";
 import {
   NIGHT_100,
   NIGHT_400,
@@ -13,23 +14,21 @@ import {
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const { origin } = new URL(request.url);
 
-  const inputAddress = params.tokenIn;
-  const outputAddress = params.tokenOut;
+  const tokenInAddress = params.tokenIn ?? ENV.PUBLIC_DEFAULT_TOKEN_ADDRESS;
+  const tokenOutAddress = params.tokenOut;
 
-  invariant(outputAddress, "Missing output address");
+  invariant(tokenOutAddress, "Missing output address");
 
-  const tokenIn = inputAddress
-    ? await fetchToken(inputAddress)
-    : await fetchToken(process.env.DEFAULT_TOKEN_ADDRESS);
-
-  const tokenOut = await fetchToken(outputAddress);
+  const [tokenIn, tokenOut] = await Promise.all([
+    fetchToken(tokenInAddress),
+    fetchToken(tokenOutAddress),
+  ]);
 
   const png = await generateOgImage(
     <div tw="flex p-16 w-full">
       <div tw="flex justify-between flex-col">
         <MagicSwapLogoFull tw="w-72 h-14" />
         <TokenDisplay token0={tokenIn} token1={tokenOut} origin={origin} />
-
         <div tw="flex flex-col">
           <div
             style={{
@@ -65,7 +64,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
         </div>
       </div>
     </div>,
-
     origin
   );
 
@@ -74,7 +72,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        import.meta.env.NODE_ENV === "development"
+        ENV.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=86400",
     },

diff --git a/app/routes/swap.tsx b/app/routes/swap.tsx
@@ -56,6 +56,7 @@ import { useSwap } from "~/hooks/useSwap";
 import { useSwapRoute } from "~/hooks/useSwapRoute";
 import { useTrove } from "~/hooks/useTrove";
 import { formatTokenAmount, formatUSD } from "~/lib/currency";
+import { ENV } from "~/lib/env.server";
 import { bigIntToNumber, floorBigInt, formatNumber } from "~/lib/number";
 import { generateTitle, getSocialMetas, getUrl } from "~/lib/seo";
 import { countTokens } from "~/lib/tokens";
@@ -96,7 +97,7 @@ export const meta: MetaFunction<
 export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const tokenInAddress =
-    url.searchParams.get("in") ?? process.env.DEFAULT_TOKEN_ADDRESS;
+    url.searchParams.get("in") ?? ENV.PUBLIC_DEFAULT_TOKEN_ADDRESS;
   const tokenOutAddress = url.searchParams.get("out");
 
   const [session, pools, tokenIn, tokenOut] = await Promise.all([