refactor: Updated Headers for Settings - Experimental pages

[brianacnguyen]

Description

This PR updates the Experimental Settings and WalletConnect Sessions screens to use inline HeaderCompactStandard instead of stack navbar options.

Reason for change: Align Settings-related experimental screens with the app’s header pattern: simple back + title screens should use HeaderCompactStandard (or equivalent) rendered inline, with the stack header hidden, for consistent layout and safe area handling.

What changed:

1. MainNavigator.js – For ExperimentalSettings and Routes.WALLET.WALLET_CONNECT_SESSIONS_VIEW (WalletConnectSessions), replaced options={...navigationOptions} with options={{ headerShown: false }} so both screens control their own headers.
2. ExperimentalSettings/index.tsx – Removed useEffect and getNavigationOptionsTitle; removed useTheme usage for nav options. Wrapped the screen in SafeAreaView (edges: top) and added inline HeaderCompactStandard with title={strings('app_settings.experimental_title')}, onBack={handleBack}, and testIDs from ExperimentalView.testIds. Scroll content moved into a ScrollView with new styles.content (wrapper keeps background; content has padding).
3. ExperimentalSettings.styles.ts – Split layout: wrapper keeps backgroundColor and flex: 1; added content with flex: 1, padding: 16, paddingBottom: 48 for the scrollable area below the header.
4. ExperimentalView.testIds.ts – Added EXPERIMENTAL_SETTINGS_HEADER, EXPERIMENTAL_SETTINGS_BACK_BUTTON, WALLET_CONNECT_SESSIONS_HEADER, WALLET_CONNECT_SESSIONS_BACK_BUTTON for header and back button tests.
5. ExperimentalSettings/index.test.tsx – Navigation mock now provides goBack instead of setOptions. Added tests: “renders inline HeaderCompactStandard with title and back button”, “calls navigation.goBack when back button is pressed”. Removed redundant comments in other tests. Snapshot updated.
6. WalletConnectSessions/index.js – Removed getNavigationOptionsTitle, updateNavBar, and componentDidUpdate; switched to SafeAreaView from react-native-safe-area-context with edges={['top']}. Added inline HeaderCompactStandard with title “Wallet Connect dapps”, onBack, and testIDs from ExperimentalView.testIds.
7. WalletConnectSessions/index.test.tsx – Added test “renders inline HeaderCompactStandard with title and back button” using the new header/back testIDs and title string. Snapshot updated.

Changelog

This PR is not end-user-facing (header presentation aligned with design; same screen content and behavior).

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/issues?jql=issueKey%20in%20(DSYS-357%2CDSYS-358%2CDSYS-359%2CDSYS-360)&selectedIssue=DSYS-360

Manual testing steps

Feature: Experimental Settings and WalletConnect Sessions header

  Scenario: user sees inline header on Experimental Settings
    Given the app is open and the user is in Settings
    When the user taps Experimental
    Then the Experimental Settings screen shows an inline header with title "Experimental" and a back button
    And the stack navigator header is not visible

  Scenario: user sees inline header on WalletConnect Sessions
    Given the user is on Experimental Settings
    When the user opens Wallet Connect dapps
    Then the WalletConnect Sessions screen shows an inline header with title "Wallet Connect dapps" and a back button
    And the stack navigator header is not visible

  Scenario: user can go back from Experimental screens
    Given the user is on Experimental Settings or WalletConnect Sessions
    When the user taps the back button in the header
    Then the app navigates back to the previous screen

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-02-22.at.18.36.47.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
UI-only navigation refactor limited to ExperimentalSettings and WalletConnectSessions; main risk is minor regressions in back navigation/safe-area/header visibility on those screens.

Overview
Moves ExperimentalSettings and WalletConnectSessions off stack-provided navbar options and onto an inline HeaderCompactStandard, with MainNavigator explicitly setting headerShown: false for both routes.

Wraps both screens in react-native-safe-area-context SafeAreaView (with bottom additive inset) and updates ExperimentalSettings layout to separate wrapper vs scroll content padding. Adds new header/back testIDs and extends unit tests + snapshots to verify header rendering and navigation.goBack behavior.

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

[cursor]

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR makes UI refactoring changes to two settings screens (ExperimentalSettings and WalletConnectSessions) to use inline HeaderCompactStandard components instead of navigation-based headers. The changes are:

1. Scope: Limited to Settings flow screens that are not covered by existing E2E tests

2. Nature of changes:

   • Replacing navigation header pattern with inline header component
   • Using SafeAreaView from react-native-safe-area-context
   • Updating MainNavigator to set headerShown: false for these screens
   • Adding test IDs for the new header components

3. Impact assessment:

   • No E2E tests exist for WalletConnectSessions or ExperimentalSettings screens
   • The HeaderCompactStandard component is already widely used across the app (20+ importers)
   • Changes don't affect any transaction flows, confirmations, account management, or other critical paths
   • Unit tests have been updated with proper coverage for the new header behavior

4. Risk factors:

   • Low risk - these are isolated UI changes in settings screens
   • The component being used (HeaderCompactStandard) is battle-tested
   • No changes to business logic, state management, or navigation routes

Since there are no E2E tests that cover these specific screens and the changes are purely UI refactoring using an established component pattern, no E2E test tags are needed.

Performance Test Selection:
These changes are UI refactoring for settings screens, replacing navigation headers with inline HeaderCompactStandard components. The changes don't affect: app startup/launch, account list rendering, login flow, swap flows, asset loading, or any performance-critical paths. The HeaderCompactStandard component is already used throughout the app and these changes simply adopt it in two more places. No performance impact expected.

View GitHub Actions results