From bf02544b916e390639241e506f0f69209b4c9481 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 13 Mar 2024 18:04:20 +0300
Subject: [PATCH] Fix missing dependency error

---
 .../scaffold-eth/Contract/ContractUI.tsx      | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
index 759fd410..9e29f587 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -54,20 +54,18 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
     }));
   };
 
-  const readMethodsWithInputsAndWriteMethods = augmentMethodsWithUid(
-    initialContractData.abi.filter((method): method is AbiFunction => {
-      if (method.type !== "function") return false;
-
-      // Check for read functions
-      if (method.stateMutability === "view" || method.stateMutability === "pure") {
-        // Check for read inputs length
-        return method.inputs.length > 0;
-      } else {
-        // Else condition defines write methods
-        return true;
-      }
-    }),
-  );
+  const readMethodsWithInputsAndWriteMethods = useMemo(() => {
+    return augmentMethodsWithUid(
+      initialContractData.abi.filter((method): method is AbiFunction => {
+        if (method.type !== "function") return false;
+        if (method.stateMutability === "view" || method.stateMutability === "pure") {
+          return method.inputs.length > 0;
+        } else {
+          return true;
+        }
+      }),
+    );
+  }, [initialContractData.abi]);
 
   // local abi state for for dispalying selected methods
   const [abi, setAbi] = useState<AugmentedAbiFunction[]>([]);
@@ -91,11 +89,11 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
 
   useEffect(() => {
     const selectedMethodNames = (router.query.methods as string)?.split(",") || [];
-    const selectedMethods = readMethodsWithInputsAndWriteMethods.filter(
-      method => method.type === "function" && "name" in method && selectedMethodNames.includes(method.uid),
-    ) as AbiFunction[];
+    const selectedMethods = readMethodsWithInputsAndWriteMethods.filter(method =>
+      selectedMethodNames.includes(method.uid),
+    );
     setAbi(selectedMethods as AugmentedAbiFunction[]);
-  }, [initialContractData.abi, router?.query?.methods]);
+  }, [router.query.methods, readMethodsWithInputsAndWriteMethods]);
 
   const { data: contractNameData, isLoading: isContractNameLoading } = useContractRead({
     address: initialContractData.address,