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

   1 import React from 'react'
   2 import moment from 'moment'
   3 import { connect } from 'react-redux'
   4 import { Link } from 'react-router'
   5 import { humanizeDuration } from 'utility/time'
   6 import testnetUtils from 'features/testnet/utils'
   7 import { navIcon } from '../../utils'
   8 import navStyles from '../Navigation/Navigation.scss'
   9 import styles from './Sync.scss'
  10
  11 class Sync extends React.Component {
  12   render() {
  13     const {
  14       onTestnet,
  15       replicationLag,
  16       snapshot,
  17       syncEstimates,
  18       testnetError,
  19       testnetNextReset
  20     } = this.props
  21
  22     if (snapshot && snapshot.inProgress) { // Currently downloading the snapshot.
  23       const downloaded = (snapshot.downloaded / snapshot.size) * 100
  24
  25       return <ul className={`${navStyles.navigation} ${styles.main}`}>
  26         {onTestnet &&
  27           <li className={navStyles.navigationTitle}>chain testnet snapshot</li>
  28         }
  29         {!onTestnet &&
  30           <li className={navStyles.navigationTitle}>snapshot sync</li>
  31         }
  32
  33         <li>{snapshot.height} blocks</li>
  34         {!!downloaded && <li>{Math.round(downloaded)}% downloaded</li>}
  35         {!!syncEstimates.snapshot && <li>Time remaining: {humanizeDuration(syncEstimates.snapshot)}</li>}
  36       </ul>
  37     }
  38
  39     const elems = []
  40
  41     if (onTestnet) {
  42       elems.push(<li key='sync-title' className={navStyles.navigationTitle}>chain testnet sync</li>)
  43     } else {
  44       elems.push(<li key='sync-title' className={navStyles.navigationTitle}>generator sync</li>)
  45     }
  46
  47     if (onTestnet && !testnetError && testnetNextReset) {
  48       const diff = testnetNextReset.diff(moment(), 'seconds')
  49       if (diff < 2 * 24 * 60 * 60) {
  50         elems.push(<li key='sync-reset-warning'><span className={styles.testnetReset}>Next reset: {humanizeDuration(diff)}</span></li>)
  51       }
  52     }
  53
  54     if (onTestnet && testnetError) {
  55       elems.push(<li key='sync-error'>
  56         <Link to='/core'>
  57           {navIcon('error', navStyles)}
  58           <span className={styles.testnetError}>Chain Testnet error</span>
  59         </Link>
  60       </li>)
  61     } else {
  62       if (replicationLag === null || replicationLag >= 2) {
  63         elems.push(<li key='sync-lag'>Blocks behind: {replicationLag === null ? '-' : replicationLag}</li>)
  64
  65         if (syncEstimates.replicationLag) {
  66           elems.push(<li key='sync-time'>Time remaining: {humanizeDuration(syncEstimates.replicationLag)}</li>)
  67         }
  68       } else {
  69         elems.push(<li key='sync-done'>Local core fully synced.</li>)
  70       }
  71     }
  72
  73     return <ul className={`${navStyles.navigation} ${styles.main}`}>{elems}</ul>
  74   }
  75 }
  76
  77 export default connect(
  78   (state) => ({
  79     onTestnet: state.core.onTestnet,
  80     routing: state.routing, // required for <Link>s to update active state on navigation
  81     replicationLag: state.core.replicationLag,
  82     snapshot: state.core.snapshot,
  83     syncEstimates: state.core.syncEstimates,
  84     testnetError: testnetUtils.isBlockchainMismatch(state) || testnetUtils.isCrosscoreRpcMismatch(state),
  85     testnetNextReset: state.testnet.nextReset,
  86   })
  87 )(Sync)