#251 Add ABI encoding for raw input form

apps/web/src/components/sendTransaction.tsx

@@ -5,7 +5,8 @@ import {
     ERC20DepositForm,
     ERC721DepositForm,
     EtherDepositForm,
-    RawInputForm,
+    GenericInputForm,
+    GenericInputFormSpecification,
     TransactionFormSuccessData,
 } from "@cartesi/rollups-explorer-ui";
 import { Select } from "@mantine/core";
@@ -17,6 +18,8 @@ import { useSearchMultiTokens } from "../hooks/useSearchMultiTokens";
 import { useSearchTokens } from "../hooks/useSearchTokens";
 import getConfiguredChainId from "../lib/getConfiguredChain";
 import { BlockExplorerLink } from "./BlockExplorerLink";
+import { useSpecification } from "./specification/hooks/useSpecification";
+import { JSON_ABI } from "./specification/types";
 
 export type DepositType =
     | "ether"
@@ -63,6 +66,9 @@ const SendTransaction: FC<DepositProps> = ({
         address: debouncedMultiTokenId,
         chainId,
     });
+    const { listSpecifications } = useSpecification();
+    const specifications =
+        listSpecifications()?.filter((s) => s.mode === JSON_ABI) ?? [];
 
     const onSuccess = useCallback(
         ({ receipt, type }: TransactionFormSuccessData) => {
@@ -120,7 +126,7 @@ const SendTransaction: FC<DepositProps> = ({
                     },
                     {
                         group: "Other",
-                        items: [{ value: "input", label: "Raw Input" }],
+                        items: [{ value: "input", label: "Generic Input" }],
                     },
                 ]}
                 value={depositType}
@@ -154,8 +160,11 @@ const SendTransaction: FC<DepositProps> = ({
                     onSuccess={onSuccess}
                 />
             ) : depositType === "input" ? (
-                <RawInputForm
+                <GenericInputForm
                     applications={applications}
+                    specifications={
+                        specifications as GenericInputFormSpecification[]
+                    }
                     isLoadingApplications={fetching}
                     onSearchApplications={setApplicationId}
                     onSuccess={onSuccess}

packages/ui/package.json

@@ -36,6 +36,7 @@
         "ramda-adjunct": "^5.0.1",
         "react-icons": "^4",
         "viem": "^2",
+        "uuid": "^11.0.3",
         "wagmi": "^2"
     },
     "peerDependencies": {

packages/ui/src/GenericInputForm/AbiFields.tsx

@@ -0,0 +1,156 @@
+import { useFormContext } from "./context";
+import {
+    Flex,
+    Group,
+    SegmentedControl,
+    Select,
+    Text,
+    Textarea,
+    Tooltip,
+} from "@mantine/core";
+import { FC } from "react";
+import { FormAbiMethod, FormSpecification, SpecificationMode } from "./types";
+import { TbHelp } from "react-icons/tb";
+import { AbiFunctionName } from "./AbiFunctionName";
+import { AbiFunctionParams } from "./AbiFunctionParams";
+import { AbiParameter } from "./AbiParameter";
+import { resetAbiFunctionParams } from "./utils";
+
+export interface AbiFieldsProps {
+    specifications: FormSpecification[];
+}
+
+export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
+    const form = useFormContext();
+    const { abiMethod, specificationMode } = form.getTransformedValues();
+    const specificationOptions = specifications.map((s) => ({
+        value: s.id,
+        label: s.name,
+    }));
+
+    return (
+        <>
+            <Select
+                label="ABI method"
+                description="Select how to attach an ABI"
+                data-testid="abi-method-select"
+                allowDeselect={false}
+                withAsterisk
+                data={[
+                    {
+                        value: "existing",
+                        label: "ABI from an existing JSON_ABI specification",
+                    },
+                    { value: "new", label: "New ABI" },
+                ]}
+                {...form.getInputProps("abiMethod")}
+                onChange={(nextValue) => {
+                    form.setFieldValue("abiMethod", nextValue as FormAbiMethod);
+                    form.setFieldValue("specificationId", "");
+                    form.setFieldValue("abiFunctionName", "");
+                    form.setFieldValue("humanAbi", "");
+                    form.setFieldValue("abiParam", "");
+                    form.setFieldValue("savedAbiParam", "");
+                    form.setFieldValue("specificationMode", "json_abi");
+                    resetAbiFunctionParams(form, []);
+                }}
+            />
+
+            {abiMethod === "new" ? (
+                <>
+                    <SegmentedControl
+                        aria-label="Specification Mode"
+                        data={[
+                            {
+                                label: "JSON ABI",
+                                value: "json_abi",
+                            },
+                            {
+                                label: "ABI Parameters",
+                                value: "abi_params",
+                            },
+                        ]}
+                        {...form.getInputProps("specificationMode")}
+                        onChange={(nextValue) => {
+                            form.setFieldValue(
+                                "specificationMode",
+                                nextValue as SpecificationMode,
+                            );
+
+                            form.setFieldValue("specificationId", "");
+                            form.setFieldValue("abiFunctionName", "");
+                            form.setFieldValue("humanAbi", "");
+                            form.setFieldValue("abiParam", "");
+                            form.setFieldValue("savedAbiParam", "");
+                            resetAbiFunctionParams(form, []);
+                        }}
+                    />
+
+                    {specificationMode === "json_abi" ? (
+                        <Textarea
+                            data-testid="json-abi-textarea"
+                            resize="vertical"
+                            description="Define signatures in Human readable format"
+                            placeholder="function balanceOf(address owner) view returns (uint256) event Transfer(address indexed from, address indexed to, uint256 amount)"
+                            rows={5}
+                            label={
+                                <Group justify="flex-start" gap="3">
+                                    <Text size="sm">ABI</Text>
+                                    <Tooltip
+                                        multiline
+                                        label="Define the signature without wrapping it on quotes nor adding comma at the end to separate. Just hit enter and keep defining your signatures"
+                                        withArrow
+                                        w="300"
+                                    >
+                                        <Flex direction="column-reverse">
+                                            <TbHelp />
+                                        </Flex>
+                                    </Tooltip>
+                                </Group>
+                            }
+                            {...form.getInputProps("humanAbi")}
+                            onChange={(event) => {
+                                const nextValue = event.target.value;
+                                form.setFieldValue("humanAbi", nextValue);
+                                form.validateField("humanAbi");
+                                form.setFieldValue("abiFunctionName", "");
+                            }}
+                        />
+                    ) : (
+                        <AbiParameter />
+                    )}
+                </>
+            ) : (
+                <Select
+                    label="Specifications"
+                    description="Available JSON_ABI specifications"
+                    placeholder="Select specification"
+                    data={specificationOptions}
+                    allowDeselect={false}
+                    withAsterisk
+                    {...form.getInputProps("specificationId")}
+                    onChange={(nextValue) => {
+                        form.setFieldValue(
+                            "specificationId",
+                            nextValue as string,
+                        );
+                        form.setFieldValue("abiFunctionName", "");
+                        resetAbiFunctionParams(form, []);
+                    }}
+                />
+            )}
+
+            <AbiFunctionName />
+            <AbiFunctionParams />
+
+            <Textarea
+                label="Hex value"
+                description="Encoded hex value for the application"
+                readOnly
+                value={
+                    form.isValid() ? form.getInputProps("rawInput").value : "0x"
+                }
+            />
+        </>
+    );
+};

packages/ui/src/GenericInputForm/AbiFunctionName.tsx

@@ -0,0 +1,124 @@
+import { useFormContext } from "./context";
+import { Alert, Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import { AbiFunction } from "viem";
+import { useCallback } from "react";
+import { FunctionSignature } from "./FunctionSignature";
+import { TbAlertCircle } from "react-icons/tb";
+import { resetAbiFunctionParams } from "./utils";
+import { AbiInputParam, GenericFormAbiFunction } from "./types";
+
+export const AbiFunctionName = () => {
+    const form = useFormContext();
+    const { abiMethod, abiFunction, selectedSpecification, specificationMode } =
+        form.getTransformedValues();
+    const combobox = useCombobox({
+        onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+    const specificationFunctions = (
+        (selectedSpecification?.abi as GenericFormAbiFunction[]) ?? []
+    ).filter((item) => item.type === "function");
+
+    const onChangeAbiFunctionName = useCallback(
+        (abiFunctionName: string) => {
+            combobox.closeDropdown();
+            form.setFieldValue("abiFunctionName", abiFunctionName);
+
+            const nextAbiFunction = (
+                (selectedSpecification?.abi as AbiFunction[]) ?? []
+            ).find((abiFunction) => abiFunction.name === abiFunctionName);
+
+            if (nextAbiFunction) {
+                resetAbiFunctionParams(
+                    form,
+                    nextAbiFunction.inputs as AbiInputParam[],
+                );
+            }
+        },
+        [combobox, form, selectedSpecification],
+    );
+
+    return (
+        <>
+            {(abiMethod === "existing" || specificationMode === "json_abi") &&
+                selectedSpecification && (
+                    <>
+                        {specificationFunctions.length > 0 ? (
+                            <Combobox
+                                store={combobox}
+                                onOptionSubmit={onChangeAbiFunctionName}
+                            >
+                                <Combobox.Target>
+                                    <InputBase
+                                        component="button"
+                                        type="button"
+                                        pointer
+                                        label="ABI Function"
+                                        description="Available ABI functions"
+                                        rightSection={<Combobox.Chevron />}
+                                        rightSectionPointerEvents="none"
+                                        withAsterisk
+                                        {...form.getInputProps(
+                                            "abiFunctionName",
+                                        )}
+                                        style={{ overflow: "hidden" }}
+                                        onClick={() =>
+                                            combobox.toggleDropdown()
+                                        }
+                                    >
+                                        {abiFunction ? (
+                                            <FunctionSignature
+                                                abiFunction={abiFunction}
+                                            />
+                                        ) : (
+                                            <Input.Placeholder>
+                                                Select function
+                                            </Input.Placeholder>
+                                        )}
+                                    </InputBase>
+                                </Combobox.Target>
+
+                                <Combobox.Dropdown>
+                                    <Combobox.Options>
+                                        {specificationFunctions.map(
+                                            (abiFunction) => {
+                                                const params =
+                                                    abiFunction.inputs
+                                                        .map(
+                                                            (input) =>
+                                                                `${input.type} ${input.name}`,
+                                                        )
+                                                        .join(", ");
+
+                                                return (
+                                                    <Combobox.Option
+                                                        key={`${abiFunction.name}-${params}`}
+                                                        value={abiFunction.name}
+                                                    >
+                                                        <FunctionSignature
+                                                            abiFunction={
+                                                                abiFunction
+                                                            }
+                                                        />
+                                                    </Combobox.Option>
+                                                );
+                                            },
+                                        )}
+                                    </Combobox.Options>
+                                </Combobox.Dropdown>
+                            </Combobox>
+                        ) : (
+                            <Alert
+                                variant="light"
+                                color="blue"
+                                icon={<TbAlertCircle />}
+                                data-testid="no-functions-alert"
+                            >
+                                No ABI functions available for this
+                                specification.
+                            </Alert>
+                        )}
+                    </>
+                )}
+        </>
+    );
+};