diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json index e485e876fa3..5930b1e4e84 100644 --- 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 index 0f2e5679718..e1f4fff9d6f 100644 --- 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) => { /> )} - {type === KEYRING_CLASS.HARDWARE.LEDGER && ( -
- -
- )} - {brandName === 'Keystone' && ( -
- -
- )} - {type === KEYRING_CLASS.HARDWARE.GRIDPLUS && ( + {Object.values(HARDWARE_KEYRING_TYPES).find( + (item) => item.type === type + ) && (
- +
)} {type === KEYRING_CLASS.MNEMONIC && ( diff --git a/src/ui/views/AddressDetail/HardwareBar.tsx b/src/ui/views/AddressDetail/HardwareBar.tsx new file mode 100644 index 00000000000..8f560eb52de --- /dev/null +++ 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 = ({ 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 ( +
+
+ {t('page.addressDetail.manage-addresses-under', { + brand: brand, + })} +
+ +
+ ); +};