chore: Update headers for Region Modals

[brianacnguyen]

Description

Refactored region and state selector modals to use the new HeaderCenter component from components-temp instead of the legacy BottomSheetHeader component. This change modernizes the header implementation by:

1. Using design system components (Box, Text from @metamask/design-system-react-native) with Tailwind styling instead of StyleSheet
2. Simplifying the API by using the title prop directly instead of wrapping text in <Text> children
3. Providing a consistent header pattern across all region/state selector modals

The following modals were updated:

• Card Onboarding RegionSelectorModal
• Ramp Deposit StateSelectorModal

Changelog

CHANGELOG entry: chore: migrated region and state selector modal headers to use HeaderCenter component

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/MDP/boards/2972?assignee=62afb43d33a882e2be47c36f&quickFilter=3325&selectedIssue=MDP-279

Manual testing steps

Feature: Region and State Selector Modal Headers

  Scenario: User opens region selector in Card onboarding flow
    Given the app is launched and the user is in the Card onboarding flow
    When the user taps to select a region
    Then the region selector modal displays with a centered header title
    And the close button is visible and functional

  Scenario: User opens state selector in Deposit flow
    Given the user is in the Deposit flow and has selected a country with states
    When the user taps to select a state
    Then the state selector modal displays "Select a state" as the centered header
    And the close button dismisses the modal

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-01-22.at.20.43.31.mov

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-01-22.at.20.54.14.mov

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

Low Risk
Low risk UI refactor replacing BottomSheetHeader with HeaderCenter and updating tests/snapshots; main behavioral change is wiring explicit close button testIDs and verifying close interactions.

Overview
Migrates the Card onboarding RegionSelectorModal and Deposit StateSelectorModal headers from legacy BottomSheetHeader to the new components-temp HeaderCenter, passing titles via the title prop and adding explicit close button testIDs (region-selector-close-button, state-selector-close-button).

Updates associated tests by removing now-unneeded header/design-system mocks, adjusting selectors to the new close button IDs, adding a close-button behavior test for StateSelectorModal, and regenerating snapshots to reflect the new header layout/styling.

^{Written by Cursor Bugbot for commit 098c8d5. 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.

[brianacnguyen]

Skipping sonar cloud. Added appropriate header-related tests. Any other failures is outside of this PR's scope

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

[cursor]

Test missing AAA blank line separation between Arrange and Act

Low Severity · Bugbot Rules

The new test violates the MANDATORY AAA pattern rule. The blank line at line 193 splits the Arrange section (between renderWithProvider and getByTestId), but there's no blank line between Arrange (getByTestId) and Act (fireEvent.press). Per the unit testing guidelines: "EVERY test MUST follow the AAA pattern (Arrange, Act, Assert) with blank line separation". The Arrange statements (renderWithProvider and getByTestId) should be grouped together, followed by a blank line before the Act section.

 

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeCard, SmokeRamps
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR changes the header component inside two specific bottom-sheet modals: Card Onboarding RegionSelectorModal and Ramp Deposit StateSelectorModal, replacing BottomSheetHeader with HeaderCenter and adjusting close button behavior/testIDs. These affect user interaction within the Card onboarding and Ramp deposit flows but do not touch Engine/Controllers or shared BottomSheet implementation. To validate safely with minimal scope, run suites covering these flows: SmokeCard (Card onboarding and Add Funds entry) and SmokeRamps (on-/off-ramp deposit flows using state selection). Other areas are unaffected, so broader suites can be skipped.

Performance Test Selection:
UI header swaps in two modals are unlikely to impact global performance (no engine/state changes, no heavy list/render logic altered). No app startup, account list, or core data flow changes. Therefore, performance tests are not needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
25.0% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud

[brianacnguyen]

Skipping sonar cloud since the duplication error does not relate to this PR

[AxelGes]

Hey @brianacnguyen I see in the description you mention updating the "Ramp Aggregator RegionSelectorModal" as one of the modals that was updated, but I don't see that file (app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/RegionSelectorModal.tsx) in the current diff.

[brianacnguyen]

Hey @brianacnguyen I see in the description you mention updating the "Ramp Aggregator RegionSelectorModal" as one of the modals that was updated, but I don't see that file (app/components/UI/Ramp/Aggregator/components/RegionSelectorModal/RegionSelectorModal.tsx) in the current diff.

My bad that was already split out into a different PR. I have updated the description