chore(runway): cherry-pick feat(settings): cp-7.66.0 add feature flag to toggle between Account Menu and legacy Settings (#26073)

- feat(settings): cp-7.66.0 add feature flag to toggle between Account
Menu and legacy Settings (#26032)

## **Description**

This PR introduces the `mobileUxAccountMenu` feature flag to enable
gradual rollout of the Account Menu feature. Originally we wanted to
ship for this RC as is in this
[PR](#25611) but we
found some UI refinements were needed. The feature is being moved behind
a feature flag and be hidden from this current RC and to allow for final
design refinements for the next RC.

**Why is this change required?**
The Account Menu feature requires additional refinements before full
release. A feature flag allows us to:

- Control rollout via LaunchDarkly
- Maintain backward compatibility with existing Settings flow
- Iterate on design improvements without blocking the next release

**What does this PR do?**
Adds `selectAccountMenuEnabled` selector and `useAccountMenuEnabled`
hook using the `mobileUxAccountMenu` remote feature flag
- Implements conditional navigation: enabled → `AccountsMenuView`,
disabled → legacy `Settings`
- Hides duplicate sections in Settings when Account Menu is enabled
(Permissions, Contacts, About MetaMask, Request Feature, Contact
Support, Lock)
- Hides SDK section in `SecuritySettings` when Account Menu is enabled
- Adds unit tests for both enabled/disabled states
- Reverts E2E spec files to pre-Account Menu state to avoid test
skipping (4 files: account-syncing-settings-toggle, contact-sync-toggle,
sync-users-contacts, test-snap-management). The E2E tests will be added
again once the feature is ready

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Added feature flag mobileUxAccountMenu to control
Account Menu rollout

## **Related issues**

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

## **Manual testing steps**

```gherkin
Scenario 1: Feature flag disabled (default behavior)

Given the mobileUxAccountMenu feature flag is disabled
When I tap the Settings tab in TabBar
Then I should navigate to the legacy Settings screen
And I should see all sections including Permissions, Contacts, About MetaMask, Request Feature, Contact Support, and Lock
And I should see the SDK section in Security Settings

Scenario 2: Feature flag enabled (new behavior)

Given the mobileUxAccountMenu feature flag is enabled
When I tap the Settings tab in TabBar
Then I should navigate to the AccountsMenuView screen
And the legacy Settings screen should hide duplicate sections (Permissions, Contacts, About MetaMask, Request Feature, Contact Support, Lock)
And the SDK section should be hidden in Security Settings
```

## **Screenshots/Recordings**

Feature Flag Off



https://github.com/user-attachments/assets/65e9a0a2-8c70-4d84-9f26-302d27d5b1c9

Feature Flag On



https://github.com/user-attachments/assets/12503ba2-5219-4783-95c6-0fdef0ac8ecb

### **Before**

`~`

### **After**

`~`

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes Settings entry routing and conditional visibility of multiple
Settings sections, which could break navigation paths or regress
discoverability if the flag state is mis-evaluated.
> 
> **Overview**
> Introduces a new version-gated remote feature flag
(`mobileUxAccountMenu`) via `selectAccountMenuEnabled` and
`useAccountMenuEnabled` to control rollout of the Account Menu
experience.
> 
> Wires the flag into navigation so the Settings tab and `SettingsFlow`
initial route switch between `AccountsMenu` and the legacy `Settings`
screen, and conditionally hides legacy Settings/Security Settings
sections (e.g., Permissions/Contacts/About/Support/Lock and the SDK
connections section) when the account menu is enabled.
> 
> Updates unit snapshots/tests and adjusts smoke/E2E flows to navigate
into Settings without relying on Account Menu page objects.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1c5dabc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[3ef936b](3ef936b)

Co-authored-by: Vince Howard <vincenguyenhoward@gmail.com>

Author: runway-github[bot]

app/component-library/components/Navigation/TabBar/TabBar.test.tsx

@@ -16,6 +16,7 @@ import TabBar from './TabBar';
 import { TabBarIconKey, ExtendedBottomTabDescriptor } from './TabBar.types';
 import Routes from '../../../../constants/navigation/Routes';
 import { selectAssetsTrendingTokensEnabled } from '../../../../selectors/featureFlagController/assetsTrendingTokens';
+import { useAccountMenuEnabled } from '../../../../selectors/featureFlagController/accountMenu/useAccountMenuEnabled';
 
 // Minimal descriptor interface for tests - only includes what TabBar component uses
 interface TestTabDescriptor {
@@ -33,6 +34,14 @@ interface TestDescriptors {
 // Mock trending tokens feature flag selector
 jest.mock('../../../../selectors/featureFlagController/assetsTrendingTokens');
 
+// Mock account menu feature flag hook
+jest.mock(
+  '../../../../selectors/featureFlagController/accountMenu/useAccountMenuEnabled',
+  () => ({
+    useAccountMenuEnabled: jest.fn(() => false),
+  }),
+);
+
 // Mock the navigation object with proper typing
 const navigation: NavigationHelpers<ParamListBase> = {
   navigate: jest.fn(),
@@ -124,7 +133,10 @@ describe('TabBar', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('navigates to the correct screen when a tab is pressed', () => {
+  it('navigates to the correct screen when a tab is pressed and account menu is disabled', () => {
+    // Explicitly disable the account menu feature flag for this test
+    jest.mocked(useAccountMenuEnabled).mockReturnValue(false);
+
     const { getByTestId } = renderWithProvider(
       <TabBar
         state={state as TabNavigationState<ParamListBase>}
@@ -160,7 +172,7 @@ describe('TabBar', () => {
 
     fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Setting}`));
     expect(navigation.navigate).toHaveBeenCalledWith(Routes.SETTINGS_VIEW, {
-      screen: Routes.ACCOUNTS_MENU_VIEW,
+      screen: 'Settings',
     });
   });
 
@@ -255,4 +267,23 @@ describe('TabBar', () => {
     fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Trending}`));
     expect(navigation.navigate).not.toHaveBeenCalledWith(Routes.TRENDING_VIEW);
   });
+
+  it('navigates to Accounts Menu when settings tab is pressed and account menu is enabled', () => {
+    // Enable the account menu feature flag for this test
+    jest.mocked(useAccountMenuEnabled).mockReturnValue(true);
+
+    const { getByTestId } = renderWithProvider(
+      <TabBar
+        state={state as TabNavigationState<ParamListBase>}
+        descriptors={descriptors as Record<string, ExtendedBottomTabDescriptor>}
+        navigation={navigation}
+      />,
+      { state: mockInitialState },
+    );
+
+    fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Setting}`));
+    expect(navigation.navigate).toHaveBeenCalledWith(Routes.SETTINGS_VIEW, {
+      screen: Routes.ACCOUNTS_MENU_VIEW,
+    });
+  });
 });

app/component-library/components/Navigation/TabBar/TabBar.tsx

@@ -28,6 +28,7 @@ import {
 } from './TabBar.constants';
 import { selectChainId } from '../../../../selectors/networkController';
 import { selectAssetsTrendingTokensEnabled } from '../../../../selectors/featureFlagController/assetsTrendingTokens';
+import { useAccountMenuEnabled } from '../../../../selectors/featureFlagController/accountMenu/useAccountMenuEnabled';
 
 const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const { trackEvent, createEventBuilder } = useMetrics();
@@ -36,6 +37,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
   const isAssetsTrendingTokensEnabled = useSelector(
     selectAssetsTrendingTokensEnabled,
   );
+  const isAccountMenuEnabled = useAccountMenuEnabled();
   const tabBarRef = useRef(null);
   const previousTabIndexRef = useRef<number>(state.index);
   const tw = useTailwind();
@@ -98,7 +100,9 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             break;
           case Routes.SETTINGS_VIEW:
             navigation.navigate(Routes.SETTINGS_VIEW, {
-              screen: Routes.ACCOUNTS_MENU_VIEW,
+              screen: isAccountMenuEnabled
+                ? Routes.ACCOUNTS_MENU_VIEW
+                : 'Settings',
             });
             break;
           case Routes.TRENDING_VIEW:
@@ -138,6 +142,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
       createEventBuilder,
       tw,
       isAssetsTrendingTokensEnabled,
+      isAccountMenuEnabled,
     ],
   );