Add CB58 to hex for subnet tooling (#13)

public/tools.html

@@ -10,8 +10,8 @@ <h1 class="mb-3 fw-semibold">
 </div>
 
 <script type="module">
-import { utils as ethersUtils} from "https://esm.sh/[email protected]";
-import { cb58Encode } from "/js/utils.js"
+import { utils as ethersUtils } from "https://esm.sh/[email protected]";
+import { cb58Encode, cb58Decode } from "/js/utils.js"
 
 function decodeHex(hex) {
   try {
@@ -26,6 +26,26 @@ <h1 class="mb-3 fw-semibold">
   }
 }
 
+document.getElementById("cb58ToHex").addEventListener("keyup", (event) => {
+  if (event.key === "Enter") {
+    try {
+      let addr = event.target.value;
+      // if it starts with NodeID-, remove it
+      if (addr.startsWith("NodeID-")) {
+        addr = addr.slice(7);
+      }
+      cb58Decode(addr).then((buffer) => {
+        // outputs a uint8array, convert to hex
+        const hex = ethersUtils.hexlify(buffer);
+        document.querySelector("#hexoutput").value = hex;
+      });
+    } catch (e) {
+      console.error(e)
+      document.querySelector("#hexoutput").value = `Invalid CB58`;
+    }
+  }
+});
+
 document.getElementById("hexToAddr").addEventListener("keyup", (event) => {
   if (event.key === "Enter") {
     decodeHex(event.target.value);
@@ -74,6 +94,17 @@ <h3 class="text-center">Tools</h3>
     <label for="cb58output" class="form-label">CB58</label>
     <input type="text" class="form-control cursor-copy" id="cb58output" disabled placeholder="CB58" />
   </div>
+  <div class="mb-3">
+    <label for="cb58ToHex" class="form-label">CB58 to Hex</label>
+    <input
+      type="text"
+      class="form-control"
+      id="cb58ToHex"
+      placeholder="CB58, enter to go"
+      />
+    <label for="hexoutput" class="form-label">Hex</label>
+    <input type="text" class="form-control cursor-copy" id="hexoutput" disabled placeholder="Hex" />
+  </div>
 </div>
 
 <script type="module"></script>