feat: account management menu (#6724)

* chore: add manage accounts menu item

* chore: enable account management for dev

* chore: make account management a connectedMenuComponent concern

* chore: add ledger menu & refactor

* chore: add demo wallet menu

* chore: add kk connected menu

* chore: add ledger comment

* fix: hide MenuDivider when !isAccountManagementEnabled

.env.dev

@@ -1,6 +1,6 @@
 # feature flags
-REACT_APP_FEATURE_ACCOUNT_MANAGEMENT=false
-REACT_APP_FEATURE_ACCOUNT_MANAGEMENT_LEDGER=false
+REACT_APP_FEATURE_ACCOUNT_MANAGEMENT=true
+REACT_APP_FEATURE_ACCOUNT_MANAGEMENT_LEDGER=true
 
 # logging
 REACT_APP_REDUX_WINDOW=false

src/assets/translations/en/main.json

@@ -300,6 +300,9 @@
       "connecting": "Connecting..."
     }
   },
+  "manageAccounts": {
+    "menuTitle": "Manage Accounts"
+  },
   "defi": {
     "modals": {
       "learnMore": {

src/components/Layout/Header/NavBar/Native/NativeMenu.tsx

@@ -1,28 +1,45 @@
-import { ChevronRightIcon } from '@chakra-ui/icons'
+import { ChevronRightIcon, EditIcon } from '@chakra-ui/icons'
 import { Button, MenuDivider, MenuItem } from '@chakra-ui/react'
 import { useCallback } from 'react'
+import { useTranslate } from 'react-polyglot'
 import { Text } from 'components/Text'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useModal } from 'hooks/useModal/useModal'
 
 const chevronRightIcon = <ChevronRightIcon />
+const editIcon = <EditIcon />
 
 export const NativeMenu = () => {
+  const translate = useTranslate()
+  const isAccountManagementEnabled = useFeatureFlag('AccountManagement')
+
   const backupNativePassphrase = useModal('backupNativePassphrase')
+  const accountManagementPopover = useModal('backupNativePassphrase') // FIXME: use accountManagementPopover once ready
 
-  const onMenuItemClick = useCallback(
+  const handleBackupMenuItemClick = useCallback(
     () => backupNativePassphrase.open({}),
     [backupNativePassphrase],
   )
 
+  const handleManageAccountsMenuItemClick = useCallback(
+    () => accountManagementPopover.open({}),
+    [accountManagementPopover],
+  )
+
   return (
     <>
       <MenuDivider />
+      {isAccountManagementEnabled && (
+        <MenuItem icon={editIcon} onClick={handleManageAccountsMenuItemClick}>
+          {translate('manageAccounts.menuTitle')}
+        </MenuItem>
+      )}
       <MenuItem
         as={Button}
         variant='ghost'
         justifyContent='space-between'
         rightIcon={chevronRightIcon}
-        onClick={onMenuItemClick}
+        onClick={handleBackupMenuItemClick}
       >
         <Text translation='modals.shapeShift.backupPassphrase.menuItem' />
       </MenuItem>

src/context/WalletProvider/DemoWallet/DemoMenu.tsx

@@ -0,0 +1,33 @@
+import { EditIcon } from '@chakra-ui/icons'
+import { MenuDivider, MenuItem } from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
+import { useWallet } from 'hooks/useWallet/useWallet'
+
+import { WalletActions } from '../actions'
+
+const editIcon = <EditIcon />
+
+export const DemoMenu = () => {
+  const translate = useTranslate()
+  const { dispatch: walletDispatch } = useWallet()
+  const isAccountManagementEnabled = useFeatureFlag('AccountManagement')
+
+  const handleManageAccountsMenuItemClick = useCallback(() => {
+    walletDispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true })
+  }, [walletDispatch])
+
+  return (
+    <>
+      {isAccountManagementEnabled && (
+        <>
+          <MenuDivider />
+          <MenuItem icon={editIcon} onClick={handleManageAccountsMenuItemClick}>
+            {translate('manageAccounts.menuTitle')}
+          </MenuItem>
+        </>
+      )}
+    </>
+  )
+}

src/context/WalletProvider/KeepKey/components/KeepKeyMenu.tsx

@@ -0,0 +1,33 @@
+import { EditIcon } from '@chakra-ui/icons'
+import { MenuDivider, MenuItem } from '@chakra-ui/react'
+import { useCallback } from 'react'
+import { useTranslate } from 'react-polyglot'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
+import { useModal } from 'hooks/useModal/useModal'
+
+const editIcon = <EditIcon />
+
+export const KeepKeyConnectedMenuItems = () => {
+  const translate = useTranslate()
+  const isAccountManagementEnabled = useFeatureFlag('AccountManagement')
+
+  const accountManagementPopover = useModal('backupNativePassphrase') // FIXME: use accountManagementPopover once ready
+
+  const handleManageAccountsMenuItemClick = useCallback(
+    () => accountManagementPopover.open({}),
+    [accountManagementPopover],
+  )
+
+  return (
+    <>
+      {isAccountManagementEnabled && (
+        <>
+          <MenuDivider />
+          <MenuItem icon={editIcon} onClick={handleManageAccountsMenuItemClick}>
+            {translate('manageAccounts.menuTitle')}
+          </MenuItem>
+        </>
+      )}
+    </>
+  )
+}

src/context/WalletProvider/Ledger/components/LedgerMenu.tsx

@@ -1,16 +1,24 @@
+import { EditIcon } from '@chakra-ui/icons'
 import { MenuDivider, MenuItem } from '@chakra-ui/react'
 import { useCallback } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { SUPPORTED_WALLETS } from 'context/WalletProvider/config'
 import { KeyManager } from 'context/WalletProvider/KeyManager'
+import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
+import { useModal } from 'hooks/useModal/useModal'
 import { useWallet } from 'hooks/useWallet/useWallet'
 
+const editIcon = <EditIcon />
+
 export const LedgerMenu = () => {
   const { dispatch } = useWallet()
   const translate = useTranslate()
+  const isAccountManagementEnabled = useFeatureFlag('AccountManagement')
+
+  const accountManagementPopover = useModal('backupNativePassphrase') // FIXME: use accountManagementPopover once ready
 
-  const handleClick = useCallback(() => {
+  const handleChainsClick = useCallback(() => {
     const ledgerRoutes = SUPPORTED_WALLETS[KeyManager.Ledger].routes
     const path = ledgerRoutes.find(route => route.path === '/ledger/chains')?.path as string
     dispatch({
@@ -21,10 +29,21 @@ export const LedgerMenu = () => {
     dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true })
   }, [dispatch])
 
+  const handleManageAccountsMenuItemClick = useCallback(
+    () => accountManagementPopover.open({}),
+    [accountManagementPopover],
+  )
+
   return (
     <>
       <MenuDivider />
-      <MenuItem justifyContent='space-between' onClick={handleClick}>
+      {isAccountManagementEnabled && (
+        <MenuItem icon={editIcon} onClick={handleManageAccountsMenuItemClick}>
+          {translate('manageAccounts.menuTitle')}
+        </MenuItem>
+      )}
+      {/* TODO: Remove the below menu item once the new flow is added, and before the feature flag is enabled */}
+      <MenuItem justifyContent='space-between' onClick={handleChainsClick}>
         {translate('walletProvider.ledger.chains.header')}
       </MenuItem>
     </>

src/context/WalletProvider/config.ts

@@ -17,6 +17,8 @@ import { walletConnectV2ProviderConfig } from 'context/WalletProvider/WalletConn
 
 import { CoinbaseConfig } from './Coinbase/config'
 import { DemoConfig } from './DemoWallet/config'
+import { DemoMenu } from './DemoWallet/DemoMenu'
+import { KeepKeyConnectedMenuItems } from './KeepKey/components/KeepKeyMenu'
 import { KeepKeyConfig } from './KeepKey/config'
 import { KeplrConfig } from './Keplr/config'
 import { KeyManager } from './KeyManager'
@@ -384,6 +386,7 @@ export const SUPPORTED_WALLETS: SupportedWalletInfoByKeyManager = {
       { path: WalletConnectedRoutes.KeepKeyPassphrase, component: ChangePassphrase },
     ],
     connectedWalletMenuInitialPath: WalletConnectedRoutes.KeepKey,
+    connectedMenuComponent: KeepKeyConnectedMenuItems,
   },
   [KeyManager.MetaMask]: {
     ...MetaMaskConfig,
@@ -411,6 +414,7 @@ export const SUPPORTED_WALLETS: SupportedWalletInfoByKeyManager = {
   [KeyManager.Demo]: {
     ...DemoConfig,
     routes: [],
+    connectedMenuComponent: DemoMenu,
   },
   [KeyManager.Keplr]: {
     ...KeplrConfig,