refactor: persist errors on send form (#441)

ArdentHQ · Jul 16, 2024 · d11f88a · d11f88a
1 parent 728045e
commit d11f88a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/send/SendForm.tsx b/src/components/send/SendForm.tsx
@@ -31,6 +31,14 @@ export const SendForm = ({ formik }: { formik: FormikProps<SendFormik> }) => {
         formik.validateField('amount');
     };
 
+    const handleAmountInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        if (constants.FEE_REGEX.test(value) || value === '') {
+            formik.setFieldValue('amount', value.trim());
+            formik.validateField('amount');
+        }
+    };
+
     const handleFeeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (!constants.FEE_REGEX.test(event.target.value)) {
             return;
@@ -90,7 +98,7 @@ export const SendForm = ({ formik }: { formik: FormikProps<SendFormik> }) => {
                     </button>
                 }
                 value={formik.values.amount}
-                onChange={handleInputChange}
+                onChange={handleAmountInputChange}
                 onBlur={formik.handleBlur}
                 variant={
                     formik.errors.amount && formik.values.amount !== '' ? 'destructive' : 'primary'

diff --git a/src/pages/Send.tsx b/src/pages/Send.tsx
@@ -24,6 +24,7 @@ export type SendFormik = {
     fee: string;
     receiverAddress: string;
     feeClass?: string;
+    errors?: any;
 };
 
 interface PageData extends SendFormik {
@@ -197,7 +198,7 @@ const Send = () => {
         runtime.sendMessage({
             type: 'SET_LAST_SCREEN',
             path: ScreenName.SendTransfer,
-            data: formik.values,
+            data: { errors: formik.errors, ...formik.values },
         });
 
         return () => {
@@ -212,6 +213,16 @@ const Send = () => {
         setIsModalOpen(true);
     };
 
+    useEffect(() => {
+        const { data } = lastVisitedPage || {};
+        if (data?.errors && Object.keys(data.errors).length > 0) {
+            formik.setErrors(data.errors);
+            Object.entries(data.errors).forEach(([key]) => {
+                formik.setFieldTouched(key, true);
+            });
+        }
+    }, [lastVisitedPage, formik.setFieldTouched, formik.setErrors]);
+
     return (
         <SubPageLayout
             title={t('COMMON.SEND')}