|
|
|
|
@ -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 () { |
|
|
|
|
@ -36,32 +82,26 @@ class ConnectScreen extends Component { |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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')), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
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://shop.trezor.io/?a=metamask' target='_blank'>Ledger</a>`, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderConnectToTrezorButton () { |
|
|
|
|
return h( |
|
|
|
|
'button.btn-primary.btn--large', |
|
|
|
|
{ onClick: this.props.connectToHardwareWallet.bind(this, 'trezor') }, |
|
|
|
|
this.context.t('connectToTrezor') |
|
|
|
|
) |
|
|
|
|
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 }}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
renderConnectToLedgerButton () { |
|
|
|
|
return h( |
|
|
|
|
'button.btn-primary.btn--large', |
|
|
|
|
{ onClick: this.props.connectToHardwareWallet.bind(this, 'ledger') }, |
|
|
|
|
this.context.t('connectToLedger') |
|
|
|
|
) |
|
|
|
|
renderTrezorAffiliateLink () { |
|
|
|
|
return h('div.hw-connect__get-hw', {}, [ |
|
|
|
|
h('p.hw-connect__get-hw__msg', {}, this.context.t(`dontHaveAHardwareWallet`)), |
|
|
|
|
this.getAffiliateLinks(), |
|
|
|
|
]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
scrollToTutorial = (e) => { |
|
|
|
|
if (this.referenceNode) this.referenceNode.scrollIntoView({behavior: 'smooth'}) |
|
|
|
|
} |
|
|
|
|
@ -110,8 +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.renderConnectToLedgerButton(), |
|
|
|
|
this.renderButtons(), |
|
|
|
|
h('p.hw-connect__footer__msg', {}, [ |
|
|
|
|
this.context.t(`havingTroubleConnecting`), |
|
|
|
|
h('a.hw-connect__footer__link', { |
|
|
|
|
@ -127,8 +166,7 @@ class ConnectScreen extends Component { |
|
|
|
|
return ( |
|
|
|
|
h('div.new-account-connect-form', {}, [ |
|
|
|
|
this.renderHeader(), |
|
|
|
|
this.renderConnectToLedgerButton(), |
|
|
|
|
this.renderConnectToTrezorButton(), |
|
|
|
|
this.renderButtons(), |
|
|
|
|
this.renderTrezorAffiliateLink(), |
|
|
|
|
this.renderLearnMore(), |
|
|
|
|
this.renderTutorialSteps(), |
|
|
|
|
|
brunobar79
6 years ago
