overflow: auto;
}
-.choice {
- margin-left: 10px;
-}
-
-.image {
- width: 150px;
- position: absolute;
- top: calc(50px);
- left: calc(50% - 75px);
-}
-
.title{
text-align: center;
color: white;
}
-.switch {
- display: flex;
- justify-content: space-around;
-
- margin-top: 10px;
-}
-
.formWarpper {
display: flex;
justify-content: space-around;
import { Link } from 'react-router'
import {connect} from 'react-redux'
import actions from 'actions'
+import styles from '../FormIndex.scss'
class Keystore extends React.Component {
constructor(props) {
const t = this.props.t
return (
- <div >
- <RestoreKeystore success={this.props.success}/>
- <Link to='/initialization/'>
- cancel
- </Link>
-
+ <div className={styles.main}>
+ <div>
+ <h2 className={styles.title}>{t('backup.restoreKeystore')}</h2>
+ <div className={styles.formWarpper}>
+ <div className={styles.form}>
+ <RestoreKeystore success={this.props.success}/>
+ <Link
+ className='btn btn-link'
+ to='/initialization/'>
+ cancel
+ </Link>
+ </div>
+ </div>
+ </div>
</div>
)
}
import { Link } from 'react-router'
import {connect} from 'react-redux'
import actions from 'actions'
+import styles from '../FormIndex.scss'
class Mnemonic extends React.Component {
constructor(props) {
render() {
const t = this.props.t
return (
- <div >
- <RestoreMnemonic success={this.props.success}/>
- <Link to='/initialization/'>
- cancel
- </Link>
+ <div className={styles.main}>
+ <div>
+ <h2 className={styles.title}>{t('backup.restoreMnemonic')}</h2>
+ <div className={styles.formWarpper}>
+ <div className={styles.form}>
+ <RestoreMnemonic success={this.props.success}/>
+ <Link
+ className='btn btn-link'
+ to='/initialization/'>
+ cancel
+ </Link>
+ </div>
+ </div>
+ </div>
</div>
)
}
import {connect} from 'react-redux'
import actions from 'actions'
import { Step, StepList, ConfirmMnemonic, Mnemonic } from 'features/shared/components'
-import {Skip} from '../'
+import styles from './MnemonicStepper.scss'
+import {withNamespaces} from 'react-i18next'
class MnemonicStepper extends React.Component {
constructor(props) {
}
render() {
+ const t = this.props.t
return (
- <StepList>
- <Step>
- <Skip/>
- </Step>
- <Step>
- <Mnemonic
- mnemonic={this.props.mnemonic}
- />
- </Step>
-
- <Step>
- <ConfirmMnemonic
- mnemonic={this.props.mnemonic}
- succeeded={this.props.succeeded}
- />
-
- </Step>
- </StepList>
+ <div className={styles.main}>
+ <div>
+ <h2 className={styles.title}>{t('init.mnemonic')}</h2>
+ <div className={styles.formWarpper}>
+ <div className={styles.form}>
+ <StepList>
+ <Step>
+ <Mnemonic
+ mnemonic={this.props.mnemonic}
+ />
+ <button
+ className={'btn btn-link'}
+ onClick={() => this.props.succeeded()}
+ >
+ skip
+ </button>
+ </Step>
+ <Step>
+ <ConfirmMnemonic
+ mnemonic={this.props.mnemonic}
+ succeeded={this.props.succeeded}
+ />
+ </Step>
+ </StepList>
+ </div>
+ </div>
+ </div>
+ </div>
)
}
}
succeeded: () => dispatch(actions.initialization.initSucceeded()),
})
-export default connect(
+export default withNamespaces('translations') (connect(
mapStateToProps,
mapDispatchToProps
-)(MnemonicStepper)
+)(MnemonicStepper))
--- /dev/null
+.main {
+ background: $background-inverse-color;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding-top: 50px;
+ display: block;
+ overflow: auto;
+}
+
+.title{
+ text-align: center;
+ color: white;
+}
+
+.formWarpper {
+ display: flex;
+ justify-content: space-around;
+
+ margin-top: 30px;
+}
+
+.form {
+ background: $background-color;
+ border-radius: $border-radius-standard;
+ width: 850px;
+ padding: 30px;
+ padding-bottom: $gutter-size*1.25;
+}
import {ErrorBanner, TextField, PasswordField} from 'features/shared/components'
import actions from 'actions'
import { Link } from 'react-router'
-import styles from './Register.scss'
+import styles from '../FormIndex.scss'
import {reduxForm} from 'redux-form'
import {withNamespaces} from 'react-i18next'
<button type='submit' className='btn btn-primary' disabled={submitting}>
{t('init.register')}
</button>
- <Link to='/initialization/'>
+ <Link
+ className='btn btn-link'
+ to='/initialization/'>
cancel
</Link>
</form>
+++ /dev/null
-import React from 'react'
-import {connect} from 'react-redux'
-import actions from 'actions'
-
-class Skip extends React.Component {
- constructor(props) {
- super(props)
- }
-
- render() {
- return (
- <div>
- <button
- onClick={() => this.props.succeeded()}
- >
- skip
- </button>
- </div>
- )
- }
-}
-
-const mapDispatchToProps = ( dispatch ) => ({
- succeeded: () => dispatch(actions.initialization.initSucceeded()),
-})
-
-export default connect(
- () => ({}),
- mapDispatchToProps
-)(Skip)
import MnemonicStepper from './MnemonicStepper/MnemonicStepper'
import Mnemonic from './Mnemonic/Mnemonic'
import Keystore from './Keystore/Keystore'
-import Skip from './Skip/Skip'
export {
Index,
Mnemonic,
Keystore,
MnemonicStepper,
- Skip
}
import {connect} from 'react-redux'
import actions from 'actions'
import { NotFound, Step, StepList, ConfirmMnemonic, Mnemonic, PageContent, PageTitle } from 'features/shared/components'
-import {Skip} from '../'
+import componentClassNames from 'utility/componentClassNames'
import styles from './MnemonicStepper.scss'
class MnemonicStepper extends React.Component {
}
return (
- <div>
+ <div className={componentClassNames(this, 'flex-container')}>
<PageTitle title={'Mnemonic'} />
- <PageContent>
- <div className={styles.main}>
- <StepList>
- <Step>
- <Skip/>
- <button className={`btn btn-primary ${styles.marginRight}`}
- onClick={() => this.props.succeeded()}
- >
- skip
- </button>
- </Step>
- <Step>
- <Mnemonic
- mnemonic={this.props.mnemonic}
- />
- </Step>
+ <div className={`${styles.main} flex-container`}>
+ <div className={styles.content}>
+ <StepList>
+ <Step>
+ <Mnemonic
+ mnemonic={this.props.mnemonic}
+ />
+ <button className={`btn btn-default ${styles.marginLeft}`}
+ onClick={() => this.props.succeeded()}
+ >
+ skip
+ </button>
+ </Step>
- <Step>
- <ConfirmMnemonic
- mnemonic={this.props.mnemonic}
- succeeded={this.props.succeeded}
- />
+ <Step>
+ <ConfirmMnemonic
+ mnemonic={this.props.mnemonic}
+ succeeded={this.props.succeeded}
+ />
- </Step>
- </StepList>
+ </Step>
+ </StepList>
+ </div>
</div>
- </PageContent>
</div>
)
}
-.main{
- background-color: $background-color;
- border: 1px solid $border-color;
+.main {
+ background: $background-color;
+ display: flex;
+ flex-direction: row;
+ padding: 0 $gutter-size;
+ margin-top: $title-height;
+}
+
+.content {
+ min-width: 400px;
+ max-width: 900px;
+ width: 100%;
+ margin: 0 auto;
padding: $gutter-size;
- word-wrap: break-word;
}
-.marginRight{
- margin-right: $gutter-size/2;
+
+.marginLeft{
+ margin-left: $gutter-size/2;
}
\ No newline at end of file
+++ /dev/null
-import React from 'react'
-
-class Skip extends React.Component {
- constructor(props) {
- super(props)
- }
-
- render() {
- return (
- <div>
- <h2>Continue with Mnemonic</h2>
- <p>Mnemonic can be used to restore the relevant key information. You can either skip the Mnemonic step or keep it.</p>
- </div>
- )
- }
-}
-
-export default Skip
import Show from './Show'
import ResetPassword from './ResetPassword/ResetPassword'
import CheckPassword from './CheckPassword/CheckPassword'
-import Skip from './Skip/Skip'
export {
List,
Show,
ResetPassword,
CheckPassword,
- Skip
}
return (
<form onSubmit={handleSubmit(this.submitWithValidation)}>
- <h2>Enter your wallet recover phrase</h2>
+ <h4>Enter your wallet recover phrase</h4>
<p>Confirm that you backup your Recovery phrase by filling in the missing words:</p>
<div className={style.seedArea}>
{seedWords.map((seedWord) => {
.seed{
user-select: none;
- background-color: #48566e;
+ background-color: #F8F8F8;
border-radius: 3px;
- color: #fff;
+ border: 1px solid $border-color;
+ padding: 6px 0px;
+ color: $text-strong-color;
}
.seedWord{
- width: 100px;
- height: 23px;
- margin: 5px;
+ //width: 130px;
+ min-width: 120px;
+ flex: 1 1 15%;
+ height: 36px;
+ margin: 5px 10px 5px 0;
text-align: center;
}
.seedArea{
display: flex;
- flex-direction: row;
+ //flex-direction: row;
flex-wrap: wrap;
+ margin-bottom: $gutter-size/2;
}
.main {
background: $background-color;
- padding: 0;
display: flex;
flex-direction: row;
padding: 0 $gutter-size;
const {mnemonicArray} = this.state
return (
<div>
- <h2>Mnemonic</h2>
+ <div className={styles.flexContainer}>
+ <h4>Mnemonic</h4>
+ <button
+ className='btn btn-link'
+ onClick={() => copyToClipboard(this.props.mnemonic)}
+ >
+ <img className={styles.copy} src={require('images/copy.svg')}/>
+ </button>
+ </div>
<p>Write down the following seed and save it in a secure location.</p>
- <div>
+ <div className={`${styles.flexContainer} ${styles.seedArea}`}>
+
{
mnemonicArray.map((seedWord) =>
<div className={styles.seed}>{seedWord}</div>)
}
- <button
- className={`btn btn-primary ${styles.copy}`}
- onClick={() => copyToClipboard(this.props.mnemonic)}
- >
- Copy to clipboard
- </button>
</div>
</div>
.seed{
user-select: none;
- width: 100px;
- height: 23px;
- background-color: #48566e;
+ width: 121px;
+ height: 36px;
+ background-color: #F8F8F8;
+ border: 1px solid $border-color;
border-radius: 3px;
- color: #fff;
- margin: 5px;
+ color: $text-strong-color;
+ margin: 5px 10px 5px 0;
+ padding: 6px 0px;
float: left;
text-align: center;
}
.copy{
- width: 177px;
- margin: 4px;
+ width: 18px;
+ margin-bottom: 3px;
+}
+
+.flexContainer{
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.seedArea{
+ margin-bottom : $gutter-size/2;
}
import actions from 'actions'
import {reduxForm} from 'redux-form'
import {withNamespaces} from 'react-i18next'
+import style from './RestoreKeystore.scss'
class RestoreKeystore extends React.Component {
constructor(props) {
return (
<div >
<div>
- <h2 >{t('init.restoreWallet')}</h2>
+ <h4 >{t('init.restoreWallet')}</h4>
<div>
<form onSubmit={handleSubmit(this.submitWithErrors)}>
<p>{t('init.restoreLabel')}</p>
title={t('init.errorTitle')}
error={error}/>}
- <button type='submit' className='btn btn-primary' disabled={submitting}>
+ <button type='submit' className={`btn btn-primary ${style.submitButton}`} disabled={submitting}>
{t('init.restore')}
</button>
--- /dev/null
+.submitButton{
+ float: left;
+}
import actions from 'actions'
import {reduxForm} from 'redux-form'
import {withNamespaces} from 'react-i18next'
-import { Link } from 'react-router'
+import style from './RestoreMnemonic.scss'
class RestoreMnemonic extends React.Component {
constructor(props) {
return (
<div>
- <h2 >{t('init.restoreWallet')}</h2>
+ <h4>{t('init.restoreWallet')}</h4>
<div>
<form onSubmit={handleSubmit(this.submitWithErrors)}>
title={t('init.errorTitle')}
error={error}/>}
- <button type='submit' className='btn btn-primary' disabled={submitting}>
+ <button type='submit' className={`btn btn-primary ${style.submitButton}`} disabled={submitting}>
{t('init.restore')}
</button>
--- /dev/null
+.submitButton{
+ float: left;
+}
const {touched, error} = this.props.fieldProps
return(
- <div className={touched && error &&'has-error'}>
+ <div className={` ${this.props.className} ${touched && error &&'has-error'}`}>
<input
- className={`form-control ${this.props.className}`}
+ className='form-control'
autoFocus={!!this.props.autoFocus}
{...disableAutocomplete}
{...fieldProps} />
return (
<button
- className='btn btn-default'
+ className={`btn btn-primary ${styles.floatLeft}`}
onClick={() => this.props.goToNextStep()}>
Continue
</button>
return (
<a
- className= {styles.marginLeft}
+ className={`btn btn-link ${styles.marginLeft}`}
onClick={() => this.props.goToPreviousStep()}>
Cancel
</a>
.marginLeft{
margin-left: $gutter-size/2;
cursor: pointer;
-}
\ No newline at end of file
+}
+
+.floatLeft{
+ float: left;
+}
"title":"Backup and Restore",
"backup":"Back Up",
"backupDescription":"This option will back up all data stored in this core, including blockchain data, accounts, assets and balances.",
- "restoreKeystore":"Restore from File",
+ "restoreKeystore":"Restore from Keystore File",
"restoreKeystoreDescription":"This option will restore the wallet data form a file. You might need to rescan your wallet, if you balance is not up to date.",
"restoreMnemonic":"Restore by Mnemonic",
"restoreMnemonicDescription":"This option will restore the key related data by mnemonic. You might need to rescan your wallet, if you balance is not up to date.",
"title":"备份与恢复",
"backup":"备份",
"backupDescription":"这个选项备份所有本地数据，包括账户，资产和余额。 请妥善保管你的备份文件。",
- "restoreKeystore":"从文件恢复",
+ "restoreKeystore":"从Keystore文件恢复",
"restoreKeystoreDescription":"这个选项将从文件中恢复钱包数据。 如果你的钱包余额显示不正确，请点击扫描钱包的按钮。",
"restoreMnemonic":"通过助记词恢复",
"restoreMnemonicDescription":"这个选项将通过助记词恢复密钥相关的数据。 如果你的钱包余额显示不正确，请点击扫描钱包的按钮。",
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18">
+ <defs>
+ <style>
+ .cls-1 {
+ fill: none;
+ }
+
+ .cls-2 {
+ clip-path: url(#clip-path);
+ }
+
+ .cls-3 {
+ fill: #20252d;
+ }
+ </style>
+ <clipPath id="clip-path">
+ <rect id="Rectangle_3774" data-name="Rectangle 3774" class="cls-1" width="18" height="18" transform="translate(61 117)"/>
+ </clipPath>
+ </defs>
+ <g id="copy" class="cls-2" transform="translate(-61 -117)">
+ <path id="Subtraction_47" data-name="Subtraction 47" class="cls-3" d="M-4797.6,2096H-4808v-10.4h1.3v9.1h9.1v1.3Zm2.6-2.6h-10.4V2083h6.5l3.9,3.965v6.434Zm-9.1-9.1v7.8h7.8v-3.9h-3.9v-3.9Zm5.051-.043v2.916h2.723Z" transform="translate(4871.5 -1963.5)"/>
+ </g>
+</svg>
OSDN Git Service
