src/features/backup/components/Backup.jsx

   1 import React from 'react'
   2 import componentClassNames from 'utility/componentClassNames'
   3 import {PageContent, PageTitle} from 'features/shared/components'
   4 import styles from './Backup.scss'
   5 import {connect} from 'react-redux'
   6 import {chainClient} from 'utility/environment'
   7
   8 class Backup extends React.Component {
   9   constructor(props) {
  10     super(props)
  11     this.connection = chainClient().connection
  12   }
  13
  14   backup() {
  15     this.connection.request('/backup-wallet').then(resp => {
  16       const date = new Date()
  17       const dateStr = date.toLocaleDateString().split(' ')[0]
  18       const timestamp = date.getTime()
  19       const fileName = ['bytom-wallet-backup-', dateStr, timestamp].join('-')
  20
  21       var element = document.createElement('a')
  22       element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(JSON.stringify(resp.data)))
  23       element.setAttribute('download', fileName)
  24       element.style.display = 'none'
  25       document.body.appendChild(element)
  26       element.click()
  27
  28       document.body.removeChild(element)
  29     })
  30   }
  31
  32   handleFileChange(event) {
  33     const files = event.target.files
  34     if (files.length <= 0) {
  35       this.setState({key: null})
  36       return
  37     }
  38
  39     const fileReader = new FileReader()
  40     fileReader.onload = fileLoadedEvent => {
  41       const backupData = JSON.parse(fileLoadedEvent.target.result)
  42       this.connection.request('/restore-wallet', backupData).then(resp => {
  43         if (resp.status === 'fail') {
  44           this.props.showError(new Error(resp.msg))
  45           return
  46         }
  47         this.props.showRestoreSuccess()
  48       })
  49     }
  50     fileReader.readAsText(files[0], 'UTF-8')
  51
  52     const fileElement = document.getElementById('bytom-restore-file-upload')
  53     fileElement.value = ''
  54   }
  55
  56   restore() {
  57     const element = document.getElementById('bytom-restore-file-upload')
  58     element.click()
  59   }
  60
  61   render() {
  62     const lang = this.props.core.lang
  63     const newButton = <button className='btn btn-primary' onClick={this.backup.bind(this)}>
  64       {lang === 'zh' ? '备份' : 'Backup'}
  65     </button>
  66     const restoreButton = <button className='btn btn-primary' onClick={this.restore.bind(this)}>
  67       {lang === 'zh' ? '恢复' : 'Restore'}
  68     </button>
  69
  70     return (
  71       <div className={componentClassNames(this, 'flex-container', styles.mainContainer)}>
  72         <PageTitle title={lang === 'zh' ? '备份与恢复' : 'Backup and restore'}/>
  73         <PageContent>
  74           {newButton}
  75           <hr/>
  76           {restoreButton}
  77           <input id='bytom-restore-file-upload' type='file' style={{'display': 'none', 'alignItems': 'center', 'fontSize': '12px'}}
  78                  onChange={this.handleFileChange.bind(this)}/>
  79         </PageContent>
  80       </div>
  81     )
  82   }
  83 }
  84
  85 const mapStateToProps = (state) => ({
  86   core: state.core,
  87   navAdvancedState: state.app.navAdvancedState,
  88 })
  89
  90 const mapDispatchToProps = (dispatch) => ({
  91   showError: (err) => {
  92     dispatch({type: 'ERROR', payload: err})
  93   },
  94   showRestoreSuccess: () => dispatch({type: 'RESTORE_SUCCESS'})
  95 })
  96
  97 export default connect(
  98   mapStateToProps,
  99   mapDispatchToProps
 100 )(Backup)