feat: disable estimate fee when input is invalid

CHANGELOG.md

@@ -62,6 +62,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#500](https://github.com/alleslabs/celatone-frontend/pull/500) Disable estimated fee when input is invalid
 - [#491](https://github.com/alleslabs/celatone-frontend/pull/491) Improve scrolling into view by delaying scroll function
 - [#489](https://github.com/alleslabs/celatone-frontend/pull/489) Improve jsonschema query response UI and fix jsonschema incorrect oneOf behavior
 - [#484](https://github.com/alleslabs/celatone-frontend/pull/484) Fix text size consistency in txs message

src/lib/components/json-schema/form/index.tsx

@@ -10,7 +10,7 @@ import {
   Widgets as DefaultWidgets,
 } from "@rjsf/chakra-ui";
 import type { FormProps } from "@rjsf/core";
-import type { RJSFSchema } from "@rjsf/utils";
+import type { RJSFSchema, RJSFValidationError } from "@rjsf/utils";
 import { createSchemaUtils } from "@rjsf/utils";
 import { customizeValidator } from "@rjsf/validator-ajv8";
 import isEqual from "lodash/isEqual";
@@ -99,7 +99,10 @@ export interface JsonSchemaFormProps
   initialFormData?: Record<string, unknown>;
   onSubmit?: (data: Record<string, unknown>) => void;
   /** Onchange callback is with BROKEN data */
-  onChange?: (data: Record<string, unknown>) => void;
+  onChange?: (
+    data: Record<string, unknown>,
+    errors: RJSFValidationError[]
+  ) => void;
   formContext?: Record<string, unknown>;
 }
 
@@ -136,13 +139,13 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
   };
 
   const onChange = useCallback(
-    (data: Record<string, unknown>) => {
+    (data: Record<string, unknown>, errors: RJSFValidationError[]) => {
       const values = { ...data };
       if (data) {
         fixOneOfKeysCallback(values);
         if (!isEqual(formData, values)) {
           setFormData(values);
-          propsOnChange?.(values);
+          propsOnChange?.(values, errors);
         }
       }
     },
@@ -184,9 +187,11 @@ export const JsonSchemaForm: FC<JsonSchemaFormProps> = ({
         ...templates,
       }}
       validator={v8Validator}
-      onChange={({ formData: values }) => {
+      liveValidate
+      showErrorList={false}
+      onChange={({ formData: values, errors }) => {
         // log.info(values)
-        onChange?.(values);
+        onChange?.(values, errors);
       }}
       onSubmit={({ formData: values }) => {
         // log.info(values)

src/lib/components/json-schema/form/templates/FieldTemplate.tsx

@@ -19,7 +19,7 @@ export default function FieldTemplate<T = any, F = any>(
     registry,
     required,
     rawErrors = [],
-    errors,
+    // errors,
     help,
     schema,
     uiSchema,
@@ -54,7 +54,7 @@ export default function FieldTemplate<T = any, F = any>(
         isInvalid={rawErrors && rawErrors.length > 0}
       >
         {children}
-        {errors}
+        {/* {errors} */}
         {help}
       </FormControl>
     </WrapIfAdditionalTemplate>

src/lib/components/json-schema/form/widgets/SelectWidget.tsx

@@ -44,7 +44,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
     onChange,
     onBlur,
     onFocus,
-    rawErrors = [],
+    // rawErrors = [],
     uiSchema,
     registry,
   } = props;
@@ -122,7 +122,7 @@ const SelectWidget = <T, F>(props: WidgetProps<T, F>) => {
       isDisabled={disabled || readonly}
       isRequired={required && !readonly}
       isReadOnly={readonly}
-      isInvalid={rawErrors && rawErrors.length > 0}
+      // isInvalid={rawErrors && rawErrors.length > 0}
       sx={{ "& > p": { mt: 4, mb: 2 } }}
     >
       {!!schema.description && (

src/lib/pages/execute/components/schema-execute/ExecuteBox.tsx

@@ -86,7 +86,8 @@ export const ExecuteBox = ({
   // ------------------------------------------//
   const [fee, setFee] = useState<StdFee>();
   const [msg, setMsg] = useState("{}");
-  const [error, setError] = useState<string>();
+  const [isValidForm, setIsValidForm] = useState(false);
+  const [simulateFeeError, setSimulateFeeError] = useState<string>();
   const [composedTxMsg, setComposedTxMsg] = useState<ComposedMsg[]>([]);
   const [processing, setProcessing] = useState(false);
 
@@ -97,15 +98,15 @@ export const ExecuteBox = ({
     mode: "all",
     defaultValues: assetDefault,
   });
-  const { errors } = useFormState({ control });
+  const { errors: attachFundErrors } = useFormState({ control });
   const { assetsJsonStr, assetsSelect, attachFundsOption } = watch();
 
   // ------------------------------------------//
   // -------------------LOGICS-----------------//
   // ------------------------------------------//
-  const isValidAssetsSelect = !errors.assetsSelect;
+  const isValidAssetsSelect = !attachFundErrors.assetsSelect;
   const isValidAssetsJsonStr =
-    !errors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
+    !attachFundErrors.assetsJsonStr && jsonValidate(assetsJsonStr) === null;
 
   const assetsSelectString = JSON.stringify(assetsSelect);
 
@@ -115,7 +116,8 @@ export const ExecuteBox = ({
       jsonValidate(msg) === null &&
       address &&
       contractAddress &&
-      opened
+      opened &&
+      isValidForm
     );
     switch (attachFundsOption) {
       case AttachFundsType.ATTACH_FUNDS_SELECT:
@@ -129,6 +131,7 @@ export const ExecuteBox = ({
     msg,
     address,
     opened,
+    isValidForm,
     contractAddress,
     attachFundsOption,
     isValidAssetsSelect,
@@ -142,12 +145,12 @@ export const ExecuteBox = ({
     enabled: composedTxMsg.length > 0,
     messages: composedTxMsg,
     onSuccess: (gasRes) => {
-      setError(undefined);
+      setSimulateFeeError(undefined);
       if (gasRes) setFee(fabricateFee(gasRes));
       else setFee(undefined);
     },
     onError: (e) => {
-      setError(e.message);
+      setSimulateFeeError(e.message);
       setFee(undefined);
     },
   });
@@ -211,6 +214,10 @@ export const ExecuteBox = ({
     }
   }, [initialFunds, reset, setValue]);
 
+  /**
+   * @remarks
+   * Handle when there is an initialMsg
+   */
   useEffect(() => {
     if (Object.keys(initialMsg).length) setMsg(JSON.stringify(initialMsg));
   }, [initialMsg]);
@@ -229,6 +236,11 @@ export const ExecuteBox = ({
       }, 1000);
       return () => clearTimeout(timeoutId);
     }
+
+    // reset when enableExecute is false
+    setComposedTxMsg([]);
+    setFee(undefined);
+
     return () => {};
   }, [
     address,
@@ -262,12 +274,15 @@ export const ExecuteBox = ({
               formId={`execute-${msgSchema.title}`}
               schema={msgSchema.schema}
               initialFormData={initialMsg}
-              onChange={(data) => setMsg(JSON.stringify(data))}
+              onChange={(data, errors) => {
+                setIsValidForm(errors.length === 0);
+                setMsg(JSON.stringify(data));
+              }}
             />
-            {error && (
+            {simulateFeeError && (
               <Alert variant="error" mb={3} alignItems="center">
                 <AlertDescription wordBreak="break-word">
-                  {error}
+                  {simulateFeeError}
                 </AlertDescription>
               </Alert>
             )}