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 && (
)}