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,
+};