DO NOT MERGE

apps/connect/jest.config.ts

@@ -10,4 +10,7 @@ export default {
   transform: {
     ".(ts|tsx)": "ts-jest",
   },
+  moduleNameMapper: {
+    "@env": "<rootDir>/src/env/index.ts"
+  },
 } as Config;

apps/connect/jest.setup.tsx

@@ -5,6 +5,6 @@ import { TextEncoder, TextDecoder } from "util";
 Object.assign(global, {
   TextDecoder,
   TextEncoder,
-  navBar: [],
-  wormholeConnectConfig: {},
 });
+
+jest.mock("./src/env/env-vars.ts", () => ({ envVars: process.env }));

apps/connect/package.json

@@ -5,18 +5,23 @@
   "type": "module",
   "scripts": {
     "dev:usdc-bridge": "vite --config ./vite.usdc-bridge.config.ts",
+    "dev:usdc-bridge:mainnet": "cross-env VITE_APP_CLUSTER=mainnet npm run dev:usdc-bridge",
+    "dev:usdc-bridge:testnet": "cross-env VITE_APP_CLUSTER=testnet npm run dev:usdc-bridge",
     "build:usdc-bridge": "tsc && vite build --config ./vite.usdc-bridge.config.ts",
     "dev:token-bridge": "vite --config ./vite.token-bridge.config.ts",
+    "dev:token-bridge:mainnet": "cross-env VITE_APP_CLUSTER=mainnet npm run dev:token-bridge",
+    "dev:token-bridge:testnet": "cross-env VITE_APP_CLUSTER=testnet npm run dev:token-bridge",
     "build:token-bridge": "tsc && vite build --config ./vite.token-bridge.config.ts",
-    "dev": "vite",
+    "dev": "npm run dev:token-bridge:testnet",
+    "start": "npm run dev",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "prettier": "prettier --check ./src",
-    "preview": "vite preview",
-    "format": "yarn prettier --write ./src",
+    "preview": "cross-env VITE_APP_CLUSTER=mainnet vite preview",
+    "format": "npm run prettier -- --write ./src",
     "ts:check": "tsc --project ./tsconfig.json --noEmit --skipLibCheck",
-    "test": "jest",
-    "test:watch": "jest --watch"
+    "test": "cross-env VITE_APP_CLUSTER=testnet jest",
+    "test:watch": "npm run test -- --watch"
   },
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.10.10",
@@ -45,6 +50,7 @@
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
+    "cross-env": "^7.0.3",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",

apps/connect/src/App.tsx

@@ -1,3 +1,4 @@
+// DON'T MERGE
 import type {
   ChainName,
   WormholeConnectConfig,
@@ -15,9 +16,10 @@ import { useRoutes } from "react-router-dom";
 import PrivacyPolicy from "./components/pages/PrivacyPolicy";
 import { PrivacyPolicyPath, isPreview, isProduction } from "./utils/constants";
 import Banner from "./components/atoms/Banner";
+import { ENV } from "@env";
 
 const defaultConfig: WormholeConnectConfig = {
-  ...wormholeConnectConfig,
+  ...ENV.wormholeConnectConfig,
   ...((isPreview || isProduction) && {
     eventHandler: eventHandler,
   }),
@@ -78,7 +80,7 @@ export default function Root() {
   ]);
   return (
     <>
-      {versions.map(({ appName, version }, idx) => (
+      {ENV.versions.map(({ appName, version }, idx) => (
         <meta
           name={appName}
           content={version}

apps/connect/src/components/atoms/NavBar.tsx

@@ -12,6 +12,7 @@ import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 
 import { useState } from "react";
+import { ENV } from "@env";
 
 const AppBar = styled(MuiAppBar)(({ theme }) => ({
   background: "transparent",
@@ -85,7 +86,7 @@ const Spacer = styled("div")(() => ({
 const womrholescanButton = (
   <Box>
     <Link
-      href={`https://wormholescan.io${wormholeConnectConfig.env === "testnet" ? "/#/?network=TESTNET" : ""}`}
+      href={`https://wormholescan.io${ENV.wormholeConnectConfig.env === "testnet" ? "/#/?network=TESTNET" : ""}`}
       target="_blank"
       color="inherit"
     >
@@ -105,7 +106,7 @@ export default function NavBar() {
         <Spacer />
         <Hidden implementation="css" smDown>
           <div style={{ display: "flex", alignItems: "center" }}>
-            {navBar.map(({ label, active, href, isBlank }, idx) => (
+            {ENV.navBar.map(({ label, active, href, isBlank }, idx) => (
               <Link
                 key={`${label}_${idx}`}
                 href={href}
@@ -130,7 +131,7 @@ export default function NavBar() {
       {openMenu && (
         <Hidden implementation="css" smUp>
           <List>
-            {navBar.map(({ label, href }, idx) => (
+            {ENV.navBar.map(({ label, href }, idx) => (
               <ListItem key={`${label}_${idx}`}>
                 <ListItemButton component="a" href={href}>
                   <ListItemText primary={label} />

apps/connect/src/components/atoms/Version.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import Footer from "./Footer";
+import { ENV } from "@env";
 
 export default function Version() {
   return (
     <Footer left="120px">
-      {versions.map(({ appName, version }, idx) => (
+      {ENV.versions.map(({ appName, version }, idx) => (
         <React.Fragment key={`${appName}-${version}-${idx}`}>
           {appName}: {version}
-          {idx < versions.length - 1 && <br />}
+          {idx < ENV.versions.length - 1 && <br />}
         </React.Fragment>
       ))}
     </Footer>

apps/connect/src/env/common.ts

@@ -0,0 +1,83 @@
+import type { WormholeConnectConfig } from "@wormhole-foundation/wormhole-connect";
+import packageJson from "../../package.json";
+import { envVars } from "./env-vars";
+
+const rpcs = (chains: string[], template: (chain: string) => string) =>
+  chains
+    .map((chain: string) => ({ [chain]: template(chain) }))
+    .reduce((acc, cur) => ({ ...acc, ...cur }), {});
+const asRpcHost = (chain: string) =>
+  `https://and76cjzpa.execute-api.us-east-2.amazonaws.com/${chain}/`;
+export const chains = [
+  "wormchain",
+  "osmosis",
+  "ethereum",
+  "sui",
+  "aptos",
+  "kujira",
+  "evmos",
+  "bsc",
+  "polygon",
+  "avalanche",
+  "fantom",
+  "celo",
+  "moonbeam",
+  "base",
+  "arbitrum",
+  "optimism",
+  "scroll",
+  "xlayer",
+  "mantle",
+];
+
+export const MAINNET_RPCS = {
+  ...rpcs(chains, asRpcHost),
+  solana: "https://wormhole.rpcpool.com/",
+};
+
+export const PUBLIC_URL = envVars.PUBLIC_URL || "";
+
+export const versions: Env["versions"] = [
+  {
+    appName: "Portal Bridge",
+    version: `v${envVars.VITE_APP_VERSION || "0.0.0"}`,
+  },
+  {
+    appName: "Wormhole Connect",
+    version: `v${packageJson.version}`,
+  },
+];
+
+export const wormholeConnectConfigCommon: Partial<WormholeConnectConfig> = {
+  walletConnectProjectId: envVars.VITE_APP_WALLET_CONNECT_PROJECT_ID || "",
+
+  env: envVars.VITE_APP_CLUSTER || "testnet",
+  rpcs: {},
+  showHamburgerMenu: false,
+  explorer: {
+    href: `https://wormholescan.io/#/txs?address={:address}&network=${envVars.VITE_APP_CLUSTER || "testnet"}`,
+  },
+  menu: [
+    {
+      label: "Advanced Tools",
+      href: `${envVars.PUBLIC_URL}/advanced-tools/`,
+      order: 1,
+    },
+    {
+      label: "Privacy Policy",
+      href: `${envVars.PUBLIC_URL}/#/privacy-policy/`,
+    },
+  ],
+};
+
+export interface Env {
+  wormholeConnectConfig: WormholeConnectConfig;
+  navBar: {
+    label: string;
+    active?: boolean;
+    href: string;
+    isBlank?: boolean;
+  }[];
+  redirects?: { source: string[]; target: string };
+  versions: { version: string; appName: string }[];
+}

apps/connect/src/env/env-vars.ts

@@ -0,0 +1 @@
+export const envVars = import.meta.env;

apps/connect/src/env/index.ts

@@ -0,0 +1 @@
+export { ENV } from "./token-bridge";