From aee7bcb4ec795aa70c789bb4c72d6ad6910e244d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B8r=E2=88=82=C2=A1?= Date: Wed, 6 Mar 2024 13:42:28 +0100 Subject: [PATCH] Form receiving values --- components/input/function-call-form.tsx | 6 +- components/input/function-selector.tsx | 2 +- components/input/input-parameter-array.tsx | 3 +- components/input/input-parameter-text.tsx | 3 +- .../input/input-parameter-tuple-array.tsx | 106 +++++++++++------- components/input/input-parameter-tuple.tsx | 65 ++++++++--- components/input/withdrawal.tsx | 4 +- .../components/UserDelegateCard.tsx | 2 +- plugins/delegateAnnouncer/pages/index.tsx | 2 +- plugins/dualGovernance/pages/new.tsx | 2 +- plugins/tokenVoting/pages/new.tsx | 2 +- utils/input-values.ts | 5 +- 12 files changed, 129 insertions(+), 73 deletions(-) diff --git a/components/input/function-call-form.tsx b/components/input/function-call-form.tsx index 5a7d3d05..90f1cd4e 100644 --- a/components/input/function-call-form.tsx +++ b/components/input/function-call-form.tsx @@ -47,13 +47,13 @@ export const FunctionCallForm: FC = ({ - +

Enter the address of the contract to interact with

 - +

The address of the contract is not valid

 - +

The ABI of the contract is not publicly available

 diff --git a/components/input/function-selector.tsx b/components/input/function-selector.tsx index 5302548d..65f5a951 100644 --- a/components/input/function-selector.tsx +++ b/components/input/function-selector.tsx @@ -105,7 +105,7 @@ export const FunctionSelector = ({ } className={`w-full text-left font-sm hover:bg-neutral-100 py-2 px-3 rounded-xl hover:cursor-pointer ${fn.name === selectedAbiItem?.name && "bg-neutral-100 font-semibold"}`} > - + {decodeCamelCase(fn.name)} diff --git a/components/input/input-parameter-array.tsx b/components/input/input-parameter-array.tsx index 246901ef..91549ea6 100644 --- a/components/input/input-parameter-array.tsx +++ b/components/input/input-parameter-array.tsx @@ -24,8 +24,9 @@ export const InputParameterArray = ({ const baseType = abi.type.replace(/\[\]$/, ""); useEffect(() => { + // Clean up if another function is selected setValue([null]); - }, [abi]); + }, [abi, idx]); const onItemChange = (i: number, newVal: string) => { const newArray = ([] as Array).concat(value); diff --git a/components/input/input-parameter-text.tsx b/components/input/input-parameter-text.tsx index b941103d..a666e381 100644 --- a/components/input/input-parameter-text.tsx +++ b/components/input/input-parameter-text.tsx @@ -23,8 +23,9 @@ export const InputParameterText = ({ const [value, setValue] = useState(null); useEffect(() => { + // Clean up if another function is selected setValue(null); - }, [abi]); + }, [abi, idx]); const handleValue = (val: string) => { setValue(val); diff --git a/components/input/input-parameter-tuple-array.tsx b/components/input/input-parameter-tuple-array.tsx index a9fb6ecd..84fd6e19 100644 --- a/components/input/input-parameter-tuple-array.tsx +++ b/components/input/input-parameter-tuple-array.tsx @@ -1,18 +1,15 @@ import { useEffect, useState } from "react"; -import { Button, Tag } from "@aragon/ods"; +import { AlertInline, Button, Tag } from "@aragon/ods"; import { AbiParameter } from "viem"; -import { - InputValue, - handleStringValue, - isValidStringValue, -} from "@/utils/input-values"; +import { InputValue } from "@/utils/input-values"; import { InputParameterTuple } from "./input-parameter-tuple"; import { decodeCamelCase } from "@/utils/case"; +import { Else, If, Then } from "../if"; interface IInputParameterTupleArrayProps { abi: AbiParameter; idx: number; - onChange: (paramIdx: number, value: InputValue) => any; + onChange: (paramIdx: number, value: Array>) => any; } export const InputParameterTupleArray = ({ @@ -20,54 +17,79 @@ export const InputParameterTupleArray = ({ idx, onChange, }: IInputParameterTupleArrayProps) => { - const [value, setValue] = useState([[]]); + const [values, setValues] = useState< + Array | undefined> + >([undefined]); useEffect(() => { - setValue([[]]); - }, [abi]); + // Clean up if another function is selected + setValues([undefined]); + }, [abi, idx]); - const onItemChange = (i: number, newVal: InputValue) => { - console.log(i, newVal); + const onItemChange = (i: number, newVal: Record) => { + const newValues = [...values]; + newValues[i] = newVal; + setValues(newValues); - // const newArray = ([] as string[][]).concat(value); - // newArray[i] = newVal; - // setValue(newArray); - // const transformedItems = newArray.map((item) => - // handleStringValue(item, abi.type) - // ); - // if (transformedItems.some((item) => item === null)) return; - // onChange(idx, transformedItems as InputValue[]); + if (newValues.some((item) => !item)) return; + + onChange(idx, newValues as Array>); }; const addMore = () => { - const newValue = [...value, []]; - setValue(newValue); + const newValues = [...values, undefined]; + setValues(newValues); }; + const components: AbiParameter[] = (abi as any).components || []; + const someMissingName = true || components.some((c) => !c.name); + return (
- {value.map((_, i) => ( -
-
-

- {abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)} -

- -
+ + + {values.map((_, i) => ( +
+
+

+ {abi.name + ? decodeCamelCase(abi.name) + : "Parameter " + (idx + 1)} +

+ +
- +
+ ))} +
+ +
+ + +

+ {abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)} +

+ -
- ))} -
- -
+ +
); }; diff --git a/components/input/input-parameter-tuple.tsx b/components/input/input-parameter-tuple.tsx index de16adb4..b0a212d0 100644 --- a/components/input/input-parameter-tuple.tsx +++ b/components/input/input-parameter-tuple.tsx @@ -3,12 +3,13 @@ import { AbiParameter } from "viem"; import { decodeCamelCase } from "@/utils/case"; import { InputParameter } from "./input-parameter"; import { InputValue } from "@/utils/input-values"; -import { If } from "../if"; +import { Else, If, Then } from "../if"; +import { AlertInline } from "@aragon/ods"; interface IInputParameterTupleProps { abi: AbiParameter; idx: number; - onChange: (paramIdx: number, value: InputValue) => any; + onChange: (paramIdx: number, value: Record) => any; hideTitle?: boolean; } @@ -18,35 +19,65 @@ export const InputParameterTuple = ({ onChange, hideTitle, }: IInputParameterTupleProps) => { - const [value, setValue] = useState>({}); + const [values, setValues] = useState>([]); useEffect(() => { - setValue({}); - }, [abi]); + // Clean up if another function is selected + setValues([]); + }, [abi, idx]); - // const ohChange = (idx: number, value: string) => { - // const newInputValues = [...abiInputValues]; - // newInputValues[idx] = value; - // setAbiInputValues(newInputValues); - // }; + const onItemChange = (i: number, newVal: InputValue) => { + const newValues = [...values]; + newValues[i] = newVal; + setValues(newValues); + + // Report up + const result: Record = {}; + + for (let i = 0; i < components.length; i++) { + // Skip if incomplete + if (newValues[i] === undefined || newValues[i] === null) return; + // Arrange as an object + result[components[i].name!] = newValues[i]!; + } + + onChange(idx, result); + }; const components: AbiParameter[] = (abi as any).components || []; + const someMissingName = true || components.some((c) => !c.name); return (
- +

{abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)}

-
- {components.map((item, i) => ( -
- + + +
+ {components.map((item, i) => ( +
+ +
+ ))}
- ))} -
+ + + + +
); }; diff --git a/components/input/withdrawal.tsx b/components/input/withdrawal.tsx index 53a230a0..02ad24d3 100644 --- a/components/input/withdrawal.tsx +++ b/components/input/withdrawal.tsx @@ -34,11 +34,11 @@ const WithdrawalInput: FC = ({ setActions }) => { value={to} onChange={handleTo} /> - +

Enter the address to transfer to

 - +

The address you entered is not valid

 diff --git a/plugins/delegateAnnouncer/components/UserDelegateCard.tsx b/plugins/delegateAnnouncer/components/UserDelegateCard.tsx index 8ccde41a..dde49ef9 100644 --- a/plugins/delegateAnnouncer/components/UserDelegateCard.tsx +++ b/plugins/delegateAnnouncer/components/UserDelegateCard.tsx @@ -96,7 +96,7 @@ export const SelfDelegationProfileCard = ({ address, tokenAddress, message, load
- +