Merge pull request #86 from daqhris/devin-fix-web3-app

Debug and fix app. 
Create stable build. 
Resolve deployment and linting issues. 
Improve main functionalities.

.env.local

@@ -1,11 +1,11 @@
 # WalletConnect Project ID (keep this value as is, it's already set correctly)
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=CHPA6N569JF66K6G1WQBY4WWW7SU6N5P72
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 
 # Replace with actual values in a production environment
-POAP_API_KEY=dummy_poap_api_key
-ALCHEMY_API_KEY=dummy_alchemy_api_key
-ETHEREUM_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/dummy_alchemy_api_key
-PRIVATE_KEY=0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef
+POAP_API_KEY=
+ALCHEMY_API_KEY=
+ETHEREUM_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/${ALCHEMY_API_KEY}
+PRIVATE_KEY=
 # Keep this private key secret and never commit it to version control
 
 # Ethereum Attestation Service (EAS) contract addresses (Optimism Sepolia testnet)
@@ -14,8 +14,8 @@ SCHEMA_REGISTRY_ADDRESS=0x4200000000000000000000000000000000021A43
 
 # API Keys (replace with actual values in production)
 ETHERSCAN_API_KEY=dummy_etherscan_api_key
-BLOCKSCOUT_API_KEY=dummy_blockscout_api_key
-BLOCKSCOUT_OPTIMISM_API_KEY=dummy_blockscout_optimism_api_key
+BLOCKSCOUT_API_KEY=
+BLOCKSCOUT_OPTIMISM_API_KEY=
 
 # Deployer information
 DEPLOYER_ETH_ADDRESS=0xF0bC5CC2B4866dAAeCb069430c60b24520077037

app/debug/_components/contract/ContractInput.tsx

@@ -1,19 +1,20 @@
 "use client";
 
-import React, { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { Tuple } from "./Tuple";
 import { TupleArray } from "./TupleArray";
-import { AbiParameter } from "abitype";
+import type { AbiParameter } from "viem";
 import {
   AddressInput,
   Bytes32Input,
   BytesInput,
-  CommonInputProps,
   InputBase,
   IntegerInput,
   IntegerVariant,
 } from "~~/components/scaffold-eth";
-import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
+import type { CommonInputProps } from "~~/components/scaffold-eth";
+import type { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
 
 interface ContractInputProps {
   setForm: Dispatch<SetStateAction<Record<string, unknown>>>;
@@ -67,7 +68,7 @@ const ContractInput: React.FC<ContractInputProps> = ({ setForm, form, stateObjec
           <AddressInput
             {...inputProps}
             value={inputProps.value?.toString() ?? ""}
-            onChange={(value: string): void => inputProps.onChange(value)}
+            onChange={(value: string | undefined): void => inputProps.onChange(value)}
           />
         );
       case "bytes32":

app/debug/_components/contract/ContractReadMethods.tsx

@@ -1,6 +1,6 @@
-import { Abi, AbiFunction } from "abitype";
+import type { Abi, AbiFunction } from "abitype";
 import { ReadOnlyFunctionForm } from "~~/app/debug/_components/contract";
-import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
+import type { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractReadMethods = ({ deployedContractData }: { deployedContractData: Contract<ContractName> }): JSX.Element | null => {
   if (!deployedContractData) {
@@ -21,7 +21,7 @@ export const ContractReadMethods = ({ deployedContractData }: { deployedContract
         inheritedFrom: ((deployedContractData as GenericContract)?.inheritedFunctions as InheritedFunctions)?.[fn.name],
       };
     })
-    .sort((a, b): number => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
+    .sort((a, b): number => (b.inheritedFrom && a.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
 
   if (!functionsToDisplay.length) {
     return <>No read methods</>;
@@ -31,11 +31,12 @@ export const ContractReadMethods = ({ deployedContractData }: { deployedContract
     <>
       {functionsToDisplay.map(({ fn, inheritedFrom }) => (
         <ReadOnlyFunctionForm
-          abi={deployedContractData.abi as Abi}
-          contractAddress={deployedContractData.address}
-          abiFunction={fn}
           key={fn.name}
-          inheritedFrom={inheritedFrom}
+          functionName={fn.name}
+          functionArgs={fn.inputs}
+          contractAddress={deployedContractData.address}
+          abi={deployedContractData.abi as Abi}
+          inheritedFrom={inheritedFrom || undefined}
         />
       ))}
     </>

app/debug/_components/contract/ContractUI.tsx

@@ -8,7 +8,7 @@ import { ContractWriteMethods } from "./ContractWriteMethods";
 import { Address, Balance } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useNetworkColor } from "~~/hooks/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
-import { ContractName } from "~~/utils/scaffold-eth/contract";
+import type { ContractName } from "~~/utils/scaffold-eth/contract";
 
 type ContractUIProps = {
   contractName: ContractName;
@@ -22,7 +22,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps): J
   const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer(value => !value, false);
   const { targetNetwork } = useTargetNetwork();
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
-  const networkColor = useNetworkColor();
+  const getNetworkColor = useNetworkColor();
 
   if (deployedContractLoading) {
     return (
@@ -58,7 +58,7 @@ export const ContractUI = ({ contractName, className = "" }: ContractUIProps): J
             {targetNetwork && (
               <p className="my-0 text-sm">
                 <span className="font-bold">Network</span>:{" "}
-                <span style={{ color: networkColor }}>{targetNetwork.name}</span>
+                <span style={{ color: getNetworkColor() }}>{targetNetwork.name}</span>
               </p>
             )}
           </div>

app/debug/_components/contract/ContractVariables.tsx

@@ -1,10 +1,10 @@
 import { DisplayVariable } from "./DisplayVariable";
-import { Abi, AbiFunction } from "abitype";
-import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
+import type { Abi, AbiFunction } from "abitype";
+import type { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 interface FunctionDisplay {
   fn: AbiFunction;
-  inheritedFrom?: string;
+  inheritedFrom?: string | undefined;
 }
 
 export const ContractVariables = ({
@@ -29,11 +29,11 @@ export const ContractVariables = ({
     .map((fn: AbiFunction): FunctionDisplay => {
       return {
         fn,
-        inheritedFrom: ((deployedContractData as GenericContract)?.inheritedFunctions as InheritedFunctions)?.[fn.name],
+        inheritedFrom: ((deployedContractData as GenericContract)?.inheritedFunctions as InheritedFunctions)?.[fn.name] ?? undefined,
       };
     })
     .sort((a: FunctionDisplay, b: FunctionDisplay): number =>
-      (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom || '') : 1)
+      (b.inheritedFrom && a.inheritedFrom) ? b.inheritedFrom.localeCompare(a.inheritedFrom) : b.inheritedFrom ? -1 : a.inheritedFrom ? 1 : 0
     );
 
   if (!functionsToDisplay.length) {
@@ -49,7 +49,7 @@ export const ContractVariables = ({
           contractAddress={deployedContractData.address}
           key={fn.name}
           refreshDisplayVariables={refreshDisplayVariables}
-          inheritedFrom={inheritedFrom}
+          inheritedFrom={inheritedFrom || undefined}
         />
       ))}
     </>

app/debug/_components/contract/ContractWriteMethods.tsx

@@ -1,10 +1,10 @@
-import { Abi, AbiFunction } from "abitype";
+import type { Abi, AbiFunction } from "abitype";
 import { WriteOnlyFunctionForm } from "~~/app/debug/_components/contract";
-import { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
+import type { Contract, ContractName, GenericContract, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 interface FunctionDisplay {
   fn: AbiFunction;
-  inheritedFrom?: string;
+  inheritedFrom?: string | undefined;
 }
 
 export const ContractWriteMethods = ({
@@ -32,7 +32,7 @@ export const ContractWriteMethods = ({
       };
     })
     .sort((a: FunctionDisplay, b: FunctionDisplay): number =>
-      (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom || '') : 1)
+      (b.inheritedFrom && a.inheritedFrom) ? b.inheritedFrom.localeCompare(a.inheritedFrom) : b.inheritedFrom ? -1 : a.inheritedFrom ? 1 : 0
     );
 
   if (!functionsToDisplay.length) {

app/debug/_components/contract/DisplayVariable.tsx

@@ -2,9 +2,10 @@
 
 import { useEffect } from "react";
 import { InheritanceTooltip } from "./InheritanceTooltip";
-import { DisplayContent, displayTxResult } from "./utilsDisplay";
-import { Abi, AbiFunction } from "abitype";
-import { Address } from "viem";
+import { displayTxResult } from "./utilsDisplay";
+import type { DisplayContent } from "./utilsDisplay";
+import type { Abi, AbiFunction } from "abitype";
+import type { Address } from "viem";
 import { useReadContract } from "wagmi";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import { useAnimationConfig } from "~~/hooks/scaffold-eth";
@@ -15,7 +16,7 @@ type DisplayVariableProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
   refreshDisplayVariables: boolean;
-  inheritedFrom?: string;
+  inheritedFrom?: string | undefined;
   abi: Abi;
 };
 
@@ -64,7 +65,7 @@ export const DisplayVariable = ({
             <ArrowPathIcon className="h-3 w-3 cursor-pointer" aria-hidden="true" />
           )}
         </button>
-        <InheritanceTooltip inheritedFrom={inheritedFrom} />
+        {inheritedFrom && <InheritanceTooltip inheritedFrom={inheritedFrom} />}
       </div>
       <div className="text-gray-500 font-medium flex flex-col items-start">
         <div>

app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -1,44 +1,53 @@
 "use client";
 
-import React, { SetStateAction, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import type { SetStateAction } from "react";
 import ContractInput from "./ContractInput";
 import { InheritanceTooltip } from "./InheritanceTooltip";
-import { Abi, AbiFunction } from "abitype";
-import { Address } from "viem";
+import type { Abi, AbiFunction, AbiParameter } from "abitype";
+import type { Address } from "viem";
 import { useReadContract } from "wagmi";
 import {
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
-  transformAbiFunction,
 } from "~~/app/debug/_components/contract";
-import { DisplayContent, displayTxResult } from "~~/app/debug/_components/contract/utilsDisplay";
+import { displayTxResult } from "~~/app/debug/_components/contract/utilsDisplay";
+import type { DisplayContent } from "~~/app/debug/_components/contract/utilsDisplay";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getParsedError, notification } from "~~/utils/scaffold-eth";
 
 type ReadOnlyFunctionFormProps = {
   contractAddress: Address;
-  abiFunction: AbiFunction;
-  inheritedFrom?: string;
+  functionName: string;
+  functionArgs: readonly AbiParameter[];
+  inheritedFrom?: string | undefined;
   abi: Abi;
 };
 
 type FormState = Record<string, unknown>;
 
 export const ReadOnlyFunctionForm: React.FC<ReadOnlyFunctionFormProps> = ({
   contractAddress,
-  abiFunction,
+  functionName,
+  functionArgs,
   inheritedFrom,
   abi,
 }): JSX.Element => {
-  const [form, setForm] = useState<FormState>(() => getInitialFormState(abiFunction));
+  const [form, setForm] = useState<FormState>(() => getInitialFormState({
+    name: functionName,
+    type: "function",
+    inputs: functionArgs,
+    outputs: [],
+    stateMutability: "view"
+  } as AbiFunction));
   const [result, setResult] = useState<unknown>();
   const { targetNetwork } = useTargetNetwork();
 
   const { isFetching, refetch, error } = useReadContract({
     address: contractAddress,
-    functionName: abiFunction.name,
-    abi: abi,
+    functionName,
+    abi,
     args: getParsedContractFunctionArgs(form),
     chainId: targetNetwork.id,
     query: {
@@ -54,9 +63,8 @@ export const ReadOnlyFunctionForm: React.FC<ReadOnlyFunctionFormProps> = ({
     }
   }, [error]);
 
-  const transformedFunction = transformAbiFunction(abiFunction);
-  const inputElements = transformedFunction.inputs.map((input, inputIndex): JSX.Element => {
-    const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
+  const inputElements = functionArgs.map((input, inputIndex): JSX.Element => {
+    const key = getFunctionInputKey(functionName, input, inputIndex);
     return (
       <ContractInput
         key={key}
@@ -82,8 +90,8 @@ export const ReadOnlyFunctionForm: React.FC<ReadOnlyFunctionFormProps> = ({
   return (
     <div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
       <p className="font-medium my-0 break-words">
-        {abiFunction.name}
-        <InheritanceTooltip inheritedFrom={inheritedFrom} />
+        {functionName}
+        {inheritedFrom && <InheritanceTooltip inheritedFrom={inheritedFrom} />}
       </p>
       {inputElements}
       <div className="flex flex-col md:flex-row justify-between gap-2 flex-wrap">

app/debug/_components/contract/Tuple.tsx

@@ -1,8 +1,9 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import ContractInput from "./ContractInput";
 import { getFunctionInputKey, getInitalTupleFormState } from "./utilsContract";
 import { replacer } from "~~/utils/scaffold-eth/common";
-import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
+import type { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
 
 type TupleProps = {
   abiTupleParameter: AbiParameterTuple;