Supporting actions with tuples and arrays

components/actions/action.tsx

@@ -7,14 +7,15 @@ import { Action } from "@/utils/types";
 import { useAction } from "@/hooks/useAction";
 import {
   AbiFunction,
+  AbiParameter,
   Address,
   Hex,
   formatEther,
   toFunctionSignature,
-  toHex,
 } from "viem";
 import { compactNumber } from "@/utils/numbers";
 import { decodeCamelCase } from "@/utils/case";
+import { InputValue } from "@/utils/input-values";
 
 type ActionCardProps = {
   action: Action;
@@ -26,7 +27,9 @@ type CallParameterFieldType =
   | bigint
   | Address
   | Hex
-  | boolean;
+  | boolean
+  | CallParameterFieldType[]
+  | { [k: string]: CallParameterFieldType };
 
 export const ActionCard = function ({ action, idx }: ActionCardProps) {
   const { isLoading, args, functionName, functionAbi } = useAction(action);
@@ -158,22 +161,47 @@ const CallParameterField = ({
     <InputText
       className="w-full"
       addon={decodeCamelCase(addon)}
-      value={resolveValue(value, functionAbi.inputs?.[idx].type)}
+      value={resolveValue(value, functionAbi.inputs?.[idx])}
       readOnly
       addonPosition="left"
     />
   );
 };
 
-function resolveValue(value: CallParameterFieldType, abiType?: string): string {
-  if (!abiType) return value.toString();
-  else if (abiType === "address") {
+function resolveValue(
+  value: CallParameterFieldType,
+  abi?: AbiParameter
+): string {
+  if (!abi?.type) {
+    if (Array.isArray(value)) return value.join(", ");
     return value.toString();
-  } else if (abiType === "bytes32") {
-    return toHex(value);
-  } else if (abiType.startsWith("uint") || abiType.startsWith("int")) {
+  } else if (abi.type === "tuple[]") {
+    const abiClone = Object.assign({}, { ...abi });
+    abiClone.type = abiClone.type.replace(/\[\]$/, "");
+
+    const items = (value as any as any[]).map((item) =>
+      resolveValue(item, abiClone)
+    );
+    return items.join(", ");
+  } else if (abi.type === "tuple") {
+    const result = {} as Record<string, string>;
+    const components: AbiParameter[] = (abi as any).components || [];
+
+    for (let i = 0; i < components.length; i++) {
+      const k = components[i].name!;
+      result[k] = resolveValue((value as any)[k], components[i]);
+    }
+
+    return getReadableJson(result);
+  } else if (abi.type.endsWith("[]")) {
+    return (value as any as any[]).join(", ");
+  } else if (abi.type === "address") {
+    return value as string;
+  } else if (abi.type === "bytes32") {
+    return value as string;
+  } else if (abi.type.startsWith("uint") || abi.type.startsWith("int")) {
     return value.toString();
-  } else if (abiType.startsWith("bool")) {
+  } else if (abi.type.startsWith("bool")) {
     return value ? "Yes" : "No";
   }
   return value.toString();
@@ -202,3 +230,9 @@ function resolveAddon(
   }
   return (idx + 1).toString();
 }
+
+function getReadableJson(value: Record<string, InputValue>): string {
+  const items = Object.keys(value).map((k) => k + ": " + value[k]);
+
+  return "{ " + items.join(", ") + " }";
+}

components/input/function-call-form.tsx

@@ -0,0 +1,70 @@
+import { FC, useState } from "react";
+import { Address, Hex } from "viem";
+import { AlertInline, InputText } from "@aragon/ods";
+import { PleaseWaitSpinner } from "@/components/please-wait";
+import { isAddress } from "@/utils/evm";
+import { Action } from "@/utils/types";
+import { Else, ElseIf, If, Then } from "@/components/if";
+import { useAbi } from "@/hooks/useAbi";
+import { FunctionSelector } from "./function-selector";
+
+interface FunctionCallFormProps {
+  onAddAction: (action: Action) => any;
+}
+export const FunctionCallForm: FC<FunctionCallFormProps> = ({
+  onAddAction,
+}) => {
+  const [targetContract, setTargetContract] = useState<string>("");
+  const { abi, isLoading: loadingAbi } = useAbi(targetContract as Address);
+
+  const actionEntered = (data: Hex, value: bigint) => {
+    onAddAction({
+      to: targetContract,
+      value,
+      data,
+    });
+  };
+
+  return (
+    <div className="my-6">
+      <div className="mb-3">
+        <InputText
+          label="Contract address"
+          placeholder="0x1234..."
+          variant={
+            !targetContract || isAddress(targetContract)
+              ? "default"
+              : "critical"
+          }
+          value={targetContract}
+          onChange={(e) => setTargetContract(e.target.value || "")}
+        />
+      </div>
+      <If condition={loadingAbi}>
+        <Then>
+          <div>
+            <PleaseWaitSpinner />
+          </div>
+        </Then>
+        <ElseIf not={targetContract}>
+          <p>Enter the address of the contract to interact with</p>
+        </ElseIf>
+        <ElseIf not={isAddress(targetContract)}>
+          <AlertInline
+            message="The address of the contract is not valid"
+            variant="critical"
+          />
+        </ElseIf>
+        <ElseIf not={abi?.length}>
+          <AlertInline
+            message="Cannot find any public interface for the given contract address"
+            variant="critical"
+          />
+        </ElseIf>
+        <Else>
+          <FunctionSelector abi={abi} actionEntered={actionEntered} />
+        </Else>
+      </If>
+    </div>
+  );
+};