diff options
Diffstat (limited to 'ui/app/components/pages/create-account/connect-hardware/connect-screen.js')
-rw-r--r-- | ui/app/components/pages/create-account/connect-hardware/connect-screen.js | 87 |
1 files changed, 67 insertions, 20 deletions
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js index cb2b86595..b3dfa4ee2 100644 --- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js +++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js @@ -5,6 +5,52 @@ const h = require('react-hyperscript') class ConnectScreen extends Component { constructor (props, context) { super(props) + this.state = { + selectedDevice: null, + } + } + + connect = () => { + if (this.state.selectedDevice) { + this.props.connectToHardwareWallet(this.state.selectedDevice) + } + return null + } + + renderConnectToTrezorButton () { + return h( + `button.hw-connect__btn${this.state.selectedDevice === 'trezor' ? '.selected' : ''}`, + { onClick: _ => this.setState({selectedDevice: 'trezor'}) }, + h('img.hw-connect__btn__img', { + src: 'images/trezor-logo.svg', + }) + ) + } + + renderConnectToLedgerButton () { + return h( + `button.hw-connect__btn${this.state.selectedDevice === 'ledger' ? '.selected' : ''}`, + { onClick: _ => this.setState({selectedDevice: 'ledger'}) }, + h('img.hw-connect__btn__img', { + src: 'images/ledger-logo.svg', + }) + ) + } + + renderButtons () { + return ( + h('div', {}, [ + h('div.hw-connect__btn-wrapper', {}, [ + this.renderConnectToLedgerButton(), + this.renderConnectToTrezorButton(), + ]), + h( + `button.hw-connect__connect-btn${!this.state.selectedDevice ? '.disabled' : ''}`, + { onClick: this.connect }, + this.context.t('connect') + ), + ]) + ) } renderUnsupportedBrowser () { @@ -12,7 +58,7 @@ class ConnectScreen extends Component { 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('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')), ]), h( 'button.btn-primary.btn--large', @@ -30,29 +76,31 @@ class ConnectScreen extends Component { 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`)), + h('h3.hw-connect__header__title', {}, this.context.t(`hardwareWallets`)), + h('p.hw-connect__header__msg', {}, this.context.t(`hardwareWalletsMsg`)), ]) ) } + getAffiliateLinks () { + const links = { + trezor: `<a class='hw-connect__get-hw__link' href='https://shop.trezor.io/?a=metamask' target='_blank'>Trezor</a>`, + ledger: `<a class='hw-connect__get-hw__link' href='https://www.ledger.com/products/ledger-nano-s?r=17c4991a03fa&tracker=MY_TRACKER' target='_blank'>Ledger</a>`, + } + + const text = this.context.t('orderOneHere') + const response = text.replace('Trezor', links.trezor).replace('Ledger', links.ledger) + + return h('div.hw-connect__get-hw__msg', { dangerouslySetInnerHTML: {__html: response }}) + } + 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')), + return h('div.hw-connect__get-hw', {}, [ + h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), + this.getAffiliateLinks(), ]) } - renderConnectToTrezorButton () { - return h( - 'button.btn-primary.btn--large', - { onClick: this.props.connectToTrezor.bind(this) }, - this.props.btnText - ) - } scrollToTutorial = (e) => { if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'}) @@ -102,7 +150,7 @@ class ConnectScreen extends Component { return ( h('div.hw-connect__footer', {}, [ h('h3.hw-connect__footer__title', {}, this.context.t(`readyToConnect`)), - this.renderConnectToTrezorButton(), + this.renderButtons(), h('p.hw-connect__footer__msg', {}, [ this.context.t(`havingTroubleConnecting`), h('a.hw-connect__footer__link', { @@ -118,8 +166,8 @@ class ConnectScreen extends Component { return ( h('div.new-account-connect-form', {}, [ this.renderHeader(), + this.renderButtons(), this.renderTrezorAffiliateLink(), - this.renderConnectToTrezorButton(), this.renderLearnMore(), this.renderTutorialSteps(), this.renderFooter(), @@ -136,8 +184,7 @@ class ConnectScreen extends Component { } ConnectScreen.propTypes = { - connectToTrezor: PropTypes.func.isRequired, - btnText: PropTypes.string.isRequired, + connectToHardwareWallet: PropTypes.func.isRequired, browserSupported: PropTypes.bool.isRequired, } |