From 17058ad9be7bd965721c80515c172e537d86ae4c Mon Sep 17 00:00:00 2001
From: cpl121 <cpeon@boxfish.studio>
Date: Thu, 14 Nov 2024 14:00:17 +0100
Subject: [PATCH] fix(wallet-dashboard): improvements

---
 .../src/components/Inputs/AddressInput.tsx    |  1 -
 .../components/Inputs/SendTokenFormInput.tsx  | 31 +++++++++----------
 .../SendToken/views/EnterValuesFormView.tsx   |  6 ++--
 .../home/transfer-coin/SendTokenForm.tsx      | 11 +++----
 4 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/apps/core/src/components/Inputs/AddressInput.tsx b/apps/core/src/components/Inputs/AddressInput.tsx
index bcfe125eaac..187e773ad06 100644
--- a/apps/core/src/components/Inputs/AddressInput.tsx
+++ b/apps/core/src/components/Inputs/AddressInput.tsx
@@ -29,7 +29,6 @@ export function AddressInput({
     const handleOnChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const address = e.currentTarget.value;
-            iotaAddressValidation.cast(address);
             helpers.setValue(iotaAddressValidation.cast(address));
         },
         [name, iotaAddressValidation],
diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
index 3956c18f573..c3346cef1f9 100644
--- a/apps/core/src/components/Inputs/SendTokenFormInput.tsx
+++ b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
@@ -6,17 +6,16 @@ import { CoinStruct } from '@iota/iota-sdk/client';
 import { useGasBudgetEstimation } from '../../hooks';
 import { useEffect } from 'react';
 import { FormikProps, useField } from 'formik';
+import React from 'react';
 
 export interface SendTokenInputProps<FormValues> {
     coins: CoinStruct[];
     symbol: string;
     coinDecimals: number;
     activeAddress: string;
-    values: {
-        amount: string;
-        to: string;
-        isPayAllIota: boolean;
-    };
+    amount: string;
+    to: string;
+    isPayAllIota: boolean;
     onActionClick: () => Promise<void>;
     isMaxActionDisabled?: boolean;
     name: string;
@@ -25,7 +24,9 @@ export interface SendTokenInputProps<FormValues> {
 
 export function SendTokenFormInput<FormValues>({
     coins,
-    values,
+    amount,
+    to,
+    isPayAllIota,
     symbol,
     coinDecimals,
     activeAddress,
@@ -38,20 +39,18 @@ export function SendTokenFormInput<FormValues>({
         coinDecimals,
         coins: coins ?? [],
         activeAddress,
-        to: values.to,
-        amount: values.amount,
-        isPayAllIota: values.isPayAllIota,
+        to: to,
+        amount: amount,
+        isPayAllIota: isPayAllIota,
     });
 
-    const [field, meta] = useField<string>(name);
+    const [field, meta, helpers] = useField<string>(name);
 
     const numericPropsOnly: Partial<NumericFormatInputProps> = {
         decimalScale: coinDecimals ? undefined : 0,
         thousandSeparator: true,
         onValueChange: (values) => {
-            form.setFieldValue(field.name, values.value).then(() => {
-                form.validateField(field.name);
-            });
+            helpers.setValue(values.value)
         },
     };
 
@@ -67,18 +66,18 @@ export function SendTokenFormInput<FormValues>({
     // gasBudgetEstimation should change when the amount above changes
     useEffect(() => {
         form.setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
-    }, [gasBudgetEstimation, form.setFieldValue, values.amount]);
+    }, [gasBudgetEstimation, form.setFieldValue, amount]);
 
     return (
         <Input
             type={InputType.NumericFormat}
-            name={'amount'}
+            name="amount"
             value={field.value}
             caption="Est. Gas Fees:"
             placeholder="0.00"
             label="Send Amount"
             suffix={` ${symbol}`}
-            prefix={values.isPayAllIota ? '~ ' : undefined}
+            prefix={isPayAllIota ? '~ ' : undefined}
             allowNegative={false}
             errorMessage={errorMessage}
             amountCounter={!errorMessage ? (coins ? gasBudgetEstimation : '--') : undefined}
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
index 91021dfd2e2..d43b4ab5f21 100644
--- a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
@@ -65,8 +65,6 @@ function FormInputs({
     setFieldValue,
     values,
     submitForm,
-    touched,
-    errors,
     coinType,
     coinDecimals,
     coinBalance,
@@ -122,12 +120,14 @@ function FormInputs({
                             return (
                                 <SendTokenFormInput
                                     form={form}
+                                    amount={values.amount}
+                                    to={values.to}
+                                    isPayAllIota={values.isPayAllIota}
                                     name={field.name}
                                     symbol={symbol}
                                     coins={coins}
                                     coinDecimals={coinDecimals}
                                     activeAddress={activeAddress}
-                                    values={values}
                                     onActionClick={onMaxTokenButtonClick}
                                     isMaxActionDisabled={isMaxActionDisabled}
                                 />
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
index edc5fda3a04..b6b91783fd3 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
@@ -140,8 +140,8 @@ export function SendTokenForm({
                 }}
                 validationSchema={validationSchemaStepOne}
                 enableReinitialize
-                validateOnChange={false}
-                validateOnBlur={false}
+                validateOnChange={true}
+                validateOnBlur={true}
                 onSubmit={handleFormSubmit}
             >
                 {({
@@ -150,9 +150,6 @@ export function SendTokenForm({
                     setFieldValue,
                     values,
                     submitForm,
-                    handleBlur,
-                    touched,
-                    errors,
                 }) => {
                     const newPayIotaAll =
                         parseAmount(values.amount, coinDecimals) === coinBalance &&
@@ -204,11 +201,13 @@ export function SendTokenForm({
                                                 <SendTokenFormInput
                                                     form={form}
                                                     name={field.name}
+                                                    amount={values.amount}
+                                                    to={values.to}
+                                                    isPayAllIota={values.isPayAllIota}
                                                     symbol={symbol}
                                                     coinDecimals={coinDecimals}
                                                     activeAddress={activeAddress ?? ''}
                                                     coins={coins ?? []}
-                                                    values={values}
                                                     onActionClick={onMaxTokenButtonClick}
                                                     isMaxActionDisabled={isMaxActionDisabled}
                                                 />