add the sync component

diff --git a/src/features/app/components/Navigation/Navigation.jsx b/src/features/app/components/Navigation/Navigation.jsx
index 5b8a9be..00742ba 100644 (file)
--- a/src/features/app/components/Navigation/Navigation.jsx
+++ b/src/features/app/components/Navigation/Navigation.jsx
@@ -4,6 +4,7 @@ import {Link} from 'react-router'
 import styles from './Navigation.scss'
 import {navIcon} from '../../utils'
 import Sync from '../Sync/Sync'
+import {docsRoot} from '../../../../utility/environment'
 
 class Navigation extends React.Component {
   constructor(props) {
@@ -19,6 +20,7 @@ class Navigation extends React.Component {
 
   render() {
     const lang = this.props.lang
+    const coreData = this.props.coreData
     return (
       <div className={styles.main}>
         <ul className={styles.navigation}>
@@ -26,6 +28,7 @@ class Navigation extends React.Component {
           <li>
             <Link to='/transactions' activeClassName={styles.active}>
               {navIcon('transaction', styles)}
+              {}
               {lang === 'zh' ? '交易' : 'Transactions'}
             </Link>
           </li>
@@ -71,7 +74,25 @@ class Navigation extends React.Component {
           </li>
         </ul>}
 
-        <Sync/>
+        <ul className={styles.navigation}>
+          <li className={styles.navigationTitle}>developers</li>
+          <li>
+            <a href={docsRoot} target='_blank'>
+              {navIcon('docs', styles)}
+              {lang === 'zh' ? '文档' : 'Documentation'}
+            </a>
+          </li>
+        </ul>
+
+        <Sync
+          lang={lang}
+        />
+
+
+        <ul className={`${styles.navigation} ${styles.networkStatus}`}>
+          <li className={`${styles.navigationTitle} ${styles.networkWord}`}>{coreData? coreData['networkId']: ''}</li>
+        </ul>
+
       </div>
     )
   }
@@ -87,6 +108,7 @@ export default connect(
     }
 
     return {
+      coreData: state.core.coreData,
       routing: state.routing, // required for <Link>s to update active state on navigation
       showSync: state.core.configured && !state.core.generator,
       lang: state.core.lang,

diff --git a/src/features/app/components/Sync/Sync.jsx b/src/features/app/components/Sync/Sync.jsx
index 37be0f9..5df0a1e 100644 (file)
--- a/src/features/app/components/Sync/Sync.jsx
+++ b/src/features/app/components/Sync/Sync.jsx
@@ -6,21 +6,46 @@ import styles from './Sync.scss'
 class Sync extends React.Component {
   render() {
     const coreData = this.props.coreData
-    if (!coreData) {
+    if(!coreData){
       return <ul></ul>
     }
+    const syncing = coreData.syncing
+    // const syncing = true
+    const peerCount = coreData.peerCount
+    const currentBlock = coreData.currentBlock
+    // const currentBlock = 1
+    const highestBlock = coreData.highestBlock
+    // const highestBlock = currentBlock
+    const lang = this.props.lang
 
-    const arr = Object.keys(coreData).map(key => {
-      return <li key={key}>{key + ': ' + String(coreData[key])}</li>
-    })
-    arr.unshift(<li key='sync-title' className={navStyles.navigationTitle}>Network status</li>)
+    if (syncing) {
+      return <ul className={`${navStyles.navigation} ${styles.main}`}>
+        <li key='sync-title' className={navStyles.navigationTitle}>{ lang === 'zh' ? '网络同步状态' : 'Network Sync Status'}</li>
+        <li key='sync-status'>{lang === 'zh' ? '同步中...' : 'Synchronizing...'}  {currentBlock}/{highestBlock}</li>
+        <li key='sync-peer-count'>{lang === 'zh' ? '节点数' : 'Peer Count'}: {peerCount}</li>
+      </ul>
+    }
+
+    const elems = []
+
+    elems.push(<li key='sync-title' className={navStyles.navigationTitle}>{ lang === 'zh' ? '网络同步状态' : 'Network Sync Status' }</li>)
+
+    if(!syncing && currentBlock == highestBlock){
+      elems.push(<li key='sync-done'>{lang === 'zh' ? '同步完成' : 'Fully synced.' } <span className={styles.testnetReset}>{currentBlock}/{highestBlock}</span></li>)
+    }
+
+    if(!syncing && currentBlock < highestBlock){
+      elems.push(<li key='sync-disconnect'>{lang === 'zh' ? '同步中断' : 'Disconnect'}</li>)
+    }
+
+    elems.push(<li key='sync-peer-count'>{lang === 'zh' ? '节点数' : 'Peer Count'}: {peerCount}</li>)
 
-    return <ul className={`${navStyles.navigation} ${styles.main}`}>{arr}</ul>
+    return <ul className={`${navStyles.navigation} ${styles.main}`}>{elems}</ul>
   }
 }
 
 export default connect(
   (state) => ({
-    coreData: state.core.coreData,
+    coreData:state.core.coreData
   })
 )(Sync)