Ui 2 pubsub components (#6152)

* Remove Application.orig from merge

* Disable i18n extraction for development

* Retrieve blockNumber via pubsub

* Chain via pubsub

* StatusIndicator with health

* WIP

* WIP

* s/BlockStatus/BlockNumber/

* Adjust BlockNumber display

* Cleanup debug

* Fix statusbar indicator

* NetPeers component

* Add BlockTimestamp

* Export statics on observer

* Cleanup debug logs

* Update references

js/packages/api/api.js

@@ -17,8 +17,8 @@
 import EventEmitter from 'eventemitter3';
 
 import Contract from './contract';
-import { PromiseProvider, Http as HttpProvider, PostMessage as PostMessageProvider, Ws as WsProvider } from './provider';
+import { PromiseProvider, Http as HttpProvider, PostMessage as PostMessageProvider, Ws as WsProvider, WsSecure as WsSecureProvider } from './provider';
-import { Http as HttpTransport, Ws as WsTransport } from './transport';
+import { Http as HttpTransport, Ws as WsTransport, WsSecure as WsSecureTransport } from './transport';
 
 import { Db, Eth, Parity, Net, Personal, Shell, Shh, Signer, Trace, Web3 } from './rpc';
 import Subscriptions from './subscriptions';
@@ -74,10 +74,17 @@ export default class Api extends EventEmitter {
     }
   }
 
+  get isConnected () {
+    const isConnected = this.provider.isConnected;
+
+    return isConnected || typeof isConnected === 'undefined';
+  }
+
   get pubsub () {
     if (!this._pubsub) {
       throw Error('Pubsub is only available with a subscribing-supported transport injected!');
     }
+
     return this._pubsub;
   }
 
@@ -186,12 +193,14 @@ export default class Api extends EventEmitter {
   static Provider = {
     Http: HttpProvider,
     PostMessage: PostMessageProvider,
-    Ws: WsProvider
+    Ws: WsProvider,
+    WsSecure: WsSecureProvider
   }
 
   // NOTE: kept for backwards compatibility
   static Transport = {
     Http: HttpTransport,
-    Ws: WsTransport
+    Ws: WsTransport,
+    WsSecure: WsSecureTransport
   }
 }

js/packages/api/provider/index.js

@@ -14,8 +14,15 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-export PromiseProvider from './promise';
+import Ws from './ws';
 
 export Http from './http';
 export PostMessage from './postMessage';
-export Ws from './ws';
+export PromiseProvider from './promise';
+
+const WsSecure = Ws;
+
+export {
+  Ws,
+  WsSecure
+};

js/packages/api/provider/postMessage.js

@@ -46,7 +46,7 @@ export default class PostMessage {
   }
 
   subscribe = (api, callback, params) => {
-    console.log('paritySubscribe', JSON.stringify(params), api, callback);
+    // console.log('paritySubscribe', JSON.stringify(params), api, callback);
     return new Promise((resolve, reject) => {
       const id = ++this.id;
 
@@ -89,8 +89,10 @@ export default class PostMessage {
     }
 
     if (this._messages[id].subscription) {
-      console.log('subscription', result, 'initial?', this._messages[id].initial);
+      // console.log('subscription', result, 'initial?', this._messages[id].initial);
-      this._messages[id].initial ? this._messages[id].resolve(result) : this._messages[id].callback(error && new Error(error), result);
+      this._messages[id].initial
+        ? this._messages[id].resolve(result)
+        : this._messages[id].callback(error && new Error(error), result);
       this._messages[id].initial = false;
     } else {
       this._messages[id].callback(error && new Error(error), result);

js/packages/api/transport/index.js

@@ -14,7 +14,15 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import Ws from './ws';
+
 export Http from './http';
-export Ws from './ws';
 export TransportError from './error';
 export Middleware from './middleware';
+
+const WsSecure = Ws;
+
+export {
+  Ws,
+  WsSecure
+};

js/packages/dapp-status/Node/node.js

@@ -15,51 +15,29 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import bytes from 'bytes';
-import moment from 'moment';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react';
 
-import { Container, ContainerTitle, Input } from '@parity/ui';
+import { BlockNumber, BlockTimestamp, Container, ContainerTitle, Input, NetPeers } from '@parity/ui';
 
 import MiningSettings from '../MiningSettings';
 import StatusStore from './store';
 
 import styles from './node.css';
 
-class Node extends Component {
+@observer
+export default class Node extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
   };
 
-  static propTypes = {
-    blockNumber: PropTypes.object,
-    blockTimestamp: PropTypes.object,
-    netChain: PropTypes.string,
-    netPeers: PropTypes.object
-  };
-
   statusStore = new StatusStore(this.context.api);
 
-  componentWillMount () {
-    this.statusStore.startPolling();
-  }
-
-  componentWillUnmount () {
-    this.statusStore.stopPolling();
-  }
-
   render () {
-    const { blockNumber, blockTimestamp, netPeers } = this.props;
     const { hashrate } = this.statusStore;
-
-    if (!netPeers || !blockNumber) {
-      return null;
-    }
-
     const hashrateValue = bytes(hashrate.toNumber()) || 0;
-    const peers = `${netPeers.active}/${netPeers.connected}/${netPeers.max}`;
 
     return (
       <Container>
@@ -76,10 +54,10 @@ class Node extends Component {
                   }
                 />
                 <div className={ styles.blockInfo }>
-                  #{ blockNumber.toFormat() }
+                  #<BlockNumber />
                 </div>
                 <div className={ styles.blockByline }>
-                  { moment(blockTimestamp).calendar() }
+                  <BlockTimestamp />
                 </div>
               </div>
               <div className={ `${styles.col12} ${styles.padBottom}` }>
@@ -92,7 +70,7 @@ class Node extends Component {
                   }
                 />
                 <div className={ styles.blockInfo }>
-                  { peers }
+                  <NetPeers />
                 </div>
               </div>
               <div className={ `${styles.col12} ${styles.padBottom}` }>
@@ -158,7 +136,6 @@ class Node extends Component {
   }
 
   renderSettings () {
-    const { netChain } = this.props;
     const { enode, rpcSettings, netPort = '' } = this.statusStore;
 
     if (!rpcSettings) {
@@ -186,7 +163,7 @@ class Node extends Component {
               defaultMessage='chain'
             />
           }
-          value={ netChain }
+          value={ this.statusStore.netChain }
         />
         <div className={ styles.row }>
           <div className={ styles.col6 }>
@@ -279,24 +256,3 @@ class Node extends Component {
     );
   }
 }
-
-function mapStateToProps (state) {
-  const {
-    blockNumber,
-    blockTimestamp,
-    netChain,
-    netPeers
-  } = state.nodeStatus;
-
-  return {
-    blockNumber,
-    blockTimestamp,
-    netChain,
-    netPeers
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  null
-)(Node);

js/packages/dapp-status/Node/store.js

@@ -15,7 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import BigNumber from 'bignumber.js';
-import { action, observable, transaction } from 'mobx';
+import { action, computed, observable, transaction } from 'mobx';
+
+import { NetChain } from '@parity/ui';
+
+console.log('NetChain', NetChain, NetChain.Store);
 
 export default class StatusStore {
   @observable defaultExtraData = '';
@@ -35,6 +39,13 @@ export default class StatusStore {
 
   constructor (api) {
     this.api = api;
+    this.chainStore = NetChain.Store.get(api);
+
+    this.startPolling();
+  }
+
+  @computed get netChain () {
+    return this.chainStore.netChain;
   }
 
   @action setLongStatus ({ defaultExtraData, enode, netPort, rpcSettings }) {

js/packages/dapp-status/status.js

@@ -26,6 +26,8 @@ import Peers from './Peers';
 
 import styles from './status.css';
 
+console.log('Node', Node);
+
 export default function Status () {
   return (
     <Page

js/packages/shared/redux/providers/status.js

@@ -29,10 +29,6 @@ import { statusBlockNumber, statusCollection } from './statusActions';
 const log = getLogger(LOG_KEYS.Signer);
 let instance = null;
 
-const STATUS_OK = 'ok';
-const STATUS_WARN = 'needsAttention';
-const STATUS_BAD = 'bad';
-
 export default class Status {
   _apiStatus = {};
   _status = {};
@@ -207,19 +203,13 @@ export default class Status {
 
     const statusPromises = [
       this._api.eth.syncing(),
-      this._api.parity.netPeers(),
+      this._api.parity.netPeers()
-      this._fetchHealth()
     ];
 
     return Promise
       .all(statusPromises)
-      .then(([ syncing, netPeers, health ]) => {
+      .then(([ syncing, netPeers ]) => {
-        const status = { netPeers, syncing, health };
+        const status = { netPeers, syncing };
-
-        health.overall = this._overallStatus(health);
-        health.peers = health.peers || {};
-        health.sync = health.sync || {};
-        health.time = health.time || {};
 
         if (!isEqual(status, this._status)) {
           this._store.dispatch(statusCollection(status));
@@ -234,43 +224,6 @@ export default class Status {
       });
   }
 
-  _overallStatus = (health) => {
-    const all = [health.peers, health.sync, health.time].filter(x => x);
-    const statuses = all.map(x => x.status);
-    const bad = statuses.find(x => x === STATUS_BAD);
-    const needsAttention = statuses.find(x => x === STATUS_WARN);
-    const message = all.map(x => x.message).filter(x => x);
-
-    if (all.length) {
-      return {
-        status: bad || needsAttention || STATUS_OK,
-        message
-      };
-    }
-
-    return {
-      status: STATUS_BAD,
-      message: ['Unable to fetch node health.']
-    };
-  }
-
-  _fetchHealth = () => {
-    // Support Parity-Extension.
-    const uiUrl = this._api.transport.uiUrlWithProtocol || '';
-
-    return fetch(`${uiUrl}/api/health`)
-      .then((response) => {
-        if (!response.ok) {
-          return {};
-        }
-
-        return response.json();
-      })
-      .catch(() => {
-        return {};
-      });
-  }
-
   /**
    * The data fetched here should not change
    * unless Parity is restarted. They are thus

js/packages/ui/BlockNumber/blockNumber.css

@@ -0,0 +1,21 @@
+/* Copyright 2015-2017 Parity Technologies (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 {
+  display: inline-block;
+}

js/packages/ui/BlockNumber/blockNumber.js

@@ -15,39 +15,37 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
 
-import styles from './blockStatus.css';
+import Store from './store';
 
-function BlockStatus ({ blockNumber, syncing }) {
+import styles from './blockNumber.css';
-  if (!blockNumber) {
+
+function BlockNumber ({ className, message }, { api }) {
+  const store = Store.get(api);
+
+  if (!store.blockNumber) {
     return null;
   }
 
-  if (!syncing) {
+  if (!store.syncing) {
     return (
-      <div className={ styles.blockNumber }>
+      <div className={ [styles.blockNumber, className].join(' ') }>
-        <FormattedMessage
+        { store.blockNumber.toFormat() }{ message }
-          id='ui.blockStatus.bestBlock'
-          defaultMessage='{blockNumber} best block'
-          values={ {
-            blockNumber: blockNumber.toFormat()
-          } }
-        />
       </div>
     );
   }
 
-  if (syncing.warpChunksAmount && syncing.warpChunksProcessed && !syncing.warpChunksAmount.eq(syncing.warpChunksProcessed)) {
+  if (store.syncing.warpChunksAmount && store.syncing.warpChunksProcessed && !store.syncing.warpChunksAmount.eq(store.syncing.warpChunksProcessed)) {
     return (
       <div className={ styles.syncStatus }>
         <FormattedMessage
           id='ui.blockStatus.warpRestore'
           defaultMessage='{percentage}% warp restore'
           values={ {
-            percentage: syncing.warpChunksProcessed.mul(100).div(syncing.warpChunksAmount).toFormat(2)
+            percentage: store.syncing.warpChunksProcessed.mul(100).div(store.syncing.warpChunksAmount).toFormat(2)
           } }
         />
       </div>
@@ -57,23 +55,23 @@ function BlockStatus ({ blockNumber, syncing }) {
   let syncStatus = null;
   let warpStatus = null;
 
-  if (syncing.currentBlock && syncing.highestBlock) {
+  if (store.syncing.currentBlock && store.syncing.highestBlock) {
     syncStatus = (
       <span>
         <FormattedMessage
           id='ui.blockStatus.syncStatus'
           defaultMessage='{currentBlock}/{highestBlock} syncing'
           values={ {
-            currentBlock: syncing.currentBlock.toFormat(),
+            currentBlock: store.syncing.currentBlock.toFormat(),
-            highestBlock: syncing.highestBlock.toFormat()
+            highestBlock: store.syncing.highestBlock.toFormat()
           } }
         />
       </span>
     );
   }
 
-  if (syncing.blockGap) {
+  if (store.syncing.blockGap) {
-    const [first, last] = syncing.blockGap;
+    const [first, last] = store.syncing.blockGap;
 
     warpStatus = (
       <span>
@@ -96,24 +94,17 @@ function BlockStatus ({ blockNumber, syncing }) {
   );
 }
 
-BlockStatus.propTypes = {
+BlockNumber.propTypes = {
-  blockNumber: PropTypes.object,
+  className: PropTypes.string,
-  syncing: PropTypes.oneOfType([
+  message: PropTypes.node
-    PropTypes.bool,
-    PropTypes.object
-  ])
 };
 
-function mapStateToProps (state) {
+BlockNumber.contextTypes = {
-  const { blockNumber, syncing } = state.nodeStatus;
+  api: PropTypes.object.isRequired
+};
 
-  return {
+const ObserverComponent = observer(BlockNumber);
-    blockNumber,
-    syncing
-  };
-}
 
-export default connect(
+ObserverComponent.Store = Store;
-  mapStateToProps,
+
-  null
+export default ObserverComponent;
-)(BlockStatus);

js/packages/ui/BlockNumber/index.js

@@ -14,4 +14,4 @@
 // 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';
+export default from './blockNumber';

js/packages/ui/BlockNumber/store.js

@@ -0,0 +1,79 @@
+// Copyright 2015-2017 Parity Technologies (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 { action, observable } from 'mobx';
+
+export default class Store {
+  @observable blockNumber = null;
+  @observable blockTimestamp = null;
+  @observable syncing = null;
+
+  constructor (api) {
+    this._api = api;
+    this._api.on('connected', this.setupSubscriptions, this);
+
+    // Connected and/or events NOT available
+    if (this._api.isConnected) {
+      this.setupSubscriptions();
+    }
+  }
+
+  setupSubscriptions = () => {
+    this._api.pubsub.eth.syncing((error, syncing) => {
+      if (!error) {
+        this.setSyncing(syncing);
+      }
+    });
+
+    this._api.pubsub.eth.blockNumber((error, blockNumber) => {
+      if (!error) {
+        this.setBlockNumber(blockNumber);
+      }
+
+      this._api.parity
+        .getBlockHeaderByNumber(blockNumber)
+        .then((block) => {
+          if (!block) {
+            return;
+          }
+
+          this.setBlockTimestamp(block.timestamp);
+        });
+    });
+  }
+
+  @action setBlockNumber = (blockNumber) => {
+    this.blockNumber = blockNumber;
+  }
+
+  @action setBlockTimestamp = (blockTimestamp) => {
+    this.blockTimestamp = blockTimestamp;
+  }
+
+  @action setSyncing = (syncing) => {
+    this.syncing = syncing;
+  }
+
+  static instance = null;
+
+  static get (api) {
+    if (!Store.instance) {
+      Store.instance = new Store(api);
+    }
+
+    return Store.instance;
+  }
+}

js/packages/ui/BlockStatus/blockStatus.spec.js

@@ -1,94 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (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 BigNumber from 'bignumber.js';
-import { shallow } from 'enzyme';
-import React from 'react';
-import sinon from 'sinon';
-
-import BlockStatus from './';
-
-let component;
-
-function createRedux (syncing = false, blockNumber = new BigNumber(123)) {
-  return {
-    dispatch: sinon.stub(),
-    subscribe: sinon.stub(),
-    getState: () => {
-      return {
-        nodeStatus: {
-          blockNumber,
-          syncing
-        }
-      };
-    }
-  };
-}
-
-function render (reduxStore = createRedux(), props) {
-  component = shallow(
-    <BlockStatus { ...props } />,
-    { context: { store: reduxStore } }
-  ).find('BlockStatus').shallow();
-
-  return component;
-}
-
-describe('ui/BlockStatus', () => {
-  it('renders defaults', () => {
-    expect(render()).to.be.ok;
-  });
-
-  it('renders null with no blockNumber', () => {
-    expect(render(createRedux(false, null)).find('div')).to.have.length(0);
-  });
-
-  it('renders only the best block when syncing === false', () => {
-    const messages = render().find('FormattedMessage');
-
-    expect(messages).to.have.length(1);
-    expect(messages).to.have.id('ui.blockStatus.bestBlock');
-  });
-
-  it('renders only the warp restore status when restoring', () => {
-    const messages = render(createRedux({
-      warpChunksAmount: new BigNumber(100),
-      warpChunksProcessed: new BigNumber(5)
-    })).find('FormattedMessage');
-
-    expect(messages).to.have.length(1);
-    expect(messages).to.have.id('ui.blockStatus.warpRestore');
-  });
-
-  it('renders the current/highest when syncing', () => {
-    const messages = render(createRedux({
-      currentBlock: new BigNumber(123),
-      highestBlock: new BigNumber(456)
-    })).find('FormattedMessage');
-
-    expect(messages).to.have.length(1);
-    expect(messages).to.have.id('ui.blockStatus.syncStatus');
-  });
-
-  it('renders warp blockGap when catching up', () => {
-    const messages = render(createRedux({
-      blockGap: [new BigNumber(123), new BigNumber(456)]
-    })).find('FormattedMessage');
-
-    expect(messages).to.have.length(1);
-    expect(messages).to.have.id('ui.blockStatus.warpStatus');
-  });
-});

js/packages/ui/BlockTimestamp/blockTimestamp.css

@@ -0,0 +1,20 @@
+/* Copyright 2015-2017 Parity Technologies (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/>.
+*/
+
+.blockTimestamp {
+  display: inline-block;
+}

js/packages/ui/BlockTimestamp/blockTimestamp.js

@@ -0,0 +1,52 @@
+// Copyright 2015-2017 Parity Technologies (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 from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import moment from 'moment';
+
+import Store from '../BlockNumber/store';
+
+import styles from './blockTimestamp.css';
+
+function BlockTimestamp ({ className }, { api }) {
+  const store = Store.get(api);
+
+  if (!store.blockTimestamp) {
+    return null;
+  }
+
+  return (
+    <div className={ [styles.blockTimestamp, className].join(' ') }>
+      { moment(store.blockTimestamp).calendar() }
+    </div>
+  );
+}
+
+BlockTimestamp.propTypes = {
+  className: PropTypes.string
+};
+
+BlockTimestamp.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+const ObserverComponent = observer(BlockTimestamp);
+
+ObserverComponent.Store = Store;
+
+export default ObserverComponent;

js/packages/ui/BlockTimestamp/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (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 './blockTimestamp';

js/packages/ui/ClientVersion/clientVersion.css

@@ -0,0 +1,20 @@
+/* Copyright 2015-2017 Parity Technologies (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/>.
+*/
+
+.clientVersion {
+  display: inline-block;
+}

js/packages/ui/ClientVersion/clientVersion.js

@@ -0,0 +1,52 @@
+// Copyright 2015-2017 Parity Technologies (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 from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import Store from './store';
+
+import styles from './clientVersion.css';
+
+function ClientVersion ({ className }, { api }) {
+  const store = Store.get(api);
+
+  if (!store.clientVersion) {
+    return null;
+  }
+
+  const [ clientName, , versionString, , ] = store.clientVersion.split('/');
+  const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
+
+  return (
+    <div className={ [styles.clientVersion, className].join(' ') }>
+      { clientName } { versionNumber }-{ versionDate } { versionType }
+    </div>
+  );
+}
+
+ClientVersion.propTypes = {
+  className: PropTypes.string
+};
+
+ClientVersion.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+ClientVersion.Store = Store;
+
+export default observer(ClientVersion);

js/packages/ui/ClientVersion/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (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 './clientVersion';

js/packages/ui/ClientVersion/store.js

@@ -0,0 +1,50 @@
+// Copyright 2015-2017 Parity Technologies (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 { action, observable } from 'mobx';
+
+export default class Store {
+  @observable clientVersion = '';
+
+  constructor (api) {
+    this._api = api;
+    this._api.on('connected', this.setupSubscriptions, this);
+
+    if (this._api.isConnected) {
+      this.setupSubscriptions();
+    }
+  }
+
+  setupSubscriptions = () => {
+    this._api.web3
+      .clientVersion()
+      .then(this.setClientVersion);
+  }
+
+  @action setClientVersion = (clientVersion) => {
+    this.clientVersion = clientVersion;
+  }
+
+  static instance = null;
+
+  static get (api) {
+    if (!Store.instance) {
+      Store.instance = new Store(api);
+    }
+
+    return Store.instance;
+  }
+}

js/packages/ui/CurrencySymbol/currencySymbol.js

@@ -14,53 +14,45 @@
 // 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 } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { observer } from 'mobx-react';
+
+import Store from '../NetChain/store';
 
 const SYMBOL_ETC = 'ETC';
 const SYMBOL_ETH = 'ETH';
 const SYMBOL_EXP = 'EXP';
 
-export class CurrencySymbol extends Component {
+function renderSymbol (netChain) {
-  static propTypes = {
+  switch (netChain) {
-    className: PropTypes.string,
+    case 'classic':
-    netChain: PropTypes.string.isRequired
+      return SYMBOL_ETC;
-  }
 
-  render () {
+    case 'expanse':
-    const { className } = this.props;
+      return SYMBOL_EXP;
 
-    return (
+    default:
-      <span className={ className }>{ this.renderSymbol() }</span>
+      return SYMBOL_ETH;
-    );
-  }
-
-  renderSymbol () {
-    const { netChain } = this.props;
-
-    switch (netChain) {
-      case 'classic':
-        return SYMBOL_ETC;
-
-      case 'expanse':
-        return SYMBOL_EXP;
-
-      default:
-        return SYMBOL_ETH;
-    }
   }
 }
 
-function mapStateToProps (state) {
+function CurrencySymbol ({ className }, { api }) {
-  const { netChain } = state.nodeStatus;
+  const store = Store.get(api);
 
-  return {
+  return (
-    netChain
+    <span className={ className }>
-  };
+      { renderSymbol(store.netChain) }
+    </span>
+  );
 }
 
-export default connect(
+CurrencySymbol.propTypes = {
-  mapStateToProps,
+  className: PropTypes.string
-  null
+};
-)(CurrencySymbol);
+
+CurrencySymbol.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+export default observer(CurrencySymbol);

js/packages/ui/CurrencySymbol/currencySymbol.spec.js

@@ -1,99 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (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 { shallow } from 'enzyme';
-import React from 'react';
-import sinon from 'sinon';
-
-import CurrencySymbol from './';
-
-let component;
-let store;
-
-function createRedux (netChain = 'ropsten') {
-  store = {
-    dispatch: sinon.stub(),
-    subscribe: sinon.stub(),
-    getState: () => {
-      return {
-        nodeStatus: {
-          netChain
-        }
-      };
-    }
-  };
-
-  return store;
-}
-
-function render (netChain, props = {}) {
-  component = shallow(
-    <CurrencySymbol { ...props } />,
-    {
-      context: {
-        store: createRedux(netChain)
-      }
-    }
-  ).find('CurrencySymbol').shallow();
-
-  return component;
-}
-
-describe('ui/CurrencySymbol', () => {
-  it('renders defaults', () => {
-    expect(render()).to.be.ok;
-  });
-
-  it('passes the className as provided', () => {
-    expect(render('ropsten', { className: 'test' }).find('span').hasClass('test')).to.be.true;
-  });
-
-  describe('currencies', () => {
-    it('renders ETH as default', () => {
-      expect(render().text()).equal('ETH');
-    });
-
-    it('renders ETC for classic', () => {
-      expect(render('classic').text()).equal('ETC');
-    });
-
-    it('renders EXP for expanse', () => {
-      expect(render('expanse').text()).equal('EXP');
-    });
-
-    it('renders ETH as default', () => {
-      expect(render('somethingElse').text()).equal('ETH');
-    });
-  });
-
-  describe('renderSymbol', () => {
-    it('render defaults', () => {
-      expect(render().instance().renderSymbol()).to.be.ok;
-    });
-
-    it('render ETH as default', () => {
-      expect(render().instance().renderSymbol()).equal('ETH');
-    });
-
-    it('render ETC', () => {
-      expect(render('classic').instance().renderSymbol()).equal('ETC');
-    });
-
-    it('render EXP', () => {
-      expect(render('expanse').instance().renderSymbol()).equal('EXP');
-    });
-  });
-});

js/packages/ui/NetChain/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (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 './netChain';

js/packages/ui/NetChain/netChain.css

@@ -0,0 +1,34 @@
+/* Copyright 2015-2017 Parity Technologies (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/>.
+*/
+
+$networkLiveColor: rgb(0, 136, 0);
+$networkTestColor: rgb(136, 0, 0);
+
+.chain {
+  border-radius: 0.4em;
+  line-height: 1.2;
+  padding: 0.25em 0.5em;
+  text-transform: uppercase;
+
+  &.live {
+    background: $networkLiveColor;
+  }
+
+  &.test {
+    background: $networkTestColor;
+  }
+}

js/packages/ui/NetChain/netChain.js

@@ -0,0 +1,47 @@
+// Copyright 2015-2017 Parity Technologies (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 from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import Store from './store';
+
+import styles from './netChain.css';
+
+function NetChain ({ className }, { api }) {
+  const store = Store.get(api);
+
+  return (
+    <div className={ `${styles.chain} ${styles[store.isTest ? 'test' : 'live']} ${className || ''}` }>
+      { store.netChain }
+    </div>
+  );
+}
+
+NetChain.propTypes = {
+  className: PropTypes.string
+};
+
+NetChain.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+const ObserverComponent = observer(NetChain);
+
+ObserverComponent.Store = Store;
+
+export default ObserverComponent;

js/packages/ui/NetChain/store.js

@@ -19,9 +19,7 @@ import { action, computed, observable } from 'mobx';
 import { isTestnet } from '@parity/shared/util/testnet';
 
 export default class Store {
-  @observable clientVersion = '';
   @observable netChain = '';
-  @observable netPeers = {};
   @observable netVersion = 1;
 
   constructor (api) {
@@ -38,39 +36,21 @@ export default class Store {
       if (!error) {
         this.setNetChain(netChain);
       }
+
+      this._api.net
+        .version()
+        .then(this.setNetVersion);
     });
-
-    this._api.pubsub.parity.netPeers((error, netPeers) => {
-      if (!error) {
-        this.setNetPeers(netPeers);
-      }
-    });
-
-    this._api.net
-      .version()
-      .then(this.setNetVersion);
-
-    this._api.web3
-      .clientVersion()
-      .then(this.setClientVersion);
   }
 
   @computed get isTest () {
     return isTestnet(this.netVersion);
   }
 
-  @action setClientVersion = (clientVersion) => {
-    this.clientVersion = clientVersion;
-  }
-
   @action setNetChain = (netChain) => {
     this.netChain = netChain;
   }
 
-  @action setNetPeers = (netPeers) => {
-    this.netPeers = netPeers;
-  }
-
   @action setNetVersion = (netVersion) => {
     this.netVersion = netVersion;
   }

js/packages/ui/NetPeers/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (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 './netPeers';

js/packages/ui/NetPeers/netPeers.css

@@ -15,8 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.blockNumber {
+.peers {
-}
+  display: inline-block;
-
-.syncStatus {
 }

js/packages/ui/NetPeers/netPeers.js

@@ -0,0 +1,54 @@
+// Copyright 2015-2017 Parity Technologies (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 from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import Store from './store';
+
+import styles from './netPeers.css';
+
+function NetPeers ({ className, message }, { api }) {
+  const store = Store.get(api);
+
+  if (!store.netPeers) {
+    return null;
+  }
+
+  const { max, connected } = store.netPeers;
+
+  return (
+    <div className={ [styles.peers, className].join(' ') }>
+      { connected ? connected.toFormat() : '0' }/{ max ? max.toFormat() : '0' }{ message }
+    </div>
+  );
+}
+
+NetPeers.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.node
+};
+
+NetPeers.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+const ObserverComponent = observer(NetPeers);
+
+ObserverComponent.Store = Store;
+
+export default ObserverComponent;

js/packages/ui/NetPeers/store.js

@@ -0,0 +1,52 @@
+// Copyright 2015-2017 Parity Technologies (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 { action, observable } from 'mobx';
+
+export default class Store {
+  @observable netPeers = {};
+
+  constructor (api) {
+    this._api = api;
+    this._api.on('connected', this.setupSubscriptions, this);
+
+    if (this._api.isConnected) {
+      this.setupSubscriptions();
+    }
+  }
+
+  setupSubscriptions = () => {
+    this._api.pubsub.parity.netPeers((error, netPeers) => {
+      if (!error) {
+        this.setNetPeers(netPeers);
+      }
+    });
+  }
+
+  @action setNetPeers = (netPeers) => {
+    this.netPeers = netPeers;
+  }
+
+  static instance = null;
+
+  static get (api) {
+    if (!Store.instance) {
+      Store.instance = new Store(api);
+    }
+
+    return Store.instance;
+  }
+}

js/packages/ui/StatusIndicator/statusIndicator.css

@@ -68,10 +68,12 @@
       height: .4em;
       border-right: 0;
     }
+
     &.needsAttention {
       height: .6em;
       border-right: 0;
     }
+
     &.ok {
       height: 1em;
     }
@@ -80,9 +82,11 @@
   &.bad > .bar.active {
     background-color: #c00;
   }
+
   &.ok > .bar.active {
     background-color: #080;
   }
+
   &.needsAttention > .bar.active {
     background-color: #dc0;
   }

js/packages/ui/StatusIndicator/statusIndicator.js

@@ -14,58 +14,86 @@
 // 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 } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
+import { observer } from 'mobx-react';
+
+import Store from './store';
 
 import styles from './statusIndicator.css';
 
 const statuses = ['bad', 'needsAttention', 'ok'];
 
-export default class StatusIndicator extends Component {
+function StatusIndicator ({ id, status, title = [], tooltipPlacement, type = 'signal' }, { api }) {
-  static propTypes = {
+  const store = Store.get(api);
-    type: PropTypes.oneOf(['radial', 'signal']),
+  const checkStatus = status || store.overall.status;
-    id: PropTypes.string.isRequired,
+  const message = title.length
-    status: PropTypes.oneOf(statuses).isRequired,
+    ? title
-    title: PropTypes.arrayOf(PropTypes.node),
+    : store.overall.message;
-    tooltipPlacement: PropTypes.oneOf(['left', 'top', 'bottom', 'right'])
-  };
 
-  static defaultProps = {
+  return (
-    type: 'signal',
+    <span className={ styles.status }>
-    title: []
+      <span
-  };
+        className={ `${styles[type]} ${styles[checkStatus]}` }
+        data-tip={ message.length }
+        data-for={ `status-${id}` }
+        data-place={ tooltipPlacement }
+        data-effect='solid'
+      >
+        {
+          type === 'signal'
+            ? statuses.map((signal) => {
+              const index = statuses.indexOf(checkStatus);
+              const isActive = statuses.indexOf(signal) <= index;
 
-  render () {
+              return (
-    const { id, status, title, type, tooltipPlacement } = this.props;
+                <span
-    const tooltip = title.find(x => !x.isEmpty) ? (
+                  key={ signal }
-      <ReactTooltip id={ `status-${id}` }>
+                  className={ `${styles.bar} ${styles[signal]} ${isActive ? styles.active : ''}` }
-        { title.map(x => (<div key={ x }>{ x }</div>)) }
+                />
-      </ReactTooltip>
+              );
-    ) : null;
+            })
-
+            : null
-    return (
+        }
-      <span className={ styles.status }>
-        <span className={ `${styles[type]} ${styles[status]}` }
-          data-tip={ title.length }
-          data-for={ `status-${id}` }
-          data-place={ tooltipPlacement }
-          data-effect='solid'
-        >
-          { type === 'signal' && statuses.map(this.renderBar) }
-        </span>
-        {tooltip}
       </span>
-    );
+      {
-  }
+        message.find((x) => !x.isEmpty)
-
+          ? (
-  renderBar = (signal) => {
+            <ReactTooltip id={ `status-${id}` }>
-    const idx = statuses.indexOf(this.props.status);
+              {
-    const isActive = statuses.indexOf(signal) <= idx;
+                message.map((x) => (
-    const activeClass = isActive ? styles.active : '';
+                  <div key={ x }>
-
+                    { x }
-    return (
+                  </div>)
-      <span key={ signal } className={ `${styles.bar} ${styles[signal]} ${activeClass}` } />
+                )
-    );
+              }
-  }
+            </ReactTooltip>
+          )
+          : null
+      }
+    </span>
+  );
 }
+
+StatusIndicator.propTypes = {
+  type: PropTypes.oneOf([
+    'radial', 'signal'
+  ]),
+  id: PropTypes.string.isRequired,
+  status: PropTypes.oneOf(statuses),
+  title: PropTypes.arrayOf(PropTypes.node),
+  tooltipPlacement: PropTypes.oneOf([
+    'left', 'top', 'bottom', 'right'
+  ])
+};
+
+StatusIndicator.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+const ObserverComponent = observer(StatusIndicator);
+
+ObserverComponent.Store = Store;
+
+export default ObserverComponent;

js/packages/ui/StatusIndicator/store.js

@@ -0,0 +1,106 @@
+// Copyright 2015-2017 Parity Technologies (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 { action, computed, observable } from 'mobx';
+
+const STATUS_OK = 'ok';
+const STATUS_WARN = 'needsAttention';
+const STATUS_BAD = 'bad';
+const EMPTY_OVERALL = { message: [], status: STATUS_BAD };
+
+export default class Store {
+  @observable _health = null;
+
+  constructor (api) {
+    this._api = api;
+
+    setInterval(this.fetchHealth, 2500);
+  }
+
+  @computed get health () {
+    return this._health
+      ? this._health
+      : {};
+  }
+
+  @computed get overall () {
+    return this._health
+      ? this._health.overall
+      : EMPTY_OVERALL;
+  }
+
+  fetchHealth = () => {
+    // Support Parity-Extension.
+    const uiUrl = this._api.transport.uiUrlWithProtocol || '';
+
+    return fetch(`${uiUrl}/api/health`)
+      .then((response) => {
+        if (!response.ok) {
+          return null;
+        }
+
+        return response.json();
+      })
+      .catch(() => {
+        return null;
+      })
+      .then(this.setHealth);
+  }
+
+  _overallStatus = (health) => {
+    const all = [health.peers, health.sync, health.time].filter(x => x);
+    const statuses = all.map(x => x.status);
+    const bad = statuses.find(x => x === STATUS_BAD);
+    const needsAttention = statuses.find(x => x === STATUS_WARN);
+    const message = all.map(x => x.message).filter(x => x);
+
+    if (all.length) {
+      return {
+        status: bad || needsAttention || STATUS_OK,
+        message
+      };
+    }
+
+    return {
+      status: STATUS_BAD,
+      message: ['Unable to fetch node health.']
+    };
+  }
+
+  @action setHealth = (health) => {
+    if (!health) {
+      this._health = null;
+      return;
+    }
+
+    health.peers = health.peers || {};
+    health.sync = health.sync || {};
+    health.time = health.time || {};
+    health.overall = this._overallStatus(health);
+
+    this._health = health;
+  }
+
+  static instance = null;
+
+  static get (api) {
+    if (!Store.instance) {
+      Store.instance = new Store(api);
+    }
+
+    return Store.instance;
+  }
+}

js/packages/ui/index.js

@@ -20,9 +20,11 @@ export AccountCard from './AccountCard';
 export Actionbar, { Export as ActionbarExport, Import as ActionbarImport, Search as ActionbarSearch, Sort as ActionbarSort } from './Actionbar';
 export Badge from './Badge';
 export Balance from './Balance';
-export BlockStatus from './BlockStatus';
+export BlockNumber from './BlockNumber';
+export BlockTimestamp from './BlockTimestamp';
 export Button from './Button';
 export Certifications from './Certifications';
+export ClientVersion from './ClientVersion';
 export ConfirmDialog from './ConfirmDialog';
 export Container, { Title as ContainerTitle } from './Container';
 export ContextProvider from './ContextProvider';
@@ -46,6 +48,8 @@ export Loading from './Loading';
 export MethodDecoding from './MethodDecoding';
 export { Busy as BusyStep, Completed as CompletedStep } from './Modal';
 export ModalBox from './ModalBox';
+export NetChain from './NetChain';
+export NetPeers from './NetPeers';
 export Page from './Page';
 export Popup from './Popup';
 export Portal from './Portal';

js/src/Application.orig/Status/status.js

@@ -1,155 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (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 } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { BlockStatus, StatusIndicator } from '@parity/ui';
-
-import styles from './status.css';
-
-class Status extends Component {
-  static propTypes = {
-    clientVersion: PropTypes.string,
-    isTest: PropTypes.bool,
-    netChain: PropTypes.string,
-    netPeers: PropTypes.object,
-    health: PropTypes.object,
-    upgradeStore: PropTypes.object.isRequired
-  }
-
-  render () {
-    const { clientVersion, isTest, netChain, netPeers, health } = this.props;
-
-    return (
-      <div className={ styles.status }>
-        <div className={ styles.version }>
-          { clientVersion }
-        </div>
-        <div className={ styles.upgrade }>
-          { this.renderConsensus() }
-          { this.renderUpgradeButton() }
-        </div>
-        <div className={ styles.netinfo }>
-          <div>
-            <StatusIndicator
-              type='signal'
-              id='application.status.health'
-              status={ health.overall.status }
-              title={ health.overall.message }
-            />
-          </div>
-          <span title={ `${netPeers.connected.toFormat()}/${netPeers.max.toFormat()} peers` }>
-            <BlockStatus />
-          </span>
-          <div className={ `${styles.network} ${styles[isTest ? 'test' : 'live']}` }>
-            { netChain }
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderConsensus () {
-    const { upgradeStore } = this.props;
-
-    if (!upgradeStore || !upgradeStore.consensusCapability) {
-      return null;
-    }
-
-    if (upgradeStore.consensusCapability === 'capable') {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.capable'
-            defaultMessage='Upgrade not required.'
-          />
-        </div>
-      );
-    }
-
-    if (upgradeStore.consensusCapability.capableUntil) {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.capableUntil'
-            defaultMessage='Upgrade required before #{blockNumber}'
-            values={ {
-              blockNumber: upgradeStore.consensusCapability.capableUntil
-            } }
-          />
-        </div>
-      );
-    }
-
-    if (upgradeStore.consensusCapability.incapableSince) {
-      return (
-        <div>
-          <FormattedMessage
-            id='application.status.consensus.incapableSince'
-            defaultMessage='Upgrade required since #{blockNumber}'
-            values={ {
-              blockNumber: upgradeStore.consensusCapability.incapableSince
-            } }
-          />
-        </div>
-      );
-    }
-
-    return;
-  }
-
-  renderUpgradeButton () {
-    const { upgradeStore } = this.props;
-
-    if (!upgradeStore.available) {
-      return null;
-    }
-
-    return (
-      <div>
-        <a
-          href='javascript:void(0)'
-          onClick={ upgradeStore.openModal }
-        >
-          <FormattedMessage
-            id='application.status.upgrade'
-            defaultMessage='Upgrade'
-          />
-        </a>
-      </div>
-    );
-  }
-}
-
-function mapStateToProps (state) {
-  const { clientVersion, health, netPeers, netChain, isTest } = state.nodeStatus;
-
-  return {
-    clientVersion,
-    health,
-    netPeers,
-    netChain,
-    isTest
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  null
-)(Status);

js/src/Application.orig/TabBar/tabBar.css

@@ -1,100 +0,0 @@
-/* Copyright 2015-2017 Parity Technologies (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/>.
-*/
-
-.toolbar {
-  background: none !important;
-  height: 72px !important;
-  position: relative;
-}
-
-.tabs {
-  width: 100%;
-  position: relative;
-  display: flex;
-
-  & > * {
-    flex: 1;
-  }
-}
-
-.tabLink {
-  display: flex;
-
-  > * {
-    flex: 1;
-  }
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.4) !important;
-  }
-
-  &.tabactive, &.tabactive:hover {
-    background: rgba(0, 0, 0, 0.25) !important;
-    border-radius: 4px 4px 0 0;
-
-    * {
-      color: white !important;
-    }
-  }
-}
-
-.tabLink,
-.settings,
-.first,
-.last {
-  background: rgba(0, 0, 0, 0.5) !important; /* rgba(0, 0, 0, 0.25) !important; */
-}
-
-.tabbarTooltip {
-  left: 3em;
-  top: 4em;
-}
-
-.label {
-  position: relative;
-}
-
-.labelBubble {
-  position: absolute;
-  top: -12px;
-  right: -12px;
-}
-
-.first,
-.last {
-  margin: 0;
-  padding: 36px 12px;
-  white-space: nowrap;
-}
-
-.indicatorTab {
-  font-size: 1.5rem;
-  flex: 0;
-}
-
-.indicator {
-  padding: 20px 12px 0;
-  opacity: 0.8;
-}
-
-.first {
-  margin-left: -24px;
-}
-
-.last {
-  margin-right: -24px;
-}

js/src/Application.orig/TabBar/tabBar.js

@@ -1,153 +0,0 @@
-// Copyright 2015-2017 Parity Technologies (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 } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router';
-import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
-import { isEqual } from 'lodash';
-
-import { Tooltip, StatusIndicator } from '@parity/ui';
-
-import Tab from './Tab';
-import styles from './tabBar.css';
-
-class TabBar extends Component {
-  static contextTypes = {
-    router: PropTypes.object.isRequired
-  };
-
-  static propTypes = {
-    pending: PropTypes.array,
-    health: PropTypes.object.isRequired,
-    views: PropTypes.array.isRequired
-  };
-
-  static defaultProps = {
-    pending: []
-  };
-
-  render () {
-    const { health } = this.props;
-
-    return (
-      <Toolbar className={ styles.toolbar }>
-        <ToolbarGroup className={ styles.first }>
-          <div />
-        </ToolbarGroup>
-        <div className={ styles.tabs }>
-          <Link
-            activeClassName={ styles.tabactive }
-            className={ `${styles.tabLink} ${styles.indicatorTab}` }
-            key='status'
-            to='/status'
-          >
-            <div className={ styles.indicator }>
-              <StatusIndicator
-                type='signal'
-                id='topbar.health'
-                status={ health.overall.status }
-                title={ health.overall.message }
-              />
-            </div>
-          </Link>
-          { this.renderTabItems() }
-          <Tooltip
-            className={ styles.tabbarTooltip }
-            text={
-              <FormattedMessage
-                id='tabBar.tooltip.overview'
-                defaultMessage='navigate between the different parts and views of the application, switching between an account view, token view and decentralized application view'
-              />
-            }
-          />
-        </div>
-        <ToolbarGroup className={ styles.last }>
-          <div />
-        </ToolbarGroup>
-      </Toolbar>
-    );
-  }
-
-  renderTabItems () {
-    const { views, pending } = this.props;
-
-    return views.map((view, index) => {
-      return (
-        <Link
-          activeClassName={ styles.tabactive }
-          className={ styles.tabLink }
-          key={ view.id }
-          to={ view.route }
-        >
-          <Tab
-            pendings={ pending.length }
-            view={ view }
-          />
-        </Link>
-      );
-    });
-  }
-}
-
-function mapStateToProps (initState) {
-  const { views } = initState.settings;
-
-  let filteredViewIds = Object
-    .keys(views)
-    .filter((id) => views[id].fixed || views[id].active);
-
-  let filteredViews = filteredViewIds.map((id) => ({
-    ...views[id],
-    id
-  }));
-
-  return (state) => {
-    const { availability = 'unknown' } = state.nodeStatus.nodeKind || {};
-    const { views } = state.settings;
-    const { health } = state.nodeStatus;
-
-    const viewIds = Object
-      .keys(views)
-      .filter((id) => {
-        const view = views[id];
-
-        const isEnabled = view.fixed || view.active;
-        const isAllowed = !view.onlyPersonal || availability === 'personal';
-
-        return isEnabled && isAllowed;
-      });
-
-    if (isEqual(viewIds, filteredViewIds)) {
-      return { views: filteredViews, health };
-    }
-
-    filteredViewIds = viewIds;
-    filteredViews = viewIds.map((id) => ({
-      ...views[id],
-      id
-    }));
-
-    return { views: filteredViews, health };
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  null
-)(TabBar);

js/src/ParityBar/parityBar.js

@@ -53,8 +53,7 @@ class ParityBar extends Component {
   static propTypes = {
     dapp: PropTypes.bool,
     externalLink: PropTypes.string,
-    pending: PropTypes.array,
+    pending: PropTypes.array
-    health: PropTypes.object
   };
 
   state = {
@@ -214,7 +213,7 @@ class ParityBar extends Component {
   }
 
   renderBar () {
-    const { dapp, health } = this.props;
+    const { dapp } = this.props;
 
     if (!dapp) {
       return null;
@@ -223,10 +222,7 @@ class ParityBar extends Component {
     return (
       <div className={ styles.cornercolor }>
         <StatusIndicator
-          type='signal'
           id='paritybar.health'
-          status={ health.overall.status }
-          title={ health.overall.message }
           tooltipPlacement='right'
         />
         <Button
@@ -710,11 +706,9 @@ class ParityBar extends Component {
 
 function mapStateToProps (state) {
   const { pending } = state.signer;
-  const { health } = state.nodeStatus;
 
   return {
-    pending,
+    pending
-    health
   };
 }
 

js/src/Status/status.css

@@ -17,8 +17,6 @@
 
 $backgroundColor: rgba(0, 0, 0, 0.8);
 $textColor: #ccc;
-$networkLiveColor: rgb(0, 136, 0);
-$networkTestColor: rgb(136, 0, 0);
 
 .status {
   align-items: center;
@@ -44,21 +42,6 @@ $networkTestColor: rgb(136, 0, 0);
   }
 }
 
-.network {
-  border-radius: 0.4em;
-  line-height: 1.2;
-  padding: 0.25em 0.5em;
-  text-transform: uppercase;
-
-  &.live {
-    background: $networkLiveColor;
-  }
-
-  &.test {
-    background: $networkTestColor;
-  }
-}
-
 .upgrade {
   div {
     display: inline-block;

js/src/Status/status.js

@@ -17,45 +17,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 
-import { BlockStatus, StatusIndicator } from '@parity/ui';
+import { BlockNumber, ClientVersion, NetChain, NetPeers, StatusIndicator } from '@parity/ui';
 
 import Consensus from './Consensus';
 import Upgrade from './Upgrade';
-import Store from './store';
 
 import styles from './status.css';
 
-function Status ({ health, upgradeStore }, { api }) {
+function Status ({ className = '', upgradeStore }, { api }) {
-  const store = Store.get(api);
-  const [ clientName, , versionString, , ] = (store.clientVersion || '').split('/');
-  const [ versionNumber, versionType, , versionDate ] = (versionString || '').split('-');
-  const { connected, max } = store.netPeers;
-
   return (
-    <div className={ styles.status }>
+    <div className={ [styles.status, className].join(' ') }>
-      <div className={ styles.version }>
+      <ClientVersion className={ styles.version } />
-        { clientName } { versionNumber }-{ versionDate } { versionType }
-      </div>
       <div className={ styles.upgrade }>
         <Consensus upgradeStore={ upgradeStore } />
         <Upgrade upgradeStore={ upgradeStore } />
       </div>
       <div className={ styles.netinfo }>
-        <StatusIndicator
+        <StatusIndicator id='application.status.health' />
-          type='signal'
+        <BlockNumber
-          id='application.status.health'
+          className={ styles.blockNumber }
-          status={ health.overall.status }
+          message={
-          title={ health.overall.message }
+            <FormattedMessage
+              id='ui.blockStatus.bestBlock'
+              defaultMessage=' best block'
+            />
+          }
         />
-        <BlockStatus />
+        <NetPeers
-        <div className={ styles.peers }>
+          className={ styles.peers }
-          { connected ? connected.toFormat() : '0' }/{ max ? max.toFormat() : '0' } peers
+          message={
-        </div>
+            <FormattedMessage
-        <div className={ `${styles.network} ${styles[store.isTest ? 'test' : 'live']}` }>
+              id='ui.netPeers.peers'
-          { store.netChain }
+              defaultMessage=' peers'
-        </div>
+            />
+          }
+        />
+        <NetChain />
       </div>
     </div>
   );
@@ -66,19 +65,8 @@ Status.contextTypes = {
 };
 
 Status.propTypes = {
-  health: PropTypes.object.isRequired,
+  className: PropTypes.string,
   upgradeStore: PropTypes.object.isRequired
 };
 
-function mapStateToProps (state) {
+export default observer(Status);
-  const { health } = state.nodeStatus;
-
-  return {
-    health
-  };
-}
-
-export default connect(
-  mapStateToProps,
-  null
-)(observer(Status));

js/webpack/app.js

@@ -242,7 +242,7 @@ module.exports = {
     }
 
     if (!isAnalize && !isProd) {
-      const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
+      // const DEST_I18N = path.join(__dirname, '..', DEST, 'i18n');
 
       plugins.push(
         // new ReactIntlAggregatePlugin({