Add hex decoder to tooling

public/tools.html

@@ -9,6 +9,30 @@ <h1 class="mb-3 fw-semibold">
   </div>
 </div>
 
+<script type="module">
+import { utils as ethersUtils} from "https://esm.sh/[email protected]";
+import { cb58Encode } from "/js/utils.js"
+
+function decodeHex(hex) {
+  try {
+    const bytes = ethersUtils.arrayify(hex);
+    // decode is async, use .then to update the UI
+    return cb58Encode(bytes).then((addr) => {
+      document.querySelector("#cb58output").value = `NodeID-${addr}`;
+    });
+  } catch (e) {
+    console.error(e)
+    document.querySelector("#cb58output").value = `Invalid hex`;
+  }
+}
+
+document.getElementById("hexToAddr").addEventListener("keyup", (event) => {
+  if (event.key === "Enter") {
+    decodeHex(event.target.value);
+  }
+});
+</script>
+
 <div class="container w-95 text-center border border-5 rounded pb-3">
   <h3 class="text-center">Tools</h3>
   <div class="mb-3">
@@ -39,6 +63,17 @@ <h3 class="text-center">Tools</h3>
         "
     />
   </div>
+  <div class="mb-3">
+    <label for="hexToAddr" class="form-label">Hex to CB58</label>
+    <input 
+    type="text" 
+    class="form-control" 
+    id="hexToAddr"
+    placeholder="Hex, enter to go"
+    />
+    <label for="cb58output" class="form-label">CB58</label>
+    <input type="text" class="form-control cursor-copy" id="cb58output" disabled placeholder="CB58" />
+  </div>
 </div>
 
 <script type="module"></script>