diff --git a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx index 0d7ef5a96..bb3cbe72f 100644 --- a/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx +++ b/apps/namadillo/src/App/Transfer/AvailableAmountFooter.tsx @@ -6,35 +6,55 @@ import clsx from "clsx"; type AvailableAmountFooterProps = { availableAmount?: BigNumber; + availableAmountMinusFees?: BigNumber; asset?: Asset; onClickMax?: () => void; }; export const AvailableAmountFooter = ({ availableAmount, + availableAmountMinusFees, asset, onClickMax, }: AvailableAmountFooterProps): JSX.Element => { - if (availableAmount === undefined || !asset) { + if (availableAmountMinusFees === undefined || !asset) { return <>; } + const isInsufficientBalance = availableAmountMinusFees.eq(0); + return (
- - Available: - - +
+
+ Available:{" "} + +
+ {isInsufficientBalance && ( +
+
Insufficient balance to cover the fee
+ {availableAmount && ( +
+ Balance:{" "} + +
+ )} +
+ )} +
{onClickMax && ( void; amount?: BigNumber; availableAmount?: BigNumber; + availableAmountMinusFees?: BigNumber; onChangeAmount?: (amount: BigNumber | undefined) => void; isShielded?: boolean; onChangeShielded?: (isShielded: boolean) => void; @@ -47,8 +48,9 @@ export const TransferSource = ({ openProviderSelector, openChainSelector, openAssetSelector, - amount, availableAmount, + availableAmountMinusFees, + amount, onChangeAmount, isShielded, onChangeShielded, @@ -108,12 +110,15 @@ export const TransferSource = ({ maxDecimalPlaces={amountMaxDecimalPlaces(asset)} />
- {asset && availableAmount && ( + {asset && availableAmountMinusFees && ( )}