chore: Update headers for Accounts flow

[brianacnguyen]

Description

This PR updates the header and footer styling across account-related screens to align with the new design system patterns. The changes migrate multiple screens from legacy navigation headers to the new HeaderWithTitleLeft and HeaderCenter components from component-library/components-temp.

Screens updated:

• AccountSelector - Now uses HeaderCenter for consistent bottom sheet header styling with a close button
• ImportNewSecretRecoveryPhrase - Migrated to HeaderWithTitleLeft with proper back/scan button props
• SelectHardware (ConnectHardware) - Migrated to HeaderWithTitleLeft with subtitle support
• ImportPrivateKey - Migrated to HeaderWithTitleLeft and replaced raw TextInput with TextField component
• SeedphraseModal - Added HeaderCenter component and updated button variant from Primary to Secondary

Additional improvements:

• Standardized platform-specific padding for footers (16px on iOS, 0 on Android)
• Updated text colors to use TextColor.Alternative for subtitle/description text
• Cleaned up unused style properties and imports
• Improved hardware wallet button layout with proper flex styling

Changelog

CHANGELOG entry: Updated header and footer styling across account management screens to align with new design system

Related issues

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

Manual testing steps

Feature: Account flow header styling

  Scenario: User views account selector
    Given the user is on the wallet home screen
    When user taps on the account selector
    Then the bottom sheet should display with a centered header and close button

  Scenario: User imports a wallet with SRP
    Given the user is on the add account flow
    When user selects "Import wallet"
    Then the import SRP screen should display the new left-aligned header with back and scan buttons

  Scenario: User imports a private key
    Given the user is on the add account flow
    When user selects "Import account" (private key)
    Then the import screen should display with the new left-aligned header
    And the text input should display with the updated TextField component styling

  Scenario: User connects hardware wallet
    Given the user is on the add account flow
    When user selects "Add hardware wallet"
    Then the select hardware screen should display with the new left-aligned header and subtitle

  Scenario: User views seedphrase modal
    Given the user is on the backup seedphrase flow
    When user taps on "What is a Secret Recovery Phrase?"
    Then the modal should display with centered header and close button
    And the "Got it" button should be styled as secondary variant

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-01-07.at.22.06.09.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

Aligns account flows with the new design system headers and spacing.

• Replaces legacy headers with HeaderCenter (bottom sheets) and HeaderWithTitleLeft (full screens) in AccountSelector, ImportNewSecretRecoveryPhrase, SelectHardware, ImportPrivateKey, and SeedphraseModal; adds close/back/scan actions via header props
• Standardizes footer padding (iOS 16, Android 0) and applies TextColor.Alternative to subtitles/descriptions
• SeedphraseModal: new centered header, adjusted content spacing, bullet sizing, and "Got it" button to Secondary
• ImportNewSecretRecoveryPhrase: removes navbar config, adds header with back/QR actions, swaps to component-library Button, integrates ButtonIcon for info, and updates styles
• ImportPrivateKey: migrates to new header with subtitle + learn-more, modernizes input styling/placeholder, and disables submit while loading
• SrpInputGrid/styles: minor spacing tweaks (remove extra top margin)
• Updates snapshots/e2e selectors to reflect new headers and layout

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

This PR is a UI refactoring that updates several components to use new header components (HeaderWithTitleLeft and HeaderCenter) from the component library. The changes affect:

1. AccountSelector - Core account management UI, used for switching/managing accounts
2. ImportNewSecretRecoveryPhrase - Multi-SRP import flow
3. ImportPrivateKey - Private key import flow
4. SeedphraseModal - Modal explaining seed phrases
5. SelectHardware - Hardware wallet connection flow
6. SrpInputGrid - SRP input component styling
7. E2E ImportSrpView page object - Simplified selector for import button

The E2E test page object change (ImportSrpView.ts) removes platform-specific logic for the import button selector, which could affect test reliability. The tests that use this page object are:

• import-srp.spec.ts (SmokeWalletPlatform)
• multi-srp.spec.ts (SmokeIdentity)

Selected tags:

• SmokeAccounts: Covers account management, keyrings, and multi-account functionality. The AccountSelector and import flows are core account management features.
• SmokeWalletPlatform: Covers core wallet functionality, accounts, and network switching. The import-srp.spec.ts test is tagged with this.
• SmokeIdentity: Covers account syncing which uses the multi-SRP import flow. The multi-srp.spec.ts test is tagged with this.

The changes are primarily visual/layout changes with no functional logic changes, but since they affect critical user flows (account selection, SRP import, private key import), running these smoke tests ensures the UI changes don't break the user experience.

View GitHub Actions results

[cursor]

Double top inset padding on iOS in ImportPrivateKey

Medium Severity

The includesTopInset prop is set to true on HeaderWithTitleLeft, but the component is already wrapped in a SafeAreaView from react-native (line 148) which automatically applies top safe area insets on iOS. This causes double top padding on iOS devices. The includesTopInset prop should be removed or set to false since the parent SafeAreaView already handles the top inset. This issue was also flagged in the PR review.

 

[sonarqubecloud]

Quality Gate failed

Failed conditions
40.0% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud