fix(wallet): Improve send token and nft forms (#2778)

* fix: nft token send form initial validation * fix: manually validate form inputs in Send Token Form * fix: disbling button in TransferNftForm
iotaledger · Sep 26, 2024 · 15121c8 · 15121c8
1 parent 3045570
commit 15121c8
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/apps/wallet/src/ui/app/components/address-input/index.tsx b/apps/wallet/src/ui/app/components/address-input/index.tsx
@@ -14,24 +14,31 @@ export interface AddressInputProps {
     placeholder?: string;
     name: string;
     label?: string;
+    shouldValidateManually?: boolean;
 }
 
 export function AddressInput({
     disabled: forcedDisabled,
     placeholder = '0x...',
     name = 'to',
     label = 'Enter Recipient Address',
+    shouldValidateManually,
 }: AddressInputProps) {
     const [field, meta] = useField(name);
 
-    const { isSubmitting, setFieldValue } = useFormikContext();
+    const { isSubmitting, setFieldValue, validateField } = useFormikContext();
     const iotaAddressValidation = useIotaAddressValidation();
 
     const disabled = forcedDisabled !== undefined ? forcedDisabled : isSubmitting;
     const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
         (e) => {
             const address = e.currentTarget.value;
             setFieldValue(name, iotaAddressValidation.cast(address));
+            if (shouldValidateManually) {
+                setTimeout(() => {
+                    validateField(name);
+                }, 0);
+            }
         },
         [setFieldValue, name, iotaAddressValidation],
     );

diff --git a/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx b/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx
@@ -88,11 +88,11 @@ export function TransferNFTForm({ objectId, objectType }: TransferNFTFormProps)
             initialValues={{
                 to: '',
             }}
-            validateOnMount
+            validateOnChange
             validationSchema={validationSchema}
             onSubmit={({ to }) => transferNFT.mutateAsync(to)}
         >
-            {({ isValid }) => (
+            {({ isValid, dirty }) => (
                 <Form autoComplete="off" className="h-full">
                     <div className="flex h-full flex-col justify-between">
                         <Field
@@ -102,7 +102,11 @@ export function TransferNFTForm({ objectId, objectType }: TransferNFTFormProps)
                             placeholder="Enter Address"
                         />
 
-                        <Button htmlType={ButtonHtmlType.Submit} disabled={!isValid} text="Send" />
+                        <Button
+                            htmlType={ButtonHtmlType.Submit}
+                            disabled={!(isValid && dirty)}
+                            text="Send"
+                        />
                     </div>
                 </Form>
             )}

diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/FormInput.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/FormInput.tsx
@@ -23,13 +23,18 @@ export function FormInput({
 
     const isActionButtonDisabled =
         isInputDisabled || meta?.initialValue === meta?.value || !!meta?.error;
-    const errorMessage = meta?.error && meta.touched ? meta.error : undefined;
+    const errorMessage = meta?.error ? meta.error : undefined;
 
     const isNumericFormat = props.type === InputType.NumericFormat;
     const numericPropsOnly: Partial<NumericFormatInputProps> = {
         decimalScale: decimals ? undefined : 0,
         thousandSeparator: true,
-        onValueChange: (values) => form.setFieldValue(props.name, values.value),
+        onValueChange: (values) => {
+            form.setFieldValue(props.name, values.value);
+            setTimeout(() => {
+                form.validateField(props.name);
+            }, 0);
+        },
     };
 
     return (

diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useActiveAddress } from '_app/hooks/useActiveAddress';
-import { Loading } from '_components';
+import { AddressInput, Loading } from '_components';
 import { GAS_SYMBOL } from '_src/ui/app/redux/slices/iota-objects/Coin';
 import {
     useGetAllCoins,
@@ -17,7 +17,7 @@ import { useIotaClient } from '@iota/dapp-kit';
 import { type CoinStruct } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useQuery } from '@tanstack/react-query';
-import { Form, Formik, useFormikContext } from 'formik';
+import { Field, Form, Formik, useFormikContext } from 'formik';
 import { useEffect, useMemo } from 'react';
 
 import { createValidationSchemaStepOne } from './validation';
@@ -115,7 +115,7 @@ function useGasBudgetEstimation({
     // gasBudgetEstimation should change when the amount above changes
 
     useEffect(() => {
-        setFieldValue('gasBudgetEst', formattedGas, true);
+        setFieldValue('gasBudgetEst', formattedGas, false);
     }, [formattedGas, setFieldValue, values.amount]);
 
     return formattedGas ? formattedGas + ' ' + GAS_SYMBOL : '--';
@@ -201,8 +201,8 @@ export function SendTokenForm({
                 }}
                 validationSchema={validationSchemaStepOne}
                 enableReinitialize
-                validateOnMount
-                validateOnChange
+                validateOnChange={false}
+                validateOnBlur={false}
                 onSubmit={handleFormSubmit}
             >
                 {({ isValid, isSubmitting, setFieldValue, values, submitForm }) => {
@@ -235,7 +235,7 @@ export function SendTokenForm({
                         <div className="flex h-full w-full flex-col">
                             <Form autoComplete="off" noValidate className="flex-1">
                                 <div className="flex h-full w-full flex-col gap-md">
-                                    {!hasEnoughBalance && isValid ? (
+                                    {!hasEnoughBalance ? (
                                         <InfoBox
                                             type={InfoBoxType.Warning}
                                             supportingText="Insufficient IOTA to cover transaction"
@@ -252,12 +252,12 @@ export function SendTokenForm({
                                         onActionClick={onMaxTokenButtonClick}
                                         isActionButtonDisabled={isMaxActionDisabled}
                                     />
-
-                                    <FormInput
+                                    <Field
+                                        component={AddressInput}
+                                        allowNegative={false}
                                         name="to"
                                         placeholder="Enter Address"
-                                        label="Address"
-                                        type={InputType.Text}
+                                        shouldValidateManually
                                     />
                                 </div>
                             </Form>