Description

Implements a new Accounts Menu screen as an intermediary page between the hamburger menu and settings, improving navigation organization for users. This is the first iteration and will eventually look like this

What is the reason for the change?
The settings section is difficult to navigate. This new page organizes settings into logical sections (Settings, Manage, Resources) to improve UX while we plan a full redesign.

What is the improvement/solution?
Created a new AccountsMenu screen with:

• Settings navigation
• Resources section (About MetaMask, Request Feature, Support)
• Log out functionality
• Analytics tracking for all interactions
• Performance optimizations (memoized components, Tailwind styling)
• Comprehensive test coverage (24 tests)

NOTE: There will be a follow up PR to address regression related E2E tests. I am working on them at this moment

Changelog

CHANGELOG entry: Added new Accounts Menu screen to organize settings navigation with Settings, Manage, and Resources sections

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-397

Manual testing steps

Feature: Accounts Menu Navigation

  Scenario: user navigates from hamburger menu to settings
    Given user is on the main app screen
    When user taps the hamburger menu
    And user sees the new Accounts Menu screen
    Then user should see Settings, Manage, Resources sections
    
  Scenario: user accesses settings from Accounts Menu
    Given user is on the Accounts Menu screen
    When user taps "Settings"
    Then user should navigate to the Settings screen
    And analytics should track SETTINGS_VIEWED event
    
  Scenario: user logs out with confirmation
    Given user is on the Accounts Menu screen
    When user taps "Log Out"
    Then user should see a confirmation alert
    When user confirms logout
    Then app should lock
    And analytics should track NAVIGATION_TAPS_LOGOUT event
    
  Scenario: user cancels logout
    Given user is on the Accounts Menu screen
    When user taps "Log Out"
    And user taps "Cancel" on confirmation alert
    Then alert should dismiss
    And analytics should NOT track logout event

Screenshots/Recordings

First Iteration

Light

Dark

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.

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.