Warp sync status display (#3045)

* Warp sync status display

* Add BlockStatus component (re-usable)

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 <http://www.gnu.org/licenses/>.
+*/
+
+.blockNumber {
+}
+
+.syncStatus {
+}

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 <http://www.gnu.org/licenses/>.
+
+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 (
+        <div className={ styles.blockNumber }>
+          { blockNumber.toFormat() } best block
+        </div>
+      );
+    }
+
+    if (!syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
+      return (
+        <div className={ styles.syncStatus }>
+          { syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2) }% warp restore
+        </div>
+      );
+    }
+
+    let warpStatus = null;
+
+    if (syncing.blockGap) {
+      const [first, last] = syncing.blockGap;
+
+      warpStatus = (
+        <span>, { first.mul(100).div(last).toFormat(2) }% historic</span>
+      );
+    }
+
+    return (
+      <div className={ styles.syncStatus }>
+        <span>{ syncing.currentBlock.toFormat() }/{ syncing.highestBlock.toFormat() } syncing</span>
+        { warpStatus }
+      </div>
+    );
+  }
+}
+
+function mapStateToProps (state) {
+  const { blockNumber, syncing } = state.nodeStatus;
+
+  return {
+    blockNumber,
+    syncing
+  };
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({}, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BlockStatus);

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 <http://www.gnu.org/licenses/>.
+
+export default from './blockStatus';

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,