feat: add transfer balance warning

apps/namadillo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <info@heliax.dev>",

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 (
     <div
       className={clsx(
         "flex justify-between items-center text-sm text-neutral-500 font-light"
       )}
     >
-      <span className="flex gap-2">
-        Available:
-        <TokenCurrency amount={availableAmount} symbol={asset.symbol} />
-      </span>
+      <div>
+        <div>
+          Available:{" "}
+          <TokenCurrency
+            amount={availableAmountMinusFees}
+            symbol={asset.symbol}
+          />
+        </div>
+        {isInsufficientBalance && (
+          <div className="text-fail">
+            <div>Insufficient balance to cover the fee</div>
+            {availableAmount && (
+              <div>
+                Balance:{" "}
+                <TokenCurrency amount={availableAmount} symbol={asset.symbol} />
+              </div>
+            )}
+          </div>
+        )}
+      </div>
       <span>
         {onClickMax && (
           <ActionButton
             type="button"
             size="xs"
-            disabled={availableAmount.eq(0)}
+            disabled={isInsufficientBalance}
             onClick={onClickMax}
             outlineColor="neutral"
             className="text-neutral-500 text-xs py-0 px-3 disabled:text-neutral-700"

apps/namadillo/src/App/Transfer/TransferModule.tsx

@@ -270,7 +270,8 @@ export const TransferModule = ({
             asset={selectedAsset?.asset}
             isLoadingAssets={source.isLoadingAssets}
             chain={parseChainInfo(source.chain, source.isShielded)}
-            availableAmount={availableAmountMinusFees}
+            availableAmount={source.availableAmount}
+            availableAmountMinusFees={availableAmountMinusFees}
             amount={source.amount}
             openProviderSelector={onChangeWallet(source)}
             openChainSelector={

apps/namadillo/src/App/Transfer/TransferSource.tsx

@@ -22,6 +22,7 @@ export type TransferSourceProps = {
   openProviderSelector?: () => 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)}
         />
       </div>
-      {asset && availableAmount && (
+      {asset && availableAmountMinusFees && (
         <footer>
           <AvailableAmountFooter
             availableAmount={availableAmount}
+            availableAmountMinusFees={availableAmountMinusFees}
             asset={asset}
-            onClickMax={() => onChangeAmount && onChangeAmount(availableAmount)}
+            onClickMax={() =>
+              onChangeAmount && onChangeAmount(availableAmountMinusFees)
+            }
           />
         </footer>
       )}

apps/namadillo/src/App/Transfer/__tests__/AvailableAmountFooter.test.tsx

@@ -14,7 +14,7 @@ describe("Component: AvailableAmountFooter", () => {
     const callback = jest.fn();
     render(
       <AvailableAmountFooter
-        availableAmount={new BigNumber(1234.456)}
+        availableAmountMinusFees={new BigNumber(1234.456)}
         asset={assetMock as Asset}
         onClickMax={callback}
       />
@@ -30,18 +30,19 @@ describe("Component: AvailableAmountFooter", () => {
   it("should not display MAX button when no callback was provided", () => {
     render(
       <AvailableAmountFooter
-        availableAmount={new BigNumber(100)}
+        availableAmountMinusFees={new BigNumber(100)}
         asset={assetMock as Asset}
       />
     );
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
   });
 
-  it("should display disabled button when the amount is zero", () => {
+  it("should display the balance and the disabled button when the amount is zero", () => {
     const callback = jest.fn();
     render(
       <AvailableAmountFooter
-        availableAmount={new BigNumber(0)}
+        availableAmount={new BigNumber(1)}
+        availableAmountMinusFees={new BigNumber(0)}
         asset={assetMock as Asset}
         onClickMax={callback}
       />
@@ -50,5 +51,9 @@ describe("Component: AvailableAmountFooter", () => {
     expect(button).toBeDisabled();
     fireEvent.click(button);
     expect(callback).not.toHaveBeenCalled();
+    const warning = screen.getByText("Insufficient balance to cover the fee");
+    expect(warning).toBeVisible();
+    const balance = screen.getByText("1 ETH");
+    expect(balance).toBeVisible();
   });
 });