feat: add transfer balance warning

anoma · Jan 8, 2025 · 2119346 · 2119346
1 parent 4b0d3d7
commit 2119346
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git 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 (
     <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"

diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/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={

diff --git a/apps/namadillo/src/App/Transfer/TransferSource.tsx b/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>
       )}