diff --git a/packages/nextjs/hooks/useFetchContractAbi.ts b/packages/nextjs/hooks/useFetchContractAbi.ts index 5f384c62..8af126a5 100644 --- a/packages/nextjs/hooks/useFetchContractAbi.ts +++ b/packages/nextjs/hooks/useFetchContractAbi.ts @@ -11,9 +11,10 @@ type FetchContractAbiParams = { contractAddress: string; chainId: number; publicClient: UsePublicClientReturnType; + disabled?: boolean; }; -const useFetchContractAbi = ({ contractAddress, chainId, publicClient }: FetchContractAbiParams) => { +const useFetchContractAbi = ({ contractAddress, chainId, publicClient, disabled = false }: FetchContractAbiParams) => { const [implementationAddress, setImplementationAddress] = useState(null); const fetchAbi = async () => { @@ -46,6 +47,7 @@ const useFetchContractAbi = ({ contractAddress, chainId, publicClient }: FetchCo const abiString = await fetchContractABIFromEtherscan(contractAddress, chainId); const parsedAbi = parseAndCorrectJSON(abiString); + return { abi: parsedAbi, address: contractAddress }; } }; @@ -53,7 +55,7 @@ const useFetchContractAbi = ({ contractAddress, chainId, publicClient }: FetchCo const { data, error, isLoading } = useQuery({ queryKey: ["contractAbi", { contractAddress, chainId: chainId }], queryFn: fetchAbi, - enabled: isAddress(contractAddress) && chainId !== 31337, + enabled: !disabled && isAddress(contractAddress) && chainId !== 31337, retry: false, }); diff --git a/packages/nextjs/pages/[contractAddress]/[network].tsx b/packages/nextjs/pages/[contractAddress]/[network].tsx index 20365c62..6bd30a19 100644 --- a/packages/nextjs/pages/[contractAddress]/[network].tsx +++ b/packages/nextjs/pages/[contractAddress]/[network].tsx @@ -59,12 +59,12 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps) const { contractAddress, network } = router.query as ParsedQueryContractDetailsPage; const [localContractAbi, setLocalContractAbi] = useState(""); const [isUseLocalAbi, setIsUseLocalAbi] = useState(false); - const [contractData, setContractData] = useState(null); - const contractName = contractAddress; - const { setMainChainId, chainId, setImplementationAddress } = useAbiNinjaState(state => ({ + const [localContractData, setLocalContractData] = useState(null); + const { setMainChainId, chainId, setImplementationAddress, contractAbi } = useAbiNinjaState(state => ({ setMainChainId: state.setMainChainId, chainId: state.mainChainId, setImplementationAddress: state.setImplementationAddress, + contractAbi: state.contractAbi, })); const { addChain, chains } = useGlobalState(state => ({ @@ -86,9 +86,19 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps) error: fetchError, isLoading, implementationAddress, - } = useFetchContractAbi({ contractAddress, chainId: parseInt(network), publicClient }); + } = useFetchContractAbi({ + contractAddress, + chainId: parseInt(network), + publicClient, + disabled: contractAbi.length > 0, + }); - const effectiveContractData = isUseLocalAbi && contractData ? contractData : fetchedContractData; + const effectiveContractData = + contractAbi.length > 0 + ? { abi: contractAbi, address: contractAddress } + : isUseLocalAbi && localContractData + ? localContractData + : fetchedContractData; const error = isUseLocalAbi ? null : fetchError; @@ -114,7 +124,7 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps) const parsedAbi = parseAndCorrectJSON(localContractAbi); if (parsedAbi) { setIsUseLocalAbi(true); - setContractData({ abi: parsedAbi, address: contractAddress }); + setLocalContractData({ abi: parsedAbi, address: contractAddress }); notification.success("ABI successfully loaded."); } else { throw new Error("Parsed ABI is null or undefined"); @@ -150,7 +160,7 @@ const ContractDetailPage = ({ addressFromUrl, chainIdFromUrl }: ServerSideProps) ) : effectiveContractData && effectiveContractData?.abi?.length > 0 ? ( - + ) : (