Show contract creation information in the Contract Overview card (#180)

Author: portdeveloper

packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx

@@ -6,11 +6,13 @@ import { ContractWriteMethods } from "./ContractWriteMethods";
 import { AbiFunction } from "abitype";
 import { Abi, Address as AddressType } from "viem";
 import { useContractRead } from "wagmi";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { MiniFooter } from "~~/components/MiniFooter";
 import { Address, Balance, MethodSelector } from "~~/components/scaffold-eth";
 import { useNetworkColor } from "~~/hooks/scaffold-eth";
+import useFetchContractCreationInfo from "~~/hooks/useFetchContractCreationInfo";
 import { useGlobalState } from "~~/services/store/store";
-import { getTargetNetworks } from "~~/utils/scaffold-eth";
+import { getBlockExplorerTxLink, getTargetNetworks } from "~~/utils/scaffold-eth";
 
 type ContractUIProps = {
   className?: string;
@@ -70,6 +72,11 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
   const router = useRouter();
   const { network } = router.query as { network?: string };
 
+  const { contractCreationInfo, isLoading: isContractCreationLoading } = useFetchContractCreationInfo({
+    contractAddress: initialContractData.address,
+    chainId,
+  });
+
   const updateUrlWithSelectedMethods = (selectedMethods: string[]) => {
     const currentQuery = new URLSearchParams(window.location.search);
     if (selectedMethods.length > 0) {
@@ -220,6 +227,28 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
                     </span>
                   </p>
                 )}
+                {!isContractCreationLoading && contractCreationInfo && (
+                  <div className="my-0 text-sm flex items-center gap-2">
+                    <span className="font-bold">Created at:</span>
+                    {isContractCreationLoading ? (
+                      <span className="loading loading-spinner loading-xs"></span>
+                    ) : (
+                      contractCreationInfo && (
+                        <>
+                          <span>Block {contractCreationInfo.blockNumber}</span>
+                          <a
+                            href={getBlockExplorerTxLink(chainId, contractCreationInfo.txHash)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="link no-underline"
+                          >
+                            <ArrowTopRightOnSquareIcon className="w-4 h-4" />
+                          </a>
+                        </>
+                      )
+                    )}
+                  </div>
+                )}
               </div>
               <div className="bg-base-200 shadow-xl rounded-2xl px-6 py-4">
                 <span className="block font-bold pb-3">Contract Data</span>

packages/nextjs/hooks/useFetchContractCreationInfo.ts

@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query";
+import { Address } from "viem";
+
+type ContractCreationInfo = {
+  blockNumber: string;
+  txHash: string;
+};
+
+type UseFetchContractCreationInfoParams = {
+  contractAddress: Address;
+  chainId: number;
+};
+
+const useFetchContractCreationInfo = ({ contractAddress, chainId }: UseFetchContractCreationInfoParams) => {
+  const fetchContractCreation = async (): Promise<ContractCreationInfo> => {
+    const apiKey = process.env.NEXT_PUBLIC_ETHERSCAN_V2_API_KEY;
+    const response = await fetch(
+      `https://api.etherscan.io/v2/api?chainid=${chainId}&module=contract&action=getcontractcreation&contractaddresses=${contractAddress}&apikey=${apiKey}`,
+    );
+    const data = await response.json();
+
+    if (data.status !== "1" || !data.result || data.result.length === 0) {
+      throw new Error("Failed to fetch contract creation data");
+    }
+
+    const creationInfo = data.result[0];
+    return {
+      blockNumber: creationInfo.blockNumber,
+      txHash: creationInfo.txHash,
+    };
+  };
+
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["contractCreationInfo", { contractAddress, chainId }],
+    queryFn: fetchContractCreation,
+    enabled: Boolean(contractAddress) && chainId !== 31337,
+    retry: false,
+  });
+
+  return {
+    contractCreationInfo: data,
+    error,
+    isLoading,
+  };
+};
+
+export default useFetchContractCreationInfo;