1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/create-account/connect-hardware/select-hardware.js

413 lines
11 KiB
JavaScript
Raw Normal View History

import classnames from 'classnames';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Button from '../../../components/ui/button';
import LogoLedger from '../../../components/ui/logo/logo-ledger';
import LogoQRBased from '../../../components/ui/logo/logo-qr-based';
import LogoTrezor from '../../../components/ui/logo/logo-trezor';
import LogoLattice from '../../../components/ui/logo/logo-lattice';
import {
DEVICE_NAMES,
LEDGER_TRANSPORT_TYPES,
} from '../../../../shared/constants/hardware-wallets';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
2018-07-05 23:45:28 +02:00
export default class SelectHardware extends Component {
static contextTypes = {
t: PropTypes.func,
};
2018-08-17 01:39:52 +02:00
static propTypes = {
connectToHardwareWallet: PropTypes.func.isRequired,
browserSupported: PropTypes.bool.isRequired,
Connect Ledger via WebHID (#12411) * Connect ledger via webhid if that option is available * Explicitly setting preference for webhid * Use ledgerTransportType enum instead of booleans for ledger live and webhid preferences * Use single setLEdgerTransport preference methods and property * Temp * Lint fix * Unit test fix * Remove async keyword from setLedgerTransportPreference function definition in preferences controller * Fix ledgelive setting toggle logic * Migrate useLedgerLive preference property to ledgerTransportType * Use shared constants for ledger transport type enums * Use constant for ledger usb vendor id * Use correct property to check if ledgerLive preference is set when deciding whether to ask for webhid connection * Update eth-ledger-bridge-keyring to v0.9.0 * Only show ledger live transaction helper messages if using ledger live * Only show ledger live part of tutorial if ledger live setting is on * Fix ledger related prop type errors * Explicitly use u2f enum instead of empty string as a transport type; default transport type to webhid if available; use constants for u2f and webhid * Cleanup * Wrap ledger webhid device request in try/catch * Clean up * Lint fix * Ensure user can easily connect their ledger wallet when they need to. * Fix locales * Fix/improve locales changes * Remove unused isFirefox property from confirm-transaction-base.container.js * Disable transaction and message signing confirmation if ledger webhid requires connection * Ensure translation keys for ledger connection options in settings dropdown can be properly detected by verify-locales * Drop .component from ledger-instruction-field file name * Move renderLedgerLiveStep to module scope * Remove ledgerLive from function and message names in ledger-instruction-field * Wrap ledger connection logic in ledger-instruction-field in try catch * Clean up signature-request.component.js * Check whether the signing address, and not the selected address, is a ledger account in singature-request.container * Ensure ledger instructions and webhid connection button are shown on signature-request-original signatures * Improve webhid selection handling in select-ledger-transport-type onChange handler * Move metamask redux focused ledger selectors to metamask duck * Lint fix * Use async await in checkWebHidStatusRef.current * Remove unnecessary use of ref in ledger-instruction-field.js * Lint fix * Remove unnecessary try/catch in ledger-instruction-field.js * Check if from address, not selected address, is from a ledger account in confirm-approve * Move findKeyringForAddress to metamask duck * Fix typo in function name * Ensure isEqualCaseInsensitive handles possible differences in address casing * Fix Learn More link size in advanced settings tab * Update app/scripts/migrations/066.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/pages/settings/advanced-tab/advanced-tab.component.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add jsdoc comments for new selectors * Use jest.spyOn for mocking navigator in ledger webhid migration tests * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Fix font size of link in ledger connection description in advanced settings * Fix return type in setLedgerTransportPreference comment * Clean up connectHardware code for webhid connection in actions.js * Update app/scripts/migrations/066.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/ducks/metamask/metamask.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add migration test for when useLedgerLive is true in a browser that supports webhid * Lint fix * Fix inline-link size Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2021-10-21 21:17:03 +02:00
ledgerTransportType: PropTypes.oneOf(Object.values(LEDGER_TRANSPORT_TYPES)),
};
2018-08-17 01:39:52 +02:00
state = {
selectedDevice: null,
};
2018-08-17 01:39:52 +02:00
connect = () => {
if (this.state.selectedDevice) {
this.props.connectToHardwareWallet(this.state.selectedDevice);
2018-08-17 01:39:52 +02:00
}
return null;
};
2018-08-17 01:39:52 +02:00
2020-11-03 00:41:28 +01:00
renderConnectToTrezorButton() {
return (
<button
className={classnames('hw-connect__btn', {
selected: this.state.selectedDevice === DEVICE_NAMES.TREZOR,
})}
onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.TREZOR })}
>
<LogoTrezor className="hw-connect__btn__img" ariaLabel="Trezor" />
</button>
);
}
2018-07-05 23:45:28 +02:00
renderConnectToLatticeButton() {
return (
<button
className={classnames('hw-connect__btn', {
selected: this.state.selectedDevice === DEVICE_NAMES.LATTICE,
})}
onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LATTICE })}
>
<LogoLattice className="hw-connect__btn__img" ariaLabel="Lattice" />
</button>
);
}
2020-11-03 00:41:28 +01:00
renderConnectToLedgerButton() {
return (
<button
className={classnames('hw-connect__btn', {
selected: this.state.selectedDevice === DEVICE_NAMES.LEDGER,
})}
onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.LEDGER })}
>
<LogoLedger className="hw-connect__btn__img" ariaLabel="Ledger" />
</button>
);
}
2018-07-05 23:45:28 +02:00
renderConnectToQRButton() {
return (
<button
className={classnames('hw-connect__btn', {
selected: this.state.selectedDevice === DEVICE_NAMES.QR,
})}
onClick={(_) => this.setState({ selectedDevice: DEVICE_NAMES.QR })}
>
<LogoQRBased className="hw-connect__btn__img" ariaLabel="QRCode" />
</button>
);
}
2020-11-03 00:41:28 +01:00
renderButtons() {
return (
<>
<div className="hw-connect__btn-wrapper">
{this.renderConnectToLedgerButton()}
{this.renderConnectToTrezorButton()}
</div>
<div
className="hw-connect__btn-wrapper"
style={{ margin: '10px 0 0 0' }}
>
{this.renderConnectToLatticeButton()}
{this.renderConnectToQRButton()}
</div>
</>
);
}
2018-07-19 04:57:47 +02:00
2021-04-26 20:05:48 +02:00
renderContinueButton() {
return (
<Button
type="primary"
large
className="hw-connect__connect-btn"
onClick={this.connect}
disabled={!this.state.selectedDevice}
>
{this.context.t('continue')}
</Button>
);
}
2020-11-03 00:41:28 +01:00
renderUnsupportedBrowser() {
return (
<div className="new-external-account-form unsupported-browser">
<div className="hw-connect">
2020-11-03 00:41:28 +01:00
<h3 className="hw-connect__title">
{this.context.t('browserNotSupported')}
</h3>
<p className="hw-connect__msg">
{this.context.t('chromeRequiredForHardwareWallets')}
</p>
</div>
<Button
type="primary"
large
2020-11-03 00:41:28 +01:00
onClick={() =>
global.platform.openTab({
url: 'https://google.com/chrome',
})
}
>
{this.context.t('downloadGoogleChrome')}
</Button>
</div>
);
}
2018-07-19 04:57:47 +02:00
2020-11-03 00:41:28 +01:00
renderHeader() {
return (
<div className="hw-connect__header">
2020-11-03 00:41:28 +01:00
<h3 className="hw-connect__header__title">
{this.context.t('hardwareWallets')}
</h3>
<p className="hw-connect__header__msg">
{this.context.t('hardwareWalletsMsg')}
</p>
</div>
);
}
2018-08-17 01:39:52 +02:00
2021-04-26 20:05:48 +02:00
renderTutorialsteps() {
switch (this.state.selectedDevice) {
case DEVICE_NAMES.LEDGER:
2021-04-26 20:05:48 +02:00
return this.renderLedgerTutorialSteps();
case DEVICE_NAMES.TREZOR:
2021-04-26 20:05:48 +02:00
return this.renderTrezorTutorialSteps();
case DEVICE_NAMES.LATTICE:
return this.renderLatticeTutorialSteps();
case DEVICE_NAMES.QR:
return this.renderQRHardwareWalletSteps();
2021-04-26 20:05:48 +02:00
default:
return '';
}
}
2018-07-19 05:12:49 +02:00
2021-04-26 20:05:48 +02:00
renderLedgerTutorialSteps() {
const steps = [];
Connect Ledger via WebHID (#12411) * Connect ledger via webhid if that option is available * Explicitly setting preference for webhid * Use ledgerTransportType enum instead of booleans for ledger live and webhid preferences * Use single setLEdgerTransport preference methods and property * Temp * Lint fix * Unit test fix * Remove async keyword from setLedgerTransportPreference function definition in preferences controller * Fix ledgelive setting toggle logic * Migrate useLedgerLive preference property to ledgerTransportType * Use shared constants for ledger transport type enums * Use constant for ledger usb vendor id * Use correct property to check if ledgerLive preference is set when deciding whether to ask for webhid connection * Update eth-ledger-bridge-keyring to v0.9.0 * Only show ledger live transaction helper messages if using ledger live * Only show ledger live part of tutorial if ledger live setting is on * Fix ledger related prop type errors * Explicitly use u2f enum instead of empty string as a transport type; default transport type to webhid if available; use constants for u2f and webhid * Cleanup * Wrap ledger webhid device request in try/catch * Clean up * Lint fix * Ensure user can easily connect their ledger wallet when they need to. * Fix locales * Fix/improve locales changes * Remove unused isFirefox property from confirm-transaction-base.container.js * Disable transaction and message signing confirmation if ledger webhid requires connection * Ensure translation keys for ledger connection options in settings dropdown can be properly detected by verify-locales * Drop .component from ledger-instruction-field file name * Move renderLedgerLiveStep to module scope * Remove ledgerLive from function and message names in ledger-instruction-field * Wrap ledger connection logic in ledger-instruction-field in try catch * Clean up signature-request.component.js * Check whether the signing address, and not the selected address, is a ledger account in singature-request.container * Ensure ledger instructions and webhid connection button are shown on signature-request-original signatures * Improve webhid selection handling in select-ledger-transport-type onChange handler * Move metamask redux focused ledger selectors to metamask duck * Lint fix * Use async await in checkWebHidStatusRef.current * Remove unnecessary use of ref in ledger-instruction-field.js * Lint fix * Remove unnecessary try/catch in ledger-instruction-field.js * Check if from address, not selected address, is from a ledger account in confirm-approve * Move findKeyringForAddress to metamask duck * Fix typo in function name * Ensure isEqualCaseInsensitive handles possible differences in address casing * Fix Learn More link size in advanced settings tab * Update app/scripts/migrations/066.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/pages/settings/advanced-tab/advanced-tab.component.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add jsdoc comments for new selectors * Use jest.spyOn for mocking navigator in ledger webhid migration tests * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Use LEDGER_TRANSPORT_TYPES values to set proptype of ledgerTransportType * Fix font size of link in ledger connection description in advanced settings * Fix return type in setLedgerTransportPreference comment * Clean up connectHardware code for webhid connection in actions.js * Update app/scripts/migrations/066.test.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Update ui/ducks/metamask/metamask.js Co-authored-by: Mark Stacey <markjstacey@gmail.com> * Add migration test for when useLedgerLive is true in a browser that supports webhid * Lint fix * Fix inline-link size Co-authored-by: Mark Stacey <markjstacey@gmail.com>
2021-10-21 21:17:03 +02:00
if (this.props.ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE) {
2021-04-26 20:05:48 +02:00
steps.push({
title: this.context.t('step1LedgerWallet'),
message: this.context.t('step1LedgerWalletMsg', [
<a
className="hw-connect__msg-link"
href="https://www.ledger.com/ledger-live"
rel="noopener noreferrer"
target="_blank"
key="ledger-live-app-link"
>
{this.context.t('ledgerLiveApp')}
</a>,
]),
});
2018-07-19 04:57:47 +02:00
}
2021-04-26 20:05:48 +02:00
steps.push({
asset: 'plug-in-wallet',
dimensions: { width: '225px', height: '75px' },
title: this.context.t('step2LedgerWallet'),
message: this.context.t('step2LedgerWalletMsg', [
<a
className="hw-connect__msg-link"
href={ZENDESK_URLS.HARDWARE_CONNECTION}
2021-04-26 20:05:48 +02:00
rel="noopener noreferrer"
target="_blank"
key="ledger-support-link"
>
{this.context.t('hardwareWalletSupportLinkConversion')}
</a>,
]),
});
return (
<div className="hw-tutorial">
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3>
<p className="hw-connect__msg">{step.message}</p>
{step.asset && (
<img
className="hw-connect__step-asset"
src={`images/${step.asset}.svg`}
{...step.dimensions}
alt=""
/>
)}
</div>
))}
</div>
);
}
renderLatticeTutorialSteps() {
const steps = [
{
asset: 'connect-lattice',
dimensions: { width: '225px', height: '75px' },
title: this.context.t('step1LatticeWallet'),
message: this.context.t('step1LatticeWalletMsg', [
<a
className="hw-connect__msg-link"
href={ZENDESK_URLS.HARDWARE_CONNECTION}
rel="noopener noreferrer"
target="_blank"
key="lattice-setup-link"
>
{this.context.t('hardwareWalletSupportLinkConversion')}
</a>,
]),
},
];
return (
2021-04-26 20:05:48 +02:00
<div className="hw-tutorial">
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3>
<p className="hw-connect__msg">{step.message}</p>
{step.asset && (
<img
className="hw-connect__step-asset"
src={`images/${step.asset}.svg`}
{...step.dimensions}
alt=""
/>
)}
</div>
))}
</div>
);
}
2018-07-19 04:57:47 +02:00
2021-04-26 20:05:48 +02:00
renderTrezorTutorialSteps() {
const steps = [
{
2021-04-26 20:05:48 +02:00
asset: 'plug-in-wallet',
2019-12-03 21:50:55 +01:00
dimensions: { width: '225px', height: '75px' },
2021-04-26 20:05:48 +02:00
title: this.context.t('step1TrezorWallet'),
message: this.context.t('step1TrezorWalletMsg', [
<a
className="hw-connect__msg-link"
href={ZENDESK_URLS.HARDWARE_CONNECTION}
2021-04-26 20:05:48 +02:00
rel="noopener noreferrer"
target="_blank"
key="trezor-support-link"
>
{this.context.t('hardwareWalletSupportLinkConversion')}
</a>,
]),
},
];
2018-07-05 23:45:28 +02:00
return (
2021-04-26 20:05:48 +02:00
<div className="hw-tutorial">
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
<h3 className="hw-connect__title">{step.title}</h3>
<p className="hw-connect__msg">{step.message}</p>
2021-04-26 20:05:48 +02:00
{step.asset && (
<img
className="hw-connect__step-asset"
src={`images/${step.asset}.svg`}
{...step.dimensions}
alt=""
/>
)}
</div>
))}
</div>
);
}
2018-07-05 23:45:28 +02:00
renderQRHardwareWalletSteps() {
const steps = [];
steps.push(
{
title: this.context.t('QRHardwareWalletSteps1Title'),
message: this.context.t('QRHardwareWalletSteps1Description'),
},
{
message: (
<>
<a
className="hw-connect__msg-link"
href="https://keyst.one"
rel="noopener noreferrer"
target="_blank"
key="keystone-support-link"
>
{this.context.t('keystone')}
</a>
<a
className="hw-connect__msg-link"
href="https://keyst.one/mm"
rel="noopener noreferrer"
target="_blank"
key="keystone-tutorial-link"
>
{this.context.t('keystoneTutorial')}
</a>
</>
),
},
2022-02-22 20:00:51 +01:00
{
message: (
<>
<a
className="hw-connect__msg-link"
href="https://airgap.it/metamask"
rel="noopener noreferrer"
target="_blank"
key="airgap-vault-support-link"
>
{this.context.t('airgapVault')}
</a>
<a
className="hw-connect__msg-link"
href="https://support.airgap.it/guides/metamask"
rel="noopener noreferrer"
target="_blank"
key="airgap-vault-tutorial-link"
>
{this.context.t('airgapVaultTutorial')}
</a>
</>
),
},
{
message: this.context.t('QRHardwareWalletSteps2Description'),
},
{
asset: 'qrcode-wallet-demo',
dimensions: { width: '225px', height: '75px' },
},
);
return (
<div className="hw-tutorial">
{steps.map((step, index) => (
<div className="hw-connect" key={index}>
{step.title && <h3 className="hw-connect__title">{step.title}</h3>}
<p className="hw-connect__msg">{step.message}</p>
{step.asset && (
<img
className="hw-connect__step-asset"
src={`images/${step.asset}.svg`}
{...step.dimensions}
alt=""
/>
)}
</div>
))}
</div>
);
}
2020-11-03 00:41:28 +01:00
renderConnectScreen() {
return (
<div className="new-external-account-form">
{this.renderHeader()}
{this.renderButtons()}
{this.state.selectedDevice ? this.renderTutorialsteps() : null}
2021-04-26 20:05:48 +02:00
{this.renderContinueButton()}
</div>
);
}
2020-11-03 00:41:28 +01:00
render() {
if (this.props.browserSupported) {
return this.renderConnectScreen();
}
return this.renderUnsupportedBrowser();
}
2018-07-05 23:45:28 +02:00
}