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

Convert the RevealSeedPage component to use JSX (#7536)

Browse Source
This commit is contained in:
Whymarrh Whitby 2019-11-24 01:28:32 -03:30 committed by GitHub
parent f15237b1a5
commit c51914c1a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 88 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
ui/app/pages/keychains/reveal-seed.js
View File

@ -1,7 +1,6 @@
const { Component } = require('react') import React, { Component } from 'react'
const { connect } = require('react-redux') const { connect } = require('react-redux')
const PropTypes = require('prop-types') const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const classnames = require('classnames') const classnames = require('classnames')
const { requestRevealSeedWords } = require('../../store/actions') const { requestRevealSeedWords } = require('../../store/actions')
@ -14,15 +13,11 @@ const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN' const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
class RevealSeedPage extends Component { class RevealSeedPage extends Component {
constructor (props) { state = {
super(props) screen: PASSWORD_PROMPT_SCREEN,
password: '',
this.state = { seedWords: null,
screen: PASSWORD_PROMPT_SCREEN, error: null,
password: '',
seedWords: null,
error: null,
}
} }
componentDidMount () { componentDidMount () {
@ -42,15 +37,17 @@ class RevealSeedPage extends Component {
renderWarning () { renderWarning () {
return ( return (
h('.page-container__warning-container', [ <div className="page-container__warning-container">
h('img.page-container__warning-icon', { <img className="page-container__warning-icon" src="images/warning.svg" alt="" />
src: 'images/warning.svg', <div className="page-container__warning-message">
}), <div className="page-container__warning-title">
h('.page-container__warning-message', [ {this.context.t('revealSeedWordsWarningTitle')}
h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]), </div>
h('div', [this.context.t('revealSeedWordsWarning')]), <div>
]), {this.context.t('revealSeedWordsWarning')}
]) </div>
</div>
</div>
) )
} }
@ -64,24 +61,25 @@ class RevealSeedPage extends Component {
const { t } = this.context const { t } = this.context
return ( return (
h('form', { <form onSubmit={event => this.handleSubmit(event)}>
onSubmit: event => this.handleSubmit(event), <label className="input-label" htmlFor="password-box">{t('enterPasswordContinue')}</label>
}, [ <div className="input-group">
h('label.input-label', { <input
htmlFor: 'password-box', type="password"
}, t('enterPasswordContinue')), placeholder={t('password')}
h('.input-group', [ id="password-box"
h('input.form-control', { value={this.state.password}
type: 'password', onChange={event => this.setState({ password: event.target.value })}
placeholder: t('password'), className={classnames('form-control', { 'form-control--error': this.state.error })}
id: 'password-box', />
value: this.state.password, </div>
onChange: event => this.setState({ password: event.target.value }), {
className: classnames({ 'form-control--error': this.state.error }), this.state.error && (
}), <div className="reveal-seed__error">
]), {this.state.error}
this.state.error && h('.reveal-seed__error', this.state.error), </div>
]) )}
</form>
) )
} }
@ -89,13 +87,10 @@ class RevealSeedPage extends Component {
const { t } = this.context const { t } = this.context
return ( return (
h('div', [ <div>
h('label.reveal-seed__label', t('yourPrivateSeedPhrase')), <label className="reveal-seed__label">{t('yourPrivateSeedPhrase')}</label>
h(ExportTextContainer, { <ExportTextContainer text={this.state.seedWords} filename={t('metamaskSeedWords')} />
text: this.state.seedWords, </div>
filename: t('metamaskSeedWords'),
}),
])
) )
} }
@ -107,54 +102,64 @@ class RevealSeedPage extends Component {
renderPasswordPromptFooter () { renderPasswordPromptFooter () {
return ( return (
h('.page-container__footer', [ <div className="page-container__footer">
h('header', [ <header>
h(Button, { <Button
type: 'default', type="default"
large: true, large
className: 'page-container__footer-button', className="page-container__footer-button"
onClick: () => this.props.history.push(DEFAULT_ROUTE), onClick={() => this.props.history.push(DEFAULT_ROUTE)}
}, this.context.t('cancel')), >
h(Button, { {this.context.t('cancel')}
type: 'secondary', </Button>
large: true, <Button
className: 'page-container__footer-button', type="secondary"
onClick: event => this.handleSubmit(event), large
disabled: this.state.password === '', className="page-container__footer-button"
}, this.context.t('next')), onClick={event => this.handleSubmit(event)}
]), disabled={this.state.password === ''}
]) >
{this.context.t('next')}
</Button>
</header>
</div>
) )
} }
renderRevealSeedFooter () { renderRevealSeedFooter () {
return ( return (
h('.page-container__footer', [ <div className="page-container__footer">
h(Button, { <Button
type: 'default', type="default"
large: true, large
className: 'page-container__footer-button', className="page-container__footer-button"
onClick: () => this.props.history.push(DEFAULT_ROUTE), onClick={() => this.props.history.push(DEFAULT_ROUTE)}
}, this.context.t('close')), >
]) {this.context.t('close')}
</Button>
</div>
) )
} }
render () { render () {
return ( return (
h('.page-container', [ <div className="page-container">
h('.page-container__header', [ <div className="page-container__header">
h('.page-container__title', this.context.t('revealSeedWordsTitle')), <div className="page-container__title">
h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')), {this.context.t('revealSeedWordsTitle')}
]), </div>
h('.page-container__content', [ <div className="page-container__subtitle">
this.renderWarning(), {this.context.t('revealSeedWordsDescription')}
h('.reveal-seed__content', [ </div>
this.renderContent(), </div>
]), <div className="page-container__content">
]), {this.renderWarning()}
this.renderFooter(), <div className="reveal-seed__content">
]) {this.renderContent()}
</div>
</div>
{this.renderFooter()}
</div>
) )
} }
} }