1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Convert ConnectScreen to use JSX (#7525)

This commit is contained in:
Whymarrh Whitby 2019-11-23 12:53:09 -03:30 committed by GitHub
parent 3086c0db71
commit 80badb10c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,14 +1,20 @@
const { Component } = require('react')
const PropTypes = require('prop-types')
const h = require('react-hyperscript')
import classnames from 'classnames'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Button from '../../../components/ui/button'
class ConnectScreen extends Component {
constructor (props) {
super(props)
this.state = {
selectedDevice: null,
static contextTypes = {
t: PropTypes.func,
}
static propTypes = {
connectToHardwareWallet: PropTypes.func.isRequired,
browserSupported: PropTypes.bool.isRequired,
}
state = {
selectedDevice: null,
}
connect = () => {
@ -19,67 +25,85 @@ class ConnectScreen extends Component {
}
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',
})
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=""
/>
</button>
)
}
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',
})
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=""
/>
</button>
)
}
renderButtons () {
return (
h('div', {}, [
h('div.hw-connect__btn-wrapper', {}, [
this.renderConnectToLedgerButton(),
this.renderConnectToTrezorButton(),
]),
h(Button, {
type: 'primary',
large: true,
className: 'hw-connect__connect-btn',
onClick: this.connect,
disabled: !this.state.selectedDevice,
}, this.context.t('connect')),
])
<div>
<div className="hw-connect__btn-wrapper">
{this.renderConnectToLedgerButton()}
{this.renderConnectToTrezorButton()}
</div>
<Button
type="primary"
large
className="hw-connect__connect-btn"
onClick={this.connect}
disabled={!this.state.selectedDevice}
>
{this.context.t('connect')}
</Button>
</div>
)
}
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('chromeRequiredForHardwareWallets')),
]),
h(Button, {
type: 'primary',
large: true,
onClick: () => global.platform.openWindow({
<div className="new-account-connect-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.openWindow({
url: 'https://google.com/chrome',
}),
}, this.context.t('downloadGoogleChrome')),
])
})}
>
{this.context.t('downloadGoogleChrome')}
</Button>
</div>
)
}
renderHeader () {
return (
h('div.hw-connect__header', {}, [
h('h3.hw-connect__header__title', {}, this.context.t('hardwareWallets')),
h('p.hw-connect__header__msg', {}, this.context.t('hardwareWalletsMsg')),
])
<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>
)
}
@ -92,14 +116,21 @@ class ConnectScreen extends Component {
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 }})
return (
<div
className="hw-connect__get-hw__msg"
dangerouslySetInnerHTML={{__html: response }}
/>
)
}
renderTrezorAffiliateLink () {
return h('div.hw-connect__get-hw', {}, [
h('p.hw-connect__get-hw__msg', {}, this.context.t('dontHaveAHardwareWallet')),
this.getAffiliateLinks(),
])
return (
<div className="hw-connect__get-hw">
<p className="hw-connect__get-hw__msg">{this.context.t('dontHaveAHardwareWallet')}</p>
{this.getAffiliateLinks()}
</div>
)
}
@ -111,12 +142,10 @@ class ConnectScreen extends Component {
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'}),
])
<p className="hw-connect__learn-more" onClick={this.scrollToTutorial}>
{this.context.t('learnMore')}
<img className="hw-connect__learn-more__arrow" src="images/caret-right.svg" alt="" />
</p>
)
}
@ -142,47 +171,48 @@ class ConnectScreen extends Component {
},
]
return h('.hw-tutorial', {
ref: node => {
return (
<div
className="hw-tutorial"
ref={node => {
this.referenceNode = node
},
},
steps.map((step) => (
h('div.hw-connect', {}, [
h('h3.hw-connect__title', {}, step.title),
h('p.hw-connect__msg', {}, step.message),
h('img.hw-connect__step-asset', { src: `images/${step.asset}.svg`, ...step.dimensions }),
])
))
}}>
{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>
<img className="hw-connect__step-asset" src={`images/${step.asset}.svg`} {...step.dimensions} alt="" />
</div>
))}
</div>
)
}
renderFooter () {
return (
h('div.hw-connect__footer', {}, [
h('h3.hw-connect__footer__title', {}, this.context.t('readyToConnect')),
this.renderButtons(),
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')),
]),
])
<div className="hw-connect__footer">
<h3 className="hw-connect__footer__title">{this.context.t('readyToConnect')}</h3>
{this.renderButtons()}
<p className="hw-connect__footer__msg">
{this.context.t('havingTroubleConnecting')}
<a className="hw-connect__footer__link" href="https://support.metamask.io/" target="_blank" rel="noopener noreferrer">
{this.context.t('getHelp')}
</a>
</p>
</div>
)
}
renderConnectScreen () {
return (
h('div.new-account-connect-form', {}, [
this.renderHeader(),
this.renderButtons(),
this.renderTrezorAffiliateLink(),
this.renderLearnMore(),
this.renderTutorialSteps(),
this.renderFooter(),
])
<div className="new-account-connect-form">
{this.renderHeader()}
{this.renderButtons()}
{this.renderTrezorAffiliateLink()}
{this.renderLearnMore()}
{this.renderTutorialSteps()}
{this.renderFooter()}
</div>
)
}
@ -194,14 +224,5 @@ class ConnectScreen extends Component {
}
}
ConnectScreen.propTypes = {
connectToHardwareWallet: PropTypes.func.isRequired,
browserSupported: PropTypes.bool.isRequired,
}
ConnectScreen.contextTypes = {
t: PropTypes.func,
}
module.exports = ConnectScreen