feat(apps/web): Revert setting the abiParamEntry error on adding a ne…

…w entry. Display props error only when the entries are empty. Memoize entries error.

apps/web/src/components/specification/form/fields/HumanReadableABIParameter.tsx

@@ -10,8 +10,8 @@ import {
 } from "@mantine/core";
 import { createFormActions, useForm } from "@mantine/form";
 import { clone } from "ramda";
-import { isFunction, isNotNilOrEmpty } from "ramda-adjunct";
-import { FC, ReactNode, useEffect, useRef } from "react";
+import { isFunction, isNilOrEmpty, isNotNilOrEmpty } from "ramda-adjunct";
+import { FC, ReactNode, useEffect, useMemo, useRef } from "react";
 import { TbTrash } from "react-icons/tb";
 import { parseAbiParameters } from "viem";
 
@@ -49,7 +49,10 @@ export const HumanReadableABIParameter: FC<HumanReadableABIParameter> = (
 
     const ref = useRef<HTMLInputElement>(null);
     const { entries, abiParamEntry } = form.getTransformedValues();
-    const error = isNotNilOrEmpty(entries) ? checkError(entries) : null;
+    const error = useMemo(
+        () => (isNotNilOrEmpty(entries) ? checkError(entries) : null),
+        [entries],
+    );
     const onAbiParamsChange = props.onAbiParamsChange;
 
     const addABIParam = () => {
@@ -81,22 +84,12 @@ export const HumanReadableABIParameter: FC<HumanReadableABIParameter> = (
                 rightSection={
                     <Button
                         data-testid="abi-parameter-add-button"
-                        onClick={() => {
-                            try {
-                                parseAbiParameters(abiParamEntry);
-                                addABIParam();
-                            } catch (error: any) {
-                                form.setFieldError(
-                                    "abiParamEntry",
-                                    error.message,
-                                );
-                            }
-                        }}
+                        onClick={addABIParam}
                     >
                         Add
                     </Button>
                 }
-                error={props.error || form.errors.abiParamEntry}
+                error={isNilOrEmpty(entries) ? props.error : null}
             />
 
             {entries.length > 0 && (