Status lights and block heights for L1

- Show status light for bitcoin, enforcer, bitwindow
- Show current block height of bitcoin, enforcer
- Import enfocer grpc proto files

Author: CryptAxe

package-lock.json

@@ -15,6 +15,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@grpc/grpc-js": "^1.12.5",
+    "@grpc/proto-loader": "^0.7.13",
     "@reduxjs/toolkit": "^2.2.6",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -88,12 +90,19 @@
       "buildResources": "public"
     },
     "linux": {
-      "target": ["deb", "tar.gz"],
+      "target": [
+        "deb",
+        "tar.gz"
+      ],
       "category": "Development",
       "maintainer": "Drivechain <support@drivechain.info>",
-      "asarUnpack": ["**/chrome-sandbox"],
+      "asarUnpack": [
+        "**/chrome-sandbox"
+      ],
       "executableName": "drivechain-launcher",
-      "executableArgs": ["--no-sandbox"],
+      "executableArgs": [
+        "--no-sandbox"
+      ],
       "artifactName": "Drivechain-Launcher-${version}-${arch}.${ext}"
     },
     "win": {
@@ -104,20 +113,23 @@
       "target": [
         {
           "target": "dmg",
-          "arch": ["x64", "arm64"]
+          "arch": [
+            "x64",
+            "arm64"
+          ]
         }
       ],
       "category": "public.app-category.developer-tools",
       "artifactName": "Drivechain-Launcher-${version}-${arch}.${ext}"
     }
   },
   "devDependencies": {
-    "electron": "^28.1.0",
-    "electron-builder": "^24.9.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-modules-commonjs": "^7.26.3",
     "@babel/preset-env": "^7.26.0",
     "babel-jest": "^29.7.0",
+    "electron": "^28.1.0",
+    "electron-builder": "^24.9.1",
     "prettier": "^3.3.3"
   }
 }

package.json

@@ -207,6 +207,15 @@ function setupIPCHandlers() {
     }
   });
 
+  ipcMain.handle("get-chain-block-count", async (event, chainId) => {
+    try {
+      return await chainManager.getChainBlockCount(chainId);
+    } catch (error) {
+      console.error("Failed to get chain block count:", error);
+      return 0;
+    }
+  });
+
   ipcMain.handle("reset-chain", async (event, chainId) => {
     try {
       return await chainManager.resetChain(chainId);

public/electron.js

@@ -4,6 +4,7 @@ const path = require("path");
 const { spawn } = require("child_process");
 const BitcoinMonitor = require("./bitcoinMonitor");
 const BitWindowClient = require("./bitWindowClient");
+const EnforcerClient = require("./enforcerClient");
 
 class ChainManager {
   constructor(mainWindow, config) {
@@ -16,6 +17,7 @@ class ChainManager {
     this.bitWindowClient = new BitWindowClient();
     this.logProcesses = new Map(); // Track log streaming processes
     this.processCheckers = new Map(); // Track process check intervals
+    this.enforcerClient = new EnforcerClient(); // Connect to enfocer gRPC
   }
 
   async isChainReady(chainId) {
@@ -643,6 +645,29 @@ class ChainManager {
     const basePath = path.join(downloadsDir, extractDir);
     return path.join(basePath, path.dirname(binaryPath));
   }
+
+  async getChainBlockCount(chainId) {
+    const status = this.chainStatuses.get(chainId);
+    if (status !== 'running') return -1;
+
+    if (chainId === 'bitcoin') {
+      try {
+        return await this.bitcoinMonitor.makeRpcCall('getblockcount', [], true);
+      } catch (error) {
+        return -1;
+      }
+    }
+    else
+    if (chainId == "enforcer") {
+      try {
+        return await this.enforcerClient.getBlockCount();
+      } catch (error) {
+        return -1;
+      }
+    }
+
+    return -1;
+  }
 }
 
 module.exports = ChainManager;

public/modules/chainManager.js

@@ -0,0 +1,44 @@
+const grpc = require('@grpc/grpc-js');
+const protoLoader = require('@grpc/proto-loader');
+const path = require('path');
+
+class EnforcerClient {
+  constructor() {
+    // Load the proto file
+    const protoPath = path.join(__dirname, '../..', 'src/data/proto/cusf/mainchain/v1/validator.proto');
+    const packageDefinition = protoLoader.loadSync(protoPath, {
+      keepCase: true,
+      longs: String,
+      enums: String,
+      defaults: true,
+      oneofs: true,
+      includeDirs: [path.join(__dirname, '../..', 'src/data/proto')]
+    });
+
+    // Load the ValidatorService package
+    const proto = grpc.loadPackageDefinition(packageDefinition);
+    const validatorService = proto.cusf.mainchain.v1.ValidatorService;
+
+    // Create the client
+    this.client = new validatorService(
+      'localhost:50051', // Default gRPC port, adjust if needed
+      grpc.credentials.createInsecure()
+    );
+  }
+
+  async getBlockCount() {
+    return new Promise((resolve, reject) => {
+      this.client.getChainTip({}, (error, response) => {
+        if (error) {
+          reject(error);
+          return;
+        }
+        
+        // Response contains BlockHeaderInfo with height field
+        resolve(response.block_header_info.height);
+      });
+    });
+  }
+}
+
+module.exports = EnforcerClient;

public/modules/enforcerClient.js

@@ -0,0 +1,27 @@
+syntax = "proto3";
+package cusf.mainchain.v1;
+
+message GetChainTipRequest {}
+
+message Hash {
+  string hex = 1;
+}
+
+message Work {
+  string hex = 1;
+}
+
+message BlockHeaderInfo {
+  Hash blockHash = 1;
+  Hash prevBlockHash = 2;
+  uint64 height = 3;
+  Work work = 4;
+}
+
+message GetChainTipResponse {
+  BlockHeaderInfo blockHeaderInfo = 1;
+}
+
+service ValidatorService {
+  rpc GetChainTip(GetChainTipRequest) returns (GetChainTipResponse);
+}

public/modules/validator.proto

@@ -12,6 +12,7 @@ contextBridge.exposeInMainWorld("electronAPI", {
   getConfig: () => ipcRenderer.invoke("get-config"),
   downloadChain: (chainId) => ipcRenderer.invoke("download-chain", chainId),
   startChain: (chainId, args) => ipcRenderer.invoke("start-chain", chainId, args),
+  getChainBlockCount: (chainId) => ipcRenderer.invoke("get-chain-block-count", chainId),
   getMnemonicPath: (chainId) => ipcRenderer.invoke("get-mnemonic-path", chainId),
   stopChain: (chainId) => ipcRenderer.invoke("stop-chain", chainId),
   getChainStatus: (chainId) => ipcRenderer.invoke("get-chain-status", chainId),

public/preload.js

@@ -4,6 +4,7 @@ import ChainSettingsModal from './ChainSettingsModal';
 import ForceStopModal from './ForceStopModal';
 import SettingsIcon from './SettingsIcon';
 import Tooltip from './Tooltip';
+import './StatusLight.css'; 
 
 const Card = ({
   chain,
@@ -23,8 +24,62 @@ const Card = ({
   const [lastActionTime, setLastActionTime] = useState(0);
   const [tooltipVisible, setTooltipVisible] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [processHealth, setProcessHealth] = useState('offline'); // 'healthy', 'warning', 'error', 'offline'
+  const [blockCount, setBlockCount] = useState(-1);
   const buttonRef = useRef(null);
 
+  // Periodic chain status / health check
+  useEffect(() => {
+    const fetchBlockCount = async () => {
+      console.log("chain name: ", chain)
+      try {
+        const count = await window.electronAPI.getChainBlockCount(chain.id);
+        console.log("new count: ", count)
+        setBlockCount(count);
+      } catch (error) {
+        setBlockCount(-1)
+        console.error('Failed to fetch block count:', error);
+      }
+    };
+
+    const interval = setInterval(() => {
+      // Check on the health and status of chains
+      if (chain.id === "bitwindow") {
+        // BitWindow does not return a block count, so just check if it is running
+        if (chain.status === 'stopping' || chain.status === 'stopped') {
+          setProcessHealth('offline');
+        }
+        else
+        if (chain.status === 'running') {
+          setProcessHealth('healthy');
+        }
+        else {
+          setProcessHealth('warning');
+        }
+      } else {
+        // Other chains can tell us their current block height
+        fetchBlockCount();
+        if (chain.status === 'stopping' || chain.status === 'stopped') {
+          setProcessHealth('offline');
+        } 
+        else 
+        if (blockCount === -1) {
+          setProcessHealth('offline');
+        }
+        else 
+        if (blockCount === 0) {
+          setProcessHealth('warning');
+        }
+        else
+        if (blockCount > 0) {
+          setProcessHealth('healthy');
+        }
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [chain.id, chain.status, blockCount]);
+
   const checkDependencies = () => {
     if (!chain.dependencies || chain.dependencies.length === 0) return true;
     return chain.dependencies.every(dep => runningNodes.includes(dep));
@@ -132,6 +187,8 @@ const Card = ({
             return;
           }
 
+          setProcessHealth('offline');
+
           console.log(`Stopping chain ${chain.id}`);
           // Update UI immediately to show stopping state
           onUpdateChain(chain.id, { status: 'stopping' });
@@ -237,8 +294,17 @@ const Card = ({
     <>
       <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: '300px' }}>
         <div className={`card ${isDarkMode ? 'dark' : 'light'}`}>
-          <div className="card-header">
-            <h2>{chain.display_name}</h2>
+          <div className="card-header" style={{ position: 'relative' }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <h2 style={{ margin: 0, lineHeight: 1.2, textAlign: 'left' }}>{chain.display_name}</h2>
+            <div className={`status-light ${processHealth}`} title={`Process Status: ${processHealth}`} />
+          </div>
+          <div style={{ fontSize: '0.9em', color: isDarkMode ? 'rgba(255, 255, 255, 0.7)' : 'rgba(51, 51, 51, 0.7)', marginTop: '4px', fontWeight: 400 }}>
+            {chain.id === 'bitwindow' ? 
+              (processHealth === 'healthy' ? 'Running' : 'Not started') :
+              (processHealth === 'healthy' && blockCount >= 0 ? `#Blocks: ${blockCount}` : 'Not started')}
+          </div>
+
           </div>
           <div className="card-content">
             <p>{chain.description}</p>
@@ -294,4 +360,4 @@ const Card = ({
   );
 };
 
-export default Card;
+export default Card;

src/components/Card.js

@@ -0,0 +1,30 @@
+.status-light {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    position: relative;
+    display: inline-block;
+    margin-right: 10px;
+    transition: background-color 0.3s ease;
+  }
+  
+  /* Add z-index to ensure lights are visible */
+  .status-light.healthy {
+    background-color: #2ecc71; /* Green */
+    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
+  }
+  
+  .status-light.warning {
+    background-color: #f1c40f; /* Yellow */
+    box-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
+  }
+  
+  .status-light.error {
+    background-color: #e74c3c; /* Red */
+    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
+  }
+  
+  .status-light.offline {
+    background-color: #95a5a6; /* Gray */
+    box-shadow: 0 0 8px rgba(149, 165, 166, 0.5);
+  }

src/components/StatusLight.css

@@ -0,0 +1,23 @@
+/* Common message types */
+
+syntax = "proto3";
+package cusf.common.v1;
+
+import "google/protobuf/wrappers.proto";
+
+/// Consensus-encoded hex.
+/// Variable length data uses a length prefix.
+message ConsensusHex {
+  google.protobuf.StringValue hex = 1;
+}
+
+/// Hex encoding of byte arrays/vectors.
+/// Length prefixes are not used.
+message Hex {
+  google.protobuf.StringValue hex = 1;
+}
+
+/// Reverse consensus-encoded hex
+message ReverseHex {
+  google.protobuf.StringValue hex = 1;
+}