From 5bc6506cecc4374d242ea2fcbd524e8c718dd1b6 Mon Sep 17 00:00:00 2001
From: port <108868128+portdeveloper@users.noreply.github.com>
Date: Wed, 13 Mar 2024 19:05:47 +0300
Subject: [PATCH] Use uid's when adding/removing methods (#70)

---
 .../Contract/ContractReadMethods.tsx          |  9 +--
 .../scaffold-eth/Contract/ContractUI.tsx      | 64 +++++++++++--------
 .../Contract/ContractWriteMethods.tsx         |  7 +-
 .../scaffold-eth/Contract/MethodSelector.tsx  | 43 ++++++-------
 4 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index a5a87f84..95c43aff 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
@@ -1,5 +1,6 @@
+import { AugmentedAbiFunction } from "./ContractUI";
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
-import { Abi, AbiFunction } from "abitype";
+import { Abi } from "abitype";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
@@ -15,7 +16,7 @@ export const ContractReadMethods = ({
   }
 
   const functionsToDisplay = (
-    ((deployedContractData.abi || []) as Abi).filter(part => part.type === "function") as AbiFunction[]
+    ((deployedContractData.abi || []) as Abi).filter(part => part.type === "function") as AugmentedAbiFunction[]
   )
     .filter(fn => {
       const isQueryableWithParams =
@@ -41,7 +42,7 @@ export const ContractReadMethods = ({
   return (
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
-        <div key={fn.name} className="relative mb-4 pt-5">
+        <div key={fn.uid} className="relative mb-4 pt-5">
           <ReadOnlyFunctionForm
             abi={deployedContractData.abi as Abi}
             contractAddress={deployedContractData.address}
@@ -49,7 +50,7 @@ export const ContractReadMethods = ({
             inheritedFrom={inheritedFrom}
           />
           <button
-            onClick={() => removeMethod(fn.name)}
+            onClick={() => removeMethod(fn.uid)}
             className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
             aria-label="Remove method"
           >
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
index 088c47f5..9e29f587 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -18,6 +18,10 @@ type ContractUIProps = {
   initialContractData: { address: string; abi: Abi };
 };
 
+export interface AugmentedAbiFunction extends AbiFunction {
+  uid: string;
+}
+
 const mainNetworks = getTargetNetworks();
 
 /**
@@ -43,49 +47,53 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
     router.push({ pathname: newPath, query: currentQuery.toString() }, undefined, { shallow: true });
   };
 
-  const readMethodsWithInputsAndWriteMethods = initialContractData.abi.filter((method): method is AbiFunction => {
-    if (method.type !== "function") return false;
+  const augmentMethodsWithUid = (methods: AbiFunction[]): AugmentedAbiFunction[] => {
+    return methods.map((method, index) => ({
+      ...method,
+      uid: `${method.name}_${index}`, // Simple UID based on index
+    }));
+  };
 
-    // Check for read functions
-    if (method.stateMutability === "view" || method.stateMutability === "pure") {
-      // Check for read inputs length
-      if (method.inputs.length > 0) {
-        return true;
-      } else return false;
-    } 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<AbiFunction[]>([]);
+  const [abi, setAbi] = useState<AugmentedAbiFunction[]>([]);
 
-  const handleMethodSelect = (methodName: string) => {
-    const methodToAdd = initialContractData.abi.find(
-      method => method.type === "function" && "name" in method && method.name === methodName,
-    ) as AbiFunction | undefined; // Cast it to AbiFunction | undefined
+  const handleMethodSelect = (uid: string) => {
+    const methodToAdd = readMethodsWithInputsAndWriteMethods.find(method => method.uid === uid);
 
-    if (methodToAdd && !abi.some(method => method.name === methodName)) {
+    if (methodToAdd && !abi.some(method => method.uid === uid)) {
       const updatedAbi = [...abi, methodToAdd];
       setAbi(updatedAbi);
-      updateUrlWithSelectedMethods(updatedAbi.map(m => m.name));
+      updateUrlWithSelectedMethods(updatedAbi.map(m => m.uid));
     }
   };
 
-  const removeMethod = (methodName: string) => {
-    const updatedAbi = abi.filter(fn => fn.name !== methodName);
+  const removeMethod = (uid: string) => {
+    const updatedAbi = abi.filter(method => method.uid !== uid);
+
     setAbi(updatedAbi);
-    updateUrlWithSelectedMethods(updatedAbi.map(m => m.name));
+    updateUrlWithSelectedMethods(updatedAbi.map(m => m.uid));
   };
 
   useEffect(() => {
     const selectedMethodNames = (router.query.methods as string)?.split(",") || [];
-    const selectedMethods = initialContractData.abi.filter(
-      method => method.type === "function" && "name" in method && selectedMethodNames.includes(method.name),
-    ) as AbiFunction[]; // Cast it to AbiFunction[]
-    setAbi(selectedMethods);
-  }, [initialContractData.abi, router?.query?.methods]);
+    const selectedMethods = readMethodsWithInputsAndWriteMethods.filter(method =>
+      selectedMethodNames.includes(method.uid),
+    );
+    setAbi(selectedMethods as AugmentedAbiFunction[]);
+  }, [router.query.methods, readMethodsWithInputsAndWriteMethods]);
 
   const { data: contractNameData, isLoading: isContractNameLoading } = useContractRead({
     address: initialContractData.address,
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index e76dca75..4fa92bbc 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
@@ -1,5 +1,6 @@
+import { AugmentedAbiFunction } from "./ContractUI";
 import { WriteOnlyFunctionForm } from "./WriteOnlyFunctionForm";
-import { Abi, AbiFunction } from "abitype";
+import { Abi } from "abitype";
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
@@ -17,7 +18,7 @@ export const ContractWriteMethods = ({
   }
 
   const functionsToDisplay = (
-    (deployedContractData.abi as Abi).filter(part => part.type === "function") as AbiFunction[]
+    (deployedContractData.abi as Abi).filter(part => part.type === "function") as AugmentedAbiFunction[]
   )
     .filter(fn => {
       const isWriteableFunction = fn.stateMutability !== "view" && fn.stateMutability !== "pure";
@@ -51,7 +52,7 @@ export const ContractWriteMethods = ({
             inheritedFrom={inheritedFrom}
           />
           <button
-            onClick={() => removeMethod(fn.name)}
+            onClick={() => removeMethod(fn.uid)}
             className="absolute top-0 right-0 btn btn-ghost btn-xs mt-[21px]"
             aria-label="Remove method"
           >
diff --git a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
index 9ed1b9fb..07b53f3a 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
@@ -1,13 +1,12 @@
 import { useState } from "react";
-import { AbiFunction } from "abitype";
-import { Abi } from "viem";
+import { AugmentedAbiFunction } from "./ContractUI";
 import { ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 interface MethodSelectorProps {
-  readMethodsWithInputsAndWriteMethods: AbiFunction[];
-  abi: Abi;
-  onMethodSelect: (selectedMethods: string) => void;
-  removeMethod: (methodName: string) => void;
+  readMethodsWithInputsAndWriteMethods: AugmentedAbiFunction[];
+  abi: AugmentedAbiFunction[];
+  onMethodSelect: (uid: string) => void;
+  removeMethod: (uid: string) => void;
 }
 
 export const MethodSelector = ({
@@ -20,19 +19,15 @@ export const MethodSelector = ({
   const [isWriteCollapsed, setIsWriteCollapsed] = useState(false);
 
   const readMethods = readMethodsWithInputsAndWriteMethods.filter(
-    (method): method is AbiFunction => method.stateMutability === "view" || method.stateMutability === "pure",
+    method => method.stateMutability === "view" || method.stateMutability === "pure",
   );
 
   const writeMethods = readMethodsWithInputsAndWriteMethods.filter(
-    (method): method is AbiFunction => method.stateMutability !== "view" && method.stateMutability !== "pure",
+    method => method.stateMutability !== "view" && method.stateMutability !== "pure",
   );
 
-  const handleMethodSelect = (methodName: string) => {
-    onMethodSelect(methodName);
-  };
-
-  const isMethodSelected = (methodName: string) => {
-    return abi.some(method => "name" in method && method.name === methodName);
+  const isMethodSelected = (uid: string) => {
+    return abi.some(method => method.uid === uid);
   };
 
   return (
@@ -57,19 +52,19 @@ export const MethodSelector = ({
         </h3>
         {!isReadCollapsed && (
           <div className="flex flex-col items-start gap-1 pb-4">
-            {readMethods.map((method, index) => (
-              <div key={index} className="flex items-center gap-2 w-full pr-4">
+            {readMethods.map(method => (
+              <div key={method.uid} className="flex items-center gap-2 w-full pr-4">
                 <button
                   className={`btn btn-sm btn-ghost font-normal pr-1 w-full justify-between ${
-                    isMethodSelected(method.name) ? "bg-purple-100 pointer-events-none" : ""
+                    isMethodSelected(method.uid) ? "bg-purple-100 pointer-events-none" : ""
                   }`}
-                  onClick={() => handleMethodSelect(method.name)}
+                  onClick={() => onMethodSelect(method.uid)}
                 >
                   {method.name}
-                  {isMethodSelected(method.name) && (
+                  {isMethodSelected(method.uid) && (
                     <button
                       className="ml-4 text-xs hover:bg-gray-100 rounded-md p-1 pointer-events-auto"
-                      onClick={() => removeMethod(method.name)}
+                      onClick={() => removeMethod(method.uid)}
                     >
                       <XMarkIcon className="h-4 w-4" />
                     </button>
@@ -100,15 +95,15 @@ export const MethodSelector = ({
               <div key={index} className="flex items-center gap-2 w-full pr-4">
                 <button
                   className={`btn btn-sm btn-ghost font-normal pr-1 w-full justify-between ${
-                    isMethodSelected(method.name) ? "bg-purple-100 pointer-events-none" : ""
+                    isMethodSelected(method.uid) ? "bg-purple-100 pointer-events-none" : ""
                   }`}
-                  onClick={() => handleMethodSelect(method.name)}
+                  onClick={() => onMethodSelect(method.uid)}
                 >
                   {method.name}
-                  {isMethodSelected(method.name) && (
+                  {isMethodSelected(method.uid) && (
                     <button
                       className="ml-4 text-xs hover:bg-gray-100 rounded-md p-1 pointer-events-auto"
-                      onClick={() => removeMethod(method.name)}
+                      onClick={() => removeMethod(method.uid)}
                     >
                       <XMarkIcon className="h-4 w-4" />
                     </button>