Add finalized block info (#104)

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>