diff --git a/js/src/api/format/output.js b/js/src/api/format/output.js
index 6f785ed9b..8461df20f 100644
--- a/js/src/api/format/output.js
+++ b/js/src/api/format/output.js
@@ -166,7 +166,7 @@ export function outSyncing (syncing) {
break;
case 'blockGap':
- syncing[key] = syncing[key].map(outNumber);
+ syncing[key] = syncing[key] ? syncing[key].map(outNumber) : syncing[key];
break;
}
});
diff --git a/js/src/ui/BlockStatus/blockStatus.css b/js/src/ui/BlockStatus/blockStatus.css
new file mode 100644
index 000000000..ed86646f0
--- /dev/null
+++ b/js/src/ui/BlockStatus/blockStatus.css
@@ -0,0 +1,22 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity. If not, see .
+*/
+
+.blockNumber {
+}
+
+.syncStatus {
+}
diff --git a/js/src/ui/BlockStatus/blockStatus.js b/js/src/ui/BlockStatus/blockStatus.js
new file mode 100644
index 000000000..98e10f504
--- /dev/null
+++ b/js/src/ui/BlockStatus/blockStatus.js
@@ -0,0 +1,90 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import styles from './blockStatus.css';
+
+class BlockStatus extends Component {
+ static propTypes = {
+ blockNumber: PropTypes.object,
+ syncing: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.object
+ ])
+ }
+
+ render () {
+ const { blockNumber, syncing } = this.props;
+
+ if (!blockNumber) {
+ return null;
+ }
+
+ if (!syncing) {
+ return (
+
+ { blockNumber.toFormat() } best block
+
+ );
+ }
+
+ if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
+ return (
+
+ { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
+
+ );
+ }
+
+ let warpStatus = null;
+
+ if (syncing.blockGap) {
+ const [first, last] = syncing.blockGap;
+
+ warpStatus = (
+ , { first.mul(100).div(last).toFormat(2) }% historic
+ );
+ }
+
+ return (
+
+ { syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing
+ { warpStatus }
+
+ );
+ }
+}
+
+function mapStateToProps (state) {
+ const { blockNumber, syncing } = state.nodeStatus;
+
+ return {
+ blockNumber,
+ syncing
+ };
+}
+
+function mapDispatchToProps (dispatch) {
+ return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(BlockStatus);
diff --git a/js/src/ui/BlockStatus/index.js b/js/src/ui/BlockStatus/index.js
new file mode 100644
index 000000000..af5761fad
--- /dev/null
+++ b/js/src/ui/BlockStatus/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity. If not, see .
+
+export default from './blockStatus';
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index b766df9c3..808dec64a 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -20,6 +20,7 @@ import ActionbarSearch from './Actionbar/Search';
import ActionbarSort from './Actionbar/Sort';
import Badge from './Badge';
import Balance from './Balance';
+import BlockStatus from './BlockStatus';
import Button from './Button';
import ConfirmDialog from './ConfirmDialog';
import Container, { Title as ContainerTitle } from './Container';
@@ -46,6 +47,7 @@ export {
AddressSelect,
Badge,
Balance,
+ BlockStatus,
Button,
ConfirmDialog,
Container,
diff --git a/js/src/views/Application/Status/status.css b/js/src/views/Application/Status/status.css
index 9bab1b0cb..974c3e990 100644
--- a/js/src/views/Application/Status/status.css
+++ b/js/src/views/Application/Status/status.css
@@ -62,3 +62,6 @@
.version {
}
+
+.syncing {
+}
diff --git a/js/src/views/Application/Status/status.js b/js/src/views/Application/Status/status.js
index 10f4b18b5..5b1da779d 100644
--- a/js/src/views/Application/Status/status.js
+++ b/js/src/views/Application/Status/status.js
@@ -18,11 +18,13 @@ import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
+import { BlockStatus } from '../../../ui';
+
import styles from './status.css';
class Status extends Component {
static propTypes = {
- blockNumber: PropTypes.object,
+ blockNumber: PropTypes.object.isRequired,
clientVersion: PropTypes.string,
netPeers: PropTypes.object,
netChain: PropTypes.string,
@@ -30,7 +32,7 @@ class Status extends Component {
}
render () {
- const { clientVersion, blockNumber, netChain, netPeers, isTest } = this.props;
+ const { blockNumber, clientVersion, netChain, netPeers, isTest } = this.props;
const netStyle = `${styles.network} ${styles[isTest ? 'networktest' : 'networklive']}`;
if (!blockNumber) {
@@ -44,9 +46,7 @@ class Status extends Component {
-
- { blockNumber.toFormat() } blocks
-
+
{ netPeers.active.toFormat() }/{ netPeers.connected.toFormat() }/{ netPeers.max.toFormat() } peers