feat: introduce Accounts Menu screen

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

@@ -160,7 +160,7 @@ describe('TabBar', () => {
 
     fireEvent.press(getByTestId(`tab-bar-item-${TabBarIconKey.Setting}`));
     expect(navigation.navigate).toHaveBeenCalledWith(Routes.SETTINGS_VIEW, {
-      screen: 'Settings',
+      screen: Routes.ACCOUNTS_MENU_VIEW,
     });
   });
 

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

@@ -98,7 +98,7 @@ const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
             break;
           case Routes.SETTINGS_VIEW:
             navigation.navigate(Routes.SETTINGS_VIEW, {
-              screen: 'Settings',
+              screen: Routes.ACCOUNTS_MENU_VIEW,
             });
             break;
           case Routes.TRENDING_VIEW:

app/components/Nav/Main/MainNavigator.js

@@ -7,6 +7,7 @@ import Browser from '../../Views/Browser';
 import { ChainId } from '@metamask/controller-utils';
 import AddBookmark from '../../Views/AddBookmark';
 import SimpleWebview from '../../Views/SimpleWebview';
+import AccountsMenu from '../../Views/AccountsMenu';
 import Settings from '../../Views/Settings';
 import GeneralSettings from '../../Views/Settings/GeneralSettings';
 import AdvancedSettings from '../../Views/Settings/AdvancedSettings';
@@ -359,7 +360,12 @@ const NotificationsOptInStack = () => (
 );
 
 const SettingsFlow = () => (
-  <Stack.Navigator initialRouteName={'Settings'}>
+  <Stack.Navigator initialRouteName={Routes.ACCOUNTS_MENU_VIEW}>
+    <Stack.Screen
+      name={Routes.ACCOUNTS_MENU_VIEW}
+      component={AccountsMenu}
+      options={{ headerShown: false }}
+    />
     <Stack.Screen
       name="Settings"
       component={Settings}
@@ -627,7 +633,7 @@ const HomeTabs = () => {
           ).build(),
         );
       },
-      rootScreenName: Routes.SETTINGS_VIEW,
+      rootScreenName: Routes.ACCOUNTS_MENU_VIEW,
       unmountOnBlur: true,
     },
   };

app/components/UI/Navbar/index.js

@@ -820,7 +820,6 @@ export function getOfflineModalNavbar() {
  * @param {boolean | null} isBackupAndSyncEnabled - Whether backup and sync is enabled
  * @param {number} unreadNotificationCount - The number of unread notifications
  * @param {number} readNotificationCount - The number of read notifications
- * @param {boolean} shouldDisplayCardButton - Whether to display the card button
  * @returns {Object} An object containing the navbar options for the wallet screen
  */
 export function getWalletNavbarOptions(
@@ -836,7 +835,6 @@ export function getWalletNavbarOptions(
   isBackupAndSyncEnabled,
   unreadNotificationCount,
   readNotificationCount,
-  shouldDisplayCardButton,
 ) {
   const innerStyles = StyleSheet.create({
     headerContainer: {
@@ -973,15 +971,6 @@ export function getWalletNavbarOptions(
     navigation.navigate(Routes.SETTINGS_VIEW);
   };
 
-  const handleCardPress = () => {
-    trackEvent(
-      MetricsEventBuilder.createEventBuilder(
-        MetaMetricsEvents.CARD_HOME_CLICKED,
-      ).build(),
-    );
-    navigation.navigate(Routes.CARD.ROOT);
-  };
-
   return {
     header: () => (
       <HeaderBase
@@ -997,12 +986,6 @@ export function getWalletNavbarOptions(
                 >
                   <AddressCopy hitSlop={innerStyles.touchAreaSlop} />
                 </View>
-                {shouldDisplayCardButton && (
-                  <CardButton
-                    onPress={handleCardPress}
-                    touchAreaSlop={innerStyles.touchAreaSlop}
-                  />
-                )}
                 <ButtonIcon
                   iconProps={{ color: MMDSIconColor.Default }}
                   onPress={openQRScanner}

app/components/UI/Stake/constants/events.ts

@@ -15,4 +15,5 @@ export const EVENT_LOCATIONS = {
   UNSTAKE_CONFIRMATION_VIEW: 'UnstakeConfirmationView',
   WALLET_ACTIONS_BOTTOM_SHEET: 'WalletActionsBottomSheet',
   UNIT_TEST: 'UnitTest',
+  ACCOUNTS_MENU: 'AccountsMenu',
 };