Update support for Hoodi testnet + bump rocketpool v1.17.3 + UI improvements

build/api/src/AppConfig.ts

@@ -6,6 +6,7 @@ interface Config {
   brainUIUrl: string;
   w3sUrl: string;
   rpExplorerUrl: string;
+  beaconchaInUrl: string;
   explorerUrl: string;
   package: string;
 }
@@ -25,6 +26,7 @@ class AppConfig {
       brainUIUrl: `http://brain.web3signer${w3sSuffix}.dappnode`,
       w3sUrl: `http://web3signer.web3signer${w3sSuffix}.dappnode:9000`,
       rpExplorerUrl: `https://${networkPrefix}rocketscan.io`,
+      beaconchaInUrl: `https://${networkPrefix}beaconcha.in`,
       explorerUrl: `https://${networkPrefix}etherscan.io`,
       package: isMainnet ? `rocketpool.public.dappnode` : `rocketpool-testnet.public.dappnode`,
     };

build/restart-vc.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-echo "Restarting validator... mocked!"
+# echo "Restarting validator... mocked!"

build/rocketpool-start.sh

@@ -34,6 +34,11 @@ case $NETWORK in
         _EXECUTION_LAYER_WS="ws://besu.public.dappnode:8546"
         _EXECUTION_NODE_CLIENT="besu"
         ;;
+    "reth.dnp.dappnode.eth")
+        _EXECUTION_LAYER_HTTP="http://reth.dappnode:8545"
+        _EXECUTION_LAYER_WS="ws://reth.dappnode:8546"
+        _EXECUTION_NODE_CLIENT="reth"
+        ;;
     "erigon.dnp.dappnode.eth")
         _EXECUTION_LAYER_HTTP="http://erigon.dappnode:8545"
         _EXECUTION_LAYER_WS="ws://erigon.dappnode:8545"
@@ -79,7 +84,7 @@ case $NETWORK in
     esac
 
     ;;
-"hoodi")
+"testnet")
     echo "Hoodi network"
 
     # https://github.com/dappnode/DAppNodePackage-SSV-Shifu/blob/775dfbc2190b8c3bc7384a2e4c62d83892071001/build/entrypoint.sh#L3
@@ -100,6 +105,11 @@ case $NETWORK in
         _EXECUTION_LAYER_WS="ws://hoodi-besu.dappnode:8546"
         _EXECUTION_NODE_CLIENT="besu"
         ;;
+    "hoodi-reth.dnp.dappnode.eth")
+        _EXECUTION_LAYER_HTTP="http://hoodi-reth.dappnode:8545"
+        _EXECUTION_LAYER_WS="ws://hoodi-reth.dappnode:8546"
+        _EXECUTION_NODE_CLIENT="reth"
+        ;;
     "hoodi-erigon.dnp.dappnode.eth")
         _EXECUTION_LAYER_HTTP="http://hoodi-erigon.dappnode:8545"
         _EXECUTION_LAYER_WS="ws://hoodi-erigon.dappnode:8545"
@@ -169,9 +179,6 @@ export BEACON_NODE_CLIENT=$_BEACON_NODE_CLIENT
 # BEACON_NODE_API_3500="http://beacon-chain.prysm-hoodi.dappnode:3500"
 # BEACON_NODE_API_4000="http://beacon-chain.prysm-hoodi.dappnode:4000"
 
-if [ "$NETWORK" == "hoodi" ]; then
-    NETWORK="testnet"
-fi
 NETWORK="${NETWORK}" \
 EXECUTION_NODE_CLIENT="${EXECUTION_NODE_CLIENT}" \
 BEACON_NODE_CLIENT="${BEACON_NODE_CLIENT}" \
@@ -191,11 +198,6 @@ if [ -f "/rocketpool/data/wallet" ]; then
 fi
 if [ ! -f /rocketpool/data/password ]; then
     echo "${INFO} set-password"
-    if [ ! -f /.rocketpool/data/password ]; then
-        mkdir -p /.rocketpool/data
-        echo "${WALLET_PASSWORD}" > /.rocketpool/data/password
-        echo "${WALLET_PASSWORD}" > /rocketpool/data/password
-    fi
     /usr/local/bin/rocketpoold --settings /app/rocketpool/user-settings.yml api wallet set-password "${WALLET_PASSWORD}"
 fi
 echo "${INFO} Initializing Rocketpool service"

build/supervisord.conf

@@ -5,6 +5,16 @@ logfile=/var/log/supervisor/supervisord.log
 pidfile=/var/run/supervisord.pid
 childlogdir=/var/log/supervisor
 
+[unix_http_server]
+file=/var/run/supervisor.sock
+chmod=0700
+
+[supervisorctl]
+serverurl=unix:///var/run/supervisor.sock
+
+[rpcinterface:supervisor]
+supervisor.rpcinterface_factory = supervisor.rpcinterface:make_main_rpcinterface
+
 [program:rocketpool]
 command=/bin/sh -c "/usr/local/bin/rocketpool-start.sh"
 autorestart=true

build/ui/package.json

@@ -16,6 +16,7 @@
     "@types/node": "^16.18.14",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@uiw/react-json-view": "^2.0.0-alpha.38",
     "axios": "^1.3.4",
     "bignumber.js": "^9.1.1",
     "react": "^18.2.0",

build/ui/src/App.css

@@ -2,11 +2,15 @@
   text-align: center;
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
+  width: 100%;
+  overflow-x: hidden;
 }
 
 .App-logo {
   height: 40vmin;
   pointer-events: none;
+  max-height: 200px;
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -18,9 +22,33 @@
 .App-header {
   display: flex;
   flex-direction: column;
-  height: 100vh;
-  font-size: calc(10px + 2vmin);
+  min-height: 100vh;
+  font-size: calc(10px + 1vmin);
   color: black;
+  width: 100%;
+}
+
+/* Mobile-first responsive design */
+@media (max-width: 768px) {
+  .App-header {
+    font-size: calc(8px + 1.5vmin);
+  }
+
+  .App-logo {
+    height: 30vmin;
+    max-height: 120px;
+  }
+}
+
+@media (max-width: 480px) {
+  .App-header {
+    font-size: calc(6px + 1.2vmin);
+  }
+
+  .App-logo {
+    height: 25vmin;
+    max-height: 100px;
+  }
 }
 
 .App-link {
@@ -63,6 +91,41 @@
   padding: 20px;
 }
 
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .menu {
+    padding: 10px;
+    margin-bottom: 16px;
+  }
+
+  .menu-item {
+    padding: 8px;
+    font-size: 1rem;
+  }
+
+  .detail {
+    font-size: 18px;
+    padding: 15px;
+  }
+}
+
+@media (max-width: 480px) {
+  .menu {
+    padding: 8px;
+    margin-bottom: 12px;
+  }
+
+  .menu-item {
+    padding: 6px;
+    font-size: 0.9rem;
+  }
+
+  .detail {
+    font-size: 16px;
+    padding: 10px;
+  }
+}
+
 .error-message {
   font-size: 0.875rem;
   color: red;

build/ui/src/Dashboard.tsx

@@ -77,36 +77,22 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
   };
 
   const styles = {
-    container: {
-      minHeight: "100vh",
+    loadingOverlay: {
+      position: "fixed" as const,
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: "rgba(0, 0, 0, 0.55)",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
+      zIndex: 9999,
     },
   };
 
   return (
     <div className="App">
-      {isLoading && (
-        <>
-          <div style={styles.container}>
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <CircularProgress sx={{ marginBottom: "1rem" }} />
-              {!rocketpoolValue?.walletStatus && (
-                <Typography variant="body1">
-                  Loading on-chain Rocket Pool data...
-                </Typography>
-              )}
-            </div>
-          </div>
-        </>
-      )}
       {rocketpoolValue?.walletStatus && (
         <>
           {rocketpoolValue.walletStatus.walletInitialized &&
@@ -115,10 +101,11 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
             )}
           <Box
             sx={{
-              margin: 8,
+              margin: { xs: 1, sm: 2, md: 4, lg: 8 },
               display: "flex",
               flexDirection: "column",
               alignItems: "left",
+              padding: { xs: 1, sm: 2 },
             }}
           >
             {!clientsSynced && activeTab !== "Info" ? (
@@ -129,9 +116,12 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
             ) : (
               <Card
                 sx={{
-                  padding: 4,
+                  padding: { xs: 2, sm: 3, md: 4 },
                   borderRadius: 2,
                   boxShadow: 4,
+                  width: "100%",
+                  maxWidth: "100%",
+                  overflow: "hidden",
                 }}
               >
                 <div className="content">
@@ -152,6 +142,24 @@ function Dashboard({ activeTab }: { activeTab: string }): JSX.Element {
           )}
         </>
       )}
+      {isLoading && (
+        <div style={styles.loadingOverlay}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <CircularProgress sx={{ marginBottom: "1rem" }} />
+            {!rocketpoolValue?.walletStatus && (
+              <Typography variant="body1" color="white">
+                Loading on-chain Rocket Pool data...
+              </Typography>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }