Add a page that shows the network's version infos

package.json

@@ -159,6 +159,8 @@
     "@types/logfmt": "^1.2.2",
     "@types/node": "16.11.6",
     "@types/react": "^16.14.0",
+    "@types/react-bootstrap-table-next": "^4.0.17",
+    "@types/react-bootstrap-table2-paginator": "^2.1.2",
     "@types/react-dom": "^17.0.10",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-router": "^5.1.17",
@@ -241,12 +243,15 @@
     "randomart": "^0.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
+    "react-bootstrap-table-next": "^4.0.3",
+    "react-bootstrap-table2-paginator": "^2.1.2",
     "react-dom": "^17.0.2",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "regenerator-runtime": "^0.13.9",
     "sqlite": "^4.0.23",
+    "styled-components": "^5.3.3",
     "underscore": "^1.13.1",
     "uuid": "^8.3.2",
     "winston": "^3.3.3"
@@ -278,4 +283,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

src/main/main.ts

@@ -17,6 +17,8 @@ import {
   updateAccountName,
 } from './accounts';
 import fetchAnchorIdl from './anchor';
+import fetchValidatorNetworkInfo from './validatorNetworkInfo';
+
 import {
   subscribeProgramChanges,
   unsubscribeProgramChanges,
@@ -79,6 +81,9 @@ ipcMain.on(
         case 'config':
           res = await wbConfig(msg);
           break;
+        case 'get-validator-network-info':
+          res = await fetchValidatorNetworkInfo(msg);
+          break;
         default:
       }
       let loggedRes = res;

src/main/preload.js

@@ -27,6 +27,9 @@ contextBridge.exposeInMainWorld('electron', {
     fetchAnchorIDL(msg) {
       send('fetch-anchor-idl', msg);
     },
+    fetchValidatorNetworkInfo(msg) {
+      send('get-validator-network-info', msg);
+    },
     updateAccountName(msg) {
       send('update-account-name', msg);
     },

src/main/validatorNetworkInfo.ts

@@ -0,0 +1,34 @@
+
+import * as sol from '@solana/web3.js';
+import { netToURL } from '../common/strings';
+import { NodeInfo, ValidatorNetworkInfoRequest, ValidatorNetworkInfoResponse } from '../types/types';
+
+const fetchValidatorNetworkInfo = async (msg: ValidatorNetworkInfoRequest) => {
+  const url = netToURL(msg.net);
+  const solConn = new sol.Connection(url);
+  const contactInfo = await solConn.getClusterNodes();
+  const nodeVersion = await solConn.getVersion();
+
+  const nodeInfos: NodeInfo[] = contactInfo.map(
+    (info: sol.ContactInfo) => {
+      const newInfo: NodeInfo = {
+        pubkey: info.pubkey,
+        version: info.version,
+        rpc: info.rpc,
+        gossip: info.gossip,
+        // featureSet: info.featureSet,
+        // shredVersion: info.shredVersion,
+      };
+
+      return newInfo;
+    });
+
+  let response: ValidatorNetworkInfoResponse = {
+    nodes: nodeInfos,
+    version: nodeVersion['solana-core'],
+  }
+
+  return response;
+};
+
+export default fetchValidatorNetworkInfo;

src/renderer/App.tsx

@@ -17,6 +17,7 @@ import {
   faAnchor,
   faNetworkWired,
   faCircle,
+  faInfo,
 } from '@fortawesome/free-solid-svg-icons';
 import { useEffect, useState } from 'react';
 import useInterval from 'common/hooks';
@@ -29,6 +30,7 @@ import Accounts from './nav/Accounts';
 import Anchor from './nav/Anchor';
 import Validator from './nav/Validator';
 import { Button, Form } from 'react-bootstrap';
+import ValidatorNetworkInfo from './nav/ValidatorNetworkInfo';
 
 declare global {
   interface Window {
@@ -95,6 +97,21 @@ const Nav = () => {
           </div>
         </NavLink>
       </OverlayTrigger>
+      <OverlayTrigger
+        placement="right"
+        delay={{ show: 250, hide: 0 }}
+        overlay={renderTooltip('version', 'Version')}
+      >
+        <NavLink
+          className="nav-link nav-icon"
+          activeClassName="selected-nav-icon"
+          to="/validatornetworkinfo"
+        >
+          <div style={{ cursor: 'pointer' }}>
+            <FontAwesomeIcon size="2x" icon={faInfo} />
+          </div>
+        </NavLink>
+      </OverlayTrigger>
     </div>
   );
 };
@@ -105,6 +122,7 @@ const Header = () => {
     '/': 'Accounts',
     '/validator': 'Validator',
     '/anchor': 'Anchor',
+    '/validatornetworkinfo': 'ValidatorNetworkInfo'
   };
   return <strong>{routes[location.pathname]}</strong>;
 };
@@ -144,6 +162,8 @@ export default function App() {
             })
           );
           break;
+        case 'get-validator-network-info':
+          break;
         default:
       }
     };
@@ -290,6 +310,9 @@ export default function App() {
             <Route path="/anchor">
               <Anchor />
             </Route>
+            <Route path="/validatornetworkinfo">
+              <ValidatorNetworkInfo />
+            </Route>
           </div>
         </div>
       </div>

src/renderer/nav/ValidatorNetworkInfo.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from 'renderer/slices/mainSlice';
+import { ValidatorNetworkInfoResponse } from '../../types/types';
+
+import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
+import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+const ValidatorNetworkInfo = () => {
+  const validator = useSelector((state: RootState) => state.validator);
+
+  const columns = [
+    {
+      text: 'Pub Key',
+      dataField: 'pubkey',
+    },
+    {
+      text: 'Version',
+      dataField: 'version',
+    },
+  ];
+
+  const [data, setData] = useState<ValidatorNetworkInfoResponse>({
+    version: "unknown",
+    nodes: []
+  });
+
+  useEffect(() => {
+    const { net } = validator;
+    window.electron.ipcRenderer.fetchValidatorNetworkInfo({
+      net: net,
+    });
+  }, [validator]);
+
+  useEffect(() => {
+    const listener = (resp: any) => {
+      const { method, res } = resp;
+
+      switch (method) {
+        case 'get-validator-network-info':
+          console.log('ValidatorNetworkInfo', { res });
+          if (res) {
+            setData(res);
+          }
+          break;
+        default:
+      }
+    };
+    window.electron.ipcRenderer.on('main', listener);
+    return () => {
+      window.electron.ipcRenderer.removeListener('main', listener);
+    };
+  }, []);
+
+
+  // TODO: maybe show te version spread as a histogram and feature info ala
+  // solana --url mainnet-beta feature status
+  return (
+    <div className="col">
+      <div className="row">
+        <span className='column'>Current Network: {validator.net}</span>
+        <span className='column'>Current Version: {data.version}</span>
+      </div>
+      <div className="row">
+        <BootstrapTable keyField='id'
+          data={data.nodes}
+          columns={columns}
+          pagination={paginationFactory({
+            paginationSize: 25,
+          })}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ValidatorNetworkInfo;

src/types/types.tsx

@@ -79,6 +79,11 @@ export type ImportAccountRequest = {
   pubKey: string;
 };
 
+export type ValidatorNetworkInfoRequest = {
+  net: Net;
+};
+
+
 export type ImportAccountResponse = {
   net: Net;
 };
@@ -195,3 +200,19 @@ export interface ConfigState {
   loading: boolean;
   values: ConfigMap;
 }
+
+
+export type ValidatorNetworkInfoResponse = {
+  version: string;
+  nodes: NodeInfo[];
+};
+// https://docs.solana.com/developing/clients/jsonrpc-api#getclusternodes
+export type NodeInfo = {
+  pubkey: string; // - Node public key, as base-58 encoded string
+  gossip: string | null; // - Gossip network address for the node
+  tpu?: string | null; // - TPU network address for the node
+  rpc?: string | null; // - JSON RPC network address for the node, or null if the JSON RPC service is not enabled
+  version?: string | null; // - The software version of the node, or null if the version information is not available
+  featureSet?: number | null; // - The unique identifier of the node's feature set
+  shredVersion?: number | null; // - The shred version the node has been configured to use
+};