refactor: modify trending browser navigators (#23598)

## **Description**

Fixes issue where custom trending browser uses a different design
compared to the original.
This PR removes our custom browser wrapper in favour of the original
browser + behaviour -- the mobile platform team will spearhead the IAB
changes.

For visibility: 

Navigation Structure Before:
```
(TAB) REMOVED Browser Tab -- removing this caused issues for areas using old browser navigation
(TAB) Trending Tab (ExploreFlow)
  (STACK) Trending
    (STACK) Trending
      - TRENDING_FEED
      - EXPLORE_SEARCH
      - Custom Browser
```

Navigation Structure After:

```
(TAB) Browser Tab (BrowserFlow) -- Keeping original browser tab, but it is hidden - existing navigations will still work
  - BROWSER.VIEW
  - BROWSER.ASSET_LOADER
  - BROWSER.ASSET_VIEW
(TAB) Trending Tab (ExploreFlow)
  - TRENDING_FEED
  - EXPLORE_SEARCH
  - Dedicated BrowserFlow screen -- Allows trending page to use existing browser (no custom browser), and retains trending navigation back behaviour (search queries and navigation stack is retained)
```



## **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: refactor: modify trending/explore page navigation
stacks

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

https://www.loom.com/share/bb1343b7a7ed4b1abb841f8c6d1284f3

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



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Refactors Explore/Trending to use the main Browser flow (with a hidden
Browser tab), adds `TRENDING_FEED`, and enhances TabBar to support
custom selection/hidden states, updating routes and tests accordingly.
> 
> - **Navigation / Explore-Trending**:
> - Replace custom Trending browser with existing `BrowserFlow`; remove
`BrowserWrapper` and related screens.
> - Introduce `ExploreHome` stack with `Routes.TRENDING_FEED`,
`Routes.EXPLORE_SEARCH`, `Routes.SITES_FULL_VIEW`, and nested
`Routes.BROWSER.HOME`.
> - Keep `Routes.BROWSER.HOME` as a hidden tab when trending is enabled;
Trending tab considers both `TRENDING_VIEW` and `BROWSER.HOME` as
selected.
> - Update `BrowserTab` back behavior to return to `TRENDING_VIEW ->
TRENDING_FEED` when not launched from Trending.
>   - Add `Routes.TRENDING_FEED`.
> - **TabBar**:
> - Add `options.isSelected(rootScreenName)` and `options.isHidden` to
`ExtendedBottomTabDescriptor`.
> - Change Trending tab press to `navigation.reset({ routes: [{ name:
Routes.TRENDING_VIEW }] })`.
> - **Sites/Explore interactions**:
> - `SiteRowItemWrapper` and `SitesSearchFooter` now navigate to
`Routes.BROWSER.HOME` with `screen: Routes.BROWSER.VIEW` and `{
fromTrending: true, newTabUrl, timestamp }`.
> - **Tests / Snapshots**:
> - Update unit tests and snapshots for new navigation targets and
removal of deprecated screens (`TrendingBrowser`, `BrowserWrapper`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
ec05612. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Prithpal-Sooriya

app/component-library/components/Navigation/TabBar/TabBar.test.tsx

@@ -222,7 +222,10 @@ describe('TabBar', () => {
     );
 
     fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Trending}`));
-    expect(navigation.navigate).toHaveBeenCalledWith(Routes.TRENDING_VIEW);
+    expect(navigation.reset).toHaveBeenCalledWith({
+      index: 0,
+      routes: [{ name: Routes.TRENDING_VIEW }],
+    });
   });
 
   it('does not navigate to trending when trending feature flag is disabled', () => {

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -47,7 +47,9 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
       const callback = options.callback;
       const rootScreenName = options.rootScreenName;
       const key = `tab-bar-item-${tabBarIconKey}`; // this key is also used to identify elements for e2e testing
-      const isSelected = state.index === index;
+      const isSelected = options?.isSelected
+        ? options.isSelected(state.routeNames[state.index])
+        : state.index === index;
       const icon = ICON_BY_TAB_BAR_ICON_KEY[tabBarIconKey];
       const labelKey = LABEL_BY_TAB_BAR_ICON_KEY[tabBarIconKey];
       const labelText = labelKey ? strings(labelKey) : '';
@@ -93,7 +95,10 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             break;
           case Routes.TRENDING_VIEW:
             if (isAssetsTrendingTokensEnabled) {
-              navigation.navigate(Routes.TRENDING_VIEW);
+              navigation.reset({
+                index: 0,
+                routes: [{ name: Routes.TRENDING_VIEW }],
+              });
             }
             break;
         }
@@ -102,6 +107,10 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
       const isWalletAction =
         rootScreenName === Routes.MODAL.TRADE_WALLET_ACTIONS;
 
+      if (options?.isHidden) {
+        return null;
+      }
+
       return (
         <View key={key} style={tw.style('flex-1 w-full')}>
           <TabBarItem

app/component-library/components/Navigation/TabBar/TabBar.types.ts

@@ -37,6 +37,8 @@ export interface ExtendedBottomTabDescriptor extends BottomTabDescriptor {
     tabBarIconKey: TabBarIconKey;
     callback: () => void;
     rootScreenName: string;
+    isSelected?: (rootScreenName: string) => boolean;
+    isHidden?: boolean;
   };
 }
 

app/components/Nav/Main/MainNavigator.js

@@ -51,7 +51,8 @@ import { Confirm as RedesignedConfirm } from '../../Views/confirmations/componen
 import ContactForm from '../../Views/Settings/Contacts/ContactForm';
 import ActivityView from '../../Views/ActivityView';
 import RewardsNavigator from '../../UI/Rewards/RewardsNavigator';
-import TrendingView from '../../Views/TrendingView/TrendingView';
+import { ExploreFeed } from '../../Views/TrendingView/TrendingView';
+import ExploreSearchScreen from '../../Views/TrendingView/ExploreSearchScreen/ExploreSearchScreen';
 import SwapsAmountView from '../../UI/Swaps';
 import SwapsQuotesView from '../../UI/Swaps/QuotesView';
 import CollectiblesDetails from '../../UI/CollectibleModal';
@@ -133,7 +134,6 @@ import {
 } from '../../Views/AddAsset/AddAsset.constants';
 import { strings } from '../../../../locales/i18n';
 import SitesFullView from '../../Views/SitesFullView/SitesFullView';
-import BrowserWrapper from '../../Views/TrendingView/components/BrowserWrapper/BrowserWrapper';
 import BridgeView from '../../UI/Bridge/Views/BridgeView';
 
 const Stack = createStackNavigator();
@@ -278,25 +278,6 @@ const RewardsHome = () => (
   </Stack.Navigator>
 );
 
-// Persist the last trending screen across unmounts
-export const lastTrendingScreenRef = { current: 'TrendingFeed' };
-
-// Callback to update the last trending screen (outside component to persist)
-export const updateLastTrendingScreen = (screenName) => {
-  // eslint-disable-next-line react-compiler/react-compiler
-  lastTrendingScreenRef.current = screenName;
-};
-
-const TrendingHome = () => (
-  <Stack.Navigator mode="modal" screenOptions={clearStackNavigatorOptions}>
-    <Stack.Screen
-      name={Routes.TRENDING_VIEW}
-      component={TrendingView}
-      options={{ headerShown: false }}
-    />
-  </Stack.Navigator>
-);
-
 /* eslint-disable react/prop-types */
 const BrowserFlow = (props) => (
   <Stack.Navigator
@@ -324,6 +305,63 @@ const BrowserFlow = (props) => (
   </Stack.Navigator>
 );
 
+const ExploreHome = () => (
+  <Stack.Navigator initialRouteName={Routes.TRENDING_FEED} mode="modal">
+    <Stack.Screen
+      name={Routes.TRENDING_FEED}
+      component={ExploreFeed}
+      options={{ headerShown: false }}
+    />
+    <Stack.Screen
+      name={Routes.EXPLORE_SEARCH}
+      component={ExploreSearchScreen}
+      options={{
+        headerShown: false,
+        animationEnabled: true,
+        cardStyleInterpolator: ({ current, layouts }) => ({
+          cardStyle: {
+            transform: [
+              {
+                translateX: current.progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [layouts.screen.width, 0],
+                }),
+              },
+            ],
+          },
+        }),
+      }}
+    />
+    <Stack.Screen
+      name={Routes.SITES_FULL_VIEW}
+      component={SitesFullView}
+      options={{
+        headerShown: false,
+        animationEnabled: true,
+        cardStyleInterpolator: ({ current, layouts }) => ({
+          cardStyle: {
+            transform: [
+              {
+                translateX: current.progress.interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [layouts.screen.width, 0],
+                }),
+              },
+            ],
+          },
+        }),
+      }}
+    />
+
+    {/* Trending Browser Stack (uses existing browser flow) */}
+    <Stack.Screen
+      name={Routes.BROWSER.HOME}
+      component={BrowserFlow}
+      options={{ headerShown: false }}
+    />
+  </Stack.Navigator>
+);
+
 ///: BEGIN:ONLY_INCLUDE_IF(external-snaps)
 const SnapsSettingsStack = () => (
   <Stack.Navigator>
@@ -642,10 +680,12 @@ const HomeTabs = () => {
     }
 
     // Hide tab bar when browser is in fullscreen mode
-    if (
-      isBrowserFullscreen &&
-      currentRoute.name?.startsWith(Routes.BROWSER.HOME)
-    ) {
+    const currentStackRouteName =
+      currentRoute?.state?.routes?.[currentRoute?.state?.index]?.name;
+    const isInBrowser =
+      currentRoute.name?.startsWith(Routes.BROWSER.HOME) ||
+      currentStackRouteName?.startsWith(Routes.BROWSER.HOME);
+    if (isBrowserFullscreen && isInBrowser) {
       return null;
     }
 
@@ -669,21 +709,33 @@ const HomeTabs = () => {
         component={WalletTabModalFlow}
       />
       {isAssetsTrendingTokensEnabled ? (
-        <Tab.Screen
-          name={Routes.TRENDING_VIEW}
-          options={options.trending}
-          component={TrendingHome}
-          layout={({ children }) => UnmountOnBlurComponent(children)}
-        />
+        <>
+          <Tab.Screen
+            name={Routes.TRENDING_VIEW}
+            options={{
+              ...options.trending,
+              isSelected: (rootScreenName) =>
+                [Routes.TRENDING_VIEW, Routes.BROWSER.HOME].includes(
+                  rootScreenName,
+                ),
+            }}
+            component={ExploreHome}
+            layout={({ children }) => UnmountOnBlurComponent(children)}
+          />
+          <Tab.Screen
+            name={Routes.BROWSER.HOME}
+            options={{
+              ...options.browser,
+              isHidden: true,
+            }}
+            component={BrowserFlow}
+            layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
+          />
+        </>
       ) : (
         <Tab.Screen
           name={Routes.BROWSER.HOME}
-          options={{
-            ...options.browser,
-            tabBarButton: isAssetsTrendingTokensEnabled
-              ? () => null
-              : undefined,
-          }}
+          options={options.browser}
           component={BrowserFlow}
           layout={({ children }) => <UnmountOnBlur>{children}</UnmountOnBlur>}
         />
@@ -950,26 +1002,6 @@ const MainNavigator = () => {
         }}
       />
       <Stack.Screen name="Home" component={HomeTabs} />
-      <Stack.Screen
-        name="TrendingBrowser"
-        component={BrowserWrapper}
-        options={{
-          headerShown: false,
-          animationEnabled: true,
-          cardStyleInterpolator: ({ current, layouts }) => ({
-            cardStyle: {
-              transform: [
-                {
-                  translateX: current.progress.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [layouts.screen.width, 0],
-                  }),
-                },
-              ],
-            },
-          }),
-        }}
-      />
       <Stack.Screen
         name={Routes.WALLET.TOKENS_FULL_VIEW}
         component={TokensFullView}
@@ -1033,25 +1065,7 @@ const MainNavigator = () => {
           }),
         }}
       />
-      <Stack.Screen
-        name={Routes.SITES_FULL_VIEW}
-        component={SitesFullView}
-        options={{
-          animationEnabled: true,
-          cardStyleInterpolator: ({ current, layouts }) => ({
-            cardStyle: {
-              transform: [
-                {
-                  translateX: current.progress.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [layouts.screen.width, 0],
-                  }),
-                },
-              ],
-            },
-          }),
-        }}
-      />
+
       <Stack.Screen name="Webview" component={Webview} />
       <Stack.Screen name="SendView" component={SendView} />
       <Stack.Screen

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -38,17 +38,6 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
     component={[Function]}
     name="Home"
   />
-  <Screen
-    component={[Function]}
-    name="TrendingBrowser"
-    options={
-      {
-        "animationEnabled": true,
-        "cardStyleInterpolator": [Function],
-        "headerShown": false,
-      }
-    }
-  />
   <Screen
     component={[Function]}
     name="TokensFullView"
@@ -97,16 +86,6 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
       }
     }
   />
-  <Screen
-    component={[Function]}
-    name="SitesFullView"
-    options={
-      {
-        "animationEnabled": true,
-        "cardStyleInterpolator": [Function],
-      }
-    }
-  />
   <Screen
     component={[Function]}
     name="Webview"