fix(wallet-dashboard): sending max amount doesn't send the correct am…

…ount (#4252) * fix(wallet-dashboard): sending max amount does not send the correct amount * fix(wallet-dashboard): linter * fix(wallet-dashboard): clean debris and improve the amount field in form data values * feat(wallet): clean debris --------- Co-authored-by: Marc Espin <[email protected]>
iotaledger · Dec 4, 2024 · fdd1b8a · fdd1b8a
1 parent 2b70724
commit fdd1b8a
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 36 deletions.
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx
@@ -7,7 +7,7 @@ import { CoinBalance } from '@iota/iota-sdk/client';
 import { useSendCoinTransaction, useNotifications } from '@/hooks';
 import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { NotificationType } from '@/stores/notificationStore';
-import { useGetAllCoins } from '@iota/core';
+import { CoinFormat, useFormatCoin, useGetAllCoins } from '@iota/core';
 import { Dialog, DialogBody, DialogContent, DialogPosition, Header } from '@iota/apps-ui-kit';
 import { FormDataValues } from './interfaces';
 import { INITIAL_VALUES } from './constants';
@@ -33,19 +33,22 @@ function SendTokenDialogBody({
     const [step, setStep] = useState<FormStep>(FormStep.EnterValues);
     const [selectedCoin, setSelectedCoin] = useState<CoinBalance>(coin);
     const [formData, setFormData] = useState<FormDataValues>(INITIAL_VALUES);
+    const [fullAmount] = useFormatCoin(formData.amount, selectedCoin.coinType, CoinFormat.FULL);
     const { addNotification } = useNotifications();
 
     const { data: coinsData } = useGetAllCoins(selectedCoin.coinType, activeAddress);
 
     const { mutateAsync: signAndExecuteTransaction, isPending } = useSignAndExecuteTransaction();
+    const isPayAllIota =
+        selectedCoin.totalBalance === formData.amount && selectedCoin.coinType === IOTA_TYPE_ARG;
 
     const { data: transaction } = useSendCoinTransaction(
         coinsData || [],
-        selectedCoin?.coinType,
+        selectedCoin.coinType,
         activeAddress,
         formData.to,
-        formData.formattedAmount,
-        selectedCoin?.totalBalance === formData.amount && selectedCoin.coinType === IOTA_TYPE_ARG,
+        formData.amount,
+        isPayAllIota,
     );
 
     function handleTransfer() {
@@ -74,6 +77,11 @@ function SendTokenDialogBody({
     }
 
     function onBack(): void {
+        // The amount is formatted when submitting the enterValuesForm, so it is necessary to return to the previous value when backing out
+        setFormData({
+            ...formData,
+            amount: fullAmount,
+        });
         setStep(FormStep.EnterValues);
     }
 
@@ -103,10 +111,7 @@ function SendTokenDialogBody({
                             senderAddress={activeAddress}
                             isPending={isPending}
                             coinType={selectedCoin.coinType}
-                            isPayAllIota={
-                                selectedCoin.totalBalance === formData.amount &&
-                                selectedCoin.coinType === IOTA_TYPE_ARG
-                            }
+                            isPayAllIota={isPayAllIota}
                         />
                     )}
                 </DialogBody>

diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts
@@ -6,6 +6,5 @@ import { FormDataValues } from '../interfaces';
 export const INITIAL_VALUES: FormDataValues = {
     to: '',
     amount: '',
-    formattedAmount: '',
     gasBudgetEst: '',
 };
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 export interface FormDataValues {
     amount: string;
-    formattedAmount: string;
     to: string;
     gasBudgetEst: string;
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
@@ -77,23 +77,21 @@ function FormInputs({
     coins,
     queryResult,
 }: FormInputsProps): React.JSX.Element {
-    const isPayAllIota =
-        parseAmount(values.amount, coinDecimals) === coinBalance && coinType === IOTA_TYPE_ARG;
+    const formattedAmount = parseAmount(values.amount, coinDecimals);
+    const isPayAllIota = formattedAmount === coinBalance && coinType === IOTA_TYPE_ARG;
 
     const hasEnoughBalance =
         isPayAllIota ||
         iotaBalance >
             BigInt(values.gasBudgetEst ?? '0') +
-                parseAmount(coinType === IOTA_TYPE_ARG ? values.amount : '0', coinDecimals);
+                (coinType === IOTA_TYPE_ARG ? formattedAmount : 0n);
 
     async function onMaxTokenButtonClick() {
         await setFieldValue('amount', formattedTokenBalance);
     }
 
     const isMaxActionDisabled =
-        parseAmount(values.amount, coinDecimals) === coinBalance ||
-        queryResult.isPending ||
-        !coinBalance;
+        formattedAmount === coinBalance || queryResult.isPending || !coinBalance;
 
     return (
         <div className="flex h-full w-full flex-col">
@@ -199,19 +197,10 @@ export function EnterValuesFormView({
     }
 
     async function handleFormSubmit({ to, amount, gasBudgetEst }: FormDataValues) {
-        if (!coins || !iotaCoins) return;
-        const coinsIDs = [...coins]
-            .sort((a, b) => Number(b.balance) - Number(a.balance))
-            .map(({ coinObjectId }) => coinObjectId);
-
         const formattedAmount = parseAmount(amount, coinDecimals).toString();
-
         const data = {
             to,
-            amount,
-            formattedAmount,
-            coins,
-            coinIds: coinsIDs,
+            amount: formattedAmount,
             gasBudgetEst,
         };
         setFormData(data);

diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx
@@ -18,7 +18,7 @@ import {
     ButtonType,
 } from '@iota/apps-ui-kit';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { CoinIcon, ImageIconSize, useFormatCoin, ExplorerLinkType } from '@iota/core';
+import { CoinIcon, ImageIconSize, useFormatCoin, ExplorerLinkType, CoinFormat } from '@iota/core';
 import { Loader } from '@iota/ui-icons';
 import { ExplorerLink } from '@/components';
 
@@ -32,15 +32,16 @@ interface ReviewValuesFormProps {
 }
 
 export function ReviewValuesFormView({
-    formData: { amount, to, formattedAmount, gasBudgetEst },
+    formData: { amount, to, gasBudgetEst },
     senderAddress,
     isPending,
     executeTransfer,
     coinType,
     isPayAllIota,
 }: ReviewValuesFormProps): JSX.Element {
-    const [formatAmount, symbol] = useFormatCoin(formattedAmount, coinType);
+    const [roundedAmount, symbol] = useFormatCoin(amount, coinType, CoinFormat.ROUNDED);
     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">
@@ -58,7 +59,7 @@ export function ReviewValuesFormView({
                                         />
                                     </CardImage>
                                     <CardBody
-                                        title={`${isPayAllIota ? '~' : ''}${formatAmount} ${symbol}`}
+                                        title={`${isPayAllIota ? '~' : ''}${roundedAmount} ${symbol}`}
                                         subtitle="Amount"
                                     />
                                     <CardAction type={CardActionType.SupportingText} />

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
@@ -40,7 +40,6 @@ export type FormValues = typeof INITIAL_VALUES;
 export type SubmitProps = {
     to: string;
     amount: string;
-    coinIds: string[];
     coins: CoinStruct[];
     gasBudgetEst: string;
 };
@@ -100,16 +99,12 @@ export function SendTokenForm({
     const formattedTokenBalance = tokenBalance.replace(/,/g, '');
 
     async function handleFormSubmit({ to, amount, gasBudgetEst }: FormValues) {
-        if (!coins || !iotaCoins) return;
-        const coinsIDs = [...coins]
-            .sort((a, b) => Number(b.balance) - Number(a.balance))
-            .map(({ coinObjectId }) => coinObjectId);
+        if (!coins) return;
 
         const data = {
             to,
             amount,
             coins,
-            coinIds: coinsIDs,
             gasBudgetEst,
         };
         onSubmit(data);