refactor(ui): use MMDS HeaderStandard in misc UI surfaces

[brianacnguyen]

Description

This PR replaces HeaderCompactStandard with HeaderStandard from @metamask/design-system-react-native across several flows that previously depended on component-library/components-temp.

Reason: Use the canonical design-system header and reduce reliance on temporary header components.

Changelog

CHANGELOG entry: null

Related issues

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

Manual testing steps

Feature: Headers use design system HeaderStandard

  Scenario: Card region selector
    Given the user is in Card onboarding and opens the region selector sheet
    When they view the header and close the sheet
    Then the sheet dismisses as before

  Scenario: Network manager
    Given the user opens the networks manager bottom sheet from the wallet
    When they view the header title and tap close
    Then the sheet closes as before

  Scenario: OTA updates modal
    Given an OTA update prompt is shown
    When the user views the branded header and taps close
    Then the modal dismisses as before

  Scenario: Seed phrase info and select picker
    Given the user opens “What is a seed phrase?” from backup flow or a SelectComponent modal (e.g. settings flows using that picker)
    When they use the header close control
    Then behavior matches prior implementation

  Scenario: Pool staking learn-more and list header with search
    Given the user opens pool staking learn-more or a screen using ListHeaderWithSearch
    When they navigate back or use search as applicable
    Then navigation and layout match prior behavior

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
Low risk UI refactor that swaps header components across several bottom sheets/modals; main risk is minor layout/close-button behavior differences and testID changes.

Overview
Replaces the temporary HeaderCompactStandard header with design-system HeaderStandard across several UI surfaces (card region selector, network manager sheet, OTA updates modal, seed phrase info sheet, generic select modal, and pooled staking learn-more modal).

Updates the OTA updates modal to pass closeButtonProps (for testability) and simplifies its Jest setup by removing the old header mock, while keeping existing close behavior via the bottom sheet ref.

^{Reviewed by Cursor Bugbot for commit 17094af. 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: SmokeMoney, SmokeNetworkAbstractions, SmokeAccounts, SmokeStake, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
All 7 changed files are part of a design system component migration: replacing HeaderCompactStandard (from component-library/components-temp/) with HeaderStandard (from @metamask/design-system-react-native). No logic changes are introduced — only the header component is swapped in each modal/view.

Affected components and their test tag mapping:

1. RegionSelectorModal.tsx (Card/Onboarding) → SmokeMoney (Card onboarding flows)
2. NetworkManager/index.tsx → SmokeNetworkAbstractions (Network Manager UI with network selection bottom sheet)
3. OTAUpdatesModal.tsx + test → No dedicated E2E tag; test file only removes the mock for the old component
4. SeedphraseModal/index.js → SmokeAccounts (SRP/seedphrase backup flows)
5. SelectComponent/index.js → Used in Settings (AutoLock, IPFSGatewaySettings, GeneralSettings) — no dedicated E2E tag but covered by general wallet flows
6. PoolStakingLearnMoreModal/index.tsx → SmokeStake (staking learn more modal); per SmokeStake description, also select SmokeConfirmations

The risk is medium because while the changes are purely cosmetic (component swap), the HeaderStandard component from the design system may have slightly different prop interfaces or rendering behavior compared to HeaderCompactStandard, which could affect close button behavior, title rendering, or layout in these modals. The OTAUpdatesModal test also adds a testID to the close button, suggesting the new component may expose it differently.

No performance impact expected from this UI component swap.

Performance Test Selection:
The changes are purely a UI component swap (HeaderCompactStandard → HeaderStandard) with no logic changes, no new data fetching, no state management changes, and no rendering performance implications. No performance tests are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud