chore: explore v2 nit fixes (#29720)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

### 🔗 Browser URL Display Improvements
- **Enhanced URL display for user favorites and recents**: Updated
browser favorites and recents to show more informative display URLs that
include the full path and query parameters (e.g.,
`app.uniswap.org/swap?chain=1` instead of just `uniswap.org`)
- **Maintained clean URLs for curated content**: Kept hostname-only
display for curated site cards to preserve clean domain labels
- **Added comprehensive test coverage**: Included new unit tests to
verify the full path display functionality works correctly for both
favorites and recents

### 🏈 Sports Section UI/UX Enhancements
- **Renamed "Soccer" to "Football"**: Updated the label key from
`trending.soccer` to `trending.football` for more universal terminology
- **Improved Sports Tab list rendering**: Changed from
`PredictionCarouselRowItem` to `PredictMarket` component for better
visual consistency in the active sports markets list

### ⚡ Performance Optimizations
- **Refactored Sports Tab architecture**: Converted from nested scroll
structure to a single `FlashList` with header and footer components for
better performance
- **Added pull-to-refresh functionality**: Implemented `RefreshControl`
for improved user interaction in the Sports Tab
- **Streamlined layout structure**: Eliminated nested scrolling
components that could cause performance issues

### 🎯 Filter Propagation Enhancement  
- **Enhanced perps navigation filtering**: Added ability to track
selected pill state in `PillToggleCardList` component and propagate the
active filter when navigating from Macro/RWA tabs to the perps market
list
- **Improved user experience**: Users now maintain their filter
selection context when drilling down from trending sections to detailed
market views
- **Added callback support**: Extended `PillToggleCardList` with
`onPillChange` callback to enable parent components to track active
selections

### 🧪 Testing & Code Quality
- **Added new utility functions**: Introduced `extractFullDisplayUrl`
function with proper documentation and test coverage
- **Enhanced test suites**: Updated and expanded test coverage for
browser sites functionality
- **Maintained backward compatibility**: All changes preserve existing
functionality while adding new features

<!--
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?
-->

## **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: solved nit issues in explore v2

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3145

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

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

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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).
- [ ] 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-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Medium Risk**
> Medium risk due to a non-trivial refactor of the Sports tab to a
single `FlashList` with new refresh/load-more wiring, plus changes that
affect perps navigation filtering behavior. URL display changes are low
risk but touch shared site/query matching utilities.
> 
> **Overview**
> Improves Explore URL labeling by introducing `extractFullDisplayUrl`
and switching browser **favorites** and **recents** to display
host+path+query (while keeping curated site cards on hostname-only
`extractDisplayUrl`), with updated/added unit tests.
> 
> Enhances Trending Explore UX by refactoring `SportsTab` into a single
`FlashList` with header/footer, pull-to-refresh, and using
`PredictMarket` rows for the “All Sports” list; also renames the soccer
label key to `trending.football`.
> 
> Adds an `onPillChange` callback to `PillToggleCardList` and updates
`MacroTab`/`RwasTab` to pass the active pill as a filter when navigating
to the perps market list.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
41f7071. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: juanmigdr

app/components/UI/Sites/hooks/useBrowserFavoritesSites/useBrowserFavoritesSites.test.ts

@@ -16,7 +16,7 @@ const setBookmarks = (bookmarks: { url: string; name: string }[]) => {
 describe('useBrowserFavoritesSites', () => {
   beforeEach(() => mockUseSelector.mockReset());
 
-  it('maps bookmarks to SiteData with prefixed URL and extracted display URL', () => {
+  it('maps bookmarks to SiteData with prefixed URL and full display URL', () => {
     setBookmarks([{ url: 'uniswap.org', name: 'Uniswap' }]);
     const { result } = renderHook(() => useBrowserFavoritesSites());
 
@@ -31,6 +31,16 @@ describe('useBrowserFavoritesSites', () => {
     );
   });
 
+  it('shows full path in displayUrl for favorites', () => {
+    setBookmarks([
+      { url: 'https://app.uniswap.org/swap?chain=1', name: 'Uniswap' },
+    ]);
+    const { result } = renderHook(() => useBrowserFavoritesSites());
+    expect(result.current.data[0].displayUrl).toBe(
+      'app.uniswap.org/swap?chain=1',
+    );
+  });
+
   it('falls back to the display URL when the bookmark has no name', () => {
     setBookmarks([{ url: 'https://example.com/path', name: '' }]);
     const { result } = renderHook(() => useBrowserFavoritesSites());

app/components/UI/Sites/hooks/useBrowserFavoritesSites/useBrowserFavoritesSites.ts

@@ -5,6 +5,7 @@ import { selectBrowserBookmarksWithType } from '../../../../../selectors/browser
 import type { SiteData } from '../../components/SiteRowItem/SiteRowItem';
 import {
   extractDisplayUrl,
+  extractFullDisplayUrl,
   matchesSiteQuery,
 } from '../useSiteData/useSitesData';
 
@@ -19,7 +20,7 @@ const toSiteData = (entry: BookmarkEntry, index: number): SiteData => {
     id: `browser-favorite-${url}-${index}`,
     name: entry.name?.trim() || extractDisplayUrl(url),
     url,
-    displayUrl: extractDisplayUrl(url),
+    displayUrl: extractFullDisplayUrl(url),
     storedBookmarkUrl: entry.url,
   };
 };

app/components/UI/Sites/hooks/useBrowserRecentsSites/useBrowserRecentsSites.test.ts

@@ -85,6 +85,16 @@ describe('useBrowserRecentsSites', () => {
     setHistory([{ url: 'https://example.com/path', name: '' }]);
     const { result } = renderHook(() => useBrowserRecentsSites());
     expect(result.current.data[0].name).toBe('example.com');
-    expect(result.current.data[0].displayUrl).toBe('example.com');
+    expect(result.current.data[0].displayUrl).toBe('example.com/path');
+  });
+
+  it('shows full path in displayUrl for recents', () => {
+    setHistory([
+      { url: 'https://app.uniswap.org/swap?chain=1', name: 'Uniswap' },
+    ]);
+    const { result } = renderHook(() => useBrowserRecentsSites());
+    expect(result.current.data[0].displayUrl).toBe(
+      'app.uniswap.org/swap?chain=1',
+    );
   });
 });

app/components/UI/Sites/hooks/useBrowserRecentsSites/useBrowserRecentsSites.ts

@@ -3,7 +3,10 @@ import { useSelector } from 'react-redux';
 import { prefixUrlWithProtocol } from '../../../../../util/browser';
 import { selectBrowserHistoryWithType } from '../../../../../selectors/browser';
 import type { SiteData } from '../../components/SiteRowItem/SiteRowItem';
-import { extractDisplayUrl } from '../useSiteData/useSitesData';
+import {
+  extractDisplayUrl,
+  extractFullDisplayUrl,
+} from '../useSiteData/useSitesData';
 
 const MAX_RECENT_SITES = 5;
 
@@ -29,7 +32,7 @@ const toSiteData = (entry: HistoryEntry, index: number): SiteData => {
     id: `browser-recent-${normalizeUrlKey(url)}-${index}`,
     name: entry.name?.trim() || extractDisplayUrl(url),
     url,
-    displayUrl: extractDisplayUrl(url),
+    displayUrl: extractFullDisplayUrl(url),
   };
 };
 

app/components/UI/Sites/hooks/useSiteData/useSitesData.test.ts

@@ -3,6 +3,7 @@ import {
   useSitesData,
   clearSitesCache,
   matchesSiteQuery,
+  extractFullDisplayUrl,
 } from './useSitesData';
 import type { SiteData } from '../../components/SiteRowItem/SiteRowItem';
 import Logger from '../../../../../util/Logger';
@@ -336,6 +337,28 @@ describe('useSitesData', () => {
   });
 });
 
+describe('extractFullDisplayUrl', () => {
+  it('strips the protocol and keeps path + query', () => {
+    expect(extractFullDisplayUrl('https://app.uniswap.org/swap?chain=1')).toBe(
+      'app.uniswap.org/swap?chain=1',
+    );
+  });
+
+  it('strips www prefix', () => {
+    expect(extractFullDisplayUrl('https://www.example.com/path')).toBe(
+      'example.com/path',
+    );
+  });
+
+  it('returns just the hostname when there is no path', () => {
+    expect(extractFullDisplayUrl('https://uniswap.org')).toBe('uniswap.org');
+  });
+
+  it('returns the raw string for invalid URLs', () => {
+    expect(extractFullDisplayUrl('not a url')).toBe('not a url');
+  });
+});
+
 describe('matchesSiteQuery', () => {
   const site: SiteData = {
     id: '1',

app/components/UI/Sites/hooks/useSiteData/useSitesData.ts

@@ -61,7 +61,8 @@ const PORTFOLIO_SITE: SiteData = {
 };
 
 /**
- * Helper function to extract display URL from full URL
+ * Returns just the hostname (no www., no path) — used for curated site cards
+ * where a clean domain label is preferred.
  */
 export const extractDisplayUrl = (url: string): string => {
   try {
@@ -72,6 +73,21 @@ export const extractDisplayUrl = (url: string): string => {
   }
 };
 
+/**
+ * Returns the full URL without the protocol (e.g. `uniswap.org/swap?chain=1`).
+ * Used for user-generated entries (recents, favorites) where the full path
+ * provides meaningful context.
+ */
+export const extractFullDisplayUrl = (url: string): string => {
+  try {
+    const urlObj = new URL(url);
+    const withoutProtocol = url.slice(urlObj.protocol.length + 2); // strip "scheme://"
+    return withoutProtocol.replace(/^www\./, '');
+  } catch {
+    return url;
+  }
+};
+
 export const matchesSiteQuery = (site: SiteData, query: string): boolean => {
   const q = query.toLowerCase();
   return (

app/components/Views/TrendingView/components/PillToggleCardList.tsx

@@ -18,6 +18,8 @@ export interface PillToggleCardListProps<T> {
   idPrefix: string;
   /** Defaults to first tab. */
   defaultPillKey?: string;
+  /** Called whenever the active pill changes. */
+  onPillChange?: (key: string) => void;
   testIdPrefix?: string;
   listTestId?: string;
 }
@@ -35,6 +37,7 @@ function PillToggleCardList<T>({
   Skeleton,
   idPrefix,
   defaultPillKey,
+  onPillChange,
   testIdPrefix = DEFAULT_TEST_ID_PREFIX,
   listTestId,
 }: PillToggleCardListProps<T>) {
@@ -43,12 +46,17 @@ function PillToggleCardList<T>({
   const active = tabs.find((p) => p.key === activeKey) ?? tabs[0];
   const pills: PillOption[] = tabs.map(({ key, name }) => ({ key, name }));
 
+  const handleSelect = (key: string) => {
+    setActiveKey(key);
+    onPillChange?.(key);
+  };
+
   return (
     <Box testID={testIdPrefix} twClassName="mt-2 mb-9">
       <PillRow
         pills={pills}
         activeKey={activeKey}
-        onSelect={setActiveKey}
+        onSelect={handleSelect}
         testIdPrefix={testIdPrefix}
       />
       <CardList<T>

app/components/Views/TrendingView/feeds/predictions/useSportsMarketsFeed.ts

@@ -14,7 +14,7 @@ const PAGE_SIZE = 20;
 // add a row here AND a usePredictMarketData call below (Rules of Hooks).
 const SOCCER = {
   key: 'soccer',
-  labelKey: 'trending.soccer',
+  labelKey: 'trending.football',
   customQueryParams: 'tag_id=100350',
 } as const;
 const BASKETBALL = {

app/components/Views/TrendingView/tabs/MacroTab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { Box } from '@metamask/design-system-react-native';
@@ -31,14 +31,15 @@ const PerpsRowSingleSkeleton: React.FC = () => <PerpsRowSkeleton count={1} />;
 
 interface MacroPerpsBlockProps {
   refresh: TabProps['refresh'];
-  onViewAll: () => void;
+  onViewAll: (filter: string) => void;
 }
 
 const MacroPerpsBlock: React.FC<MacroPerpsBlockProps> = ({
   refresh,
   onViewAll,
 }) => {
   const perps = usePerpsFeed({ variant: 'macro', refresh });
+  const activePillKey = useRef<string>('stocks');
 
   const tabs = useMemo<PillToggleCardListTab<PerpsMarketData>[]>(() => {
     const stocks = perps.data
@@ -74,7 +75,7 @@ const MacroPerpsBlock: React.FC<MacroPerpsBlockProps> = ({
     <Box>
       <SectionHeader
         title={strings('trending.macro_stocks_commodity_perps')}
-        onViewAll={onViewAll}
+        onViewAll={() => onViewAll(activePillKey.current)}
         testID="section-header-view-all-macro_stocks_commodity_perps"
       />
       <PillToggleCardList<PerpsMarketData>
@@ -83,6 +84,9 @@ const MacroPerpsBlock: React.FC<MacroPerpsBlockProps> = ({
         renderItem={renderItem}
         Skeleton={PerpsRowSingleSkeleton}
         idPrefix="macro_stocks_commodity_perps"
+        onPillChange={(key) => {
+          activePillKey.current = key;
+        }}
         testIdPrefix="macro-stocks-commodity-pills"
         listTestId="macro-stocks-commodity-perps-list"
       />
@@ -137,7 +141,9 @@ const MacroTab: React.FC<TabProps> = ({ refresh, refreshing, onRefresh }) => {
         <PerpsSectionProvider>
           <MacroPerpsBlock
             refresh={refresh}
-            onViewAll={() => navigateToPerpsMarketList(perpsNavigation)}
+            onViewAll={(filter) =>
+              navigateToPerpsMarketList(perpsNavigation, filter)
+            }
           />
         </PerpsSectionProvider>
       )}

app/components/Views/TrendingView/tabs/RwasTab.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { useNavigation, NavigationProp } from '@react-navigation/native';
 import { useSelector } from 'react-redux';
 import { Box } from '@metamask/design-system-react-native';
@@ -38,14 +38,15 @@ const PerpsRowSingleSkeleton: React.FC = () => <PerpsRowSkeleton count={1} />;
 
 interface RwaPerpsBlockProps {
   refresh: TabProps['refresh'];
-  onViewAll: () => void;
+  onViewAll: (filter: string) => void;
 }
 
 const RwaPerpsBlock: React.FC<RwaPerpsBlockProps> = ({
   refresh,
   onViewAll,
 }) => {
   const perps = usePerpsFeed({ variant: 'rwa', refresh });
+  const activePillKey = useRef<string>('commodities');
 
   const tabs = useMemo<PillToggleCardListTab<PerpsMarketData>[]>(() => {
     const byType = (type: PerpsMarketData['marketType']) =>
@@ -83,7 +84,7 @@ const RwaPerpsBlock: React.FC<RwaPerpsBlockProps> = ({
     <Box>
       <SectionHeader
         title={strings('trending.rwa_perps_section')}
-        onViewAll={onViewAll}
+        onViewAll={() => onViewAll(activePillKey.current)}
         testID="section-header-view-all-rwa_perps"
       />
       <PillToggleCardList<PerpsMarketData>
@@ -92,6 +93,9 @@ const RwaPerpsBlock: React.FC<RwaPerpsBlockProps> = ({
         renderItem={renderItem}
         Skeleton={PerpsRowSingleSkeleton}
         idPrefix="rwa_perps"
+        onPillChange={(key) => {
+          activePillKey.current = key;
+        }}
         testIdPrefix="rwa-perps-pills"
         listTestId="rwa-perps-pill-toggled-list"
       />
@@ -178,7 +182,9 @@ const RwasTab: React.FC<TabProps> = ({ refresh, refreshing, onRefresh }) => {
         <PerpsSectionProvider>
           <RwaPerpsBlock
             refresh={refresh}
-            onViewAll={() => navigateToPerpsMarketList(perpsNavigation)}
+            onViewAll={(filter) =>
+              navigateToPerpsMarketList(perpsNavigation, filter)
+            }
           />
         </PerpsSectionProvider>
       )}