Add network state to UI (#128)

packages/frontend/src/App.tsx

@@ -35,7 +35,8 @@ export default class App extends React.Component<{}, State> {
         finalized: false,
         finalizedhash: false,
         blockpropagation: true,
-        blocklasttime: false
+        blocklasttime: false,
+        networkstate: false,
       },
       (settings) => this.setState({ settings })
     );

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Identicon from 'polkadot-identicon';
 import { Types, Maybe, timestamp } from '@dotstats/common';
-import { formatNumber, milliOrSecond, secondsWithPrecision } from '../../utils';
+import { formatNumber, getHashData, milliOrSecond, secondsWithPrecision } from '../../utils';
 import { State as AppState, Node } from '../../state';
 import { PersistentSet } from '../../persist';
 import { Truncate } from './';
@@ -281,6 +281,17 @@ export class Row extends React.Component<Row.Props, Row.State> {
       setting: 'blocklasttime',
       render: ({ blockTimestamp }) => <Ago when={blockTimestamp} />
     },
+    {
+      label: 'NetworkState',
+      icon: networkIdIcon,
+      width: 100,
+      setting: 'networkstate',
+      render: ({ id }) => {
+        const chainLabel = getHashData().chain;
+        const uri = encodeURI(`/network_state/${chainLabel}/${id}/`);
+        return React.createElement('a', {href: uri, target: "_blank"}, "Network state");
+      },
+    },
   ];
 
   public static Header = (props: HeaderProps) => {

packages/frontend/src/state.ts

@@ -174,6 +174,7 @@ export namespace State {
     blocktime: boolean;
     blockpropagation: boolean;
     blocklasttime: boolean;
+    networkstate: boolean;
   }
 }