Display consensus stats on the web-client example page

nimiq · Dec 4, 2023 · 7291738 · 7291738
1 parent d6ad8f1
commit 7291738
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 26 deletions.
diff --git a/web-client/example/index.html b/web-client/example/index.html
@@ -7,8 +7,24 @@
   <body>
     <script type="module" src="./module.js"></script>
 
-    <!-- Run an animation on the main thread (CPU) with JS -->
-    <div id="dead-mans-switch"></div>
+    <div>
+      Consensus: <strong id="consensus" class="connecting">connecting</strong>
+    </div>
+
+    <div>
+      Peers: <strong id="peers">0</strong>
+    </div>
+
+    <div>
+      Block: <strong id="block">-</strong>
+    </div>
+
+    <br />
+    <div>
+      Main-thread unblocked:
+      <!-- Run an animation on the main thread (CPU) with JS -->
+      <div id="dead-mans-switch"></div>
+    </div>
     <script>
       const deadMansSwitch = document.querySelector('#dead-mans-switch');
 
@@ -23,15 +39,29 @@
     </script>
     <style>
       body {
+        font-family: system-ui;
         margin: 100px;
       }
 
       #dead-mans-switch {
-        width: 50px;
-        margin-left: -20px;
-        height: 5px;
+        display: inline-block;
+        margin-left: 5px;
+        width: 20px;
+        height: 2px;
         background: black;
       }
+
+      #consensus.connecting {
+        color: firebrick;
+      }
+
+      #consensus.syncing {
+        color: orange;
+      }
+
+      #consensus.established {
+        color: green;
+      }
     </style>
   </body>
 </html>
diff --git a/web-client/example/module.js b/web-client/example/module.js
@@ -9,27 +9,29 @@ init().then(async () => {
     const client = await Nimiq.Client.create(config.build());
     window.client = client; // Prevent garbage collection and for playing around
 
-    client.addConsensusChangedListener(
-        (state) => {
-            console.log(`Consensus ${state.toUpperCase()}`);
-        },
-    );
-
-    client.addHeadChangedListener(
-        async (hash, reason, revertedBlocks, adoptedBlocks) => {
-            const block = await client.getBlock(hash);
-            const rebranchLength = revertedBlocks.length;
-
-            console.log([
-                'Blockchain:',
-                reason,
-                ...(rebranchLength ? [rebranchLength] : []),
-                'at',
-                block.height,
-                `(${new Date(block.timestamp).toISOString().substring(0, 19).replace('T', ' ')} UTC)`
-            ].join(' '));
-        },
-    );
+    client.addConsensusChangedListener((state) => {
+        console.log(`Consensus ${state.toUpperCase()}`);
+        document.querySelector('#consensus').textContent = state;
+        document.querySelector('#consensus').classList.toggle('connecting', state === 'connecting');
+        document.querySelector('#consensus').classList.toggle('syncing', state === 'syncing');
+        document.querySelector('#consensus').classList.toggle('established', state === 'established');
+    });
+
+    client.addHeadChangedListener(async (hash, reason, revertedBlocks, adoptedBlocks) => {
+        const block = await client.getBlock(hash);
+        const rebranchLength = revertedBlocks.length;
+
+        console.log([
+            'Blockchain:',
+            reason,
+            ...(rebranchLength ? [rebranchLength] : []),
+            'at',
+            block.height,
+            `(${new Date(block.timestamp).toISOString().substring(0, 19).replace('T', ' ')} UTC)`
+        ].join(' '));
+
+        document.querySelector('#block').textContent = block.height;
+    });
 
     client.addPeerChangedListener((peerId, reason, numPeers, peerInfo) => {
         if (peerInfo) {
@@ -38,6 +40,8 @@ init().then(async () => {
         } else {
             console.log(`Peer ${reason}: ${peerId} - now ${numPeers} peers connected`);
         }
+
+        document.querySelector('#peers').textContent = numPeers;
     });
 
     /**