diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractReadMethods.tsx
index 3d3b1ae6..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,9 +16,7 @@ export const ContractReadMethods = ({
   }
 
   const functionsToDisplay = (
-    ((deployedContractData.abi || []) as Abi).filter(part => part.type === "function") as (AbiFunction & {
-      uid: string;
-    })[]
+    ((deployedContractData.abi || []) as Abi).filter(part => part.type === "function") as AugmentedAbiFunction[]
   )
     .filter(fn => {
       const isQueryableWithParams =
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
index 6fe6a788..759fd410 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx
@@ -18,7 +18,7 @@ type ContractUIProps = {
   initialContractData: { address: string; abi: Abi };
 };
 
-interface AugmentedAbiFunction extends AbiFunction {
+export interface AugmentedAbiFunction extends AbiFunction {
   uid: string;
 }
 
@@ -70,7 +70,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
   );
 
   // local abi state for for dispalying selected methods
-  const [abi, setAbi] = useState<(AbiFunction & { uid: string })[]>([]);
+  const [abi, setAbi] = useState<AugmentedAbiFunction[]>([]);
 
   const handleMethodSelect = (uid: string) => {
     const methodToAdd = readMethodsWithInputsAndWriteMethods.find(method => method.uid === uid);
@@ -94,7 +94,7 @@ export const ContractUI = ({ className = "", initialContractData }: ContractUIPr
     const selectedMethods = readMethodsWithInputsAndWriteMethods.filter(
       method => method.type === "function" && "name" in method && selectedMethodNames.includes(method.uid),
     ) as AbiFunction[];
-    setAbi(selectedMethods as (AbiFunction & { uid: string })[]);
+    setAbi(selectedMethods as AugmentedAbiFunction[]);
   }, [initialContractData.abi, router?.query?.methods]);
 
   const { data: contractNameData, isLoading: isContractNameLoading } = useContractRead({
diff --git a/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx b/packages/nextjs/components/scaffold-eth/Contract/ContractWriteMethods.tsx
index faa30cbb..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 & { uid: string })[]
+    (deployedContractData.abi as Abi).filter(part => part.type === "function") as AugmentedAbiFunction[]
   )
     .filter(fn => {
       const isWriteableFunction = fn.stateMutability !== "view" && fn.stateMutability !== "pure";
diff --git a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
index 1f2f2d16..56593238 100644
--- a/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
+++ b/packages/nextjs/components/scaffold-eth/Contract/MethodSelector.tsx
@@ -1,10 +1,10 @@
 import { useState } from "react";
-import { AbiFunction } from "abitype";
+import { AugmentedAbiFunction } from "./ContractUI";
 import { ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 
 interface MethodSelectorProps {
-  readMethodsWithInputsAndWriteMethods: (AbiFunction & { uid: string })[];
-  abi: (AbiFunction & { uid: string })[];
+  readMethodsWithInputsAndWriteMethods: AugmentedAbiFunction[];
+  abi: AugmentedAbiFunction[];
   onMethodSelect: (uid: string) => void;
   removeMethod: (uid: string) => void;
 }