From 7f869cfc116590162dec3b02312bf3e1be43640d Mon Sep 17 00:00:00 2001
From: Shiv Bhonde <shivbhonde04@gmail.com>
Date: Wed, 26 Jul 2023 01:56:00 +0530
Subject: [PATCH] add useEffect to handle unmatching contractName in
 localStorage

---
 packages/nextjs/pages/debug.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nextjs/pages/debug.tsx b/packages/nextjs/pages/debug.tsx
index 32fb2e4f8..3dbef7f84 100644
--- 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