refactor(perps): migrate provider selector UI to MMDS

[brianacnguyen]

Description

The Perps provider selector on home and in the sheet used custom badge/option styles that misaligned Testnet tags and chrome with adjacent heading content. This migrates that UI to MMDS primitives so layout stays vertically centered without a local stylesheet.

What changed:

• Replaced the custom TouchableOpacity badge with MMDS SelectButton (Sm / Primary), including a small warning dot startAccessory on testnet
• Rebuilt PerpsProviderSelectorSheet with MMDS BottomSheet, BottomSheetHeader, ListItemSelect, and Tag (Warning / Neutral) for network labels
• Added twClassName="self-center" on home Testnet Tag and the selector button so chrome aligns with the heading row
• Removed PerpsProviderSelector.styles.ts and the sheet’s isVisible prop (visibility is owned by navigation / mounting)
• Updated unit tests for the badge and sheet to match the new components and selected-state testIDs

Changelog

CHANGELOG entry: Fixed vertical alignment of the Perps provider selector and Testnet tags on Perps home and the provider sheet

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-3564

Manual testing steps

Feature: Perps provider selector MMDS chrome

  Scenario: user opens Perps home and sees a centered provider selector
    Given multi-provider Perps is enabled and the user has completed Perps onboarding
    And the user is on Perps home

    When the screen loads
    Then the provider SelectButton is vertically centered with the home heading chrome
    And if the network is Testnet, the Testnet Tag is vertically centered with the heading

  Scenario: user changes provider from the sheet
    Given the user is on Perps home with the provider selector visible

    When the user taps the provider SelectButton
    Then the provider BottomSheet opens with ListItemSelect options and Mainnet/Testnet Tags
    When the user selects a different provider or network option
    Then the selection is applied and the sheet closes
    And the home SelectButton label updates to the new provider

Unit coverage (optional):

yarn jest app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.test.tsx
yarn jest app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorSheet.test.tsx

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.

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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Low Risk
UI-only refactor in Perps provider selection with no auth, data, or trading logic changes; tests updated for new components.

Overview
Migrates the Perps provider selector (home badge and selection sheet) from custom component-library styling to MMDS primitives, mainly to fix vertical alignment of Testnet tags and selector chrome with the home heading.

The home badge is now an MMDS SelectButton (with a testnet warning dot as startAccessory) instead of a custom TouchableOpacity + text/icon row. The sheet uses MMDS BottomSheet, ListItemSelect, and Tag for network labels; PerpsProviderSelector.styles.ts is removed and the sheet no longer takes an isVisible prop—visibility is navigation/mount-driven. twClassName="self-center" is added on the home Testnet tag and selector for heading-row alignment.

Tests are updated for new testIDs, accessibilityState.selected instead of check icons, and the lifecycle flow assertion for aggregated provider selection.

^{Reviewed by Cursor Bugbot for commit 0884e3b. Bugbot is set up for automated code reviews on this repo. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePreps
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR refactors Perps UI components within the PerpsProviderSelector and PerpsHomeView:

1. PerpsProviderSelectorBadge.tsx: Replaced custom TouchableOpacity + Text + Icon with the design system SelectButton component. This changes how the provider selector badge renders and behaves in the Perps home view header.

2. PerpsProviderSelectorSheet.tsx: Significant refactor - removed the isVisible prop/effect pattern (previously controlled via useEffect calling onOpenBottomSheet/onCloseBottomSheet), replaced with direct rendering. Also migrated from custom component library (BottomSheet, BottomSheetHeader, Text, Icon, TouchableOpacity) to design system components (BottomSheet, BottomSheetHeader, ListItemSelect, Tag). The sheet now always renders (no if (!isVisible) return null guard) and uses goBack prop instead of shouldNavigateBack.

3. PerpsSelectProviderView.tsx: Removed isVisible prop from PerpsProviderSelectorSheet usage.

4. PerpsHomeView.tsx: Minor alignment fix adding twClassName="self-center" to the Testnet badge Tag.

5. PerpsProviderSelector.styles.ts: Deleted - styles now handled by design system components.

Tag selection rationale:

• SmokePerps: Directly affected - the Perps provider selector (badge + sheet) is a core UI element in the Perps flow. The refactoring changes how the provider selection sheet opens/closes and how options are displayed. This needs validation.
• SmokeWalletPlatform: Required per SmokePerps tag description - Perps is a section inside the Trending tab, and changes to Perps views affect Trending.
• SmokeConfirmations: Required per SmokePerps tag description - Add Funds deposits are on-chain transactions that go through confirmations.

The changes are UI refactoring (not logic changes), but the provider selector sheet's visibility mechanism changed significantly (from isVisible prop + effect to always-rendered), which could affect how the sheet appears/disappears in the actual app flow.

Performance Test Selection:
The PR modifies PerpsHomeView and PerpsProviderSelector components which are part of the Perps trading interface. The PerpsProviderSelectorBadge is rendered in the Perps home view header, and the sheet refactoring changes rendering behavior. The @PerformancePreps tag covers perps market loading and the add funds flow, which could be affected by the component refactoring (switching from custom components to design system components may have render performance implications). However, the changes are primarily UI component swaps rather than data fetching or heavy computation changes, so the performance impact is likely minimal.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
85.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

✅ All tests passed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

✅ Passed Tests (2)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	9.00s	@mm-perps-engineering-team	📹 Watch
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	16.92s	@mm-perps-engineering-team	📹 Watch

---

Branch: refactor/perps-home-tags · Build: Normal · Commit: 164822d · View full run