fix: use StackActions.push to navigate to trending token details (#27707)

## **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?
-->

**Problem**

When the user navigates to a token's details page and then opens Swap
from there, the navigation stack looks like:

```
[Home → Asset(TokenA) → Bridge]
```

Tapping a trending token inside the Swap/Bridge screen calls
`navigation.navigate('Asset', tokenBParams)`. React Navigation's
`navigate` traverses the stack looking for an existing matching route —
it finds the already-present `Asset(TokenA)` screen and navigates
**back** to it, dismissing the Bridge screen. The user ends up on the
original token's details page instead of the tapped trending token's
details page.

**Fix**

Replace `navigation.navigate('Asset', ...)` with
`navigation.dispatch(StackActions.push('Asset', ...))` in
`TrendingTokenRowItem`. `StackActions.push` always creates a **new**
screen instance regardless of what is already on the stack, so the
navigation flows correctly forward to the tapped token. When `push` is
dispatched from a nested navigator that does not register `'Asset'`
(e.g. `BridgeScreenStack` or `ExploreHome`), React Navigation bubbles
the action up to the root modal stack which does register it — matching
the behaviour already used in `BridgeTokenSelector` for the same reason.

Tests are updated to assert that `navigation.dispatch` is called with
the correct `StackActions.push` action and that `navigation.navigate` is
no longer called.

## **Changelog**

CHANGELOG entry: Fixed tapping a trending token from the Swap screen
dismissing Swap instead of opening the token details page

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-4271

## **Manual testing steps**

```gherkin
Feature: Trending token navigation from Swap screen

  Background:
    Given I am logged into MetaMask Mobile
    And I have at least one token in my wallet

  Scenario: user navigates to a trending token from Swap opened via token details page
    Given I am on a token details page (e.g. mUSD)
    And I can see the "Swap" action button

    When user taps "Swap"
    Then the Swap screen opens
    And I can see a list of trending tokens

    When user taps on a trending token (e.g. Sigma)
    Then the Sigma token details page opens
    And the Swap screen is no longer visible

  Scenario: user navigates to a trending token from Swap opened directly (not from token details)
    Given I am on the Wallet home screen

    When user opens the Swap screen directly
    And user taps on a trending token (e.g. Everlyn Token)
    Then the Everlyn Token details page opens

  Scenario: user navigates to a trending token from the Explore tab
    Given I am on the Explore tab

    When user taps on a trending token
    Then the token details page for that token opens
```

## **Screenshots/Recordings**

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

### **Before**

Tapping a trending token from Swap (opened via token details page)
dismisses Swap and returns to the original token details page.

### **After**

Tapping a trending token from Swap navigates forward to the tapped
token's details page.

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/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.

<!-- Generated with the help of the pr-description AI skill -->


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes navigation behavior for trending token taps by forcing a new
`Asset` screen onto the stack; risk is mainly UX/regression if the
action doesn’t bubble correctly in some navigators.
> 
> **Overview**
> Fixes trending-token taps to **always open a new token details
screen** by replacing `navigation.navigate('Asset', ...)` with
`navigation.dispatch(StackActions.push('Asset', ...))` in
`TrendingTokenRowItem`.
> 
> Updates `TrendingTokenRowItem` tests to mock `dispatch` and assert
`StackActions.push` is used (and `navigate` is not), including cases
where a popular network must be added first or navigation is suppressed
on failure.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e2f50ab. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: GeorgeGkas

app/components/UI/Trending/components/TrendingTokenRowItem/TrendingTokenRowItem.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react-native';
+import { StackActions } from '@react-navigation/native';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import TrendingTokenRowItem from './TrendingTokenRowItem';
 import type { TrendingAsset } from '@metamask/assets-controllers';
@@ -23,12 +24,14 @@ jest.mock('../../services/TrendingFeedSessionManager', () => ({
 }));
 
 const mockNavigate = jest.fn();
+const mockDispatch = jest.fn();
 const mockAddPopularNetwork = jest.fn();
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({
     navigate: mockNavigate,
+    dispatch: mockDispatch,
   }),
   createNavigatorFactory: () => ({}),
 }));
@@ -798,21 +801,24 @@ describe('TrendingTokenRowItem', () => {
       );
       fireEvent.press(tokenRow);
 
-      expect(mockNavigate).toHaveBeenCalledWith('Asset', {
-        chainId: '0x1',
-        address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
-        symbol: 'USDC',
-        name: 'USD Coin',
-        decimals: 6,
-        image:
-          'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
-        pricePercentChange1d: 3.44,
-        isNative: false,
-        isETH: false,
-        isFromTrending: true,
-        rwaData: undefined,
-        source: 'trending',
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith(
+        StackActions.push('Asset', {
+          chainId: '0x1',
+          address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+          symbol: 'USDC',
+          name: 'USD Coin',
+          decimals: 6,
+          image:
+            'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/erc20/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48.png',
+          pricePercentChange1d: 3.44,
+          isNative: false,
+          isETH: false,
+          isFromTrending: true,
+          rwaData: undefined,
+          source: 'trending',
+        }),
+      );
     });
 
     it('navigates to Asset page with isETH true for native ETH on Ethereum mainnet', () => {
@@ -858,21 +864,24 @@ describe('TrendingTokenRowItem', () => {
       );
       fireEvent.press(tokenRow);
 
-      expect(mockNavigate).toHaveBeenCalledWith('Asset', {
-        chainId: '0x1',
-        address: '0x0000000000000000000000000000000000000000',
-        symbol: 'ETH',
-        name: 'Ethereum',
-        decimals: 18,
-        image:
-          'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/slip44/60.png',
-        pricePercentChange1d: 3.44,
-        isNative: true,
-        isETH: true,
-        isFromTrending: true,
-        rwaData: undefined,
-        source: 'trending',
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith(
+        StackActions.push('Asset', {
+          chainId: '0x1',
+          address: '0x0000000000000000000000000000000000000000',
+          symbol: 'ETH',
+          name: 'Ethereum',
+          decimals: 18,
+          image:
+            'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/1/slip44/60.png',
+          pricePercentChange1d: 3.44,
+          isNative: true,
+          isETH: true,
+          isFromTrending: true,
+          rwaData: undefined,
+          source: 'trending',
+        }),
+      );
     });
 
     it('navigates to Asset page with isNative true and isETH false for native token on non-Ethereum chain', () => {
@@ -918,21 +927,24 @@ describe('TrendingTokenRowItem', () => {
       );
       fireEvent.press(tokenRow);
 
-      expect(mockNavigate).toHaveBeenCalledWith('Asset', {
-        chainId: '0x89',
-        address: '0x0000000000000000000000000000000000000000',
-        symbol: 'MATIC',
-        name: 'Polygon',
-        decimals: 18,
-        image:
-          'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/137/slip44/966.png',
-        pricePercentChange1d: 3.44,
-        isNative: true,
-        isETH: false,
-        isFromTrending: true,
-        rwaData: undefined,
-        source: 'trending',
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith(
+        StackActions.push('Asset', {
+          chainId: '0x89',
+          address: '0x0000000000000000000000000000000000000000',
+          symbol: 'MATIC',
+          name: 'Polygon',
+          decimals: 18,
+          image:
+            'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/137/slip44/966.png',
+          pricePercentChange1d: 3.44,
+          isNative: true,
+          isETH: false,
+          isFromTrending: true,
+          rwaData: undefined,
+          source: 'trending',
+        }),
+      );
     });
 
     it('adds network directly when network is not added and navigates to asset', async () => {
@@ -995,7 +1007,10 @@ describe('TrendingTokenRowItem', () => {
 
       // Wait for the async navigation call
       await waitFor(() => {
-        expect(mockNavigate).toHaveBeenCalledWith('Asset', expect.any(Object));
+        expect(mockNavigate).not.toHaveBeenCalled();
+        expect(mockDispatch).toHaveBeenCalledWith(
+          StackActions.push('Asset', expect.any(Object)),
+        );
       });
     });
 
@@ -1054,7 +1069,7 @@ describe('TrendingTokenRowItem', () => {
       });
 
       // Navigation should NOT be called when network addition fails
-      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
 
       consoleErrorSpy.mockRestore();
     });
@@ -1077,7 +1092,7 @@ describe('TrendingTokenRowItem', () => {
       );
       fireEvent.press(tokenRow);
 
-      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).not.toHaveBeenCalled();
     });
 
     it('navigates with assetId as address for non-EVM chains', () => {
@@ -1128,21 +1143,24 @@ describe('TrendingTokenRowItem', () => {
       );
       fireEvent.press(tokenRow);
 
-      expect(mockNavigate).toHaveBeenCalledWith('Asset', {
-        chainId: 'bip122:000000000019d6689c085ae165831e93',
-        address: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
-        symbol: 'BTC',
-        name: 'Bitcoin',
-        decimals: 8,
-        image:
-          'https://static.cx.metamask.io/api/v2/tokenIcons/assets/bip122/000000000019d6689c085ae165831e93/slip44/0.png',
-        pricePercentChange1d: 3.44,
-        isNative: true,
-        isETH: false,
-        isFromTrending: true,
-        rwaData: undefined,
-        source: 'trending',
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith(
+        StackActions.push('Asset', {
+          chainId: 'bip122:000000000019d6689c085ae165831e93',
+          address: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
+          symbol: 'BTC',
+          name: 'Bitcoin',
+          decimals: 8,
+          image:
+            'https://static.cx.metamask.io/api/v2/tokenIcons/assets/bip122/000000000019d6689c085ae165831e93/slip44/0.png',
+          pricePercentChange1d: 3.44,
+          isNative: true,
+          isETH: false,
+          isFromTrending: true,
+          rwaData: undefined,
+          source: 'trending',
+        }),
+      );
     });
 
     it('navigates directly when network is not popular but is added', () => {
@@ -1194,21 +1212,24 @@ describe('TrendingTokenRowItem', () => {
       fireEvent.press(tokenRow);
 
       expect(queryByTestId('network-modal')).toBeNull();
-      expect(mockNavigate).toHaveBeenCalledWith('Asset', {
-        chainId: '0x3e7',
-        address: '0x123',
-        symbol: 'TEST',
-        name: 'Test Token',
-        decimals: 18,
-        image:
-          'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/999/erc20/0x123.png',
-        pricePercentChange1d: 3.44,
-        isNative: false,
-        isETH: false,
-        isFromTrending: true,
-        rwaData: undefined,
-        source: 'trending',
-      });
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(mockDispatch).toHaveBeenCalledWith(
+        StackActions.push('Asset', {
+          chainId: '0x3e7',
+          address: '0x123',
+          symbol: 'TEST',
+          name: 'Test Token',
+          decimals: 18,
+          image:
+            'https://static.cx.metamask.io/api/v2/tokenIcons/assets/eip155/999/erc20/0x123.png',
+          pricePercentChange1d: 3.44,
+          isNative: false,
+          isETH: false,
+          isFromTrending: true,
+          rwaData: undefined,
+          source: 'trending',
+        }),
+      );
     });
   });
 

app/components/UI/Trending/components/TrendingTokenRowItem/TrendingTokenRowItem.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { ImageSourcePropType, TouchableOpacity, View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { StackActions, useNavigation } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import Text, {
   TextColor,
@@ -249,7 +249,10 @@ const TrendingTokenRowItem = ({
       }
     }
 
-    navigation.navigate('Asset', assetParams);
+    // Use push so we always open a new Asset screen for the tapped token.
+    // This prevents issues such as dismissing screens like Bridge instead
+    // of navigating forward to the new token.
+    navigation.dispatch(StackActions.push('Asset', assetParams));
   }, [
     assetParams,
     caipChainId,