Add Decompile button to network page (#174)

BuidlGuidl · Feb 17, 2025 · ebf3493 · ebf3493
1 parent 8ddddba
commit ebf3493
Showing 1 changed file with 42 additions and 7 deletions.
diff --git a/packages/nextjs/pages/[contractAddress]/[network].tsx b/packages/nextjs/pages/[contractAddress]/[network].tsx
@@ -4,16 +4,18 @@ import { useRouter } from "next/router";
 import { GetServerSideProps } from "next";
 import { ParsedUrlQuery } from "querystring";
 import { Abi, Address, isAddress } from "viem";
+import { usePublicClient } from "wagmi";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { MiniHeader } from "~~/components/MiniHeader";
 import { formDataToChain, storeChainInLocalStorage } from "~~/components/NetworksDropdown/utils";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { ContractUI } from "~~/components/scaffold-eth";
 import useFetchContractAbi from "~~/hooks/useFetchContractAbi";
+import { useHeimdall } from "~~/hooks/useHeimdall";
 import { useGlobalState } from "~~/services/store/store";
 import { getNetworkName, parseAndCorrectJSON } from "~~/utils/abi";
-import { notification } from "~~/utils/scaffold-eth";
+import { getAlchemyHttpUrl, notification } from "~~/utils/scaffold-eth";
 
 interface ParsedQueryContractDetailsPage extends ParsedUrlQuery {
   contractAddress: Address;
@@ -51,6 +53,7 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps)
   const [localContractAbi, setLocalContractAbi] = useState<string>("");
   const [isUseLocalAbi, setIsUseLocalAbi] = useState(false);
   const [localContractData, setLocalContractData] = useState<ContractData | null>(null);
+  const [decompiledAbi, setDecompiledAbi] = useState<Abi | null>(null);
 
   const { chainId, setImplementationAddress, contractAbi, chains, addChain, setTargetNetwork } = useGlobalState(
     state => ({
@@ -63,6 +66,10 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps)
     }),
   );
 
+  const publicClient = usePublicClient({
+    chainId: parseInt(network),
+  });
+
   const {
     contractData: fetchedContractData,
     error: fetchError,
@@ -74,12 +81,24 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps)
     disabled: contractAbi.length > 0,
   });
 
+  const { abi: heimdallAbi, isLoading: isHeimdallFetching } = useHeimdall({
+    contractAddress: contractAddress as Address,
+    rpcUrl: getAlchemyHttpUrl(parseInt(network))
+      ? getAlchemyHttpUrl(parseInt(network))
+      : publicClient?.chain.rpcUrls.default.http[0],
+    disabled: network === "31337" || !contractAddress,
+  });
+
   const effectiveContractData =
     contractAbi.length > 0
       ? { abi: contractAbi, address: contractAddress }
       : isUseLocalAbi && localContractData
       ? localContractData
-      : fetchedContractData;
+      : fetchedContractData
+      ? { abi: fetchedContractData.abi, address: contractAddress }
+      : decompiledAbi
+      ? { abi: decompiledAbi, address: contractAddress }
+      : null;
 
   const error = isUseLocalAbi ? null : fetchError;
 
@@ -149,14 +168,14 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps)
                     <strong>{getNetworkName(chains, chainId)}</strong>.
                   </p>
                   <p className="pb-2">
-                    Make sure the data is correct and you are connected to the right network. Or add the chain/ABI
-                    below.
+                    Make sure the data is correct and you are connected to the right network. You can also import the
+                    ABI manually, or decompile the contract (beta).
                   </p>
                 </div>
               </div>
               <div className="flex justify-center gap-12">
                 {chains.some(chain => chain.id === chainId) ? (
-                  <div className="w-1/2">
+                  <div className="w-1/2 flex flex-col gap-4">
                     <form
                       className="bg-base-200"
                       onSubmit={e => {
@@ -176,12 +195,28 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps)
                           onChange={e => setLocalContractAbi(e.target.value)}
                         ></textarea>
                       </div>
-                      <div className="modal-action mt-6">
-                        <button type="submit" className="btn btn-primary">
+                      <div className="modal-action mt-2">
+                        <button type="submit" className="btn btn-primary w-32">
                           Submit ABI
                         </button>
                       </div>
                     </form>
+                    <div className="flex flex-col justify-between mt-4">
+                      <h3 className="font-bold text-xl">Decompile Contract (beta)</h3>
+                      <button
+                        className="btn btn-primary mt-2 w-32"
+                        onClick={() => setDecompiledAbi(heimdallAbi as Abi)}
+                      >
+                        {isHeimdallFetching ? (
+                          <div className="flex items-center gap-2">
+                            <span className="loading loading-spinner loading-xs"></span>
+                            <span>Decompiling...</span>
+                          </div>
+                        ) : (
+                          "Decompile"
+                        )}
+                      </button>
+                    </div>
                   </div>
                 ) : (
                   <div className="w-1/2">