NiceNode · jgresham · Apr 19, 2022 · Apr 18, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -263,6 +263,7 @@
     "react-json-view": "^1.21.3",
     "react-redux": "^7.2.8",
     "react-router-dom": "^6.2.2",
+    "react-tooltip": "^4.2.21",
     "styled-components": "^5.3.5",
     "winston": "^3.7.2",
     "winston-daily-rotate-file": "^4.6.1"

diff --git a/src/main/geth.ts b/src/main/geth.ts
@@ -130,16 +130,14 @@ export const startGeth = async () => {
 
   const gethDataPath = gethDataDir();
   const gethInput = [
-    '--ws',
-    '--ws.origins',
-    'https://ethvis.xyz,nice-node://',
-    '--ws.api',
-    'admin,engine,net,eth,web3',
+    // '--ws',
+    // '--ws.origins',
+    // 'nice-node://',
+    // '--ws.api',
+    // 'admin,engine,net,eth,web3',
     '--http',
     '--http.corsdomain',
     'nice-node://',
-    '--identity',
-    'NiceNode-0.2.0-1',
     // '--syncmode',
     // 'light',
     '--datadir',

diff --git a/src/main/monitor.ts b/src/main/monitor.ts
@@ -16,8 +16,13 @@ export const getNodeUsage = async () => {
   if (typeof nodePid !== 'number') {
     return undefined;
   }
-  const gethUsage = await getProcessUsageByPid(nodePid);
-  return gethUsage;
+  try {
+    const gethUsage = await getProcessUsageByPid(nodePid);
+    return gethUsage;
+  } catch (err) {
+    console.error(err);
+    return undefined;
+  }
 };
 
 export const getMainProcessUsage = async () => {

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import * as Sentry from '@sentry/electron/renderer';
+import ReactTooltip from 'react-tooltip';
 
 import { CHANNELS } from './messages';
 import electron from './electronGlobal';
@@ -9,6 +10,8 @@ import './App.css';
 import Header from './Header';
 import Footer from './Footer/Footer';
 import Warnings from './Warnings';
+import { useGetExecutionNodeInfoQuery } from './state/services';
+import { detectExecutionClient } from './utils';
 
 Sentry.init({
   dsn: electron.SENTRY_DSN,
@@ -19,8 +22,13 @@ Sentry.init({
 
 const MainScreen = () => {
   const [sStatus, setStatus] = useState('loading...');
+  const [sNodeInfo, setNodeInfo] = useState(undefined);
   const [sIsOpenOnLogin, setIsOpenOnLogin] = useState<boolean>(false);
 
+  const qNodeInfo = useGetExecutionNodeInfoQuery(null, {
+    pollingInterval: 15000,
+  });
+
   const refreshGethStatus = async () => {
     const status = await electron.getGethStatus();
     setStatus(status);
@@ -39,6 +47,14 @@ const MainScreen = () => {
     refreshGethStatus();
   }, []);
 
+  useEffect(() => {
+    if (typeof qNodeInfo?.data === 'string') {
+      setNodeInfo(qNodeInfo.data);
+    } else {
+      setNodeInfo(undefined);
+    }
+  }, [qNodeInfo]);
+
   // Wait for message that says Geth is ready to start
 
   const onClickStartGeth = async () => {
@@ -81,6 +97,21 @@ const MainScreen = () => {
         <div>
           <h2>An Ethereum Node</h2>
           <h3>Status: {sStatus}</h3>
+          {sStatus === 'running' && (
+            <>
+              <h4 data-tip data-for="nodeInfo">
+                {detectExecutionClient(sNodeInfo, true)}
+              </h4>
+              <ReactTooltip
+                place="bottom"
+                type="light"
+                effect="solid"
+                id="nodeInfo"
+              >
+                <span style={{ fontSize: 16 }}>{sNodeInfo}</span>
+              </ReactTooltip>
+            </>
+          )}
         </div>
         <div className="Hello">
           <button
@@ -91,7 +122,11 @@ const MainScreen = () => {
             <span>Start</span>
           </button>
           &nbsp;
-          <button type="button" onClick={onClickStopGeth}>
+          <button
+            type="button"
+            onClick={onClickStopGeth}
+            disabled={sStatus === 'stopped'}
+          >
             <span>Stop</span>
           </button>
         </div>

diff --git a/src/renderer/Footer/Footer.tsx b/src/renderer/Footer/Footer.tsx
@@ -9,11 +9,14 @@ import electron from '../electronGlobal';
 import MenuDrawer from './MenuDrawer';
 import { useAppSelector } from '../state/hooks';
 import { selectNumFreeDiskGB, selectNumGethDiskUsedGB } from '../state/node';
+import { useGetExecutionNodeInfoQuery } from '../state/services';
 
 const Footer = () => {
   const sGethDiskUsed = useAppSelector(selectNumGethDiskUsedGB);
   const sFreeDisk = useAppSelector(selectNumFreeDiskGB);
-
+  const qNodeInfo = useGetExecutionNodeInfoQuery(null, {
+    pollingInterval: 60000,
+  });
   const [sSelectedMenuDrawer, setSelectedMenuDrawer] = useState<string>();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [sLogs, setLogs] = useState<any>();
@@ -196,6 +199,10 @@ const Footer = () => {
         isSelected={sSelectedMenuDrawer === 'settings'}
         onClickCloseButton={() => setSelectedMenuDrawer(undefined)}
       >
+        <h2>Node</h2>
+        {qNodeInfo?.currentData && !qNodeInfo?.isError && (
+          <h3>Running: {qNodeInfo.currentData}</h3>
+        )}
         <h2>Storage</h2>
         <div>
           <h3>Delete node data</h3>

diff --git a/src/renderer/Header.tsx b/src/renderer/Header.tsx
@@ -4,8 +4,10 @@ import { HiUserGroup } from 'react-icons/hi';
 import { FaSync } from 'react-icons/fa';
 import { MdSignalWifiStatusbarConnectedNoInternet } from 'react-icons/md';
 import { FiHardDrive } from 'react-icons/fi';
+import { SiHiveBlockchain } from 'react-icons/si';
 import {
   useGetExecutionIsSyncingQuery,
+  useGetExecutionLatestBlockQuery,
   useGetExecutionPeersQuery,
 } from './state/services';
 import { useGetNetworkConnectedQuery } from './state/network';
@@ -18,6 +20,7 @@ const Header = () => {
   const [sIsSyncing, setIsSyncing] = useState<boolean>();
   const [sSyncPercent, setSyncPercent] = useState<string>('');
   const [sPeers, setPeers] = useState<number>();
+  const [sLatestBlockNumber, setLatestBlockNumber] = useState<number>();
   const qExeuctionIsSyncing = useGetExecutionIsSyncingQuery(null, {
     pollingInterval: 15000,
   });
@@ -28,27 +31,34 @@ const Header = () => {
     // Only polls network connection if there are exactly 0 peers
     pollingInterval: typeof sPeers === 'number' && sPeers === 0 ? 30000 : 0,
   });
+  const qLatestBlock = useGetExecutionLatestBlockQuery(null, {
+    // Only polls network connection if there are exactly 0 peers
+    pollingInterval: 15000,
+  });
 
   useEffect(() => {
     // console.log('qExeuctionIsSyncing: ', qExeuctionIsSyncing);
     if (qExeuctionIsSyncing.isError) {
       setSyncPercent('');
-      setIsSyncing(false);
+      setIsSyncing(undefined);
       return;
     }
     const syncingData = qExeuctionIsSyncing.data;
     if (typeof syncingData === 'object') {
       const syncRatio = syncingData.currentBlock / syncingData.highestBlock;
       setSyncPercent((syncRatio * 100).toFixed(1));
       setIsSyncing(true);
-    } else {
+    } else if (syncingData === false) {
+      // light client geth, it is done syncing if data is false
       setSyncPercent('');
       setIsSyncing(false);
+    } else {
+      setSyncPercent('');
+      setIsSyncing(undefined);
     }
   }, [qExeuctionIsSyncing]);
 
   useEffect(() => {
-    // console.log('qExecutionPeers: ', qExecutionPeers);
     if (qExecutionPeers.isError) {
       setPeers(undefined);
       return;
@@ -60,6 +70,22 @@ const Header = () => {
     }
   }, [qExecutionPeers]);
 
+  useEffect(() => {
+    if (qLatestBlock.isError) {
+      setLatestBlockNumber(undefined);
+      return;
+    }
+    if (
+      qLatestBlock?.data?.number &&
+      typeof qLatestBlock.data.number === 'string'
+    ) {
+      const latestBlockNum = hexToDecimal(qLatestBlock.data.number);
+      setLatestBlockNumber(latestBlockNum);
+    } else {
+      setLatestBlockNumber(undefined);
+    }
+  }, [qLatestBlock]);
+
   return (
     <div
       style={{
@@ -83,12 +109,26 @@ const Header = () => {
           fontSize: '1.1rem',
         }}
       >
+        {typeof sLatestBlockNumber === 'number' && sLatestBlockNumber > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <SiHiveBlockchain />
+            <span style={{ marginLeft: 5, marginRight: 10 }}>
+              {sLatestBlockNumber}
+            </span>
+          </div>
+        )}
         {sGethDiskUsed && (
           <div
             style={{
               display: 'flex',
               flexDirection: 'row',
-              alignContent: 'center',
+              alignItems: 'center',
             }}
           >
             <FiHardDrive />
@@ -102,7 +142,7 @@ const Header = () => {
             style={{
               display: 'flex',
               flexDirection: 'row',
-              alignContent: 'center',
+              alignItems: 'center',
             }}
           >
             <MdSignalWifiStatusbarConnectedNoInternet />
@@ -111,24 +151,25 @@ const Header = () => {
             </span>
           </div>
         )}
+        {/* {sIsSyncing !== false && ( */}
         <div
           style={{
             display: 'flex',
             flexDirection: 'row',
-            alignContent: 'center',
+            alignItems: 'center',
           }}
         >
           <FaSync className={sIsSyncing ? 'spin' : ''} />
           <span style={{ marginLeft: 5, marginRight: 10 }}>
             {sSyncPercent}% synced
           </span>
         </div>
-
+        {/* )} */}
         <div
           style={{
             display: 'flex',
             flexDirection: 'row',
-            alignContent: 'center',
+            alignItems: 'center',
           }}
         >
           <HiUserGroup />