Fixes readme exemple

Moonsong-Labs · Nov 9, 2024 · 40d7bda · 40d7bda
1 parent 32050dc
commit 40d7bda
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -54,7 +54,7 @@ Options:
 <html>
   <head>
     <title>Monitoring</title>
-    <script src="https://unpkg.com/[email protected].0/dist/index.esm.js" charset="UTF-8" integrity="sha384-X8BhAzHFjiYdkiKncK7nKxHWpRTmp/FSQm0tm3ipI2f2wm6L32G1N/cKmu7xqkNm" crossorigin="anonymous"></script>
+    <link rel="modulepreload" href="https://unpkg.com/[email protected].1/dist/index.esm.js" charset="UTF-8" integrity="sha384-Rp+AJiqSkCwPajGgNf1TGdWRVDSgf5GtK1pgO7uPofbSxPVNaZ/wNdulNxKVaO6I" crossorigin="anonymous"></script>
     <style>
       body {
         padding: 2rem;
@@ -68,7 +68,8 @@ Options:
     <div id="main-alphanet"></div>
     <div id="main-moonriver"></div>
     <div id="main-moonbeam"></div>
-    <script>
+    <script type="module">
+      import * as mbTools from "https://unpkg.com/[email protected]/dist/index.esm.js";
       const monitorNetwork = async (api, networkName) => {
         const pre = document.createElement("pre");
         const title = document.createElement("h2");

diff --git a/index.html b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Monitoring</title>
+    <link rel="modulepreload" href="./dist/index.esm.js" charset="UTF-8"
+        integrity="sha384-Rp+AJiqSkCwPajGgNf1TGdWRVDSgf5GtK1pgO7uPofbSxPVNaZ/wNdulNxKVaO6I" crossorigin="anonymous">
+    <style>
+        body {
+            padding: 2rem;
+        }
+
+        pre {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="main-alphanet"></div>
+    <div id="main-moonriver"></div>
+    <div id="main-moonbeam"></div>
+    <script type="module">
+        import * as mbTools from "./dist/index.esm.js";
+        const monitorNetwork = async (api, networkName) => {
+            const pre = document.createElement("pre");
+            const title = document.createElement("h2");
+            title.append(networkName);
+            const main = document.getElementById(`main-${networkName}`);
+            main.appendChild(title);
+            main.appendChild(pre);
+            let previousBlockDetails = null;
+            mbTools.listenBlocks(api, false, async (blockDetails) => {
+                const line = `${mbTools.generateBlockDetailsLog(
+                    blockDetails,
+                    {},
+                    previousBlockDetails
+                )}\n`;
+                pre.prepend(line);
+                previousBlockDetails = blockDetails;
+            });
+            return api;
+        };
+
+        const start = async () => {
+            const api = await mbTools.getApiFor({ network: "moonriver" });
+            // You can also directly to the node using url
+            // const api = await mbTools.getApiFor({ url: "ws://127.0.0.1:9944" });
+
+            const networkName =
+                mbTools.NETWORK_CHAIN_MAPPING[
+                (await api.rpc.system.chain()).toString()
+                ];
+            monitorNetwork(api, networkName);
+        };
+
+        start();
+    </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "moonbeam-tools",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Set of tools for Moonbeam blockchain",
   "exports": {
     ".": {