src/features/app/components/Sync/Sync.jsx

   1 import React from 'react'
   2 import { connect } from 'react-redux'
   3 import navStyles from '../Navigation/Navigation.scss'
   4 import styles from './Sync.scss'
   5
   6 class Sync extends React.Component {
   7   render() {
   8     const coreData = this.props.coreData
   9     if(!coreData){
  10       return <ul></ul>
  11     }
  12     const networkID = coreData.networkId
  13     const syncing = coreData.syncing
  14     const peerCount = coreData.peerCount
  15     const currentBlock = coreData.currentBlock
  16     const highestBlock = coreData.highestBlock
  17     const lang = this.props.lang
  18
  19     if (syncing) {
  20       return <ul className={`${navStyles.navigation} ${styles.main}`}>
  21         <li key='sync-networkID' className={navStyles.navigationTitle}>{ networkID }</li>
  22         <li key='sync-title' className={navStyles.navigationTitle}>{ lang === 'zh' ? '网络同步状态' : 'Network Sync Status'}</li>
  23         <li key='sync-status'>{lang === 'zh' ? '同步中: ' : 'Synchronizing: '}  {currentBlock}/{highestBlock}</li>
  24         <li key='sync-peer-count'>{lang === 'zh' ? '节点数' : 'Peer Count'}: {peerCount}</li>
  25       </ul>
  26     }
  27
  28     const elems = []
  29
  30     elems.push(<li key='sync-networkID' className={navStyles.navigationTitle}>{ networkID }</li>)
  31     elems.push(<li key='sync-title' className={navStyles.navigationTitle}>{ lang === 'zh' ? '网络同步状态' : 'Network Sync Status' }</li>)
  32
  33     if(!syncing && currentBlock == highestBlock){
  34       elems.push(<li key='sync-done'>{lang === 'zh' ? '同步完成: ' : 'Fully synced: ' } <span className={styles.blockHightlight}>{currentBlock}/{highestBlock}</span></li>)
  35     }
  36
  37     if(!syncing && currentBlock < highestBlock){
  38       elems.push(<li key='sync-disconnect'>{lang === 'zh' ? '同步中断' : 'Disconnect'}</li>)
  39     }
  40
  41     elems.push(<li key='sync-peer-count'>{lang === 'zh' ? '节点数' : 'Peer Count'}: {peerCount}</li>)
  42
  43     return <ul className={`${navStyles.navigation} ${styles.main}`}>{elems}</ul>
  44   }
  45 }
  46
  47 export default connect(
  48   (state) => ({
  49     coreData:state.core.coreData
  50   })
  51 )(Sync)