Fix data refresh, variable shadowing, and timer leak in staking dashboard

packages/admin-ui/package.json

@@ -64,7 +64,8 @@
     "@types/react-dom": "^18.3.0",
     "nodemon": "^3.1.4",
     "prettier": "^1.16.4",
-    "ts-node": "^10.9.2"
+    "ts-node": "^10.9.2",
+    "vite-plugin-svgr": "^4.5.0"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.18.0"

packages/admin-ui/src/__mock-backend__/index.ts

@@ -56,6 +56,44 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
       progress: 0.83027522935
     }
   ],
+  nodeStatusGetByNetwork: async () => ({
+    mainnet: {
+      ec: {
+        name: "Nethermind",
+        dnp: "nethermind.dnp.dappnode.eth",
+        isSynced: true,
+        currentBlock: 23648945,
+        progress: 100,
+        peers: 50
+      },
+      cc: {
+        name: "Nimbus",
+        dnp: "nimbus.dnp.dappnode.eth",
+        isSynced: true,
+        currentBlock: 12875373,
+        progress: 100,
+        peers: 40
+      }
+    },
+    hoodi: {
+      ec: {
+        name: "besu",
+        dnp: "besu-hoodi.dnp.dappnode.eth",
+        isSynced: true,
+        currentBlock: 1480848,
+        progress: 100,
+        peers: 30
+      },
+      cc: {
+        name: "Prysm",
+        dnp: "prysm-hoodi.dnp.dappnode.eth",
+        isSynced: false,
+        currentBlock: 1592925,
+        progress: 100,
+        peers: 20
+      }
+    }
+  }),
   changeIpfsTimeout: async () => {},
   cleanCache: async () => {},
   cleanDb: async () => {},
@@ -411,6 +449,12 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
       gnosis: "prysm-gnosis.dnp.dappnode.eth"
     };
   },
+  executionClientsGetByNetworks: async () => {
+    return {
+      mainnet: "geth.dnp.dappnode.eth",
+      gnosis: "nethermind-xdai.dnp.dappnode.eth"
+    };
+  },
   premiumBeaconBackupActivate: async () => {},
   premiumBeaconBackupDeactivate: async () => {},
   premiumBeaconBackupStatus: async (): Promise<Record<string, BeaconBackupNetworkStatus>> => {
@@ -433,6 +477,43 @@ export const otherCalls: Omit<Routes, keyof typeof namedSpacedCalls> = {
     mainnet: { validators: ["0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"] },
     hoodi: { validators: [] },
     gnosis: null
+  }),
+
+  validatorsDataByNetwork: async () => ({
+    mainnet: {
+      active: { validators: ["0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"] },
+      attesting: { validators: ["0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef"] },
+      balances: {
+        balances: {
+          "0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef": "32000000000"
+        }
+      }
+    },
+    hoodi: {
+      active: { validators: [] },
+      attesting: { validators: [] },
+      balances: { balances: {} }
+    },
+    gnosis: {
+      active: null,
+      attesting: null,
+      balances: null
+    }
+  }),
+
+  signerByNetworkGet: async () => ({
+    mainnet: {
+      isInstalled: true,
+      brainRunning: true
+    },
+    hoodi: {
+      isInstalled: true,
+      brainRunning: false
+    },
+    gnosis: {
+      isInstalled: false,
+      brainRunning: false
+    }
   })
 };
 

packages/admin-ui/src/components/Loading.tsx

@@ -2,17 +2,17 @@ import React, { useState, useEffect } from "react";
 import logoAnimated from "img/dappNodeAnimation.gif";
 import "./loading.scss";
 
-export default function Loading({ steps }: { steps: string[] }) {
+export default function Loading({ steps, small }: { steps?: string[]; small?: boolean }) {
   const [index, setIndex] = useState(0);
   useEffect(() => {
     const interval = setInterval(() => setIndex((i) => i + 1), 3000);
     return () => clearInterval(interval);
   }, []);
 
   return (
-    <div className="loading-view">
+    <div className={`loading-view ${small && "small"}`}>
       <img src={logoAnimated} alt="Loading icon" />
-      <p className="steps">{steps[index] || steps[steps.length - 1]}...</p>
+      {steps && <p className="steps">{steps[index] || steps[steps.length - 1]}...</p>}
     </div>
   );
 }

packages/admin-ui/src/components/loading.scss

@@ -12,4 +12,13 @@
   p {
     opacity: 0.6;
   }
+
+  &.small {
+    margin: 1rem 0px;
+    img {
+      width: 50px;
+      height: 50px;
+      margin: 0px;
+    }
+  }
 }

packages/admin-ui/src/components/sidebar/navbarItems.ts

@@ -20,6 +20,7 @@ import { FaRegBell } from "react-icons/fa";
 import { SiEthereum } from "react-icons/si";
 // URLs
 import { relativePath as dashboardRelativePath } from "pages/dashboard";
+import { relativePath as dashboardv2RelativePath } from "pages/dashboard_v2";
 import { relativePath as devicesRelativePath } from "pages/vpn";
 import { relativePath as installerRelativePath } from "pages/installer";
 import { relativePath as packagesRelativePath } from "pages/packages";
@@ -70,6 +71,12 @@ export const sidenavItems: {
     icon: MdDashboard,
     show: true
   },
+  {
+    name: "DASHBOARD v2",
+    href: dashboardv2RelativePath,
+    icon: MdDashboard,
+    show: true
+  },
   {
     name: "WI-FI",
     href: wifiRelativePath,