refactor(wallet, dashboard): remove isPayAllIota from FormValues (#…

…4184) * refactor(wallet, dashboard): remove isPayAllIota from FormValues * fix: use supporting label to show correct gas label * fix: add missing isPayALlIota indicator * fix: avoid parsing an unformatted value * fix: format gas --------- Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>
iotaledger · Nov 25, 2024 · 3742d78 · 3742d78
1 parent ec66e09
commit 3742d78
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 71 deletions.
diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
@@ -19,6 +19,7 @@ export interface SendTokenInputProps {
     onActionClick: () => Promise<void>;
     isMaxActionDisabled?: boolean;
     name: string;
+    isPayAllIota: boolean;
 }
 
 export function SendTokenFormInput({
@@ -30,6 +31,7 @@ export function SendTokenFormInput({
     onActionClick,
     isMaxActionDisabled,
     name,
+    isPayAllIota,
 }: SendTokenInputProps) {
     const { values, setFieldValue, isSubmitting, validateField } = useFormikContext<TokenForm>();
     const { data: gasBudgetEstimation } = useGasBudgetEstimation({
@@ -38,7 +40,7 @@ export function SendTokenFormInput({
         activeAddress,
         to: to,
         amount: values.amount,
-        isPayAllIota: values.isPayAllIota,
+        isPayAllIota,
     });
     const [formattedGasBudgetEstimation, gasToken] = useFormatCoin(
         gasBudgetEstimation,
@@ -61,8 +63,8 @@ export function SendTokenFormInput({
 
     // gasBudgetEstimation should change when the amount above changes
     useEffect(() => {
-        setFieldValue('gasBudgetEst', formattedGasBudgetEstimation, false);
-    }, [formattedGasBudgetEstimation, setFieldValue, values.amount]);
+        setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
+    }, [gasBudgetEstimation, setFieldValue, values.amount]);
 
     return (
         <Input
@@ -74,7 +76,7 @@ export function SendTokenFormInput({
             placeholder="0.00"
             label="Send Amount"
             suffix={` ${symbol}`}
-            prefix={values.isPayAllIota ? '~ ' : undefined}
+            prefix={isPayAllIota ? '~ ' : undefined}
             allowNegative={false}
             errorMessage={errorMessage}
             amountCounter={!errorMessage ? (coins ? gasAmount : '--') : undefined}

diff --git a/apps/core/src/forms/token.ts b/apps/core/src/forms/token.ts
@@ -4,6 +4,5 @@
 export type TokenForm = {
     amount: string;
     to: string;
-    isPayAllIota: boolean;
     gasBudgetEst: string;
 };
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx
@@ -11,6 +11,7 @@ import { useGetAllCoins } from '@iota/core';
 import { Dialog, DialogBody, DialogContent, DialogPosition, Header } from '@iota/apps-ui-kit';
 import { FormDataValues } from './interfaces';
 import { INITIAL_VALUES } from './constants';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 interface SendCoinPopupProps {
     coin: CoinBalance;
@@ -44,7 +45,7 @@ function SendTokenDialogBody({
         activeAddress,
         formData.to,
         formData.formattedAmount,
-        selectedCoin?.totalBalance === formData.amount,
+        selectedCoin?.totalBalance === formData.amount && selectedCoin.coinType === IOTA_TYPE_ARG,
     );
 
     function handleTransfer() {
@@ -102,6 +103,10 @@ function SendTokenDialogBody({
                             senderAddress={activeAddress}
                             isPending={isPending}
                             coinType={selectedCoin.coinType}
+                            isPayAllIota={
+                                selectedCoin.totalBalance === formData.amount &&
+                                selectedCoin.coinType === IOTA_TYPE_ARG
+                            }
                         />
                     )}
                 </DialogBody>

diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts
@@ -7,6 +7,5 @@ export const INITIAL_VALUES: FormDataValues = {
     to: '',
     amount: '',
     formattedAmount: '',
-    isPayAllIota: false,
     gasBudgetEst: '',
 };
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts
@@ -4,6 +4,5 @@ export interface FormDataValues {
     amount: string;
     formattedAmount: string;
     to: string;
-    isPayAllIota: boolean;
     gasBudgetEst: string;
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
@@ -30,7 +30,6 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { Form, Formik, FormikProps } from 'formik';
 import { Exclamation } from '@iota/ui-icons';
 import { UseQueryResult } from '@tanstack/react-query';
-import { useEffect } from 'react';
 import { FormDataValues } from '../interfaces';
 import { INITIAL_VALUES } from '../constants';
 
@@ -78,13 +77,13 @@ function FormInputs({
     coins,
     queryResult,
 }: FormInputsProps): React.JSX.Element {
-    const newPayIotaAll =
+    const isPayAllIota =
         parseAmount(values.amount, coinDecimals) === coinBalance && coinType === IOTA_TYPE_ARG;
 
     const hasEnoughBalance =
-        values.isPayAllIota ||
+        isPayAllIota ||
         iotaBalance >
-            parseAmount(values.gasBudgetEst, coinDecimals) +
+            BigInt(values.gasBudgetEst ?? '0') +
                 parseAmount(coinType === IOTA_TYPE_ARG ? values.amount : '0', coinDecimals);
 
     async function onMaxTokenButtonClick() {
@@ -96,12 +95,6 @@ function FormInputs({
         queryResult.isPending ||
         !coinBalance;
 
-    useEffect(() => {
-        if (values.isPayAllIota !== newPayIotaAll) {
-            setFieldValue('isPayAllIota', newPayIotaAll);
-        }
-    }, [values.isPayAllIota, newPayIotaAll, setFieldValue]);
-
     return (
         <div className="flex h-full w-full flex-col">
             <Form autoComplete="off" noValidate className="flex-1">
@@ -124,6 +117,7 @@ function FormInputs({
                         activeAddress={activeAddress}
                         onActionClick={onMaxTokenButtonClick}
                         isMaxActionDisabled={isMaxActionDisabled}
+                        isPayAllIota={isPayAllIota}
                     />
                     <AddressInput name="to" placeholder="Enter Address" />
                 </div>
@@ -195,7 +189,6 @@ export function EnterValuesFormView({
     );
 
     const formattedTokenBalance = tokenBalance.replace(/,/g, '');
-    const initAmountBig = parseAmount('', coinDecimals);
 
     if (coinsBalanceIsPending || coinsIsPending || iotaCoinsIsPending) {
         return (
@@ -205,7 +198,7 @@ export function EnterValuesFormView({
         );
     }
 
-    async function handleFormSubmit({ to, amount, isPayAllIota, gasBudgetEst }: FormDataValues) {
+    async function handleFormSubmit({ to, amount, gasBudgetEst }: FormDataValues) {
         if (!coins || !iotaCoins) return;
         const coinsIDs = [...coins]
             .sort((a, b) => Number(b.balance) - Number(a.balance))
@@ -217,7 +210,6 @@ export function EnterValuesFormView({
             to,
             amount,
             formattedAmount,
-            isPayAllIota,
             coins,
             coinIds: coinsIDs,
             gasBudgetEst,
@@ -239,17 +231,7 @@ export function EnterValuesFormView({
             />
 
             <Formik
-                initialValues={{
-                    amount: initialFormValues.amount ?? '',
-                    to: initialFormValues.to ?? '',
-                    formattedAmount: initialFormValues.formattedAmount ?? '',
-                    isPayAllIota:
-                        initialFormValues.isPayAllIota ??
-                        (!!initAmountBig &&
-                            initAmountBig === coinBalance &&
-                            coin.coinType === IOTA_TYPE_ARG),
-                    gasBudgetEst: initialFormValues.gasBudgetEst ?? '',
-                }}
+                initialValues={initialFormValues}
                 validationSchema={validationSchemaStepOne}
                 enableReinitialize
                 validateOnChange={false}

diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx
@@ -17,8 +17,8 @@ import {
     Divider,
     ButtonType,
 } from '@iota/apps-ui-kit';
-import { formatAddress } from '@iota/iota-sdk/utils';
-import { GAS_SYMBOL, CoinIcon, ImageIconSize, useFormatCoin, ExplorerLinkType } from '@iota/core';
+import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { CoinIcon, ImageIconSize, useFormatCoin, ExplorerLinkType } from '@iota/core';
 import { Loader } from '@iota/ui-icons';
 import { ExplorerLink } from '@/components';
 
@@ -28,16 +28,19 @@ interface ReviewValuesFormProps {
     isPending: boolean;
     executeTransfer: () => void;
     coinType: string;
+    isPayAllIota?: boolean;
 }
 
 export function ReviewValuesFormView({
-    formData: { amount, to, formattedAmount, isPayAllIota, gasBudgetEst },
+    formData: { amount, to, formattedAmount, gasBudgetEst },
     senderAddress,
     isPending,
     executeTransfer,
     coinType,
+    isPayAllIota,
 }: ReviewValuesFormProps): JSX.Element {
     const [formatAmount, symbol] = useFormatCoin(formattedAmount, coinType);
+    const [gasEstimated, gasSymbol] = useFormatCoin(gasBudgetEst, IOTA_TYPE_ARG);
     return (
         <div className="flex h-full flex-col">
             <div className="flex h-full w-full flex-col gap-md">
@@ -89,8 +92,8 @@ export function ReviewValuesFormView({
                                 <Divider />
                                 <KeyValueInfo
                                     keyText={'Est. Gas Fees'}
-                                    value={gasBudgetEst}
-                                    supportingLabel={GAS_SYMBOL}
+                                    value={gasEstimated}
+                                    supportingLabel={gasSymbol}
                                     fullwidth
                                 />
                             </div>

diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/PreviewTransfer.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/PreviewTransfer.tsx
@@ -4,7 +4,7 @@
 
 import { ExplorerLink, ExplorerLinkType, TxnAmount } from '_components';
 import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
-import { GAS_SYMBOL, parseAmount, useCoinMetadata } from '@iota/core';
+import { parseAmount, useCoinMetadata, useFormatCoin } from '@iota/core';
 import { Divider, KeyValueInfo } from '@iota/apps-ui-kit';
 import { formatAddress } from '@iota/iota-sdk/utils';
 
@@ -26,6 +26,7 @@ export function PreviewTransfer({
     const accountAddress = useActiveAddress();
     const { data: metadata } = useCoinMetadata(coinType);
     const amountWithoutDecimals = parseAmount(amount, metadata?.decimals ?? 0);
+    const [formattedGasBudgetEstimation, gasToken] = useFormatCoin(gasBudget, coinType);
 
     return (
         <div className="flex w-full flex-col gap-md">
@@ -63,7 +64,8 @@ export function PreviewTransfer({
                 <Divider />
                 <KeyValueInfo
                     keyText={'Est. Gas Fees'}
-                    value={`${gasBudget} ${GAS_SYMBOL}`}
+                    value={formattedGasBudgetEstimation}
+                    supportingLabel={gasToken}
                     fullwidth
                 />
             </div>

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
@@ -17,7 +17,7 @@ import {
 import { type CoinStruct } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { Form, Formik } from 'formik';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import {
     InfoBox,
@@ -32,7 +32,6 @@ import { Exclamation } from '@iota/ui-icons';
 const INITIAL_VALUES = {
     to: '',
     amount: '',
-    isPayAllIota: false,
     gasBudgetEst: '',
 };
 
@@ -41,7 +40,6 @@ export type FormValues = typeof INITIAL_VALUES;
 export type SubmitProps = {
     to: string;
     amount: string;
-    isPayAllIota: boolean;
     coinIds: string[];
     coins: CoinStruct[];
     gasBudgetEst: string;
@@ -100,9 +98,8 @@ export function SendTokenForm({
 
     // remove the comma from the token balance
     const formattedTokenBalance = tokenBalance.replace(/,/g, '');
-    const initAmountBig = parseAmount(initialAmount, coinDecimals);
 
-    async function handleFormSubmit({ to, amount, isPayAllIota, gasBudgetEst }: FormValues) {
+    async function handleFormSubmit({ to, amount, gasBudgetEst }: FormValues) {
         if (!coins || !iotaCoins) return;
         const coinsIDs = [...coins]
             .sort((a, b) => Number(b.balance) - Number(a.balance))
@@ -111,7 +108,6 @@ export function SendTokenForm({
         const data = {
             to,
             amount,
-            isPayAllIota,
             coins,
             coinIds: coinsIDs,
             gasBudgetEst,
@@ -132,10 +128,6 @@ export function SendTokenForm({
                 initialValues={{
                     amount: initialAmount,
                     to: initialTo,
-                    isPayAllIota:
-                        !!initAmountBig &&
-                        initAmountBig === coinBalance &&
-                        coinType === IOTA_TYPE_ARG,
                     gasBudgetEst: '',
                 }}
                 validationSchema={validationSchemaStepOne}
@@ -145,14 +137,14 @@ export function SendTokenForm({
                 onSubmit={handleFormSubmit}
             >
                 {({ isValid, isSubmitting, setFieldValue, values, submitForm }) => {
-                    const newPayIotaAll =
+                    const isPayAllIota =
                         parseAmount(values.amount, coinDecimals) === coinBalance &&
                         coinType === IOTA_TYPE_ARG;
 
                     const hasEnoughBalance =
-                        values.isPayAllIota ||
+                        isPayAllIota ||
                         iotaBalance >
-                            parseAmount(values.gasBudgetEst, coinDecimals) +
+                            BigInt(values.gasBudgetEst ?? '0') +
                                 parseAmount(
                                     coinType === IOTA_TYPE_ARG ? values.amount : '0',
                                     coinDecimals,
@@ -167,12 +159,6 @@ export function SendTokenForm({
                         queryResult.isPending ||
                         !coinBalance;
 
-                    useEffect(() => {
-                        if (values.isPayAllIota !== newPayIotaAll) {
-                            setFieldValue('isPayAllIota', newPayIotaAll);
-                        }
-                    }, [values.isPayAllIota, newPayIotaAll, setFieldValue]);
-
                     return (
                         <div className="flex h-full w-full flex-col">
                             <Form autoComplete="off" noValidate className="flex-1">
@@ -194,6 +180,7 @@ export function SendTokenForm({
                                         coins={coins ?? []}
                                         onActionClick={onMaxTokenButtonClick}
                                         isMaxActionDisabled={isMaxActionDisabled}
+                                        isPayAllIota={isPayAllIota}
                                     />
                                     <AddressInput name="to" placeholder="Enter Address" />
                                 </div>