1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/pages/create-account/connect-hardware/select-hardware.js
2021-04-28 14:53:59 -05:00

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