src/features/initialization/components/Index/Index.jsx

   1 import React from 'react'
   2 import styles from './Index.scss'
   3 import { Link } from 'react-router'
   4 import {withNamespaces} from 'react-i18next'
   5 import {connect} from 'react-redux'
   6
   7 class Index extends React.Component {
   8   constructor(props) {
   9     super(props)
  10     this.state = {
  11       value: null
  12     }
  13   }
  14
  15
  16   setValue(event) {
  17     this.setState({
  18       value:event.target.value
  19     })
  20   }
  21
  22   render() {
  23     const coreData = this.props.coreData
  24     const t = this.props.t
  25     if(!coreData){
  26       return <ul></ul>
  27     }
  28
  29     const networkID = coreData.networkId
  30     const createButton = <Link className={`btn btn-primary ${styles.submit}`} to='/initialization/register'>{t('init.create')}</Link>
  31     const restoreKeystore = <Link className={`btn btn-primary ${styles.submit}`}to='/initialization/restoreKeystore'>{t('init.restoreWallet')}</Link>
  32     const restoreMnemonic = <Link className={`btn btn-primary ${styles.submit}`} to='/initialization/restoreMnemonic'>{t('init.restoreWallet')}</Link>
  33
  34     return (
  35       <div onChange={e => this.setValue(e)}>
  36         <h2 className={styles.title}>{t('init.welcome',{network:networkID})}</h2>
  37
  38         <div className={styles.choices}>
  39           <div className={styles.choice_wrapper}>
  40             <label>
  41               <input className={styles.choice_radio_button}
  42                      type='radio'
  43                      name='type'
  44                      value='backup'/>
  45               <div className={`${styles.choice} ${styles.backup} `}>
  46                 <span className={styles.choice_title}>{t('init.create')}</span>
  47                 <p>
  48                   {t('init.createDescription')}
  49                 </p>
  50               </div>
  51             </label>
  52           </div>
  53
  54           <div className={styles.choice_wrapper}>
  55             <label>
  56               <input className={styles.choice_radio_button}
  57                      type='radio'
  58                      name='type'
  59                      value='restoreKeystore' />
  60               <div className={`${styles.choice} ${styles.restore}`}>
  61                 <span className={styles.choice_title}>{t('backup.restoreKeystore')}</span>
  62                 <p>
  63                   {t('backup.restoreKeystoreDescription')}
  64                 </p>
  65               </div>
  66             </label>
  67           </div>
  68
  69           <div className={styles.choice_wrapper}>
  70             <label>
  71               <input className={styles.choice_radio_button}
  72                      type='radio'
  73                      name='type'
  74                      value='restoreMnemonic' />
  75               <div className={`${styles.choice} ${styles.restore}`}>
  76                 <span className={styles.choice_title}>{t('backup.restoreMnemonic')}</span>
  77                 <p>
  78                   {t('backup.restoreMnemonicDescription')}
  79                 </p>
  80               </div>
  81             </label>
  82           </div>
  83         </div>
  84
  85         <div className={styles.choices}>
  86           <div>
  87             {
  88               this.state.value === 'backup'
  89               &&<span className={styles.submitWrapper}>{createButton}</span>
  90             }
  91           </div>
  92
  93           <div>
  94             {
  95               this.state.value === 'restoreKeystore'
  96               &&
  97               <span className={styles.submitWrapper}>{restoreKeystore}</span>
  98             }
  99           </div>
 100
 101           <div>
 102             {
 103               this.state.value === 'restoreMnemonic'
 104               &&  <span className={styles.submitWrapper}>{restoreMnemonic}</span>
 105             }
 106           </div>
 107         </div>
 108       </div>
 109     )
 110   }
 111 }
 112
 113 export default withNamespaces('translations') (connect(
 114   (state) => ({
 115     coreData:state.core.coreData
 116   }),
 117 )(Index))