From 0665dc75f9fff47952761b876d8b59e0c7e8d10b Mon Sep 17 00:00:00 2001
From: Matthew Walsh <matthew.walsh@consensys.net>
Date: Tue, 1 Apr 2025 19:59:12 +0100
Subject: [PATCH] Hide alert if selected gas fee token

---
 .../transactions/useInsufficientBalanceAlerts.test.ts | 10 ++++++++++
 .../transactions/useInsufficientBalanceAlerts.ts      | 11 +++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.test.ts b/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.test.ts
index e8cfc802ee99..92592e862b3d 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.test.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.test.ts
@@ -123,6 +123,16 @@ describe('useInsufficientBalanceAlerts', () => {
     ).toEqual([]);
   });
 
+  it('returns no alerts if account has balance less than gas fee plus value but gas fee token is selected', () => {
+    const alerts = runHook({
+      balance: 7,
+      currentConfirmation: TRANSACTION_MOCK,
+      transaction: { ...TRANSACTION_MOCK, selectedGasFeeToken: '0x123' },
+    });
+
+    expect(alerts).toEqual([]);
+  });
+
   it('returns alert if account has balance less than gas fee plus value', () => {
     const alerts = runHook({
       balance: 7,
diff --git a/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.ts b/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.ts
index 4d1adc73f854..508ed23e1a18 100644
--- a/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.ts
+++ b/ui/pages/confirmations/hooks/alerts/transactions/useInsufficientBalanceAlerts.ts
@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
+import { TransactionMeta } from '@metamask/transaction-controller';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
 import {
   selectTransactionAvailableBalance,
@@ -19,8 +20,8 @@ import { useConfirmContext } from '../../../context/confirm';
 
 export function useInsufficientBalanceAlerts(): Alert[] {
   const t = useI18nContext();
-  const { currentConfirmation } = useConfirmContext();
-  const { id: transactionId } = currentConfirmation ?? {};
+  const { currentConfirmation } = useConfirmContext<TransactionMeta>();
+  const { id: transactionId, selectedGasFeeToken } = currentConfirmation ?? {};
 
   const balance = useSelector((state) =>
     selectTransactionAvailableBalance(state, transactionId),
@@ -42,8 +43,10 @@ export function useInsufficientBalanceAlerts(): Alert[] {
     balance,
   });
 
+  const showAlert = insufficientBalance && !selectedGasFeeToken;
+
   return useMemo(() => {
-    if (!insufficientBalance) {
+    if (!showAlert) {
       return [];
     }
 
@@ -65,5 +68,5 @@ export function useInsufficientBalanceAlerts(): Alert[] {
         severity: Severity.Danger,
       },
     ];
-  }, [insufficientBalance]);
+  }, [nativeCurrency, showAlert, t]);
 }