Description

Updates the Tokens full view (“View all tokens”) and shared token control bar to use MMDS (@metamask/design-system-react-native) and correct safe-area handling.

Why

• Align the Tokens full-screen experience with the design system (network filter, header, icon buttons).
• Fix layout/spacing: control bar alignment, bottom home-indicator clearance on the scrollable list, and header safe area.

What changed

• TokensFullView: SafeAreaView → Box; HeaderBase → HeaderStandard with includesTopInset (no custom header styles).
• BaseControlBar: Network filter ButtonBase → SelectButton (primary); network avatar → AvatarNetwork; filter/add icons → MMDS ButtonIcon (Md). Removed legacy bordered button styles from ControlBarStyles.
• TokenListControlBar: Import (+) button uses MMDS ButtonIcon (Md), no custom background override.
• TokenList / Tokens: When isFullView, apply bottom safe-area inset as paddingBottom on scroll content (FlashList contentContainerStyle; empty-state ScrollView contentContainerStyle). Hide vertical scroll indicator on full-view list.
• Spacing: Full-view control bar horizontal padding kept (px-4); bottom padding pb-3 on control bar; tests updated for SelectButton / AvatarNetwork.

Motivation
Design-system migration for the Tokens full view control bar and header, with safer list scrolling above the home indicator on notched devices.

Changelog

CHANGELOG entry: Updated the Tokens full view header and network filter to use the design system, and improved bottom spacing when scrolling the token list.

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-770

Manual testing steps

Feature: Tokens full view design system and safe area

  Scenario: user opens Tokens full view from homepage
    Given the user is logged in with multiple tokens on popular networks
    And the user is on the wallet homepage

    When the user taps "View all" on the Tokens section
    Then the Tokens full view opens with a HeaderStandard title "Tokens" and a back button
    And the network filter shows as a primary SelectButton (e.g. "Popular networks")
    And filter and add (+) icon buttons appear at Md size on the right

  Scenario: user scrolls to the bottom of the token list
    Given the user is on the Tokens full view with a long token list
    And the device has a bottom safe area (e.g. iPhone with home indicator)

    When the user scrolls to the last token row
    Then the last row is not obscured by the home indicator
    And there is comfortable padding below the final list item

  Scenario: user uses network filter and add token actions
    Given the user is on the Tokens full view

    When the user taps "Popular networks"
    Then the network manager / filter flow opens

    When the user returns and taps the "+" button
    Then the import / add token flow opens

    When the user taps the filter (sort) button
    Then the token sort bottom sheet opens

  Scenario: user navigates back
    Given the user is on the Tokens full view

    When the user taps the back button in the header
    Then the user returns to the previous screen

  Scenario: wallet tab tokens section is unchanged
    Given the user is on the wallet tab (embedded tokens list, not full view)

    When the user views the tokens section
    Then the tokens list and control bar still render without full-view-only bottom inset on the outer container

Also verify (quick):

• Android + iOS, light/dark mode.
• Single-network filter label + network avatar on SelectButton when only one network is enabled.
• Cash / mUSD full view (CashTokensFullView) if you touched shared BaseControlBar / Tokens paths used there.

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 — BaseControlBar.test.tsx, TokensFullView.test.tsx, TokenList / Tokens tests updated or passing
• I've documented my code using JSDoc format if applicable — N/A for mostly component swaps
• I've applied the right labels on the PR

Performance checks (if applicable)

• I've tested on Android
• I've tested with a power user scenario
• I've instrumented key operations with Sentry traces — N/A (UI-only)

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.