chore: Updated headers for settings general page by brianacnguyen · Pull Request #25356 · MetaMask/metamask-mobile

brianacnguyen · 2026-01-29T01:26:04Z

Description

This PR updates the General Settings page and SelectComponent modal to use the HeaderCenter component for consistent header styling across the app.

Changes:

GeneralSettings page: Replaced the dynamic navigation header (getNavigationOptionsTitle) with an inline HeaderCenter component, following the pattern established in the parent Settings page
Navigation config: Set headerShown: false at the stack level for GeneralSettings screens in MainNavigator.js
SafeAreaView: Wrapped GeneralSettings content in SafeAreaView for proper safe area handling
SelectComponent modal: Updated the "Base currency" (and other select) modal header to use HeaderCenter with a close button

Changelog

CHANGELOG entry: Updated General Settings page and select modal headers to use consistent HeaderCenter component styling

Related issues

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

Manual testing steps

Feature: General Settings Header

  Scenario: User navigates to General Settings
    Given the user is on the Settings page

    When user taps on "General"
    Then the General Settings page opens with a centered "General" title header
    And a back arrow button is visible on the left

  Scenario: User opens currency selector modal
    Given the user is on the General Settings page

    When user taps on the currency dropdown
    Then a modal opens with "Base currency" as the centered title
    And a close (X) button is visible on the right
    When user taps the close button
    Then the modal closes

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-01-28.at.17.22.54.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/navigation refactor that mainly changes header rendering and related tests; minimal impact to underlying settings behavior.

Overview
Unifies header UI for General Settings and select modals. GeneralSettings now renders its own HeaderCenter (wrapped in SafeAreaView) instead of configuring a React Navigation header, and MainNavigator forces headerShown: false for GeneralSettings screens.

SelectComponent’s modal header is replaced with HeaderCenter (adds close button handling). Tests were migrated from Enzyme to Testing Library and snapshots updated to reflect the new header structure and navigation interactions.

^{Written by Cursor Bugbot for commit 95f4c98. This will update automatically on new commits. Configure here.}

github-actions · 2026-01-29T01:26:14Z

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.

app/components/UI/SelectComponent/index.js

brianacnguyen · 2026-01-29T01:40:07Z

app/components/Views/Settings/GeneralSettings/index.js

+          onBack={() => navigation.goBack()}
+          includesTopInset
+        />
+        <ScrollView style={styles.content}>


Nothing changed below this line. just indentation changes messing up with git dif

github-actions · 2026-01-30T00:22:48Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 80%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are primarily UI/UX refactoring for the GeneralSettings screen and SelectComponent modal:

GeneralSettings/index.js: Refactored to use SafeAreaView and HeaderCenter component instead of navigation-managed header. The component now manages its own header with headerShown: false in the navigator.
SelectComponent/index.js: Replaced custom accessory bar with HeaderCenter component for the modal picker. This component is only used within GeneralSettings.
MainNavigator.js: Changed GeneralSettings navigation options to { headerShown: false } since the component now manages its own header.
Test files: Updated unit tests from enzyme to React Testing Library with new test cases.

Why no E2E tags needed:

No E2E tests directly test the GeneralSettings screen functionality (currency conversion, language selection, search engine, etc.)
The SelectComponent is only used within GeneralSettings
The changes don't affect the main Settings view navigation or other Settings sub-screens
Tests that navigate through Settings (SmokeIdentity, FlaskBuildTests) go to other sub-screens like Contacts, BackupAndSync, or Snaps - not GeneralSettings
The navigation structure remains the same; only the header rendering approach changed
These are purely visual/layout changes with no functional impact on tested flows

Performance Test Selection:
The changes are UI refactoring for the GeneralSettings screen and SelectComponent modal. They involve layout restructuring (SafeAreaView, HeaderCenter) and style changes, but don't affect: (1) list rendering performance, (2) data loading or state management, (3) app startup/initialization, (4) critical user flows like login, swaps, or sends. The GeneralSettings screen is not a performance-critical path and the changes are primarily about header management and layout structure, not rendering performance.

View GitHub Actions results

cursor

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

cursor · 2026-01-30T00:28:27Z

app/components/Views/Settings/GeneralSettings/index.test.tsx

+  it('renders header with correct title', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('General')).toBeTruthy();
+  });


Test uses weak matcher for element presence assertion

Low Severity · Bugbot Rules

The new test 'renders header with correct title' uses toBeTruthy() to assert element presence. This violates the testing guidelines which state: "Do not use weak matchers like toBeDefined or toBeTruthy to assert element presence. Use toBeOnTheScreen()." The assertion on line 88 expect(getByText('General')).toBeTruthy() needs to use toBeOnTheScreen() instead.

codecov-commenter · 2026-01-30T00:43:58Z

Codecov Report

❌ Patch coverage is 25.00000% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.29%. Comparing base (93cc2a9) to head (95f4c98).
⚠️ Report is 86 commits behind head on main.

Files with missing lines	Patch %	Lines
...components/Views/Settings/GeneralSettings/index.js	25.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #25356      +/-   ##
==========================================
+ Coverage   80.06%   80.29%   +0.22%     
==========================================
  Files        4278     4263      -15     
  Lines      110125   109955     -170     
  Branches    23093    23418     +325     
==========================================
+ Hits        88172    88287     +115     
+ Misses      15827    15480     -347     
- Partials     6126     6188      +62

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

sonarqubecloud · 2026-01-30T00:44:47Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

Updated headers for settings general page

3117942

brianacnguyen self-assigned this Jan 29, 2026

brianacnguyen added the No QA Needed Apply this label when your PR does not need any QA effort. label Jan 29, 2026

brianacnguyen requested a review from a team as a code owner January 29, 2026 01:26

brianacnguyen added the team-design-system All issues relating to design system in Mobile label Jan 29, 2026

github-actions bot added the size-M label Jan 29, 2026

cursor bot reviewed Jan 29, 2026

View reviewed changes

app/components/UI/SelectComponent/index.js Show resolved Hide resolved

brianacnguyen commented Jan 29, 2026

View reviewed changes

brianacnguyen added 2 commits January 28, 2026 17:44

Updated snapshots

03a4482

Updated general settings tests

95f4c98

github-actions bot added size-L and removed size-M labels Jan 30, 2026

cursor bot reviewed Jan 30, 2026

View reviewed changes

vinnyhoward approved these changes Jan 30, 2026

View reviewed changes

brianacnguyen added this pull request to the merge queue Jan 30, 2026

Merged via the queue into main with commit 62ccea0 Jan 30, 2026
58 checks passed

brianacnguyen deleted the header/settings-general branch January 30, 2026 16:41

github-actions bot locked and limited conversation to collaborators Jan 30, 2026

metamaskbot added the release-7.65.0 Issue or pull request that will be included in release 7.65.0 label Jan 30, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Updated headers for settings general page#25356

chore: Updated headers for settings general page#25356
brianacnguyen merged 3 commits intomainfrom
header/settings-general

brianacnguyen commented Jan 29, 2026 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

Uh oh!

brianacnguyen Jan 29, 2026

Uh oh!

github-actions bot commented Jan 30, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 30, 2026

Uh oh!

codecov-commenter commented Jan 30, 2026

Uh oh!

sonarqubecloud bot commented Jan 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

brianacnguyen commented Jan 29, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

Uh oh!

brianacnguyen Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 30, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 30, 2026

Choose a reason for hiding this comment

Test uses weak matcher for element presence assertion

Uh oh!

codecov-commenter commented Jan 30, 2026

Codecov Report

Uh oh!

sonarqubecloud bot commented Jan 30, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

brianacnguyen commented Jan 29, 2026 •

edited by cursor bot

Loading