From d6025b07606071b298a816cb0099ed2167ed43f3 Mon Sep 17 00:00:00 2001
From: "Shiv Bhonde | shivbhonde.eth" <shivbhonde04@gmail.com>
Date: Tue, 16 Jul 2024 21:29:16 +0530
Subject: [PATCH] add blockexplorer input in add chain form (#132)

---
 .../NetworksDropdown/AddCustomChainModal.tsx           |  6 ++++++
 .../components/NetworksDropdown/NetworksDropdown.tsx   |  5 ++++-
 packages/nextjs/components/NetworksDropdown/utils.ts   | 10 ++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx b/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx
index 35ca5224..3699d4f6 100644
--- a/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx
+++ b/packages/nextjs/components/NetworksDropdown/AddCustomChainModal.tsx
@@ -109,6 +109,12 @@ export const AddCustomChainModal = forwardRef<HTMLDialogElement, AddCustomChainM
             </label>
             <input type="text" name="rpcUrl" className="input input-bordered bg-neutral" required />
           </div>
+          <div className="form-control">
+            <label className="label">
+              <span className="label-text">Block explorer link (optional)</span>
+            </label>
+            <input type="text" name="blockExplorer" className="input input-bordered bg-neutral" />
+          </div>
           <div className="form-control flex-row mt-4 items-center gap-4">
             <label className="label">
               <span className="label-text">Testnet?</span>
diff --git a/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx
index dd527832..eae6ea37 100644
--- a/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx
+++ b/packages/nextjs/components/NetworksDropdown/NetworksDropdown.tsx
@@ -14,6 +14,7 @@ import {
 import { useTheme } from "next-themes";
 import Select, { MultiValue, SingleValue } from "react-select";
 import { Chain } from "viem";
+import { mainnet } from "viem/chains";
 import { AddCustomChainModal, CustomOption, OtherChainsModal } from "~~/components/NetworksDropdown";
 import { useGlobalState } from "~~/services/store/store";
 
@@ -23,9 +24,10 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
   const [groupedOptionsState, setGroupedOptionsState] = useState(initialGroupedOptions);
   const [selectedOption, setSelectedOption] = useState<SingleValue<Options>>(initialGroupedOptions.mainnet.options[0]);
 
-  const { addCustomChain, removeChain } = useGlobalState(state => ({
+  const { addCustomChain, removeChain, resetTargetNetwork } = useGlobalState(state => ({
     addCustomChain: state.addChain,
     removeChain: state.removeChain,
+    resetTargetNetwork: () => state.setTargetNetwork(mainnet),
   }));
 
   const seeOtherChainsModalRef = useRef<HTMLDialogElement>(null);
@@ -108,6 +110,7 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
 
     removeChain(chainId);
     removeChainFromLocalStorage(chainId);
+    resetTargetNetwork();
 
     const newGroupedOptions = { ...groupedOptionsState };
     const groupName = option.testnet ? "testnet" : "mainnet";
diff --git a/packages/nextjs/components/NetworksDropdown/utils.ts b/packages/nextjs/components/NetworksDropdown/utils.ts
index bd8779bc..7072229b 100644
--- a/packages/nextjs/components/NetworksDropdown/utils.ts
+++ b/packages/nextjs/components/NetworksDropdown/utils.ts
@@ -133,6 +133,15 @@ export const removeChainFromLocalStorage = (chainId: number) => {
 };
 
 export const formDataToChain = (formData: FormData): Chain => {
+  const blockExplorers: Chain["blockExplorers"] | undefined = Boolean(formData.get("blockExplorer"))
+    ? {
+        default: {
+          name: "Block Explorer",
+          url: formData.get("blockExplorer") as string,
+        },
+      }
+    : undefined;
+
   const chain = {
     id: Number(formData.get("id")),
     name: formData.get("name") as string,
@@ -146,6 +155,7 @@ export const formDataToChain = (formData: FormData): Chain => {
       default: { http: [formData.get("rpcUrl") as string] },
     },
     testnet: formData.get("testnet") === "on",
+    blockExplorers,
   } as const satisfies Chain;
 
   return chain;