Use enode RPC in UI (#3108)

* add enode rpc

* spaces -> tabs

* Added Enode to JSAPI // Use it to display in Status (#3106)

* Added enode to JSON RPC Interfaces #3108

js/src/api/rpc/ethcore/ethcore.js

@@ -58,6 +58,11 @@ export default class Ethcore {
       .execute('ethcore_dropNonReservedPeers');
   }
 
+  enode () {
+    return this._transport
+      .execute('ethcore_enode');
+  }
+
   extraData () {
     return this._transport
       .execute('ethcore_extraData');

js/src/jsonrpc/interfaces/ethcore.js

@@ -85,6 +85,15 @@ export default {
     }
   },
 
+  enode: {
+    desc: 'Returns the node enode URI',
+    params: [],
+    returns: {
+      type: String,
+      desc: 'Enode URI'
+    }
+  },
+
   extraData: {
     desc: 'Returns currently set extra data',
     params: [],

js/src/redux/providers/status.js

@@ -29,6 +29,20 @@ export default class Status {
     this._pollPing();
     this._pollStatus();
     this._pollLogs();
+    this._fetchEnode();
+  }
+
+  _fetchEnode () {
+    this._api
+      .ethcore.enode()
+      .then((enode) => {
+        this._store.dispatch(statusCollection({ enode }));
+      })
+      .catch(() => {
+        window.setTimeout(() => {
+          this._fetchEnode();
+        }, 1000);
+      });
   }
 
   _subscribeBlockNumber () {
@@ -68,11 +82,17 @@ export default class Status {
 
   _pollStatus = () => {
     const { secureToken, isConnected, isConnecting, needsToken } = this._api;
+
     const nextTimeout = (timeout = 1000) => {
       setTimeout(this._pollStatus, timeout);
     };
 
+    if (isConnected !== this._store.getState().nodeStatus.isConnected) {
+      this._fetchEnode();
+    }
+
     this._store.dispatch(statusCollection({ isConnected, isConnecting, needsToken, secureToken }));
+
     if (!isConnected) {
       nextTimeout(250);
       return;

js/src/redux/providers/statusReducer.js

@@ -25,6 +25,7 @@ const initialState = {
   clientVersion: '',
   coinbase: '',
   defaultExtraData: '',
+  enode: '',
   extraData: '',
   gasFloorTarget: new BigNumber(0),
   hashrate: new BigNumber(0),

js/src/views/Application/Status/status.css

@@ -15,16 +15,24 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .status {
-  clear: both;
   padding: 1.5em;
   text-align: right;
   color: #ddd;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 }
 
 .title {
   margin: 0 0.5em 0 2em;
 }
 
+.enode {
+  width: 45em;
+  word-wrap: break-word;
+  margin: 0.5em 0 0.25em;
+}
+
 .block {
 }
 

js/src/views/Application/Status/status.js

@@ -26,6 +26,7 @@ class Status extends Component {
   static propTypes = {
     blockNumber: PropTypes.object.isRequired,
     clientVersion: PropTypes.string,
+    enode: PropTypes.string,
     netPeers: PropTypes.object,
     netChain: PropTypes.string,
     isTest: PropTypes.bool
@@ -44,6 +45,7 @@ class Status extends Component {
         <div className={ styles.version }>
           { clientVersion }
         </div>
+        { this.renderEnode() }
         <div className={ styles.netinfo }>
           <div>
             <BlockStatus />
@@ -58,14 +60,29 @@ class Status extends Component {
       </div>
     );
   }
+
+  renderEnode () {
+    const { enode } = this.props;
+
+    if (!enode) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.enode }>
+        { enode }
+      </div>
+    );
+  }
 }
 
 function mapStateToProps (state) {
-  const { blockNumber, clientVersion, netPeers, netChain, isTest } = state.nodeStatus;
+  const { blockNumber, clientVersion, enode, netPeers, netChain, isTest } = state.nodeStatus;
 
   return {
     blockNumber,
     clientVersion,
+    enode,
     netPeers,
     netChain,
     isTest