Add finalized block info (#104)

packages/frontend/src/App.tsx

@@ -31,6 +31,8 @@ export default class App extends React.Component<{}, State> {
         blocknumber: true,
         blockhash: true,
         blocktime: true,
+        finalized: false,
+        finalizedhash: false,
         blockpropagation: true,
         blocklasttime: false
       },
@@ -48,6 +50,7 @@ export default class App extends React.Component<{}, State> {
     this.state = {
       status: 'offline',
       best: 0 as Types.BlockNumber,
+      finalized: 0 as Types.BlockNumber,
       blockTimestamp: 0 as Types.Timestamp,
       blockAverage: null,
       timeDiff: 0 as Types.Milliseconds,

packages/frontend/src/Connection.ts

@@ -110,6 +110,14 @@ export class Connection {
           break;
         }
 
+        case Actions.BestFinalized: {
+          const [finalized /*, hash */] = message.payload;
+
+          this.state = this.update({ finalized });
+
+          break;
+        }
+
         case Actions.AddedNode: {
           const [id, nodeDetails, nodeStats, nodeHardware, blockDetails, location] = message.payload;
           const pinned = this.pins.has(nodeDetails[0]);
@@ -144,6 +152,14 @@ export class Connection {
           break;
         }
 
+        case Actions.FinalizedBlock: {
+          const [id, height, hash] = message.payload;
+
+          nodes.mut(id, (node) => node.updateFinalized(height, hash));
+
+          break;
+        }
+
         case Actions.NodeStats: {
           const [id, nodeStats] = message.payload;
 

packages/frontend/src/components/Chain/Chain.tsx

@@ -7,6 +7,7 @@ import { Tile, Ago, List, Map, Settings } from '../';
 import { PersistentObject, PersistentSet } from '../../persist';
 
 import blockIcon from '../../icons/package.svg';
+import finalizedIcon from '../../icons/milestone.svg';
 import blockTimeIcon from '../../icons/history.svg';
 import lastTimeIcon from '../../icons/watch.svg';
 import listIcon from '../../icons/list-alt-regular.svg';
@@ -51,13 +52,14 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
 
   public render() {
     const { appState } = this.props;
-    const { best, blockTimestamp, blockAverage } = appState;
+    const { best, finalized, blockTimestamp, blockAverage } = appState;
     const { display: currentTab } = this.state;
 
     return (
       <div className="Chain">
         <div className="Chain-header">
           <Tile icon={blockIcon} title="Best Block">#{formatNumber(best)}</Tile>
+          <Tile icon={finalizedIcon} title="Finalized Block">#{formatNumber(finalized)}</Tile>
           <Tile icon={blockTimeIcon} title="Average Time">{ blockAverage == null ? '-' : secondsWithPrecision(blockAverage / 1000) }</Tile>
           <Tile icon={lastTimeIcon} title="Last Block"><Ago when={blockTimestamp} /></Tile>
           <div className="Chain-tabs">

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

@@ -14,6 +14,7 @@ import nodeTypeIcon from '../../icons/terminal.svg';
 import peersIcon from '../../icons/broadcast.svg';
 import transactionsIcon from '../../icons/inbox.svg';
 import blockIcon from '../../icons/package.svg';
+import finalizedIcon from '../../icons/milestone.svg';
 import blockHashIcon from '../../icons/file-binary.svg';
 import blockTimeIcon from '../../icons/history.svg';
 import propagationTimeIcon from '../../icons/dashboard.svg';
@@ -233,6 +234,20 @@ export class Row extends React.Component<Row.Props, Row.State> {
       setting: 'blockhash',
       render: ({ hash }) => <Truncate position="right" text={hash} copy={true} />
     },
+    {
+      label: 'Finalized Block',
+      icon: finalizedIcon,
+      width: 88,
+      setting: 'finalized',
+      render: ({ finalized }) => `#${formatNumber(finalized)}`
+    },
+    {
+      label: 'Finalized Block Hash',
+      icon: blockHashIcon,
+      width: 154,
+      setting: 'finalizedhash',
+      render: ({ finalizedHash }) => <Truncate position="right" text={finalizedHash} copy={true} />
+    },
     {
       label: 'Block Time',
       icon: blockTimeIcon,

packages/frontend/src/components/List/Truncate.tsx

@@ -13,6 +13,10 @@ export class Truncate extends React.Component<Truncate.Props, {}> {
   public render() {
     const { text, position, copy } = this.props;
 
+    if (!text) {
+      return '-';
+    }
+
     return (
       <Tooltip text={text} position={position} copy={copy} className="Row-Tooltip">
         <div className="Row-truncate">{text}</div>

packages/frontend/src/state.ts

@@ -39,6 +39,9 @@ export class Node {
   public blockTimestamp: Types.Timestamp;
   public propagationTime: Maybe<Types.PropagationTime>;
 
+  public finalized = 0 as Types.BlockNumber;
+  public finalizedHash = '' as Types.BlockHash;
+
   public lat: Maybe<Types.Latitude>;
   public lon: Maybe<Types.Longitude>;
   public city: Maybe<Types.City>;
@@ -106,6 +109,11 @@ export class Node {
     this.trigger();
   }
 
+  public updateFinalized(height: Types.BlockNumber, hash: Types.BlockHash) {
+    this.finalized = height;
+    this.finalizedHash = hash;
+  }
+
   public updateLocation(location: Types.NodeLocation) {
     const [lat, lon, city] = location;
 
@@ -158,6 +166,8 @@ export namespace State {
     download: boolean;
     blocknumber: boolean;
     blockhash: boolean;
+    finalized: boolean;
+    finalizedhash: boolean;
     blocktime: boolean;
     blockpropagation: boolean;
     blocklasttime: boolean;
@@ -167,6 +177,7 @@ export namespace State {
 export interface State {
   status: 'online' | 'offline' | 'upgrade-requested';
   best: Types.BlockNumber;
+  finalized: Types.BlockNumber;
   blockTimestamp: Types.Timestamp;
   blockAverage: Maybe<Types.Milliseconds>;
   timeDiff: Types.Milliseconds;