mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 07:24:56 +01:00
251 lines
6.5 KiB
JavaScript
251 lines
6.5 KiB
JavaScript
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import React, { Component } from 'react';
|
|
import Button from '../../../components/ui/button';
|
|
|
|
export default class SelectHardware extends Component {
|
|
static contextTypes = {
|
|
t: PropTypes.func,
|
|
};
|
|
|
|
static propTypes = {
|
|
connectToHardwareWallet: PropTypes.func.isRequired,
|
|
browserSupported: PropTypes.bool.isRequired,
|
|
useLedgerLive: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
state = {
|
|
selectedDevice: null,
|
|
};
|
|
|
|
connect = () => {
|
|
if (this.state.selectedDevice) {
|
|
this.props.connectToHardwareWallet(this.state.selectedDevice);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
renderConnectToTrezorButton() {
|
|
return (
|
|
<button
|
|
className={classnames('hw-connect__btn', {
|
|
selected: this.state.selectedDevice === 'trezor',
|
|
})}
|
|
onClick={(_) => this.setState({ selectedDevice: 'trezor' })}
|
|
>
|
|
<img
|
|
className="hw-connect__btn__img"
|
|
src="images/trezor-logo.svg"
|
|
alt="Trezor"
|
|
/>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
renderConnectToLedgerButton() {
|
|
return (
|
|
<button
|
|
className={classnames('hw-connect__btn', {
|
|
selected: this.state.selectedDevice === 'ledger',
|
|
})}
|
|
onClick={(_) => this.setState({ selectedDevice: 'ledger' })}
|
|
>
|
|
<img
|
|
className="hw-connect__btn__img"
|
|
src="images/ledger-logo.svg"
|
|
alt="Ledger"
|
|
/>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
renderButtons() {
|
|
return (
|
|
<>
|
|
<div className="hw-connect__btn-wrapper">
|
|
{this.renderConnectToLedgerButton()}
|
|
{this.renderConnectToTrezorButton()}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
renderContinueButton() {
|
|
return (
|
|
<Button
|
|
type="primary"
|
|
large
|
|
className="hw-connect__connect-btn"
|
|
onClick={this.connect}
|
|
disabled={!this.state.selectedDevice}
|
|
>
|
|
{this.context.t('continue')}
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
renderUnsupportedBrowser() {
|
|
return (
|
|
<div className="new-external-account-form unsupported-browser">
|
|
<div className="hw-connect">
|
|
<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
|
|
onClick={() =>
|
|
global.platform.openTab({
|
|
url: 'https://google.com/chrome',
|
|
})
|
|
}
|
|
>
|
|
{this.context.t('downloadGoogleChrome')}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderHeader() {
|
|
return (
|
|
<div className="hw-connect__header">
|
|
<h3 className="hw-connect__header__title">
|
|
{this.context.t('hardwareWallets')}
|
|
</h3>
|
|
<p className="hw-connect__header__msg">
|
|
{this.context.t('hardwareWalletsMsg')}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderTutorialsteps() {
|
|
switch (this.state.selectedDevice) {
|
|
case 'ledger':
|
|
return this.renderLedgerTutorialSteps();
|
|
case 'trezor':
|
|
return this.renderTrezorTutorialSteps();
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
renderLedgerTutorialSteps() {
|
|
const steps = [];
|
|
if (this.props.useLedgerLive) {
|
|
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>,
|
|
]),
|
|
});
|
|
}
|
|
|
|
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="https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet"
|
|
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>
|
|
);
|
|
}
|
|
|
|
renderTrezorTutorialSteps() {
|
|
const steps = [
|
|
{
|
|
asset: 'plug-in-wallet',
|
|
dimensions: { width: '225px', height: '75px' },
|
|
title: this.context.t('step1TrezorWallet'),
|
|
message: this.context.t('step1TrezorWalletMsg', [
|
|
<a
|
|
className="hw-connect__msg-link"
|
|
href="https://metamask.zendesk.com/hc/en-us/articles/360020394612-How-to-connect-a-Trezor-or-Ledger-Hardware-Wallet"
|
|
rel="noopener noreferrer"
|
|
target="_blank"
|
|
key="trezor-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>
|
|
);
|
|
}
|
|
|
|
renderConnectScreen() {
|
|
return (
|
|
<div className="new-external-account-form">
|
|
{this.renderHeader()}
|
|
{this.renderButtons()}
|
|
{this.state.selectedDevice && this.renderTutorialsteps()}
|
|
{this.renderContinueButton()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
if (this.props.browserSupported) {
|
|
return this.renderConnectScreen();
|
|
}
|
|
return this.renderUnsupportedBrowser();
|
|
}
|
|
}
|