Beacon Node Version

src/renderer/containers/BeaconNode/BeaconNode.scss

@@ -4,6 +4,10 @@
   }
 }
 
+.beacon-version {
+  margin-top: 5px;
+}
+
 .beacon-node-charts-container {
   display: flex;
   flex-wrap: nowrap;

src/renderer/containers/BeaconNode/dashboard/BeaconNodeDashboard.tsx

@@ -13,7 +13,9 @@ interface IBeaconNodeProps {
     beacon: Beacon;
 }
 
-export const BeaconNodeDashboard: React.FC<IBeaconNodeProps> = ({beacon: {url, network, slot, status, docker}}) => {
+export const BeaconNodeDashboard: React.FC<IBeaconNodeProps> = ({
+    beacon: {url, network, slot, status, version, docker},
+}) => {
     const [avgLatency, setAvgLatency] = useState<SimpleLineChartRecord[]>([]);
     const [avgLatencyTicks, setAvgLatencyTicks] = useState<string[]>([]);
     const [pieData, setPieData] = useState<ResponseErrorPieData>([
@@ -49,7 +51,7 @@ export const BeaconNodeDashboard: React.FC<IBeaconNodeProps> = ({beacon: {url, n
             </div>
 
             <div className='row space-between'>
-                <h2>{capitalize(network)}</h2>
+                <h3>{version}</h3>
                 <div className='row slot-container'>
                     <h3>slot</h3>
                     <h2>
@@ -72,6 +74,10 @@ export const BeaconNodeDashboard: React.FC<IBeaconNodeProps> = ({beacon: {url, n
                             />
                         </>
                     ) : null}
+                    <div className='row slot-container'>
+                        <h3 style={{marginLeft: "10px"}}>on</h3>
+                        <h2>{capitalize(network)}</h2>
+                    </div>
                 </div>
             </div>
 

src/renderer/ducks/beacon/actions.ts

@@ -5,7 +5,7 @@ import {StartBeaconChain} from "../network/types";
 import {DockerPort} from "../../services/docker/type";
 import {IConfigureBNSubmitOptions} from "../../components/ConfigureBeaconNode/ConfigureBeaconNode";
 
-export const {addBeacons, addBeacon, removeBeacon, updateSlot, updateStatus} = beaconSlice.actions;
+export const {addBeacons, addBeacon, removeBeacon, updateSlot, updateStatus, updateVersion} = beaconSlice.actions;
 
 export const startLocalBeacon = createAction<ActionWithCallback<IConfigureBNSubmitOptions>>(
     "beacon/startLocalBeacon",

src/renderer/ducks/beacon/sagas.ts

@@ -23,7 +23,16 @@ import {
     checkDockerDemonIsOnline,
     setDockerDemonIsOffline,
 } from "../network/actions";
-import {startLocalBeacon, removeBeacon, addBeacon, addBeacons, updateSlot, updateStatus, updateEpoch} from "./actions";
+import {
+    startLocalBeacon,
+    removeBeacon,
+    addBeacon,
+    addBeacons,
+    updateSlot,
+    updateStatus,
+    updateEpoch,
+    updateVersion,
+} from "./actions";
 import {BeaconChain} from "../../services/docker/chain";
 import {SupportedNetworks} from "../../services/eth2/supportedNetworks";
 import database from "../../services/db/api/database";
@@ -47,7 +56,12 @@ import {ValidatorStatus} from "../../constants/validatorStatus";
 import {cgLogger, createLogger, getBeaconLogfileFromURL, mainLogger} from "../../../main/logger";
 import {setInitialBeacons} from "../settings/actions";
 import {DockerRegistry} from "../../services/docker/docker-registry";
-import {CgEth2ApiClient, getBeaconNodeEth2ApiClient, readBeaconChainNetwork} from "../../services/eth2/client/module";
+import {
+    CgEth2ApiClient,
+    getBeaconNodeEth2ApiClient,
+    getBeaconNodeVersion,
+    readBeaconChainNetwork,
+} from "../../services/eth2/client/module";
 import {getClientParams} from "../../services/docker/getClientParams";
 
 export function* pullDockerImage(
@@ -175,7 +189,7 @@ function* initializeBeaconsFromStore(): Generator<
     | AllEffect<INetworkConfig>
     | TakeEffect,
     void,
-    Beacons & ({syncing: boolean; slot: number} | null)[] & boolean & INetworkConfig[]
+    Beacons & ({syncing: boolean; slot: number} | null)[] & boolean & INetworkConfig[] & string[]
 > {
     const store = yield database.beacons.get();
     if (store !== null) {
@@ -200,6 +214,7 @@ function* initializeBeaconsFromStore(): Generator<
 
         const stats = yield all(beacons.map(({url}) => call(getBeaconStatus, url)));
         const networks = yield all(beacons.map(({url}) => call(readBeaconChainNetwork, url)));
+        const versions = yield all(beacons.map(({url}) => call(getBeaconNodeVersion, url)));
 
         yield all(beacons.map(({url}) => spawn(watchOnHead, url)));
 
@@ -210,6 +225,7 @@ function* initializeBeaconsFromStore(): Generator<
                     network: networks[index]?.networkName || "Unknown",
                     docker: docker.id !== "" ? docker : undefined,
                     slot: stats[index]?.slot || 0,
+                    version: versions[index],
                     status:
                         stats[index] !== null
                             ? stats[index].syncing
@@ -259,6 +275,11 @@ export function* watchOnHead(
         isStarting = false;
     }, 30 * 1000);
 
+    if (!beacon.version) {
+        const version = ((yield call(getBeaconNodeVersion, beacon.url)) as unknown) as string;
+        yield put(updateVersion(version, beacon.url));
+    }
+
     cgLogger.info("Watching beacon on URL", url);
     const beaconLogger = createLogger(url, getBeaconLogfileFromURL(url));
     while (true) {

src/renderer/ducks/beacon/slice.ts

@@ -12,6 +12,7 @@ export type Beacon = {
     url: string;
     status: BeaconStatus;
     network: string;
+    version?: string;
     slot: number;
     docker?: DockerConfig;
 };
@@ -71,6 +72,15 @@ export const beaconSlice = createSlice({
                 meta: url,
             }),
         },
+        updateVersion: {
+            reducer: (state, action: PayloadAction<string, string, string>): void => {
+                state.beacons[action.meta].version = action.payload;
+            },
+            prepare: (version: string, url: string): {payload: string; meta: string} => ({
+                payload: version,
+                meta: url,
+            }),
+        },
         removeBeacon: (state, action: PayloadAction<string>): void => {
             delete state.beacons[action.payload];
             const index = state.keys.findIndex((key) => key === action.payload);

src/renderer/services/eth2/client/utils.ts

@@ -28,9 +28,13 @@ export async function readBeaconChainNetwork(url: string, throwOnEmpty = false):
     }
 }
 
-export async function getBeaconNodeEth2ApiClient(beaconNodeUrl: string): Promise<typeof CgEth2ApiClient> {
+export async function getBeaconNodeVersion(beaconNodeUrl: string): Promise<string> {
     const response = await new HttpClient(beaconNodeUrl).get<{data: {version: string}}>(`/eth/v1/node/version`);
-    const version = response.data.version.toLowerCase();
+    return response.data.version;
+}
+
+export async function getBeaconNodeEth2ApiClient(beaconNodeUrl: string): Promise<typeof CgEth2ApiClient> {
+    const version = (await getBeaconNodeVersion(beaconNodeUrl)).toLowerCase();
 
     switch (true) {
         case version.includes("nimbus"):