From 655ba18d4701794dc4abb32fb61346120c10fd89 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Wed, 7 May 2025 10:48:34 -0700
Subject: [PATCH 1/2] Add rpc form

---
 .../src/network/wagmiClient.ts                | 46 +++++++++++++------
 .../src/ui/chains/RpcForm.tsx                 | 20 ++++++++
 apps/hyperdrive-trading/src/ui/main.tsx       |  2 +
 3 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx

diff --git a/apps/hyperdrive-trading/src/network/wagmiClient.ts b/apps/hyperdrive-trading/src/network/wagmiClient.ts
index ef17f149e..965e3263f 100644
--- a/apps/hyperdrive-trading/src/network/wagmiClient.ts
+++ b/apps/hyperdrive-trading/src/network/wagmiClient.ts
@@ -13,19 +13,39 @@ import { capsuleWallet } from "src/wallets/capsule";
 import { Chain, http, Transport } from "viem";
 import { base, foundry, gnosis, linea, mainnet, sepolia } from "wagmi/chains";
 
-const {
-  VITE_LOCALHOST_NODE_RPC_URL,
-  VITE_CUSTOM_CHAIN_NODE_RPC_URL,
-  VITE_CUSTOM_CHAIN_CHAIN_ID,
-  VITE_WALLET_CONNECT_PROJECT_ID,
-  VITE_SEPOLIA_RPC_URL,
-  VITE_MAINNET_RPC_URL,
-  VITE_LINEA_RPC_URL,
-  VITE_BASE_RPC_URL,
-  VITE_GNOSIS_FORK_NODE_RPC_URL,
-  VITE_GNOSIS_FORK_CHAIN_ID,
-  VITE_GNOSIS_NODE_RPC_URL,
-} = import.meta.env;
+const { env } = import.meta;
+
+// Allow users to override the default RPC URL by setting it in local storage,
+// especially useful for custom networks/chains
+const VITE_LOCALHOST_NODE_RPC_URL =
+  localStorage.getItem("VITE_LOCALHOST_NODE_RPC_URL") ??
+  env.VITE_LOCALHOST_NODE_RPC_URL;
+const VITE_CUSTOM_CHAIN_NODE_RPC_URL =
+  localStorage.getItem("VITE_CUSTOM_CHAIN_NODE_RPC_URL") ??
+  env.VITE_CUSTOM_CHAIN_NODE_RPC_URL;
+const VITE_CUSTOM_CHAIN_CHAIN_ID =
+  localStorage.getItem("VITE_CUSTOM_CHAIN_CHAIN_ID") ??
+  env.VITE_CUSTOM_CHAIN_CHAIN_ID;
+const VITE_WALLET_CONNECT_PROJECT_ID =
+  localStorage.getItem("VITE_WALLET_CONNECT_PROJECT_ID") ??
+  env.VITE_WALLET_CONNECT_PROJECT_ID;
+const VITE_SEPOLIA_RPC_URL =
+  localStorage.getItem("VITE_SEPOLIA_RPC_URL") ?? env.VITE_SEPOLIA_RPC_URL;
+const VITE_MAINNET_RPC_URL =
+  localStorage.getItem("VITE_MAINNET_RPC_URL") ?? env.VITE_MAINNET_RPC_URL;
+const VITE_LINEA_RPC_URL =
+  localStorage.getItem("VITE_LINEA_RPC_URL") ?? env.VITE_LINEA_RPC_URL;
+const VITE_BASE_RPC_URL =
+  localStorage.getItem("VITE_BASE_RPC_URL") ?? env.VITE_BASE_RPC_URL;
+const VITE_GNOSIS_FORK_NODE_RPC_URL =
+  localStorage.getItem("VITE_GNOSIS_FORK_NODE_RPC_URL") ??
+  env.VITE_GNOSIS_FORK_NODE_RPC_URL;
+const VITE_GNOSIS_FORK_CHAIN_ID =
+  localStorage.getItem("VITE_GNOSIS_FORK_CHAIN_ID") ??
+  env.VITE_GNOSIS_FORK_CHAIN_ID;
+const VITE_GNOSIS_NODE_RPC_URL =
+  localStorage.getItem("VITE_GNOSIS_NODE_RPC_URL") ??
+  env.VITE_GNOSIS_NODE_RPC_URL;
 
 interface WagmiClientConfig {
   rpcUrl: string;
diff --git a/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx b/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx
new file mode 100644
index 000000000..5b6284ccf
--- /dev/null
+++ b/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx
@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+
+export function RpcForm(): ReactElement {
+  return (
+    <div className="daisy-dropdown">
+      <div tabIndex={0} role="button" className="daisy-btn m-1">
+        Click
+      </div>
+      <div
+        tabIndex={0}
+        className="daisy-card daisy-dropdown-content daisy-card-compact z-[1] w-64 bg-primary p-2 text-primary-content shadow"
+      >
+        <div className="daisy-card-body">
+          <h3 className="daisy-card-title">Card title!</h3>
+          <p>you can use any element as a dropdown.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/hyperdrive-trading/src/ui/main.tsx b/apps/hyperdrive-trading/src/ui/main.tsx
index 3fd05bc3a..8a1fe93ae 100644
--- a/apps/hyperdrive-trading/src/ui/main.tsx
+++ b/apps/hyperdrive-trading/src/ui/main.tsx
@@ -21,6 +21,7 @@ import { wagmiConfig } from "src/network/wagmiClient";
 import { Plausible } from "src/ui/analytics/Plausible";
 import { App } from "src/ui/app/App/App";
 import ToastProvider from "src/ui/base/components/Toaster/ToastProvider";
+import { RpcForm } from "src/ui/chains/RpcForm";
 import { RegionInfoProvider } from "src/ui/compliance/hooks/useRegionInfo";
 import "src/ui/globals.css";
 import { logAppVersion } from "src/ui/version/logAppVersion";
@@ -75,6 +76,7 @@ root.render(
             <RollbarErrorBoundary>
               <RegionInfoProvider>
                 <App />
+                <RpcForm />
               </RegionInfoProvider>
             </RollbarErrorBoundary>
           </RollbarProvider>

From a30b69a56b8ffbbd6e8195630a121bfa1b5d1702 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Wed, 7 May 2025 16:22:51 -0700
Subject: [PATCH 2/2] Add rpc switcher

---
 .../src/network/wagmiClient.ts                | 42 +++++----
 .../src/ui/app/Navbar/Navbar.tsx              |  2 +
 .../src/ui/chains/RpcForm.tsx                 | 92 ++++++++++++++++---
 apps/hyperdrive-trading/src/ui/main.tsx       |  2 -
 4 files changed, 105 insertions(+), 33 deletions(-)

diff --git a/apps/hyperdrive-trading/src/network/wagmiClient.ts b/apps/hyperdrive-trading/src/network/wagmiClient.ts
index 965e3263f..592fbfca1 100644
--- a/apps/hyperdrive-trading/src/network/wagmiClient.ts
+++ b/apps/hyperdrive-trading/src/network/wagmiClient.ts
@@ -13,39 +13,41 @@ import { capsuleWallet } from "src/wallets/capsule";
 import { Chain, http, Transport } from "viem";
 import { base, foundry, gnosis, linea, mainnet, sepolia } from "wagmi/chains";
 
-const { env } = import.meta;
-
 // Allow users to override the default RPC URL by setting it in local storage,
 // especially useful for custom networks/chains
 const VITE_LOCALHOST_NODE_RPC_URL =
-  localStorage.getItem("VITE_LOCALHOST_NODE_RPC_URL") ??
-  env.VITE_LOCALHOST_NODE_RPC_URL;
+  localStorage.getItem("VITE_LOCALHOST_NODE_RPC_URL") ||
+  import.meta.env.VITE_LOCALHOST_NODE_RPC_URL;
 const VITE_CUSTOM_CHAIN_NODE_RPC_URL =
-  localStorage.getItem("VITE_CUSTOM_CHAIN_NODE_RPC_URL") ??
-  env.VITE_CUSTOM_CHAIN_NODE_RPC_URL;
+  localStorage.getItem("VITE_CUSTOM_CHAIN_NODE_RPC_URL") ||
+  import.meta.env.VITE_CUSTOM_CHAIN_NODE_RPC_URL;
 const VITE_CUSTOM_CHAIN_CHAIN_ID =
-  localStorage.getItem("VITE_CUSTOM_CHAIN_CHAIN_ID") ??
-  env.VITE_CUSTOM_CHAIN_CHAIN_ID;
+  localStorage.getItem("VITE_CUSTOM_CHAIN_CHAIN_ID") ||
+  import.meta.env.VITE_CUSTOM_CHAIN_CHAIN_ID;
 const VITE_WALLET_CONNECT_PROJECT_ID =
-  localStorage.getItem("VITE_WALLET_CONNECT_PROJECT_ID") ??
-  env.VITE_WALLET_CONNECT_PROJECT_ID;
+  localStorage.getItem("VITE_WALLET_CONNECT_PROJECT_ID") ||
+  import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID;
 const VITE_SEPOLIA_RPC_URL =
-  localStorage.getItem("VITE_SEPOLIA_RPC_URL") ?? env.VITE_SEPOLIA_RPC_URL;
+  localStorage.getItem("VITE_SEPOLIA_RPC_URL") ||
+  import.meta.env.VITE_SEPOLIA_RPC_URL;
 const VITE_MAINNET_RPC_URL =
-  localStorage.getItem("VITE_MAINNET_RPC_URL") ?? env.VITE_MAINNET_RPC_URL;
+  localStorage.getItem("VITE_MAINNET_RPC_URL") ||
+  import.meta.env.VITE_MAINNET_RPC_URL;
 const VITE_LINEA_RPC_URL =
-  localStorage.getItem("VITE_LINEA_RPC_URL") ?? env.VITE_LINEA_RPC_URL;
+  localStorage.getItem("VITE_LINEA_RPC_URL") ||
+  import.meta.env.VITE_LINEA_RPC_URL;
 const VITE_BASE_RPC_URL =
-  localStorage.getItem("VITE_BASE_RPC_URL") ?? env.VITE_BASE_RPC_URL;
+  localStorage.getItem("VITE_BASE_RPC_URL") ||
+  import.meta.env.VITE_BASE_RPC_URL;
 const VITE_GNOSIS_FORK_NODE_RPC_URL =
-  localStorage.getItem("VITE_GNOSIS_FORK_NODE_RPC_URL") ??
-  env.VITE_GNOSIS_FORK_NODE_RPC_URL;
+  localStorage.getItem("VITE_GNOSIS_FORK_NODE_RPC_URL") ||
+  import.meta.env.VITE_GNOSIS_FORK_NODE_RPC_URL;
 const VITE_GNOSIS_FORK_CHAIN_ID =
-  localStorage.getItem("VITE_GNOSIS_FORK_CHAIN_ID") ??
-  env.VITE_GNOSIS_FORK_CHAIN_ID;
+  localStorage.getItem("VITE_GNOSIS_FORK_CHAIN_ID") ||
+  import.meta.env.VITE_GNOSIS_FORK_CHAIN_ID;
 const VITE_GNOSIS_NODE_RPC_URL =
-  localStorage.getItem("VITE_GNOSIS_NODE_RPC_URL") ??
-  env.VITE_GNOSIS_NODE_RPC_URL;
+  localStorage.getItem("VITE_GNOSIS_NODE_RPC_URL") ||
+  import.meta.env.VITE_GNOSIS_NODE_RPC_URL;
 
 interface WagmiClientConfig {
   rpcUrl: string;
diff --git a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
index f5a90b2c7..c65d57b35 100644
--- a/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
+++ b/apps/hyperdrive-trading/src/ui/app/Navbar/Navbar.tsx
@@ -9,6 +9,7 @@ import { ExternalLink } from "src/ui/analytics/ExternalLink";
 import { useAnalyticsUrl } from "src/ui/analytics/useMarketAnalyticsUrl";
 import { HyperdriveLogo } from "src/ui/app/Navbar/HyperdriveLogo";
 import { useIsTailwindSmallScreen } from "src/ui/base/mediaBreakpoints";
+import { RpcForm } from "src/ui/chains/RpcForm";
 
 export function Navbar(): ReactElement {
   const analyticsUrl = useAnalyticsUrl();
@@ -40,6 +41,7 @@ export function Navbar(): ReactElement {
           <ArrowTopRightOnSquareIcon className="-mt-0.5 inline h-4" />
         </ExternalLink>
 
+        <RpcForm />
         <ConnectButton
           accountStatus={isTailwindSmall ? "avatar" : "full"}
           showBalance={false}
diff --git a/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx b/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx
index 5b6284ccf..325e90fd1 100644
--- a/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/chains/RpcForm.tsx
@@ -1,20 +1,90 @@
-import { ReactElement } from "react";
+import { ReactElement, useState } from "react";
+
+// All the RPC endpoints that have been configured and are therefore used in
+// this deployment of the UI
+const configuredRpcEndpoints = [
+  ["Hardhat", "VITE_LOCALHOST_NODE_RPC_URL"],
+  ["CloudChain", "VITE_CUSTOM_CHAIN_NODE_RPC_URL"],
+  ["Mainnet", "VITE_MAINNET_RPC_URL"],
+  ["Linea", "VITE_LINEA_RPC_URL"],
+  ["Base", "VITE_BASE_RPC_URL"],
+  ["Gnosischain", "VITE_GNOSIS_NODE_RPC_URL"],
+  ["GnosisFork", "VITE_GNOSIS_FORK_NODE_RPC_URL"],
+]
+  .filter(([unusedName, key]) => typeof import.meta.env[key] !== "undefined")
+  .map(([name, key]) => {
+    return [name, key, localStorage.getItem(key) || import.meta.env[key]];
+  });
 
 export function RpcForm(): ReactElement {
   return (
-    <div className="daisy-dropdown">
-      <div tabIndex={0} role="button" className="daisy-btn m-1">
-        Click
-      </div>
-      <div
-        tabIndex={0}
-        className="daisy-card daisy-dropdown-content daisy-card-compact z-[1] w-64 bg-primary p-2 text-primary-content shadow"
+    <>
+      {/* Open the modal using document.getElementById('ID').showModal() method */}
+      <button
+        className="daisy-btn m-1 rounded-full"
+        // @ts-expect-error rpcModal is a Dialog element, and React doesn't
+        // provide the correct types for now
+        onClick={() => document.getElementById("rpcModal")?.showModal()}
       >
-        <div className="daisy-card-body">
-          <h3 className="daisy-card-title">Card title!</h3>
-          <p>you can use any element as a dropdown.</p>
+        Configure RPC
+      </button>
+      <dialog id="rpcModal" className="daisy-modal">
+        <div className="daisy-modal-box w-[600px] max-w-[600px]">
+          <div className="daisy-card-body">
+            <h3 className="daisy-card-title">RPC URLs</h3>
+            <p>Refresh after saving to see changes</p>
+            {configuredRpcEndpoints.map(([name, key, rpcUrl]) => {
+              return (
+                <RpcInput
+                  key={key}
+                  rpcName={name}
+                  rpcKey={key}
+                  rpcUrl={rpcUrl}
+                />
+              );
+            })}
+          </div>
+          <div className="daisy-modal-action">
+            <form method="dialog">
+              {/* if there is a button in form, it will close the modal */}
+              <button className="daisy-btn">Close</button>
+            </form>
+          </div>
         </div>
+      </dialog>
+    </>
+  );
+}
+
+function RpcInput({
+  rpcName,
+  rpcUrl,
+  rpcKey,
+}: {
+  rpcName: string;
+  rpcUrl: string;
+  rpcKey: string;
+}) {
+  const [rpcUrlDraft, setRpcUrlDraft] = useState(rpcUrl);
+  return (
+    <div className="daisy-join">
+      <div className="daisy-btn daisy-join-item daisy-btn-neutral">
+        {rpcName}
       </div>
+      <input
+        type="text"
+        value={rpcUrlDraft}
+        onChange={(e) => setRpcUrlDraft(e.target.value)}
+        className="daisy-input daisy-join-item w-full"
+      />
+      <button
+        onClick={() => {
+          localStorage.setItem(rpcKey, rpcUrlDraft);
+        }}
+        className="daisy-btn daisy-btn-primary daisy-join-item"
+      >
+        Save
+      </button>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/main.tsx b/apps/hyperdrive-trading/src/ui/main.tsx
index 8a1fe93ae..3fd05bc3a 100644
--- a/apps/hyperdrive-trading/src/ui/main.tsx
+++ b/apps/hyperdrive-trading/src/ui/main.tsx
@@ -21,7 +21,6 @@ import { wagmiConfig } from "src/network/wagmiClient";
 import { Plausible } from "src/ui/analytics/Plausible";
 import { App } from "src/ui/app/App/App";
 import ToastProvider from "src/ui/base/components/Toaster/ToastProvider";
-import { RpcForm } from "src/ui/chains/RpcForm";
 import { RegionInfoProvider } from "src/ui/compliance/hooks/useRegionInfo";
 import "src/ui/globals.css";
 import { logAppVersion } from "src/ui/version/logAppVersion";
@@ -76,7 +75,6 @@ root.render(
             <RollbarErrorBoundary>
               <RegionInfoProvider>
                 <App />
-                <RpcForm />
               </RegionInfoProvider>
             </RollbarErrorBoundary>
           </RollbarProvider>