fix: hide balance alert if selected gas fee token

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,

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]);
 }