Feat: Label hardware wallets (#13339)

* Added keyring label

* Fixed labels name

* Clean up

* Remove blank spaces

* Linted

* Fixed lint

* Removed unused hooks

* Fixed test

* Addressed PR comments

* Added KEYRING_NAMES obj

* Lint

* Removed empty space

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
  */

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}
             />
           </div>
-          {this.renderKeyringType(keyring)}
+          <KeyRingLabel keyring={keyring} />
           {iconAndNameForOpenSubject ? (
             <div className="account-menu__icon-list">
               <SiteIcon
@@ -229,34 +229,6 @@ export default class AccountMenu extends Component {
     });
   }
 
-  renderKeyringType(keyring) {
-    const { t } = this.context;
-
-    // Sometimes keyrings aren't loaded yet
-    if (!keyring) {
-      return null;
-    }
-
-    const { type } = keyring;
-    let label;
-
-    switch (type) {
-      case KEYRING_TYPES.TREZOR:
-      case KEYRING_TYPES.LEDGER:
-      case KEYRING_TYPES.LATTICE:
-      case KEYRING_TYPES.QR:
-        label = t('hardware');
-        break;
-      case 'Simple Key Pair':
-        label = t('imported');
-        break;
-      default:
-        return null;
-    }
-
-    return <div className="keyring-label allcaps">{label}</div>;
-  }
-
   resetSearchQuery() {
     this.setSearchQuery('');
   }

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]');
     });
   });
 

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 ? <div className="keyring-label allcaps">{label}</div> : null}</>
+  );
+}
+
+KeyRingLabel.propTypes = {
+  keyring: PropTypes.object,
+};