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