Subgraph package updates from se2 main

package.json

@@ -1,49 +1,46 @@
 {
-    "name": "se-2",
-    "version": "0.0.1",
-    "private": true,
-    "workspaces": {
-        "packages": [
-            "packages/hardhat",
-            "packages/nextjs",
-            "packages/subgraph"
-        ]
-    },
-    "scripts": {
-        "account": "yarn workspace @se-2/hardhat account",
-        "chain": "yarn workspace @se-2/hardhat chain",
-        "fork": "yarn workspace @se-2/hardhat fork",
-        "deploy": "yarn workspace @se-2/hardhat deploy",
-        "verify": "yarn workspace @se-2/hardhat verify",
-        "hardhat-verify": "yarn workspace @se-2/hardhat hardhat-verify",
-        "compile": "yarn workspace @se-2/hardhat compile",
-        "generate": "yarn workspace @se-2/hardhat generate",
-        "hardhat:lint": "yarn workspace @se-2/hardhat lint",
-        "hardhat:lint-staged": "yarn workspace @se-2/hardhat lint-staged",
-        "hardhat:test": "yarn workspace @se-2/hardhat test",
-        "test": "yarn hardhat:test",
-        "start": "yarn workspace @se-2/nextjs dev",
-        "next:lint": "yarn workspace @se-2/nextjs lint",
-        "next:format": "yarn workspace @se-2/nextjs format",
-        "next:check-types": "yarn workspace @se-2/nextjs check-types",
-        "postinstall": "husky install",
-        "precommit": "lint-staged",
-        "vercel": "yarn workspace @se-2/nextjs vercel",
-        "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",
-        "stop-node": "yarn workspace @se-2/subgraph stop-node",
-        "clean-node": "yarn workspace @se-2/subgraph clean-node",
-        "run-node": "yarn workspace @se-2/subgraph run-node",
-        "local-create": "yarn workspace @se-2/subgraph local-create",
-        "local-ship": "yarn workspace @se-2/subgraph local-ship",
-        "abi-copy": "yarn workspace @se-2/subgraph abi-copy",
-        "codegen": "yarn workspace @se-2/subgraph codegen"
-    },
-    "packageManager": "yarn@3.2.3",
-    "devDependencies": {
-        "husky": "^8.0.1",
-        "lint-staged": "^13.0.3"
-    },
-    "resolutions": {
-        "usehooks-ts@^2.7.2": "patch:usehooks-ts@npm:^2.7.2#./.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch"
-    }
+  "name": "se-2",
+  "version": "0.0.1",
+  "private": true,
+  "workspaces": {
+    "packages": [
+      "packages/hardhat",
+      "packages/nextjs",
+      "packages/subgraph"
+    ]
+  },
+  "scripts": {
+    "account": "yarn workspace @se-2/hardhat account",
+    "chain": "yarn workspace @se-2/hardhat chain",
+    "fork": "yarn workspace @se-2/hardhat fork",
+    "deploy": "yarn workspace @se-2/hardhat deploy",
+    "verify": "yarn workspace @se-2/hardhat verify",
+    "hardhat-verify": "yarn workspace @se-2/hardhat hardhat-verify",
+    "compile": "yarn workspace @se-2/hardhat compile",
+    "generate": "yarn workspace @se-2/hardhat generate",
+    "hardhat:lint": "yarn workspace @se-2/hardhat lint",
+    "hardhat:lint-staged": "yarn workspace @se-2/hardhat lint-staged",
+    "hardhat:test": "yarn workspace @se-2/hardhat test",
+    "test": "yarn hardhat:test",
+    "start": "yarn workspace @se-2/nextjs dev",
+    "next:lint": "yarn workspace @se-2/nextjs lint",
+    "next:format": "yarn workspace @se-2/nextjs format",
+    "next:check-types": "yarn workspace @se-2/nextjs check-types",
+    "postinstall": "husky install",
+    "precommit": "lint-staged",
+    "vercel": "yarn workspace @se-2/nextjs vercel",
+    "vercel:yolo": "yarn workspace @se-2/nextjs vercel:yolo",
+    "stop-node": "yarn workspace @se-2/subgraph stop-node",
+    "clean-node": "yarn workspace @se-2/subgraph clean-node",
+    "run-node": "yarn workspace @se-2/subgraph run-node",
+    "local-create": "yarn workspace @se-2/subgraph local-create",
+    "local-ship": "yarn workspace @se-2/subgraph local-ship",
+    "abi-copy": "yarn workspace @se-2/subgraph abi-copy",
+    "codegen": "yarn workspace @se-2/subgraph codegen"
+  },
+  "packageManager": "yarn@3.2.3",
+  "devDependencies": {
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3"
+  }
 }

packages/hardhat/hardhat.config.ts

@@ -70,8 +70,8 @@ const config: HardhatUserConfig = {
       url: `https://opt-mainnet.g.alchemy.com/v2/${providerApiKey}`,
       accounts: [deployerPrivateKey],
     },
-    optimismGoerli: {
-      url: `https://opt-goerli.g.alchemy.com/v2/${providerApiKey}`,
+    optimismSepolia: {
+      url: `https://opt-sepolia.g.alchemy.com/v2/${providerApiKey}`,
       accounts: [deployerPrivateKey],
     },
     polygon: {

packages/nextjs/app/debug/_components/DebugContracts.tsx

@@ -15,6 +15,7 @@ export function DebugContracts() {
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
     selectedContractStorageKey,
     contractNames[0],
+    { initializeWithValue: false },
   );
 
   useEffect(() => {

packages/nextjs/app/debug/_components/contract/ContractInput.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { Dispatch, SetStateAction } from "react";
+import { Tuple } from "./Tuple";
+import { TupleArray } from "./TupleArray";
 import { AbiParameter } from "abitype";
 import {
   AddressInput,
@@ -10,6 +12,7 @@ import {
   IntegerInput,
   IntegerVariant,
 } from "~~/components/scaffold-eth";
+import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract";
 
 type ContractInputProps = {
   setForm: Dispatch<SetStateAction<Record<string, any>>>;
@@ -31,17 +34,51 @@ export const ContractInput = ({ setForm, form, stateObjectKey, paramType }: Cont
     },
   };
 
-  if (paramType.type === "address") {
-    return <AddressInput {...inputProps} />;
-  } else if (paramType.type === "bytes32") {
-    return <Bytes32Input {...inputProps} />;
-  } else if (paramType.type === "bytes") {
-    return <BytesInput {...inputProps} />;
-  } else if (paramType.type === "string") {
-    return <InputBase {...inputProps} />;
-  } else if (paramType.type.includes("int") && !paramType.type.includes("[")) {
-    return <IntegerInput {...inputProps} variant={paramType.type as IntegerVariant} />;
-  }
+  const renderInput = () => {
+    switch (paramType.type) {
+      case "address":
+        return <AddressInput {...inputProps} />;
+      case "bytes32":
+        return <Bytes32Input {...inputProps} />;
+      case "bytes":
+        return <BytesInput {...inputProps} />;
+      case "string":
+        return <InputBase {...inputProps} />;
+      case "tuple":
+        return (
+          <Tuple
+            setParentForm={setForm}
+            parentForm={form}
+            abiTupleParameter={paramType as AbiParameterTuple}
+            parentStateObjectKey={stateObjectKey}
+          />
+        );
+      default:
+        // Handling 'int' types and 'tuple[]' types
+        if (paramType.type.includes("int") && !paramType.type.includes("[")) {
+          return <IntegerInput {...inputProps} variant={paramType.type as IntegerVariant} />;
+        } else if (paramType.type.startsWith("tuple[")) {
+          return (
+            <TupleArray
+              setParentForm={setForm}
+              parentForm={form}
+              abiTupleParameter={paramType as AbiParameterTuple}
+              parentStateObjectKey={stateObjectKey}
+            />
+          );
+        } else {
+          return <InputBase {...inputProps} />;
+        }
+    }
+  };
 
-  return <InputBase {...inputProps} />;
+  return (
+    <div className="flex flex-col gap-1.5 w-full">
+      <div className="flex items-center ml-2">
+        {paramType.name && <span className="text-xs font-medium mr-2 leading-none">{paramType.name}</span>}
+        <span className="block text-xs font-extralight leading-none">{paramType.type}</span>
+      </div>
+      {renderInput()}
+    </div>
+  );
 };

packages/nextjs/app/debug/_components/contract/ReadOnlyFunctionForm.tsx

@@ -11,6 +11,7 @@ import {
   getFunctionInputKey,
   getInitialFormState,
   getParsedContractFunctionArgs,
+  transformAbiFunction,
 } from "~~/app/debug/_components/contract";
 import { getParsedError, notification } from "~~/utils/scaffold-eth";
 
@@ -42,7 +43,8 @@ export const ReadOnlyFunctionForm = ({
     },
   });
 
-  const inputElements = abiFunction.inputs.map((input, inputIndex) => {
+  const transformedFunction = transformAbiFunction(abiFunction);
+  const inputElements = transformedFunction.inputs.map((input, inputIndex) => {
     const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
     return (
       <ContractInput

packages/nextjs/app/debug/_components/contract/Tuple.tsx

@@ -0,0 +1,44 @@
+import { Dispatch, SetStateAction, useEffect, useState } 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";
+
+type TupleProps = {
+  abiTupleParameter: AbiParameterTuple;
+  setParentForm: Dispatch<SetStateAction<Record<string, any>>>;
+  parentStateObjectKey: string;
+  parentForm: Record<string, any> | undefined;
+};
+
+export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }: TupleProps) => {
+  const [form, setForm] = useState<Record<string, any>>(() => getInitalTupleFormState(abiTupleParameter));
+
+  useEffect(() => {
+    const values = Object.values(form);
+    const argsStruct: Record<string, any> = {};
+    abiTupleParameter.components.forEach((component, componentIndex) => {
+      argsStruct[component.name || `input_${componentIndex}_`] = values[componentIndex];
+    });
+
+    setParentForm(parentForm => ({ ...parentForm, [parentStateObjectKey]: JSON.stringify(argsStruct, replacer) }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(form, replacer)]);
+
+  return (
+    <div>
+      <div className="collapse collapse-arrow bg-base-200 pl-4 py-1.5 border-2 border-secondary">
+        <input type="checkbox" className="min-h-fit peer" />
+        <div className="collapse-title p-0 min-h-fit peer-checked:mb-2 text-primary-content/50">
+          <p className="m-0 p-0 text-[1rem]">{abiTupleParameter.internalType}</p>
+        </div>
+        <div className="ml-3 flex-col space-y-4 border-secondary/80 border-l-2 pl-4 collapse-content">
+          {abiTupleParameter?.components?.map((param, index) => {
+            const key = getFunctionInputKey(abiTupleParameter.name || "tuple", param, index);
+            return <ContractInput setForm={setForm} form={form} key={key} stateObjectKey={key} paramType={param} />;
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};