diff --git a/shared/constants/hardware-wallets.js b/shared/constants/hardware-wallets.js index 105287800..195a1b488 100644 --- a/shared/constants/hardware-wallets.js +++ b/shared/constants/hardware-wallets.js @@ -17,6 +17,13 @@ export const DEVICE_NAMES = { LATTICE: 'lattice', }; +export const KEYRING_NAMES = { + LEDGER: 'Ledger', + TREZOR: 'Trezor', + QR: 'QR', + LATTICE: 'Lattice1', +}; + /** * Used for setting the users preference for ledger transport type */ diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js index b674a52ac..8105af35b 100644 --- a/ui/components/app/account-menu/account-menu.component.js +++ b/ui/components/app/account-menu/account-menu.component.js @@ -16,7 +16,6 @@ import { SUPPORT_REQUEST_LINK, ///: END:ONLY_INCLUDE_IN } from '../../../helpers/constants/common'; -import { KEYRING_TYPES } from '../../../../shared/constants/hardware-wallets'; import { SETTINGS_ROUTE, NEW_ACCOUNT_ROUTE, @@ -27,6 +26,7 @@ import { import TextField from '../../ui/text-field'; import SearchIcon from '../../ui/search-icon'; import Button from '../../ui/button'; +import KeyRingLabel from './keyring-label'; export function AccountMenuItem(props) { const { icon, children, text, subText, className, onClick } = props; @@ -214,7 +214,7 @@ export default class AccountMenu extends Component { type={PRIMARY} /> - {this.renderKeyringType(keyring)} + {iconAndNameForOpenSubject ? (
{label}
; - } - resetSearchQuery() { this.setSearchQuery(''); } diff --git a/ui/components/app/account-menu/account-menu.test.js b/ui/components/app/account-menu/account-menu.test.js index ea23bcacc..c8393533c 100644 --- a/ui/components/app/account-menu/account-menu.test.js +++ b/ui/components/app/account-menu/account-menu.test.js @@ -96,7 +96,7 @@ describe('Account Menu', () => { it('render imported account label', () => { const importedAccount = wrapper.find('.keyring-label.allcaps'); - expect(importedAccount.text()).toStrictEqual('imported'); + expect(importedAccount.text()).toStrictEqual('[imported]'); }); }); diff --git a/ui/components/app/account-menu/keyring-label.js b/ui/components/app/account-menu/keyring-label.js new file mode 100644 index 000000000..794eed5e4 --- /dev/null +++ b/ui/components/app/account-menu/keyring-label.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { useI18nContext } from '../../../hooks/useI18nContext'; +import { + KEYRING_NAMES, + KEYRING_TYPES, +} from '../../../../shared/constants/hardware-wallets'; + +export default function KeyRingLabel({ keyring }) { + const t = useI18nContext(); + + let label = null; + + // Keyring value might take a while to get a value + if (!keyring) { + return null; + } + const { type } = keyring; + + switch (type) { + case KEYRING_TYPES.QR: + label = KEYRING_NAMES.QR; + break; + case 'Simple Key Pair': + label = t('imported'); + break; + case KEYRING_TYPES.TREZOR: + label = KEYRING_NAMES.TREZOR; + break; + case KEYRING_TYPES.LEDGER: + label = KEYRING_NAMES.LEDGER; + break; + case KEYRING_TYPES.LATTICE: + label = KEYRING_NAMES.LATTICE; + break; + default: + return null; + } + + return ( + <>{label ?
{label}
: null} + ); +} + +KeyRingLabel.propTypes = { + keyring: PropTypes.object, +};