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