From 799fc4dd285f309855e034622d07d616774e135e Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 4 Oct 2024 17:37:47 +0300
Subject: [PATCH 01/40] test(apps/web): Pass json_abi specifications to raw
 input form

---
 apps/web/src/components/sendTransaction.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index 182b98f23..c65b5dfbb 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -17,6 +17,9 @@ 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";
+import { RawInputFormSpecification } from "@cartesi/rollups-explorer-ui/src/RawInputForm";
 
 export type DepositType =
     | "ether"
@@ -34,7 +37,7 @@ interface DepositProps {
 const DEBOUNCE_TIME = 400 as const;
 
 const SendTransaction: FC<DepositProps> = ({
-    initialDepositType = "ether",
+    initialDepositType = "input",
 }) => {
     const [depositType, setDepositType] =
         useState<DepositType>(initialDepositType);
@@ -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}
@@ -156,6 +162,9 @@ const SendTransaction: FC<DepositProps> = ({
             ) : depositType === "input" ? (
                 <RawInputForm
                     applications={applications}
+                    specifications={
+                        specifications as RawInputFormSpecification[]
+                    }
                     isLoadingApplications={fetching}
                     onSearchApplications={setApplicationId}
                     onSuccess={onSuccess}

From 0a6df07f8e48ec686125f158ee741dd00a98a0a5 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 4 Oct 2024 17:38:37 +0300
Subject: [PATCH 02/40] test(apps/web): Add abi option for raw input form

---
 packages/ui/src/RawInputForm.tsx | 56 +++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/RawInputForm.tsx b/packages/ui/src/RawInputForm.tsx
index c0b096d8e..c798b6428 100644
--- a/packages/ui/src/RawInputForm.tsx
+++ b/packages/ui/src/RawInputForm.tsx
@@ -10,6 +10,7 @@ import {
     Group,
     Loader,
     SegmentedControl,
+    Select,
     Stack,
     Textarea,
 } from "@mantine/core";
@@ -17,6 +18,7 @@ import { useForm } from "@mantine/form";
 import { FC, useCallback, useEffect, useState } from "react";
 import { TbAlertCircle, TbCheck } from "react-icons/tb";
 import {
+    Abi,
     BaseError,
     getAddress,
     Hex,
@@ -30,10 +32,17 @@ import { TransactionProgress } from "./TransactionProgress";
 import useUndeployedApplication from "./hooks/useUndeployedApplication";
 import { TransactionFormSuccessData } from "./DepositFormTypes";
 
-type Format = "hex" | "utf";
+type Format = "hex" | "string" | "abi";
+
+export interface RawInputFormSpecification {
+    id: string;
+    name: string;
+    abi: Abi;
+}
 
 export interface RawInputFormProps {
     applications: string[];
+    specifications: RawInputFormSpecification[];
     isLoadingApplications: boolean;
     onSearchApplications: (applicationId: string) => void;
     onSuccess: (receipt: TransactionFormSuccessData) => void;
@@ -42,6 +51,7 @@ export interface RawInputFormProps {
 export const RawInputForm: FC<RawInputFormProps> = (props) => {
     const {
         applications,
+        specifications,
         isLoadingApplications,
         onSearchApplications,
         onSuccess,
@@ -52,6 +62,8 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
             application: "",
             rawInput: "0x",
             stringInput: "",
+            abiMethod: "existing",
+            specificationId: "",
         },
         validate: {
             application: (value) =>
@@ -63,9 +75,10 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                 ? getAddress(values.application)
                 : zeroAddress,
             rawInput: values.rawInput as Hex,
+            abiMethod: values.abiMethod,
         }),
     });
-    const { address, rawInput } = form.getTransformedValues();
+    const { address, rawInput, abiMethod } = form.getTransformedValues();
     const prepare = useSimulateInputBoxAddInput({
         args: [address, rawInput],
         query: {
@@ -81,6 +94,10 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
     const canSubmit = form.isValid() && prepare.error === null;
     const isUndeployedApp = useUndeployedApplication(address, applications);
     const [format, setFormat] = useState<Format>("hex");
+    const specificationOptions = specifications.map((s) => ({
+        value: s.id,
+        label: s.name,
+    }));
 
     const onChangeFormat = useCallback((format: string | null) => {
         setFormat(format as Format);
@@ -136,7 +153,8 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                     onChange={onChangeFormat}
                     data={[
                         { label: "Hex", value: "hex" },
-                        { label: "String to Hex", value: "utf" },
+                        { label: "String to Hex", value: "string" },
+                        { label: "ABI to Hex", value: "abi" },
                     ]}
                 />
 
@@ -147,7 +165,7 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                         withAsterisk
                         {...form.getInputProps("rawInput")}
                     />
-                ) : (
+                ) : format === "string" ? (
                     <>
                         <Textarea
                             label="String input"
@@ -172,7 +190,35 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                             {...form.getInputProps("rawInput")}
                         />
                     </>
-                )}
+                ) : format === "abi" ? (
+                    <Stack>
+                        <Select
+                            label="ABI method"
+                            description="Select how to attach an ABI"
+                            mb={16}
+                            allowDeselect={false}
+                            data={[
+                                {
+                                    value: "existing",
+                                    label: "ABI from an existing JSON_ABI specification",
+                                },
+                                { value: "new", label: "New ABI" },
+                            ]}
+                            {...form.getInputProps("abiMethod")}
+                        />
+
+                        {abiMethod === "existing" ? (
+                            <Autocomplete
+                                label="Specifications"
+                                description="Available JSON_ABI specifications"
+                                placeholder="Select specification..."
+                                data={specificationOptions}
+                                withAsterisk
+                                {...form.getInputProps("specificationId")}
+                            />
+                        ) : null}
+                    </Stack>
+                ) : null}
 
                 <Collapse
                     in={

From 072916c8d992aaa3b2a348a82f3efaebafadb65e Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 8 Oct 2024 18:38:54 +0300
Subject: [PATCH 03/40] test(apps/web): Extend abi option for raw input form

---
 packages/ui/src/RawInputForm.tsx | 151 +++++++++++++++++++++++++++++--
 1 file changed, 141 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/RawInputForm.tsx b/packages/ui/src/RawInputForm.tsx
index c798b6428..79f020263 100644
--- a/packages/ui/src/RawInputForm.tsx
+++ b/packages/ui/src/RawInputForm.tsx
@@ -7,18 +7,23 @@ import {
     Autocomplete,
     Button,
     Collapse,
+    Combobox,
     Group,
+    InputBase,
+    Input,
     Loader,
     SegmentedControl,
     Select,
     Stack,
     Textarea,
+    useCombobox,
 } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, Fragment, useCallback, useEffect, useState } from "react";
 import { TbAlertCircle, TbCheck } from "react-icons/tb";
 import {
     Abi,
+    AbiFunction,
     BaseError,
     getAddress,
     Hex,
@@ -64,21 +69,36 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
             stringInput: "",
             abiMethod: "existing",
             specificationId: "",
+            abiFunctionName: "",
         },
         validate: {
             application: (value) =>
                 value !== "" && isAddress(value) ? null : "Invalid application",
             rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),
         },
-        transformValues: (values) => ({
-            address: isAddress(values.application)
-                ? getAddress(values.application)
-                : zeroAddress,
-            rawInput: values.rawInput as Hex,
-            abiMethod: values.abiMethod,
-        }),
+        transformValues: (values) => {
+            const selectedSpecification = specifications.find(
+                (s) => s.id === values.specificationId,
+            );
+            return {
+                address: isAddress(values.application)
+                    ? getAddress(values.application)
+                    : zeroAddress,
+                rawInput: values.rawInput as Hex,
+                abiMethod: values.abiMethod,
+                specificationId: values.specificationId,
+                selectedSpecification,
+                abiFunction: (
+                    (selectedSpecification?.abi as AbiFunction[]) ?? []
+                ).find(
+                    (abiFunction) =>
+                        abiFunction.name === values.abiFunctionName,
+                ),
+            };
+        },
     });
-    const { address, rawInput, abiMethod } = form.getTransformedValues();
+    const { address, rawInput, abiMethod, abiFunction, selectedSpecification } =
+        form.getTransformedValues();
     const prepare = useSimulateInputBoxAddInput({
         args: [address, rawInput],
         query: {
@@ -103,6 +123,16 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
         setFormat(format as Format);
     }, []);
 
+    const combobox = useCombobox({
+        onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+
+    const formatParams = useCallback((abiFunction: AbiFunction) => {
+        return abiFunction.inputs
+            .map((input) => `${input.type} ${input.name}`)
+            .join(", ");
+    }, []);
+
     useEffect(() => {
         if (wait.isSuccess) {
             onSuccess({ receipt: wait.data, type: "RAW" });
@@ -113,6 +143,10 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wait, onSearchApplications, onSuccess]);
 
+    useEffect(() => {
+        console.log("specifications::", specifications);
+    }, [specifications]);
+
     return (
         <form data-testid="raw-input-form">
             <Stack>
@@ -208,7 +242,7 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                         />
 
                         {abiMethod === "existing" ? (
-                            <Autocomplete
+                            <Select
                                 label="Specifications"
                                 description="Available JSON_ABI specifications"
                                 placeholder="Select specification..."
@@ -217,6 +251,103 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
                                 {...form.getInputProps("specificationId")}
                             />
                         ) : null}
+
+                        {selectedSpecification && (
+                            <Combobox
+                                store={combobox}
+                                onOptionSubmit={(abiFunctionName) => {
+                                    combobox.closeDropdown();
+                                    form.setFieldValue(
+                                        "abiFunctionName",
+                                        abiFunctionName,
+                                    );
+                                }}
+                            >
+                                <Combobox.Target>
+                                    <InputBase
+                                        component="button"
+                                        type="button"
+                                        pointer
+                                        rightSection={<Combobox.Chevron />}
+                                        rightSectionPointerEvents="none"
+                                        onClick={() =>
+                                            combobox.toggleDropdown()
+                                        }
+                                    >
+                                        {abiFunction ? (
+                                            `${abiFunction.name}(${formatParams(
+                                                abiFunction,
+                                            )})`
+                                        ) : (
+                                            <Input.Placeholder>
+                                                Select function
+                                            </Input.Placeholder>
+                                        )}
+                                    </InputBase>
+                                </Combobox.Target>
+                                <Combobox.Dropdown>
+                                    <Combobox.Options>
+                                        {(
+                                            selectedSpecification.abi as AbiFunction[]
+                                        )
+                                            .filter(
+                                                (item) =>
+                                                    item.type === "function",
+                                            )
+                                            .map((abiFunction) => {
+                                                const params =
+                                                    abiFunction.inputs
+                                                        .map(
+                                                            (input) =>
+                                                                `${input.type} ${input.name}`,
+                                                        )
+                                                        .join(", ");
+
+                                                return (
+                                                    <Combobox.Option
+                                                        key={`${abiFunction.name}-${params}`}
+                                                        value={abiFunction.name}
+                                                    >
+                                                        {abiFunction.name}(
+                                                        {abiFunction.inputs.map(
+                                                            (input, index) => (
+                                                                <Fragment
+                                                                    key={`${input.type}-${input.name}`}
+                                                                >
+                                                                    <span>
+                                                                        <span
+                                                                            style={{
+                                                                                color: "var(--mantine-color-blue-text)",
+                                                                            }}
+                                                                        >
+                                                                            {
+                                                                                input.type
+                                                                            }
+                                                                        </span>{" "}
+                                                                        <span>
+                                                                            {
+                                                                                input.name
+                                                                            }
+                                                                        </span>
+                                                                    </span>
+                                                                    {index <
+                                                                    abiFunction
+                                                                        .inputs
+                                                                        .length -
+                                                                        1
+                                                                        ? ", "
+                                                                        : ""}
+                                                                </Fragment>
+                                                            ),
+                                                        )}
+                                                        )
+                                                    </Combobox.Option>
+                                                );
+                                            })}
+                                    </Combobox.Options>
+                                </Combobox.Dropdown>
+                            </Combobox>
+                        )}
                     </Stack>
                 ) : null}
 

From 79fd896edaca3b18034bdd6f6f2ed907afd1b7c9 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 01:07:24 +0300
Subject: [PATCH 04/40] test(apps/web): Create GenericInputForm component

---
 apps/web/src/components/sendTransaction.tsx   |   3 +-
 .../ui/src/GenericInputForm/AbiFields.tsx     | 199 ++++++++++++++
 packages/ui/src/GenericInputForm/context.tsx  |   9 +
 packages/ui/src/GenericInputForm/index.tsx    | 249 ++++++++++++++++++
 packages/ui/src/GenericInputForm/types.ts     |  29 ++
 packages/ui/src/index.tsx                     |   1 +
 6 files changed, 489 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/GenericInputForm/AbiFields.tsx
 create mode 100644 packages/ui/src/GenericInputForm/context.tsx
 create mode 100644 packages/ui/src/GenericInputForm/index.tsx
 create mode 100644 packages/ui/src/GenericInputForm/types.ts

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index c65b5dfbb..9409ddae8 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -6,6 +6,7 @@ import {
     ERC721DepositForm,
     EtherDepositForm,
     RawInputForm,
+    GenericInputForm,
     TransactionFormSuccessData,
 } from "@cartesi/rollups-explorer-ui";
 import { Select } from "@mantine/core";
@@ -160,7 +161,7 @@ const SendTransaction: FC<DepositProps> = ({
                     onSuccess={onSuccess}
                 />
             ) : depositType === "input" ? (
-                <RawInputForm
+                <GenericInputForm
                     applications={applications}
                     specifications={
                         specifications as RawInputFormSpecification[]
diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
new file mode 100644
index 000000000..2ad8e3db1
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -0,0 +1,199 @@
+import { useFormContext } from "./context";
+import {
+    Alert,
+    Box,
+    Combobox,
+    Input,
+    InputBase,
+    Select,
+    Stack,
+    Text,
+    TextInput,
+    useCombobox,
+} from "@mantine/core";
+import { AbiFunction, AbiParameter } from "viem";
+import { FC, Fragment } from "react";
+import { FormSpecification } from "./types";
+import { TbAlertCircle } from "react-icons/tb";
+
+interface FunctionParamProps {
+    input: AbiParameter;
+}
+
+export const FunctionParam: FC<FunctionParamProps> = ({ input }) => {
+    return (
+        <Box display="inline">
+            <Text c="cyan" span fz="sm">
+                {input.type}
+            </Text>{" "}
+            <Text span fz="sm">
+                {input.name}
+            </Text>
+        </Box>
+    );
+};
+
+interface FunctionSignatureProps {
+    abiFunction: AbiFunction;
+}
+
+export const FunctionSignature: FC<FunctionSignatureProps> = ({
+    abiFunction,
+}) => {
+    return (
+        <>
+            <Text span fw="bold" fz="sm">
+                {abiFunction.name}
+            </Text>
+            (
+            {abiFunction.inputs.map((input, index) => (
+                <Fragment key={`${input.type}-${input.name}`}>
+                    <FunctionParam input={input} />
+                    {index < abiFunction.inputs.length - 1 ? ", " : ""}
+                </Fragment>
+            ))}
+            )
+        </>
+    );
+};
+
+export interface AbiFieldsProps {
+    specifications: FormSpecification[];
+}
+
+export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
+    const form = useFormContext();
+    const { abiMethod, abiFunction, selectedSpecification } =
+        form.getTransformedValues();
+    const specificationOptions = specifications.map((s) => ({
+        value: s.id,
+        label: s.name,
+    }));
+
+    const combobox = useCombobox({
+        onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+
+    return (
+        <Stack>
+            <Select
+                label="ABI method"
+                description="Select how to attach an ABI"
+                mb={16}
+                allowDeselect={false}
+                data={[
+                    {
+                        value: "existing",
+                        label: "ABI from an existing JSON_ABI specification",
+                    },
+                    { value: "new", label: "New ABI" },
+                ]}
+                {...form.getInputProps("abiMethod")}
+            />
+
+            {abiMethod === "existing" ? (
+                <Select
+                    label="Specifications"
+                    description="Available JSON_ABI specifications"
+                    placeholder="Select specification"
+                    data={specificationOptions}
+                    withAsterisk
+                    {...form.getInputProps("specificationId")}
+                />
+            ) : null}
+
+            {selectedSpecification && (
+                <Combobox
+                    store={combobox}
+                    onOptionSubmit={(abiFunctionName) => {
+                        combobox.closeDropdown();
+                        form.setFieldValue("abiFunctionName", abiFunctionName);
+                    }}
+                >
+                    <Combobox.Target>
+                        <InputBase
+                            component="button"
+                            type="button"
+                            pointer
+                            label="ABI Function"
+                            description="Available ABI functions"
+                            rightSection={<Combobox.Chevron />}
+                            rightSectionPointerEvents="none"
+                            withAsterisk
+                            onClick={() => combobox.toggleDropdown()}
+                        >
+                            {abiFunction ? (
+                                <FunctionSignature abiFunction={abiFunction} />
+                            ) : (
+                                <Input.Placeholder>
+                                    Select function
+                                </Input.Placeholder>
+                            )}
+                        </InputBase>
+                    </Combobox.Target>
+                    <Combobox.Dropdown>
+                        <Combobox.Options>
+                            {(selectedSpecification.abi as AbiFunction[])
+                                .filter((item) => item.type === "function")
+                                .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>
+            )}
+
+            {abiFunction && (
+                <Stack>
+                    {abiFunction.inputs.length > 0 ? (
+                        <>
+                            {abiFunction.inputs.map((input) => (
+                                <TextInput
+                                    key={`${input.name}-${input.type}`}
+                                    label={
+                                        input.name && input.type ? (
+                                            <FunctionParam input={input} />
+                                        ) : (
+                                            input.name || input.type
+                                        )
+                                    }
+                                    placeholder="Enter value"
+                                    withAsterisk
+                                />
+                            ))}
+                        </>
+                    ) : (
+                        <Alert
+                            variant="light"
+                            color="blue"
+                            icon={<TbAlertCircle />}
+                            data-testid={`specification-mode-info`}
+                        >
+                            No input arguments defined for{" "}
+                            <Text span fz="sm" fw="bold">
+                                {abiFunction.name}()
+                            </Text>
+                            .
+                        </Alert>
+                    )}
+                </Stack>
+            )}
+        </Stack>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/context.tsx b/packages/ui/src/GenericInputForm/context.tsx
new file mode 100644
index 000000000..02e534d87
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/context.tsx
@@ -0,0 +1,9 @@
+import { createFormContext } from "@mantine/form";
+import { FormTransformedValues, FormValues } from "./types";
+
+type TransformValues = (a: FormValues) => FormTransformedValues;
+
+export const [FormProvider, useFormContext, useForm] = createFormContext<
+    FormValues,
+    TransformValues
+>();
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
new file mode 100644
index 000000000..9111dc183
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -0,0 +1,249 @@
+import {
+    useSimulateInputBoxAddInput,
+    useWriteInputBoxAddInput,
+} from "@cartesi/rollups-wagmi";
+import {
+    Alert,
+    Autocomplete,
+    Button,
+    Collapse,
+    Group,
+    Loader,
+    SegmentedControl,
+    Stack,
+    Textarea,
+} from "@mantine/core";
+import { FC, useCallback, useEffect, useState } from "react";
+import { TbAlertCircle, TbCheck } from "react-icons/tb";
+import {
+    Abi,
+    AbiFunction,
+    BaseError,
+    getAddress,
+    Hex,
+    isAddress,
+    isHex,
+    stringToHex,
+    zeroAddress,
+} from "viem";
+import { useWaitForTransactionReceipt } from "wagmi";
+import { TransactionProgress } from "../TransactionProgress";
+import useUndeployedApplication from "../hooks/useUndeployedApplication";
+import { TransactionFormSuccessData } from "../DepositFormTypes";
+import { AbiFields } from "./AbiFields";
+import { FormMode } from "./types";
+import { useForm, FormProvider } from "./context";
+
+export interface GenericInputFormSpecification {
+    id: string;
+    name: string;
+    abi: Abi;
+}
+
+export interface GenericInputFormProps {
+    applications: string[];
+    specifications: GenericInputFormSpecification[];
+    isLoadingApplications: boolean;
+    onSearchApplications: (applicationId: string) => void;
+    onSuccess: (receipt: TransactionFormSuccessData) => void;
+}
+
+export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
+    const {
+        applications,
+        specifications,
+        isLoadingApplications,
+        onSearchApplications,
+        onSuccess,
+    } = props;
+    const form = useForm({
+        validateInputOnBlur: true,
+        initialValues: {
+            application: "",
+            rawInput: "0x",
+            stringInput: "",
+            abiMethod: "existing",
+            specificationId: "",
+            abiFunctionName: "",
+        },
+        validate: {
+            application: (value) =>
+                value !== "" && isAddress(value) ? null : "Invalid application",
+            rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),
+        },
+        transformValues: (values) => {
+            const selectedSpecification = specifications.find(
+                (s) => s.id === values.specificationId,
+            );
+            return {
+                address: isAddress(values.application)
+                    ? getAddress(values.application)
+                    : zeroAddress,
+                rawInput: values.rawInput as Hex,
+                abiMethod: values.abiMethod,
+                specificationId: values.specificationId,
+                selectedSpecification,
+                abiFunction: (
+                    (selectedSpecification?.abi as AbiFunction[]) ?? []
+                ).find(
+                    (abiFunction) =>
+                        abiFunction.name === values.abiFunctionName,
+                ),
+            };
+        },
+    });
+    const { address, rawInput } = form.getTransformedValues();
+    const prepare = useSimulateInputBoxAddInput({
+        args: [address, rawInput],
+        query: {
+            enabled: form.isValid(),
+        },
+    });
+
+    const execute = useWriteInputBoxAddInput();
+    const wait = useWaitForTransactionReceipt({
+        hash: execute.data,
+    });
+    const loading = execute.isPending || wait.isLoading;
+    const canSubmit = form.isValid() && prepare.error === null;
+    const isUndeployedApp = useUndeployedApplication(address, applications);
+    const [format, setFormat] = useState<FormMode>("hex");
+
+    const onChangeFormat = useCallback(
+        (format: string | null) => {
+            setFormat(format as FormMode);
+            form.reset();
+        },
+        [form],
+    );
+
+    useEffect(() => {
+        if (wait.isSuccess) {
+            onSuccess({ receipt: wait.data, type: "RAW" });
+            form.reset();
+            execute.reset();
+            onSearchApplications("");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wait, onSearchApplications, onSuccess]);
+
+    return (
+        <FormProvider form={form}>
+            <form data-testid="raw-input-form">
+                <Stack>
+                    <Autocomplete
+                        label="Application"
+                        description="The application smart contract address"
+                        placeholder="0x"
+                        data={applications}
+                        withAsterisk
+                        rightSection={
+                            (prepare.isLoading || isLoadingApplications) && (
+                                <Loader size="xs" />
+                            )
+                        }
+                        {...form.getInputProps("application")}
+                        error={
+                            form.errors.application ||
+                            (prepare.error as BaseError)?.shortMessage
+                        }
+                        onChange={(nextValue) => {
+                            form.setFieldValue("application", nextValue);
+                            onSearchApplications(nextValue);
+                        }}
+                    />
+
+                    {!form.errors.application && isUndeployedApp && (
+                        <Alert
+                            variant="light"
+                            color="yellow"
+                            icon={<TbAlertCircle />}
+                        >
+                            This is an undeployed application.
+                        </Alert>
+                    )}
+
+                    <SegmentedControl
+                        value={format}
+                        onChange={onChangeFormat}
+                        data={[
+                            { label: "Hex", value: "hex" },
+                            { label: "String to Hex", value: "string" },
+                            { label: "ABI to Hex", value: "abi" },
+                        ]}
+                    />
+
+                    {format === "hex" ? (
+                        <Textarea
+                            label="Raw input"
+                            description="Raw input for the application"
+                            withAsterisk
+                            {...form.getInputProps("rawInput")}
+                        />
+                    ) : format === "string" ? (
+                        <>
+                            <Textarea
+                                label="String input"
+                                description="String input for the application"
+                                mb={16}
+                                {...form.getInputProps("stringInput")}
+                                onChange={(event) => {
+                                    const nextValue = event.target.value;
+                                    form.setFieldValue(
+                                        "stringInput",
+                                        nextValue,
+                                    );
+
+                                    form.setFieldValue(
+                                        "rawInput",
+                                        stringToHex(nextValue),
+                                    );
+                                }}
+                            />
+
+                            <Textarea
+                                label="Hex value"
+                                description="Encoded hex value for the application"
+                                readOnly
+                                {...form.getInputProps("rawInput")}
+                            />
+                        </>
+                    ) : format === "abi" ? (
+                        <AbiFields specifications={specifications} />
+                    ) : null}
+
+                    <Collapse
+                        in={
+                            execute.isPending ||
+                            wait.isLoading ||
+                            execute.isSuccess ||
+                            execute.isError
+                        }
+                    >
+                        <TransactionProgress
+                            prepare={prepare}
+                            execute={execute}
+                            wait={wait}
+                            confirmationMessage="Raw input sent successfully!"
+                            defaultErrorMessage={execute.error?.message}
+                        />
+                    </Collapse>
+
+                    <Group justify="right">
+                        <Button
+                            variant="filled"
+                            disabled={!canSubmit}
+                            leftSection={<TbCheck />}
+                            loading={loading}
+                            onClick={() =>
+                                execute.writeContract(prepare.data!.request)
+                            }
+                        >
+                            Send
+                        </Button>
+                    </Group>
+                </Stack>
+            </form>
+        </FormProvider>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
new file mode 100644
index 000000000..dfc806d6a
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -0,0 +1,29 @@
+import { Abi, AbiFunction, Address, Hex } from "viem";
+
+export type FormMode = "hex" | "string" | "abi";
+
+export interface FormSpecification {
+    id: string;
+    name: string;
+    abi: Abi;
+}
+
+export type FormAbiMethod = "new" | "existing";
+
+export interface FormValues {
+    application: string;
+    rawInput: Hex;
+    stringInput: string;
+    abiMethod: FormAbiMethod;
+    specificationId: string;
+    abiFunctionName: string;
+}
+
+export interface FormTransformedValues {
+    address: Address;
+    rawInput: Hex;
+    abiMethod: FormAbiMethod;
+    specificationId: string;
+    abiFunction: AbiFunction | undefined;
+    selectedSpecification: FormSpecification | undefined;
+}
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index 3f532e624..e4cafd63a 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -17,3 +17,4 @@ export { Summary } from "./Summary";
 export { SummaryCard } from "./SummaryCard";
 export { TransactionProgress } from "./TransactionProgress";
 export { default as useWatchQueryOnBlockChange } from "./hooks/useWatchQueryOnBlockChange";
+export { GenericInputForm } from "./GenericInputForm";

From def4d2887c7aa856b74626eb73e1836d0203e597 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 01:44:47 +0300
Subject: [PATCH 05/40] test(apps/web): Extend GenericInputForm component

---
 .../ui/src/GenericInputForm/AbiFields.tsx     |  3 +
 packages/ui/src/GenericInputForm/index.tsx    | 77 ++++---------------
 .../ui/src/GenericInputForm/initialValues.ts  | 11 +++
 packages/ui/src/GenericInputForm/types.ts     |  2 +
 .../GenericInputForm/useGenericInputForm.ts   | 46 +++++++++++
 .../ui/src/GenericInputForm/validations.ts    | 19 +++++
 6 files changed, 97 insertions(+), 61 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/initialValues.ts
 create mode 100644 packages/ui/src/GenericInputForm/useGenericInputForm.ts
 create mode 100644 packages/ui/src/GenericInputForm/validations.ts

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 2ad8e3db1..f3248664d 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -81,6 +81,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                 description="Select how to attach an ABI"
                 mb={16}
                 allowDeselect={false}
+                withAsterisk
                 data={[
                     {
                         value: "existing",
@@ -97,6 +98,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     description="Available JSON_ABI specifications"
                     placeholder="Select specification"
                     data={specificationOptions}
+                    allowDeselect={false}
                     withAsterisk
                     {...form.getInputProps("specificationId")}
                 />
@@ -120,6 +122,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             rightSection={<Combobox.Chevron />}
                             rightSectionPointerEvents="none"
                             withAsterisk
+                            {...form.getInputProps("abiFunctionName")}
                             onClick={() => combobox.toggleDropdown()}
                         >
                             {abiFunction ? (
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 9111dc183..e2040726e 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -13,26 +13,17 @@ import {
     Stack,
     Textarea,
 } from "@mantine/core";
-import { FC, useCallback, useEffect, useState } from "react";
+import { FC, useCallback, useEffect } from "react";
 import { TbAlertCircle, TbCheck } from "react-icons/tb";
-import {
-    Abi,
-    AbiFunction,
-    BaseError,
-    getAddress,
-    Hex,
-    isAddress,
-    isHex,
-    stringToHex,
-    zeroAddress,
-} from "viem";
+import { Abi, BaseError, stringToHex } from "viem";
 import { useWaitForTransactionReceipt } from "wagmi";
 import { TransactionProgress } from "../TransactionProgress";
 import useUndeployedApplication from "../hooks/useUndeployedApplication";
 import { TransactionFormSuccessData } from "../DepositFormTypes";
 import { AbiFields } from "./AbiFields";
 import { FormMode } from "./types";
-import { useForm, FormProvider } from "./context";
+import { FormProvider } from "./context";
+import { useGenericInputForm } from "./useGenericInputForm";
 
 export interface GenericInputFormSpecification {
     id: string;
@@ -56,43 +47,8 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         onSearchApplications,
         onSuccess,
     } = props;
-    const form = useForm({
-        validateInputOnBlur: true,
-        initialValues: {
-            application: "",
-            rawInput: "0x",
-            stringInput: "",
-            abiMethod: "existing",
-            specificationId: "",
-            abiFunctionName: "",
-        },
-        validate: {
-            application: (value) =>
-                value !== "" && isAddress(value) ? null : "Invalid application",
-            rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),
-        },
-        transformValues: (values) => {
-            const selectedSpecification = specifications.find(
-                (s) => s.id === values.specificationId,
-            );
-            return {
-                address: isAddress(values.application)
-                    ? getAddress(values.application)
-                    : zeroAddress,
-                rawInput: values.rawInput as Hex,
-                abiMethod: values.abiMethod,
-                specificationId: values.specificationId,
-                selectedSpecification,
-                abiFunction: (
-                    (selectedSpecification?.abi as AbiFunction[]) ?? []
-                ).find(
-                    (abiFunction) =>
-                        abiFunction.name === values.abiFunctionName,
-                ),
-            };
-        },
-    });
-    const { address, rawInput } = form.getTransformedValues();
+    const form = useGenericInputForm(specifications);
+    const { address, rawInput, mode } = form.getTransformedValues();
     const prepare = useSimulateInputBoxAddInput({
         args: [address, rawInput],
         query: {
@@ -107,12 +63,11 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
     const loading = execute.isPending || wait.isLoading;
     const canSubmit = form.isValid() && prepare.error === null;
     const isUndeployedApp = useUndeployedApplication(address, applications);
-    const [format, setFormat] = useState<FormMode>("hex");
 
-    const onChangeFormat = useCallback(
-        (format: string | null) => {
-            setFormat(format as FormMode);
+    const onChangeFormMode = useCallback(
+        (mode: string | null) => {
             form.reset();
+            form.setFieldValue("mode", mode as FormMode);
         },
         [form],
     );
@@ -164,8 +119,8 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                     )}
 
                     <SegmentedControl
-                        value={format}
-                        onChange={onChangeFormat}
+                        value={mode}
+                        onChange={onChangeFormMode}
                         data={[
                             { label: "Hex", value: "hex" },
                             { label: "String to Hex", value: "string" },
@@ -173,14 +128,14 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                         ]}
                     />
 
-                    {format === "hex" ? (
+                    {mode === "hex" ? (
                         <Textarea
-                            label="Raw input"
-                            description="Raw input for the application"
+                            label="Hex input"
+                            description="Hex input for the application"
                             withAsterisk
                             {...form.getInputProps("rawInput")}
                         />
-                    ) : format === "string" ? (
+                    ) : mode === "string" ? (
                         <>
                             <Textarea
                                 label="String input"
@@ -208,7 +163,7 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                                 {...form.getInputProps("rawInput")}
                             />
                         </>
-                    ) : format === "abi" ? (
+                    ) : mode === "abi" ? (
                         <AbiFields specifications={specifications} />
                     ) : null}
 
diff --git a/packages/ui/src/GenericInputForm/initialValues.ts b/packages/ui/src/GenericInputForm/initialValues.ts
new file mode 100644
index 000000000..fc68bd6ab
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/initialValues.ts
@@ -0,0 +1,11 @@
+import { FormValues } from "./types";
+
+export const initialValues: FormValues = {
+    mode: "hex",
+    application: "",
+    rawInput: "0x",
+    stringInput: "",
+    abiMethod: "existing",
+    specificationId: "",
+    abiFunctionName: "",
+};
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index dfc806d6a..3d9021469 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -11,6 +11,7 @@ export interface FormSpecification {
 export type FormAbiMethod = "new" | "existing";
 
 export interface FormValues {
+    mode: FormMode;
     application: string;
     rawInput: Hex;
     stringInput: string;
@@ -20,6 +21,7 @@ export interface FormValues {
 }
 
 export interface FormTransformedValues {
+    mode: FormMode;
     address: Address;
     rawInput: Hex;
     abiMethod: FormAbiMethod;
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
new file mode 100644
index 000000000..534b12858
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -0,0 +1,46 @@
+import { useForm } from "./context";
+import { initialValues } from "./initialValues";
+import {
+    validateAbiFunctionName,
+    validateAbiMethod,
+    validateApplication,
+    validateHexInput,
+    validateSpecificationId,
+} from "./validations";
+import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
+import { FormSpecification } from "./types";
+
+export const useGenericInputForm = (specifications: FormSpecification[]) => {
+    return useForm({
+        validateInputOnBlur: true,
+        initialValues,
+        validate: {
+            application: validateApplication,
+            rawInput: validateHexInput,
+            abiMethod: validateAbiMethod,
+            specificationId: validateSpecificationId,
+            abiFunctionName: validateAbiFunctionName,
+        },
+        transformValues: (values) => {
+            const selectedSpecification = specifications.find(
+                (s) => s.id === values.specificationId,
+            );
+            return {
+                mode: values.mode,
+                address: isAddress(values.application)
+                    ? getAddress(values.application)
+                    : zeroAddress,
+                rawInput: values.rawInput as Hex,
+                abiMethod: values.abiMethod,
+                specificationId: values.specificationId,
+                selectedSpecification,
+                abiFunction: (
+                    (selectedSpecification?.abi as AbiFunction[]) ?? []
+                ).find(
+                    (abiFunction) =>
+                        abiFunction.name === values.abiFunctionName,
+                ),
+            };
+        },
+    });
+};
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
new file mode 100644
index 000000000..ff7fbfe01
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -0,0 +1,19 @@
+import { isAddress, isHex } from "viem";
+import { FormValues } from "./types";
+
+export const validateApplication = (value: string) =>
+    value !== "" && isAddress(value) ? null : "Invalid application";
+
+export const validateHexInput = (value: string) =>
+    isHex(value) ? null : "Invalid hex value";
+
+export const validateAbiMethod = (value: string, values: FormValues) =>
+    values.mode !== "abi" || value === "new" || value === "existing"
+        ? null
+        : "Invalid abi method";
+
+export const validateSpecificationId = (value: string, values: FormValues) =>
+    values.mode !== "abi" || value !== "" ? null : "Invalid specification";
+
+export const validateAbiFunctionName = (value: string, values: FormValues) =>
+    values.mode !== "abi" || value !== "" ? null : "Invalid abi function";

From e0a6ec918fd93ddb9fc6c0ebe05f8513f8afc48d Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 18:28:33 +0300
Subject: [PATCH 06/40] test(apps/web): Extend GenericInputForm component

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 123 +++++++++++++++---
 .../ui/src/GenericInputForm/initialValues.ts  |   1 +
 packages/ui/src/GenericInputForm/types.ts     |  11 +-
 .../GenericInputForm/useGenericInputForm.ts   |   2 +
 .../ui/src/GenericInputForm/validations.ts    |  68 +++++++++-
 5 files changed, 183 insertions(+), 22 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index f3248664d..2735114f2 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -12,8 +12,8 @@ import {
     useCombobox,
 } from "@mantine/core";
 import { AbiFunction, AbiParameter } from "viem";
-import { FC, Fragment } from "react";
-import { FormSpecification } from "./types";
+import { FC, Fragment, useCallback, useEffect, useState } from "react";
+import { AbiValueParameter, FormSpecification } from "./types";
 import { TbAlertCircle } from "react-icons/tb";
 
 interface FunctionParamProps {
@@ -65,6 +65,8 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const form = useFormContext();
     const { abiMethod, abiFunction, selectedSpecification } =
         form.getTransformedValues();
+    const abiFunctionParams = form.getInputProps("abiFunctionParams");
+    const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
     const specificationOptions = specifications.map((s) => ({
         value: s.id,
         label: s.name,
@@ -74,6 +76,34 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
 
+    const onChangeAbiFunctionName = useCallback(
+        (abiFunctionName: string) => {
+            combobox.closeDropdown();
+            form.setFieldValue("abiFunctionName", abiFunctionName);
+            setDirtyFields({});
+
+            const nextAbiFunction = (
+                (selectedSpecification?.abi as AbiFunction[]) ?? []
+            ).find((abiFunction) => abiFunction.name === abiFunctionName);
+
+            if (nextAbiFunction) {
+                const emptyFunctionParams = nextAbiFunction.inputs.map(
+                    (input) => ({
+                        ...input,
+                        value: "",
+                    }),
+                );
+                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+            }
+        },
+        [combobox, form, selectedSpecification],
+    );
+
+    useEffect(() => {
+        console.log("errors::", form.errors);
+        console.log("isValid::", form.isValid());
+    }, [form.errors, form.isValid]);
+
     return (
         <Stack>
             <Select
@@ -107,10 +137,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
             {selectedSpecification && (
                 <Combobox
                     store={combobox}
-                    onOptionSubmit={(abiFunctionName) => {
-                        combobox.closeDropdown();
-                        form.setFieldValue("abiFunctionName", abiFunctionName);
-                    }}
+                    onOptionSubmit={onChangeAbiFunctionName}
                 >
                     <Combobox.Target>
                         <InputBase
@@ -134,6 +161,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             )}
                         </InputBase>
                     </Combobox.Target>
+
                     <Combobox.Dropdown>
                         <Combobox.Options>
                             {(selectedSpecification.abi as AbiFunction[])
@@ -166,20 +194,75 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                 <Stack>
                     {abiFunction.inputs.length > 0 ? (
                         <>
-                            {abiFunction.inputs.map((input) => (
-                                <TextInput
-                                    key={`${input.name}-${input.type}`}
-                                    label={
-                                        input.name && input.type ? (
-                                            <FunctionParam input={input} />
-                                        ) : (
-                                            input.name || input.type
-                                        )
-                                    }
-                                    placeholder="Enter value"
-                                    withAsterisk
-                                />
-                            ))}
+                            {abiFunction.inputs.map((input) => {
+                                const abiFunctionParamsValue =
+                                    abiFunctionParams.value as AbiValueParameter[];
+                                const param = abiFunctionParamsValue.find(
+                                    (p) =>
+                                        p.type === input.type &&
+                                        p.name === input.name,
+                                ) as AbiValueParameter;
+                                const fieldKey = `[${param.type}-${param.name}]`;
+                                const error = abiFunctionParams.error?.find(
+                                    (error: string | null) =>
+                                        error?.includes(fieldKey),
+                                );
+                                const errorMessage = error
+                                    ? error.replace(fieldKey, "")
+                                    : null;
+
+                                return (
+                                    <TextInput
+                                        key={`${input.name}-${input.type}`}
+                                        value={param.value}
+                                        label={
+                                            input.name && input.type ? (
+                                                <FunctionParam input={input} />
+                                            ) : (
+                                                input.name || input.type
+                                            )
+                                        }
+                                        placeholder="Enter value"
+                                        withAsterisk
+                                        error={
+                                            dirtyFields[fieldKey]
+                                                ? errorMessage
+                                                : null
+                                        }
+                                        onFocus={() => {
+                                            setDirtyFields((dirtyFields) => ({
+                                                ...dirtyFields,
+                                                [fieldKey]: true,
+                                            }));
+                                        }}
+                                        onBlur={() =>
+                                            form.validateField(
+                                                "abiFunctionParams",
+                                            )
+                                        }
+                                        onChange={(event) => {
+                                            const nextValue =
+                                                event.target.value;
+                                            const nextAbiFunctionParams =
+                                                abiFunctionParamsValue.map(
+                                                    (p) =>
+                                                        p.type === input.type &&
+                                                        p.name === input.name
+                                                            ? {
+                                                                  ...p,
+                                                                  value: nextValue,
+                                                              }
+                                                            : p,
+                                                );
+
+                                            form.setFieldValue(
+                                                "abiFunctionParams",
+                                                nextAbiFunctionParams,
+                                            );
+                                        }}
+                                    />
+                                );
+                            })}
                         </>
                     ) : (
                         <Alert
diff --git a/packages/ui/src/GenericInputForm/initialValues.ts b/packages/ui/src/GenericInputForm/initialValues.ts
index fc68bd6ab..f05c2cd04 100644
--- a/packages/ui/src/GenericInputForm/initialValues.ts
+++ b/packages/ui/src/GenericInputForm/initialValues.ts
@@ -8,4 +8,5 @@ export const initialValues: FormValues = {
     abiMethod: "existing",
     specificationId: "",
     abiFunctionName: "",
+    abiFunctionParams: [],
 };
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 3d9021469..499d37105 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -1,4 +1,4 @@
-import { Abi, AbiFunction, Address, Hex } from "viem";
+import { Abi, AbiFunction, Address, Hex, AbiParameter } from "viem";
 
 export type FormMode = "hex" | "string" | "abi";
 
@@ -10,6 +10,14 @@ export interface FormSpecification {
 
 export type FormAbiMethod = "new" | "existing";
 
+export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
+    value: string;
+};
+
+export type AbiFunctionParameterError = Pick<AbiParameter, "type" | "name"> & {
+    message: string | null;
+};
+
 export interface FormValues {
     mode: FormMode;
     application: string;
@@ -18,6 +26,7 @@ export interface FormValues {
     abiMethod: FormAbiMethod;
     specificationId: string;
     abiFunctionName: string;
+    abiFunctionParams: AbiValueParameter[];
 }
 
 export interface FormTransformedValues {
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 534b12858..1590b1ae8 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -6,6 +6,7 @@ import {
     validateApplication,
     validateHexInput,
     validateSpecificationId,
+    validateAbiFunctionParams,
 } from "./validations";
 import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
 import { FormSpecification } from "./types";
@@ -20,6 +21,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             abiMethod: validateAbiMethod,
             specificationId: validateSpecificationId,
             abiFunctionName: validateAbiFunctionName,
+            abiFunctionParams: validateAbiFunctionParams,
         },
         transformValues: (values) => {
             const selectedSpecification = specifications.find(
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index ff7fbfe01..3905d9873 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,5 +1,9 @@
 import { isAddress, isHex } from "viem";
-import { FormValues } from "./types";
+import {
+    AbiFunctionParameterError,
+    AbiValueParameter,
+    FormValues,
+} from "./types";
 
 export const validateApplication = (value: string) =>
     value !== "" && isAddress(value) ? null : "Invalid application";
@@ -17,3 +21,65 @@ export const validateSpecificationId = (value: string, values: FormValues) =>
 
 export const validateAbiFunctionName = (value: string, values: FormValues) =>
     values.mode !== "abi" || value !== "" ? null : "Invalid abi function";
+
+export const validateAbiFunctionParams = (
+    value: AbiValueParameter[],
+    values: FormValues,
+) => {
+    if (values.mode !== "abi") {
+        return null;
+    }
+
+    const errors = value
+        .map((param) => {
+            const key = `${param.type}-${param.name}`;
+            let error: string | null = null;
+
+            switch (param.type) {
+                case "uint":
+                case "uint8":
+                case "uint16":
+                case "uint32":
+                case "uint64":
+                case "uint128":
+                case "uint256":
+                    try {
+                        BigInt(param.value);
+                    } catch (e) {
+                        error = `[${key}] Invalid uint value`;
+                    }
+                    break;
+                case "string":
+                    error =
+                        param.value !== ""
+                            ? null
+                            : `[${key}] Invalid string value`;
+                    break;
+                case "bool":
+                    error =
+                        param.value === "true" || param.value === "false"
+                            ? null
+                            : `[${key}] Invalid boolean value`;
+                    break;
+                case "bytes":
+                    error = isHex(param.value)
+                        ? null
+                        : `[${key}] Invalid byte value`;
+                    break;
+                case "address":
+                    error = isAddress(param.value)
+                        ? null
+                        : `[${key}] Invalid address value`;
+                    break;
+                default:
+                    error =
+                        param.value !== "" ? null : `[${key}] Invalid value`;
+                    break;
+            }
+
+            return error;
+        })
+        .filter((error) => error !== null);
+
+    return errors.length > 0 ? errors : null;
+};

From 12abe658dbb97afb42baf4dc530b16cb89186ecc Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 22:03:56 +0300
Subject: [PATCH 07/40] test(apps/web): Extend GenericInputForm component

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 63 +++++++++++++------
 packages/ui/src/GenericInputForm/types.ts     |  5 --
 .../GenericInputForm/useGenericInputForm.ts   |  2 +-
 packages/ui/src/GenericInputForm/utils.ts     | 34 ++++++++++
 .../ui/src/GenericInputForm/validations.ts    | 31 +++------
 5 files changed, 88 insertions(+), 47 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/utils.ts

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 2735114f2..c47578e65 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -13,8 +13,9 @@ import {
 } from "@mantine/core";
 import { AbiFunction, AbiParameter } from "viem";
 import { FC, Fragment, useCallback, useEffect, useState } from "react";
-import { AbiValueParameter, FormSpecification } from "./types";
+import { AbiValueParameter, FormAbiMethod, FormSpecification } from "./types";
 import { TbAlertCircle } from "react-icons/tb";
+import { encodeFunctionParams } from "./utils";
 
 interface FunctionParamProps {
     input: AbiParameter;
@@ -63,15 +64,19 @@ export interface AbiFieldsProps {
 
 export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const form = useFormContext();
-    const { abiMethod, abiFunction, selectedSpecification } =
+    const { abiMethod, abiFunction, specificationId } =
         form.getTransformedValues();
     const abiFunctionParams = form.getInputProps("abiFunctionParams");
-    const [dirtyFields, setDirtyFields] = useState<Record<string, boolean>>({});
+    const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>(
+        {},
+    );
+    const selectedSpecification = specifications.find(
+        (s) => s.id === specificationId,
+    );
     const specificationOptions = specifications.map((s) => ({
         value: s.id,
         label: s.name,
     }));
-
     const combobox = useCombobox({
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
@@ -80,7 +85,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         (abiFunctionName: string) => {
             combobox.closeDropdown();
             form.setFieldValue("abiFunctionName", abiFunctionName);
-            setDirtyFields({});
+            setTouchedFields({});
 
             const nextAbiFunction = (
                 (selectedSpecification?.abi as AbiFunction[]) ?? []
@@ -99,10 +104,14 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         [combobox, form, selectedSpecification],
     );
 
+    const isFormValid = form.isValid();
     useEffect(() => {
-        console.log("errors::", form.errors);
-        console.log("isValid::", form.isValid());
-    }, [form.errors, form.isValid]);
+        if (isFormValid) {
+            const payload = encodeFunctionParams(abiFunctionParams.value);
+            form.setFieldValue("rawInput", payload);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' dependency is not added on purpose because it has an unstable reference
+    }, [abiFunctionParams.value, isFormValid]);
 
     return (
         <Stack>
@@ -120,6 +129,12 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     { value: "new", label: "New ABI" },
                 ]}
                 {...form.getInputProps("abiMethod")}
+                onChange={(nextValue) => {
+                    form.setFieldValue("abiMethod", nextValue as FormAbiMethod);
+                    form.setFieldValue("specificationId", "");
+                    form.setFieldValue("abiFunctionName", "");
+                    form.setFieldValue("abiFunctionParams", []);
+                }}
             />
 
             {abiMethod === "existing" ? (
@@ -131,6 +146,14 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     allowDeselect={false}
                     withAsterisk
                     {...form.getInputProps("specificationId")}
+                    onChange={(nextValue) => {
+                        form.setFieldValue(
+                            "specificationId",
+                            nextValue as string,
+                        );
+                        form.setFieldValue("abiFunctionName", "");
+                        form.setFieldValue("abiFunctionParams", []);
+                    }}
                 />
             ) : null}
 
@@ -222,24 +245,26 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                                                 input.name || input.type
                                             )
                                         }
-                                        placeholder="Enter value"
+                                        placeholder={`Enter ${input.type} value`}
                                         withAsterisk
                                         error={
-                                            dirtyFields[fieldKey]
+                                            touchedFields[fieldKey] &&
+                                            errorMessage
                                                 ? errorMessage
                                                 : null
                                         }
-                                        onFocus={() => {
-                                            setDirtyFields((dirtyFields) => ({
-                                                ...dirtyFields,
-                                                [fieldKey]: true,
-                                            }));
-                                        }}
-                                        onBlur={() =>
+                                        onBlur={() => {
                                             form.validateField(
                                                 "abiFunctionParams",
-                                            )
-                                        }
+                                            );
+
+                                            setTouchedFields(
+                                                (touchedFields) => ({
+                                                    ...touchedFields,
+                                                    [fieldKey]: true,
+                                                }),
+                                            );
+                                        }}
                                         onChange={(event) => {
                                             const nextValue =
                                                 event.target.value;
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 499d37105..2b20ce833 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -14,10 +14,6 @@ export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
     value: string;
 };
 
-export type AbiFunctionParameterError = Pick<AbiParameter, "type" | "name"> & {
-    message: string | null;
-};
-
 export interface FormValues {
     mode: FormMode;
     application: string;
@@ -36,5 +32,4 @@ export interface FormTransformedValues {
     abiMethod: FormAbiMethod;
     specificationId: string;
     abiFunction: AbiFunction | undefined;
-    selectedSpecification: FormSpecification | undefined;
 }
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 1590b1ae8..dcab15b04 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -27,6 +27,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             const selectedSpecification = specifications.find(
                 (s) => s.id === values.specificationId,
             );
+
             return {
                 mode: values.mode,
                 address: isAddress(values.application)
@@ -35,7 +36,6 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                 rawInput: values.rawInput as Hex,
                 abiMethod: values.abiMethod,
                 specificationId: values.specificationId,
-                selectedSpecification,
                 abiFunction: (
                     (selectedSpecification?.abi as AbiFunction[]) ?? []
                 ).find(
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
new file mode 100644
index 000000000..54a8c54f2
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -0,0 +1,34 @@
+import { encodeAbiParameters, getAddress } from "viem";
+import { AbiValueParameter } from "./types";
+
+export const encodeFunctionParams = (params: AbiValueParameter[]) => {
+    const values = params.map((param) => {
+        const { type, value } = param;
+
+        switch (type) {
+            case "bool":
+                return value === "true";
+            case "address":
+                return getAddress(value);
+            case "uint":
+            case "uint8":
+            case "uint16":
+            case "uint32":
+            case "uint64":
+            case "uint128":
+            case "uint256":
+                return BigInt(value);
+            case "string":
+            case "bytes":
+            default:
+                return value;
+        }
+    });
+
+    return encodeAbiParameters(params, values);
+};
+
+export const generateErrorMessage = (param: AbiValueParameter) => {
+    const key = `${param.type}-${param.name}`;
+    return `[${key}] Invalid ${param.type} value`;
+};
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 3905d9873..89b2dae11 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,9 +1,6 @@
 import { isAddress, isHex } from "viem";
-import {
-    AbiFunctionParameterError,
-    AbiValueParameter,
-    FormValues,
-} from "./types";
+import { AbiValueParameter, FormValues } from "./types";
+import { generateErrorMessage } from "./utils";
 
 export const validateApplication = (value: string) =>
     value !== "" && isAddress(value) ? null : "Invalid application";
@@ -32,7 +29,7 @@ export const validateAbiFunctionParams = (
 
     const errors = value
         .map((param) => {
-            const key = `${param.type}-${param.name}`;
+            const message = generateErrorMessage(param);
             let error: string | null = null;
 
             switch (param.type) {
@@ -46,34 +43,24 @@ export const validateAbiFunctionParams = (
                     try {
                         BigInt(param.value);
                     } catch (e) {
-                        error = `[${key}] Invalid uint value`;
+                        error = message;
                     }
                     break;
-                case "string":
-                    error =
-                        param.value !== ""
-                            ? null
-                            : `[${key}] Invalid string value`;
-                    break;
                 case "bool":
                     error =
                         param.value === "true" || param.value === "false"
                             ? null
-                            : `[${key}] Invalid boolean value`;
+                            : message;
                     break;
                 case "bytes":
-                    error = isHex(param.value)
-                        ? null
-                        : `[${key}] Invalid byte value`;
+                    error = isHex(param.value) ? null : message;
                     break;
                 case "address":
-                    error = isAddress(param.value)
-                        ? null
-                        : `[${key}] Invalid address value`;
+                    error = isAddress(param.value) ? null : message;
                     break;
+                case "string":
                 default:
-                    error =
-                        param.value !== "" ? null : `[${key}] Invalid value`;
+                    error = param.value !== "" ? null : message;
                     break;
             }
 

From ed9cb2bcc0a4cf6257bf8f6c4bab00f79afa9f7b Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 23:04:42 +0300
Subject: [PATCH 08/40] chore(apps/web): Refactoring

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 122 ++++++------------
 .../GenericInputForm/useGenericInputForm.ts   |   6 +-
 packages/ui/src/GenericInputForm/utils.ts     |   5 -
 .../ui/src/GenericInputForm/validations.ts    |  92 +++++++------
 4 files changed, 95 insertions(+), 130 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index c47578e65..a8b4bc024 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -12,7 +12,7 @@ import {
     useCombobox,
 } from "@mantine/core";
 import { AbiFunction, AbiParameter } from "viem";
-import { FC, Fragment, useCallback, useEffect, useState } from "react";
+import { FC, Fragment, useCallback, useEffect } from "react";
 import { AbiValueParameter, FormAbiMethod, FormSpecification } from "./types";
 import { TbAlertCircle } from "react-icons/tb";
 import { encodeFunctionParams } from "./utils";
@@ -67,9 +67,6 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const { abiMethod, abiFunction, specificationId } =
         form.getTransformedValues();
     const abiFunctionParams = form.getInputProps("abiFunctionParams");
-    const [touchedFields, setTouchedFields] = useState<Record<string, boolean>>(
-        {},
-    );
     const selectedSpecification = specifications.find(
         (s) => s.id === specificationId,
     );
@@ -81,11 +78,26 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
 
+    const updateAbiFunctionParams = useCallback(
+        (params: AbiValueParameter[]) => {
+            const abiFunctionParamsValue =
+                abiFunctionParams.value as AbiValueParameter[];
+
+            abiFunctionParamsValue.forEach((_, index) => {
+                form.removeListItem("abiFunctionParams", index);
+            });
+
+            params.forEach((param) => {
+                form.insertListItem("abiFunctionParams", param);
+            });
+        },
+        [abiFunctionParams.value, form],
+    );
+
     const onChangeAbiFunctionName = useCallback(
         (abiFunctionName: string) => {
             combobox.closeDropdown();
             form.setFieldValue("abiFunctionName", abiFunctionName);
-            setTouchedFields({});
 
             const nextAbiFunction = (
                 (selectedSpecification?.abi as AbiFunction[]) ?? []
@@ -98,16 +110,20 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                         value: "",
                     }),
                 );
-                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+
+                updateAbiFunctionParams(emptyFunctionParams);
             }
         },
-        [combobox, form, selectedSpecification],
+        [combobox, form, selectedSpecification, updateAbiFunctionParams],
     );
 
     const isFormValid = form.isValid();
     useEffect(() => {
+        // Check if form is valid
         if (isFormValid) {
+            // Encode the function params
             const payload = encodeFunctionParams(abiFunctionParams.value);
+            // Set the encoded function params as value for hex field
             form.setFieldValue("rawInput", payload);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' dependency is not added on purpose because it has an unstable reference
@@ -133,7 +149,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     form.setFieldValue("abiMethod", nextValue as FormAbiMethod);
                     form.setFieldValue("specificationId", "");
                     form.setFieldValue("abiFunctionName", "");
-                    form.setFieldValue("abiFunctionParams", []);
+                    updateAbiFunctionParams([]);
                 }}
             />
 
@@ -152,7 +168,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             nextValue as string,
                         );
                         form.setFieldValue("abiFunctionName", "");
-                        form.setFieldValue("abiFunctionParams", []);
+                        updateAbiFunctionParams([]);
                     }}
                 />
             ) : null}
@@ -217,77 +233,23 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                 <Stack>
                     {abiFunction.inputs.length > 0 ? (
                         <>
-                            {abiFunction.inputs.map((input) => {
-                                const abiFunctionParamsValue =
-                                    abiFunctionParams.value as AbiValueParameter[];
-                                const param = abiFunctionParamsValue.find(
-                                    (p) =>
-                                        p.type === input.type &&
-                                        p.name === input.name,
-                                ) as AbiValueParameter;
-                                const fieldKey = `[${param.type}-${param.name}]`;
-                                const error = abiFunctionParams.error?.find(
-                                    (error: string | null) =>
-                                        error?.includes(fieldKey),
-                                );
-                                const errorMessage = error
-                                    ? error.replace(fieldKey, "")
-                                    : null;
-
-                                return (
-                                    <TextInput
-                                        key={`${input.name}-${input.type}`}
-                                        value={param.value}
-                                        label={
-                                            input.name && input.type ? (
-                                                <FunctionParam input={input} />
-                                            ) : (
-                                                input.name || input.type
-                                            )
-                                        }
-                                        placeholder={`Enter ${input.type} value`}
-                                        withAsterisk
-                                        error={
-                                            touchedFields[fieldKey] &&
-                                            errorMessage
-                                                ? errorMessage
-                                                : null
-                                        }
-                                        onBlur={() => {
-                                            form.validateField(
-                                                "abiFunctionParams",
-                                            );
-
-                                            setTouchedFields(
-                                                (touchedFields) => ({
-                                                    ...touchedFields,
-                                                    [fieldKey]: true,
-                                                }),
-                                            );
-                                        }}
-                                        onChange={(event) => {
-                                            const nextValue =
-                                                event.target.value;
-                                            const nextAbiFunctionParams =
-                                                abiFunctionParamsValue.map(
-                                                    (p) =>
-                                                        p.type === input.type &&
-                                                        p.name === input.name
-                                                            ? {
-                                                                  ...p,
-                                                                  value: nextValue,
-                                                              }
-                                                            : p,
-                                                );
-
-                                            form.setFieldValue(
-                                                "abiFunctionParams",
-                                                nextAbiFunctionParams,
-                                            );
-                                        }}
-                                    />
-                                );
-                            })}
+                            {abiFunction.inputs.map((input, index) => (
+                                <TextInput
+                                    key={`${input.name}-${input.type}`}
+                                    label={
+                                        input.name && input.type ? (
+                                            <FunctionParam input={input} />
+                                        ) : (
+                                            input.name || input.type
+                                        )
+                                    }
+                                    placeholder={`Enter ${input.type} value`}
+                                    withAsterisk
+                                    {...form.getInputProps(
+                                        `abiFunctionParams.${index}.value`,
+                                    )}
+                                />
+                            ))}
                         </>
                     ) : (
                         <Alert
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index dcab15b04..05cef929a 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -2,11 +2,11 @@ import { useForm } from "./context";
 import { initialValues } from "./initialValues";
 import {
     validateAbiFunctionName,
+    validateAbiFunctionParamValue,
     validateAbiMethod,
     validateApplication,
     validateHexInput,
     validateSpecificationId,
-    validateAbiFunctionParams,
 } from "./validations";
 import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
 import { FormSpecification } from "./types";
@@ -21,7 +21,9 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             abiMethod: validateAbiMethod,
             specificationId: validateSpecificationId,
             abiFunctionName: validateAbiFunctionName,
-            abiFunctionParams: validateAbiFunctionParams,
+            abiFunctionParams: {
+                value: validateAbiFunctionParamValue,
+            },
         },
         transformValues: (values) => {
             const selectedSpecification = specifications.find(
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 54a8c54f2..18f9c2469 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -27,8 +27,3 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
 
     return encodeAbiParameters(params, values);
 };
-
-export const generateErrorMessage = (param: AbiValueParameter) => {
-    const key = `${param.type}-${param.name}`;
-    return `[${key}] Invalid ${param.type} value`;
-};
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 89b2dae11..6b057748b 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,6 +1,5 @@
 import { isAddress, isHex } from "viem";
-import { AbiValueParameter, FormValues } from "./types";
-import { generateErrorMessage } from "./utils";
+import { FormValues } from "./types";
 
 export const validateApplication = (value: string) =>
     value !== "" && isAddress(value) ? null : "Invalid application";
@@ -19,54 +18,61 @@ export const validateSpecificationId = (value: string, values: FormValues) =>
 export const validateAbiFunctionName = (value: string, values: FormValues) =>
     values.mode !== "abi" || value !== "" ? null : "Invalid abi function";
 
-export const validateAbiFunctionParams = (
-    value: AbiValueParameter[],
+export const validateAbiFunctionParamValue = (
+    value: string,
     values: FormValues,
+    key: string,
 ) => {
     if (values.mode !== "abi") {
         return null;
     }
 
-    const errors = value
-        .map((param) => {
-            const message = generateErrorMessage(param);
-            let error: string | null = null;
+    const [paramIndex] = key
+        .split(".")
+        .map((part) => parseInt(part))
+        .filter((n) => !isNaN(n));
+    const param = values.abiFunctionParams[paramIndex];
 
-            switch (param.type) {
-                case "uint":
-                case "uint8":
-                case "uint16":
-                case "uint32":
-                case "uint64":
-                case "uint128":
-                case "uint256":
-                    try {
-                        BigInt(param.value);
-                    } catch (e) {
-                        error = message;
-                    }
-                    break;
-                case "bool":
-                    error =
-                        param.value === "true" || param.value === "false"
-                            ? null
-                            : message;
-                    break;
-                case "bytes":
-                    error = isHex(param.value) ? null : message;
-                    break;
-                case "address":
-                    error = isAddress(param.value) ? null : message;
-                    break;
-                case "string":
-                default:
-                    error = param.value !== "" ? null : message;
-                    break;
-            }
+    if (!param) {
+        return null;
+    }
+
+    const message = `Invalid ${param.type} value`;
+    let error: string | null = null;
 
-            return error;
-        })
-        .filter((error) => error !== null);
+    // Validate the field for some content
+    if (value === "") {
+        return message;
+    }
+
+    // Otherwise, if some content exists, validate it based on the type
+    switch (param.type) {
+        case "uint":
+        case "uint8":
+        case "uint16":
+        case "uint32":
+        case "uint64":
+        case "uint128":
+        case "uint256":
+            try {
+                BigInt(value);
+            } catch (e) {
+                error = message;
+            }
+            break;
+        case "bool":
+            error = value === "true" || value === "false" ? null : message;
+            break;
+        case "bytes":
+            error = isHex(value) ? null : message;
+            break;
+        case "address":
+            error = isAddress(value) ? null : message;
+            break;
+        // All other types like 'string' are handled in the non-empty check above
+        default:
+            break;
+    }
 
-    return errors.length > 0 ? errors : null;
+    return error;
 };

From eaac6b732a9ee6aba02f87663e8bb8bd7e6810bd Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 23:27:26 +0300
Subject: [PATCH 09/40] chore(apps/web): Refactoring

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 55 ++++++++-----------
 1 file changed, 23 insertions(+), 32 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index a8b4bc024..8144c989f 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -16,12 +16,13 @@ import { FC, Fragment, useCallback, useEffect } from "react";
 import { AbiValueParameter, FormAbiMethod, FormSpecification } from "./types";
 import { TbAlertCircle } from "react-icons/tb";
 import { encodeFunctionParams } from "./utils";
+import { useDebouncedCallback } from "@mantine/hooks";
 
-interface FunctionParamProps {
+interface FunctionParamLabelProps {
     input: AbiParameter;
 }
 
-export const FunctionParam: FC<FunctionParamProps> = ({ input }) => {
+export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
     return (
         <Box display="inline">
             <Text c="cyan" span fz="sm">
@@ -49,7 +50,7 @@ export const FunctionSignature: FC<FunctionSignatureProps> = ({
             (
             {abiFunction.inputs.map((input, index) => (
                 <Fragment key={`${input.type}-${input.name}`}>
-                    <FunctionParam input={input} />
+                    <FunctionParamLabel input={input} />
                     {index < abiFunction.inputs.length - 1 ? ", " : ""}
                 </Fragment>
             ))}
@@ -67,6 +68,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const { abiMethod, abiFunction, specificationId } =
         form.getTransformedValues();
     const abiFunctionParams = form.getInputProps("abiFunctionParams");
+    const isFormValid = form.isValid();
     const selectedSpecification = specifications.find(
         (s) => s.id === specificationId,
     );
@@ -78,25 +80,10 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
 
-    const updateAbiFunctionParams = useCallback(
-        (params: AbiValueParameter[]) => {
-            const abiFunctionParamsValue =
-                abiFunctionParams.value as AbiValueParameter[];
-
-            abiFunctionParamsValue.forEach((_, index) => {
-                form.removeListItem("abiFunctionParams", index);
-            });
-
-            params.forEach((param) => {
-                form.insertListItem("abiFunctionParams", param);
-            });
-        },
-        [abiFunctionParams.value, form],
-    );
-
     const onChangeAbiFunctionName = useCallback(
         (abiFunctionName: string) => {
             combobox.closeDropdown();
+
             form.setFieldValue("abiFunctionName", abiFunctionName);
 
             const nextAbiFunction = (
@@ -111,23 +98,27 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     }),
                 );
 
-                updateAbiFunctionParams(emptyFunctionParams);
+                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
             }
         },
-        [combobox, form, selectedSpecification, updateAbiFunctionParams],
+        [combobox, form, selectedSpecification],
     );
 
-    const isFormValid = form.isValid();
-    useEffect(() => {
-        // Check if form is valid
-        if (isFormValid) {
+    const encodeFunctionParamsDebounced = useDebouncedCallback(
+        (params: AbiValueParameter[]) => {
             // Encode the function params
-            const payload = encodeFunctionParams(abiFunctionParams.value);
+            const payload = encodeFunctionParams(params);
             // Set the encoded function params as value for hex field
             form.setFieldValue("rawInput", payload);
+        },
+        400,
+    );
+
+    useEffect(() => {
+        if (isFormValid) {
+            encodeFunctionParamsDebounced(abiFunctionParams.value);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' dependency is not added on purpose because it has an unstable reference
-    }, [abiFunctionParams.value, isFormValid]);
+    }, [abiFunctionParams.value, isFormValid, encodeFunctionParamsDebounced]);
 
     return (
         <Stack>
@@ -149,7 +140,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     form.setFieldValue("abiMethod", nextValue as FormAbiMethod);
                     form.setFieldValue("specificationId", "");
                     form.setFieldValue("abiFunctionName", "");
-                    updateAbiFunctionParams([]);
+                    form.setFieldValue("abiFunctionParams", []);
                 }}
             />
 
@@ -168,7 +159,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             nextValue as string,
                         );
                         form.setFieldValue("abiFunctionName", "");
-                        updateAbiFunctionParams([]);
+                        form.setFieldValue("abiFunctionParams", []);
                     }}
                 />
             ) : null}
@@ -238,7 +229,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                                     key={`${input.name}-${input.type}`}
                                     label={
                                         input.name && input.type ? (
-                                            <FunctionParam input={input} />
+                                            <FunctionParamLabel input={input} />
                                         ) : (
                                             input.name || input.type
                                         )
@@ -256,7 +247,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             variant="light"
                             color="blue"
                             icon={<TbAlertCircle />}
-                            data-testid={`specification-mode-info`}
+                            data-testid="empty-inputs-argments-alert"
                         >
                             No input arguments defined for{" "}
                             <Text span fz="sm" fw="bold">

From 4052f905df27c4c6f7aa4ae13b2013cbde0c9edf Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Wed, 9 Oct 2024 23:36:08 +0300
Subject: [PATCH 10/40] chore(apps/web): Refactoring

---
 packages/ui/src/GenericInputForm/utils.ts       | 17 ++++++++---------
 packages/ui/src/GenericInputForm/validations.ts |  4 ++--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 18f9c2469..545ab8628 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -3,13 +3,13 @@ import { AbiValueParameter } from "./types";
 
 export const encodeFunctionParams = (params: AbiValueParameter[]) => {
     const values = params.map((param) => {
-        const { type, value } = param;
-
-        switch (type) {
+        switch (param.type) {
             case "bool":
-                return value === "true";
+                // Assume that the value can either be 'true' or 'false'
+                // because it was already validated for those exact values
+                return param.value === "true";
             case "address":
-                return getAddress(value);
+                return getAddress(param.value);
             case "uint":
             case "uint8":
             case "uint16":
@@ -17,11 +17,10 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
             case "uint64":
             case "uint128":
             case "uint256":
-                return BigInt(value);
-            case "string":
-            case "bytes":
+                return BigInt(param.value);
+            // No encoding required for other types like 'string' or 'bytes'
             default:
-                return value;
+                return param.value;
         }
     });
 
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 6b057748b..e472106b7 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -40,7 +40,7 @@ export const validateAbiFunctionParamValue = (
     const message = `Invalid ${param.type} value`;
     let error: string | null = null;
 
-    // Validate the field for some content
+    // Validate the field for non-empty content
     if (value === "") {
         return message;
     }
@@ -69,7 +69,7 @@ export const validateAbiFunctionParamValue = (
         case "address":
             error = isAddress(value) ? null : message;
             break;
-        // All other types like 'string' are handled in the non-empty check above
+        // All other types like 'string' are handled in the non-empty content check above
         default:
             break;
     }

From 37145082dd91e78738bd6e6e9d0f9a06040d6d48 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 10 Oct 2024 23:59:17 +0300
Subject: [PATCH 11/40] feat(apps/web): Add fields for 'new' abi method

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 138 ++++++++++--------
 .../AbiFunctionNameCombobox.tsx               |  98 +++++++++++++
 .../GenericInputForm/FunctionParamLabel.tsx   |  20 +++
 .../GenericInputForm/FunctionSignature.tsx    |  28 ++++
 packages/ui/src/GenericInputForm/index.tsx    |   5 +
 .../ui/src/GenericInputForm/initialValues.ts  |   2 +
 packages/ui/src/GenericInputForm/types.ts     |   7 +
 .../GenericInputForm/useGenericInputForm.ts   |  17 ++-
 packages/ui/src/GenericInputForm/utils.ts     |  26 +++-
 .../ui/src/GenericInputForm/validations.ts    |  23 ++-
 10 files changed, 294 insertions(+), 70 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx
 create mode 100644 packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
 create mode 100644 packages/ui/src/GenericInputForm/FunctionSignature.tsx

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 8144c989f..880e11672 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -3,20 +3,34 @@ import {
     Alert,
     Box,
     Combobox,
+    Flex,
+    Group,
     Input,
     InputBase,
+    SegmentedControl,
     Select,
     Stack,
     Text,
+    Textarea,
     TextInput,
+    Tooltip,
     useCombobox,
 } from "@mantine/core";
 import { AbiFunction, AbiParameter } from "viem";
 import { FC, Fragment, useCallback, useEffect } from "react";
-import { AbiValueParameter, FormAbiMethod, FormSpecification } from "./types";
-import { TbAlertCircle } from "react-icons/tb";
+import {
+    AbiValueParameter,
+    FormAbiMethod,
+    FormSpecification,
+    SpecificationMode,
+} from "./types";
+import { TbAlertCircle, TbHelp } from "react-icons/tb";
 import { encodeFunctionParams } from "./utils";
 import { useDebouncedCallback } from "@mantine/hooks";
+import LabelWithTooltip from "web/src/components/labelWithTooltip";
+import { AbiFunctionNameCombobox } from "./AbiFunctionNameCombobox";
+
+const placeholder = `function balanceOf(address owner) view returns (uint256) \nevent Transfer(address indexed from, address indexed to, uint256 amount)`;
 
 interface FunctionParamLabelProps {
     input: AbiParameter;
@@ -65,13 +79,10 @@ export interface AbiFieldsProps {
 
 export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const form = useFormContext();
-    const { abiMethod, abiFunction, specificationId } =
+    const { abiMethod, abiFunction, specificationMode, selectedSpecification } =
         form.getTransformedValues();
     const abiFunctionParams = form.getInputProps("abiFunctionParams");
     const isFormValid = form.isValid();
-    const selectedSpecification = specifications.find(
-        (s) => s.id === specificationId,
-    );
     const specificationOptions = specifications.map((s) => ({
         value: s.id,
         label: s.name,
@@ -114,6 +125,8 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         400,
     );
 
+    const onChangeHumanAbiDebounced = useDebouncedCallback(() => {}, 400);
+
     useEffect(() => {
         if (isFormValid) {
             encodeFunctionParamsDebounced(abiFunctionParams.value);
@@ -144,7 +157,60 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                 }}
             />
 
-            {abiMethod === "existing" ? (
+            {abiMethod === "new" ? (
+                <Stack>
+                    <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,
+                            );
+                        }}
+                    />
+
+                    {specificationMode === "json_abi" ? (
+                        <Textarea
+                            data-testid="json-abi-textarea"
+                            resize="vertical"
+                            description="Define signatures in Human readable format"
+                            placeholder={placeholder}
+                            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);
+                            }}
+                        />
+                    ) : null}
+                </Stack>
+            ) : (
                 <Select
                     label="Specifications"
                     description="Available JSON_ABI specifications"
@@ -162,64 +228,10 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                         form.setFieldValue("abiFunctionParams", []);
                     }}
                 />
-            ) : null}
-
-            {selectedSpecification && (
-                <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")}
-                            onClick={() => combobox.toggleDropdown()}
-                        >
-                            {abiFunction ? (
-                                <FunctionSignature abiFunction={abiFunction} />
-                            ) : (
-                                <Input.Placeholder>
-                                    Select function
-                                </Input.Placeholder>
-                            )}
-                        </InputBase>
-                    </Combobox.Target>
-
-                    <Combobox.Dropdown>
-                        <Combobox.Options>
-                            {(selectedSpecification.abi as AbiFunction[])
-                                .filter((item) => item.type === "function")
-                                .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>
             )}
 
+            <AbiFunctionNameCombobox />
+
             {abiFunction && (
                 <Stack>
                     {abiFunction.inputs.length > 0 ? (
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx b/packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx
new file mode 100644
index 000000000..e224cdf2d
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx
@@ -0,0 +1,98 @@
+import { useFormContext } from "./context";
+import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import { AbiFunction } from "viem";
+import { useCallback } from "react";
+import { FunctionSignature } from "./FunctionSignature";
+
+export const AbiFunctionNameCombobox = () => {
+    const form = useFormContext();
+    const { abiFunction, selectedSpecification } = form.getTransformedValues();
+    const combobox = useCombobox({
+        onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+    const specificationFunctions = (
+        (selectedSpecification?.abi as AbiFunction[]) ?? []
+    ).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) {
+                const emptyFunctionParams = nextAbiFunction.inputs.map(
+                    (input) => ({
+                        ...input,
+                        value: "",
+                    }),
+                );
+
+                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+            }
+        },
+        [combobox, form, selectedSpecification],
+    );
+
+    return (
+        <>
+            {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")}
+                            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>
+            ) : null}
+        </>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx b/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
new file mode 100644
index 000000000..9cb18a5af
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
@@ -0,0 +1,20 @@
+import { AbiParameter } from "viem";
+import { FC } from "react";
+import { Box, Text } from "@mantine/core";
+
+interface FunctionParamLabelProps {
+    input: AbiParameter;
+}
+
+export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
+    return (
+        <Box display="inline">
+            <Text c="cyan" span fz="sm">
+                {input.type}
+            </Text>{" "}
+            <Text span fz="sm">
+                {input.name}
+            </Text>
+        </Box>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/FunctionSignature.tsx b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
new file mode 100644
index 000000000..448b2a981
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
@@ -0,0 +1,28 @@
+import { AbiFunction } from "viem";
+import { FC, Fragment } from "react";
+import { Text } from "@mantine/core";
+import { FunctionParamLabel } from "./FunctionParamLabel";
+
+interface FunctionSignatureProps {
+    abiFunction: AbiFunction;
+}
+
+export const FunctionSignature: FC<FunctionSignatureProps> = ({
+    abiFunction,
+}) => {
+    return (
+        <>
+            <Text span fw="bold" fz="sm">
+                {abiFunction.name}
+            </Text>
+            (
+            {abiFunction.inputs.map((input, index) => (
+                <Fragment key={`${input.type}-${input.name}`}>
+                    <FunctionParamLabel input={input} />
+                    {index < abiFunction.inputs.length - 1 ? ", " : ""}
+                </Fragment>
+            ))}
+            )
+        </>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index e2040726e..dbda55cb5 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -82,6 +82,11 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wait, onSearchApplications, onSuccess]);
 
+    useEffect(() => {
+        console.log("errors::", form.errors);
+        console.log("isValid::", form.isValid());
+    }, [form]);
+
     return (
         <FormProvider form={form}>
             <form data-testid="raw-input-form">
diff --git a/packages/ui/src/GenericInputForm/initialValues.ts b/packages/ui/src/GenericInputForm/initialValues.ts
index f05c2cd04..207b9c31f 100644
--- a/packages/ui/src/GenericInputForm/initialValues.ts
+++ b/packages/ui/src/GenericInputForm/initialValues.ts
@@ -6,6 +6,8 @@ export const initialValues: FormValues = {
     rawInput: "0x",
     stringInput: "",
     abiMethod: "existing",
+    specificationMode: "json_abi",
+    humanAbi: "",
     specificationId: "",
     abiFunctionName: "",
     abiFunctionParams: [],
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 2b20ce833..743a6d3a0 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -8,6 +8,8 @@ export interface FormSpecification {
     abi: Abi;
 }
 
+export type SpecificationMode = "json_abi" | "abi_params";
+
 export type FormAbiMethod = "new" | "existing";
 
 export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
@@ -20,6 +22,8 @@ export interface FormValues {
     rawInput: Hex;
     stringInput: string;
     abiMethod: FormAbiMethod;
+    specificationMode: SpecificationMode;
+    humanAbi: string;
     specificationId: string;
     abiFunctionName: string;
     abiFunctionParams: AbiValueParameter[];
@@ -30,6 +34,9 @@ export interface FormTransformedValues {
     address: Address;
     rawInput: Hex;
     abiMethod: FormAbiMethod;
+    specificationMode: SpecificationMode;
+    humanAbi: string;
     specificationId: string;
     abiFunction: AbiFunction | undefined;
+    selectedSpecification: FormSpecification | undefined;
 }
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 05cef929a..553f59668 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -6,10 +6,12 @@ import {
     validateAbiMethod,
     validateApplication,
     validateHexInput,
+    validateHumanAbi,
     validateSpecificationId,
 } from "./validations";
 import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
 import { FormSpecification } from "./types";
+import { generateFormSpecification } from "./utils";
 
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
     return useForm({
@@ -19,6 +21,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             application: validateApplication,
             rawInput: validateHexInput,
             abiMethod: validateAbiMethod,
+            humanAbi: validateHumanAbi,
             specificationId: validateSpecificationId,
             abiFunctionName: validateAbiFunctionName,
             abiFunctionParams: {
@@ -26,9 +29,14 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             },
         },
         transformValues: (values) => {
-            const selectedSpecification = specifications.find(
-                (s) => s.id === values.specificationId,
-            );
+            const selectedSpecification =
+                values.abiMethod === "existing"
+                    ? specifications.find(
+                          (s) => s.id === values.specificationId,
+                      )
+                    : values.specificationMode === "json_abi"
+                    ? generateFormSpecification(values.humanAbi)
+                    : undefined;
 
             return {
                 mode: values.mode,
@@ -37,7 +45,10 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                     : zeroAddress,
                 rawInput: values.rawInput as Hex,
                 abiMethod: values.abiMethod,
+                specificationMode: values.specificationMode,
+                humanAbi: values.humanAbi,
                 specificationId: values.specificationId,
+                selectedSpecification,
                 abiFunction: (
                     (selectedSpecification?.abi as AbiFunction[]) ?? []
                 ).find(
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 545ab8628..996c9fe29 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,5 +1,7 @@
-import { encodeAbiParameters, getAddress } from "viem";
-import { AbiValueParameter } from "./types";
+import { Abi, encodeAbiParameters, getAddress, parseAbi } from "viem";
+import { AbiValueParameter, FormSpecification } from "./types";
+import { prepareSignatures } from "web/src/components/specification/utils";
+import { isBlank, isObject } from "ramda-adjunct";
 
 export const encodeFunctionParams = (params: AbiValueParameter[]) => {
     const values = params.map((param) => {
@@ -26,3 +28,23 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
 
     return encodeAbiParameters(params, values);
 };
+
+export const generateFormSpecification = (humanAbi: string) => {
+    if (isBlank(humanAbi)) {
+        return undefined;
+    }
+
+    const readableList = prepareSignatures(humanAbi);
+    let generatedAbi;
+    try {
+        generatedAbi = parseAbi(readableList);
+    } catch (err) {}
+
+    return isObject(generatedAbi)
+        ? ({
+              id: new Date().getTime().toString(),
+              name: "Generated specification",
+              abi: generatedAbi,
+          } as FormSpecification)
+        : undefined;
+};
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index e472106b7..40ab76501 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,5 +1,7 @@
-import { isAddress, isHex } from "viem";
+import { isAddress, isHex, parseAbi } from "viem";
 import { FormValues } from "./types";
+import { isBlank } from "ramda-adjunct";
+import { prepareSignatures } from "web/src/components/specification/utils";
 
 export const validateApplication = (value: string) =>
     value !== "" && isAddress(value) ? null : "Invalid application";
@@ -13,7 +15,9 @@ export const validateAbiMethod = (value: string, values: FormValues) =>
         : "Invalid abi method";
 
 export const validateSpecificationId = (value: string, values: FormValues) =>
-    values.mode !== "abi" || value !== "" ? null : "Invalid specification";
+    values.mode !== "abi" || values.abiMethod === "new" || value !== ""
+        ? null
+        : "Invalid specification";
 
 export const validateAbiFunctionName = (value: string, values: FormValues) =>
     values.mode !== "abi" || value !== "" ? null : "Invalid abi function";
@@ -76,3 +80,18 @@ export const validateAbiFunctionParamValue = (
 
     return error;
 };
+
+export const validateHumanAbi = (value: string) => {
+    if (isBlank(value)) {
+        return "The ABI signature definition is required!";
+    }
+
+    const items = prepareSignatures(value);
+    try {
+        parseAbi(items);
+    } catch (error: any) {
+        return error.message;
+    }
+
+    return null;
+};

From 043603776ed7c04effafa0f102c89c8d38f4be85 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 11 Oct 2024 00:14:40 +0300
Subject: [PATCH 12/40] chore(apps/web): Refactoring

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 158 +-----------------
 ...onNameCombobox.tsx => AbiFunctionName.tsx} |   2 +-
 .../GenericInputForm/AbiFunctionParams.tsx    |  52 ++++++
 packages/ui/src/GenericInputForm/index.tsx    |  25 ++-
 .../ui/src/GenericInputForm/validations.ts    |   6 +-
 5 files changed, 87 insertions(+), 156 deletions(-)
 rename packages/ui/src/GenericInputForm/{AbiFunctionNameCombobox.tsx => AbiFunctionName.tsx} (98%)
 create mode 100644 packages/ui/src/GenericInputForm/AbiFunctionParams.tsx

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 880e11672..581b503a7 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -1,77 +1,20 @@
 import { useFormContext } from "./context";
 import {
-    Alert,
-    Box,
-    Combobox,
     Flex,
     Group,
-    Input,
-    InputBase,
     SegmentedControl,
     Select,
     Stack,
     Text,
     Textarea,
-    TextInput,
     Tooltip,
     useCombobox,
 } from "@mantine/core";
-import { AbiFunction, AbiParameter } from "viem";
-import { FC, Fragment, useCallback, useEffect } from "react";
-import {
-    AbiValueParameter,
-    FormAbiMethod,
-    FormSpecification,
-    SpecificationMode,
-} from "./types";
-import { TbAlertCircle, TbHelp } from "react-icons/tb";
-import { encodeFunctionParams } from "./utils";
-import { useDebouncedCallback } from "@mantine/hooks";
-import LabelWithTooltip from "web/src/components/labelWithTooltip";
-import { AbiFunctionNameCombobox } from "./AbiFunctionNameCombobox";
-
-const placeholder = `function balanceOf(address owner) view returns (uint256) \nevent Transfer(address indexed from, address indexed to, uint256 amount)`;
-
-interface FunctionParamLabelProps {
-    input: AbiParameter;
-}
-
-export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
-    return (
-        <Box display="inline">
-            <Text c="cyan" span fz="sm">
-                {input.type}
-            </Text>{" "}
-            <Text span fz="sm">
-                {input.name}
-            </Text>
-        </Box>
-    );
-};
-
-interface FunctionSignatureProps {
-    abiFunction: AbiFunction;
-}
-
-export const FunctionSignature: FC<FunctionSignatureProps> = ({
-    abiFunction,
-}) => {
-    return (
-        <>
-            <Text span fw="bold" fz="sm">
-                {abiFunction.name}
-            </Text>
-            (
-            {abiFunction.inputs.map((input, index) => (
-                <Fragment key={`${input.type}-${input.name}`}>
-                    <FunctionParamLabel input={input} />
-                    {index < abiFunction.inputs.length - 1 ? ", " : ""}
-                </Fragment>
-            ))}
-            )
-        </>
-    );
-};
+import { FC } from "react";
+import { FormAbiMethod, FormSpecification, SpecificationMode } from "./types";
+import { TbHelp } from "react-icons/tb";
+import { AbiFunctionName } from "./AbiFunctionName";
+import { AbiFunctionParams } from "./AbiFunctionParams";
 
 export interface AbiFieldsProps {
     specifications: FormSpecification[];
@@ -79,10 +22,7 @@ export interface AbiFieldsProps {
 
 export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
     const form = useFormContext();
-    const { abiMethod, abiFunction, specificationMode, selectedSpecification } =
-        form.getTransformedValues();
-    const abiFunctionParams = form.getInputProps("abiFunctionParams");
-    const isFormValid = form.isValid();
+    const { abiMethod, specificationMode } = form.getTransformedValues();
     const specificationOptions = specifications.map((s) => ({
         value: s.id,
         label: s.name,
@@ -91,48 +31,6 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
 
-    const onChangeAbiFunctionName = useCallback(
-        (abiFunctionName: string) => {
-            combobox.closeDropdown();
-
-            form.setFieldValue("abiFunctionName", abiFunctionName);
-
-            const nextAbiFunction = (
-                (selectedSpecification?.abi as AbiFunction[]) ?? []
-            ).find((abiFunction) => abiFunction.name === abiFunctionName);
-
-            if (nextAbiFunction) {
-                const emptyFunctionParams = nextAbiFunction.inputs.map(
-                    (input) => ({
-                        ...input,
-                        value: "",
-                    }),
-                );
-
-                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
-            }
-        },
-        [combobox, form, selectedSpecification],
-    );
-
-    const encodeFunctionParamsDebounced = useDebouncedCallback(
-        (params: AbiValueParameter[]) => {
-            // Encode the function params
-            const payload = encodeFunctionParams(params);
-            // Set the encoded function params as value for hex field
-            form.setFieldValue("rawInput", payload);
-        },
-        400,
-    );
-
-    const onChangeHumanAbiDebounced = useDebouncedCallback(() => {}, 400);
-
-    useEffect(() => {
-        if (isFormValid) {
-            encodeFunctionParamsDebounced(abiFunctionParams.value);
-        }
-    }, [abiFunctionParams.value, isFormValid, encodeFunctionParamsDebounced]);
-
     return (
         <Stack>
             <Select
@@ -185,7 +83,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             data-testid="json-abi-textarea"
                             resize="vertical"
                             description="Define signatures in Human readable format"
-                            placeholder={placeholder}
+                            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">
@@ -230,46 +128,8 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                 />
             )}
 
-            <AbiFunctionNameCombobox />
-
-            {abiFunction && (
-                <Stack>
-                    {abiFunction.inputs.length > 0 ? (
-                        <>
-                            {abiFunction.inputs.map((input, index) => (
-                                <TextInput
-                                    key={`${input.name}-${input.type}`}
-                                    label={
-                                        input.name && input.type ? (
-                                            <FunctionParamLabel input={input} />
-                                        ) : (
-                                            input.name || input.type
-                                        )
-                                    }
-                                    placeholder={`Enter ${input.type} value`}
-                                    withAsterisk
-                                    {...form.getInputProps(
-                                        `abiFunctionParams.${index}.value`,
-                                    )}
-                                />
-                            ))}
-                        </>
-                    ) : (
-                        <Alert
-                            variant="light"
-                            color="blue"
-                            icon={<TbAlertCircle />}
-                            data-testid="empty-inputs-argments-alert"
-                        >
-                            No input arguments defined for{" "}
-                            <Text span fz="sm" fw="bold">
-                                {abiFunction.name}()
-                            </Text>
-                            .
-                        </Alert>
-                    )}
-                </Stack>
-            )}
+            <AbiFunctionName />
+            <AbiFunctionParams />
         </Stack>
     );
 };
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
similarity index 98%
rename from packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx
rename to packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index e224cdf2d..223726c84 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionNameCombobox.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -4,7 +4,7 @@ import { AbiFunction } from "viem";
 import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
 
-export const AbiFunctionNameCombobox = () => {
+export const AbiFunctionName = () => {
     const form = useFormContext();
     const { abiFunction, selectedSpecification } = form.getTransformedValues();
     const combobox = useCombobox({
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
new file mode 100644
index 000000000..2994d42c2
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -0,0 +1,52 @@
+import { useFormContext } from "./context";
+import { Alert, Stack, Text, TextInput } from "@mantine/core";
+import { TbAlertCircle } from "react-icons/tb";
+import { FunctionParamLabel } from "./FunctionParamLabel";
+
+export const AbiFunctionParams = () => {
+    const form = useFormContext();
+    const { abiFunction } = form.getTransformedValues();
+
+    return (
+        <>
+            {abiFunction ? (
+                <Stack>
+                    {abiFunction.inputs.length > 0 ? (
+                        <>
+                            {abiFunction.inputs.map((input, index) => (
+                                <TextInput
+                                    key={`${input.name}-${input.type}`}
+                                    label={
+                                        input.name && input.type ? (
+                                            <FunctionParamLabel input={input} />
+                                        ) : (
+                                            input.name || input.type
+                                        )
+                                    }
+                                    placeholder={`Enter ${input.type} value`}
+                                    withAsterisk
+                                    {...form.getInputProps(
+                                        `abiFunctionParams.${index}.value`,
+                                    )}
+                                />
+                            ))}
+                        </>
+                    ) : (
+                        <Alert
+                            variant="light"
+                            color="blue"
+                            icon={<TbAlertCircle />}
+                            data-testid="empty-inputs-argments-alert"
+                        >
+                            No input arguments defined for{" "}
+                            <Text span fz="sm" fw="bold">
+                                {abiFunction.name}()
+                            </Text>
+                            .
+                        </Alert>
+                    )}
+                </Stack>
+            ) : null}
+        </>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index dbda55cb5..5b2656698 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -21,9 +21,11 @@ import { TransactionProgress } from "../TransactionProgress";
 import useUndeployedApplication from "../hooks/useUndeployedApplication";
 import { TransactionFormSuccessData } from "../DepositFormTypes";
 import { AbiFields } from "./AbiFields";
-import { FormMode } from "./types";
+import { AbiValueParameter, FormMode } from "./types";
 import { FormProvider } from "./context";
 import { useGenericInputForm } from "./useGenericInputForm";
+import { useDebouncedCallback } from "@mantine/hooks";
+import { encodeFunctionParams } from "./utils";
 
 export interface GenericInputFormSpecification {
     id: string;
@@ -61,8 +63,10 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         hash: execute.data,
     });
     const loading = execute.isPending || wait.isLoading;
-    const canSubmit = form.isValid() && prepare.error === null;
+    const isFormValid = form.isValid();
+    const canSubmit = isFormValid && prepare.error === null;
     const isUndeployedApp = useUndeployedApplication(address, applications);
+    const abiFunctionParams = form.getInputProps("abiFunctionParams");
 
     const onChangeFormMode = useCallback(
         (mode: string | null) => {
@@ -72,6 +76,16 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         [form],
     );
 
+    const encodeFunctionParamsDebounced = useDebouncedCallback(
+        (params: AbiValueParameter[]) => {
+            // Encode the function params
+            const payload = encodeFunctionParams(params);
+            // Set the encoded function params as value for hex field
+            form.setFieldValue("rawInput", payload);
+        },
+        400,
+    );
+
     useEffect(() => {
         if (wait.isSuccess) {
             onSuccess({ receipt: wait.data, type: "RAW" });
@@ -83,9 +97,10 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
     }, [wait, onSearchApplications, onSuccess]);
 
     useEffect(() => {
-        console.log("errors::", form.errors);
-        console.log("isValid::", form.isValid());
-    }, [form]);
+        if (isFormValid) {
+            encodeFunctionParamsDebounced(abiFunctionParams.value);
+        }
+    }, [abiFunctionParams.value, isFormValid, encodeFunctionParamsDebounced]);
 
     return (
         <FormProvider form={form}>
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 40ab76501..710287eca 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -81,7 +81,11 @@ export const validateAbiFunctionParamValue = (
     return error;
 };
 
-export const validateHumanAbi = (value: string) => {
+export const validateHumanAbi = (value: string, values: FormValues) => {
+    if (values.abiMethod === "existing") {
+        return null;
+    }
+
     if (isBlank(value)) {
         return "The ABI signature definition is required!";
     }

From 9e16e5aa3f027ef0a503b61132ba8e31c3c239c6 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 11 Oct 2024 00:19:40 +0300
Subject: [PATCH 13/40] chore(apps/web): Refactoring

---
 .../GenericInputForm/AbiFunctionParams.tsx    |  2 +-
 .../GenericInputForm/FunctionParamLabel.tsx   | 20 -----------------
 .../GenericInputForm/FunctionSignature.tsx    | 22 ++++++++++++++++---
 .../ui/src/GenericInputForm/initialValues.ts  | 14 ------------
 .../GenericInputForm/useGenericInputForm.ts   | 14 ++++++++++--
 packages/ui/src/GenericInputForm/utils.ts     |  5 +----
 6 files changed, 33 insertions(+), 44 deletions(-)
 delete mode 100644 packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
 delete mode 100644 packages/ui/src/GenericInputForm/initialValues.ts

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index 2994d42c2..b4826c43b 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -1,7 +1,7 @@
 import { useFormContext } from "./context";
 import { Alert, Stack, Text, TextInput } from "@mantine/core";
 import { TbAlertCircle } from "react-icons/tb";
-import { FunctionParamLabel } from "./FunctionParamLabel";
+import { FunctionParamLabel } from "./FunctionSignature";
 
 export const AbiFunctionParams = () => {
     const form = useFormContext();
diff --git a/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx b/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
deleted file mode 100644
index 9cb18a5af..000000000
--- a/packages/ui/src/GenericInputForm/FunctionParamLabel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { AbiParameter } from "viem";
-import { FC } from "react";
-import { Box, Text } from "@mantine/core";
-
-interface FunctionParamLabelProps {
-    input: AbiParameter;
-}
-
-export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
-    return (
-        <Box display="inline">
-            <Text c="cyan" span fz="sm">
-                {input.type}
-            </Text>{" "}
-            <Text span fz="sm">
-                {input.name}
-            </Text>
-        </Box>
-    );
-};
diff --git a/packages/ui/src/GenericInputForm/FunctionSignature.tsx b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
index 448b2a981..266c866d3 100644
--- a/packages/ui/src/GenericInputForm/FunctionSignature.tsx
+++ b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
@@ -1,7 +1,23 @@
-import { AbiFunction } from "viem";
+import { AbiFunction, AbiParameter } from "viem";
 import { FC, Fragment } from "react";
-import { Text } from "@mantine/core";
-import { FunctionParamLabel } from "./FunctionParamLabel";
+import { Box, Text } from "@mantine/core";
+
+interface FunctionParamLabelProps {
+    input: AbiParameter;
+}
+
+export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
+    return (
+        <Box display="inline">
+            <Text c="cyan" span fz="sm">
+                {input.type}
+            </Text>{" "}
+            <Text span fz="sm">
+                {input.name}
+            </Text>
+        </Box>
+    );
+};
 
 interface FunctionSignatureProps {
     abiFunction: AbiFunction;
diff --git a/packages/ui/src/GenericInputForm/initialValues.ts b/packages/ui/src/GenericInputForm/initialValues.ts
deleted file mode 100644
index 207b9c31f..000000000
--- a/packages/ui/src/GenericInputForm/initialValues.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { FormValues } from "./types";
-
-export const initialValues: FormValues = {
-    mode: "hex",
-    application: "",
-    rawInput: "0x",
-    stringInput: "",
-    abiMethod: "existing",
-    specificationMode: "json_abi",
-    humanAbi: "",
-    specificationId: "",
-    abiFunctionName: "",
-    abiFunctionParams: [],
-};
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 553f59668..d54e98f98 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -1,5 +1,4 @@
 import { useForm } from "./context";
-import { initialValues } from "./initialValues";
 import {
     validateAbiFunctionName,
     validateAbiFunctionParamValue,
@@ -16,7 +15,18 @@ import { generateFormSpecification } from "./utils";
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
     return useForm({
         validateInputOnBlur: true,
-        initialValues,
+        initialValues: {
+            mode: "hex",
+            application: "",
+            rawInput: "0x",
+            stringInput: "",
+            abiMethod: "existing",
+            specificationMode: "json_abi",
+            humanAbi: "",
+            specificationId: "",
+            abiFunctionName: "",
+            abiFunctionParams: [],
+        },
         validate: {
             application: validateApplication,
             rawInput: validateHexInput,
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 996c9fe29..a83a11a78 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,4 +1,4 @@
-import { Abi, encodeAbiParameters, getAddress, parseAbi } from "viem";
+import { encodeAbiParameters, getAddress, parseAbi } from "viem";
 import { AbiValueParameter, FormSpecification } from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isBlank, isObject } from "ramda-adjunct";
@@ -7,8 +7,6 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
     const values = params.map((param) => {
         switch (param.type) {
             case "bool":
-                // Assume that the value can either be 'true' or 'false'
-                // because it was already validated for those exact values
                 return param.value === "true";
             case "address":
                 return getAddress(param.value);
@@ -20,7 +18,6 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
             case "uint128":
             case "uint256":
                 return BigInt(param.value);
-            // No encoding required for other types like 'string' or 'bytes'
             default:
                 return param.value;
         }

From 4408c254e126dfd27cd073a6f11d621daee25708 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 11 Oct 2024 18:39:12 +0300
Subject: [PATCH 14/40] feat(apps/web): Add handling for abi params

---
 .../ui/src/GenericInputForm/AbiFields.tsx     |  7 ++-
 .../src/GenericInputForm/AbiFunctionName.tsx  |  7 ++-
 .../ui/src/GenericInputForm/AbiParameter.tsx  | 52 +++++++++++++++++++
 packages/ui/src/GenericInputForm/types.ts     |  4 ++
 .../GenericInputForm/useGenericInputForm.ts   | 17 ++++--
 packages/ui/src/GenericInputForm/utils.ts     | 42 +++++++++++++--
 .../ui/src/GenericInputForm/validations.ts    | 35 +++++++++++--
 7 files changed, 149 insertions(+), 15 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/AbiParameter.tsx

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 581b503a7..153731ae8 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -1,5 +1,6 @@
 import { useFormContext } from "./context";
 import {
+    Button,
     Flex,
     Group,
     SegmentedControl,
@@ -7,6 +8,7 @@ import {
     Stack,
     Text,
     Textarea,
+    TextInput,
     Tooltip,
     useCombobox,
 } from "@mantine/core";
@@ -15,6 +17,7 @@ import { FormAbiMethod, FormSpecification, SpecificationMode } from "./types";
 import { TbHelp } from "react-icons/tb";
 import { AbiFunctionName } from "./AbiFunctionName";
 import { AbiFunctionParams } from "./AbiFunctionParams";
+import { AbiParameter } from "./AbiParameter";
 
 export interface AbiFieldsProps {
     specifications: FormSpecification[];
@@ -106,7 +109,9 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                                 form.setFieldValue("humanAbi", nextValue);
                             }}
                         />
-                    ) : null}
+                    ) : (
+                        <AbiParameter />
+                    )}
                 </Stack>
             ) : (
                 <Select
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 223726c84..87d37c777 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -6,7 +6,8 @@ import { FunctionSignature } from "./FunctionSignature";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
-    const { abiFunction, selectedSpecification } = form.getTransformedValues();
+    const { abiFunction, selectedSpecification, specificationMode } =
+        form.getTransformedValues();
     const combobox = useCombobox({
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
@@ -40,7 +41,9 @@ export const AbiFunctionName = () => {
 
     return (
         <>
-            {selectedSpecification && specificationFunctions.length > 0 ? (
+            {specificationMode === "json_abi" &&
+            selectedSpecification &&
+            specificationFunctions.length > 0 ? (
                 <Combobox
                     store={combobox}
                     onOptionSubmit={onChangeAbiFunctionName}
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
new file mode 100644
index 000000000..b166fce5b
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -0,0 +1,52 @@
+import { useFormContext } from "./context";
+import { Button, TextInput, Transition, Paper } from "@mantine/core";
+import { useCallback, useEffect, useState } from "react";
+import { AbiFunction } from "viem";
+import { generateAbiParamFormSpecification } from "./utils";
+
+export const AbiParameter = () => {
+    const form = useFormContext();
+    const { abiParam, savedAbiParam } = form.getTransformedValues();
+
+    const addABIParam = useCallback(() => {
+        form.setFieldValue("savedAbiParam", abiParam);
+
+        const selectedSpecification =
+            generateAbiParamFormSpecification(abiParam);
+
+        const nextAbiFunction = (
+            selectedSpecification?.abi as AbiFunction[]
+        )[0];
+
+        if (nextAbiFunction) {
+            const emptyFunctionParams = nextAbiFunction.inputs.map((input) => ({
+                ...input,
+                value: "",
+            }));
+
+            form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' is not added on purpose because it has unstable reference
+    }, [abiParam]);
+
+    return (
+        <TextInput
+            label="ABI Parameter"
+            description="Human readable ABI format"
+            placeholder="address to, uint256 amount, bool succ"
+            rightSectionWidth="lg"
+            rightSection={
+                <Button
+                    data-testid="abi-parameter-add-button"
+                    onClick={addABIParam}
+                    disabled={
+                        !!form.errors.abiParam || abiParam === savedAbiParam
+                    }
+                >
+                    Save
+                </Button>
+            }
+            {...form.getInputProps("abiParam")}
+        />
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 743a6d3a0..211bbea0f 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -24,6 +24,8 @@ export interface FormValues {
     abiMethod: FormAbiMethod;
     specificationMode: SpecificationMode;
     humanAbi: string;
+    abiParam: string;
+    savedAbiParam: string;
     specificationId: string;
     abiFunctionName: string;
     abiFunctionParams: AbiValueParameter[];
@@ -36,6 +38,8 @@ export interface FormTransformedValues {
     abiMethod: FormAbiMethod;
     specificationMode: SpecificationMode;
     humanAbi: string;
+    abiParam: string;
+    savedAbiParam: string;
     specificationId: string;
     abiFunction: AbiFunction | undefined;
     selectedSpecification: FormSpecification | undefined;
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index d54e98f98..29fa6fddc 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -3,6 +3,7 @@ import {
     validateAbiFunctionName,
     validateAbiFunctionParamValue,
     validateAbiMethod,
+    validateAbiParam,
     validateApplication,
     validateHexInput,
     validateHumanAbi,
@@ -10,11 +11,14 @@ import {
 } from "./validations";
 import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
 import { FormSpecification } from "./types";
-import { generateFormSpecification } from "./utils";
+import {
+    generateAbiParamFormSpecification,
+    generateHumanAbiFormSpecification,
+} from "./utils";
 
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
     return useForm({
-        validateInputOnBlur: true,
+        validateInputOnChange: true,
         initialValues: {
             mode: "hex",
             application: "",
@@ -23,6 +27,8 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             abiMethod: "existing",
             specificationMode: "json_abi",
             humanAbi: "",
+            abiParam: "",
+            savedAbiParam: "",
             specificationId: "",
             abiFunctionName: "",
             abiFunctionParams: [],
@@ -32,6 +38,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             rawInput: validateHexInput,
             abiMethod: validateAbiMethod,
             humanAbi: validateHumanAbi,
+            abiParam: validateAbiParam,
             specificationId: validateSpecificationId,
             abiFunctionName: validateAbiFunctionName,
             abiFunctionParams: {
@@ -45,8 +52,8 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                           (s) => s.id === values.specificationId,
                       )
                     : values.specificationMode === "json_abi"
-                    ? generateFormSpecification(values.humanAbi)
-                    : undefined;
+                    ? generateHumanAbiFormSpecification(values.humanAbi)
+                    : generateAbiParamFormSpecification(values.savedAbiParam);
 
             return {
                 mode: values.mode,
@@ -57,6 +64,8 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                 abiMethod: values.abiMethod,
                 specificationMode: values.specificationMode,
                 humanAbi: values.humanAbi,
+                abiParam: values.abiParam,
+                savedAbiParam: values.savedAbiParam,
                 specificationId: values.specificationId,
                 selectedSpecification,
                 abiFunction: (
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index a83a11a78..ef768f9ad 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,7 +1,17 @@
-import { encodeAbiParameters, getAddress, parseAbi } from "viem";
-import { AbiValueParameter, FormSpecification } from "./types";
+import {
+    AbiFunction,
+    encodeAbiParameters,
+    getAddress,
+    parseAbi,
+    parseAbiParameters,
+} from "viem";
+import {
+    AbiValueParameter,
+    FormSpecification,
+    SpecificationMode,
+} from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
-import { isBlank, isObject } from "ramda-adjunct";
+import { isArray, isBlank, isObject } from "ramda-adjunct";
 
 export const encodeFunctionParams = (params: AbiValueParameter[]) => {
     const values = params.map((param) => {
@@ -26,7 +36,7 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
     return encodeAbiParameters(params, values);
 };
 
-export const generateFormSpecification = (humanAbi: string) => {
+export const generateHumanAbiFormSpecification = (humanAbi: string) => {
     if (isBlank(humanAbi)) {
         return undefined;
     }
@@ -45,3 +55,27 @@ export const generateFormSpecification = (humanAbi: string) => {
           } as FormSpecification)
         : undefined;
 };
+
+export const generateAbiParamFormSpecification = (abiParam: string) => {
+    let abiParameters;
+
+    try {
+        abiParameters = parseAbiParameters(abiParam);
+    } catch (err) {}
+
+    return isArray(abiParameters)
+        ? ({
+              id: new Date().getTime().toString(),
+              name: "Generated specification",
+              abi: [
+                  {
+                      inputs: abiParameters,
+                      name: "",
+                      outputs: [],
+                      stateMutability: "view",
+                      type: "function",
+                  },
+              ],
+          } as FormSpecification)
+        : undefined;
+};
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 710287eca..143668f91 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,4 +1,4 @@
-import { isAddress, isHex, parseAbi } from "viem";
+import { isAddress, isHex, parseAbi, parseAbiParameters } from "viem";
 import { FormValues } from "./types";
 import { isBlank } from "ramda-adjunct";
 import { prepareSignatures } from "web/src/components/specification/utils";
@@ -20,7 +20,11 @@ export const validateSpecificationId = (value: string, values: FormValues) =>
         : "Invalid specification";
 
 export const validateAbiFunctionName = (value: string, values: FormValues) =>
-    values.mode !== "abi" || value !== "" ? null : "Invalid abi function";
+    values.mode !== "abi" ||
+    values.specificationMode !== "json_abi" ||
+    value !== ""
+        ? null
+        : "Invalid abi function";
 
 export const validateAbiFunctionParamValue = (
     value: string,
@@ -82,12 +86,15 @@ export const validateAbiFunctionParamValue = (
 };
 
 export const validateHumanAbi = (value: string, values: FormValues) => {
-    if (values.abiMethod === "existing") {
+    if (
+        values.abiMethod === "existing" ||
+        values.specificationMode === "abi_params"
+    ) {
         return null;
     }
 
     if (isBlank(value)) {
-        return "The ABI signature definition is required!";
+        return "The ABI signature definition is required";
     }
 
     const items = prepareSignatures(value);
@@ -99,3 +106,23 @@ export const validateHumanAbi = (value: string, values: FormValues) => {
 
     return null;
 };
+
+export const validateAbiParam = (value: string, values: FormValues) => {
+    if (
+        values.abiMethod === "existing" ||
+        values.specificationMode === "json_abi"
+    ) {
+        return null;
+    }
+
+    if (isBlank(value)) {
+        return "ABI parameter is required.";
+    }
+
+    try {
+        parseAbiParameters(value);
+        return null;
+    } catch (error: any) {
+        return error.message as string;
+    }
+};

From 3c779068004b29a27f8c1f2580cd7db987912285 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Fri, 11 Oct 2024 22:25:12 +0300
Subject: [PATCH 15/40] chore(apps/web): Refactoring

---
 packages/ui/src/GenericInputForm/AbiFields.tsx        | 11 +++++++++++
 packages/ui/src/GenericInputForm/AbiFunctionName.tsx  |  4 ++--
 packages/ui/src/GenericInputForm/AbiParameter.tsx     |  4 ++--
 .../ui/src/GenericInputForm/useGenericInputForm.ts    |  2 +-
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 153731ae8..00d66ad6d 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -55,6 +55,10 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     form.setFieldValue("specificationId", "");
                     form.setFieldValue("abiFunctionName", "");
                     form.setFieldValue("abiFunctionParams", []);
+                    form.setFieldValue("humanAbi", "");
+                    form.setFieldValue("abiParam", "");
+                    form.setFieldValue("savedAbiParam", "");
+                    form.setFieldValue("specificationMode", "json_abi");
                 }}
             />
 
@@ -78,6 +82,13 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                                 "specificationMode",
                                 nextValue as SpecificationMode,
                             );
+
+                            form.setFieldValue("specificationId", "");
+                            form.setFieldValue("abiFunctionName", "");
+                            form.setFieldValue("abiFunctionParams", []);
+                            form.setFieldValue("humanAbi", "");
+                            form.setFieldValue("abiParam", "");
+                            form.setFieldValue("savedAbiParam", "");
                         }}
                     />
 
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 87d37c777..885dc4ec8 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -6,7 +6,7 @@ import { FunctionSignature } from "./FunctionSignature";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
-    const { abiFunction, selectedSpecification, specificationMode } =
+    const { abiMethod, abiFunction, selectedSpecification, specificationMode } =
         form.getTransformedValues();
     const combobox = useCombobox({
         onDropdownClose: () => combobox.resetSelectedOption(),
@@ -41,7 +41,7 @@ export const AbiFunctionName = () => {
 
     return (
         <>
-            {specificationMode === "json_abi" &&
+            {(abiMethod === "existing" || specificationMode === "json_abi") &&
             selectedSpecification &&
             specificationFunctions.length > 0 ? (
                 <Combobox
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index b166fce5b..2882433c9 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -1,6 +1,6 @@
 import { useFormContext } from "./context";
-import { Button, TextInput, Transition, Paper } from "@mantine/core";
-import { useCallback, useEffect, useState } from "react";
+import { Button, TextInput } from "@mantine/core";
+import { useCallback } from "react";
 import { AbiFunction } from "viem";
 import { generateAbiParamFormSpecification } from "./utils";
 
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 29fa6fddc..cbc69f886 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -18,7 +18,7 @@ import {
 
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
     return useForm({
-        validateInputOnChange: true,
+        validateInputOnBlur: true,
         initialValues: {
             mode: "hex",
             application: "",

From adcf8337b65e34fc98ea6f296cfdcaa2cde7a36f Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Sun, 13 Oct 2024 22:01:00 +0300
Subject: [PATCH 16/40] chore(apps/web): Refactoring

---
 .../ui/src/GenericInputForm/AbiFields.tsx     |  16 +-
 .../src/GenericInputForm/AbiFunctionName.tsx  | 138 +++++++++++-------
 .../ui/src/GenericInputForm/AbiParameter.tsx  |   5 +
 packages/ui/src/GenericInputForm/index.tsx    |   1 -
 packages/ui/src/GenericInputForm/utils.ts     |   7 +-
 5 files changed, 96 insertions(+), 71 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 00d66ad6d..03a88c195 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -1,6 +1,5 @@
 import { useFormContext } from "./context";
 import {
-    Button,
     Flex,
     Group,
     SegmentedControl,
@@ -8,9 +7,7 @@ import {
     Stack,
     Text,
     Textarea,
-    TextInput,
     Tooltip,
-    useCombobox,
 } from "@mantine/core";
 import { FC } from "react";
 import { FormAbiMethod, FormSpecification, SpecificationMode } from "./types";
@@ -30,16 +27,12 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
         value: s.id,
         label: s.name,
     }));
-    const combobox = useCombobox({
-        onDropdownClose: () => combobox.resetSelectedOption(),
-    });
 
     return (
-        <Stack>
+        <>
             <Select
                 label="ABI method"
                 description="Select how to attach an ABI"
-                mb={16}
                 allowDeselect={false}
                 withAsterisk
                 data={[
@@ -63,7 +56,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
             />
 
             {abiMethod === "new" ? (
-                <Stack>
+                <>
                     <SegmentedControl
                         aria-label="Specification Mode"
                         data={[
@@ -118,12 +111,13 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             onChange={(event) => {
                                 const nextValue = event.target.value;
                                 form.setFieldValue("humanAbi", nextValue);
+                                form.validateField("humanAbi");
                             }}
                         />
                     ) : (
                         <AbiParameter />
                     )}
-                </Stack>
+                </>
             ) : (
                 <Select
                     label="Specifications"
@@ -146,6 +140,6 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
 
             <AbiFunctionName />
             <AbiFunctionParams />
-        </Stack>
+        </>
     );
 };
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 885dc4ec8..17b6b846c 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -1,8 +1,16 @@
 import { useFormContext } from "./context";
-import { Combobox, Input, InputBase, useCombobox } from "@mantine/core";
+import {
+    Alert,
+    Combobox,
+    Input,
+    InputBase,
+    Text,
+    useCombobox,
+} from "@mantine/core";
 import { AbiFunction } from "viem";
 import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
+import { TbAlertCircle } from "react-icons/tb";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
@@ -42,60 +50,84 @@ export const AbiFunctionName = () => {
     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")}
-                            onClick={() => combobox.toggleDropdown()}
-                        >
-                            {abiFunction ? (
-                                <FunctionSignature abiFunction={abiFunction} />
-                            ) : (
-                                <Input.Placeholder>
-                                    Select function
-                                </Input.Placeholder>
-                            )}
-                        </InputBase>
-                    </Combobox.Target>
+                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",
+                                        )}
+                                        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(", ");
+                                <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>
-            ) : null}
+                                                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>
+                        )}
+                    </>
+                )}
         </>
     );
 };
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index 2882433c9..338c56fb2 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -47,6 +47,11 @@ export const AbiParameter = () => {
                 </Button>
             }
             {...form.getInputProps("abiParam")}
+            onChange={(event) => {
+                const nextValue = event.target.value;
+                form.setFieldValue("abiParam", nextValue);
+                form.validateField("abiParam");
+            }}
         />
     );
 };
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 5b2656698..3d4033d2f 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -160,7 +160,6 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                             <Textarea
                                 label="String input"
                                 description="String input for the application"
-                                mb={16}
                                 {...form.getInputProps("stringInput")}
                                 onChange={(event) => {
                                     const nextValue = event.target.value;
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index ef768f9ad..bb625462e 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,15 +1,10 @@
 import {
-    AbiFunction,
     encodeAbiParameters,
     getAddress,
     parseAbi,
     parseAbiParameters,
 } from "viem";
-import {
-    AbiValueParameter,
-    FormSpecification,
-    SpecificationMode,
-} from "./types";
+import { AbiValueParameter, FormSpecification } from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 

From 051e01d521ffc9aaa28a04408e99ea531aa38470 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 14 Oct 2024 13:19:09 +0300
Subject: [PATCH 17/40] test(apps/web): Add unit tests for GenericInput form

---
 .../ui/src/GenericInputForm/AbiFields.tsx     |    4 +-
 .../ui/src/GenericInputForm/AbiParameter.tsx  |    1 +
 packages/ui/src/GenericInputForm/index.tsx    |    3 +
 .../ui/src/GenericInputForm/initialValues.ts  |   16 +
 .../GenericInputForm/useGenericInputForm.ts   |   16 +-
 .../ui/src/GenericInputForm/validations.ts    |    4 +-
 .../ui/test/GenericInputForm/index.test.tsx   | 1120 +++++++++++++++++
 packages/ui/test/GenericInputForm/mocks.ts    |   30 +
 packages/ui/test/RawInputForm.test.tsx        |  510 --------
 9 files changed, 1176 insertions(+), 528 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/initialValues.ts
 create mode 100644 packages/ui/test/GenericInputForm/index.test.tsx
 create mode 100644 packages/ui/test/GenericInputForm/mocks.ts
 delete mode 100644 packages/ui/test/RawInputForm.test.tsx

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 03a88c195..0fbcb52b9 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -4,12 +4,11 @@ import {
     Group,
     SegmentedControl,
     Select,
-    Stack,
     Text,
     Textarea,
     Tooltip,
 } from "@mantine/core";
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import { FormAbiMethod, FormSpecification, SpecificationMode } from "./types";
 import { TbHelp } from "react-icons/tb";
 import { AbiFunctionName } from "./AbiFunctionName";
@@ -33,6 +32,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
             <Select
                 label="ABI method"
                 description="Select how to attach an ABI"
+                data-testid="abi-method-select"
                 allowDeselect={false}
                 withAsterisk
                 data={[
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index 338c56fb2..d1e730d82 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -46,6 +46,7 @@ export const AbiParameter = () => {
                     Save
                 </Button>
             }
+            data-testid="abi-parameter-input"
             {...form.getInputProps("abiParam")}
             onChange={(event) => {
                 const nextValue = event.target.value;
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 3d4033d2f..8fd5ec351 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -112,6 +112,7 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                         placeholder="0x"
                         data={applications}
                         withAsterisk
+                        data-testid="application-autocomplete"
                         rightSection={
                             (prepare.isLoading || isLoadingApplications) && (
                                 <Loader size="xs" />
@@ -153,6 +154,7 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                             label="Hex input"
                             description="Hex input for the application"
                             withAsterisk
+                            data-testid="hex-textarea"
                             {...form.getInputProps("rawInput")}
                         />
                     ) : mode === "string" ? (
@@ -209,6 +211,7 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
                             disabled={!canSubmit}
                             leftSection={<TbCheck />}
                             loading={loading}
+                            data-testid="generic-input-submit-button"
                             onClick={() =>
                                 execute.writeContract(prepare.data!.request)
                             }
diff --git a/packages/ui/src/GenericInputForm/initialValues.ts b/packages/ui/src/GenericInputForm/initialValues.ts
new file mode 100644
index 000000000..bd7b6a11e
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/initialValues.ts
@@ -0,0 +1,16 @@
+import { FormValues } from "./types";
+
+export const initialValues: FormValues = {
+    mode: "hex",
+    application: "",
+    rawInput: "0x",
+    stringInput: "",
+    abiMethod: "existing",
+    specificationMode: "json_abi",
+    humanAbi: "",
+    abiParam: "",
+    savedAbiParam: "",
+    specificationId: "",
+    abiFunctionName: "",
+    abiFunctionParams: [],
+};
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index cbc69f886..81374c008 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -15,24 +15,12 @@ import {
     generateAbiParamFormSpecification,
     generateHumanAbiFormSpecification,
 } from "./utils";
+import { initialValues } from "./initialValues";
 
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
     return useForm({
         validateInputOnBlur: true,
-        initialValues: {
-            mode: "hex",
-            application: "",
-            rawInput: "0x",
-            stringInput: "",
-            abiMethod: "existing",
-            specificationMode: "json_abi",
-            humanAbi: "",
-            abiParam: "",
-            savedAbiParam: "",
-            specificationId: "",
-            abiFunctionName: "",
-            abiFunctionParams: [],
-        },
+        initialValues,
         validate: {
             application: validateApplication,
             rawInput: validateHexInput,
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 143668f91..0a9170a57 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -12,7 +12,7 @@ export const validateHexInput = (value: string) =>
 export const validateAbiMethod = (value: string, values: FormValues) =>
     values.mode !== "abi" || value === "new" || value === "existing"
         ? null
-        : "Invalid abi method";
+        : "Invalid ABI method";
 
 export const validateSpecificationId = (value: string, values: FormValues) =>
     values.mode !== "abi" || values.abiMethod === "new" || value !== ""
@@ -24,7 +24,7 @@ export const validateAbiFunctionName = (value: string, values: FormValues) =>
     values.specificationMode !== "json_abi" ||
     value !== ""
         ? null
-        : "Invalid abi function";
+        : "Invalid ABI function";
 
 export const validateAbiFunctionParamValue = (
     value: string,
diff --git a/packages/ui/test/GenericInputForm/index.test.tsx b/packages/ui/test/GenericInputForm/index.test.tsx
new file mode 100644
index 000000000..e1db74f66
--- /dev/null
+++ b/packages/ui/test/GenericInputForm/index.test.tsx
@@ -0,0 +1,1120 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterAll, describe, it } from "vitest";
+import { GenericInputForm } from "../../src/GenericInputForm";
+import withMantineTheme from "../utils/WithMantineTheme";
+import { AbiFunction, getAddress, stringToHex } from "viem";
+import { abiParam, formSpecification, functionSignature } from "./mocks";
+
+const Component = withMantineTheme(GenericInputForm);
+
+const applications = [
+    "0x60a7048c3136293071605a4eaffef49923e981cc",
+    "0x70ac08179605af2d9e75782b8decdd3c22aa4d0c",
+    "0x71ab24ee3ddb97dc01a161edf64c8d51102b0cd3",
+];
+
+const specifications = [formSpecification];
+
+const defaultProps = {
+    applications,
+    specifications,
+    isLoadingApplications: false,
+    onSearchApplications: () => undefined,
+    onSuccess: () => undefined,
+};
+
+vi.mock("../../src/GenericInputForm/initialValues");
+
+vi.mock("@cartesi/rollups-wagmi", async () => {
+    return {
+        useSimulateInputBoxAddInput: () => ({
+            data: {
+                request: {},
+            },
+            config: {},
+        }),
+        useWriteInputBoxAddInput: () => ({
+            wait: vi.fn(),
+            reset: vi.fn(),
+            execute: vi.fn(),
+        }),
+    };
+});
+
+vi.mock("wagmi", async () => {
+    return {
+        useWaitForTransactionReceipt: () => ({}),
+    };
+});
+
+vi.mock("viem", async () => {
+    const actual = await vi.importActual("viem");
+    return {
+        ...(actual as any),
+        getAddress: (address: string) => address,
+    };
+});
+
+vi.mock("@mantine/form", async () => {
+    const actual = await vi.importActual("@mantine/form");
+    return {
+        ...(actual as any),
+        useForm: (actual as any).useForm,
+    };
+});
+
+describe("GenericInputForm", () => {
+    // beforeAll(() => {
+    //     vi.spyOn(initialValues, "initialValues", "get").mockReturnValue({
+    //         ...initialValues.initialValues,
+    //     });
+    // });
+    afterAll(() => {
+        vi.clearAllMocks();
+    });
+
+    describe("Hex textarea", () => {
+        it("should display correct label for raw input", () => {
+            render(<Component {...defaultProps} />);
+
+            expect(screen.getByText("Hex input")).toBeInTheDocument();
+        });
+
+        it("should display correct description for raw input", () => {
+            render(<Component {...defaultProps} />);
+
+            expect(
+                screen.getByText("Hex input for the application"),
+            ).toBeInTheDocument();
+        });
+
+        it("should display error when value is not hex", async () => {
+            render(<Component {...defaultProps} />);
+            const textarea = screen.getByTestId(
+                "hex-textarea",
+            ) as HTMLTextAreaElement;
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "",
+                },
+            });
+
+            fireEvent.blur(textarea);
+
+            expect(textarea.getAttribute("aria-invalid")).toBe("true");
+            expect(screen.getByText("Invalid hex value")).toBeInTheDocument();
+        });
+
+        it("should not display error when value is hex", () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const textarea = container.querySelector(
+                "textarea",
+            ) as HTMLTextAreaElement;
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "0x123123",
+                },
+            });
+
+            fireEvent.blur(textarea);
+
+            expect(textarea.getAttribute("aria-invalid")).toBe("false");
+            expect(() => screen.getByText("Invalid hex string")).toThrow(
+                "Unable to find an element",
+            );
+        });
+
+        it("should correctly format hex data", async () => {
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            const mockedHook = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                loading: false,
+                error: null,
+            });
+            rollupsWagmi.useSimulateInputBoxAddInput = vi
+                .fn()
+                .mockImplementation(mockedHook);
+
+            const { container } = render(<Component {...defaultProps} />);
+            const execLayerDataInput = container.querySelector(
+                "textarea",
+            ) as HTMLTextAreaElement;
+
+            const hexValue = "0x123123";
+            fireEvent.change(execLayerDataInput, {
+                target: {
+                    value: hexValue,
+                },
+            });
+
+            expect(mockedHook).toHaveBeenLastCalledWith({
+                args: ["0x0000000000000000000000000000000000000000", hexValue],
+                query: {
+                    enabled: false,
+                },
+                value: undefined,
+            });
+        });
+
+        it("should display format tabs", () => {
+            render(<Component {...defaultProps} />);
+
+            expect(screen.getByText("Hex")).toBeInTheDocument();
+            expect(screen.getByText("String to Hex")).toBeInTheDocument();
+            expect(screen.getByText("ABI to Hex")).toBeInTheDocument();
+        });
+
+        it('should display string and hex textareas when "String to Hex" format is selected', () => {
+            render(<Component {...defaultProps} />);
+
+            const button = screen.getByText("String to Hex");
+            fireEvent.click(button);
+
+            expect(screen.getByText("String input")).toBeInTheDocument();
+            expect(
+                screen.getByText("String input for the application"),
+            ).toBeInTheDocument();
+            expect(screen.getByText("Hex value")).toBeInTheDocument();
+            expect(
+                screen.getByText("Encoded hex value for the application"),
+            ).toBeInTheDocument();
+        });
+
+        it("should correctly encode string to hex", () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const button = screen.getByText("String to Hex");
+            fireEvent.click(button);
+
+            const stringValue = '{"name": "James", "action":"create-game"}';
+            const textareas = container.querySelectorAll("textarea");
+            const stringTextarea = textareas[0];
+            const hexTextarea = textareas[1];
+
+            fireEvent.change(stringTextarea, {
+                target: {
+                    value: stringValue,
+                },
+            });
+
+            expect(hexTextarea.value).toBe(stringToHex(stringValue));
+        });
+    });
+
+    describe("Send button", () => {
+        it("should be disabled when raw input is not hex", () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const textarea = container.querySelector(
+                "textarea",
+            ) as HTMLTextAreaElement;
+            const button = container.querySelector(
+                "button",
+            ) as HTMLButtonElement;
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "",
+                },
+            });
+
+            expect(button.hasAttribute("disabled")).toBe(true);
+        });
+
+        it("should invoke write function when send button is clicked", async () => {
+            const selectedApplication = applications[1];
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            const { container } = render(<Component {...defaultProps} />);
+            const button = container.querySelector(
+                "button",
+            ) as HTMLButtonElement;
+
+            const input = container.querySelector("input") as HTMLInputElement;
+            input.setAttribute("value", selectedApplication);
+
+            fireEvent.change(input, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            fireEvent.click(button);
+            expect(button.hasAttribute("disabled")).toBe(false);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should invoke onSearchApplications function after successful submission", async () => {
+            const wagmi = await import("wagmi");
+            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
+                ...wagmi.useWaitForTransactionReceipt,
+                error: null,
+                isSuccess: true,
+            });
+
+            const onSearchApplicationsMock = vi.fn();
+            render(
+                <Component
+                    {...defaultProps}
+                    onSearchApplications={onSearchApplicationsMock}
+                />,
+            );
+
+            expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
+        });
+
+        it('should enable "useSimulateInputBoxAddInput" only when the form is valid', async () => {
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            const mockedHook = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                loading: false,
+                error: null,
+            });
+            rollupsWagmi.useSimulateInputBoxAddInput = vi
+                .fn()
+                .mockImplementation(mockedHook);
+
+            const { container } = render(<Component {...defaultProps} />);
+            const input = container.querySelector("input") as HTMLInputElement;
+            const textarea = container.querySelector(
+                "textarea",
+            ) as HTMLTextAreaElement;
+
+            const [application] = applications;
+            fireEvent.change(input, {
+                target: {
+                    value: application,
+                },
+            });
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "",
+                },
+            });
+
+            expect(mockedHook).toHaveBeenLastCalledWith({
+                args: [getAddress(application), ""],
+                query: {
+                    enabled: false,
+                },
+            });
+
+            fireEvent.change(input, {
+                target: {
+                    value: "",
+                },
+            });
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "0x",
+                },
+            });
+
+            expect(mockedHook).toHaveBeenLastCalledWith({
+                args: ["0x0000000000000000000000000000000000000000", "0x"],
+                query: {
+                    enabled: false,
+                },
+            });
+
+            fireEvent.change(input, {
+                target: {
+                    value: application,
+                },
+            });
+
+            fireEvent.change(textarea, {
+                target: {
+                    value: "0x",
+                },
+            });
+
+            expect(mockedHook).toHaveBeenLastCalledWith({
+                args: [getAddress(application), "0x"],
+                query: {
+                    enabled: true,
+                },
+            });
+        });
+
+        it("should invoke onSuccess callback after successful deposit", async () => {
+            const wagmi = await import("wagmi");
+            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
+                ...wagmi.useWaitForTransactionReceipt,
+                error: null,
+                isSuccess: true,
+            });
+
+            const onSuccessMock = vi.fn();
+            render(<Component {...defaultProps} onSuccess={onSuccessMock} />);
+
+            expect(onSuccessMock).toHaveBeenCalled();
+        });
+    });
+
+    describe("ApplicationAutocomplete", () => {
+        it("should display correct label for applications input", () => {
+            render(<Component {...defaultProps} />);
+
+            expect(screen.getByText("Application")).toBeInTheDocument();
+        });
+
+        it("should display correct description for applications input", () => {
+            render(<Component {...defaultProps} />);
+
+            expect(
+                screen.getByText("The application smart contract address"),
+            ).toBeInTheDocument();
+        });
+
+        it("should display correct placeholder", () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const input = container.querySelector("input");
+
+            expect(input?.getAttribute("placeholder")).toBe("0x");
+        });
+
+        it("should display alert for unemployed application", async () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const input = container.querySelector("input") as HTMLInputElement;
+
+            fireEvent.change(input, {
+                target: {
+                    value: "0x60a7048c3136293071605a4eaffef49923e981fe",
+                },
+            });
+
+            await waitFor(
+                () =>
+                    expect(
+                        screen.getByText("This is an undeployed application."),
+                    ).toBeInTheDocument(),
+                {
+                    timeout: 1100,
+                },
+            );
+        });
+
+        it("should display error when application is invalid", () => {
+            const { container } = render(<Component {...defaultProps} />);
+            const input = container.querySelector("input") as HTMLInputElement;
+
+            fireEvent.change(input, {
+                target: {
+                    value: "0x60a7048c3136293071605a4eaffef49923e981ccffffffff",
+                },
+            });
+
+            fireEvent.blur(input);
+
+            expect(input.getAttribute("aria-invalid")).toBe("true");
+            expect(screen.getByText("Invalid application")).toBeInTheDocument();
+        });
+
+        it("should correctly format address", async () => {
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            const mockedHook = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                loading: false,
+                error: null,
+            });
+            rollupsWagmi.useSimulateInputBoxAddInput = vi
+                .fn()
+                .mockImplementation(mockedHook);
+
+            const { container } = render(<Component {...defaultProps} />);
+            const input = container.querySelector("input") as HTMLInputElement;
+
+            const [application] = applications;
+            fireEvent.change(input, {
+                target: {
+                    value: application,
+                },
+            });
+
+            expect(mockedHook).toHaveBeenLastCalledWith({
+                args: [getAddress(application), "0x"],
+                value: undefined,
+                query: {
+                    enabled: true,
+                },
+            });
+        });
+    });
+
+    describe("Alerts", () => {
+        it("should display alert for successful transaction", async () => {
+            const wagmi = await import("wagmi");
+            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
+                ...wagmi.useWaitForTransactionReceipt,
+                error: null,
+                status: "success",
+                isSuccess: true,
+            });
+
+            render(<Component {...defaultProps} />);
+            expect(
+                screen.getByText("Raw input sent successfully!"),
+            ).toBeInTheDocument();
+        });
+
+        it("should display alert for failed transaction", async () => {
+            const wagmi = await import("wagmi");
+            const message = "User declined the transaction";
+            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
+                ...wagmi.useWaitForTransactionReceipt,
+                error: {
+                    message,
+                },
+                status: "error",
+                isSuccess: false,
+            });
+
+            render(<Component {...defaultProps} />);
+            expect(screen.getByText(message)).toBeInTheDocument();
+        });
+    });
+
+    describe("ABI encoding", () => {
+        it("should send ABI encoded data from existing JSON_ABI specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            expect(
+                screen.getByText("ABI from an existing JSON_ABI specification"),
+            ).toBeInTheDocument();
+
+            const specificationsInput = screen.getByPlaceholderText(
+                "Select specification",
+            );
+            fireEvent.click(specificationsInput);
+
+            const specificationOption = screen.getByText(
+                formSpecification.name,
+            );
+            expect(specificationOption).toBeInTheDocument();
+            fireEvent.click(specificationOption);
+
+            const selectFunctionInput = screen.getByText("Select function");
+            expect(selectFunctionInput).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+
+            const abiFunction = formSpecification.abi[0] as AbiFunction;
+            const functionNameOption = screen.getByText(abiFunction.name);
+
+            expect(functionNameOption).toBeInTheDocument();
+            fireEvent.click(functionNameOption);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should validate form when attempting to submit invalid ABI encoded data from existing JSON_ABI specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            expect(
+                screen.getByText("ABI from an existing JSON_ABI specification"),
+            ).toBeInTheDocument();
+
+            const specificationsInput = screen.getByPlaceholderText(
+                "Select specification",
+            );
+            fireEvent.click(specificationsInput);
+            fireEvent.blur(specificationsInput);
+            expect(
+                screen.getByText("Invalid specification"),
+            ).toBeInTheDocument();
+
+            fireEvent.click(specificationsInput);
+            const specificationOption = screen.getByText(
+                formSpecification.name,
+            );
+            expect(specificationOption).toBeInTheDocument();
+            fireEvent.click(specificationOption);
+
+            const selectFunctionInput = screen.getByText("Select function");
+            expect(selectFunctionInput).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+            fireEvent.blur(selectFunctionInput);
+            expect(
+                screen.getByText("Invalid ABI function"),
+            ).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+
+            const abiFunction = formSpecification.abi[0] as AbiFunction;
+            const functionNameOption = screen.getByText(abiFunction.name);
+            expect(functionNameOption).toBeInTheDocument();
+            fireEvent.click(functionNameOption);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            fireEvent.change(intInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(intInput);
+            expect(
+                screen.getByText("Invalid uint256 value"),
+            ).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+            fireEvent.change(boolInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(boolInput);
+            expect(screen.getByText("Invalid bool value")).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should send ABI encoded data from new JSON_ABI specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const abiSelect = screen.getByTestId("abi-method-select");
+            fireEvent.click(abiSelect);
+
+            const newAbiOption = screen.getByText("New ABI");
+            expect(newAbiOption).toBeInTheDocument();
+            fireEvent.click(newAbiOption);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            const humanAbiTextarea = screen.getByTestId("json-abi-textarea");
+            fireEvent.change(humanAbiTextarea, {
+                target: {
+                    value: functionSignature,
+                },
+            });
+
+            const selectFunctionInput = screen.getByText("Select function");
+            expect(selectFunctionInput).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+
+            const abiFunction = formSpecification.abi[0] as AbiFunction;
+            const functionNameOption = screen.getByText(abiFunction.name);
+
+            expect(functionNameOption).toBeInTheDocument();
+            fireEvent.click(functionNameOption);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should validate form when attempting to submit invalid ABI encoded data from new JSON_ABI specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const abiSelect = screen.getByTestId("abi-method-select");
+            fireEvent.click(abiSelect);
+
+            const newAbiOption = screen.getByText("New ABI");
+            expect(newAbiOption).toBeInTheDocument();
+            fireEvent.click(newAbiOption);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            const humanAbiTextarea = screen.getByTestId("json-abi-textarea");
+            fireEvent.change(humanAbiTextarea, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            expect(
+                screen.getByText(
+                    "Unknown signature. Details: invalid-value Version: abitype@1.0.0",
+                ),
+            ).toBeInTheDocument();
+
+            fireEvent.change(humanAbiTextarea, {
+                target: {
+                    value: functionSignature,
+                },
+            });
+
+            const selectFunctionInput = screen.getByText("Select function");
+            expect(selectFunctionInput).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+            fireEvent.blur(selectFunctionInput);
+            expect(
+                screen.getByText("Invalid ABI function"),
+            ).toBeInTheDocument();
+            fireEvent.click(selectFunctionInput);
+
+            const abiFunction = formSpecification.abi[0] as AbiFunction;
+            const functionNameOption = screen.getByText(abiFunction.name);
+            expect(functionNameOption).toBeInTheDocument();
+            fireEvent.click(functionNameOption);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            fireEvent.change(intInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(intInput);
+            expect(
+                screen.getByText("Invalid uint256 value"),
+            ).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+            fireEvent.change(boolInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(boolInput);
+            expect(screen.getByText("Invalid bool value")).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should send ABI encoded data from new ABI params specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const abiSelect = screen.getByTestId("abi-method-select");
+            fireEvent.click(abiSelect);
+
+            const newAbiOption = screen.getByText("New ABI");
+            expect(newAbiOption).toBeInTheDocument();
+            fireEvent.click(newAbiOption);
+
+            const abiParametersButton = screen.getByText("ABI Parameters");
+            expect(abiParametersButton).toBeInTheDocument();
+            fireEvent.click(abiParametersButton);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            const abiParameterInput = screen.getByTestId("abi-parameter-input");
+            fireEvent.change(abiParameterInput, {
+                target: {
+                    value: abiParam,
+                },
+            });
+
+            const addButton = screen.getByTestId("abi-parameter-add-button");
+            fireEvent.click(addButton);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+
+        it("should validate form when attempting to submit invalid ABI encoded data from new ABI params specification", async () => {
+            const selectedApplication = applications[0] as string;
+            const mockedWrite = vi.fn();
+            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
+            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useSimulateInputBoxAddInput,
+                data: {
+                    request: {},
+                },
+                error: null,
+            });
+            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
+                ...rollupsWagmi.useWriteInputBoxAddInput,
+                writeContract: mockedWrite,
+                execute: vi.fn(),
+                reset: vi.fn(),
+            });
+
+            render(<Component {...defaultProps} />);
+            const button = screen.getByText("ABI to Hex");
+            fireEvent.click(button);
+
+            const abiSelect = screen.getByTestId("abi-method-select");
+            fireEvent.click(abiSelect);
+
+            const newAbiOption = screen.getByText("New ABI");
+            expect(newAbiOption).toBeInTheDocument();
+            fireEvent.click(newAbiOption);
+
+            const abiParametersButton = screen.getByText("ABI Parameters");
+            expect(abiParametersButton).toBeInTheDocument();
+            fireEvent.click(abiParametersButton);
+
+            const applicationAutocomplete = screen.getByTestId(
+                "application-autocomplete",
+            );
+
+            fireEvent.change(applicationAutocomplete, {
+                target: {
+                    value: selectedApplication,
+                },
+            });
+
+            const abiParameterInput = screen.getByTestId("abi-parameter-input");
+            fireEvent.change(abiParameterInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            expect(
+                screen.getByText(
+                    "Invalid ABI parameter. Details: invalid-value Version: abitype@1.0.0",
+                ),
+            ).toBeInTheDocument();
+            fireEvent.change(abiParameterInput, {
+                target: {
+                    value: abiParam,
+                },
+            });
+
+            const addButton = screen.getByTestId("abi-parameter-add-button");
+            fireEvent.click(addButton);
+
+            const intInput = screen.getByPlaceholderText("Enter uint256 value");
+            expect(intInput).toBeInTheDocument();
+
+            fireEvent.change(intInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(intInput);
+            expect(
+                screen.getByText("Invalid uint256 value"),
+            ).toBeInTheDocument();
+
+            const intValue = "150";
+            fireEvent.change(intInput, {
+                target: {
+                    value: intValue,
+                },
+            });
+
+            const boolInput = screen.getByPlaceholderText("Enter bool value");
+            expect(boolInput).toBeInTheDocument();
+            fireEvent.change(boolInput, {
+                target: {
+                    value: "invalid-value",
+                },
+            });
+            fireEvent.blur(boolInput);
+            expect(screen.getByText("Invalid bool value")).toBeInTheDocument();
+
+            const boolValue = "false";
+            fireEvent.change(boolInput, {
+                target: {
+                    value: boolValue,
+                },
+            });
+
+            const submitButton = screen.getByTestId(
+                "generic-input-submit-button",
+            );
+
+            expect(submitButton.hasAttribute("disabled")).toBe(false);
+            fireEvent.click(submitButton);
+            expect(mockedWrite).toHaveBeenCalled();
+        });
+    });
+
+    describe("Form", () => {
+        it("should reset form after successful submission", async () => {
+            const mantineContext = await import(
+                "../../src/GenericInputForm/context"
+            );
+            const [application] = applications;
+            const resetMock = vi.fn();
+
+            vi.spyOn(mantineContext, "useForm").mockReturnValue({
+                getTransformedValues: () => ({
+                    address: getAddress(application),
+                    rawInput: "0x",
+                }),
+                getInputProps: () => ({
+                    value: "",
+                }),
+                isValid: () => true,
+                errors: {},
+                setFieldValue: () => "",
+                reset: resetMock,
+            } as any);
+
+            const wagmi = await import("wagmi");
+            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
+                ...wagmi.useWaitForTransactionReceipt,
+                error: null,
+                isSuccess: true,
+            });
+
+            render(<Component {...defaultProps} />);
+            expect(resetMock).toHaveBeenCalled();
+        });
+    });
+});
diff --git a/packages/ui/test/GenericInputForm/mocks.ts b/packages/ui/test/GenericInputForm/mocks.ts
new file mode 100644
index 000000000..e130898bb
--- /dev/null
+++ b/packages/ui/test/GenericInputForm/mocks.ts
@@ -0,0 +1,30 @@
+import { FormSpecification } from "../../src/GenericInputForm/types";
+
+export const formSpecificationAbiInputs = [
+    {
+        type: "uint256",
+        name: "amount",
+    },
+    {
+        type: "bool",
+        name: "success",
+    },
+];
+
+export const formSpecificationAbi = {
+    inputs: formSpecificationAbiInputs,
+    name: "create",
+    outputs: [],
+    stateMutability: "view",
+    type: "function",
+};
+
+export const formSpecification = {
+    id: "1",
+    name: "Generated specification",
+    abi: [formSpecificationAbi],
+} as FormSpecification;
+
+export const functionSignature = `function ${formSpecificationAbi.name}(${formSpecificationAbiInputs[0].type} ${formSpecificationAbiInputs[0].name}, ${formSpecificationAbiInputs[1].type} ${formSpecificationAbiInputs[1].name}) view returns (uint256)`;
+
+export const abiParam = `${formSpecificationAbiInputs[0].type} ${formSpecificationAbiInputs[0].name}, ${formSpecificationAbiInputs[1].type} ${formSpecificationAbiInputs[1].name}`;
diff --git a/packages/ui/test/RawInputForm.test.tsx b/packages/ui/test/RawInputForm.test.tsx
deleted file mode 100644
index eb82ed121..000000000
--- a/packages/ui/test/RawInputForm.test.tsx
+++ /dev/null
@@ -1,510 +0,0 @@
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { afterAll, describe, it } from "vitest";
-import { RawInputForm } from "../src/RawInputForm";
-import withMantineTheme from "./utils/WithMantineTheme";
-import { getAddress, stringToHex } from "viem";
-
-const Component = withMantineTheme(RawInputForm);
-
-const applications = [
-    "0x60a7048c3136293071605a4eaffef49923e981cc",
-    "0x70ac08179605af2d9e75782b8decdd3c22aa4d0c",
-    "0x71ab24ee3ddb97dc01a161edf64c8d51102b0cd3",
-];
-
-const defaultProps = {
-    applications,
-    isLoadingApplications: false,
-    onSearchApplications: () => undefined,
-    onSuccess: () => undefined,
-};
-
-vi.mock("@cartesi/rollups-wagmi", async () => {
-    return {
-        useSimulateInputBoxAddInput: () => ({
-            data: {
-                request: {},
-            },
-            config: {},
-        }),
-        useWriteInputBoxAddInput: () => ({
-            wait: vi.fn(),
-            reset: vi.fn(),
-            execute: vi.fn(),
-        }),
-    };
-});
-
-vi.mock("wagmi", async () => {
-    return {
-        useWaitForTransactionReceipt: () => ({}),
-    };
-});
-
-vi.mock("viem", async () => {
-    const actual = await vi.importActual("viem");
-    return {
-        ...(actual as any),
-        getAddress: (address: string) => address,
-    };
-});
-
-vi.mock("@mantine/form", async () => {
-    const actual = await vi.importActual("@mantine/form");
-    return {
-        ...(actual as any),
-        useForm: (actual as any).useForm,
-    };
-});
-
-describe("Rollups RawInputForm", () => {
-    afterAll(() => {
-        vi.restoreAllMocks();
-    });
-
-    describe("Raw input textarea", () => {
-        it("should display correct label for raw input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(screen.getByText("Raw input")).toBeInTheDocument();
-        });
-
-        it("should display correct description for raw input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(
-                screen.getByText("Raw input for the application"),
-            ).toBeInTheDocument();
-        });
-
-        it("should display error when value is not hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "",
-                },
-            });
-
-            fireEvent.blur(textarea);
-
-            expect(textarea.getAttribute("aria-invalid")).toBe("true");
-            expect(screen.getByText("Invalid hex string")).toBeInTheDocument();
-        });
-
-        it("should not display error when value is hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x123123",
-                },
-            });
-
-            fireEvent.blur(textarea);
-
-            expect(textarea.getAttribute("aria-invalid")).toBe("false");
-            expect(() => screen.getByText("Invalid hex string")).toThrow(
-                "Unable to find an element",
-            );
-        });
-
-        it("should correctly format hex data", async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateInputBoxAddInput,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateInputBoxAddInput = vi
-                .fn()
-                .mockImplementation(mockedHook);
-
-            const { container } = render(<Component {...defaultProps} />);
-            const execLayerDataInput = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-
-            const hexValue = "0x123123";
-            fireEvent.change(execLayerDataInput, {
-                target: {
-                    value: hexValue,
-                },
-            });
-
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x0000000000000000000000000000000000000000", hexValue],
-                query: {
-                    enabled: false,
-                },
-                value: undefined,
-            });
-        });
-
-        it("should display format tabs", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(screen.getByText("Hex")).toBeInTheDocument();
-            expect(screen.getByText("String to Hex")).toBeInTheDocument();
-        });
-
-        it('should display string and hex textareas when "String to Hex" format is selected', () => {
-            render(<Component {...defaultProps} />);
-
-            const button = screen.getByText("String to Hex");
-            fireEvent.click(button);
-
-            expect(screen.getByText("String input")).toBeInTheDocument();
-            expect(
-                screen.getByText("String input for the application"),
-            ).toBeInTheDocument();
-            expect(screen.getByText("Hex value")).toBeInTheDocument();
-            expect(
-                screen.getByText("Encoded hex value for the application"),
-            ).toBeInTheDocument();
-        });
-
-        it("should correctly encode string to hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const button = screen.getByText("String to Hex");
-            fireEvent.click(button);
-
-            const stringValue = '{"name": "James", "action":"create-game"}';
-            const textareas = container.querySelectorAll("textarea");
-            const stringTextarea = textareas[0];
-            const hexTextarea = textareas[1];
-
-            fireEvent.change(stringTextarea, {
-                target: {
-                    value: stringValue,
-                },
-            });
-
-            expect(hexTextarea.value).toBe(stringToHex(stringValue));
-        });
-    });
-
-    describe("Send button", () => {
-        it("should be disabled when raw input is not hex", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-            const button = container.querySelector(
-                "button",
-            ) as HTMLButtonElement;
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "",
-                },
-            });
-
-            expect(button.hasAttribute("disabled")).toBe(true);
-        });
-
-        it("should invoke write function when send button is clicked", async () => {
-            const selectedApplication = applications[1];
-            const mockedWrite = vi.fn();
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            rollupsWagmi.useSimulateInputBoxAddInput = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateInputBoxAddInput,
-                data: {
-                    request: {},
-                },
-                error: null,
-            });
-            rollupsWagmi.useWriteInputBoxAddInput = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useWriteInputBoxAddInput,
-                writeContract: mockedWrite,
-                execute: vi.fn(),
-                reset: vi.fn(),
-            });
-
-            const { container } = render(<Component {...defaultProps} />);
-            const button = container.querySelector(
-                "button",
-            ) as HTMLButtonElement;
-
-            const input = container.querySelector("input") as HTMLInputElement;
-            input.setAttribute("value", selectedApplication);
-
-            fireEvent.change(input, {
-                target: {
-                    value: selectedApplication,
-                },
-            });
-
-            fireEvent.click(button);
-            expect(button.hasAttribute("disabled")).toBe(false);
-            expect(mockedWrite).toHaveBeenCalled();
-        });
-
-        it("should invoke onSearchApplications function after successful submission", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                isSuccess: true,
-            });
-
-            const onSearchApplicationsMock = vi.fn();
-            render(
-                <Component
-                    {...defaultProps}
-                    onSearchApplications={onSearchApplicationsMock}
-                />,
-            );
-
-            expect(onSearchApplicationsMock).toHaveBeenCalledWith("");
-        });
-
-        it('should enable "useSimulateInputBoxAddInput" only when the form is valid', async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateInputBoxAddInput,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateInputBoxAddInput = vi
-                .fn()
-                .mockImplementation(mockedHook);
-
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
-            const textarea = container.querySelector(
-                "textarea",
-            ) as HTMLTextAreaElement;
-
-            const [application] = applications;
-            fireEvent.change(input, {
-                target: {
-                    value: application,
-                },
-            });
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "",
-                },
-            });
-
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: [getAddress(application), ""],
-                query: {
-                    enabled: false,
-                },
-            });
-
-            fireEvent.change(input, {
-                target: {
-                    value: "",
-                },
-            });
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x",
-                },
-            });
-
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: ["0x0000000000000000000000000000000000000000", "0x"],
-                query: {
-                    enabled: false,
-                },
-            });
-
-            fireEvent.change(input, {
-                target: {
-                    value: application,
-                },
-            });
-
-            fireEvent.change(textarea, {
-                target: {
-                    value: "0x",
-                },
-            });
-
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: [getAddress(application), "0x"],
-                query: {
-                    enabled: true,
-                },
-            });
-        });
-
-        it("should invoke onSuccess callback after successful deposit", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                isSuccess: true,
-            });
-
-            const onSuccessMock = vi.fn();
-            render(<Component {...defaultProps} onSuccess={onSuccessMock} />);
-
-            expect(onSuccessMock).toHaveBeenCalled();
-        });
-    });
-
-    describe("ApplicationAutocomplete", () => {
-        it("should display correct label for applications input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(screen.getByText("Application")).toBeInTheDocument();
-        });
-
-        it("should display correct description for applications input", () => {
-            render(<Component {...defaultProps} />);
-
-            expect(
-                screen.getByText("The application smart contract address"),
-            ).toBeInTheDocument();
-        });
-
-        it("should display correct placeholder", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input");
-
-            expect(input?.getAttribute("placeholder")).toBe("0x");
-        });
-
-        it("should display alert for unemployed application", async () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
-
-            fireEvent.change(input, {
-                target: {
-                    value: "0x60a7048c3136293071605a4eaffef49923e981fe",
-                },
-            });
-
-            await waitFor(
-                () =>
-                    expect(
-                        screen.getByText("This is an undeployed application."),
-                    ).toBeInTheDocument(),
-                {
-                    timeout: 1100,
-                },
-            );
-        });
-
-        it("should display error when application is invalid", () => {
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
-
-            fireEvent.change(input, {
-                target: {
-                    value: "0x60a7048c3136293071605a4eaffef49923e981ccffffffff",
-                },
-            });
-
-            fireEvent.blur(input);
-
-            expect(input.getAttribute("aria-invalid")).toBe("true");
-            expect(screen.getByText("Invalid application")).toBeInTheDocument();
-        });
-
-        it("should correctly format address", async () => {
-            const rollupsWagmi = await import("@cartesi/rollups-wagmi");
-            const mockedHook = vi.fn().mockReturnValue({
-                ...rollupsWagmi.useSimulateInputBoxAddInput,
-                loading: false,
-                error: null,
-            });
-            rollupsWagmi.useSimulateInputBoxAddInput = vi
-                .fn()
-                .mockImplementation(mockedHook);
-
-            const { container } = render(<Component {...defaultProps} />);
-            const input = container.querySelector("input") as HTMLInputElement;
-
-            const [application] = applications;
-            fireEvent.change(input, {
-                target: {
-                    value: application,
-                },
-            });
-
-            expect(mockedHook).toHaveBeenLastCalledWith({
-                args: [getAddress(application), "0x"],
-                value: undefined,
-                query: {
-                    enabled: true,
-                },
-            });
-        });
-    });
-
-    describe("Alerts", () => {
-        it("should display alert for successful transaction", async () => {
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                status: "success",
-                isSuccess: true,
-            });
-
-            render(<Component {...defaultProps} />);
-            expect(
-                screen.getByText("Raw input sent successfully!"),
-            ).toBeInTheDocument();
-        });
-
-        it("should display alert for failed transaction", async () => {
-            const wagmi = await import("wagmi");
-            const message = "User declined the transaction";
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: {
-                    message,
-                },
-                status: "error",
-                isSuccess: false,
-            });
-
-            render(<Component {...defaultProps} />);
-            expect(screen.getByText(message)).toBeInTheDocument();
-        });
-    });
-
-    describe("Form", () => {
-        it("should reset form after successful submission", async () => {
-            const mantineForm = await import("@mantine/form");
-            const [application] = applications;
-            const resetMock = vi.fn();
-            vi.spyOn(mantineForm, "useForm").mockReturnValue({
-                getTransformedValues: () => ({
-                    address: getAddress(application),
-                    rawInput: "0x",
-                }),
-                isValid: () => true,
-                getInputProps: () => {},
-                errors: {},
-                setFieldValue: () => "",
-                reset: resetMock,
-            } as any);
-
-            const wagmi = await import("wagmi");
-            wagmi.useWaitForTransactionReceipt = vi.fn().mockReturnValue({
-                ...wagmi.useWaitForTransactionReceipt,
-                error: null,
-                isSuccess: true,
-            });
-
-            render(<Component {...defaultProps} />);
-            expect(resetMock).toHaveBeenCalled();
-        });
-    });
-});

From e28f1dd8b570d59c6974e038f6fac80d2e9072f1 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 14 Oct 2024 13:28:56 +0300
Subject: [PATCH 18/40] chore(apps/web): Cleanup

---
 apps/web/src/components/sendTransaction.tsx | 5 ++---
 packages/ui/src/RawInputForm.tsx            | 6 +-----
 packages/ui/src/index.tsx                   | 6 ++++--
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index 9409ddae8..49cb89bf2 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -5,9 +5,9 @@ import {
     ERC20DepositForm,
     ERC721DepositForm,
     EtherDepositForm,
-    RawInputForm,
     GenericInputForm,
     TransactionFormSuccessData,
+    GenericInputFormSpecification,
 } from "@cartesi/rollups-explorer-ui";
 import { Select } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
@@ -20,7 +20,6 @@ import getConfiguredChainId from "../lib/getConfiguredChain";
 import { BlockExplorerLink } from "./BlockExplorerLink";
 import { useSpecification } from "./specification/hooks/useSpecification";
 import { JSON_ABI } from "./specification/types";
-import { RawInputFormSpecification } from "@cartesi/rollups-explorer-ui/src/RawInputForm";
 
 export type DepositType =
     | "ether"
@@ -164,7 +163,7 @@ const SendTransaction: FC<DepositProps> = ({
                 <GenericInputForm
                     applications={applications}
                     specifications={
-                        specifications as RawInputFormSpecification[]
+                        specifications as GenericInputFormSpecification[]
                     }
                     isLoadingApplications={fetching}
                     onSearchApplications={setApplicationId}
diff --git a/packages/ui/src/RawInputForm.tsx b/packages/ui/src/RawInputForm.tsx
index 79f020263..5fb1799f0 100644
--- a/packages/ui/src/RawInputForm.tsx
+++ b/packages/ui/src/RawInputForm.tsx
@@ -9,8 +9,8 @@ import {
     Collapse,
     Combobox,
     Group,
-    InputBase,
     Input,
+    InputBase,
     Loader,
     SegmentedControl,
     Select,
@@ -143,10 +143,6 @@ export const RawInputForm: FC<RawInputFormProps> = (props) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [wait, onSearchApplications, onSuccess]);
 
-    useEffect(() => {
-        console.log("specifications::", specifications);
-    }, [specifications]);
-
     return (
         <form data-testid="raw-input-form">
             <Stack>
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
index e4cafd63a..aef8bb66d 100644
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -12,9 +12,11 @@ export {
     VoucherContent,
     type ContentType,
 } from "./InputDetails";
-export { RawInputForm } from "./RawInputForm";
 export { Summary } from "./Summary";
 export { SummaryCard } from "./SummaryCard";
 export { TransactionProgress } from "./TransactionProgress";
 export { default as useWatchQueryOnBlockChange } from "./hooks/useWatchQueryOnBlockChange";
-export { GenericInputForm } from "./GenericInputForm";
+export {
+    GenericInputForm,
+    type GenericInputFormSpecification,
+} from "./GenericInputForm";

From e0a6c74ba2351cc6807e40c136850b9009dc7b7d Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 14 Oct 2024 13:31:14 +0300
Subject: [PATCH 19/40] chore(apps/web): Cleanup

---
 apps/web/src/components/sendTransaction.tsx          | 2 +-
 packages/ui/src/GenericInputForm/AbiFunctionName.tsx | 9 +--------
 packages/ui/src/GenericInputForm/types.ts            | 2 +-
 3 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index 49cb89bf2..e151e395a 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -6,8 +6,8 @@ import {
     ERC721DepositForm,
     EtherDepositForm,
     GenericInputForm,
-    TransactionFormSuccessData,
     GenericInputFormSpecification,
+    TransactionFormSuccessData,
 } from "@cartesi/rollups-explorer-ui";
 import { Select } from "@mantine/core";
 import { useDebouncedValue } from "@mantine/hooks";
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 17b6b846c..98f70d8ce 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -1,12 +1,5 @@
 import { useFormContext } from "./context";
-import {
-    Alert,
-    Combobox,
-    Input,
-    InputBase,
-    Text,
-    useCombobox,
-} from "@mantine/core";
+import { Alert, Combobox, Input, InputBase, useCombobox } from "@mantine/core";
 import { AbiFunction } from "viem";
 import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 211bbea0f..017e53cd7 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -1,4 +1,4 @@
-import { Abi, AbiFunction, Address, Hex, AbiParameter } from "viem";
+import { Abi, AbiFunction, AbiParameter, Address, Hex } from "viem";
 
 export type FormMode = "hex" | "string" | "abi";
 

From 555e332ff82909f31988ae978059b6fe5c848105 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 29 Oct 2024 12:34:02 +0200
Subject: [PATCH 20/40] feat(apps/web): Add hex input for raw value

---
 packages/ui/src/GenericInputForm/AbiFields.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index 0fbcb52b9..a3814d888 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -140,6 +140,15 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
 
             <AbiFunctionName />
             <AbiFunctionParams />
+
+            <Textarea
+                label="Hex value"
+                description="Encoded hex value for the application"
+                readOnly
+                value={
+                    form.isValid() ? form.getInputProps("rawInput").value : "0x"
+                }
+            />
         </>
     );
 };

From 5cedeed0dbc24c02ae7f9fd66c196a78a449d30e Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 29 Oct 2024 12:35:04 +0200
Subject: [PATCH 21/40] feat(apps/web): Fix payload generation for json_abi

---
 packages/ui/src/GenericInputForm/index.tsx | 36 ++++++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 8fd5ec351..10b65ee39 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -15,13 +15,20 @@ import {
 } from "@mantine/core";
 import { FC, useCallback, useEffect } from "react";
 import { TbAlertCircle, TbCheck } from "react-icons/tb";
-import { Abi, BaseError, stringToHex } from "viem";
+import {
+    Abi,
+    AbiFunction,
+    BaseError,
+    encodeAbiParameters,
+    encodeFunctionData,
+    stringToHex,
+} from "viem";
 import { useWaitForTransactionReceipt } from "wagmi";
 import { TransactionProgress } from "../TransactionProgress";
 import useUndeployedApplication from "../hooks/useUndeployedApplication";
 import { TransactionFormSuccessData } from "../DepositFormTypes";
 import { AbiFields } from "./AbiFields";
-import { AbiValueParameter, FormMode } from "./types";
+import { AbiValueParameter, FormMode, FormSpecification } from "./types";
 import { FormProvider } from "./context";
 import { useGenericInputForm } from "./useGenericInputForm";
 import { useDebouncedCallback } from "@mantine/hooks";
@@ -50,7 +57,14 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         onSuccess,
     } = props;
     const form = useGenericInputForm(specifications);
-    const { address, rawInput, mode } = form.getTransformedValues();
+    const {
+        address,
+        rawInput,
+        mode,
+        abiFunction,
+        selectedSpecification,
+        specificationMode,
+    } = form.getTransformedValues();
     const prepare = useSimulateInputBoxAddInput({
         args: [address, rawInput],
         query: {
@@ -79,9 +93,19 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
     const encodeFunctionParamsDebounced = useDebouncedCallback(
         (params: AbiValueParameter[]) => {
             // Encode the function params
-            const payload = encodeFunctionParams(params);
-            // Set the encoded function params as value for hex field
-            form.setFieldValue("rawInput", payload);
+            const values = encodeFunctionParams(params);
+
+            if (specificationMode === "json_abi") {
+                const payload = encodeFunctionData({
+                    abi: (selectedSpecification as FormSpecification)?.abi,
+                    functionName: (abiFunction as AbiFunction)?.name,
+                    args: values,
+                });
+                form.setFieldValue("rawInput", payload);
+            } else if (specificationMode === "abi_params") {
+                const payload = encodeAbiParameters(params, values);
+                form.setFieldValue("rawInput", payload);
+            }
         },
         400,
     );

From 3434f6d501a34817826df58a65329ed6c2148e7e Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 29 Oct 2024 12:35:27 +0200
Subject: [PATCH 22/40] chore(packages/ui): Remove obsolete component

---
 packages/ui/src/RawInputForm.tsx | 383 -------------------------------
 1 file changed, 383 deletions(-)
 delete mode 100644 packages/ui/src/RawInputForm.tsx

diff --git a/packages/ui/src/RawInputForm.tsx b/packages/ui/src/RawInputForm.tsx
deleted file mode 100644
index 5fb1799f0..000000000
--- a/packages/ui/src/RawInputForm.tsx
+++ /dev/null
@@ -1,383 +0,0 @@
-import {
-    useSimulateInputBoxAddInput,
-    useWriteInputBoxAddInput,
-} from "@cartesi/rollups-wagmi";
-import {
-    Alert,
-    Autocomplete,
-    Button,
-    Collapse,
-    Combobox,
-    Group,
-    Input,
-    InputBase,
-    Loader,
-    SegmentedControl,
-    Select,
-    Stack,
-    Textarea,
-    useCombobox,
-} from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { FC, Fragment, useCallback, useEffect, useState } from "react";
-import { TbAlertCircle, TbCheck } from "react-icons/tb";
-import {
-    Abi,
-    AbiFunction,
-    BaseError,
-    getAddress,
-    Hex,
-    isAddress,
-    isHex,
-    stringToHex,
-    zeroAddress,
-} from "viem";
-import { useWaitForTransactionReceipt } from "wagmi";
-import { TransactionProgress } from "./TransactionProgress";
-import useUndeployedApplication from "./hooks/useUndeployedApplication";
-import { TransactionFormSuccessData } from "./DepositFormTypes";
-
-type Format = "hex" | "string" | "abi";
-
-export interface RawInputFormSpecification {
-    id: string;
-    name: string;
-    abi: Abi;
-}
-
-export interface RawInputFormProps {
-    applications: string[];
-    specifications: RawInputFormSpecification[];
-    isLoadingApplications: boolean;
-    onSearchApplications: (applicationId: string) => void;
-    onSuccess: (receipt: TransactionFormSuccessData) => void;
-}
-
-export const RawInputForm: FC<RawInputFormProps> = (props) => {
-    const {
-        applications,
-        specifications,
-        isLoadingApplications,
-        onSearchApplications,
-        onSuccess,
-    } = props;
-    const form = useForm({
-        validateInputOnBlur: true,
-        initialValues: {
-            application: "",
-            rawInput: "0x",
-            stringInput: "",
-            abiMethod: "existing",
-            specificationId: "",
-            abiFunctionName: "",
-        },
-        validate: {
-            application: (value) =>
-                value !== "" && isAddress(value) ? null : "Invalid application",
-            rawInput: (value) => (isHex(value) ? null : "Invalid hex string"),
-        },
-        transformValues: (values) => {
-            const selectedSpecification = specifications.find(
-                (s) => s.id === values.specificationId,
-            );
-            return {
-                address: isAddress(values.application)
-                    ? getAddress(values.application)
-                    : zeroAddress,
-                rawInput: values.rawInput as Hex,
-                abiMethod: values.abiMethod,
-                specificationId: values.specificationId,
-                selectedSpecification,
-                abiFunction: (
-                    (selectedSpecification?.abi as AbiFunction[]) ?? []
-                ).find(
-                    (abiFunction) =>
-                        abiFunction.name === values.abiFunctionName,
-                ),
-            };
-        },
-    });
-    const { address, rawInput, abiMethod, abiFunction, selectedSpecification } =
-        form.getTransformedValues();
-    const prepare = useSimulateInputBoxAddInput({
-        args: [address, rawInput],
-        query: {
-            enabled: form.isValid(),
-        },
-    });
-
-    const execute = useWriteInputBoxAddInput();
-    const wait = useWaitForTransactionReceipt({
-        hash: execute.data,
-    });
-    const loading = execute.isPending || wait.isLoading;
-    const canSubmit = form.isValid() && prepare.error === null;
-    const isUndeployedApp = useUndeployedApplication(address, applications);
-    const [format, setFormat] = useState<Format>("hex");
-    const specificationOptions = specifications.map((s) => ({
-        value: s.id,
-        label: s.name,
-    }));
-
-    const onChangeFormat = useCallback((format: string | null) => {
-        setFormat(format as Format);
-    }, []);
-
-    const combobox = useCombobox({
-        onDropdownClose: () => combobox.resetSelectedOption(),
-    });
-
-    const formatParams = useCallback((abiFunction: AbiFunction) => {
-        return abiFunction.inputs
-            .map((input) => `${input.type} ${input.name}`)
-            .join(", ");
-    }, []);
-
-    useEffect(() => {
-        if (wait.isSuccess) {
-            onSuccess({ receipt: wait.data, type: "RAW" });
-            form.reset();
-            execute.reset();
-            onSearchApplications("");
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [wait, onSearchApplications, onSuccess]);
-
-    return (
-        <form data-testid="raw-input-form">
-            <Stack>
-                <Autocomplete
-                    label="Application"
-                    description="The application smart contract address"
-                    placeholder="0x"
-                    data={applications}
-                    withAsterisk
-                    rightSection={
-                        (prepare.isLoading || isLoadingApplications) && (
-                            <Loader size="xs" />
-                        )
-                    }
-                    {...form.getInputProps("application")}
-                    error={
-                        form.errors.application ||
-                        (prepare.error as BaseError)?.shortMessage
-                    }
-                    onChange={(nextValue) => {
-                        form.setFieldValue("application", nextValue);
-                        onSearchApplications(nextValue);
-                    }}
-                />
-
-                {!form.errors.application && isUndeployedApp && (
-                    <Alert
-                        variant="light"
-                        color="yellow"
-                        icon={<TbAlertCircle />}
-                    >
-                        This is an undeployed application.
-                    </Alert>
-                )}
-
-                <SegmentedControl
-                    value={format}
-                    onChange={onChangeFormat}
-                    data={[
-                        { label: "Hex", value: "hex" },
-                        { label: "String to Hex", value: "string" },
-                        { label: "ABI to Hex", value: "abi" },
-                    ]}
-                />
-
-                {format === "hex" ? (
-                    <Textarea
-                        label="Raw input"
-                        description="Raw input for the application"
-                        withAsterisk
-                        {...form.getInputProps("rawInput")}
-                    />
-                ) : format === "string" ? (
-                    <>
-                        <Textarea
-                            label="String input"
-                            description="String input for the application"
-                            mb={16}
-                            {...form.getInputProps("stringInput")}
-                            onChange={(event) => {
-                                const nextValue = event.target.value;
-                                form.setFieldValue("stringInput", nextValue);
-
-                                form.setFieldValue(
-                                    "rawInput",
-                                    stringToHex(nextValue),
-                                );
-                            }}
-                        />
-
-                        <Textarea
-                            label="Hex value"
-                            description="Encoded hex value for the application"
-                            readOnly
-                            {...form.getInputProps("rawInput")}
-                        />
-                    </>
-                ) : format === "abi" ? (
-                    <Stack>
-                        <Select
-                            label="ABI method"
-                            description="Select how to attach an ABI"
-                            mb={16}
-                            allowDeselect={false}
-                            data={[
-                                {
-                                    value: "existing",
-                                    label: "ABI from an existing JSON_ABI specification",
-                                },
-                                { value: "new", label: "New ABI" },
-                            ]}
-                            {...form.getInputProps("abiMethod")}
-                        />
-
-                        {abiMethod === "existing" ? (
-                            <Select
-                                label="Specifications"
-                                description="Available JSON_ABI specifications"
-                                placeholder="Select specification..."
-                                data={specificationOptions}
-                                withAsterisk
-                                {...form.getInputProps("specificationId")}
-                            />
-                        ) : null}
-
-                        {selectedSpecification && (
-                            <Combobox
-                                store={combobox}
-                                onOptionSubmit={(abiFunctionName) => {
-                                    combobox.closeDropdown();
-                                    form.setFieldValue(
-                                        "abiFunctionName",
-                                        abiFunctionName,
-                                    );
-                                }}
-                            >
-                                <Combobox.Target>
-                                    <InputBase
-                                        component="button"
-                                        type="button"
-                                        pointer
-                                        rightSection={<Combobox.Chevron />}
-                                        rightSectionPointerEvents="none"
-                                        onClick={() =>
-                                            combobox.toggleDropdown()
-                                        }
-                                    >
-                                        {abiFunction ? (
-                                            `${abiFunction.name}(${formatParams(
-                                                abiFunction,
-                                            )})`
-                                        ) : (
-                                            <Input.Placeholder>
-                                                Select function
-                                            </Input.Placeholder>
-                                        )}
-                                    </InputBase>
-                                </Combobox.Target>
-                                <Combobox.Dropdown>
-                                    <Combobox.Options>
-                                        {(
-                                            selectedSpecification.abi as AbiFunction[]
-                                        )
-                                            .filter(
-                                                (item) =>
-                                                    item.type === "function",
-                                            )
-                                            .map((abiFunction) => {
-                                                const params =
-                                                    abiFunction.inputs
-                                                        .map(
-                                                            (input) =>
-                                                                `${input.type} ${input.name}`,
-                                                        )
-                                                        .join(", ");
-
-                                                return (
-                                                    <Combobox.Option
-                                                        key={`${abiFunction.name}-${params}`}
-                                                        value={abiFunction.name}
-                                                    >
-                                                        {abiFunction.name}(
-                                                        {abiFunction.inputs.map(
-                                                            (input, index) => (
-                                                                <Fragment
-                                                                    key={`${input.type}-${input.name}`}
-                                                                >
-                                                                    <span>
-                                                                        <span
-                                                                            style={{
-                                                                                color: "var(--mantine-color-blue-text)",
-                                                                            }}
-                                                                        >
-                                                                            {
-                                                                                input.type
-                                                                            }
-                                                                        </span>{" "}
-                                                                        <span>
-                                                                            {
-                                                                                input.name
-                                                                            }
-                                                                        </span>
-                                                                    </span>
-                                                                    {index <
-                                                                    abiFunction
-                                                                        .inputs
-                                                                        .length -
-                                                                        1
-                                                                        ? ", "
-                                                                        : ""}
-                                                                </Fragment>
-                                                            ),
-                                                        )}
-                                                        )
-                                                    </Combobox.Option>
-                                                );
-                                            })}
-                                    </Combobox.Options>
-                                </Combobox.Dropdown>
-                            </Combobox>
-                        )}
-                    </Stack>
-                ) : null}
-
-                <Collapse
-                    in={
-                        execute.isPending ||
-                        wait.isLoading ||
-                        execute.isSuccess ||
-                        execute.isError
-                    }
-                >
-                    <TransactionProgress
-                        prepare={prepare}
-                        execute={execute}
-                        wait={wait}
-                        confirmationMessage="Raw input sent successfully!"
-                        defaultErrorMessage={execute.error?.message}
-                    />
-                </Collapse>
-
-                <Group justify="right">
-                    <Button
-                        variant="filled"
-                        disabled={!canSubmit}
-                        leftSection={<TbCheck />}
-                        loading={loading}
-                        onClick={() =>
-                            execute.writeContract(prepare.data!.request)
-                        }
-                    >
-                        Send
-                    </Button>
-                </Group>
-            </Stack>
-        </form>
-    );
-};

From 16253deae998eb71296746c96c71fd6e0f556005 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 29 Oct 2024 12:35:42 +0200
Subject: [PATCH 23/40] chore(packages/ui): Refactoring

---
 packages/ui/src/GenericInputForm/utils.ts | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index bb625462e..c8ea59ae9 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,15 +1,10 @@
-import {
-    encodeAbiParameters,
-    getAddress,
-    parseAbi,
-    parseAbiParameters,
-} from "viem";
+import { AbiFunction, getAddress, parseAbi, parseAbiParameters } from "viem";
 import { AbiValueParameter, FormSpecification } from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 
 export const encodeFunctionParams = (params: AbiValueParameter[]) => {
-    const values = params.map((param) => {
+    return params.map((param) => {
         switch (param.type) {
             case "bool":
                 return param.value === "true";
@@ -27,8 +22,6 @@ export const encodeFunctionParams = (params: AbiValueParameter[]) => {
                 return param.value;
         }
     });
-
-    return encodeAbiParameters(params, values);
 };
 
 export const generateHumanAbiFormSpecification = (humanAbi: string) => {
@@ -74,3 +67,8 @@ export const generateAbiParamFormSpecification = (abiParam: string) => {
           } as FormSpecification)
         : undefined;
 };
+
+export const getFunctionSignature = (abiFunction: AbiFunction) => {
+    const params = abiFunction.inputs.map((input) => input.type);
+    return `${abiFunction.name}(${params.join(", ")})`;
+};

From 6eea6f8a9517e9f71d0c24af6c8c37a69ea9b223 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 29 Oct 2024 12:38:42 +0200
Subject: [PATCH 24/40] test(packages/ui): Fix test error

---
 packages/ui/test/GenericInputForm/index.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/test/GenericInputForm/index.test.tsx b/packages/ui/test/GenericInputForm/index.test.tsx
index e1db74f66..99a573d0d 100644
--- a/packages/ui/test/GenericInputForm/index.test.tsx
+++ b/packages/ui/test/GenericInputForm/index.test.tsx
@@ -52,6 +52,7 @@ vi.mock("viem", async () => {
     return {
         ...(actual as any),
         getAddress: (address: string) => address,
+        encodeFunctionData: vi.fn(),
     };
 });
 

From 81627ea709ca27198e21f7f60c2552c2a661f907 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 00:22:34 +0200
Subject: [PATCH 25/40] feat(packages/ui): Add component for rendering nested
 tuple inputs

---
 .../src/GenericInputForm/AbiFunctionName.tsx  | 12 +--
 .../GenericInputForm/AbiFunctionParams.tsx    | 41 +++++++----
 .../src/GenericInputForm/TupleComponents.tsx  | 73 +++++++++++++++++++
 packages/ui/src/GenericInputForm/types.ts     |  5 ++
 packages/ui/src/GenericInputForm/utils.ts     | 27 +++++--
 5 files changed, 133 insertions(+), 25 deletions(-)
 create mode 100644 packages/ui/src/GenericInputForm/TupleComponents.tsx

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 98f70d8ce..5f0cc3c18 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -4,6 +4,8 @@ import { AbiFunction } from "viem";
 import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
 import { TbAlertCircle } from "react-icons/tb";
+import { generateInitialValues } from "./utils";
+import { AbiInputParam } from "./types";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
@@ -27,12 +29,10 @@ export const AbiFunctionName = () => {
             ).find((abiFunction) => abiFunction.name === abiFunctionName);
 
             if (nextAbiFunction) {
-                const emptyFunctionParams = nextAbiFunction.inputs.map(
-                    (input) => ({
-                        ...input,
-                        value: "",
-                    }),
-                );
+                const emptyFunctionParams: AbiInputParam[] = [];
+                (nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {
+                    generateInitialValues(input, emptyFunctionParams);
+                });
 
                 form.setFieldValue("abiFunctionParams", emptyFunctionParams);
             }
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index b4826c43b..e4427259b 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -2,6 +2,9 @@ import { useFormContext } from "./context";
 import { Alert, Stack, Text, TextInput } from "@mantine/core";
 import { TbAlertCircle } from "react-icons/tb";
 import { FunctionParamLabel } from "./FunctionSignature";
+import { Fragment } from "react";
+import { TupleComponents } from "./TupleComponents";
+import { AbiInputParam } from "./types";
 
 export const AbiFunctionParams = () => {
     const form = useFormContext();
@@ -14,21 +17,31 @@ export const AbiFunctionParams = () => {
                     {abiFunction.inputs.length > 0 ? (
                         <>
                             {abiFunction.inputs.map((input, index) => (
-                                <TextInput
-                                    key={`${input.name}-${input.type}`}
-                                    label={
-                                        input.name && input.type ? (
-                                            <FunctionParamLabel input={input} />
-                                        ) : (
-                                            input.name || input.type
-                                        )
-                                    }
-                                    placeholder={`Enter ${input.type} value`}
-                                    withAsterisk
-                                    {...form.getInputProps(
-                                        `abiFunctionParams.${index}.value`,
+                                <Fragment key={`${input.name}-${input.type}`}>
+                                    {input.type === "tuple" ? (
+                                        <TupleComponents
+                                            input={input as AbiInputParam}
+                                        />
+                                    ) : (
+                                        <TextInput
+                                            key={`${input.name}-${input.type}`}
+                                            label={
+                                                input.name && input.type ? (
+                                                    <FunctionParamLabel
+                                                        input={input}
+                                                    />
+                                                ) : (
+                                                    input.name || input.type
+                                                )
+                                            }
+                                            placeholder={`Enter ${input.type} value`}
+                                            withAsterisk
+                                            {...form.getInputProps(
+                                                `abiFunctionParams.${index}.value`,
+                                            )}
+                                        />
                                     )}
-                                />
+                                </Fragment>
                             ))}
                         </>
                     ) : (
diff --git a/packages/ui/src/GenericInputForm/TupleComponents.tsx b/packages/ui/src/GenericInputForm/TupleComponents.tsx
new file mode 100644
index 000000000..5759ed659
--- /dev/null
+++ b/packages/ui/src/GenericInputForm/TupleComponents.tsx
@@ -0,0 +1,73 @@
+import React, { FC, Fragment } from "react";
+import { FunctionParamLabel } from "./FunctionSignature";
+import { Fieldset, FieldsetProps, TextInput } from "@mantine/core";
+import { useFormContext } from "./context";
+import { AbiInputParam } from "./types";
+
+interface TupleComponentsProps extends FieldsetProps {
+    input: AbiInputParam;
+}
+
+export const TupleComponents: FC<TupleComponentsProps> = (props) => {
+    const form = useFormContext();
+    const { input, ...restProps } = props;
+    const { value: abiFunctionParams } =
+        form.getInputProps("abiFunctionParams");
+    const firstStandardInput = input.components.find((c) => c.type !== "tuple");
+    const firstStandardInputIndex = input.components.findIndex(
+        (c) =>
+            c.name == firstStandardInput?.name &&
+            c.type === firstStandardInput?.type,
+    );
+
+    return (
+        <Fieldset
+            {...restProps}
+            legend={
+                input.name && input.type ? (
+                    <FunctionParamLabel input={input} />
+                ) : (
+                    input.name || input.type
+                )
+            }
+        >
+            {input.components.map((component, componentIndex) => {
+                const isFirstStandardInput =
+                    componentIndex === firstStandardInputIndex;
+                const targetIndex = abiFunctionParams.findIndex(
+                    (p: AbiInputParam) =>
+                        p.tupleName === input.name &&
+                        p.type === component.type &&
+                        p.name === component.name,
+                );
+
+                return (
+                    <Fragment
+                        key={`${input.name}-${input.type}-${component.name}-${component.type}`}
+                    >
+                        {component.type === "tuple" ? (
+                            <TupleComponents input={component} mt={16} />
+                        ) : (
+                            <TextInput
+                                key={`${component.name}-${component.type}`}
+                                label={
+                                    component.name && component.type ? (
+                                        <FunctionParamLabel input={component} />
+                                    ) : (
+                                        component.name || component.type
+                                    )
+                                }
+                                placeholder={`Enter ${component.type} value`}
+                                mt={isFirstStandardInput ? 0 : 16}
+                                withAsterisk
+                                {...form.getInputProps(
+                                    `abiFunctionParams.${targetIndex}.value`,
+                                )}
+                            />
+                        )}
+                    </Fragment>
+                );
+            })}
+        </Fieldset>
+    );
+};
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 017e53cd7..878388927 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -16,6 +16,11 @@ export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
     value: string;
 };
 
+export type AbiInputParam = AbiValueParameter & {
+    tupleName?: string;
+    components: AbiInputParam[];
+};
+
 export interface FormValues {
     mode: FormMode;
     application: string;
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index c8ea59ae9..4dc4f68b7 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,5 +1,5 @@
-import { AbiFunction, getAddress, parseAbi, parseAbiParameters } from "viem";
-import { AbiValueParameter, FormSpecification } from "./types";
+import { getAddress, parseAbi, parseAbiParameters } from "viem";
+import { AbiInputParam, AbiValueParameter, FormSpecification } from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 
@@ -68,7 +68,24 @@ export const generateAbiParamFormSpecification = (abiParam: string) => {
         : undefined;
 };
 
-export const getFunctionSignature = (abiFunction: AbiFunction) => {
-    const params = abiFunction.inputs.map((input) => input.type);
-    return `${abiFunction.name}(${params.join(", ")})`;
+export const generateInitialValues = (
+    parentInput: AbiInputParam,
+    flatInputs: AbiInputParam[],
+) => {
+    parentInput.components.forEach((input: AbiInputParam) => {
+        if (input.type === "tuple") {
+            generateInitialValues(input, flatInputs);
+        } else {
+            const flatInput: AbiInputParam = {
+                ...input,
+                value: "",
+            };
+
+            if (parentInput.type === "tuple") {
+                flatInput.tupleName = parentInput.name;
+            }
+
+            flatInputs.push(flatInput);
+        }
+    });
 };

From 31599a1a38f20ebe5bca5f6fe892690806808ed3 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 00:30:46 +0200
Subject: [PATCH 26/40] chore(packages/ui): Refactoring

---
 .../GenericInputForm/AbiFunctionParams.tsx    | 12 ++---------
 .../GenericInputForm/FunctionSignature.tsx    | 17 +++++++++++++++
 .../src/GenericInputForm/TupleComponents.tsx  | 21 +++----------------
 3 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index e4427259b..2dfb95ea4 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -1,7 +1,7 @@
 import { useFormContext } from "./context";
 import { Alert, Stack, Text, TextInput } from "@mantine/core";
 import { TbAlertCircle } from "react-icons/tb";
-import { FunctionParamLabel } from "./FunctionSignature";
+import { FunctionParamLabel, InputLabel } from "./FunctionSignature";
 import { Fragment } from "react";
 import { TupleComponents } from "./TupleComponents";
 import { AbiInputParam } from "./types";
@@ -25,15 +25,7 @@ export const AbiFunctionParams = () => {
                                     ) : (
                                         <TextInput
                                             key={`${input.name}-${input.type}`}
-                                            label={
-                                                input.name && input.type ? (
-                                                    <FunctionParamLabel
-                                                        input={input}
-                                                    />
-                                                ) : (
-                                                    input.name || input.type
-                                                )
-                                            }
+                                            label={<InputLabel input={input} />}
                                             placeholder={`Enter ${input.type} value`}
                                             withAsterisk
                                             {...form.getInputProps(
diff --git a/packages/ui/src/GenericInputForm/FunctionSignature.tsx b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
index 266c866d3..462353bfc 100644
--- a/packages/ui/src/GenericInputForm/FunctionSignature.tsx
+++ b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
@@ -1,6 +1,7 @@
 import { AbiFunction, AbiParameter } from "viem";
 import { FC, Fragment } from "react";
 import { Box, Text } from "@mantine/core";
+import { AbiInputParam } from "./types";
 
 interface FunctionParamLabelProps {
     input: AbiParameter;
@@ -19,6 +20,22 @@ export const FunctionParamLabel: FC<FunctionParamLabelProps> = ({ input }) => {
     );
 };
 
+interface InputLabelProps {
+    input: AbiParameter | AbiInputParam;
+}
+
+export const InputLabel: FC<InputLabelProps> = ({ input }) => {
+    return (
+        <>
+            {input.name && input.type ? (
+                <FunctionParamLabel input={input} />
+            ) : (
+                input.name || input.type
+            )}
+        </>
+    );
+};
+
 interface FunctionSignatureProps {
     abiFunction: AbiFunction;
 }
diff --git a/packages/ui/src/GenericInputForm/TupleComponents.tsx b/packages/ui/src/GenericInputForm/TupleComponents.tsx
index 5759ed659..b6b3da42b 100644
--- a/packages/ui/src/GenericInputForm/TupleComponents.tsx
+++ b/packages/ui/src/GenericInputForm/TupleComponents.tsx
@@ -1,5 +1,5 @@
 import React, { FC, Fragment } from "react";
-import { FunctionParamLabel } from "./FunctionSignature";
+import { InputLabel } from "./FunctionSignature";
 import { Fieldset, FieldsetProps, TextInput } from "@mantine/core";
 import { useFormContext } from "./context";
 import { AbiInputParam } from "./types";
@@ -21,16 +21,7 @@ export const TupleComponents: FC<TupleComponentsProps> = (props) => {
     );
 
     return (
-        <Fieldset
-            {...restProps}
-            legend={
-                input.name && input.type ? (
-                    <FunctionParamLabel input={input} />
-                ) : (
-                    input.name || input.type
-                )
-            }
-        >
+        <Fieldset {...restProps} legend={<InputLabel input={input} />}>
             {input.components.map((component, componentIndex) => {
                 const isFirstStandardInput =
                     componentIndex === firstStandardInputIndex;
@@ -50,13 +41,7 @@ export const TupleComponents: FC<TupleComponentsProps> = (props) => {
                         ) : (
                             <TextInput
                                 key={`${component.name}-${component.type}`}
-                                label={
-                                    component.name && component.type ? (
-                                        <FunctionParamLabel input={component} />
-                                    ) : (
-                                        component.name || component.type
-                                    )
-                                }
+                                label={<InputLabel input={component} />}
                                 placeholder={`Enter ${component.type} value`}
                                 mt={isFirstStandardInput ? 0 : 16}
                                 withAsterisk

From 0f435b6fc58ac6457988317a063626350f614f89 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 15:30:40 +0200
Subject: [PATCH 27/40] feat(packages/ui): Handle tuple params

---
 .../GenericInputForm/AbiFunctionParams.tsx    |  2 +-
 packages/ui/src/GenericInputForm/index.tsx    | 39 +++++---
 packages/ui/src/GenericInputForm/types.ts     |  3 +
 packages/ui/src/GenericInputForm/utils.ts     | 99 +++++++++++++++----
 4 files changed, 107 insertions(+), 36 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index 2dfb95ea4..51320c802 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -1,7 +1,7 @@
 import { useFormContext } from "./context";
 import { Alert, Stack, Text, TextInput } from "@mantine/core";
 import { TbAlertCircle } from "react-icons/tb";
-import { FunctionParamLabel, InputLabel } from "./FunctionSignature";
+import { InputLabel } from "./FunctionSignature";
 import { Fragment } from "react";
 import { TupleComponents } from "./TupleComponents";
 import { AbiInputParam } from "./types";
diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 10b65ee39..6d15a0097 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -32,7 +32,7 @@ import { AbiValueParameter, FormMode, FormSpecification } from "./types";
 import { FormProvider } from "./context";
 import { useGenericInputForm } from "./useGenericInputForm";
 import { useDebouncedCallback } from "@mantine/hooks";
-import { encodeFunctionParams } from "./utils";
+import { generateFinalValues } from "./utils";
 
 export interface GenericInputFormSpecification {
     id: string;
@@ -92,19 +92,30 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
 
     const encodeFunctionParamsDebounced = useDebouncedCallback(
         (params: AbiValueParameter[]) => {
-            // Encode the function params
-            const values = encodeFunctionParams(params);
-
-            if (specificationMode === "json_abi") {
-                const payload = encodeFunctionData({
-                    abi: (selectedSpecification as FormSpecification)?.abi,
-                    functionName: (abiFunction as AbiFunction)?.name,
-                    args: values,
-                });
-                form.setFieldValue("rawInput", payload);
-            } else if (specificationMode === "abi_params") {
-                const payload = encodeAbiParameters(params, values);
-                form.setFieldValue("rawInput", payload);
+            const nextAbiFunction = (
+                selectedSpecification?.abi as AbiFunction[]
+            )?.[0];
+
+            if (nextAbiFunction) {
+                const finalValues = generateFinalValues(
+                    nextAbiFunction.inputs.slice(),
+                    params,
+                );
+
+                if (specificationMode === "json_abi") {
+                    const payload = encodeFunctionData({
+                        abi: (selectedSpecification as FormSpecification)?.abi,
+                        functionName: (abiFunction as AbiFunction)?.name,
+                        args: finalValues,
+                    });
+                    form.setFieldValue("rawInput", payload);
+                } else if (specificationMode === "abi_params") {
+                    const payload = encodeAbiParameters(
+                        nextAbiFunction.inputs,
+                        finalValues,
+                    );
+                    form.setFieldValue("rawInput", payload);
+                }
             }
         },
         400,
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 878388927..37d24378d 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -14,6 +14,7 @@ export type FormAbiMethod = "new" | "existing";
 
 export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
     value: string;
+    tupleName?: string;
 };
 
 export type AbiInputParam = AbiValueParameter & {
@@ -49,3 +50,5 @@ export interface FormTransformedValues {
     abiFunction: AbiFunction | undefined;
     selectedSpecification: FormSpecification | undefined;
 }
+
+export type FinalValues = (string | bigint | boolean | FinalValues)[];
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 4dc4f68b7..0cc4e903e 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -1,27 +1,30 @@
-import { getAddress, parseAbi, parseAbiParameters } from "viem";
-import { AbiInputParam, AbiValueParameter, FormSpecification } from "./types";
+import { AbiParameter, getAddress, parseAbi, parseAbiParameters } from "viem";
+import {
+    AbiInputParam,
+    AbiValueParameter,
+    FormSpecification,
+    FinalValues,
+} from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 
-export const encodeFunctionParams = (params: AbiValueParameter[]) => {
-    return params.map((param) => {
-        switch (param.type) {
-            case "bool":
-                return param.value === "true";
-            case "address":
-                return getAddress(param.value);
-            case "uint":
-            case "uint8":
-            case "uint16":
-            case "uint32":
-            case "uint64":
-            case "uint128":
-            case "uint256":
-                return BigInt(param.value);
-            default:
-                return param.value;
-        }
-    });
+export const encodeFunctionParam = (param: AbiValueParameter) => {
+    switch (param.type) {
+        case "bool":
+            return param.value === "true";
+        case "address":
+            return getAddress(param.value);
+        case "uint":
+        case "uint8":
+        case "uint16":
+        case "uint32":
+        case "uint64":
+        case "uint128":
+        case "uint256":
+            return BigInt(param.value);
+        default:
+            return param.value;
+    }
 };
 
 export const generateHumanAbiFormSpecification = (humanAbi: string) => {
@@ -89,3 +92,57 @@ export const generateInitialValues = (
         }
     });
 };
+
+export const generateFinalValues = (
+    inputs: AbiParameter[],
+    params: AbiValueParameter[],
+) => {
+    const finalArr: FinalValues = [];
+
+    inputs.forEach((input) => {
+        if (input.type === "tuple") {
+            const currArr: FinalValues = [];
+            finalArr.push(currArr);
+
+            generateInputValues(
+                input as AbiInputParam,
+                params,
+                finalArr,
+                currArr,
+            );
+        } else {
+            const param = params.find((p) => {
+                return p.name === input.name && p.type === input.type;
+            }) as AbiValueParameter;
+            const value = encodeFunctionParam(param);
+            finalArr.push(value);
+        }
+    });
+
+    return finalArr;
+};
+
+const generateInputValues = (
+    tupleInput: AbiInputParam,
+    params: AbiValueParameter[],
+    finalArr: FinalValues = [],
+    currentArr: FinalValues = [],
+) => {
+    tupleInput.components.forEach((input) => {
+        if (input.type === "tuple") {
+            const nextCurrentArr: FinalValues = [];
+            currentArr.push(nextCurrentArr);
+            generateInputValues(input, params, finalArr, nextCurrentArr);
+        } else {
+            const param = params.find((p) => {
+                return (
+                    p.tupleName === tupleInput.name &&
+                    p.name === input.name &&
+                    p.type === input.type
+                );
+            }) as AbiValueParameter;
+            const value = encodeFunctionParam(param);
+            currentArr.push(value);
+        }
+    });
+};

From f9c1887270fcd9e057809066182bdd9468f47b74 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 16:37:37 +0200
Subject: [PATCH 28/40] fix(packages/ui): Fix validation issue with abi params

---
 packages/ui/src/GenericInputForm/AbiParameter.tsx | 4 ++++
 packages/ui/src/GenericInputForm/validations.ts   | 4 +++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index d1e730d82..b204fc1dd 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -14,6 +14,10 @@ export const AbiParameter = () => {
         const selectedSpecification =
             generateAbiParamFormSpecification(abiParam);
 
+        if (selectedSpecification) {
+            form.setFieldValue("specificationId", selectedSpecification.id);
+        }
+
         const nextAbiFunction = (
             selectedSpecification?.abi as AbiFunction[]
         )[0];
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index 0a9170a57..af1e3f396 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -15,7 +15,9 @@ export const validateAbiMethod = (value: string, values: FormValues) =>
         : "Invalid ABI method";
 
 export const validateSpecificationId = (value: string, values: FormValues) =>
-    values.mode !== "abi" || values.abiMethod === "new" || value !== ""
+    values.mode !== "abi" ||
+    (values.abiMethod === "new" && values.specificationMode === "json_abi") ||
+    value !== ""
         ? null
         : "Invalid specification";
 

From a3ad9a45aac2e718264f18e429fa67b86cc35edd Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 17:19:33 +0200
Subject: [PATCH 29/40] chore(packages/ui): Refactoring

---
 packages/ui/src/GenericInputForm/index.tsx    |  9 ++--
 packages/ui/src/GenericInputForm/types.ts     |  1 +
 .../GenericInputForm/useGenericInputForm.ts   |  1 +
 packages/ui/src/GenericInputForm/utils.ts     | 46 ++++++++++---------
 4 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index 6d15a0097..b3ab0532a 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -64,6 +64,7 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
         abiFunction,
         selectedSpecification,
         specificationMode,
+        abiFunctionName,
     } = form.getTransformedValues();
     const prepare = useSimulateInputBoxAddInput({
         args: [address, rawInput],
@@ -92,9 +93,11 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
 
     const encodeFunctionParamsDebounced = useDebouncedCallback(
         (params: AbiValueParameter[]) => {
-            const nextAbiFunction = (
-                selectedSpecification?.abi as AbiFunction[]
-            )?.[0];
+            const abiFunctions =
+                (selectedSpecification?.abi as AbiFunction[]) ?? [];
+            const nextAbiFunction = abiFunctions.find(
+                (f) => f.name === abiFunctionName,
+            );
 
             if (nextAbiFunction) {
                 const finalValues = generateFinalValues(
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index 37d24378d..c664fa81f 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -47,6 +47,7 @@ export interface FormTransformedValues {
     abiParam: string;
     savedAbiParam: string;
     specificationId: string;
+    abiFunctionName: string;
     abiFunction: AbiFunction | undefined;
     selectedSpecification: FormSpecification | undefined;
 }
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 81374c008..1e63c401f 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -55,6 +55,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                 abiParam: values.abiParam,
                 savedAbiParam: values.savedAbiParam,
                 specificationId: values.specificationId,
+                abiFunctionName: values.abiFunctionName,
                 selectedSpecification,
                 abiFunction: (
                     (selectedSpecification?.abi as AbiFunction[]) ?? []
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 0cc4e903e..2665e9362 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -75,22 +75,29 @@ export const generateInitialValues = (
     parentInput: AbiInputParam,
     flatInputs: AbiInputParam[],
 ) => {
-    parentInput.components.forEach((input: AbiInputParam) => {
-        if (input.type === "tuple") {
-            generateInitialValues(input, flatInputs);
-        } else {
-            const flatInput: AbiInputParam = {
-                ...input,
-                value: "",
-            };
+    if (parentInput.components) {
+        parentInput.components.forEach((input: AbiInputParam) => {
+            if (input.type === "tuple") {
+                generateInitialValues(input, flatInputs);
+            } else {
+                const flatInput: AbiInputParam = {
+                    ...input,
+                    value: "",
+                };
 
-            if (parentInput.type === "tuple") {
-                flatInput.tupleName = parentInput.name;
-            }
+                if (parentInput.type === "tuple") {
+                    flatInput.tupleName = parentInput.name;
+                }
 
-            flatInputs.push(flatInput);
-        }
-    });
+                flatInputs.push(flatInput);
+            }
+        });
+    } else {
+        flatInputs.push({
+            ...parentInput,
+            value: "",
+        });
+    }
 };
 
 export const generateFinalValues = (
@@ -104,12 +111,7 @@ export const generateFinalValues = (
             const currArr: FinalValues = [];
             finalArr.push(currArr);
 
-            generateInputValues(
-                input as AbiInputParam,
-                params,
-                finalArr,
-                currArr,
-            );
+            getTupleValues(input as AbiInputParam, params, finalArr, currArr);
         } else {
             const param = params.find((p) => {
                 return p.name === input.name && p.type === input.type;
@@ -122,7 +124,7 @@ export const generateFinalValues = (
     return finalArr;
 };
 
-const generateInputValues = (
+const getTupleValues = (
     tupleInput: AbiInputParam,
     params: AbiValueParameter[],
     finalArr: FinalValues = [],
@@ -132,7 +134,7 @@ const generateInputValues = (
         if (input.type === "tuple") {
             const nextCurrentArr: FinalValues = [];
             currentArr.push(nextCurrentArr);
-            generateInputValues(input, params, finalArr, nextCurrentArr);
+            getTupleValues(input, params, finalArr, nextCurrentArr);
         } else {
             const param = params.find((p) => {
                 return (

From 8b02e6293d150594fcb9d61fda043b0ae0ae7361 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 17:55:47 +0200
Subject: [PATCH 30/40] chore(packages/ui): Refactoring

---
 packages/ui/src/GenericInputForm/AbiParameter.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index b204fc1dd..2b3d09377 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -2,7 +2,11 @@ import { useFormContext } from "./context";
 import { Button, TextInput } from "@mantine/core";
 import { useCallback } from "react";
 import { AbiFunction } from "viem";
-import { generateAbiParamFormSpecification } from "./utils";
+import {
+    generateAbiParamFormSpecification,
+    generateInitialValues,
+} from "./utils";
+import { AbiInputParam } from "./types";
 
 export const AbiParameter = () => {
     const form = useFormContext();
@@ -23,10 +27,10 @@ export const AbiParameter = () => {
         )[0];
 
         if (nextAbiFunction) {
-            const emptyFunctionParams = nextAbiFunction.inputs.map((input) => ({
-                ...input,
-                value: "",
-            }));
+            const emptyFunctionParams: AbiInputParam[] = [];
+            (nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {
+                generateInitialValues(input, emptyFunctionParams);
+            });
 
             form.setFieldValue("abiFunctionParams", emptyFunctionParams);
         }

From ce1e83af4048763ef651a8a4ace6706b7424a760 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 7 Nov 2024 17:57:50 +0200
Subject: [PATCH 31/40] chore(packages/ui): Cleanup

---
 apps/web/src/components/sendTransaction.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/sendTransaction.tsx b/apps/web/src/components/sendTransaction.tsx
index e151e395a..6248a3b10 100644
--- a/apps/web/src/components/sendTransaction.tsx
+++ b/apps/web/src/components/sendTransaction.tsx
@@ -37,7 +37,7 @@ interface DepositProps {
 const DEBOUNCE_TIME = 400 as const;
 
 const SendTransaction: FC<DepositProps> = ({
-    initialDepositType = "input",
+    initialDepositType = "ether",
 }) => {
     const [depositType, setDepositType] =
         useState<DepositType>(initialDepositType);

From 6555f435c71ef88aa778db213cf57f146b3e668d Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 14 Nov 2024 00:05:20 +0200
Subject: [PATCH 32/40] test(apps/web): Keep application value after resetting
 the form

---
 packages/ui/src/GenericInputForm/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index b3ab0532a..a58216cfa 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -85,8 +85,10 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
 
     const onChangeFormMode = useCallback(
         (mode: string | null) => {
+            const application = form.getInputProps("application");
             form.reset();
             form.setFieldValue("mode", mode as FormMode);
+            form.setFieldValue("application", application.value);
         },
         [form],
     );

From 8f501f9fbb08617b6042caefb057436434381e44 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 14 Nov 2024 00:06:30 +0200
Subject: [PATCH 33/40] test(apps/web): Clear param errors when resetting the
 params

---
 .../ui/src/GenericInputForm/AbiFunctionName.tsx     | 13 +++++++++++++
 packages/ui/src/GenericInputForm/AbiParameter.tsx   | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 5f0cc3c18..d9575bcdb 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -6,6 +6,7 @@ import { FunctionSignature } from "./FunctionSignature";
 import { TbAlertCircle } from "react-icons/tb";
 import { generateInitialValues } from "./utils";
 import { AbiInputParam } from "./types";
+import { isArray } from "ramda-adjunct";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
@@ -34,6 +35,18 @@ export const AbiFunctionName = () => {
                     generateInitialValues(input, emptyFunctionParams);
                 });
 
+                const prevAbiFunctionParams =
+                    form.getInputProps("abiFunctionParams");
+
+                if (isArray(prevAbiFunctionParams.value)) {
+                    prevAbiFunctionParams.value.forEach((_, index) => {
+                        form.setFieldError(
+                            `abiFunctionParams.${index}.value`,
+                            null,
+                        );
+                    });
+                }
+
                 form.setFieldValue("abiFunctionParams", emptyFunctionParams);
             }
         },
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index 2b3d09377..6936e1715 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -7,6 +7,7 @@ import {
     generateInitialValues,
 } from "./utils";
 import { AbiInputParam } from "./types";
+import { isArray } from "ramda-adjunct";
 
 export const AbiParameter = () => {
     const form = useFormContext();
@@ -32,6 +33,18 @@ export const AbiParameter = () => {
                 generateInitialValues(input, emptyFunctionParams);
             });
 
+            const prevAbiFunctionParams =
+                form.getInputProps("abiFunctionParams");
+
+            if (isArray(prevAbiFunctionParams.value)) {
+                prevAbiFunctionParams.value.forEach((_, index) => {
+                    form.setFieldError(
+                        `abiFunctionParams.${index}.value`,
+                        null,
+                    );
+                });
+            }
+
             form.setFieldValue("abiFunctionParams", emptyFunctionParams);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' is not added on purpose because it has unstable reference

From 1e0a7a5f0b10886802a8577d950cb79f36c91151 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 14 Nov 2024 00:07:04 +0200
Subject: [PATCH 34/40] test(apps/web): Add index offset for params before
 tuples

---
 .../GenericInputForm/AbiFunctionParams.tsx    | 52 ++++++++++++-------
 packages/ui/src/GenericInputForm/utils.ts     | 27 ++++++++++
 2 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index 51320c802..dbb8d9fc8 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -5,6 +5,7 @@ import { InputLabel } from "./FunctionSignature";
 import { Fragment } from "react";
 import { TupleComponents } from "./TupleComponents";
 import { AbiInputParam } from "./types";
+import { getInputIndexOffset } from "./utils";
 
 export const AbiFunctionParams = () => {
     const form = useFormContext();
@@ -16,25 +17,38 @@ export const AbiFunctionParams = () => {
                 <Stack>
                     {abiFunction.inputs.length > 0 ? (
                         <>
-                            {abiFunction.inputs.map((input, index) => (
-                                <Fragment key={`${input.name}-${input.type}`}>
-                                    {input.type === "tuple" ? (
-                                        <TupleComponents
-                                            input={input as AbiInputParam}
-                                        />
-                                    ) : (
-                                        <TextInput
-                                            key={`${input.name}-${input.type}`}
-                                            label={<InputLabel input={input} />}
-                                            placeholder={`Enter ${input.type} value`}
-                                            withAsterisk
-                                            {...form.getInputProps(
-                                                `abiFunctionParams.${index}.value`,
-                                            )}
-                                        />
-                                    )}
-                                </Fragment>
-                            ))}
+                            {abiFunction.inputs.map((input, index) => {
+                                const prevInputs = abiFunction.inputs.slice(
+                                    0,
+                                    index,
+                                ) as AbiInputParam[];
+                                const indexOffset =
+                                    getInputIndexOffset(prevInputs);
+
+                                return (
+                                    <Fragment
+                                        key={`${input.name}-${input.type}`}
+                                    >
+                                        {input.type === "tuple" ? (
+                                            <TupleComponents
+                                                input={input as AbiInputParam}
+                                            />
+                                        ) : (
+                                            <TextInput
+                                                key={`${input.name}-${input.type}`}
+                                                label={
+                                                    <InputLabel input={input} />
+                                                }
+                                                placeholder={`Enter ${input.type} value`}
+                                                withAsterisk
+                                                {...form.getInputProps(
+                                                    `abiFunctionParams.${indexOffset}.value`,
+                                                )}
+                                            />
+                                        )}
+                                    </Fragment>
+                                );
+                            })}
                         </>
                     ) : (
                         <Alert
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 2665e9362..d79459abf 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -148,3 +148,30 @@ const getTupleValues = (
         }
     });
 };
+
+const getTupleInputs = (
+    tupleInput: AbiInputParam,
+    finalArr: AbiParameter[],
+) => {
+    tupleInput.components.forEach((input) => {
+        if (input.type === "tuple") {
+            getTupleInputs(input, finalArr);
+        } else {
+            finalArr.push(input);
+        }
+    });
+};
+
+export const getInputIndexOffset = (inputs: AbiInputParam[]) => {
+    const nestedInputs: AbiParameter[] = [];
+
+    inputs.forEach((input) => {
+        if (input.type === "tuple") {
+            getTupleInputs(input, nestedInputs);
+        } else {
+            nestedInputs.push(input);
+        }
+    });
+
+    return nestedInputs.length;
+};

From b2b7484fbf640b9b26bc3089641798951292d367 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Thu, 14 Nov 2024 00:31:36 +0200
Subject: [PATCH 35/40] test(apps/web): Tweak layout for tuple inputs

---
 packages/ui/src/GenericInputForm/TupleComponents.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/GenericInputForm/TupleComponents.tsx b/packages/ui/src/GenericInputForm/TupleComponents.tsx
index b6b3da42b..d904b542c 100644
--- a/packages/ui/src/GenericInputForm/TupleComponents.tsx
+++ b/packages/ui/src/GenericInputForm/TupleComponents.tsx
@@ -37,7 +37,15 @@ export const TupleComponents: FC<TupleComponentsProps> = (props) => {
                         key={`${input.name}-${input.type}-${component.name}-${component.type}`}
                     >
                         {component.type === "tuple" ? (
-                            <TupleComponents input={component} mt={16} />
+                            <TupleComponents
+                                input={component}
+                                mt={componentIndex > 0 ? 16 : 0}
+                                mb={
+                                    input.components[componentIndex + 1]
+                                        ? 16
+                                        : 0
+                                }
+                            />
                         ) : (
                             <TextInput
                                 key={`${component.name}-${component.type}`}

From d1f1f33d5629b1acf9ba269e84a14cdf9bb41bd6 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 18 Nov 2024 13:32:25 +0200
Subject: [PATCH 36/40] feat(packages/ui): Reset abi function params when
 changing json abi value

---
 .../ui/src/GenericInputForm/AbiFields.tsx     | 10 ++++---
 .../src/GenericInputForm/AbiFunctionName.tsx  | 26 +++++--------------
 .../ui/src/GenericInputForm/AbiParameter.tsx  | 25 ++++--------------
 packages/ui/src/GenericInputForm/utils.ts     | 26 +++++++++++++++++++
 4 files changed, 43 insertions(+), 44 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiFields.tsx b/packages/ui/src/GenericInputForm/AbiFields.tsx
index a3814d888..cfc5d1e0e 100644
--- a/packages/ui/src/GenericInputForm/AbiFields.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFields.tsx
@@ -8,12 +8,13 @@ import {
     Textarea,
     Tooltip,
 } from "@mantine/core";
-import { FC, useEffect } from "react";
+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[];
@@ -47,11 +48,11 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                     form.setFieldValue("abiMethod", nextValue as FormAbiMethod);
                     form.setFieldValue("specificationId", "");
                     form.setFieldValue("abiFunctionName", "");
-                    form.setFieldValue("abiFunctionParams", []);
                     form.setFieldValue("humanAbi", "");
                     form.setFieldValue("abiParam", "");
                     form.setFieldValue("savedAbiParam", "");
                     form.setFieldValue("specificationMode", "json_abi");
+                    resetAbiFunctionParams(form, []);
                 }}
             />
 
@@ -78,10 +79,10 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
 
                             form.setFieldValue("specificationId", "");
                             form.setFieldValue("abiFunctionName", "");
-                            form.setFieldValue("abiFunctionParams", []);
                             form.setFieldValue("humanAbi", "");
                             form.setFieldValue("abiParam", "");
                             form.setFieldValue("savedAbiParam", "");
+                            resetAbiFunctionParams(form, []);
                         }}
                     />
 
@@ -112,6 +113,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                                 const nextValue = event.target.value;
                                 form.setFieldValue("humanAbi", nextValue);
                                 form.validateField("humanAbi");
+                                form.setFieldValue("abiFunctionName", "");
                             }}
                         />
                     ) : (
@@ -133,7 +135,7 @@ export const AbiFields: FC<AbiFieldsProps> = ({ specifications }) => {
                             nextValue as string,
                         );
                         form.setFieldValue("abiFunctionName", "");
-                        form.setFieldValue("abiFunctionParams", []);
+                        resetAbiFunctionParams(form, []);
                     }}
                 />
             )}
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index d9575bcdb..69f16e71e 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -4,9 +4,8 @@ import { AbiFunction } from "viem";
 import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
 import { TbAlertCircle } from "react-icons/tb";
-import { generateInitialValues } from "./utils";
+import { resetAbiFunctionParams } from "./utils";
 import { AbiInputParam } from "./types";
-import { isArray } from "ramda-adjunct";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
@@ -30,24 +29,10 @@ export const AbiFunctionName = () => {
             ).find((abiFunction) => abiFunction.name === abiFunctionName);
 
             if (nextAbiFunction) {
-                const emptyFunctionParams: AbiInputParam[] = [];
-                (nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {
-                    generateInitialValues(input, emptyFunctionParams);
-                });
-
-                const prevAbiFunctionParams =
-                    form.getInputProps("abiFunctionParams");
-
-                if (isArray(prevAbiFunctionParams.value)) {
-                    prevAbiFunctionParams.value.forEach((_, index) => {
-                        form.setFieldError(
-                            `abiFunctionParams.${index}.value`,
-                            null,
-                        );
-                    });
-                }
-
-                form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+                resetAbiFunctionParams(
+                    form,
+                    nextAbiFunction.inputs as AbiInputParam[],
+                );
             }
         },
         [combobox, form, selectedSpecification],
@@ -76,6 +61,7 @@ export const AbiFunctionName = () => {
                                         {...form.getInputProps(
                                             "abiFunctionName",
                                         )}
+                                        style={{ overflow: "hidden" }}
                                         onClick={() =>
                                             combobox.toggleDropdown()
                                         }
diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index 6936e1715..a75a63098 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -4,10 +4,9 @@ import { useCallback } from "react";
 import { AbiFunction } from "viem";
 import {
     generateAbiParamFormSpecification,
-    generateInitialValues,
+    resetAbiFunctionParams,
 } from "./utils";
 import { AbiInputParam } from "./types";
-import { isArray } from "ramda-adjunct";
 
 export const AbiParameter = () => {
     const form = useFormContext();
@@ -28,24 +27,10 @@ export const AbiParameter = () => {
         )[0];
 
         if (nextAbiFunction) {
-            const emptyFunctionParams: AbiInputParam[] = [];
-            (nextAbiFunction.inputs as AbiInputParam[]).forEach((input) => {
-                generateInitialValues(input, emptyFunctionParams);
-            });
-
-            const prevAbiFunctionParams =
-                form.getInputProps("abiFunctionParams");
-
-            if (isArray(prevAbiFunctionParams.value)) {
-                prevAbiFunctionParams.value.forEach((_, index) => {
-                    form.setFieldError(
-                        `abiFunctionParams.${index}.value`,
-                        null,
-                    );
-                });
-            }
-
-            form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+            resetAbiFunctionParams(
+                form,
+                nextAbiFunction.inputs as AbiInputParam[],
+            );
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' is not added on purpose because it has unstable reference
     }, [abiParam]);
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index d79459abf..9d6d61160 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -4,9 +4,12 @@ import {
     AbiValueParameter,
     FormSpecification,
     FinalValues,
+    FormValues,
+    FormTransformedValues,
 } from "./types";
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
+import { UseFormReturnType } from "@mantine/form";
 
 export const encodeFunctionParam = (param: AbiValueParameter) => {
     switch (param.type) {
@@ -175,3 +178,26 @@ export const getInputIndexOffset = (inputs: AbiInputParam[]) => {
 
     return nestedInputs.length;
 };
+
+export const resetAbiFunctionParams = (
+    form: UseFormReturnType<
+        FormValues,
+        (values: FormValues) => FormTransformedValues
+    >,
+    inputs: AbiInputParam[],
+) => {
+    const emptyFunctionParams: AbiInputParam[] = [];
+    (inputs as AbiInputParam[]).forEach((input) => {
+        generateInitialValues(input, emptyFunctionParams);
+    });
+
+    const prevAbiFunctionParams = form.getInputProps("abiFunctionParams");
+
+    if (isArray(prevAbiFunctionParams.value)) {
+        prevAbiFunctionParams.value.forEach((_, index) => {
+            form.setFieldError(`abiFunctionParams.${index}.value`, null);
+        });
+    }
+
+    form.setFieldValue("abiFunctionParams", emptyFunctionParams);
+};

From 4592f997b96ed7f794cc88bffd48ba09ff0eb88e Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 19 Nov 2024 11:58:41 +0200
Subject: [PATCH 37/40] feat(packages/ui): Extend handling for tuple params

---
 packages/ui/package.json                      |  1 +
 .../src/GenericInputForm/AbiFunctionName.tsx  |  5 +-
 .../GenericInputForm/AbiFunctionParams.tsx    | 21 ++----
 .../GenericInputForm/FunctionSignature.tsx    |  8 +-
 .../src/GenericInputForm/TupleComponents.tsx  | 19 ++---
 packages/ui/src/GenericInputForm/types.ts     |  7 +-
 .../GenericInputForm/useGenericInputForm.ts   | 75 +++++++++++++++++--
 packages/ui/src/GenericInputForm/utils.ts     | 37 +++++----
 yarn.lock                                     | 36 ++-------
 9 files changed, 119 insertions(+), 90 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index d33fa7993..c0d4f12a8 100644
--- a/packages/ui/package.json
+++ b/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": {
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
index 69f16e71e..aa5ff48e5 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionName.tsx
@@ -5,7 +5,7 @@ import { useCallback } from "react";
 import { FunctionSignature } from "./FunctionSignature";
 import { TbAlertCircle } from "react-icons/tb";
 import { resetAbiFunctionParams } from "./utils";
-import { AbiInputParam } from "./types";
+import { AbiInputParam, GenericFormAbiFunction } from "./types";
 
 export const AbiFunctionName = () => {
     const form = useFormContext();
@@ -15,13 +15,12 @@ export const AbiFunctionName = () => {
         onDropdownClose: () => combobox.resetSelectedOption(),
     });
     const specificationFunctions = (
-        (selectedSpecification?.abi as AbiFunction[]) ?? []
+        (selectedSpecification?.abi as GenericFormAbiFunction[]) ?? []
     ).filter((item) => item.type === "function");
 
     const onChangeAbiFunctionName = useCallback(
         (abiFunctionName: string) => {
             combobox.closeDropdown();
-
             form.setFieldValue("abiFunctionName", abiFunctionName);
 
             const nextAbiFunction = (
diff --git a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
index dbb8d9fc8..d360d123e 100644
--- a/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
+++ b/packages/ui/src/GenericInputForm/AbiFunctionParams.tsx
@@ -5,11 +5,11 @@ import { InputLabel } from "./FunctionSignature";
 import { Fragment } from "react";
 import { TupleComponents } from "./TupleComponents";
 import { AbiInputParam } from "./types";
-import { getInputIndexOffset } from "./utils";
 
 export const AbiFunctionParams = () => {
     const form = useFormContext();
     const { abiFunction } = form.getTransformedValues();
+    const abiFunctionParams = form.getInputProps("abiFunctionParams");
 
     return (
         <>
@@ -17,32 +17,27 @@ export const AbiFunctionParams = () => {
                 <Stack>
                     {abiFunction.inputs.length > 0 ? (
                         <>
-                            {abiFunction.inputs.map((input, index) => {
-                                const prevInputs = abiFunction.inputs.slice(
-                                    0,
-                                    index,
-                                ) as AbiInputParam[];
-                                const indexOffset =
-                                    getInputIndexOffset(prevInputs);
+                            {abiFunction.inputs.map((input) => {
+                                const inputIndex =
+                                    abiFunctionParams.value.findIndex(
+                                        (p: AbiInputParam) => p.id === input.id,
+                                    );
 
                                 return (
-                                    <Fragment
-                                        key={`${input.name}-${input.type}`}
-                                    >
+                                    <Fragment key={input.id}>
                                         {input.type === "tuple" ? (
                                             <TupleComponents
                                                 input={input as AbiInputParam}
                                             />
                                         ) : (
                                             <TextInput
-                                                key={`${input.name}-${input.type}`}
                                                 label={
                                                     <InputLabel input={input} />
                                                 }
                                                 placeholder={`Enter ${input.type} value`}
                                                 withAsterisk
                                                 {...form.getInputProps(
-                                                    `abiFunctionParams.${indexOffset}.value`,
+                                                    `abiFunctionParams.${inputIndex}.value`,
                                                 )}
                                             />
                                         )}
diff --git a/packages/ui/src/GenericInputForm/FunctionSignature.tsx b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
index 462353bfc..be61ef21a 100644
--- a/packages/ui/src/GenericInputForm/FunctionSignature.tsx
+++ b/packages/ui/src/GenericInputForm/FunctionSignature.tsx
@@ -1,7 +1,7 @@
-import { AbiFunction, AbiParameter } from "viem";
+import { AbiParameter } from "viem";
 import { FC, Fragment } from "react";
 import { Box, Text } from "@mantine/core";
-import { AbiInputParam } from "./types";
+import { AbiInputParam, GenericFormAbiFunction } from "./types";
 
 interface FunctionParamLabelProps {
     input: AbiParameter;
@@ -37,7 +37,7 @@ export const InputLabel: FC<InputLabelProps> = ({ input }) => {
 };
 
 interface FunctionSignatureProps {
-    abiFunction: AbiFunction;
+    abiFunction: GenericFormAbiFunction;
 }
 
 export const FunctionSignature: FC<FunctionSignatureProps> = ({
@@ -50,7 +50,7 @@ export const FunctionSignature: FC<FunctionSignatureProps> = ({
             </Text>
             (
             {abiFunction.inputs.map((input, index) => (
-                <Fragment key={`${input.type}-${input.name}`}>
+                <Fragment key={input.id}>
                     <FunctionParamLabel input={input} />
                     {index < abiFunction.inputs.length - 1 ? ", " : ""}
                 </Fragment>
diff --git a/packages/ui/src/GenericInputForm/TupleComponents.tsx b/packages/ui/src/GenericInputForm/TupleComponents.tsx
index d904b542c..fcefa34b9 100644
--- a/packages/ui/src/GenericInputForm/TupleComponents.tsx
+++ b/packages/ui/src/GenericInputForm/TupleComponents.tsx
@@ -9,10 +9,9 @@ interface TupleComponentsProps extends FieldsetProps {
 }
 
 export const TupleComponents: FC<TupleComponentsProps> = (props) => {
-    const form = useFormContext();
     const { input, ...restProps } = props;
-    const { value: abiFunctionParams } =
-        form.getInputProps("abiFunctionParams");
+    const form = useFormContext();
+    const abiFunctionParams = form.getInputProps("abiFunctionParams");
     const firstStandardInput = input.components.find((c) => c.type !== "tuple");
     const firstStandardInputIndex = input.components.findIndex(
         (c) =>
@@ -25,17 +24,12 @@ export const TupleComponents: FC<TupleComponentsProps> = (props) => {
             {input.components.map((component, componentIndex) => {
                 const isFirstStandardInput =
                     componentIndex === firstStandardInputIndex;
-                const targetIndex = abiFunctionParams.findIndex(
-                    (p: AbiInputParam) =>
-                        p.tupleName === input.name &&
-                        p.type === component.type &&
-                        p.name === component.name,
+                const inputIndex = abiFunctionParams.value.findIndex(
+                    (p: AbiInputParam) => p.id === component.id,
                 );
 
                 return (
-                    <Fragment
-                        key={`${input.name}-${input.type}-${component.name}-${component.type}`}
-                    >
+                    <Fragment key={component.id}>
                         {component.type === "tuple" ? (
                             <TupleComponents
                                 input={component}
@@ -48,13 +42,12 @@ export const TupleComponents: FC<TupleComponentsProps> = (props) => {
                             />
                         ) : (
                             <TextInput
-                                key={`${component.name}-${component.type}`}
                                 label={<InputLabel input={component} />}
                                 placeholder={`Enter ${component.type} value`}
                                 mt={isFirstStandardInput ? 0 : 16}
                                 withAsterisk
                                 {...form.getInputProps(
-                                    `abiFunctionParams.${targetIndex}.value`,
+                                    `abiFunctionParams.${inputIndex}.value`,
                                 )}
                             />
                         )}
diff --git a/packages/ui/src/GenericInputForm/types.ts b/packages/ui/src/GenericInputForm/types.ts
index c664fa81f..194510089 100644
--- a/packages/ui/src/GenericInputForm/types.ts
+++ b/packages/ui/src/GenericInputForm/types.ts
@@ -19,9 +19,14 @@ export type AbiValueParameter = Pick<AbiParameter, "type" | "name"> & {
 
 export type AbiInputParam = AbiValueParameter & {
     tupleName?: string;
+    id?: string;
     components: AbiInputParam[];
 };
 
+export type GenericFormAbiFunction = Omit<AbiFunction, "inputs"> & {
+    inputs: AbiInputParam[];
+};
+
 export interface FormValues {
     mode: FormMode;
     application: string;
@@ -48,7 +53,7 @@ export interface FormTransformedValues {
     savedAbiParam: string;
     specificationId: string;
     abiFunctionName: string;
-    abiFunction: AbiFunction | undefined;
+    abiFunction: GenericFormAbiFunction | undefined;
     selectedSpecification: FormSpecification | undefined;
 }
 
diff --git a/packages/ui/src/GenericInputForm/useGenericInputForm.ts b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
index 1e63c401f..d7373a48d 100644
--- a/packages/ui/src/GenericInputForm/useGenericInputForm.ts
+++ b/packages/ui/src/GenericInputForm/useGenericInputForm.ts
@@ -10,14 +10,23 @@ import {
     validateSpecificationId,
 } from "./validations";
 import { AbiFunction, getAddress, Hex, isAddress, zeroAddress } from "viem";
-import { FormSpecification } from "./types";
+import { FormSpecification, GenericFormAbiFunction } from "./types";
 import {
+    augmentInputsWithIds,
     generateAbiParamFormSpecification,
     generateHumanAbiFormSpecification,
 } from "./utils";
 import { initialValues } from "./initialValues";
+import { v4 as uuidv4 } from "uuid";
+import { useRef } from "react";
+import { equals, omit } from "ramda";
 
 export const useGenericInputForm = (specifications: FormSpecification[]) => {
+    const lastSelectedSpecification = useRef<FormSpecification | undefined>();
+    const lastSelectedSpecificationWithIds = useRef<
+        FormSpecification | undefined
+    >();
+
     return useForm({
         validateInputOnBlur: true,
         initialValues,
@@ -34,7 +43,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
             },
         },
         transformValues: (values) => {
-            const selectedSpecification =
+            let selectedSpecification =
                 values.abiMethod === "existing"
                     ? specifications.find(
                           (s) => s.id === values.specificationId,
@@ -43,6 +52,61 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                     ? generateHumanAbiFormSpecification(values.humanAbi)
                     : generateAbiParamFormSpecification(values.savedAbiParam);
 
+            if (
+                selectedSpecification &&
+                !equals(
+                    omit(["id"], selectedSpecification),
+                    omit(
+                        ["id"],
+                        (lastSelectedSpecification.current ??
+                            {}) as FormSpecification,
+                    ),
+                )
+            ) {
+                lastSelectedSpecification.current = {
+                    ...selectedSpecification,
+                };
+
+                const selectedSpecificationWithIds = {
+                    ...selectedSpecification,
+                    abi: selectedSpecification.abi.map((abiFunction) => {
+                        const nextAbiFunction = {
+                            ...abiFunction,
+                        } as GenericFormAbiFunction;
+
+                        nextAbiFunction.inputs = nextAbiFunction.inputs.map(
+                            (input) => {
+                                const nextInput = { ...input, id: uuidv4() };
+
+                                if (nextInput.type === "tuple") {
+                                    nextInput.components =
+                                        augmentInputsWithIds(nextInput);
+                                }
+
+                                return nextInput;
+                            },
+                        );
+
+                        return nextAbiFunction;
+                    }),
+                };
+
+                selectedSpecification = { ...selectedSpecificationWithIds };
+                lastSelectedSpecificationWithIds.current = {
+                    ...selectedSpecificationWithIds,
+                };
+            } else if (lastSelectedSpecificationWithIds.current) {
+                selectedSpecification = {
+                    ...lastSelectedSpecificationWithIds.current,
+                };
+            }
+
+            const abiFunction = (
+                (selectedSpecification?.abi as AbiFunction[]) ?? []
+            ).find(
+                (abiFunction) => abiFunction.name === values.abiFunctionName,
+            ) as GenericFormAbiFunction;
+
             return {
                 mode: values.mode,
                 address: isAddress(values.application)
@@ -57,12 +121,7 @@ export const useGenericInputForm = (specifications: FormSpecification[]) => {
                 specificationId: values.specificationId,
                 abiFunctionName: values.abiFunctionName,
                 selectedSpecification,
-                abiFunction: (
-                    (selectedSpecification?.abi as AbiFunction[]) ?? []
-                ).find(
-                    (abiFunction) =>
-                        abiFunction.name === values.abiFunctionName,
-                ),
+                abiFunction,
             };
         },
     });
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 9d6d61160..9452f407f 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -10,6 +10,7 @@ import {
 import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 import { UseFormReturnType } from "@mantine/form";
+import { v4 as uuidv4 } from "uuid";
 
 export const encodeFunctionParam = (param: AbiValueParameter) => {
     switch (param.type) {
@@ -43,7 +44,7 @@ export const generateHumanAbiFormSpecification = (humanAbi: string) => {
 
     return isObject(generatedAbi)
         ? ({
-              id: new Date().getTime().toString(),
+              id: uuidv4(),
               name: "Generated specification",
               abi: generatedAbi,
           } as FormSpecification)
@@ -59,7 +60,7 @@ export const generateAbiParamFormSpecification = (abiParam: string) => {
 
     return isArray(abiParameters)
         ? ({
-              id: new Date().getTime().toString(),
+              id: uuidv4(),
               name: "Generated specification",
               abi: [
                   {
@@ -88,10 +89,6 @@ export const generateInitialValues = (
                     value: "",
                 };
 
-                if (parentInput.type === "tuple") {
-                    flatInput.tupleName = parentInput.name;
-                }
-
                 flatInputs.push(flatInput);
             }
         });
@@ -103,6 +100,20 @@ export const generateInitialValues = (
     }
 };
 
+export const augmentInputsWithIds = (
+    parentInput: AbiInputParam,
+): AbiInputParam[] => {
+    return parentInput.components.map((input: AbiInputParam) => {
+        const nextInput = { ...input, id: uuidv4() };
+
+        if (nextInput.type === "tuple") {
+            nextInput.components = augmentInputsWithIds(input);
+        }
+
+        return nextInput;
+    });
+};
+
 export const generateFinalValues = (
     inputs: AbiParameter[],
     params: AbiValueParameter[],
@@ -165,20 +176,6 @@ const getTupleInputs = (
     });
 };
 
-export const getInputIndexOffset = (inputs: AbiInputParam[]) => {
-    const nestedInputs: AbiParameter[] = [];
-
-    inputs.forEach((input) => {
-        if (input.type === "tuple") {
-            getTupleInputs(input, nestedInputs);
-        } else {
-            nestedInputs.push(input);
-        }
-    });
-
-    return nestedInputs.length;
-};
-
 export const resetAbiFunctionParams = (
     form: UseFormReturnType<
         FormValues,
diff --git a/yarn.lock b/yarn.lock
index 8e8f415e9..269c7ff1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16469,16 +16469,7 @@ string-env-interpolation@^1.0.1:
   resolved "https://registry.yarnpkg.com/string-env-interpolation/-/string-env-interpolation-1.0.1.tgz#ad4397ae4ac53fe6c91d1402ad6f6a52862c7152"
   integrity sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -16589,7 +16580,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -16603,13 +16594,6 @@ strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -17841,6 +17825,11 @@ uuid@^10.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
+uuid@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.0.3.tgz#248451cac9d1a4a4128033e765d137e2b2c49a3d"
+  integrity sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==
+
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
@@ -18333,7 +18322,7 @@ wordwrap@^1.0.0:
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -18351,15 +18340,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From d97303515f2d1eae9f1b970c7bf28b2e7c273226 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 19 Nov 2024 20:26:04 +0200
Subject: [PATCH 38/40] chore(packages/ui): Refactoring

---
 packages/ui/src/GenericInputForm/index.tsx | 13 +++++++++----
 packages/ui/src/GenericInputForm/utils.ts  | 16 ++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/index.tsx b/packages/ui/src/GenericInputForm/index.tsx
index a58216cfa..b3c832d5b 100644
--- a/packages/ui/src/GenericInputForm/index.tsx
+++ b/packages/ui/src/GenericInputForm/index.tsx
@@ -28,7 +28,12 @@ import { TransactionProgress } from "../TransactionProgress";
 import useUndeployedApplication from "../hooks/useUndeployedApplication";
 import { TransactionFormSuccessData } from "../DepositFormTypes";
 import { AbiFields } from "./AbiFields";
-import { AbiValueParameter, FormMode, FormSpecification } from "./types";
+import {
+    AbiInputParam,
+    FormMode,
+    FormSpecification,
+    GenericFormAbiFunction,
+} from "./types";
 import { FormProvider } from "./context";
 import { useGenericInputForm } from "./useGenericInputForm";
 import { useDebouncedCallback } from "@mantine/hooks";
@@ -94,16 +99,16 @@ export const GenericInputForm: FC<GenericInputFormProps> = (props) => {
     );
 
     const encodeFunctionParamsDebounced = useDebouncedCallback(
-        (params: AbiValueParameter[]) => {
+        (params: AbiInputParam[]) => {
             const abiFunctions =
-                (selectedSpecification?.abi as AbiFunction[]) ?? [];
+                (selectedSpecification?.abi as GenericFormAbiFunction[]) ?? [];
             const nextAbiFunction = abiFunctions.find(
                 (f) => f.name === abiFunctionName,
             );
 
             if (nextAbiFunction) {
                 const finalValues = generateFinalValues(
-                    nextAbiFunction.inputs.slice(),
+                    [...nextAbiFunction.inputs],
                     params,
                 );
 
diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 9452f407f..015d47e72 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -115,8 +115,8 @@ export const augmentInputsWithIds = (
 };
 
 export const generateFinalValues = (
-    inputs: AbiParameter[],
-    params: AbiValueParameter[],
+    inputs: AbiInputParam[],
+    params: AbiInputParam[],
 ) => {
     const finalArr: FinalValues = [];
 
@@ -125,10 +125,10 @@ export const generateFinalValues = (
             const currArr: FinalValues = [];
             finalArr.push(currArr);
 
-            getTupleValues(input as AbiInputParam, params, finalArr, currArr);
+            getTupleValues(input, params, finalArr, currArr);
         } else {
             const param = params.find((p) => {
-                return p.name === input.name && p.type === input.type;
+                return p.id === input.id;
             }) as AbiValueParameter;
             const value = encodeFunctionParam(param);
             finalArr.push(value);
@@ -140,7 +140,7 @@ export const generateFinalValues = (
 
 const getTupleValues = (
     tupleInput: AbiInputParam,
-    params: AbiValueParameter[],
+    params: AbiInputParam[],
     finalArr: FinalValues = [],
     currentArr: FinalValues = [],
 ) => {
@@ -151,11 +151,7 @@ const getTupleValues = (
             getTupleValues(input, params, finalArr, nextCurrentArr);
         } else {
             const param = params.find((p) => {
-                return (
-                    p.tupleName === tupleInput.name &&
-                    p.name === input.name &&
-                    p.type === input.type
-                );
+                return p.id === input.id;
             }) as AbiValueParameter;
             const value = encodeFunctionParam(param);
             currentArr.push(value);

From bdb550b17774a8677c6dc306b541c93bd5041990 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Tue, 19 Nov 2024 22:27:46 +0200
Subject: [PATCH 39/40] fix(packages/ui): Fix setting of abi function params

---
 .../ui/src/GenericInputForm/AbiParameter.tsx  | 24 ++++++++++++++++---
 .../ui/test/GenericInputForm/index.test.tsx   |  4 ----
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/AbiParameter.tsx b/packages/ui/src/GenericInputForm/AbiParameter.tsx
index a75a63098..57d8c7fe8 100644
--- a/packages/ui/src/GenericInputForm/AbiParameter.tsx
+++ b/packages/ui/src/GenericInputForm/AbiParameter.tsx
@@ -1,6 +1,6 @@
 import { useFormContext } from "./context";
 import { Button, TextInput } from "@mantine/core";
-import { useCallback } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import { AbiFunction } from "viem";
 import {
     generateAbiParamFormSpecification,
@@ -10,11 +10,12 @@ import { AbiInputParam } from "./types";
 
 export const AbiParameter = () => {
     const form = useFormContext();
-    const { abiParam, savedAbiParam } = form.getTransformedValues();
+    const { abiParam, savedAbiParam, specificationId, selectedSpecification } =
+        form.getTransformedValues();
+    const lastSpecificationId = useRef(specificationId);
 
     const addABIParam = useCallback(() => {
         form.setFieldValue("savedAbiParam", abiParam);
-
         const selectedSpecification =
             generateAbiParamFormSpecification(abiParam);
 
@@ -35,6 +36,23 @@ export const AbiParameter = () => {
         // eslint-disable-next-line react-hooks/exhaustive-deps -- 'form' is not added on purpose because it has unstable reference
     }, [abiParam]);
 
+    useEffect(() => {
+        if (specificationId !== lastSpecificationId.current) {
+            lastSpecificationId.current = specificationId;
+
+            const nextAbiFunction = (
+                selectedSpecification?.abi as AbiFunction[]
+            )[0];
+
+            if (nextAbiFunction) {
+                resetAbiFunctionParams(
+                    form,
+                    nextAbiFunction.inputs as AbiInputParam[],
+                );
+            }
+        }
+    }, [form, selectedSpecification?.abi, specificationId]);
+
     return (
         <TextInput
             label="ABI Parameter"
diff --git a/packages/ui/test/GenericInputForm/index.test.tsx b/packages/ui/test/GenericInputForm/index.test.tsx
index 99a573d0d..7956994c2 100644
--- a/packages/ui/test/GenericInputForm/index.test.tsx
+++ b/packages/ui/test/GenericInputForm/index.test.tsx
@@ -66,10 +66,6 @@ vi.mock("@mantine/form", async () => {
 
 describe("GenericInputForm", () => {
     // beforeAll(() => {
-    //     vi.spyOn(initialValues, "initialValues", "get").mockReturnValue({
-    //         ...initialValues.initialValues,
-    //     });
-    // });
     afterAll(() => {
         vi.clearAllMocks();
     });

From 2f746dba9c4a4484890e0a4b6d45856bb27da281 Mon Sep 17 00:00:00 2001
From: Neven Dyulgerov <neven.diulgerov@gmail.com>
Date: Mon, 25 Nov 2024 09:58:32 +0200
Subject: [PATCH 40/40] chore(packages/ui): Refactoring

---
 packages/ui/src/GenericInputForm/utils.ts       | 4 +++-
 packages/ui/src/GenericInputForm/validations.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/GenericInputForm/utils.ts b/packages/ui/src/GenericInputForm/utils.ts
index 015d47e72..7876f4e5c 100644
--- a/packages/ui/src/GenericInputForm/utils.ts
+++ b/packages/ui/src/GenericInputForm/utils.ts
@@ -7,11 +7,13 @@ import {
     FormValues,
     FormTransformedValues,
 } from "./types";
-import { prepareSignatures } from "web/src/components/specification/utils";
 import { isArray, isBlank, isObject } from "ramda-adjunct";
 import { UseFormReturnType } from "@mantine/form";
 import { v4 as uuidv4 } from "uuid";
 
+export const prepareSignatures = (multiline: string) =>
+    multiline.split("\n").map((signature) => signature?.trim());
+
 export const encodeFunctionParam = (param: AbiValueParameter) => {
     switch (param.type) {
         case "bool":
diff --git a/packages/ui/src/GenericInputForm/validations.ts b/packages/ui/src/GenericInputForm/validations.ts
index af1e3f396..bb4a6751e 100644
--- a/packages/ui/src/GenericInputForm/validations.ts
+++ b/packages/ui/src/GenericInputForm/validations.ts
@@ -1,7 +1,7 @@
 import { isAddress, isHex, parseAbi, parseAbiParameters } from "viem";
 import { FormValues } from "./types";
 import { isBlank } from "ramda-adjunct";
-import { prepareSignatures } from "web/src/components/specification/utils";
+import { prepareSignatures } from "./utils";
 
 export const validateApplication = (value: string) =>
     value !== "" && isAddress(value) ? null : "Invalid application";