fix pending condition

ui/pages/confirmations/components/confirm/info/shared/selected-gas-fee-token/selected-gas-fee-token.test.tsx

@@ -10,14 +10,16 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../../
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import { GAS_FEE_TOKEN_MOCK } from '../../../../../../../../test/data/confirmations/gas';
 import { useIsGaslessSupported } from '../../../../../hooks/gas/useIsGaslessSupported';
+import { useInsufficientBalanceAlerts } from '../../../../../hooks/alerts/transactions/useInsufficientBalanceAlerts';
+import { Severity } from '../../../../../../../helpers/constants/design-system';
 import * as DappSwapContext from '../../../../../context/dapp-swap';
-import { useHasInsufficientBalance } from '../../../../../hooks/useHasInsufficientBalance';
 import { SelectedGasFeeToken } from './selected-gas-fee-token';
 
 jest.mock('../../../../../../../../shared/modules/selectors');
 jest.mock('../../../../../hooks/gas/useIsGaslessSupported');
-jest.mock('../../../../../hooks/useHasInsufficientBalance');
-
+jest.mock(
+  '../../../../../hooks/alerts/transactions/useInsufficientBalanceAlerts',
+);
 function getStore({
   gasFeeTokens,
   noSelectedGasFeeToken,
@@ -44,7 +46,9 @@ function getStore({
 
 describe('SelectedGasFeeToken', () => {
   const useIsGaslessSupportedMock = jest.mocked(useIsGaslessSupported);
-  const useHasInsufficientBalanceMock = jest.mocked(useHasInsufficientBalance);
+  const useInsufficientBalanceAlertsMock = jest.mocked(
+    useInsufficientBalanceAlerts,
+  );
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -55,10 +59,13 @@ describe('SelectedGasFeeToken', () => {
       pending: false,
     });
 
-    useHasInsufficientBalanceMock.mockReturnValue({
-      hasInsufficientBalance: true,
-      nativeCurrency: 'ETH',
-    });
+    useInsufficientBalanceAlertsMock.mockReturnValue([
+      {
+        content: 'Insufficient balance',
+        key: 'insufficientBalance',
+        severity: Severity.Danger,
+      },
+    ]);
   });
 
   it('renders native symbol', () => {
@@ -134,10 +141,7 @@ describe('SelectedGasFeeToken', () => {
   });
 
   it('does not render arrow icon if sufficient balance and future native only', () => {
-    useHasInsufficientBalanceMock.mockReturnValue({
-      hasInsufficientBalance: false,
-      nativeCurrency: 'ETH',
-    });
+    useInsufficientBalanceAlertsMock.mockReturnValue([]);
 
     const result = renderWithConfirmContextProvider(
       <SelectedGasFeeToken />,

ui/pages/confirmations/components/confirm/info/shared/selected-gas-fee-token/selected-gas-fee-token.tsx

@@ -23,7 +23,7 @@ import { GasFeeTokenModal } from '../gas-fee-token-modal';
 import { useSelectedGasFeeToken } from '../../hooks/useGasFeeToken';
 import { GasFeeTokenIcon, GasFeeTokenIconSize } from '../gas-fee-token-icon';
 import { useIsGaslessSupported } from '../../../../../hooks/gas/useIsGaslessSupported';
-import { useHasInsufficientBalance } from '../../../../../hooks/useHasInsufficientBalance';
+import { useIsInsufficientBalance } from '../../../../../hooks/useIsInsufficientBalance';
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -36,13 +36,13 @@ export function SelectedGasFeeToken() {
   const { isSupported: isGaslessSupported, isSmartTransaction } =
     useIsGaslessSupported();
 
-  const { hasInsufficientBalance } = useHasInsufficientBalance();
+  const hasInsufficientNative = useIsInsufficientBalance();
 
   const hasOnlyFutureNativeToken =
     gasFeeTokens?.length === 1 &&
     gasFeeTokens[0].tokenAddress === NATIVE_TOKEN_ADDRESS;
 
-  const supportsFutureNative = hasInsufficientBalance && isSmartTransaction;
+  const supportsFutureNative = hasInsufficientNative && isSmartTransaction;
 
   const hasGasFeeTokens =
     !isQuotedSwapDisplayedInInfo &&

ui/pages/confirmations/hooks/gas/useIsGaslessSupported.ts

@@ -49,9 +49,12 @@ export function useIsGaslessSupported() {
     isSmartTransactionAndBundleSupported || is7702Supported,
   );
 
+  const isPending =
+    smartTransactionPending || (shouldCheck7702Eligibility && relayPending);
+
   return {
     isSupported,
     isSmartTransaction,
-    pending: Boolean(smartTransactionPending || relayPending),
+    pending: isPending,
   };
 }