diff --git a/libs/accounts/src/lib/transfer-form.tsx b/libs/accounts/src/lib/transfer-form.tsx index 84f7b826e..827b3c19d 100644 --- a/libs/accounts/src/lib/transfer-form.tsx +++ b/libs/accounts/src/lib/transfer-form.tsx @@ -16,6 +16,7 @@ import { RichSelect, Select, Tooltip, + Checkbox, } from '@vegaprotocol/ui-toolkit'; import type { Transfer } from '@vegaprotocol/wallet'; import { normalizeTransfer } from '@vegaprotocol/wallet'; @@ -63,6 +64,26 @@ export const TransferForm = ({ const amount = watch('amount'); const assetId = watch('asset'); + const [includeFee, setIncludeFee] = useState(false); + + const transferAmount = useMemo(() => { + if (!amount) return undefined; + if (includeFee && feeFactor) { + // using toFixed without an argument will always return a + // number in normal notation without rounding, formatting functions + // aren't working in a way which won't round the decimal places + return new BigNumber(1).minus(feeFactor).times(amount).toString(); + } + return amount; + }, [amount, includeFee, feeFactor]); + + const fee = useMemo(() => { + if (!transferAmount) return undefined; + return ( + feeFactor && new BigNumber(feeFactor).times(transferAmount).toString() + ); + }, [transferAmount, feeFactor]); + const asset = useMemo(() => { return assets.find((a) => a.id === assetId); }, [assets, assetId]); @@ -72,13 +93,16 @@ export const TransferForm = ({ if (!asset) { throw new Error('Submitted transfer with no asset selected'); } - const transfer = normalizeTransfer(fields.toAddress, fields.amount, { + if (!transferAmount) { + throw new Error('Submitted transfer with no amount selected'); + } + const transfer = normalizeTransfer(fields.toAddress, transferAmount, { id: asset.id, decimals: asset.decimals, }); submitTransfer(transfer); }, - [asset, submitTransfer] + [asset, submitTransfer, transferAmount] ); const min = useMemo(() => { @@ -213,7 +237,25 @@ export const TransferForm = ({ {errors.amount.message} )} - +
+ +
{t('Include transfer fee')}
+ + } + checked={includeFee} + onCheckedChange={() => setIncludeFee(!includeFee)} + /> +
+ {transferAmount && fee && ( + + )} @@ -224,21 +266,19 @@ export const TransferForm = ({ export const TransferFee = ({ amount, feeFactor, + fee, }: { amount: string; feeFactor: string | null; + fee?: string; }) => { - if (!feeFactor || !amount) return null; + if (!feeFactor || !amount || !fee) return null; - // using toFixed without an argument will always return a - // number in normal notation without rounding, formatting functions - // aren't working in a way which won't round the decimal places - const value = new BigNumber(amount).times(feeFactor).toFixed(); - const totalValue = new BigNumber(amount).plus(value).toFixed(); + const totalValue = new BigNumber(amount).plus(fee).toFixed(); return ( -
-
+
+
- {value} + {fee}
-
+
+
{t('Amount to be transferred')}
+
+ +
+ {amount} +
+
+
+
{t('Total amount (with fee)')}