From d99b9060e14739ac2f83a986a71d4725efde3ab3 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Sun, 10 Mar 2024 12:50:07 +0300
Subject: [PATCH 01/23] Decompile ABI using a heimdall-rs backend

---
 packages/nextjs/pages/index.tsx | 200 ++++++++++++++++++++------------
 1 file changed, 123 insertions(+), 77 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 1cccdd91..24584ad6 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -18,6 +18,11 @@ enum TabName {
   addressAbi,
 }
 
+enum AbiInputMethod {
+  Manual,
+  Heimdall,
+}
+
 const tabValues = Object.values(TabName) as TabName[];
 
 const networks = getTargetNetworks();
@@ -29,8 +34,7 @@ const Home: NextPage = () => {
   const [localAbiContractAddress, setLocalAbiContractAddress] = useState("");
   const [localContractAbi, setLocalContractAbi] = useState("");
   const [isFetchingAbi, setIsFetchingAbi] = useState(false);
-  const [isCheckingContractAddress, setIsCheckingContractAddress] = useState(false);
-  const [isContract, setIsContract] = useState(false);
+  const [abiInputMethod, setAbiInputMethod] = useState(AbiInputMethod.Manual);
 
   const publicClient = usePublicClient({
     chainId: parseInt(network),
@@ -64,7 +68,25 @@ const Home: NextPage = () => {
         } catch (etherscanError: any) {
           setIsAbiAvailable(false);
           console.error("Error fetching ABI from Etherscan: ", etherscanError);
-          notification.error(etherscanError.message || "Error occurred while fetching ABI");
+
+          const bytecode = await publicClient.getBytecode({
+            address: verifiedContractAddress,
+          });
+          const isContract = Boolean(bytecode) && bytecode !== "0x";
+
+          if (isContract) {
+            notification.error(
+              "The contract is not verified on Etherscan. Please provide ABI manually or decompile ABI(experimental)",
+              {
+                duration: 10000,
+                position: "bottom-left",
+              },
+            );
+            setLocalAbiContractAddress(verifiedContractAddress);
+            setActiveTab(TabName.addressAbi);
+          } else {
+            notification.error("Address is not a contract, are you sure you are on the correct chain?");
+          }
         }
       } finally {
         setIsFetchingAbi(false);
@@ -82,35 +104,6 @@ const Home: NextPage = () => {
     }
   }, [verifiedContractAddress, network, setContractAbi]);
 
-  useEffect(() => {
-    const checkContract = async () => {
-      if (!isAddress(localAbiContractAddress)) {
-        setIsContract(false);
-        return;
-      }
-
-      setIsCheckingContractAddress(true);
-      try {
-        const bytecode = await publicClient.getBytecode({
-          address: localAbiContractAddress,
-        });
-        const isContract = Boolean(bytecode) && bytecode !== "0x";
-        setIsContract(isContract);
-
-        if (!isContract) {
-          notification.error("Address is not a contract");
-        }
-      } catch (e) {
-        notification.error("Error while checking for contract address");
-        setIsContract(false);
-      } finally {
-        setIsCheckingContractAddress(false);
-      }
-    };
-
-    checkContract();
-  }, [localAbiContractAddress, publicClient]);
-
   useEffect(() => {
     if (router.pathname === "/") {
       setContractAbi([]);
@@ -118,9 +111,9 @@ const Home: NextPage = () => {
   }, [router.pathname, setContractAbi]);
 
   const handleLoadContract = () => {
-    if (activeTab === TabName.verifiedContract) {
+    if (isAbiAvailable) {
       router.push(`/${verifiedContractAddress}/${network}`);
-    } else if (activeTab === TabName.addressAbi) {
+    } else if (localContractAbi.length > 0) {
       try {
         setContractAbi(parseAndCorrectJSON(localContractAbi));
       } catch (error) {
@@ -129,6 +122,26 @@ const Home: NextPage = () => {
       }
       setAbiContractAddress(localAbiContractAddress);
       router.push(`/${localAbiContractAddress}/${network}`);
+    } else {
+      fetchAbiFromHeimdall(localAbiContractAddress);
+    }
+  };
+
+  const fetchAbiFromHeimdall = async (contractAddress: string) => {
+    setIsFetchingAbi(true);
+    try {
+      const response = await fetch(`https://heimdall-api-cool-frog-2068.fly.dev/${network}/${contractAddress}`);
+      const abi = await response.json();
+      setContractAbi(abi);
+      setIsAbiAvailable(true);
+      setAbiContractAddress(contractAddress);
+      router.push(`/${contractAddress}/${network}`);
+    } catch (error) {
+      console.error("Error fetching ABI from Heimdall: ", error);
+      notification.error("Failed to fetch ABI from Heimdall. Please try again or enter ABI manually.");
+      setIsAbiAvailable(false);
+    } finally {
+      setIsFetchingAbi(false);
     }
   };
 
@@ -145,31 +158,6 @@ const Home: NextPage = () => {
               <NetworksDropdown onChange={option => setNetwork(option ? option.value.toString() : "")} />
             </div>
 
-            <div role="tablist" className="flex w-full border-b">
-              <a
-                role="tab"
-                className={`inline-block px-2 py-2 text-sm w-full font-medium text-center border-b-2 hover:cursor-pointer ${
-                  activeTab === TabName.verifiedContract
-                    ? "border-purple-500"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                }`}
-                onClick={() => setActiveTab(TabName.verifiedContract)}
-              >
-                Verified Contract
-              </a>
-              <a
-                role="tab"
-                className={`inline-block px-4 py-2 text-sm w-full font-medium text-center border-b-2 hover:cursor-pointer ${
-                  activeTab === TabName.addressAbi
-                    ? "border-purple-500"
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                }`}
-                onClick={() => setActiveTab(TabName.addressAbi)}
-              >
-                Address + ABI
-              </a>
-            </div>
-
             <div className="relative min-h-[150px] w-full overflow-hidden">
               <div className="flex">
                 {tabValues.map(tabValue => (
@@ -187,7 +175,7 @@ const Home: NextPage = () => {
                       <div className="my-4">
                         <AddressInput
                           value={verifiedContractAddress}
-                          placeholder="Verified contract address"
+                          placeholder="Contract address"
                           onChange={setVerifiedContractAddress}
                         />
                         <div className="flex flex-col text-sm">
@@ -218,38 +206,96 @@ const Home: NextPage = () => {
                         </div>
                       </div>
                     ) : (
-                      <div className="my-4 flex w-full flex-col gap-3">
-                        <AddressInput
-                          placeholder="Contract address"
-                          value={localAbiContractAddress}
-                          onChange={setLocalAbiContractAddress}
-                        />
-                        <InputBase
-                          placeholder="Contract ABI (json format)"
-                          value={localContractAbi}
-                          onChange={setLocalContractAbi}
-                        />
+                      <div className="flex w-full flex-col gap-3">
+                        {/* Tab navigation */}
+
+                        <div className="flex w-full border-b">
+                          <div
+                            role="tab"
+                            className={`inline-block px-4 py-2 text-xs font-medium text-center w-1/2 cursor-pointer ${
+                              abiInputMethod === AbiInputMethod.Manual
+                                ? "border-b-2 border-purple-500 text-purple-500"
+                                : "border-b-2 border-transparent text-gray-500 hover:text-purple-700"
+                            }`}
+                            onClick={() => setAbiInputMethod(AbiInputMethod.Manual)}
+                          >
+                            Input ABI Manually
+                          </div>
+                          <div
+                            role="tab"
+                            className={`inline-block px-4 py-2 text-xs font-medium text-center w-1/2 cursor-pointer ${
+                              abiInputMethod === AbiInputMethod.Heimdall
+                                ? "border-b-2 border-purple-500 text-purple-500"
+                                : "border-b-2 border-transparent text-gray-500 hover:text-purple-700"
+                            }`}
+                            onClick={() => setAbiInputMethod(AbiInputMethod.Heimdall)}
+                          >
+                            Decompile ABI
+                          </div>
+                        </div>
+
+                        {/* Content based on active tab */}
+                        {abiInputMethod === AbiInputMethod.Manual ? (
+                          <>
+                            <AddressInput
+                              placeholder="Contract address"
+                              value={localAbiContractAddress}
+                              onChange={setLocalAbiContractAddress}
+                            />
+                            <InputBase
+                              placeholder="Contract ABI (json format)"
+                              value={localContractAbi}
+                              onChange={setLocalContractAbi}
+                            />
+                          </>
+                        ) : (
+                          <>
+                            <AddressInput
+                              placeholder="Contract address"
+                              value={localAbiContractAddress}
+                              onChange={setLocalAbiContractAddress}
+                            />
+                          </>
+                        )}
                       </div>
                     )}
                   </div>
                 ))}
               </div>
+              {activeTab !== TabName.verifiedContract && abiInputMethod === AbiInputMethod.Heimdall && (
+                <div className="text-xs mt-24 text-center">
+                  Warning: this feature is experimental. You may lose funds if you interact with contracts using this
+                  feature.
+                </div>
+              )}
             </div>
 
+            {activeTab === TabName.addressAbi && (
+              <div
+                className="text-xs link link-primary absolute top-96"
+                onClick={() => {
+                  setActiveTab(TabName.verifiedContract);
+                  setVerifiedContractAddress("");
+                }}
+              >
+                ← go back
+              </div>
+            )}
+
             <button
               className="btn btn-primary px-8 text-base border-2 hover:bg-white hover:text-primary"
               onClick={handleLoadContract}
               disabled={
                 (activeTab === TabName.verifiedContract && (!isAbiAvailable || !verifiedContractAddress)) ||
                 (activeTab === TabName.addressAbi &&
-                  (!isContract || !localContractAbi || localContractAbi.length === 0))
+                  abiInputMethod === AbiInputMethod.Manual &&
+                  (!localContractAbi || localContractAbi.length === 0)) ||
+                (activeTab === TabName.addressAbi &&
+                  abiInputMethod === AbiInputMethod.Heimdall &&
+                  !isAddress(localAbiContractAddress))
               }
             >
-              {isFetchingAbi || isCheckingContractAddress ? (
-                <span className="loading loading-spinner"></span>
-              ) : (
-                "Load Contract"
-              )}
+              {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Load Contract"}
             </button>
           </div>
           <MiniFooter />

From ce5d6e8128d68d87bf3fa1a1783454a98ac9db7a Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Tue, 12 Mar 2024 20:34:44 +0300
Subject: [PATCH 02/23] Better placement of go back button and input

---
 packages/nextjs/pages/index.tsx | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 24584ad6..52c205be 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -154,11 +154,23 @@ const Home: NextPage = () => {
             <Image src="/logo_inv.svg" alt="logo" width={128} height={128} className="mb-4" />
             <h2 className="mb-0 text-5xl font-bold">ABI Ninja</h2>
             <p className="">Interact with any contract on Ethereum</p>
-            <div className="my-4">
+            <div className="mt-4">
               <NetworksDropdown onChange={option => setNetwork(option ? option.value.toString() : "")} />
             </div>
-
-            <div className="relative min-h-[150px] w-full overflow-hidden">
+            {activeTab === TabName.addressAbi && (
+              <div
+                className="text-sm link link-primary my-2"
+                onClick={() => {
+                  setActiveTab(TabName.verifiedContract);
+                  setVerifiedContractAddress("");
+                }}
+              >
+                ← go back
+              </div>
+            )}
+            {/* placeholder to match height @todo make this better, bad practice! */}
+            {activeTab === TabName.verifiedContract && <div className="text-sm text-white my-2">‎</div>}
+            <div className="relative min-h-[150px] overflow-hidden w-[375px]">
               <div className="flex">
                 {tabValues.map(tabValue => (
                   <div
@@ -208,11 +220,10 @@ const Home: NextPage = () => {
                     ) : (
                       <div className="flex w-full flex-col gap-3">
                         {/* Tab navigation */}
-
                         <div className="flex w-full border-b">
                           <div
                             role="tab"
-                            className={`inline-block px-4 py-2 text-xs font-medium text-center w-1/2 cursor-pointer ${
+                            className={`inline-block px-4 py-2 text-xs whitespace-nowrap font-medium text-center w-1/2 cursor-pointer ${
                               abiInputMethod === AbiInputMethod.Manual
                                 ? "border-b-2 border-purple-500 text-purple-500"
                                 : "border-b-2 border-transparent text-gray-500 hover:text-purple-700"
@@ -270,18 +281,6 @@ const Home: NextPage = () => {
               )}
             </div>
 
-            {activeTab === TabName.addressAbi && (
-              <div
-                className="text-xs link link-primary absolute top-96"
-                onClick={() => {
-                  setActiveTab(TabName.verifiedContract);
-                  setVerifiedContractAddress("");
-                }}
-              >
-                ← go back
-              </div>
-            )}
-
             <button
               className="btn btn-primary px-8 text-base border-2 hover:bg-white hover:text-primary"
               onClick={handleLoadContract}

From a61711978c0eab3a6fc88028cfaa875614fe8cea Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 13 Mar 2024 22:06:52 +0300
Subject: [PATCH 03/23] Update backend link

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 52c205be..79c1f381 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -130,7 +130,7 @@ const Home: NextPage = () => {
   const fetchAbiFromHeimdall = async (contractAddress: string) => {
     setIsFetchingAbi(true);
     try {
-      const response = await fetch(`https://heimdall-api-cool-frog-2068.fly.dev/${network}/${contractAddress}`);
+      const response = await fetch(`https://heimdall-api.fly.dev/${network}/${contractAddress}`);
       const abi = await response.json();
       setContractAbi(abi);
       setIsAbiAvailable(true);

From cf63ece0f0e6cbc881cbf5862d869af1bd295652 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Fri, 15 Mar 2024 10:49:10 +0300
Subject: [PATCH 04/23] Fix eslint warning

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 79c1f381..347dab07 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -102,7 +102,7 @@ const Home: NextPage = () => {
     } else {
       setIsAbiAvailable(false);
     }
-  }, [verifiedContractAddress, network, setContractAbi]);
+  }, [verifiedContractAddress, network, setContractAbi, publicClient]);
 
   useEffect(() => {
     if (router.pathname === "/") {

From 63b23dbdec22dd650ac49bbdc8113be0db4a1e34 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Thu, 28 Mar 2024 23:28:23 +0300
Subject: [PATCH 05/23] Add additionalClasses param to networksdropdown

---
 packages/nextjs/components/NetworksDropdown.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/components/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown.tsx
index 69570271..fb8e893b 100644
--- a/packages/nextjs/components/NetworksDropdown.tsx
+++ b/packages/nextjs/components/NetworksDropdown.tsx
@@ -56,7 +56,13 @@ const IconOption = (props: OptionProps<Options>) => (
   </Option>
 );
 
-export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any }) => {
+export const NetworksDropdown = ({
+  onChange,
+  additionalClasses,
+}: {
+  onChange: (options: any) => any;
+  additionalClasses?: string;
+}) => {
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -78,7 +84,7 @@ export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any
       onChange={onChange}
       components={{ Option: IconOption }}
       isSearchable={!isMobile}
-      className="text-sm w-44 max-w-xs bg-white relative"
+      className={`max-w-xs bg-white relative ${additionalClasses ? additionalClasses : "text-sm w-44"}`}
       theme={theme => ({
         ...theme,
         colors: {

From a95a6a40507b3c4a5ea64e68e02a56f908ecd90a Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Thu, 28 Mar 2024 23:29:12 +0300
Subject: [PATCH 06/23] Update ui, merging the current style with the suggested
 style

---
 packages/nextjs/pages/index.tsx | 285 ++++++++++++++------------------
 1 file changed, 127 insertions(+), 158 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 347dab07..344f40b8 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -5,10 +5,11 @@ import { useRouter } from "next/router";
 import type { NextPage } from "next";
 import { Address, isAddress } from "viem";
 import { usePublicClient } from "wagmi";
+import { ChevronLeftIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { MiniFooter } from "~~/components/MiniFooter";
 import { NetworksDropdown } from "~~/components/NetworksDropdown";
-import { AddressInput, InputBase } from "~~/components/scaffold-eth";
+import { AddressInput } from "~~/components/scaffold-eth";
 import { useAbiNinjaState } from "~~/services/store/store";
 import { fetchContractABIFromAnyABI, fetchContractABIFromEtherscan, parseAndCorrectJSON } from "~~/utils/abi";
 import { getTargetNetworks, notification } from "~~/utils/scaffold-eth";
@@ -18,11 +19,6 @@ enum TabName {
   addressAbi,
 }
 
-enum AbiInputMethod {
-  Manual,
-  Heimdall,
-}
-
 const tabValues = Object.values(TabName) as TabName[];
 
 const networks = getTargetNetworks();
@@ -34,7 +30,6 @@ const Home: NextPage = () => {
   const [localAbiContractAddress, setLocalAbiContractAddress] = useState("");
   const [localContractAbi, setLocalContractAbi] = useState("");
   const [isFetchingAbi, setIsFetchingAbi] = useState(false);
-  const [abiInputMethod, setAbiInputMethod] = useState(AbiInputMethod.Manual);
 
   const publicClient = usePublicClient({
     chainId: parseInt(network),
@@ -95,7 +90,7 @@ const Home: NextPage = () => {
 
     if (isAddress(verifiedContractAddress)) {
       if (network === "31337") {
-        notification.error("To interact with Localhost contracts, please use Address + ABI tab");
+        setActiveTab(TabName.addressAbi);
         return;
       }
       fetchContractAbi();
@@ -113,17 +108,21 @@ const Home: NextPage = () => {
   const handleLoadContract = () => {
     if (isAbiAvailable) {
       router.push(`/${verifiedContractAddress}/${network}`);
-    } else if (localContractAbi.length > 0) {
-      try {
-        setContractAbi(parseAndCorrectJSON(localContractAbi));
-      } catch (error) {
-        notification.error("Invalid ABI format. Please ensure it is a valid JSON.");
-        return;
-      }
-      setAbiContractAddress(localAbiContractAddress);
+    }
+  };
+
+  const handleUserProvidedAbi = () => {
+    if (!localContractAbi) {
+      notification.error("Please provide an ABI.");
+      return;
+    }
+    try {
+      const parsedAbi = parseAndCorrectJSON(localContractAbi);
+      setContractAbi(parsedAbi);
       router.push(`/${localAbiContractAddress}/${network}`);
-    } else {
-      fetchAbiFromHeimdall(localAbiContractAddress);
+      notification.success("ABI successfully loaded.");
+    } catch (error) {
+      notification.error("Invalid ABI format. Please ensure it is a valid JSON.");
     }
   };
 
@@ -149,155 +148,125 @@ const Home: NextPage = () => {
     <>
       <MetaHeader />
       <div className="flex flex-grow items-center justify-center bg-base-100">
-        <div className="flex h-screen w-full flex-col items-center justify-center rounded-2xl bg-white p-2 lg:h-[650px] lg:w-[450px] lg:justify-between lg:shadow-xl">
-          <div className="mt-10 flex flex-col items-center justify-center lg:w-10/12">
-            <Image src="/logo_inv.svg" alt="logo" width={128} height={128} className="mb-4" />
-            <h2 className="mb-0 text-5xl font-bold">ABI Ninja</h2>
-            <p className="">Interact with any contract on Ethereum</p>
-            <div className="mt-4">
-              <NetworksDropdown onChange={option => setNetwork(option ? option.value.toString() : "")} />
-            </div>
-            {activeTab === TabName.addressAbi && (
+        <div className="flex h-screen relative overflow-x-hidden w-full flex-col items-center justify-center rounded-2xl bg-white p-2 lg:h-[650px] lg:w-[450px] lg:justify-between lg:shadow-xl">
+          <div className="flex-grow flex flex-col items-center justify-center lg:w-full">
+            {tabValues.map(tabValue => (
               <div
-                className="text-sm link link-primary my-2"
-                onClick={() => {
-                  setActiveTab(TabName.verifiedContract);
-                  setVerifiedContractAddress("");
-                }}
+                key={tabValue}
+                className={`absolute flex flex-col justify-center inset-0 w-full transition-transform duration-300 ease-in-out px-1 ${
+                  activeTab === tabValue
+                    ? "translate-x-0"
+                    : activeTab < tabValue
+                    ? "translate-x-full"
+                    : "-translate-x-full"
+                }`}
               >
-                ← go back
-              </div>
-            )}
-            {/* placeholder to match height @todo make this better, bad practice! */}
-            {activeTab === TabName.verifiedContract && <div className="text-sm text-white my-2">‎</div>}
-            <div className="relative min-h-[150px] overflow-hidden w-[375px]">
-              <div className="flex">
-                {tabValues.map(tabValue => (
-                  <div
-                    key={tabValue}
-                    className={`absolute inset-0 w-full transition-transform duration-300 ease-in-out px-1 ${
-                      activeTab === tabValue
-                        ? "translate-x-0"
-                        : activeTab < tabValue
-                        ? "translate-x-full"
-                        : "-translate-x-full"
-                    }`}
-                  >
-                    {tabValue === TabName.verifiedContract ? (
-                      <div className="my-4">
-                        <AddressInput
-                          value={verifiedContractAddress}
-                          placeholder="Contract address"
-                          onChange={setVerifiedContractAddress}
+                {tabValue === TabName.verifiedContract ? (
+                  <div className="my-16 flex flex-col items-center justify-center">
+                    <Image src="/logo_inv.svg" alt="logo" width={128} height={128} className="mb-4" />
+                    <h2 className="mb-0 text-5xl font-bold">ABI Ninja</h2>
+                    <p>Interact with any contract on Ethereum</p>
+                    <div className="mt-4">
+                      <NetworksDropdown onChange={option => setNetwork(option ? option.value.toString() : "")} />
+                    </div>
+
+                    <div className="w-10/12 my-8">
+                      <AddressInput
+                        placeholder="Contract address"
+                        value={verifiedContractAddress}
+                        onChange={setVerifiedContractAddress}
+                      />
+                    </div>
+
+                    <button
+                      className="btn btn-primary px-8 text-base border-2 hover:bg-white hover:text-primary"
+                      onClick={handleLoadContract}
+                      disabled={!isAbiAvailable}
+                    >
+                      {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Load Contract"}
+                    </button>
+                    <div className="flex flex-col text-sm w-4/5">
+                      <div className="mb-2 mt-4 text-center font-semibold">Quick Access</div>
+                      <div className="flex justify-center w-full">
+                        <Link
+                          href="/0x6B175474E89094C44Da98b954EedeAC495271d0F/1"
+                          passHref
+                          className="link w-1/3 text-center text-purple-700 no-underline"
+                        >
+                          DAI
+                        </Link>
+                        <Link
+                          href="/0xde30da39c46104798bb5aa3fe8b9e0e1f348163f/1"
+                          passHref
+                          className="link w-1/3 text-center text-purple-700 no-underline"
+                        >
+                          Gitcoin
+                        </Link>
+                        <Link
+                          href="/0x00000000006c3852cbef3e08e8df289169ede581/1"
+                          passHref
+                          className="link w-1/3 text-center text-purple-700 no-underline"
+                        >
+                          Opensea
+                        </Link>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex w-full flex-col items-center gap-3 p-6">
+                    <div className="flex justify-center mb-6">
+                      <button
+                        className="btn btn-ghost absolute left-4 px-2 btn-primary"
+                        onClick={() => {
+                          setActiveTab(TabName.verifiedContract);
+                          setVerifiedContractAddress("");
+                        }}
+                      >
+                        <ChevronLeftIcon className="h-4 w-4" />
+                        Go back
+                      </button>
+                      <Image src="/logo_inv.svg" alt="logo" width={64} height={64} className="mb-4" />
+                      <div className="absolute top-8 right-4">
+                        <NetworksDropdown
+                          onChange={option => setNetwork(option ? option.value.toString() : "")}
+                          additionalClasses="text-xs w-28"
                         />
-                        <div className="flex flex-col text-sm">
-                          <div className="mb-2 mt-4 text-center font-semibold">Quick Access</div>
-                          <div className="flex justify-around">
-                            <Link
-                              href="/0x6B175474E89094C44Da98b954EedeAC495271d0F/1"
-                              passHref
-                              className="link w-1/3 text-center text-purple-700 no-underline"
-                            >
-                              DAI
-                            </Link>
-                            <Link
-                              href="/0xde30da39c46104798bb5aa3fe8b9e0e1f348163f/1"
-                              passHref
-                              className="link w-1/3 text-center text-purple-700 no-underline"
-                            >
-                              Gitcoin
-                            </Link>
-                            <Link
-                              href="/0x00000000006c3852cbef3e08e8df289169ede581/1"
-                              passHref
-                              className="link w-1/3 text-center text-purple-700 no-underline"
-                            >
-                              Opensea
-                            </Link>
-                          </div>
-                        </div>
                       </div>
-                    ) : (
-                      <div className="flex w-full flex-col gap-3">
-                        {/* Tab navigation */}
-                        <div className="flex w-full border-b">
-                          <div
-                            role="tab"
-                            className={`inline-block px-4 py-2 text-xs whitespace-nowrap font-medium text-center w-1/2 cursor-pointer ${
-                              abiInputMethod === AbiInputMethod.Manual
-                                ? "border-b-2 border-purple-500 text-purple-500"
-                                : "border-b-2 border-transparent text-gray-500 hover:text-purple-700"
-                            }`}
-                            onClick={() => setAbiInputMethod(AbiInputMethod.Manual)}
-                          >
-                            Input ABI Manually
-                          </div>
-                          <div
-                            role="tab"
-                            className={`inline-block px-4 py-2 text-xs font-medium text-center w-1/2 cursor-pointer ${
-                              abiInputMethod === AbiInputMethod.Heimdall
-                                ? "border-b-2 border-purple-500 text-purple-500"
-                                : "border-b-2 border-transparent text-gray-500 hover:text-purple-700"
-                            }`}
-                            onClick={() => setAbiInputMethod(AbiInputMethod.Heimdall)}
-                          >
-                            Decompile ABI
-                          </div>
-                        </div>
+                    </div>
 
-                        {/* Content based on active tab */}
-                        {abiInputMethod === AbiInputMethod.Manual ? (
-                          <>
-                            <AddressInput
-                              placeholder="Contract address"
-                              value={localAbiContractAddress}
-                              onChange={setLocalAbiContractAddress}
-                            />
-                            <InputBase
-                              placeholder="Contract ABI (json format)"
-                              value={localContractAbi}
-                              onChange={setLocalContractAbi}
-                            />
-                          </>
-                        ) : (
-                          <>
-                            <AddressInput
-                              placeholder="Contract address"
-                              value={localAbiContractAddress}
-                              onChange={setLocalAbiContractAddress}
-                            />
-                          </>
-                        )}
+                    <div className="flex flex-col items-center w-4/5 border-b-2 pb-8">
+                      <div className="flex justify-center items-center gap-1">
+                        <MagnifyingGlassIcon className="h-5 w-5" />
+                        <h1 className="font-semibold text-lg mb-0">Contract not verified</h1>
                       </div>
-                    )}
+                      <p className="bg-slate-100 px-2 rounded-md border border-slate-300 text-sm shadow-sm">
+                        {localAbiContractAddress}
+                      </p>
+                      <h4 className="text-center mb-8 font-semibold">
+                        You can decompile the contract (beta) or import the ABI manually below.
+                      </h4>
+                      <button className="btn btn-primary" onClick={() => fetchAbiFromHeimdall(localAbiContractAddress)}>
+                        {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Decompile (beta)"}
+                      </button>
+                    </div>
+                    <div className="w-full flex flex-col items-center gap-1">
+                      <h1 className="mt-4 font-semibold text-lg">Manually import ABI</h1>
+                      <textarea
+                        className="textarea bg-slate-100 w-4/5 h-24 mb-4 resize-none"
+                        placeholder="Paste contract ABI in JSON format here"
+                        value={localContractAbi}
+                        onChange={e => setLocalContractAbi(e.target.value)}
+                      ></textarea>
+                      <button className="btn btn-primary" onClick={handleUserProvidedAbi}>
+                        Import ABI
+                      </button>
+                    </div>
                   </div>
-                ))}
+                )}
               </div>
-              {activeTab !== TabName.verifiedContract && abiInputMethod === AbiInputMethod.Heimdall && (
-                <div className="text-xs mt-24 text-center">
-                  Warning: this feature is experimental. You may lose funds if you interact with contracts using this
-                  feature.
-                </div>
-              )}
-            </div>
-
-            <button
-              className="btn btn-primary px-8 text-base border-2 hover:bg-white hover:text-primary"
-              onClick={handleLoadContract}
-              disabled={
-                (activeTab === TabName.verifiedContract && (!isAbiAvailable || !verifiedContractAddress)) ||
-                (activeTab === TabName.addressAbi &&
-                  abiInputMethod === AbiInputMethod.Manual &&
-                  (!localContractAbi || localContractAbi.length === 0)) ||
-                (activeTab === TabName.addressAbi &&
-                  abiInputMethod === AbiInputMethod.Heimdall &&
-                  !isAddress(localAbiContractAddress))
-              }
-            >
-              {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Load Contract"}
-            </button>
+            ))}
           </div>
-          <MiniFooter />
+          {activeTab === TabName.verifiedContract && <MiniFooter />}
         </div>
       </div>
     </>

From a2db5995814319bba61971f4a09836dc5c7da5d7 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Fri, 29 Mar 2024 00:27:55 +0100
Subject: [PATCH 07/23] Missing padding change from PR #75

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 344f40b8..b9375052 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -148,7 +148,7 @@ const Home: NextPage = () => {
     <>
       <MetaHeader />
       <div className="flex flex-grow items-center justify-center bg-base-100">
-        <div className="flex h-screen relative overflow-x-hidden w-full flex-col items-center justify-center rounded-2xl bg-white p-2 lg:h-[650px] lg:w-[450px] lg:justify-between lg:shadow-xl">
+        <div className="flex h-screen relative overflow-x-hidden w-full flex-col items-center justify-center rounded-2xl bg-white pb-4 lg:h-[650px] lg:w-[450px] lg:justify-between lg:shadow-xl">
           <div className="flex-grow flex flex-col items-center justify-center lg:w-full">
             {tabValues.map(tabValue => (
               <div

From 5a75ecaa4eea546706e0d71dbc76635019122a0d Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Fri, 29 Mar 2024 11:29:21 +0300
Subject: [PATCH 08/23] Remove err notif saying contract not verified

---
 packages/nextjs/pages/index.tsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index b9375052..a51bb4c4 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -70,13 +70,6 @@ const Home: NextPage = () => {
           const isContract = Boolean(bytecode) && bytecode !== "0x";
 
           if (isContract) {
-            notification.error(
-              "The contract is not verified on Etherscan. Please provide ABI manually or decompile ABI(experimental)",
-              {
-                duration: 10000,
-                position: "bottom-left",
-              },
-            );
             setLocalAbiContractAddress(verifiedContractAddress);
             setActiveTab(TabName.addressAbi);
           } else {

From 7f98e235f3ff2fb578629013f850e19a97a6978a Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Fri, 29 Mar 2024 11:31:18 +0300
Subject: [PATCH 09/23] Disable network dropdown in second step(abi/heimdall)

---
 packages/nextjs/pages/index.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index a51bb4c4..7aaec666 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -219,12 +219,6 @@ const Home: NextPage = () => {
                         Go back
                       </button>
                       <Image src="/logo_inv.svg" alt="logo" width={64} height={64} className="mb-4" />
-                      <div className="absolute top-8 right-4">
-                        <NetworksDropdown
-                          onChange={option => setNetwork(option ? option.value.toString() : "")}
-                          additionalClasses="text-xs w-28"
-                        />
-                      </div>
                     </div>
 
                     <div className="flex flex-col items-center w-4/5 border-b-2 pb-8">

From 267c0af118882fc1123778967403f174aa793801 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Fri, 29 Mar 2024 23:56:26 +0100
Subject: [PATCH 10/23] Small spacing tweaks on new screen

---
 packages/nextjs/pages/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 7aaec666..82bbdc64 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -218,7 +218,7 @@ const Home: NextPage = () => {
                         <ChevronLeftIcon className="h-4 w-4" />
                         Go back
                       </button>
-                      <Image src="/logo_inv.svg" alt="logo" width={64} height={64} className="mb-4" />
+                      <Image src="/logo_inv.svg" alt="logo" width={64} height={64} className="mb-2" />
                     </div>
 
                     <div className="flex flex-col items-center w-4/5 border-b-2 pb-8">
@@ -229,22 +229,22 @@ const Home: NextPage = () => {
                       <p className="bg-slate-100 px-2 rounded-md border border-slate-300 text-sm shadow-sm">
                         {localAbiContractAddress}
                       </p>
-                      <h4 className="text-center mb-8 font-semibold">
+                      <h4 className="text-center mb-6 font-semibold leading-tight">
                         You can decompile the contract (beta) or import the ABI manually below.
                       </h4>
                       <button className="btn btn-primary" onClick={() => fetchAbiFromHeimdall(localAbiContractAddress)}>
                         {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Decompile (beta)"}
                       </button>
                     </div>
-                    <div className="w-full flex flex-col items-center gap-1">
-                      <h1 className="mt-4 font-semibold text-lg">Manually import ABI</h1>
+                    <div className="w-full flex flex-col items-center gap-2">
+                      <h1 className="mt-2 font-semibold text-lg">Manually import ABI</h1>
                       <textarea
                         className="textarea bg-slate-100 w-4/5 h-24 mb-4 resize-none"
                         placeholder="Paste contract ABI in JSON format here"
                         value={localContractAbi}
                         onChange={e => setLocalContractAbi(e.target.value)}
                       ></textarea>
-                      <button className="btn btn-primary" onClick={handleUserProvidedAbi}>
+                      <button className="btn btn-primary mb-12" onClick={handleUserProvidedAbi}>
                         Import ABI
                       </button>
                     </div>

From f07871fe61e0faa647f7d96c63e0220aa3c58462 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 30 Mar 2024 00:13:58 +0100
Subject: [PATCH 11/23] Tweak homepage spacing

---
 packages/nextjs/pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 82bbdc64..a4d2952d 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -178,8 +178,8 @@ const Home: NextPage = () => {
                     >
                       {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Load Contract"}
                     </button>
-                    <div className="flex flex-col text-sm w-4/5">
-                      <div className="mb-2 mt-4 text-center font-semibold">Quick Access</div>
+                    <div className="flex flex-col text-sm w-4/5 mb-10 mt-14">
+                      <div className="mb-2 text-center font-semibold">Quick Access</div>
                       <div className="flex justify-center w-full">
                         <Link
                           href="/0x6B175474E89094C44Da98b954EedeAC495271d0F/1"

From 5c9c5954e462c143012c22c01b1d58a125c10dee Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 30 Mar 2024 00:14:48 +0100
Subject: [PATCH 12/23] Fix dropdown showing scrollbar on homepage

---
 packages/nextjs/components/NetworksDropdown.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nextjs/components/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown.tsx
index fb8e893b..b43c52e9 100644
--- a/packages/nextjs/components/NetworksDropdown.tsx
+++ b/packages/nextjs/components/NetworksDropdown.tsx
@@ -94,6 +94,9 @@ export const NetworksDropdown = ({
           primary: "#551d98",
         },
       })}
+      styles={{
+        menuList: provided => ({ ...provided, maxHeight: 280, overflow: "auto" }),
+      }}
     />
   );
 };

From 3345c3ccf21ef4f9a7529788c8a38b664211c6c9 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 30 Mar 2024 00:15:18 +0100
Subject: [PATCH 13/23] Fix footer not being clickable

---
 packages/nextjs/components/MiniFooter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/components/MiniFooter.tsx b/packages/nextjs/components/MiniFooter.tsx
index b1aff937..ad757317 100644
--- a/packages/nextjs/components/MiniFooter.tsx
+++ b/packages/nextjs/components/MiniFooter.tsx
@@ -3,7 +3,7 @@ import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 
 export const MiniFooter = () => {
   return (
-    <div className="flex justify-center items-center gap-1 text-xs w-full mt-10">
+    <div className="flex justify-center items-center gap-1 text-xs w-full mt-10 z-10">
       <div className="mb-1">
         <a href="https://github.com/BuidlGuidl/abi.ninja" target="_blank" rel="noreferrer" className="link">
           Fork me

From c884c0c8efb84c6e87ef8851433d91f2ba5f2c31 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 30 Mar 2024 00:16:42 +0100
Subject: [PATCH 14/23] Show footer in new screen

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index a4d2952d..3f047109 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -253,7 +253,7 @@ const Home: NextPage = () => {
               </div>
             ))}
           </div>
-          {activeTab === TabName.verifiedContract && <MiniFooter />}
+          <MiniFooter />
         </div>
       </div>
     </>

From 33961b89dde91887827e5cbcc2d2488c94d24d20 Mon Sep 17 00:00:00 2001
From: tokodev <pablo@asdloop.com>
Date: Sat, 30 Mar 2024 00:22:55 +0100
Subject: [PATCH 15/23] Set same hover effect to new screen buttons

---
 packages/nextjs/pages/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 3f047109..95c77b88 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -232,7 +232,10 @@ const Home: NextPage = () => {
                       <h4 className="text-center mb-6 font-semibold leading-tight">
                         You can decompile the contract (beta) or import the ABI manually below.
                       </h4>
-                      <button className="btn btn-primary" onClick={() => fetchAbiFromHeimdall(localAbiContractAddress)}>
+                      <button
+                        className="btn btn-primary border-2 hover:bg-white hover:text-primary"
+                        onClick={() => fetchAbiFromHeimdall(localAbiContractAddress)}
+                      >
                         {isFetchingAbi ? <span className="loading loading-spinner"></span> : "Decompile (beta)"}
                       </button>
                     </div>
@@ -244,7 +247,10 @@ const Home: NextPage = () => {
                         value={localContractAbi}
                         onChange={e => setLocalContractAbi(e.target.value)}
                       ></textarea>
-                      <button className="btn btn-primary mb-12" onClick={handleUserProvidedAbi}>
+                      <button
+                        className="btn btn-primary border-2 mb-12 hover:bg-white hover:text-primary"
+                        onClick={handleUserProvidedAbi}
+                      >
                         Import ABI
                       </button>
                     </div>

From 0cba3a06d3c5064637b676caf5e37997d0efda83 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 1 Apr 2024 19:19:54 +0530
Subject: [PATCH 16/23] remove goerli + OPGoerli

---
 packages/nextjs/scaffold.config.ts             |  2 --
 packages/nextjs/utils/scaffold-eth/networks.ts | 16 ----------------
 2 files changed, 18 deletions(-)

diff --git a/packages/nextjs/scaffold.config.ts b/packages/nextjs/scaffold.config.ts
index 6096fdee..9025f48b 100644
--- a/packages/nextjs/scaffold.config.ts
+++ b/packages/nextjs/scaffold.config.ts
@@ -20,9 +20,7 @@ const scaffoldConfig = {
     localhost,
     chains.mainnet,
     chains.sepolia,
-    chains.goerli,
     chains.optimism,
-    chains.optimismGoerli,
     chains.base,
     chains.baseSepolia,
     chains.polygon,
diff --git a/packages/nextjs/utils/scaffold-eth/networks.ts b/packages/nextjs/utils/scaffold-eth/networks.ts
index ebec9643..0af1d5cf 100644
--- a/packages/nextjs/utils/scaffold-eth/networks.ts
+++ b/packages/nextjs/utils/scaffold-eth/networks.ts
@@ -40,12 +40,6 @@ export const NETWORKS_EXTRA_DATA: Record<string, ChainAttributes> = {
     etherscanApiKey: MAINNET_ETHERSCAN_API_KEY,
     icon: "/mainnet.svg",
   },
-  [chains.goerli.id]: {
-    color: "#0975F6",
-    etherscanEndpoint: "https://api-goerli.etherscan.io",
-    etherscanApiKey: MAINNET_ETHERSCAN_API_KEY,
-    icon: "/mainnet.svg",
-  },
   [chains.gnosis.id]: {
     color: "#48a9a6",
     etherscanEndpoint: "https://api.gnosisscan.io",
@@ -66,22 +60,12 @@ export const NETWORKS_EXTRA_DATA: Record<string, ChainAttributes> = {
     etherscanApiKey: POLYGON_ETHERSCAN_API_KEY,
     icon: "/polygon.svg",
   },
-  [chains.optimismGoerli.id]: {
-    color: "#f01a37",
-    etherscanEndpoint: "https://api-goerli-optimistic.etherscan.io",
-    etherscanApiKey: OPTIMISM_ETHERSCAN_API_KEY,
-    icon: "/optimism.svg",
-  },
   [chains.optimism.id]: {
     color: "#f01a37",
     etherscanEndpoint: "https://api-optimistic.etherscan.io",
     etherscanApiKey: OPTIMISM_ETHERSCAN_API_KEY,
     icon: "/optimism.svg",
   },
-  [chains.arbitrumGoerli.id]: {
-    color: "#28a0f0",
-    icon: "/arbitrum.jpg",
-  },
   [chains.arbitrum.id]: {
     color: "#28a0f0",
     etherscanEndpoint: "https://api.arbiscan.io",

From b4758686ed05eb9be3f4210df0bceb6da2886f31 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Mon, 1 Apr 2024 19:21:38 +0530
Subject: [PATCH 17/23] remove additionalClasses from NetworksDropdown

---
 packages/nextjs/components/NetworksDropdown.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/components/NetworksDropdown.tsx b/packages/nextjs/components/NetworksDropdown.tsx
index b43c52e9..903128dd 100644
--- a/packages/nextjs/components/NetworksDropdown.tsx
+++ b/packages/nextjs/components/NetworksDropdown.tsx
@@ -56,13 +56,7 @@ const IconOption = (props: OptionProps<Options>) => (
   </Option>
 );
 
-export const NetworksDropdown = ({
-  onChange,
-  additionalClasses,
-}: {
-  onChange: (options: any) => any;
-  additionalClasses?: string;
-}) => {
+export const NetworksDropdown = ({ onChange }: { onChange: (options: any) => any }) => {
   const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
@@ -84,7 +78,7 @@ export const NetworksDropdown = ({
       onChange={onChange}
       components={{ Option: IconOption }}
       isSearchable={!isMobile}
-      className={`max-w-xs bg-white relative ${additionalClasses ? additionalClasses : "text-sm w-44"}`}
+      className="max-w-xs bg-white relative text-sm w-44"
       theme={theme => ({
         ...theme,
         colors: {

From fc63d461bbcfc85fbf543ea89696b722f53f0cf3 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 3 Apr 2024 23:26:53 +0300
Subject: [PATCH 18/23] Check abi length and return if its 0

---
 packages/nextjs/pages/index.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 95c77b88..afc2a4aa 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -124,6 +124,11 @@ const Home: NextPage = () => {
     try {
       const response = await fetch(`https://heimdall-api.fly.dev/${network}/${contractAddress}`);
       const abi = await response.json();
+      if (abi.length === 0) {
+        notification.error("Failed to fetch ABI from Heimdall. Please try again or enter ABI manually.");
+        setIsFetchingAbi(false);
+        return;
+      }
       setContractAbi(abi);
       setIsAbiAvailable(true);
       setAbiContractAddress(contractAddress);

From 7455ceffa5756baecfd8f8d1ff2f1f29d282a488 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Sat, 13 Apr 2024 10:55:23 +0300
Subject: [PATCH 19/23] Add missing import + dep to dep array

---
 packages/nextjs/pages/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 6a682bde..2e201976 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -12,6 +12,7 @@ import { MetaHeader } from "~~/components/MetaHeader";
 import { MiniFooter } from "~~/components/MiniFooter";
 import { NetworksDropdown } from "~~/components/NetworksDropdown";
 import { AddressInput } from "~~/components/scaffold-eth";
+import scaffoldConfig from "~~/scaffold.config";
 import { useAbiNinjaState } from "~~/services/store/store";
 import { fetchContractABIFromAnyABI, fetchContractABIFromEtherscan, parseAndCorrectJSON } from "~~/utils/abi";
 import { getTargetNetworks, notification } from "~~/utils/scaffold-eth";
@@ -118,8 +119,7 @@ const Home: NextPage = () => {
     } else {
       setIsAbiAvailable(false);
     }
-  }, [verifiedContractAddress, network, setContractAbi, publicClient]);
-
+  }, [verifiedContractAddress, network, setContractAbi, publicClient, setImplementationAddress]);
 
   useEffect(() => {
     if (router.pathname === "/") {

From 8b222cce309b56a206075ed798ac9c6af1dda5f7 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Mon, 15 Apr 2024 21:39:03 +0300
Subject: [PATCH 20/23] Remove scaffoldConfig import

---
 packages/nextjs/pages/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index d7d36a1f..f1aa6845 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -10,7 +10,6 @@ import { MetaHeader } from "~~/components/MetaHeader";
 import { MiniFooter } from "~~/components/MiniFooter";
 import { NetworksDropdown } from "~~/components/NetworksDropdown";
 import { AddressInput } from "~~/components/scaffold-eth";
-import scaffoldConfig from "~~/scaffold.config";
 import { useAbiNinjaState } from "~~/services/store/store";
 import { fetchContractABIFromAnyABI, fetchContractABIFromEtherscan, parseAndCorrectJSON } from "~~/utils/abi";
 import { detectProxyTarget } from "~~/utils/abi-ninja/proxyContracts";

From 59ede1531477bac16d53d50d54208e3a705407c1 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 17 Apr 2024 20:34:29 +0300
Subject: [PATCH 21/23] Add heimdall backend url as env var

---
 packages/nextjs/.env.example    | 1 +
 packages/nextjs/pages/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/.env.example b/packages/nextjs/.env.example
index 1d5ae40f..a81d3b0c 100644
--- a/packages/nextjs/.env.example
+++ b/packages/nextjs/.env.example
@@ -16,6 +16,7 @@ NEXT_PUBLIC_POLYGON_ETHERSCAN_API_KEY=
 NEXT_PUBLIC_ARBITRUM_ETHERSCAN_API_KEY=
 NEXT_PUBLIC_SCROLL_ETHERSCAN_API_KEY=
 NEXT_PUBLIC_BASE_ETHERSCAN_API_KEY=
+NEXT_PUBLIC_HEIMDALL_URL=
 
 NEXT_PUBLIC_ALCHEMY_API_KEY=
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index f1aa6845..6bb9186a 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -133,7 +133,7 @@ const Home: NextPage = () => {
   const fetchAbiFromHeimdall = async (contractAddress: string) => {
     setIsFetchingAbi(true);
     try {
-      const response = await fetch(`https://heimdall-api.fly.dev/${network}/${contractAddress}`);
+      const response = await fetch(`https://${process.env.NEXT_PUBLIC_HEIMDALL_URL}/${network}/${contractAddress}`);
       const abi = await response.json();
       if (abi.length === 0) {
         notification.error("Failed to fetch ABI from Heimdall. Please try again or enter ABI manually.");

From fd66bc0105002b107dab1524cec2a702822834f2 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 19 Apr 2024 20:31:57 +0530
Subject: [PATCH 22/23] remove https:// from heimdall url

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 6bb9186a..708bf13e 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -133,7 +133,7 @@ const Home: NextPage = () => {
   const fetchAbiFromHeimdall = async (contractAddress: string) => {
     setIsFetchingAbi(true);
     try {
-      const response = await fetch(`https://${process.env.NEXT_PUBLIC_HEIMDALL_URL}/${network}/${contractAddress}`);
+      const response = await fetch(`${process.env.NEXT_PUBLIC_HEIMDALL_URL}/${network}/${contractAddress}`);
       const abi = await response.json();
       if (abi.length === 0) {
         notification.error("Failed to fetch ABI from Heimdall. Please try again or enter ABI manually.");

From 1592c0fa844d7feb1447560f85883d50602d4db5 Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Fri, 19 Apr 2024 22:13:04 +0530
Subject: [PATCH 23/23] fix bug from (#86) default network a mainnet at 0th
 index

---
 packages/nextjs/pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx
index 708bf13e..3bc43ac9 100644
--- a/packages/nextjs/pages/index.tsx
+++ b/packages/nextjs/pages/index.tsx
@@ -26,7 +26,7 @@ const networks = getTargetNetworks();
 
 const Home: NextPage = () => {
   const [activeTab, setActiveTab] = useState(TabName.verifiedContract);
-  const [network, setNetwork] = useState(networks[1].id.toString());
+  const [network, setNetwork] = useState(networks[0].id.toString());
   const [verifiedContractAddress, setVerifiedContractAddress] = useState<Address>("");
   const [localAbiContractAddress, setLocalAbiContractAddress] = useState("");
   const [localContractAbi, setLocalContractAbi] = useState("");