feat(ramps): adds a token selection ui for unified buy

[georgeweiler]

Description

Creates a unified token selection screen that serves as a single entry point for both Buy (Aggregator) and Deposit ramps experiences. Previously, each experience had its own token list, token buttons, and token state. This PR introduces a shared TokenSelection component that users will see before landing on their respective build quote pages.

This PR introduces the UI only. Tokens are hardcoded and click handlers are incomplete. TODO comments with the appropriate tickets have been registered in place.

What is the reason for the change?

• Consolidate duplicate token selection UI across Buy and Deposit flows
• Provide a consistent user experience for token selection
• Simplify navigation by having users pick a token before entering their specific ramp experience

What is the improvement/solution?

• New TokenSelection component at app/components/UI/Ramp/components/TokenSelection/
• Reuses existing components: NetworksFilterBar, NetworksFilterSelector, token list rendering
• Uses hardcoded MOCK_CRYPTOCURRENCIES for initial implementation (API integration pending)

Changelog

CHANGELOG entry: Added unified token selection screen for Buy and Deposit ramps

Related issues

Fixes:

• https://consensyssoftware.atlassian.net/browse/TRAM-2815
• Related: https://consensyssoftware.atlassian.net/browse/TRAM-2816 (Fetch tokens from API endpoint)
• Related: https://consensyssoftware.atlassian.net/browse/TRAM-2795 (Handle token selection routing)

Manual testing steps

Feature: Unified Token Selection for Ramps

  Scenario: User navigates to token selection from Buy
    Given user is on the wallet home screen
    When user taps "Buy" button
    Then user sees token selection screen with title "Select Token"
    And user sees network filter bar at the top
    And user sees search field
    And user sees list of tokens (USDC, USDT, BTC, ETH, USDC on Solana)
    And user sees close button (X) in header

  Scenario: User navigates to token selection from Deposit
    Given user is on the wallet home screen
    When user taps "Deposit" button
    Then user sees token selection screen with title "Select Token"
    And user sees network filter bar at the top
    And user sees search field
    And user sees list of tokens (USDC, USDT, BTC, ETH, USDC on Solana)
    And user sees close button (X) in header

  Scenario: User filters tokens by network
    Given user is on token selection screen
    When user taps "All networks" button
    Then user sees network filter selector screen with title "Select Network"
    When user selects "Ethereum" network
    Then user sees only Ethereum tokens in the list

  Scenario: User searches for tokens
    Given user is on token selection screen
    When user types "USDC" in search field
    Then user sees only USDC tokens in results
    When user clears search
    Then user sees all tokens again

  Scenario: User dismisses keyboard
    Given user is on token selection screen
    And keyboard is visible from searching
    When user scrolls the token list
    Then keyboard is dismissed

  Scenario: User closes token selection
    Given user is on token selection screen
    When user taps close button (X) in header
    Then user returns to previous screen

Screenshots/Recordings

Before

After

ScreenRecording_11-05-2025.06-37-33_1.MP4

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.

---

Note

Introduces a shared Ramp TokenSelection screen with network filtering and search, wires it into navigation, and refactors deposit token UI to reuse shared components.

• Ramps UI:
  • New TokenSelection screen (app/components/UI/Ramp/components/TokenSelection/): token search, selectable list (using TokenListItem), and network filtering via TokenNetworkFilterBar; header close action; uses MOCK_CRYPTOCURRENCIES.
  • New TokenNetworkFilterBar with tests and snapshots; supports “All” state and per-network toggles.
  • Shared TokenListItem component for token rows (symbol, network badge), used by both TokenSelection and deposit flows.
  • New useTokenNetworkInfo hook centralizes network name/image sourcing.
• Navigation/Routes:
  • Adds Routes.RAMP.TOKEN_SELECTION and registers screen in MainNavigator (snapshot updated).
  • Prep work in buy/deposit route utils (commented) to optionally navigate to token selection.
• Deposit:
  • TokenSelectorModal refactored to use TokenListItem and related hooks; network filters updated to use useTokenNetworkInfo.
  • Centralizes mock cryptos in constants/mockCryptoCurrencies and re-exports; updates tests.
• Localization:
  • Adds unified_ramp.networks_filter_bar.all_networks string ("All").

^{Written by Cursor Bugbot for commit fb3a5a9. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[wachunei]

If the flag is true you should see only the new Buy button 🤔 do you still see the two buttons when setting the unified flag v1 to true?

[amitabh94]

This is great work @georgeweiler ! ❤️
The UX of the network selector in video is different from the Figma designs. Can we fix that?

Search is looking good as well.

[georgeweiler]

Hi @amitabh94, good catch. I've added a new network picker for this component that matches the designs
https://github.com/user-attachments/assets/845eedb4-1d43-43a0-a102-0c21ead93c5a

[sonarqubecloud]

Quality Gate passed

Issues
12 New issues
0 Accepted issues

Measures
0 Security Hotspots
91.0% Coverage on New Code
8.3% Duplication on New Code

See analysis details on SonarQube Cloud

[AxelGes]

I don't think we need this comment here.

That logic will happen inside the useRampNavigation hook

[AxelGes]

same here, I don't think we need this comment