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, } state = { selectedDevice: null, } connect = () => { if (this.state.selectedDevice) { this.props.connectToHardwareWallet(this.state.selectedDevice) } return null } renderConnectToTrezorButton () { return ( ) } renderConnectToLedgerButton () { return ( ) } renderButtons () { return ( <>
{this.renderConnectToLedgerButton()} {this.renderConnectToTrezorButton()}
) } renderUnsupportedBrowser () { return (

{this.context.t('browserNotSupported')}

{this.context.t('chromeRequiredForHardwareWallets')}

) } renderHeader () { return (

{this.context.t('hardwareWallets')}

{this.context.t('hardwareWalletsMsg')}

) } getAffiliateLinks () { const links = { trezor: `Trezor`, ledger: `Ledger`, } const text = this.context.t('orderOneHere') const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger) return (
) } renderTrezorAffiliateLink () { return (

{this.context.t('dontHaveAHardwareWallet')}

{this.getAffiliateLinks()}
) } scrollToTutorial = () => { if (this.referenceNode) { this.referenceNode.scrollIntoView({ behavior: 'smooth' }) } } renderLearnMore () { return (

{this.context.t('learnMore')}

) } renderTutorialSteps () { const steps = [ { asset: 'hardware-wallet-step-1', dimensions: { width: '225px', height: '75px' }, title: this.context.t('step1HardwareWallet'), message: this.context.t('step1HardwareWalletMsg'), }, { asset: 'hardware-wallet-step-2', dimensions: { width: '300px', height: '100px' }, title: this.context.t('step2HardwareWallet'), message: this.context.t('step2HardwareWalletMsg'), }, { asset: 'hardware-wallet-step-3', dimensions: { width: '120px', height: '90px' }, title: this.context.t('step3HardwareWallet'), message: this.context.t('step3HardwareWalletMsg'), }, ] return (
{ this.referenceNode = node }} > {steps.map((step, index) => (

{step.title}

{step.message}

))}
) } renderFooter () { return (

{this.context.t('readyToConnect')}

{this.renderButtons()}

{this.context.t('havingTroubleConnecting')} {this.context.t('getHelp')}

) } renderConnectScreen () { return (
{this.renderHeader()} {this.renderButtons()} {this.renderTrezorAffiliateLink()} {this.renderLearnMore()} {this.renderTutorialSteps()} {this.renderFooter()}
) } render () { if (this.props.browserSupported) { return this.renderConnectScreen() } return this.renderUnsupportedBrowser() } }