OK-34789: Device management

packages/components/src/layouts/Navigation/Tab/TabBar/DesktopLeftSideBar.tsx

@@ -1,8 +1,7 @@
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import { CommonActions } from '@react-navigation/native';
 import { MotiView } from 'moti';
-import { useIntl } from 'react-intl';
 import { StyleSheet } from 'react-native';
 import { getTokens, useMedia, useTheme } from 'tamagui';
 
@@ -14,23 +13,9 @@ import {
 import useProviderSideBarValue from '@onekeyhq/components/src/hocs/Provider/hooks/useProviderSideBarValue';
 import { useSafeAreaInsets } from '@onekeyhq/components/src/hooks';
 import type { IKeyOfIcons } from '@onekeyhq/components/src/primitives';
-import {
-  Icon,
-  Stack,
-  XStack,
-  YStack,
-} from '@onekeyhq/components/src/primitives';
-import { DOWNLOAD_URL } from '@onekeyhq/shared/src/config/appConfig';
-import { ETranslations } from '@onekeyhq/shared/src/locale';
+import { Icon, XStack, YStack } from '@onekeyhq/components/src/primitives';
 import platformEnv from '@onekeyhq/shared/src/platformEnv';
-import {
-  EModalRoutes,
-  EModalSettingRoutes,
-  ERootRoutes,
-} from '@onekeyhq/shared/src/routes';
 import { type EShortcutEvents } from '@onekeyhq/shared/src/shortcuts/shortcuts.enum';
-import { shortcutsKeys } from '@onekeyhq/shared/src/shortcuts/shortcutsKeys.enum';
-import { openUrlExternal } from '@onekeyhq/shared/src/utils/openUrlUtils';
 
 import { DesktopDragZoneAbsoluteBar } from '../../../DesktopDragZoneBox';
 
@@ -87,26 +72,6 @@ function TabItemView({
   return contentMemo;
 }
 
-function DownloadButton() {
-  const intl = useIntl();
-  const onPress = useCallback(() => {
-    openUrlExternal(DOWNLOAD_URL);
-  }, []);
-  if (!platformEnv.isWeb) {
-    return null;
-  }
-  return (
-    <DesktopTabItem
-      onPress={onPress}
-      icon="DownloadOutline"
-      selected={false}
-      label={intl.formatMessage({
-        id: ETranslations.global_download,
-      })}
-    />
-  );
-}
-
 function OneKeyLogo() {
   if (!platformEnv.isWeb) {
     return null;
@@ -127,7 +92,6 @@ export function DesktopLeftSideBar({
   extraConfig?: ITabNavigatorExtraConfig<string>;
 }) {
   const { routes } = state;
-  const intl = useIntl();
   const { leftSidebarCollapsed: isCollapse } = useProviderSideBarValue();
   const { top } = useSafeAreaInsets(); // used for ipad
   const theme = useTheme();
@@ -192,15 +156,6 @@ export function DesktopLeftSideBar({
     ],
   );
 
-  const appNavigation = useNavigation<any>();
-  const openSettingPage = useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-    appNavigation.navigate(ERootRoutes.Modal, {
-      screen: EModalRoutes.SettingModal,
-      params: EModalSettingRoutes.SettingListModal,
-    });
-  }, [appNavigation]);
-
   return (
     <MotiView
       testID="Desktop-AppSideBar-Container"
@@ -248,25 +203,7 @@ export function DesktopLeftSideBar({
             <YStack flex={1} pt="$3" px="$3">
               {tabs}
             </YStack>
-            <Stack
-              p="$3"
-              borderTopWidth={StyleSheet.hairlineWidth}
-              borderTopColor="$borderSubdued"
-              bg="$bg"
-            >
-              <DesktopTabItem
-                onPress={openSettingPage}
-                selected={false}
-                icon="SettingsOutline"
-                label={intl.formatMessage({
-                  id: ETranslations.settings_settings,
-                })}
-                shortcutKey={[shortcutsKeys.CmdOrCtrl, ',']}
-                testID="setting"
-              />
-              <DownloadButton />
-              <Portal name={EPortalContainerConstantName.SIDEBAR_BANNER} />
-            </Stack>
+            <Portal name={EPortalContainerConstantName.SIDEBAR_BANNER} />
           </YStack>
         </MotiView>
       </YStack>

packages/kit-bg/src/services/ServiceAccount/ServiceAccount.ts

@@ -70,6 +70,7 @@ import timerUtils from '@onekeyhq/shared/src/utils/timerUtils';
 import type { IServerNetwork } from '@onekeyhq/shared/types';
 import type {
   IBatchCreateAccount,
+  IHwQrWalletWithDevice,
   INetworkAccount,
 } from '@onekeyhq/shared/types/account';
 import type { IGeneralInputValidation } from '@onekeyhq/shared/types/address';
@@ -271,6 +272,36 @@ class ServiceAccount extends ServiceBase {
     };
   }
 
+  @backgroundMethod()
+  async getAllHwQrWalletWithDevice() {
+    const { wallets, allDevices } = await this.getAllWallets({
+      refillWalletInfo: true,
+    });
+    // const { devices } = await this.getAllDevices();
+
+    const result: {
+      [walletId: string]: IHwQrWalletWithDevice;
+    } = {};
+
+    for (const wallet of wallets) {
+      if (
+        !accountUtils.isHwHiddenWallet({ wallet }) &&
+        (accountUtils.isHwWallet({ walletId: wallet.id }) ||
+          accountUtils.isQrWallet({ walletId: wallet.id }))
+      ) {
+        const device = (allDevices ?? []).find(
+          (d) => d.id === wallet.associatedDevice,
+        );
+        result[wallet.id] = {
+          wallet,
+          device,
+        };
+      }
+    }
+
+    return result;
+  }
+
   @backgroundMethod()
   async isWalletHasIndexedAccounts({ walletId }: { walletId: string }) {
     const { accounts: indexedAccounts } = await this.getIndexedAccountsOfWallet(

packages/kit/src/hooks/useShowAddressBook.ts

@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+
+import { useIntl } from 'react-intl';
+
+import { useAddressBookPersistAtom } from '@onekeyhq/kit-bg/src/states/jotai/atoms';
+import { defaultLogger } from '@onekeyhq/shared/src/logger/logger';
+import {
+  EModalAddressBookRoutes,
+  EModalRoutes,
+} from '@onekeyhq/shared/src/routes';
+
+import backgroundApiProxy from '../background/instance/backgroundApiProxy';
+import { showAddressSafeNotificationDialog } from '../components/AddressInput/AddressSafeDialog';
+
+import useAppNavigation from './useAppNavigation';
+
+export function useShowAddressBook({
+  useNewModal = false,
+}: {
+  useNewModal?: boolean;
+}) {
+  const intl = useIntl();
+  const navigation = useAppNavigation();
+  const [{ hideDialogInfo }] = useAddressBookPersistAtom();
+
+  const showAddressBook = useCallback(async () => {
+    await backgroundApiProxy.servicePassword.promptPasswordVerify();
+    if (useNewModal) {
+      navigation.pushModal(EModalRoutes.AddressBookModal, {
+        screen: EModalAddressBookRoutes.ListItemModal,
+        params: {},
+      });
+    } else {
+      navigation.push(EModalAddressBookRoutes.ListItemModal);
+    }
+    defaultLogger.setting.page.enterAddressBook();
+  }, [navigation, useNewModal]);
+
+  const onPress = useCallback(async () => {
+    if (!hideDialogInfo) {
+      await showAddressSafeNotificationDialog({
+        intl,
+      });
+      await backgroundApiProxy.serviceAddressBook.hideDialogInfo();
+    }
+    await showAddressBook();
+  }, [hideDialogInfo, showAddressBook, intl]);
+
+  return onPress;
+}

packages/kit/src/provider/Container/PortalBodyContainer/SideBanner.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import { useIntl } from 'react-intl';
+import { StyleSheet } from 'react-native';
 
 import {
   EPortalContainerConstantName,
@@ -12,12 +13,26 @@ import {
   Stack,
   useMedia,
 } from '@onekeyhq/components';
+import { DesktopTabItem } from '@onekeyhq/components/src/layouts/Navigation/Tab/TabBar/DesktopTabItem';
 import SidebarBannerImage from '@onekeyhq/kit/assets/sidebar-banner.png';
 import { useSpotlight } from '@onekeyhq/kit/src/components/Spotlight';
+import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
+import { useShowAddressBook } from '@onekeyhq/kit/src/hooks/useShowAddressBook';
+import { DOWNLOAD_URL } from '@onekeyhq/shared/src/config/appConfig';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
+import platformEnv from '@onekeyhq/shared/src/platformEnv';
+import {
+  EModalDeviceManagementRoutes,
+  EModalRoutes,
+  EModalSettingRoutes,
+  EOnboardingPages,
+} from '@onekeyhq/shared/src/routes';
+import { shortcutsKeys } from '@onekeyhq/shared/src/shortcuts/shortcutsKeys.enum';
 import { ESpotlightTour } from '@onekeyhq/shared/src/spotlight';
 import { openUrlExternal } from '@onekeyhq/shared/src/utils/openUrlUtils';
 
+import backgroundApiProxy from '../../../background/instance/backgroundApiProxy';
+
 import type { GestureResponderEvent } from 'react-native';
 
 function BasicSidebarBanner() {
@@ -85,11 +100,103 @@ function BasicSidebarBanner() {
   ) : null;
 }
 
+function DownloadButton() {
+  const intl = useIntl();
+  const onPress = useCallback(() => {
+    openUrlExternal(DOWNLOAD_URL);
+  }, []);
+
+  if (!platformEnv.isWeb) {
+    return null;
+  }
+
+  return (
+    <DesktopTabItem
+      onPress={onPress}
+      icon="DownloadOutline"
+      selected={false}
+      label={intl.formatMessage({
+        id: ETranslations.global_download,
+      })}
+    />
+  );
+}
+
+function BottomMenu() {
+  const intl = useIntl();
+  const appNavigation = useAppNavigation();
+
+  const openSettingPage = useCallback(() => {
+    appNavigation.pushModal(EModalRoutes.SettingModal, {
+      screen: EModalSettingRoutes.SettingListModal,
+    });
+  }, [appNavigation]);
+
+  const openAddressBookPage = useShowAddressBook({
+    useNewModal: true,
+  });
+
+  const openDeviceManagementPage = useCallback(async () => {
+    const allHwQrWallet =
+      await backgroundApiProxy.serviceAccount.getAllHwQrWalletWithDevice();
+    if (Object.keys(allHwQrWallet).length > 0) {
+      appNavigation.pushModal(EModalRoutes.DeviceManagementModal, {
+        screen: EModalDeviceManagementRoutes.DeviceListModal,
+      });
+      return;
+    }
+
+    appNavigation.pushModal(EModalRoutes.OnboardingModal, {
+      screen: EOnboardingPages.DeviceManagementGuide,
+    });
+  }, [appNavigation]);
+
+  return (
+    <Stack
+      p="$3"
+      borderTopWidth={StyleSheet.hairlineWidth}
+      borderTopColor="$borderSubdued"
+      bg="$bg"
+    >
+      <DesktopTabItem
+        onPress={openDeviceManagementPage}
+        selected={false}
+        icon="PhoneOutline"
+        label={intl.formatMessage({
+          id: ETranslations.global_my_onekey,
+        })}
+        testID="my-onekey"
+      />
+      <DesktopTabItem
+        onPress={openAddressBookPage}
+        selected={false}
+        icon="BookOpenOutline"
+        label={intl.formatMessage({
+          id: ETranslations.address_book_title,
+        })}
+        testID="address-book"
+      />
+      <DesktopTabItem
+        onPress={openSettingPage}
+        selected={false}
+        icon="SettingsOutline"
+        label={intl.formatMessage({
+          id: ETranslations.settings_settings,
+        })}
+        shortcutKey={[shortcutsKeys.CmdOrCtrl, ',']}
+        testID="setting"
+      />
+      <DownloadButton />
+      <BasicSidebarBanner />
+    </Stack>
+  );
+}
+
 export const SidebarBanner = () => {
   const { gtMd } = useMedia();
   return gtMd ? (
     <Portal.Body container={EPortalContainerConstantName.SIDEBAR_BANNER}>
-      <BasicSidebarBanner />
+      <BottomMenu />
     </Portal.Body>
   ) : null;
 };

packages/kit/src/routes/Modal/router.tsx

@@ -12,6 +12,7 @@ import { AssetSelectorRouter } from '../../views/AssetSelector/router';
 import { ChainSelectorRouter } from '../../views/ChainSelector/router';
 import { CloudBackupPages } from '../../views/CloudBackup/router';
 import { DAppConnectionRouter } from '../../views/DAppConnection/router';
+import { DeviceManagementStacks } from '../../views/DeviceManagement/router';
 import { ModalDiscoveryStack } from '../../views/Discovery/router';
 import { ModalFiatCryptoRouter } from '../../views/FiatCrypto/router';
 import { ModalFirmwareUpdateStack } from '../../views/FirmwareUpdate/router';
@@ -163,6 +164,10 @@ const router: IModalRootNavigatorConfig<EModalRoutes>[] = [
     name: EModalRoutes.ShortcutsModal,
     children: ShortcutsModalRouter,
   },
+  {
+    name: EModalRoutes.DeviceManagementModal,
+    children: DeviceManagementStacks,
+  },
 ];
 
 // Pages in Dev Mode