Merge branch 'main' into address-component-update

scaffold-eth · Sep 4, 2024 · 91cc460 · 91cc460
2 parents fc30607 + ae698c4
commit 91cc460
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/packages/hardhat/tsconfig.json b/packages/hardhat/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "es2020",
     "module": "commonjs",
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "skipLibCheck": true

diff --git a/packages/nextjs/app/debug/_components/DebugContracts.tsx b/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>

diff --git a/packages/nextjs/utils/scaffold-eth/contractsData.ts b/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;
 }