Add custom chain config (#259)

apps/hyperdrive-trading/src/appconfig/chains/supportedChains.ts

@@ -1,2 +1,3 @@
-export const supportedChainIds = [5, 31337] as const;
+export const supportedChainIds = [42069, 31337] as const;
+
 export type SupportedChainId = (typeof supportedChainIds)[number];

apps/hyperdrive-trading/src/network/wagmiClient.ts

@@ -1,28 +1,66 @@
 import { getDefaultWallets } from "@rainbow-me/rainbowkit";
-import { configureChains, createConfig } from "wagmi";
-import { foundry, goerli } from "wagmi/chains";
-import { alchemyProvider } from "wagmi/providers/alchemy";
+import { Chain, ChainProviderFn, configureChains, createConfig } from "wagmi";
+import { foundry } from "wagmi/chains";
 import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
 const {
   VITE_ALCHEMY_GOERLI_RPC_KEY: ALCHEMY_GOERLI_RPC_KEY,
   VITE_LOCALHOST_NODE_RPC_URL: LOCALHOST_NODE_RPC_URL,
+  VITE_CUSTOM_CHAIN_NODE_RPC_URL: CUSTOM_CHAIN_NODE_RPC_URL,
+  VITE_CUSTOM_CHAIN_ADDRESSES_URL: CUSTOM_CHAIN_NODE_ADDRESSES_URL,
+  VITE_CUSTOM_CHAIN_CHAIN_ID: CUSTOM_CHAIN_CHAIN_ID,
   VITE_WALLET_CONNECT_PROJECT_ID: PROJECT_ID,
 } = import.meta.env;
 
 if (!ALCHEMY_GOERLI_RPC_KEY) {
   throw new Error("Provide an ALCHEMY_GOERLI_RPC_KEY variable in .env");
 }
 
-const { chains, publicClient, webSocketPublicClient } = configureChains(
-  [foundry, goerli],
-  [
+const chainsToConfigure: Chain[] = [];
+const providersToConfigure: ChainProviderFn[] = [];
+
+if (LOCALHOST_NODE_RPC_URL) {
+  chainsToConfigure.push(foundry);
+  providersToConfigure.push(
     jsonRpcProvider({
       rpc: () => ({
         http: LOCALHOST_NODE_RPC_URL,
       }),
     }),
-    alchemyProvider({ apiKey: ALCHEMY_GOERLI_RPC_KEY }),
-  ],
+  );
+}
+
+if (
+  CUSTOM_CHAIN_NODE_RPC_URL &&
+  CUSTOM_CHAIN_CHAIN_ID &&
+  CUSTOM_CHAIN_NODE_ADDRESSES_URL
+) {
+  chainsToConfigure.push({
+    id: +CUSTOM_CHAIN_CHAIN_ID,
+    name: "☁️ \u00A0 Chain",
+    network: "custom-chain",
+    nativeCurrency: {
+      decimals: 18,
+      name: "Ether",
+      symbol: "ETH",
+    },
+    rpcUrls: {
+      public: { http: [CUSTOM_CHAIN_NODE_RPC_URL] },
+      default: { http: [CUSTOM_CHAIN_NODE_RPC_URL] },
+    },
+  });
+
+  providersToConfigure.push(
+    jsonRpcProvider({
+      rpc: () => ({
+        http: CUSTOM_CHAIN_NODE_RPC_URL,
+      }),
+    }),
+  );
+}
+
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+  chainsToConfigure,
+  providersToConfigure,
 );
 
 export const wagmiChains = chains;

apps/hyperdrive-trading/src/ui/appconfig/useAppConfig.ts

@@ -1,4 +1,3 @@
-import { HyperdriveGoerliAddresses } from "@hyperdrive/core";
 import { useQuery } from "@tanstack/react-query";
 import assertNever from "assert-never";
 import { SupportedChainId } from "src/appconfig/chains/supportedChains";
@@ -8,6 +7,9 @@ import { Address } from "viem";
 import { useChainId, usePublicClient } from "wagmi";
 
 const LOCALHOST_ADDRESSES_URL = import.meta.env.VITE_LOCALHOST_ADDRESSES_URL;
+const CUSTOM_CHAIN_ADDRESSES_URL = import.meta.env
+  .VITE_CUSTOM_CHAIN_ADDRESSES_URL;
+
 export function useAppConfig(): {
   appConfig: AppConfig | undefined;
   appConfigStatus: "idle" | "error" | "loading" | "success";
@@ -18,11 +20,8 @@ export function useAppConfig(): {
     queryKey: ["app-config", { chainId }],
     queryFn: async () => {
       switch (chainId) {
-        case 5:
-          return getAppConfig(HyperdriveGoerliAddresses, publicClient);
-
         case 31337:
-          const localAddresses = await fetchLocalAddresses();
+          const localAddresses = await fetchLocalhostAddresses();
           return getAppConfig(
             // TODO: This is a temporary "cross-walk" object to use until SC
             // team unifies the shape of the addresses.json file across the
@@ -34,6 +33,19 @@ export function useAppConfig(): {
             publicClient,
           );
 
+        case 42069:
+          const addresses = await fetchCustomChainAddresses();
+          return getAppConfig(
+            // TODO: This is a temporary "cross-walk" object to use until SC
+            // team unifies the shape of the addresses.json file across the
+            // different chains.
+            {
+              dsrHyperdrive: addresses.mockHyperdrive,
+              mockHyperdriveMath: addresses.mockHyperdriveMath,
+            },
+            publicClient,
+          );
+
         default:
           assertNever(chainId);
       }
@@ -45,9 +57,15 @@ export function useAppConfig(): {
   return { appConfig, appConfigStatus };
 }
 
-async function fetchLocalAddresses() {
+async function fetchLocalhostAddresses() {
   return await fetch(LOCALHOST_ADDRESSES_URL).then(
-    (res) => res.json() as Promise<LocalAddressesJson>,
+    (res) => res.json() as Promise<AddressesJson>,
+  );
+}
+
+async function fetchCustomChainAddresses() {
+  return await fetch(CUSTOM_CHAIN_ADDRESSES_URL).then(
+    (res) => res.json() as Promise<AddressesJson>,
   );
 }
 
@@ -56,7 +74,7 @@ async function fetchLocalAddresses() {
  * addresses.json file and the local one (see Docker image in infra repo) share
  * the same shape. Smart Contract team will implement this.
  */
-interface LocalAddressesJson {
+interface AddressesJson {
   baseToken: Address;
   mockHyperdrive: Address;
   mockHyperdriveMath: Address;