refactor: remove unused styles and simplify PhoneCountrySelectorModal…

[meltingice1337]

Description

Simplifies the layout of PhoneCountrySelectorModal in the Ramp flow. The country row was previously built from a custom ListItemColumn + nested View/Text composition with a dedicated stylesheet. It now uses the built-in ListItemSelect props instead: startAccessory for the flag emoji, title for the country name, and description for the phone prefix.

This removes PhoneCountrySelectorModal.styles.ts entirely along with the useStyles hook usage, drops the unused custom styles, and shrinks the render callback's dependency list. No behavior change: the modal renders the same flag, country name, and dialing prefix per row.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-3579

Manual testing steps

Feature: Phone country selector modal layout

  Scenario: user selects a phone country code
    Given the user is in a Ramp flow that asks for a phone number

    When the user opens the phone country selector modal
    Then each row shows the country flag, name, and dialing prefix as before
    And searching filters the country list
    And tapping a country selects it and closes the modal

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
Presentational refactor in a single Ramp modal with no logic or data-flow changes.

Overview
Refactors Ramp phone country selector rows to use design-system ListItemSelect instead of a custom ListItemColumn + nested View layout.

Deletes PhoneCountrySelectorModal.styles.ts and drops useStyles, View, and component-library list column imports. Each row now sets flag via startAccessory, country name via title / titleProps, and dialing prefix via description / descriptionProps. Search, selection, and sheet behavior are unchanged; the render callback dependency list no longer includes style objects.

^{Reviewed by Cursor Bugbot for commit 2286344. 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
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR modifies two files in the Ramp/PhoneCountrySelectorModal directory:

1. PhoneCountrySelectorModal.styles.ts - Deleted entirely (contained custom styles for region layout and emoji spacing).
2. PhoneCountrySelectorModal.tsx - Refactored to use ListItemSelect built-in props (startAccessory, title, titleProps, description, descriptionProps) instead of manually composing ListItemColumn + View + custom styles.

This is a UI-only refactoring of the phone country selector modal within the Ramp (fiat on/off-ramp) flow. The same data is displayed and the same interactions are preserved — only the rendering approach changed to use component library built-ins. No functional behavior changes, no controller/state changes, no navigation changes.

The SmokeMoney tag covers MetaMask Card and fiat on/off-ramp flows, which includes the phone country selector modal used during ramp flows. This is the only relevant tag. No other flows (confirmations, swaps, accounts, etc.) are affected by this change.

Performance Test Selection:
The changes are a UI-only refactoring of the PhoneCountrySelectorModal component within the Ramp flow. The refactoring simplifies rendering by using built-in ListItemSelect props instead of custom Views/styles. This has no meaningful performance impact — it's a minor component simplification that doesn't affect any performance-sensitive flows like app launch, login, onboarding, swaps, or asset loading.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud