metamask-extension/ui/app/components/pages/create-account/connect-hardware/connect-screen.js

const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')

class ConnectScreen extends Component {
    constructor (props, context) {
        super(props)
    }

    renderUnsupportedBrowser () {
        return (
            h('div.new-account-connect-form.unsupported-browser', {}, [
                h('div.hw-connect', [
                    h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                    h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForTrezor')),
                ]),
                h(
                    'button.btn-primary.btn--large',
                    {
                      onClick: () => global.platform.openWindow({
                        url: 'https://google.com/chrome',
                      }),
                    },
                    this.context.t('downloadGoogleChrome')
                ),
            ])
        )
    }

    renderHeader () {
        return (
            h('div.hw-connect__header', {}, [
                h('h3.hw-connect__header__title', {}, this.context.t(`hardwareSupport`)),
                h('p.hw-connect__header__msg', {}, this.context.t(`hardwareSupportMsg`)),
            ])
        )
    }

    renderTrezorAffiliateLink () {
        return h('div.hw-connect__get-trezor', {}, [
            h('p.hw-connect__get-trezor__msg', {}, this.context.t(`dontHaveATrezorWallet`)),
            h('a.hw-connect__get-trezor__link', {
              href: 'https://shop.trezor.io/?a=metamask',
              target: '_blank',
            }, this.context.t('orderOneHere')),
          ])
    }

    renderConnectToTrezorButton () {
        return h(
            'button.btn-primary.btn--large',
            { onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') },
            this.props.btnText
        )
    }

    renderConnectToLedgerButton () {
        return h(
            'button.btn-primary.btn--large',
            { onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') },
            this.props.btnText.replace('Trezor', 'Ledger')
        )
    }

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

    renderLearnMore () {
        return (
            h('p.hw-connect__learn-more', {
                onClick: this.scrollToTutorial,
            }, [
                this.context.t('learnMore'),
                h('img.hw-connect__learn-more__arrow', { src: 'images/caret-right.svg'}),
            ])
        )
    }

    renderTutorialSteps () {
        const steps = [
            {
                asset: 'hardware-wallet-step-1',
                dimensions: {width: '225px', height: '75px'},
             },
             {
                asset: 'hardware-wallet-step-2',
                dimensions: {width: '300px', height: '100px'},
             },
             {
                asset: 'hardware-wallet-step-3',
                dimensions: {width: '120px', height: '90px'},
             },
        ]

        return h('.hw-tutorial', {
          ref: node => { this.referenceNode = node },
        },
            steps.map((step, i) => (
            h('div.hw-connect', {}, [
                h('h3.hw-connect__title', {}, this.context.t(`step${i + 1}HardwareWallet`)),
                h('p.hw-connect__msg', {}, this.context.t(`step${i + 1}HardwareWalletMsg`)),
                h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
            ])
            ))
        )
    }

    renderFooter () {
        return (
            h('div.hw-connect__footer', {}, [
                h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)),
                this.renderConnectToTrezorButton(),
                this.renderConnectToLedgerButton(),
                h('p.hw-connect__footer__msg', {}, [
                    this.context.t(`havingTroubleConnecting`),
                    h('a.hw-connect__footer__link', {
                        href: 'https://support.metamask.io/',
                        target: '_blank',
                      }, this.context.t('getHelp')),
                ]),
            ])
        )
    }

    renderConnectScreen () {
        return (
            h('div.new-account-connect-form', {}, [
                this.renderHeader(),
                this.renderTrezorAffiliateLink(),
                this.renderConnectToTrezorButton(),
                this.renderConnectToLedgerButton(),
                this.renderLearnMore(),
                this.renderTutorialSteps(),
                this.renderFooter(),
            ])
        )
    }

    render () {
        if (this.props.browserSupported) {
            return this.renderConnectScreen()
        }
        return this.renderUnsupportedBrowser()
    }
}

ConnectScreen.propTypes = {
    connectToHardwareWallet: PropTypes.func.isRequired,
    btnText: PropTypes.string.isRequired,
    browserSupported: PropTypes.bool.isRequired,
}

ConnectScreen.contextTypes = {
    t: PropTypes.func,
}

module.exports = ConnectScreen