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/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

@@ -0,0 +1,110 @@
+// 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 { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+
+import Store from './store';
+
+import styles from './blockNumber.css';
+
+function BlockNumber ({ className, message }, { api }) {
+  const store = Store.get(api);
+
+  if (!store.blockNumber) {
+    return null;
+  }
+
+  if (!store.syncing) {
+    return (
+      <div className={ [styles.blockNumber, className].join(' ') }>
+        { store.blockNumber.toFormat() }{ message }
+      </div>
+    );
+  }
+
+  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: store.syncing.warpChunksProcessed.mul(100).div(store.syncing.warpChunksAmount).toFormat(2)
+          } }
+        />
+      </div>
+    );
+  }
+
+  let syncStatus = null;
+  let warpStatus = null;
+
+  if (store.syncing.currentBlock && store.syncing.highestBlock) {
+    syncStatus = (
+      <span>
+        <FormattedMessage
+          id='ui.blockStatus.syncStatus'
+          defaultMessage='{currentBlock}/{highestBlock} syncing'
+          values={ {
+            currentBlock: store.syncing.currentBlock.toFormat(),
+            highestBlock: store.syncing.highestBlock.toFormat()
+          } }
+        />
+      </span>
+    );
+  }
+
+  if (store.syncing.blockGap) {
+    const [first, last] = store.syncing.blockGap;
+
+    warpStatus = (
+      <span>
+        <FormattedMessage
+          id='ui.blockStatus.warpStatus'
+          defaultMessage=', {percentage}% historic'
+          values={ {
+            percentage: first.mul(100).div(last).toFormat(2)
+          } }
+        />
+      </span>
+    );
+  }
+
+  return (
+    <div className={ styles.syncStatus }>
+      { syncStatus }
+      { warpStatus }
+    </div>
+  );
+}
+
+BlockNumber.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.node
+};
+
+BlockNumber.contextTypes = {
+  api: PropTypes.object.isRequired
+};
+
+const ObserverComponent = observer(BlockNumber);
+
+ObserverComponent.Store = Store;
+
+export default ObserverComponent;

js/packages/ui/BlockNumber/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 './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;
+  }
+}