fix: Gas station improvements (#37352)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Fixes the icons and the auto selection logic for the gas station modal.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37352?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: #37120

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Improve gas fee token icon rendering and refine auto-selection logic
with expanded async tests; increase e2e toast close timeout.
> 
> - **UI**:
> - `ui/pages/.../gas-fee-token-icon.tsx`: Display ERC-20 token icons
from store (`selectERC20TokensByChain` `iconUrl`) when available;
fallback to `PreferredAvatar`; keep native token rendering via
`AvatarToken`; size mapping via `AvatarAccountSize`.
> - **Logic**:
> - `useAutomaticGasFeeTokenSelect`: Only set `firstCheck` to `false`
after successfully selecting the first eligible token; supports
selection on rerender when eligibility changes (insufficient balance,
gasless support, 7702/native handling).
> - **Tests**:
> - `useAutomaticGasFeeTokenSelect.test.ts`: Convert to async with
`flushPromises`, add assertions for `forceUpdateMetamaskState`, cover
rerender/eligibility and 7702/native scenarios.
> - **E2E**:
> - `transaction-confirmation.ts`: Increase toast close
`clickElementSafe` timeout to `10000` for stability.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1b1e382. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: pedronfigueiredo

test/e2e/page-objects/pages/confirmations/redesign/transaction-confirmation.ts

@@ -309,7 +309,7 @@ class TransactionConfirmation extends Confirmation {
 
   async closeGasFeeToastMessage() {
     // the toast message automatically disappears after some seconds, so we need to use clickElementSafe to prevent race conditions
-    await this.driver.clickElementSafe(this.gasFeeCloseToastMessage, 5000);
+    await this.driver.clickElementSafe(this.gasFeeCloseToastMessage, 10000);
   }
 
   /**

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

@@ -1,19 +1,23 @@
-import React from 'react';
-import { Hex } from '@metamask/utils';
+import { AvatarAccountSize } from '@metamask/design-system-react';
 import { TransactionMeta } from '@metamask/transaction-controller';
+import { Hex } from '@metamask/utils';
+import React from 'react';
 import { useSelector } from 'react-redux';
-
-import { NATIVE_TOKEN_ADDRESS } from '../../../../../../../../shared/constants/transaction';
-import { useConfirmContext } from '../../../../../context/confirm';
-import { selectNetworkConfigurationByChainId } from '../../../../../../../selectors';
-import Identicon from '../../../../../../../components/ui/identicon';
 import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../../../../shared/constants/network';
+import { NATIVE_TOKEN_ADDRESS } from '../../../../../../../../shared/constants/transaction';
+import { PreferredAvatar } from '../../../../../../../components/app/preferred-avatar';
 import {
   AvatarToken,
   AvatarTokenSize,
   Box,
 } from '../../../../../../../components/component-library';
+import Identicon from '../../../../../../../components/ui/identicon';
 import { BackgroundColor } from '../../../../../../../helpers/constants/design-system';
+import {
+  selectERC20TokensByChain,
+  selectNetworkConfigurationByChainId,
+} from '../../../../../../../selectors';
+import { useConfirmContext } from '../../../../../context/confirm';
 
 export enum GasFeeTokenIconSize {
   Sm = 'sm',
@@ -36,13 +40,30 @@ export function GasFeeTokenIcon({
     selectNetworkConfigurationByChainId(state, chainId),
   );
 
+  const erc20TokensByChain = useSelector(selectERC20TokensByChain);
+  const variation = chainId;
+  const { iconUrl: image } =
+    erc20TokensByChain?.[variation]?.data?.[tokenAddress] ?? {};
+
   if (tokenAddress !== NATIVE_TOKEN_ADDRESS) {
     return (
       <Box data-testid="token-icon">
-        <Identicon
-          address={tokenAddress}
-          diameter={size === GasFeeTokenIconSize.Md ? 32 : 12}
-        />
+        {image ? (
+          <Identicon
+            address={tokenAddress}
+            diameter={size === GasFeeTokenIconSize.Md ? 32 : 12}
+            image={image}
+          />
+        ) : (
+          <PreferredAvatar
+            address={tokenAddress}
+            size={
+              size === GasFeeTokenIconSize.Md
+                ? AvatarAccountSize.Md
+                : AvatarAccountSize.Xs
+            }
+          />
+        )}
       </Box>
     );
   }

ui/pages/confirmations/hooks/useAutomaticGasFeeTokenSelect.test.ts

@@ -6,6 +6,7 @@ import { NATIVE_TOKEN_ADDRESS } from '../../../../shared/constants/transaction';
 import { genUnapprovedContractInteractionConfirmation } from '../../../../test/data/confirmations/contract-interaction';
 import { getMockConfirmStateForTransaction } from '../../../../test/data/confirmations/helper';
 import { renderHookWithConfirmContextProvider } from '../../../../test/lib/confirmations/render-helpers';
+import { flushPromises } from '../../../../test/lib/timer-helpers';
 import { updateSelectedGasFeeToken } from '../../../store/controller-actions/transaction-controller';
 import { Alert } from '../../../ducks/confirm-alerts/confirm-alerts';
 import { forceUpdateMetamaskState } from '../../../store/actions';
@@ -46,6 +47,12 @@ function runHook({
   return { ...result, state };
 }
 
+async function flushAsyncUpdates() {
+  await act(async () => {
+    await flushPromises();
+  });
+}
+
 describe('useAutomaticGasFeeTokenSelect', () => {
   const updateSelectedGasFeeTokenMock = jest.mocked(updateSelectedGasFeeToken);
   const forceUpdateMetamaskStateMock = jest.mocked(forceUpdateMetamaskState);
@@ -67,31 +74,56 @@ describe('useAutomaticGasFeeTokenSelect', () => {
     });
   });
 
-  it('selects first gas fee token', () => {
-    runHook();
+  it('selects first gas fee token', async () => {
+    const { store } = runHook();
+
+    await flushAsyncUpdates();
+
+    if (!store) {
+      throw new Error('Expected store to be defined');
+    }
 
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(1);
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledWith(
       expect.any(String),
       GAS_FEE_TOKEN_MOCK.tokenAddress,
     );
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(1);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledWith(store.dispatch);
   });
 
-  it('does not select first gas fee token if gas fee token already selected', () => {
+  it('does not select first gas fee token if gas fee token already selected', async () => {
     runHook({ selectedGasFeeToken: GAS_FEE_TOKEN_MOCK.tokenAddress });
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select first gas fee token if no gas fee tokens', () => {
+  it('does not select first gas fee token if no gas fee tokens', async () => {
     runHook({ gasFeeTokens: [] });
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select first gas fee token if not first load', () => {
-    const { rerender, state } = runHook({
+  it('selects first gas fee token on rerender when selection becomes eligible', async () => {
+    const { rerender, state, store } = runHook({
       selectedGasFeeToken: GAS_FEE_TOKEN_MOCK.tokenAddress,
     });
 
+    if (!store) {
+      throw new Error('Expected store to be defined');
+    }
+
+    await flushAsyncUpdates();
+
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
+
     const transactionMeta = state.metamask
       .transactions[0] as unknown as TransactionMeta;
 
@@ -101,41 +133,100 @@ describe('useAutomaticGasFeeTokenSelect', () => {
 
     rerender();
 
-    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    await flushAsyncUpdates();
+
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(1);
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledWith(
+      expect.any(String),
+      GAS_FEE_TOKEN_MOCK.tokenAddress,
+    );
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(1);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledWith(store.dispatch);
   });
 
-  it('does not select first gas fee token if gasless not supported', () => {
+  it('does not select first gas fee token if gasless not supported', async () => {
     useIsGaslessSupportedMock.mockReturnValue({
       isSupported: false,
       isSmartTransaction: false,
     });
 
     runHook();
 
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select first gas fee token if sufficient balance', () => {
+  it('does not select first gas fee token if sufficient balance', async () => {
     useInsufficientBalanceAlertsMock.mockReturnValue([]);
 
     runHook();
 
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select first gas fee token after firstCheck is set to false', () => {
-    const { rerender, state } = runHook();
+  it('selects first gas fee token when insufficient balance appears after first render', async () => {
+    let alerts: Alert[] = [];
+    useInsufficientBalanceAlertsMock.mockImplementation(() => alerts);
+
+    const { rerender, store } = runHook({
+      selectedGasFeeToken: undefined,
+    });
+
+    if (!store) {
+      throw new Error('Expected store to be defined');
+    }
+
+    await flushAsyncUpdates();
+
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
+
+    alerts = [{} as Alert];
+
+    rerender();
+
+    await flushAsyncUpdates();
+
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(1);
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledWith(
+      expect.any(String),
+      GAS_FEE_TOKEN_MOCK.tokenAddress,
+    );
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(1);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledWith(store.dispatch);
+  });
+
+  it('does not select first gas fee token after firstCheck is set to false', async () => {
+    const { rerender, state, store } = runHook();
+
+    if (!store) {
+      throw new Error('Expected store to be defined');
+    }
+
+    await flushAsyncUpdates();
+
     // Simulate a rerender with new state that would otherwise trigger selection
     act(() => {
       (
         state.metamask.transactions[0] as unknown as TransactionMeta
       ).selectedGasFeeToken = undefined;
     });
+
     rerender();
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(1); // Only first run
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(1);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledWith(store.dispatch);
   });
 
-  it('does not select if transactionId is falsy', () => {
+  it('does not select if transactionId is falsy', async () => {
     const state = getMockConfirmStateForTransaction(
       genUnapprovedContractInteractionConfirmation({
         gasFeeTokens: [GAS_FEE_TOKEN_MOCK],
@@ -145,15 +236,23 @@ describe('useAutomaticGasFeeTokenSelect', () => {
     // Remove transactionId
     state.metamask.transactions = [];
     renderHookWithConfirmContextProvider(useAutomaticGasFeeTokenSelect, state);
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select if gasFeeTokens is falsy', () => {
+  it('does not select if gasFeeTokens is falsy', async () => {
     runHook({ gasFeeTokens: [] });
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('does not select first gas fee token if 7702 and future native token', () => {
+  it('does not select first gas fee token if 7702 and future native token', async () => {
     useIsGaslessSupportedMock.mockReturnValue({
       isSupported: true,
       isSmartTransaction: false,
@@ -168,16 +267,19 @@ describe('useAutomaticGasFeeTokenSelect', () => {
       ],
     });
 
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(0);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(0);
   });
 
-  it('selects second gas fee token if 7702 and future native token', () => {
+  it('selects second gas fee token if 7702 and future native token', async () => {
     useIsGaslessSupportedMock.mockReturnValue({
       isSupported: true,
       isSmartTransaction: false,
     });
 
-    runHook({
+    const { store } = runHook({
       gasFeeTokens: [
         {
           ...GAS_FEE_TOKEN_MOCK,
@@ -187,6 +289,18 @@ describe('useAutomaticGasFeeTokenSelect', () => {
       ],
     });
 
+    if (!store) {
+      throw new Error('Expected store to be defined');
+    }
+
+    await flushAsyncUpdates();
+
     expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledTimes(1);
+    expect(updateSelectedGasFeeTokenMock).toHaveBeenCalledWith(
+      expect.any(String),
+      GAS_FEE_TOKEN_MOCK.tokenAddress,
+    );
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledTimes(1);
+    expect(forceUpdateMetamaskStateMock).toHaveBeenCalledWith(store.dispatch);
   });
 });

ui/pages/confirmations/hooks/useAutomaticGasFeeTokenSelect.ts

@@ -51,10 +51,9 @@ export function useAutomaticGasFeeTokenSelect() {
       return;
     }
 
-    setFirstCheck(false);
-
     if (shouldSelect) {
       await selectFirstToken();
+      setFirstCheck(false);
     }
   }, [shouldSelect, selectFirstToken, firstCheck, gasFeeTokens, transactionId]);
 }