1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00

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
This commit is contained in:
MG 2022-01-25 18:48:41 +01:00 committed by GitHub
parent ec8a9384c9
commit 8756ad2e78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 31 deletions

View File

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

View File

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

View File

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

View File

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