From fdd1b8aa3338919b8d6fa4b66cb7130478659820 Mon Sep 17 00:00:00 2001 From: cpl121 <100352899+cpl121@users.noreply.github.com> Date: Wed, 4 Dec 2024 16:24:19 +0100 Subject: [PATCH] fix(wallet-dashboard): sending max amount doesn't send the correct amount (#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 --- .../Dialogs/SendToken/SendTokenDialog.tsx | 21 ++++++++++++------- .../Dialogs/SendToken/constants/index.ts | 1 - .../Dialogs/SendToken/interfaces/index.ts | 1 - .../SendToken/views/EnterValuesFormView.tsx | 21 +++++-------------- .../SendToken/views/ReviewValuesFormView.tsx | 9 ++++---- .../home/transfer-coin/SendTokenForm.tsx | 7 +------ 6 files changed, 24 insertions(+), 36 deletions(-) diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx index 07774ff75d2..da417f66147 100644 --- 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.EnterValues); const [selectedCoin, setSelectedCoin] = useState(coin); const [formData, setFormData] = useState(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} /> )} diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts index f4f51359080..0c83c510e23 100644 --- 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 index e6eb00f8094..e0b86afabd8 100644 --- 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 index 24b1855cd1d..f38c0d95cfa 100644 --- 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 (
@@ -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 index cdb153eaa92..f278a637044 100644 --- 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 (
@@ -58,7 +59,7 @@ export function ReviewValuesFormView({ /> 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 32e8be11c52..e1cf2696b6f 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 @@ -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);