Form receiving values

aragon · Mar 6, 2024 · aee7bcb · aee7bcb
1 parent 3e91ea7
commit aee7bcb
Show file tree

Hide file tree

Showing 12 changed files with 129 additions and 73 deletions.
diff --git a/components/input/function-call-form.tsx b/components/input/function-call-form.tsx
@@ -47,13 +47,13 @@ export const FunctionCallForm: FC<FunctionCallFormProps> = ({
             <PleaseWaitSpinner />
           </div>
         </Then>
-        <ElseIf condition={!targetContract}>
+        <ElseIf not={targetContract}>
           <p>Enter the address of the contract to interact with</p>
         </ElseIf>
-        <ElseIf condition={!isAddress(targetContract)}>
+        <ElseIf not={isAddress(targetContract)}>
           <p>The address of the contract is not valid</p>
         </ElseIf>
-        <ElseIf condition={!abi?.length}>
+        <ElseIf not={abi?.length}>
           <p>The ABI of the contract is not publicly available</p>
         </ElseIf>
         <Else>

diff --git 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"}`}
             >
-              <If condition={!["pure", "view"].includes(fn.stateMutability)}>
+              <If not={["pure", "view"].includes(fn.stateMutability)}>
                 <Then>{decodeCamelCase(fn.name)}</Then>
                 <Else>
                   <span className="line-through">

diff --git 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<string | null>).concat(value);

diff --git 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<string | null>(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
@@ -1,73 +1,95 @@
 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<Record<string, InputValue>>) => any;
 }
 
 export const InputParameterTupleArray = ({
   abi,
   idx,
   onChange,
 }: IInputParameterTupleArrayProps) => {
-  const [value, setValue] = useState<string[][]>([[]]);
+  const [values, setValues] = useState<
+    Array<Record<string, InputValue> | 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<string, InputValue>) => {
+    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<Record<string, InputValue>>);
   };
 
   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 (
     <div>
-      {value.map((_, i) => (
-        <div className="mt-6">
-          <div className="flex justify-between">
-            <p className="text-base font-normal leading-tight text-neutral-800 md:text-lg mb-3">
-              {abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)}
-            </p>
-            <Tag label={(i + 1).toString()} variant="primary" />
-          </div>
+      <If not={someMissingName}>
+        <Then>
+          {values.map((_, i) => (
+            <div className="mt-6">
+              <div className="flex justify-between">
+                <p className="text-base font-normal leading-tight text-neutral-800 md:text-lg mb-3">
+                  {abi.name
+                    ? decodeCamelCase(abi.name)
+                    : "Parameter " + (idx + 1)}
+                </p>
+                <Tag label={(i + 1).toString()} variant="primary" />
+              </div>
 
-          <InputParameterTuple
-            abi={abi}
-            idx={i}
-            onChange={onItemChange}
-            hideTitle
+              <InputParameterTuple
+                abi={abi}
+                idx={i}
+                onChange={onItemChange}
+                hideTitle
+              />
+            </div>
+          ))}
+          <div className="flex justify-end mt-3">
+            <Button size="sm" variant="secondary" onClick={addMore}>
+              Add more{" "}
+              {!abi.name ? "" : decodeCamelCase(abi.name).toLowerCase()}
+            </Button>
+          </div>
+        </Then>
+        <Else>
+          <p className="text-base font-normal leading-tight text-neutral-800 md:text-lg mb-3">
+            {abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)}
+          </p>
+          <AlertInline
+            message={
+              "Cannot display the input fields" +
+              (!abi.name
+                ? ""
+                : " for " + decodeCamelCase(abi.name).toLowerCase()) +
+              ". The function definition is incomplete."
+            }
+            variant="critical"
           />
-        </div>
-      ))}
-      <div className="flex justify-end mt-3">
-        <Button size="sm" variant="secondary" onClick={addMore}>
-          Add more {!abi.name ? "" : decodeCamelCase(abi.name).toLowerCase()}
-        </Button>
-      </div>
+        </Else>
+      </If>
     </div>
   );
 };
diff --git 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<string, InputValue>) => any;
   hideTitle?: boolean;
 }
 
@@ -18,35 +19,65 @@ export const InputParameterTuple = ({
   onChange,
   hideTitle,
 }: IInputParameterTupleProps) => {
-  const [value, setValue] = useState<Record<string, string>>({});
+  const [values, setValues] = useState<Array<InputValue | undefined>>([]);
 
   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<string, InputValue> = {};
+
+    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 (
     <div>
-      <If condition={!hideTitle}>
+      <If not={hideTitle}>
         <p className="text-base font-normal leading-tight text-neutral-800 md:text-lg mb-3">
           {abi.name ? decodeCamelCase(abi.name) : "Parameter " + (idx + 1)}
         </p>
       </If>
 
-      <div className="ml-6">
-        {components.map((item, i) => (
-          <div key={i} className="mb-3">
-            <InputParameter abi={item} idx={i} onChange={console.log} />
+      <If not={someMissingName}>
+        <Then>
+          <div className="ml-6">
+            {components.map((item, i) => (
+              <div key={i} className="mb-3">
+                <InputParameter abi={item} idx={i} onChange={onItemChange} />
+              </div>
+            ))}
           </div>
-        ))}
-      </div>
+        </Then>
+        <Else>
+          <AlertInline
+            message={
+              "Cannot display the input fields" +
+              (!abi.name
+                ? ""
+                : " for " + decodeCamelCase(abi.name).toLowerCase()) +
+              ". The function definition is incomplete."
+            }
+            variant="critical"
+          />
+        </Else>
+      </If>
     </div>
   );
 };
diff --git a/components/input/withdrawal.tsx b/components/input/withdrawal.tsx
@@ -34,11 +34,11 @@ const WithdrawalInput: FC<WithdrawalInputProps> = ({ setActions }) => {
           value={to}
           onChange={handleTo}
         />
-        <If condition={!to}>
+        <If not={to}>
           <Then>
             <p className="mt-3">Enter the address to transfer to</p>
           </Then>
-          <ElseIf condition={!isAddress(to)}>
+          <ElseIf not={isAddress(to)}>
             <p className="mt-3">The address you entered is not valid</p>
           </ElseIf>
         </If>

diff --git a/plugins/delegateAnnouncer/components/UserDelegateCard.tsx b/plugins/delegateAnnouncer/components/UserDelegateCard.tsx
@@ -96,7 +96,7 @@ export const SelfDelegationProfileCard = ({ address, tokenAddress, message, load
                         <Button variant="secondary" size="sm" onClick={() => delegateTo()}>Delegate</Button>
                     </div>
                 </If>
-                <If condition={!message}>
+                <If not={message}>
                     <div className="mt-1">
                         <Button 
                             variant="primary" 

diff --git a/plugins/delegateAnnouncer/pages/index.tsx b/plugins/delegateAnnouncer/pages/index.tsx
@@ -63,7 +63,7 @@ export default function DelegateAnnouncements() {
             </span>
           </SectionView>
         </If>
-        <If condition={!delegateAnnouncementsIsLoading}>
+        <If not={delegateAnnouncementsIsLoading}>
           <span className="my-3">
             No delegations have been registered on this DAO
           </span>

diff --git a/plugins/dualGovernance/pages/new.tsx b/plugins/dualGovernance/pages/new.tsx
@@ -283,7 +283,7 @@ export default function Create() {
           </ElseIf>
           <Else>
             <div className="mt-14 mb-6">
-              <If condition={!actions.length}>
+              <If not={actions.length}>
                 <Then>
                   <p>Add the first action to continue</p>
                 </Then>

diff --git a/plugins/tokenVoting/pages/new.tsx b/plugins/tokenVoting/pages/new.tsx
@@ -282,7 +282,7 @@ export default function Create() {
           </ElseIf>
           <Else>
             <div className="mt-14 mb-6">
-              <If condition={!actions.length}>
+              <If not={actions.length}>
                 <Then>
                   <p>Add the first action to continue</p>
                 </Then>

diff --git a/utils/input-values.ts b/utils/input-values.ts
@@ -153,15 +153,16 @@ export function readableTypeName(paramType: string): string {
     case "address":
       return "Address";
     case "bytes":
-      return "Hexadecimal value";
+      return "Hexadecimal bytes";
     case "string":
       return "Text";
     case "bool":
       return "Yes or no";
   }
 
   if (paramType.match(/^bytes[0-9]{1,2}$/)) {
-    return "Hexadecimal value";
+    const len = paramType.replace(/^bytes/, "");
+    return "Hexadecimal bytes (" + len + ")";
   } else if (paramType.match(/^uint[0-9]+$/)) {
     return "Positive number (in wei)";
   } else if (paramType.match(/^int[0-9]+$/)) {