env var cleanup

.env.sample

@@ -2,8 +2,8 @@ MAGICSWAPV2_API_URL=
 TROVE_API_URL=https://trove-api-dev.treasure.lol
 TROVE_API_NETWORK=arbsepolia
 TROVE_API_KEY=
-PUBLIC_NODE_ENV=development
-PUBLIC_THIRDWEB_CLIENT_ID=
-PUBLIC_ENABLE_TESTNETS=true
-PUBLIC_WALLET_CONNECT_KEY=
-DEFAULT_TOKEN_ADDRESS=0x55d0cf68a1afe0932aff6f36c87efa703508191c
+VITE_NODE_ENV=development
+VITE_ENABLE_TESTNETS=true
+VITE_THIRDWEB_CLIENT_ID=
+VITE_WALLET_CONNECT_KEY=
+VITE_DEFAULT_TOKEN_ADDRESS=0x55d0cf68a1afe0932aff6f36c87efa703508191c

.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 --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-secret dotenv="${{ secrets.ENV }}" --build-arg MAGICSWAPV2_API_URL=${{ vars.MAGICSWAPV2_API_URL }}
+        run: flyctl deploy --config ./fly.toml --app ${{ vars.APP_NAME }} --remote-only --build-secret dotenv="${{ secrets.ENV }}"
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

app/lib/cache.server.ts

@@ -10,7 +10,7 @@ declare global {
 
 let lru: LRUCache<string, C.CacheEntry>;
 
-if (process.env.NODE_ENV === "production") {
+if (import.meta.env.NODE_ENV === "production") {
   lru = new LRUCache<string, C.CacheEntry>({ max: 1000 });
 } else {
   if (!global.__lruCache) {

app/lib/chain.server.ts

@@ -4,6 +4,6 @@ import { arbitrumSepolia } from "viem/chains";
 export const client = createPublicClient({
   chain: arbitrumSepolia,
   transport: http(
-    `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${process.env.PUBLIC_THIRDWEB_CLIENT_ID}`
+    `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
   ),
 });

app/root.tsx

@@ -58,14 +58,10 @@ export default function App() {
         ],
         transports: {
           [arbitrum.id]: http(
-            `https://arb-mainnet.g.alchemy.com/v2/${
-              import.meta.env.VITE_ALCHEMY_KEY
-            }`
+            `https://${arbitrum.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
           ),
           [arbitrumSepolia.id]: http(
-            `https://arb-sepolia.g.alchemy.com/v2/${
-              import.meta.env.VITE_ALCHEMY_KEY
-            }`
+            `https://${arbitrumSepolia.id}.rpc.thirdweb.com/${import.meta.env.VITE_THIRDWEB_CLIENT_ID}`
           ),
         },
         walletConnectProjectId: import.meta.env.VITE_WALLET_CONNECT_KEY,

app/routes/pools_.$id[.]png.tsx

@@ -195,7 +195,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        process.env.NODE_ENV === "development"
+        import.meta.env.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=86400",
     },

app/routes/resources.og.tsx

@@ -15,7 +15,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        process.env.NODE_ENV === "development"
+        import.meta.env.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=31536000",
     },

app/routes/swap.$tokenIn.$tokenOut[.]png.tsx

@@ -20,7 +20,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   const tokenIn = inputAddress
     ? await fetchToken(inputAddress)
-    : await fetchToken(process.env.DEFAULT_TOKEN_ADDRESS);
+    : await fetchToken(import.meta.env.VITE_DEFAULT_TOKEN_ADDRESS);
 
   const tokenOut = await fetchToken(outputAddress);
 
@@ -74,7 +74,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     headers: {
       "Content-Type": "image/png",
       "cache-control":
-        process.env.NODE_ENV === "development"
+        import.meta.env.NODE_ENV === "development"
           ? "no-cache, no-store"
           : "public, immutable, no-transform, max-age=86400",
     },

app/routes/swap.tsx

@@ -101,7 +101,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   const outputAddress = url.searchParams.get("out");
 
   const [tokenIn, tokenOut] = await Promise.all([
-    fetchToken(inputAddress ?? process.env.DEFAULT_TOKEN_ADDRESS),
+    fetchToken(inputAddress ?? import.meta.env.VITE_DEFAULT_TOKEN_ADDRESS),
     outputAddress ? fetchToken(outputAddress) : null,
   ]);
 

app/types.ts

@@ -1,21 +1,5 @@
 import type { GetPairsQuery } from ".graphclient";
 
-/** Environment and helpers */
-export type EnvVar =
-  | "PUBLIC_THIRDWEB_CLIENT_ID"
-  | "PUBLIC_NODE_ENV"
-  | "PUBLIC_ENABLE_TESTNETS"
-  | "MAGICSWAPV2_API_URL"
-  | "TROVE_API_URL"
-  | "TROVE_API_NETWORK"
-  | "TROVE_API_KEY"
-  | "PUBLIC_WALLET_CONNECT_KEY"
-  | "DEFAULT_TOKEN_ADDRESS";
-
-export type Env = {
-  [key in EnvVar]: string;
-};
-
 export type Optional<T> = T | undefined;
 
 export type AddressString = `0x${string}`;

env.d.ts

@@ -2,11 +2,25 @@
 /// <reference types="@remix-run/node" />
 
 interface ImportMetaEnv {
-  readonly VITE_ALCHEMY_KEY: string;
+  readonly VITE_NODE_ENV: string;
   readonly VITE_ENABLE_TESTNETS: string;
-  readonly CHVITE_WALLET_CONNECT_KEYAIN: string;
+  readonly VITE_THIRDWEB_CLIENT_ID: string;
+  readonly VITE_WALLET_CONNECT_KEY: string;
+  readonly VITE_DEFAULT_TOKEN_ADDRESS: string;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      readonly TROVE_API_URL: string;
+      readonly TROVE_API_NETWORK: string;
+      readonly TROVE_API_KEY: string;
+    }
+  }
+}
+
+export {};

global.d.ts

@@ -1,28 +1,5 @@
-import type { Env, EnvVar } from "~/types";
-
 export {};
 
-declare global {
-  /**
-   * To make typescript stop complaining when trying to access window.env
-   */
-  interface Window {
-    env: {
-      [key in EnvVar]: string;
-    };
-  }
-
-  namespace NodeJS {
-    /**
-     * Extend process.env with our custom environment variables.
-     */
-    interface ProcessEnv extends Env {
-      NODE_ENV: "development" | "production" | "test";
-      PORT: string;
-    }
-  }
-}
-
 declare module "react" {
   interface HTMLAttributes {
     tw?: string;