Description

This PR integrates the omni-search feature from the Explore page into the browser URL bar autocomplete, enabling users to search across multiple categories directly from the browser.
Jira Ticket: https://consensyssoftware.atlassian.net/browse/MCWP-218

What changed

New Omni-Search Integration:

• When users type in the browser URL bar, they now see search results for:
  • Sites - Curated web3 sites matching the query
  • Recents - Recently visited URLs filtered by query
  • Favorites - Bookmarked URLs filtered by query
  • Tokens - Trending tokens with price and 24h change
  • Perps - Perpetual trading markets with leverage info
  • Predictions - Prediction markets from Polymarket

Architecture:

• Reuses the existing useExploreSearch hook from TrendingView
• Browser-specific section order: Sites → Recents → Favorites → Tokens → Perps → Predictions
• Transforms API data (TrendingAsset, PerpsMarketData, PredictMarket) to unified AutocompleteSearchResult type
• Wraps search content with PerpsConnectionProvider and PerpsStreamProvider for real-time data

Result Component Enhancements:

• Extended Result.tsx to render all new result types (Tokens, Perps, Predictions)
• Added swap button for token results that navigates to swap flow
• Integrated TrendingTokenLogo and PerpsTokenLogo components
• Shows price and percentage change for tokens and perps

Type System:

• Added discriminated union types: TokenSearchResult, PerpsSearchResult, PredictionsSearchResult
• AutocompleteSearchResult is now a union of all result types
• Type-safe category handling with UrlAutocompleteCategory enum

E2E Test Fixes:
The omni-search integration introduced new API calls that caused E2E smoke tests to fail with "unmocked request" errors:

• GET https://token.api.cx.metamask.io/tokens/search?...
• GET https://token.api.cx.metamask.io/v3/tokens/trending?...

Fix: Added TRENDING_API_MOCKS to the default mock configuration in tests/api-mocking/mock-responses/defaults/index.ts. These mocks already existed in trending-api-mocks.ts but weren't loaded into the E2E test harness.

Other Changes:

• Fixed TypeScript error in DiscoveryTab.tsx with proper type narrowing for union types
• Extended useExploreSearch hook to accept custom sectionsOrder option
• Added comprehensive unit tests achieving 85%+ coverage

Files Changed (14 files)

Changelog

CHANGELOG entry: Added omni-search to browser URL bar - search tokens, perps, and predictions directly from the browser

Related issues

Fixes:

Manual testing steps

Feature: Browser URL Bar Omni-Search

  Scenario: User searches for tokens in browser URL bar
    Given user is on the browser tab
    And user taps on the URL bar

    When user types "eth"
    Then user sees search results organized by category
    And user sees Sites section with matching web3 sites
    And user sees Tokens section with Ethereum and related tokens
    And each token shows name, symbol, price, and 24h change
    And each token has a swap button

  Scenario: User initiates swap from search result
    Given user has searched for "eth" in the URL bar
    And user sees Ethereum in the Tokens section

    When user taps the swap button on Ethereum
    Then user is navigated to the swap screen
    And Ethereum is pre-selected as the destination token

  Scenario: User searches for perps markets
    Given user is on the browser tab
    And user taps on the URL bar

    When user types "btc"
    Then user sees Perps section with BTC-USD market
    And market shows name, symbol, leverage, and price

  Scenario: User searches for prediction markets
    Given user is on the browser tab  
    And user taps on the URL bar

    When user types "bitcoin"
    Then user sees Predictions section with matching markets
    And each prediction shows title and status (Open/Closed/Resolved)

  Scenario: User sees empty state with recents and favorites
    Given user is on the browser tab
    And user has browser history and bookmarks

    When user taps on the URL bar without typing
    Then user sees Recents section with recent URLs
    And user sees Favorites section with bookmarked URLs

  Scenario: Basic functionality disabled hides API-dependent sections
    Given user has disabled basic functionality in settings
    And user is on the browser tab

    When user types a search query in the URL bar
    Then user only sees Recents and Favorites (local data)
    And user does not see Tokens, Perps, or Predictions sections

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.