fix: different contracts on different chains (#920)

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -1,17 +1,18 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useLocalStorage } from "usehooks-ts";
 import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
 import { ContractUI } from "~~/app/debug/_components/contract";
-import { ContractName } from "~~/utils/scaffold-eth/contract";
-import { getAllContracts } from "~~/utils/scaffold-eth/contractsData";
+import { ContractName, GenericContract } from "~~/utils/scaffold-eth/contract";
+import { useAllContracts } from "~~/utils/scaffold-eth/contractsData";
 
 const selectedContractStorageKey = "scaffoldEth2.selectedContract";
-const contractsData = getAllContracts();
-const contractNames = Object.keys(contractsData) as ContractName[];
 
 export function DebugContracts() {
+  const contractsData = useAllContracts();
+  const contractNames = useMemo(() => Object.keys(contractsData) as ContractName[], [contractsData]);
+
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
@@ -22,7 +23,7 @@ export function DebugContracts() {
     if (!contractNames.includes(selectedContract)) {
       setSelectedContract(contractNames[0]);
     }
-  }, [selectedContract, setSelectedContract]);
+  }, [contractNames, selectedContract, setSelectedContract]);
 
   return (
     <div className="flex flex-col gap-y-6 lg:gap-y-8 py-8 lg:py-12 justify-center items-center">
@@ -43,7 +44,7 @@ export function DebugContracts() {
                   onClick={() => setSelectedContract(contractName)}
                 >
                   {contractName}
-                  {contractsData[contractName].external && (
+                  {(contractsData[contractName] as GenericContract)?.external && (
                     <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
                       <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
                     </span>

packages/nextjs/utils/scaffold-eth/contractsData.ts

@@ -1,7 +1,11 @@
-import scaffoldConfig from "~~/scaffold.config";
-import { contracts } from "~~/utils/scaffold-eth/contract";
+import { useTargetNetwork } from "~~/hooks/scaffold-eth";
+import { GenericContractsDeclaration, contracts } from "~~/utils/scaffold-eth/contract";
 
-export function getAllContracts() {
-  const contractsData = contracts?.[scaffoldConfig.targetNetworks[0].id];
-  return contractsData ? contractsData : {};
+const DEFAULT_ALL_CONTRACTS: GenericContractsDeclaration[number] = {};
+
+export function useAllContracts() {
+  const { targetNetwork } = useTargetNetwork();
+  const contractsData = contracts?.[targetNetwork.id];
+  // using constant to avoid creating a new object on every call
+  return contractsData || DEFAULT_ALL_CONTRACTS;
 }