-
Notifications
You must be signed in to change notification settings - Fork 809
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #728 from scaffold-eth/cli-backmerge
- Loading branch information
Showing
28 changed files
with
471 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| "create-eth": patch | ||
| --- | ||
|
|
||
| - Feat: Better complex struct inputs (#702) | ||
| - improve debug struct UI (#726) | ||
| - use next-themes to handle theme and update usehooks-ts (#707) | ||
| - up rainbowkit version to 1.3.5 (#719) | ||
| - Use arbitrumSepolia instead of Goerli (#716) | ||
| - Add Optimism Sepolia config (#711) | ||
| - Update screenshot example on Readme (#705) | ||
| - add use client to inputs barrel file (#699) | ||
| - add baseSepolia in hardhat.config (#696) | ||
| - removed "use client" from EtherInput, IntergerInput and AddessInput (#688) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 0 additions & 13 deletions
13
templates/base/.yarn/patches/usehooks-ts-npm-2.7.2-fceffe0e43.patch
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
templates/base/packages/nextjs/app/debug/_components/contract/Tuple.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| }; |
139 changes: 139 additions & 0 deletions
139
templates/base/packages/nextjs/app/debug/_components/contract/TupleArray.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| import { Dispatch, SetStateAction, useEffect, useState } from "react"; | ||
| import { ContractInput } from "./ContractInput"; | ||
| import { getFunctionInputKey, getInitalTupleArrayFormState } from "./utilsContract"; | ||
| import { replacer } from "~~/utils/scaffold-eth/common"; | ||
| import { AbiParameterTuple } from "~~/utils/scaffold-eth/contract"; | ||
|
|
||
| type TupleArrayProps = { | ||
| abiTupleParameter: AbiParameterTuple & { isVirtual?: true }; | ||
| setParentForm: Dispatch<SetStateAction<Record<string, any>>>; | ||
| parentStateObjectKey: string; | ||
| parentForm: Record<string, any> | undefined; | ||
| }; | ||
|
|
||
| export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObjectKey }: TupleArrayProps) => { | ||
| const [form, setForm] = useState<Record<string, any>>(() => getInitalTupleArrayFormState(abiTupleParameter)); | ||
| const [additionalInputs, setAdditionalInputs] = useState<Array<typeof abiTupleParameter.components>>([ | ||
| abiTupleParameter.components, | ||
| ]); | ||
|
|
||
| const depth = (abiTupleParameter.type.match(/\[\]/g) || []).length; | ||
|
|
||
| useEffect(() => { | ||
| // Extract and group fields based on index prefix | ||
| const groupedFields = Object.keys(form).reduce((acc, key) => { | ||
| const [indexPrefix, ...restArray] = key.split("_"); | ||
| const componentName = restArray.join("_"); | ||
| if (!acc[indexPrefix]) { | ||
| acc[indexPrefix] = {}; | ||
| } | ||
| acc[indexPrefix][componentName] = form[key]; | ||
| return acc; | ||
| }, {} as Record<string, Record<string, any>>); | ||
|
|
||
| let argsArray: Array<Record<string, any>> = []; | ||
|
|
||
| Object.keys(groupedFields).forEach(key => { | ||
| const currentKeyValues = Object.values(groupedFields[key]); | ||
|
|
||
| const argsStruct: Record<string, any> = {}; | ||
| abiTupleParameter.components.forEach((component, componentIndex) => { | ||
| argsStruct[component.name || `input_${componentIndex}_`] = currentKeyValues[componentIndex]; | ||
| }); | ||
|
|
||
| argsArray.push(argsStruct); | ||
| }); | ||
|
|
||
| if (depth > 1) { | ||
| argsArray = argsArray.map(args => { | ||
| return args[abiTupleParameter.components[0].name || "tuple"]; | ||
| }); | ||
| } | ||
|
|
||
| setParentForm(parentForm => { | ||
| return { ...parentForm, [parentStateObjectKey]: JSON.stringify(argsArray, replacer) }; | ||
| }); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [JSON.stringify(form, replacer)]); | ||
|
|
||
| const addInput = () => { | ||
| setAdditionalInputs(previousValue => { | ||
| const newAdditionalInputs = [...previousValue, abiTupleParameter.components]; | ||
|
|
||
| // Add the new inputs to the form | ||
| setForm(form => { | ||
| const newForm = { ...form }; | ||
| abiTupleParameter.components.forEach((component, componentIndex) => { | ||
| const key = getFunctionInputKey( | ||
| `${newAdditionalInputs.length - 1}_${abiTupleParameter.name || "tuple"}`, | ||
| component, | ||
| componentIndex, | ||
| ); | ||
| newForm[key] = ""; | ||
| }); | ||
| return newForm; | ||
| }); | ||
|
|
||
| return newAdditionalInputs; | ||
| }); | ||
| }; | ||
|
|
||
| const removeInput = () => { | ||
| // Remove the last inputs from the form | ||
| setForm(form => { | ||
| const newForm = { ...form }; | ||
| abiTupleParameter.components.forEach((component, componentIndex) => { | ||
| const key = getFunctionInputKey( | ||
| `${additionalInputs.length - 1}_${abiTupleParameter.name || "tuple"}`, | ||
| component, | ||
| componentIndex, | ||
| ); | ||
| delete newForm[key]; | ||
| }); | ||
| return newForm; | ||
| }); | ||
| setAdditionalInputs(inputs => inputs.slice(0, -1)); | ||
| }; | ||
|
|
||
| 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-1 text-primary-content/50"> | ||
| <p className="m-0 text-[1rem]">{abiTupleParameter.internalType}</p> | ||
| </div> | ||
| <div className="ml-3 flex-col space-y-2 border-secondary/70 border-l-2 pl-4 collapse-content"> | ||
| {additionalInputs.map((additionalInput, additionalIndex) => ( | ||
| <div key={additionalIndex} className="space-y-1"> | ||
| <span className="badge bg-base-300 badge-sm"> | ||
| {depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]`} | ||
| </span> | ||
| <div className="space-y-4"> | ||
| {additionalInput.map((param, index) => { | ||
| const key = getFunctionInputKey( | ||
| `${additionalIndex}_${abiTupleParameter.name || "tuple"}`, | ||
| param, | ||
| index, | ||
| ); | ||
| return ( | ||
| <ContractInput setForm={setForm} form={form} key={key} stateObjectKey={key} paramType={param} /> | ||
| ); | ||
| })} | ||
| </div> | ||
| </div> | ||
| ))} | ||
| <div className="flex space-x-2"> | ||
| <button className="btn btn-sm btn-secondary" onClick={addInput}> | ||
| + | ||
| </button> | ||
| {additionalInputs.length > 0 && ( | ||
| <button className="btn btn-sm btn-secondary" onClick={removeInput}> | ||
| - | ||
| </button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.