feat: add hardware bar

RabbyHub · Nov 22, 2024 · d5bdfc0 · d5bdfc0
1 parent bffa895
commit d5bdfc0
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 14 deletions.
diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json
@@ -1845,7 +1845,8 @@
       "manage-addresses-under-this-seed-phrase": "Manage addresses under this Seed Phrase",
       "safeModuleAddress": "Safe Module Address",
       "coboSafeErrorModule": "Address has expired, please delete and import the address again.",
-      "importedDelegatedAddress": "Imported Delegated address"
+      "importedDelegatedAddress": "Imported Delegated address",
+      "manage-addresses-under": "Manage addresses under this {{brand}}"
     },
     "preferMetamaskDapps": {
       "title": "MetaMask Preferred Dapps",

diff --git a/src/ui/views/AddressDetail/AddressInfo.tsx b/src/ui/views/AddressDetail/AddressInfo.tsx
@@ -14,7 +14,12 @@ import IconPen from 'ui/assets/editpen.svg';
 import './style.less';
 import { copyAddress } from '@/ui/utils/clipboard';
 import { useForm } from 'antd/lib/form/Form';
-import { KEYRING_CLASS, KEYRING_ICONS, WALLET_BRAND_CONTENT } from '@/constant';
+import {
+  HARDWARE_KEYRING_TYPES,
+  KEYRING_CLASS,
+  KEYRING_ICONS,
+  WALLET_BRAND_CONTENT,
+} from '@/constant';
 import { connectStore } from '@/ui/store';
 import { SessionStatusBar } from '@/ui/component/WalletConnect/SessionStatusBar';
 import { LedgerStatusBar } from '@/ui/component/ConnectStatus/LedgerStatusBar';
@@ -27,6 +32,7 @@ import ThemeIcon from '@/ui/component/ThemeMode/ThemeIcon';
 import { useThemeMode } from '@/ui/hooks/usePreference';
 import { pickKeyringThemeIcon } from '@/utils/account';
 import clsx from 'clsx';
+import { HardwareBar } from './HardwareBar';
 
 type Props = {
   address: string;
@@ -232,19 +238,11 @@ const AddressInfo1 = ({ address, type, brandName, source }: Props) => {
             />
           </div>
         )}
-        {type === KEYRING_CLASS.HARDWARE.LEDGER && (
-          <div className="pb-[20px]">
-            <LedgerStatusBar className="text-r-neutral-body bg-r-neutral-bg2 connect-status" />
-          </div>
-        )}
-        {brandName === 'Keystone' && (
-          <div className="pb-[20px]">
-            <KeystoneStatusBar className="text-r-neutral-body bg-r-neutral-bg2 connect-status" />
-          </div>
-        )}
-        {type === KEYRING_CLASS.HARDWARE.GRIDPLUS && (
+        {Object.values(HARDWARE_KEYRING_TYPES).find(
+          (item) => item.type === type
+        ) && (
           <div className="pb-[20px]">
-            <GridPlusStatusBar className="text-r-neutral-body bg-r-neutral-bg2 connect-status" />
+            <HardwareBar address={address} type={type} brand={brandName} />
           </div>
         )}
         {type === KEYRING_CLASS.MNEMONIC && (

diff --git a/src/ui/views/AddressDetail/HardwareBar.tsx b/src/ui/views/AddressDetail/HardwareBar.tsx
@@ -0,0 +1,79 @@
+import { KEYRING_CLASS } from '@/constant';
+import { useGridPlusStatus } from '@/ui/component/ConnectStatus/useGridPlusStatus';
+import { openInternalPageInTab, useWallet } from '@/ui/utils';
+import { useKeystoneDeviceConnected } from '@/ui/utils/keystone';
+import { useLedgerDeviceConnected } from '@/ui/utils/ledger';
+import { useMemoizedFn } from 'ahooks';
+import clsx from 'clsx';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ReactComponent as IconArrowRight } from 'ui/assets/arrow-right-gray.svg';
+
+interface Props {
+  address: string;
+  type: string;
+  brand: string;
+}
+
+export const HardwareBar: React.FC<Props> = ({ address, type, brand }) => {
+  const wallet = useWallet();
+  const { t } = useTranslation();
+  const isLedgerConnected = useLedgerDeviceConnected();
+  const isKeystoneConnected = useKeystoneDeviceConnected();
+  const { status: gridPlusStatus } = useGridPlusStatus();
+  const isGridPlusConnected = gridPlusStatus === 'CONNECTED';
+
+  const goToHDManager = useMemoizedFn(async () => {
+    if (type === KEYRING_CLASS.HARDWARE.BITBOX02) {
+      openInternalPageInTab('import/hardware?connectType=BITBOX02');
+    } else if (type === KEYRING_CLASS.HARDWARE.GRIDPLUS) {
+      // todo check status
+      openInternalPageInTab('import/hardware?connectType=GRIDPLUS');
+    } else if (type === KEYRING_CLASS.HARDWARE.TREZOR) {
+      openInternalPageInTab('import/hardware?connectType=TREZOR');
+    } else if (type === KEYRING_CLASS.HARDWARE.LEDGER) {
+      if (isLedgerConnected) {
+        openInternalPageInTab(`import/select-address?hd=${type}`);
+      } else {
+        openInternalPageInTab('import/hardware/ledger-connect');
+      }
+    } else if (type === KEYRING_CLASS.HARDWARE.ONEKEY) {
+      openInternalPageInTab('import/hardware?connectType=ONEKEY');
+    } else if (type === KEYRING_CLASS.HARDWARE.KEYSTONE) {
+      openInternalPageInTab(`import/select-address?hd=${type}&brand=${brand}`);
+      // if (brand === WALLET_BRAND_TYPES.KEYSTONE) {
+      //   if (isKeystoneConnected) {
+      //     openInternalPageInTab(
+      //       `import/select-address?hd=${type}&brand=${brand}`
+      //     );
+      //   } else {
+      //     openInternalPageInTab('import/hardware/keystone');
+      //   }
+      // } else {
+      //   openInternalPageInTab(`import/hardware/qrcode?brand=${brand}`);
+      // }
+    } else if (type === KEYRING_CLASS.HARDWARE.IMKEY) {
+      openInternalPageInTab('import/hardware/imkey-connect');
+    }
+  });
+
+  return (
+    <div
+      onClick={goToHDManager}
+      className={clsx(
+        'p-[6px] bg-r-neutral-card-2 rounded-[4px]',
+        'text-r-neutral-body text-[12px] font-normal',
+        'flex items-center justify-between',
+        'connect-status',
+        'cursor-pointer'
+      )}
+    >
+      <div className="pl-[2px]">
+        {t('page.addressDetail.manage-addresses-under', {
+          brand: brand,
+        })}
+      </div>
+      <IconArrowRight width={16} height={16} viewBox="0 0 12 12" />
+    </div>
+  );
+};