From ddca44cc60bc16ea6e69f54ab65630678e070a62 Mon Sep 17 00:00:00 2001
From: marc2332 <mespinsanz@gmail.com>
Date: Thu, 14 Nov 2024 15:46:12 +0100
Subject: [PATCH] refactor: Simplify SendTokenFormInput

---
 .../components/Inputs/SendTokenFormInput.tsx  | 45 ++++++++-----------
 apps/core/src/forms/index.ts                  |  1 +
 apps/core/src/forms/token.ts                  |  6 +++
 apps/core/src/index.ts                        |  1 +
 .../SendToken/views/EnterValuesFormView.tsx   | 36 +++++----------
 .../home/transfer-coin/SendTokenForm.tsx      | 36 +++++----------
 6 files changed, 46 insertions(+), 79 deletions(-)
 create mode 100644 apps/core/src/forms/index.ts
 create mode 100644 apps/core/src/forms/token.ts

diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
index c3346cef1f9..932daeb3799 100644
--- a/apps/core/src/components/Inputs/SendTokenFormInput.tsx
+++ b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
@@ -1,61 +1,48 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ButtonPill, Input, InputType, NumericFormatInputProps } from '@iota/apps-ui-kit';
+import { ButtonPill, Input, InputType } from '@iota/apps-ui-kit';
 import { CoinStruct } from '@iota/iota-sdk/client';
 import { useGasBudgetEstimation } from '../../hooks';
 import { useEffect } from 'react';
-import { FormikProps, useField } from 'formik';
-import React from 'react';
+import { useField, useFormikContext } from 'formik';
+import { TokenForm } from '../../forms';
 
-export interface SendTokenInputProps<FormValues> {
+export interface SendTokenInputProps {
     coins: CoinStruct[];
     symbol: string;
     coinDecimals: number;
     activeAddress: string;
-    amount: string;
     to: string;
-    isPayAllIota: boolean;
     onActionClick: () => Promise<void>;
     isMaxActionDisabled?: boolean;
     name: string;
-    form: FormikProps<FormValues>;
 }
 
-export function SendTokenFormInput<FormValues>({
+export function SendTokenFormInput({
     coins,
-    amount,
     to,
-    isPayAllIota,
     symbol,
     coinDecimals,
     activeAddress,
     onActionClick,
     isMaxActionDisabled,
     name,
-    form,
-}: SendTokenInputProps<FormValues>) {
+}: SendTokenInputProps) {
+    const { values, setFieldValue, isSubmitting } = useFormikContext<TokenForm>();
     const gasBudgetEstimation = useGasBudgetEstimation({
         coinDecimals,
         coins: coins ?? [],
         activeAddress,
         to: to,
-        amount: amount,
-        isPayAllIota: isPayAllIota,
+        amount: values.amount,
+        isPayAllIota: values.isPayAllIota,
     });
 
     const [field, meta, helpers] = useField<string>(name);
 
-    const numericPropsOnly: Partial<NumericFormatInputProps> = {
-        decimalScale: coinDecimals ? undefined : 0,
-        thousandSeparator: true,
-        onValueChange: (values) => {
-            helpers.setValue(values.value)
-        },
-    };
-
     const errorMessage = meta?.error ? meta.error : undefined;
-    const isActionButtonDisabled = form.isSubmitting || !!errorMessage || isMaxActionDisabled;
+    const isActionButtonDisabled = isSubmitting || !!errorMessage || isMaxActionDisabled;
 
     const renderAction = () => (
         <ButtonPill disabled={isActionButtonDisabled} onClick={onActionClick}>
@@ -65,8 +52,8 @@ export function SendTokenFormInput<FormValues>({
 
     // gasBudgetEstimation should change when the amount above changes
     useEffect(() => {
-        form.setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
-    }, [gasBudgetEstimation, form.setFieldValue, amount]);
+        setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
+    }, [gasBudgetEstimation, setFieldValue, values.amount]);
 
     return (
         <Input
@@ -77,12 +64,16 @@ export function SendTokenFormInput<FormValues>({
             placeholder="0.00"
             label="Send Amount"
             suffix={` ${symbol}`}
-            prefix={isPayAllIota ? '~ ' : undefined}
+            prefix={values.isPayAllIota ? '~ ' : undefined}
             allowNegative={false}
             errorMessage={errorMessage}
             amountCounter={!errorMessage ? (coins ? gasBudgetEstimation : '--') : undefined}
             trailingElement={renderAction()}
-            {...numericPropsOnly}
+            decimalScale={coinDecimals ? undefined : 0}
+            thousandSeparator
+            onValueChange={(values) => {
+                helpers.setValue(values.value)
+            }}
         />
     );
 }
diff --git a/apps/core/src/forms/index.ts b/apps/core/src/forms/index.ts
new file mode 100644
index 00000000000..b00ee65e230
--- /dev/null
+++ b/apps/core/src/forms/index.ts
@@ -0,0 +1 @@
+export * from './token'
\ No newline at end of file
diff --git a/apps/core/src/forms/token.ts b/apps/core/src/forms/token.ts
new file mode 100644
index 00000000000..dde7d93379c
--- /dev/null
+++ b/apps/core/src/forms/token.ts
@@ -0,0 +1,6 @@
+export type TokenForm = {
+    amount: string,
+    to: string,
+    isPayAllIota: boolean
+    gasBudgetEst: string,
+}
\ No newline at end of file
diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts
index 5aed649aada..231b6bfd581 100644
--- a/apps/core/src/index.ts
+++ b/apps/core/src/index.ts
@@ -8,3 +8,4 @@ export * from './components';
 export * from './utils';
 export * from './hooks';
 export * from './constants';
+export * from './forms'
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
index d43b4ab5f21..0b5954630b5 100644
--- a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
@@ -109,32 +109,16 @@ function FormInputs({
                         />
                     )}
 
-                    <Field name="amount">
-                        {({
-                            field,
-                            form,
-                        }: {
-                            field: FieldInputProps<string>;
-                            form: FormikProps<FormDataValues>;
-                        }) => {
-                            return (
-                                <SendTokenFormInput
-                                    form={form}
-                                    amount={values.amount}
-                                    to={values.to}
-                                    isPayAllIota={values.isPayAllIota}
-                                    name={field.name}
-                                    symbol={symbol}
-                                    coins={coins}
-                                    coinDecimals={coinDecimals}
-                                    activeAddress={activeAddress}
-                                    onActionClick={onMaxTokenButtonClick}
-                                    isMaxActionDisabled={isMaxActionDisabled}
-                                />
-                            );
-                        }}
-                    </Field>
-
+                    <SendTokenFormInput
+                        name="amount"
+                        to={values.to}
+                        symbol={symbol}
+                        coins={coins}
+                        coinDecimals={coinDecimals}
+                        activeAddress={activeAddress}
+                        onActionClick={onMaxTokenButtonClick}
+                        isMaxActionDisabled={isMaxActionDisabled}
+                    />
                     <AddressInput name="to" placeholder="Enter Address" />
                 </div>
             </Form>
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 b6b91783fd3..096cb3d0af0 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
@@ -188,32 +188,16 @@ export function SendTokenForm({
                                             icon={<Exclamation />}
                                         />
                                     ) : null}
-
-                                    <Field name="amount">
-                                        {({
-                                            field,
-                                            form,
-                                        }: {
-                                            field: FieldInputProps<string>;
-                                            form: FormikProps<FormValues>;
-                                        }) => {
-                                            return (
-                                                <SendTokenFormInput
-                                                    form={form}
-                                                    name={field.name}
-                                                    amount={values.amount}
-                                                    to={values.to}
-                                                    isPayAllIota={values.isPayAllIota}
-                                                    symbol={symbol}
-                                                    coinDecimals={coinDecimals}
-                                                    activeAddress={activeAddress ?? ''}
-                                                    coins={coins ?? []}
-                                                    onActionClick={onMaxTokenButtonClick}
-                                                    isMaxActionDisabled={isMaxActionDisabled}
-                                                />
-                                            );
-                                        }}
-                                    </Field>
+                                    <SendTokenFormInput
+                                        name="amount"
+                                        to={values.to}
+                                        symbol={symbol}
+                                        coinDecimals={coinDecimals}
+                                        activeAddress={activeAddress ?? ''}
+                                        coins={coins ?? []}
+                                        onActionClick={onMaxTokenButtonClick}
+                                        isMaxActionDisabled={isMaxActionDisabled}
+                                    />
                                     <AddressInput name="to" placeholder="Enter Address" />
                                 </div>
                             </Form>