add useEffect to handle unmatching contractName in localStorage

scaffold-eth · Jul 25, 2023 · 7f869cf · 7f869cf
1 parent 68a3de1
commit 7f869cf
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/packages/nextjs/pages/debug.tsx b/packages/nextjs/pages/debug.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import type { NextPage } from "next";
 import { useLocalStorage } from "usehooks-ts";
 import { MetaHeader } from "~~/components/MetaHeader";
@@ -6,14 +7,20 @@ import { ContractName } from "~~/utils/scaffold-eth/contract";
 import { getContractNames } from "~~/utils/scaffold-eth/contractNames";
 
 const selectedContractStorageKey = "scaffoldEth2.selectedContract";
+const contractNames = getContractNames();
 
 const Debug: NextPage = () => {
-  const contractNames = getContractNames();
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
   );
 
+  useEffect(() => {
+    if (!contractNames.includes(selectedContract)) {
+      setSelectedContract(contractNames[0]);
+    }
+  }, [selectedContract, setSelectedContract]);
+
   return (
     <>
       <MetaHeader