+
import Backup from './Backup'
export {
import React from 'react'
import styles from './Index.scss'
import { Link } from 'react-router'
+import {withNamespaces} from 'react-i18next'
+import {connect} from 'react-redux'
class Index extends React.Component {
constructor(props) {
super(props)
+ this.state = {
+ value: null
+ }
+ }
+
+
+ setValue(event) {
+ this.setState({
+ value:event.target.value
+ })
}
render() {
+ const coreData = this.props.coreData
+ const t = this.props.t
+ if(!coreData){
+ return <ul></ul>
+ }
+
+ const networkID = coreData.networkId
+ const createButton = <Link className={`btn btn-primary ${styles.submit}`} to='/initialization/register'>{t('init.create')}</Link>
+ const restoreKeystore = <Link className={`btn btn-primary ${styles.submit}`}to='/initialization/restoreKeystore'>{t('init.restoreWallet')}</Link>
+ const restoreMnemonic = <Link className={`btn btn-primary ${styles.submit}`} to='/initialization/restoreMnemonic'>{t('init.restoreWallet')}</Link>
+
return (
- <div className={styles.main}>
- <Link to='/initialization/register'>
- Create Wallet
- </Link>
- <Link to='/initialization/restore'>
- Restore Wallet
- </Link>
+ <div onChange={e => this.setValue(e)}>
+ <h2 className={styles.title}>{t('init.welcome',{network:networkID})}</h2>
+
+ <div className={styles.choices}>
+ <div className={styles.choice_wrapper}>
+ <label>
+ <input className={styles.choice_radio_button}
+ type='radio'
+ name='type'
+ value='backup'/>
+ <div className={`${styles.choice} ${styles.backup} `}>
+ <span className={styles.choice_title}>{t('init.create')}</span>
+ <p>
+ {t('init.createDescription')}
+ </p>
+ </div>
+ </label>
+ </div>
+
+ <div className={styles.choice_wrapper}>
+ <label>
+ <input className={styles.choice_radio_button}
+ type='radio'
+ name='type'
+ value='restoreKeystore' />
+ <div className={`${styles.choice} ${styles.restore}`}>
+ <span className={styles.choice_title}>{t('backup.restoreKeystore')}</span>
+ <p>
+ {t('backup.restoreKeystoreDescription')}
+ </p>
+ </div>
+ </label>
+ </div>
+
+ <div className={styles.choice_wrapper}>
+ <label>
+ <input className={styles.choice_radio_button}
+ type='radio'
+ name='type'
+ value='restoreMnemonic' />
+ <div className={`${styles.choice} ${styles.restore}`}>
+ <span className={styles.choice_title}>{t('backup.restoreMnemonic')}</span>
+ <p>
+ {t('backup.restoreMnemonicDescription')}
+ </p>
+ </div>
+ </label>
+ </div>
+ </div>
+
+ <div className={styles.choices}>
+ <div>
+ {
+ this.state.value === 'backup'
+ &&<span className={styles.submitWrapper}>{createButton}</span>
+ }
+ </div>
+
+ <div>
+ {
+ this.state.value === 'restoreKeystore'
+ &&
+ <span className={styles.submitWrapper}>{restoreKeystore}</span>
+ }
+ </div>
+
+ <div>
+ {
+ this.state.value === 'restoreMnemonic'
+ && <span className={styles.submitWrapper}>{restoreMnemonic}</span>
+ }
+ </div>
+ </div>
</div>
)
}
}
-export default Index
+export default withNamespaces('translations') (connect(
+ (state) => ({
+ coreData:state.core.coreData
+ }),
+)(Index))
overflow: auto;
}
-.choice {
- margin-left: 10px;
+.title {
+ font-size: $font-size-h2;
+ font-weight: normal;
+ margin-top: $gutter-size;
+ margin-bottom: $gutter-size;
+ text-align: center;
+ text-transform: uppercase;
}
-.image {
- width: 150px;
+.choices {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ > div {
+ width: 30%;
+ min-height: 100%;
+ }
+}
+
+.choice_wrapper {
+ display: flex;
+ min-height: 100%;
+
+ > label {
+ display: flex;
+ min-height:100%;
+ font-weight: normal;
+ }
+}
+
+.choice_radio_button {
position: absolute;
- top: calc(50px);
- left: calc(50% - 75px);
+ visibility: hidden;
}
-.title{
+.choice {
+ border: 1px solid $table-border-color;
+ border-radius: $border-radius-base;
+ cursor: pointer;
+ min-height: 100%;
+ padding: 20px $grid-gutter-width;
+ padding-top: 110px;
text-align: center;
- color: white;
+
+ background-repeat: no-repeat;
+ background-position: center 25px;
+ background-size: 90px 90px;
+
+ &:hover {
+ background-color: $background-emphasis-color;
+ }
+
+ &.disabled {
+ cursor: default;
+ background-color: $background-emphasis-color;
+ opacity: 0.75;
+
+ .choice_title {
+ color: $text-light-color;
+ }
+ }
+
+ p {
+ line-height: 1.4;
+ }
+
+ svg {
+ display: block;
+ margin: 0 auto;
+ width: 80px;
+ height: 80px;
+ }
+
+ .choice_title{
+ display: block;
+ font-size: $font-size-section-title;
+ margin: 12px 0;
+ color: $text-strong-color;
+ font-weight: 600;
+ }
}
-.switch {
- display: flex;
- justify-content: space-around;
+.backup {
+ background-image: url('images/backup/backup.svg')
+}
- margin-top: 10px;
+.restore {
+ background-image: url('images/backup/restore.svg')
}
-.formWarpper {
- display: flex;
- justify-content: space-around;
+input[type=radio]:checked ~ .choice {
+ strong {
+ color: $text-danger;
+ }
+
+ &:hover {
+ background-color: $background-color;
+ }
+
+ &.backup {
+ background-image: url('images/backup/backup-active.svg')
+ }
+
+ &.restore {
+ background-image: url('images/backup/restore-active.svg')
+ }
+
+ .choice_title {
+ color: $brand-primary;
+ }
+ svg {
+ polygon {
+ stroke: $brand-primary;
+ fill: transparentize($brand-primary, 0.85);
+ }
+
+ rect, path {
+ fill: $brand-primary
+ }
+ }
+}
+
+.submitWrapper {
+ display: block;
margin-top: 30px;
}
-.form {
- background: $background-color;
- border-radius: $border-radius-standard;
- width: 500px;
- padding: 30px;
+.submit {
+ display: block;
+ width: 100%;
+ margin-top: $gutter-size;
+ padding:5px 0px;
+}
+
+.infoLink {
+ position: relative;
+ left: 4px;
+ top: 1px;
+ color:$text-light-color;
}
+
return (
<div >
<RestoreKeystore success={this.props.success}/>
- <Link to='/initialization/restore'>
+ <Link to='/initialization/'>
cancel
</Link>
return (
<div >
<RestoreMnemonic success={this.props.success}/>
- <Link to='/initialization/restore'>
+ <Link to='/initialization/'>
cancel
</Link>
</div>
import {connect} from 'react-redux'
import {ErrorBanner, TextField, PasswordField} from 'features/shared/components'
import actions from 'actions'
+import { Link } from 'react-router'
import styles from './Register.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/'>
+ cancel
+ </Link>
</form>
</div>
</div>
+++ /dev/null
-import React from 'react'
-import { Link } from 'react-router'
-
-class Resotre extends React.Component {
- constructor(props) {
- super(props)
- }
-
- render() {
- return(
- <div>
- <Link to='/initialization/restoreKeystore'>
- Restore by keystore
- </Link>
- <Link to='/initialization/restoreMnemonic'>
- Restore by Mnemonic
- </Link>
-
- <Link to='/initialization'>
- cancel
- </Link>
- </div>
- )
- }
-}
-
-
-export default Resotre
import Mnemonic from './Mnemonic/Mnemonic'
import Keystore from './Keystore/Keystore'
import Skip from './Skip/Skip'
-import Restore from './Restore/Resotre'
export {
Index,
Register,
- Restore,
Mnemonic,
Keystore,
MnemonicStepper,
"repeatPlaceHolder":"Please repeat the key password...",
"errorTitle":"Error in initialization",
"mnemonic":"mnemonic",
- "mnemonicRequire":"Mnemonic is Required"
+ "mnemonicRequire":"Mnemonic is Required",
+ "create": "Create Wallet",
+ "createDescription":"This option will create a default account, key password and give you a option to keep you mnemonic. Warning: key seed words will display only once, it's important to remember your password.",
+ "welcome":"Welcome to Bytom __network__"
},
"backup":{
"title":"Backup and Restore",
"repeatPlaceHolder":"请重复输入密钥密码...",
"errorTitle":"初始化错误",
"mnemonic":"助记词",
- "mnemonicRequire":"助记词是必须项"
+ "mnemonicRequire":"助记词是必须项",
+ "create": "新建钱包",
+ "createDescription":"这个选项将生成默认的挖矿账户和默认密钥。 助记词将会在此生成，您可以选择保留助记词或者跳过。 注意： 助记词只生成一次， 请将密码，助记词妥善保存",
+ "welcome":"欢迎来到__network__"
},
"backup":{
"title":"备份与恢复",
OSDN Git Service
