Show validator address for nodes (#37)

Show validator address for nodes

packages/frontend/src/components/Chain.tsx

@@ -141,7 +141,10 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
         <Node.Row.Header />
         <tbody>
         {
-          this.nodes().sort(sortNodes).map((node) => <Node.Row key={node.id} {...node} />)
+          this
+            .nodes()
+            .sort(sortNodes)
+            .map((node) => <Node.Row key={node.id} {...node} />)
         }
         </tbody>
       </table>
@@ -160,17 +163,17 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     const left = Math.round(((180 + lon) / 360) * map.width + map.left);
     const top = Math.round(((90 - lat) / 180) * map.height + map.top) * MAP_HEIGHT_ADJUST;
 
-    let quarter = 0;
+    let quarter: Node.Location.Quarter = 0;
 
     if (lon > 0) {
-      quarter |= 1;
+      quarter = (quarter | 1) as Node.Location.Quarter;
     }
 
     if (lat < 0) {
-      quarter |= 2;
+      quarter = (quarter | 2) as Node.Location.Quarter;
     }
 
-    return { left, top, quarter: quarter as 0 | 1 | 2 | 3 };
+    return { left, top, quarter };
   }
 
   private calculateMapDimensions: () => void = () => {

packages/frontend/src/components/Node/Location.css

@@ -45,8 +45,6 @@
 .Node-Location-details {
   min-width: 335px;
   position: absolute;
-  /*left: 16px;
-  top: -4px;*/
   font-family: monospace, sans-serif;
   background: #222;
   color: #fff;
@@ -108,3 +106,12 @@
     border-color: rgba(255,255,255,0);
   }
 }
+
+.Node-Location-validator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  transform: scale(1.5);
+  transform-origin: right 50%;
+  margin-left: 16px;
+}

packages/frontend/src/components/Node/Location.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import Identicon from 'polkadot-identicon';
 import { Types } from '@dotstats/common';
 import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../../utils';
 import { Ago, Icon } from '../';
 import { State as AppState } from '../../state';
 
 import nodeIcon from '../../icons/server.svg';
+import nodeValidatorIcon from '../../icons/shield.svg';
 import nodeTypeIcon from '../../icons/terminal.svg';
 import nodeLocationIcon from '../../icons/location.svg';
 import blockIcon from '../../icons/package.svg';
@@ -16,10 +18,12 @@ import lastTimeIcon from '../../icons/watch.svg';
 import './Location.css';
 
 namespace Location {
+  export type Quarter = 0 | 1 | 2 | 3;
+
   export interface Position {
     left: number;
     top: number;
-    quarter: 0 | 1 | 2 | 3;
+    quarter: Quarter;
   }
 
   export interface State {
@@ -58,15 +62,30 @@ class Location extends React.Component<AppState.Node & Location.Position, Locati
   }
 
   private renderDetails(location: Types.NodeLocation) {
-    const [name, implementation, version] = this.props.nodeDetails;
+    const [name, implementation, version, validator] = this.props.nodeDetails;
     const [height, hash, blockTime, blockTimestamp, propagationTime] = this.props.blockDetails;
 
+    let validatorRow = null;
+
+    if (validator) {
+      validatorRow = (
+        <tr>
+          <td><Icon src={nodeValidatorIcon} alt="Node" /></td>
+          <td colSpan={5}>
+            {trimHash(validator, 30)}
+            <span className="Node-Location-validator"><Identicon id={validator} size={16} /></span>
+          </td>
+        </tr>
+      );
+    }
+
     return (
       <table className="Node-Location-details Node-Location-details">
         <tbody>
           <tr>
             <td><Icon src={nodeIcon} alt="Node" /></td><td colSpan={5}>{name}</td>
           </tr>
+          {validatorRow}
           <tr>
             <td><Icon src={nodeTypeIcon} alt="Implementation" /></td><td colSpan={5}>{implementation} v{version}</td>
           </tr>

packages/frontend/src/components/Node/Row.css

@@ -5,3 +5,14 @@
 .Node-Row-synced {
   color: #fff;
 }
+
+.Node-Row-validator {
+  display: block;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.Node-Row-validator:hover {
+  transform: scale(2);
+}

packages/frontend/src/components/Node/Row.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import Identicon from 'polkadot-identicon';
 import { formatNumber, trimHash, milliOrSecond, secondsWithPrecision } from '../../utils';
 import { State as AppState } from '../../state';
 import { SEMVER_PATTERN } from './';
 import { Ago, Icon } from '../';
 
 import nodeIcon from '../../icons/server.svg';
+import nodeValidatorIcon from '../../icons/shield.svg';
 import nodeTypeIcon from '../../icons/terminal.svg';
 import peersIcon from '../../icons/broadcast.svg';
 import transactionsIcon from '../../icons/inbox.svg';
@@ -22,6 +24,7 @@ export default class Row extends React.Component<AppState.Node, {}> {
       <thead>
         <tr>
           <th><Icon src={nodeIcon} alt="Node" /></th>
+          <th style={{ width: 26 }}><Icon src={nodeValidatorIcon} alt="Validator" /></th>
           <th style={{ width: 240 }}><Icon src={nodeTypeIcon} alt="Implementation" /></th>
           <th style={{ width: 26 }}><Icon src={peersIcon} alt="Peer Count" /></th>
           <th style={{ width: 26 }}><Icon src={transactionsIcon} alt="Transactions in Queue" /></th>
@@ -38,7 +41,7 @@ export default class Row extends React.Component<AppState.Node, {}> {
   public render() {
     const { nodeDetails, blockDetails, nodeStats } = this.props;
 
-    const [name, implementation, version] = nodeDetails;
+    const [name, implementation, version, validator] = nodeDetails;
     const [height, hash, blockTime, blockTimestamp, propagationTime] = blockDetails;
     const [peers, txcount] = nodeStats;
     const [semver] = version.match(SEMVER_PATTERN) || [version];
@@ -52,6 +55,7 @@ export default class Row extends React.Component<AppState.Node, {}> {
     return (
       <tr className={className}>
         <td>{name}</td>
+        <td>{validator ? <span className="Node-Row-validator" title={validator}><Identicon id={validator} size={16} /></span> : null}</td>
         <td><span title={`${implementation} v${version}`}>{implementation} v{semver}</span></td>
         <td>{peers}</td>
         <td>{txcount}</td>