Merge pull request #258 from BitGo/BTC-0.webui-fixes

feat(webui)!: modernize module system and remove inline wasm

Author: OttoAllmendinger

packages/webui/eslint.config.js

@@ -0,0 +1,25 @@
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    ignores: [
+      "dist/",
+      "node_modules/",
+      "wasm/",
+      "webpack.config.js",
+      "playwright.config.ts",
+      "scripts/",
+      "tests/",
+    ],
+  },
+  tseslint.configs.recommended,
+  {
+    files: ["src/**/*.{ts,tsx}"],
+    languageOptions: {
+      parserOptions: {
+        project: ["./tsconfig.json"],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+);

packages/webui/package.json

@@ -2,6 +2,7 @@
   "name": "@bitgo/wasm-web-ui",
   "version": "0.1.0",
   "description": "Web frontend for BitGoWASM libraries",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/BitGo/BitGoWASM.git"

packages/webui/scripts/extract-samples.js

@@ -10,8 +10,12 @@
  * Usage: node scripts/extract-samples.js
  */
 
-const fs = require("fs");
-const path = require("path");
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const FIXTURES_DIR = path.resolve(__dirname, "../src/fixtures/fixed-script");
 const OUTPUT_FILE = path.resolve(__dirname, "../src/wasm-utxo/parser/samples.ts");

packages/webui/src/lib/router.ts

@@ -32,7 +32,7 @@ let currentPath: string | null = null;
  */
 export function parseHash(hash: string = location.hash): ParsedHash {
   // Remove leading # if present
-  let hashContent = hash.startsWith("#") ? hash.slice(1) : hash;
+  const hashContent = hash.startsWith("#") ? hash.slice(1) : hash;
 
   // Default to root path
   if (!hashContent || hashContent === "/") {

packages/webui/src/wasm-solana/transaction/index.ts

@@ -703,7 +703,7 @@ class SolanaTransactionParser extends BaseComponent {
   }
 
   private share(): void {
-    copyToClipboard(location.href, this.$(".btn")!);
+    void copyToClipboard(location.href, this.$(".btn")!);
   }
 
   private clear(): void {

packages/webui/src/wasm-utxo/addresses/index.ts

@@ -507,7 +507,7 @@ class AddressConverter extends BaseComponent {
           {
             class: "copy-btn",
             style: "margin-left: 0.5rem",
-            onclick: (e: Event) => copyToClipboard(hexString, e.target as HTMLElement),
+            onclick: (e: Event) => void copyToClipboard(hexString, e.target as HTMLElement),
           },
           "Copy",
         ),
@@ -569,7 +569,7 @@ class AddressConverter extends BaseComponent {
         "button",
         {
           class: "copy-btn",
-          onclick: (e: Event) => copyToClipboard(outcome.address, e.target as HTMLElement),
+          onclick: (e: Event) => void copyToClipboard(outcome.address, e.target as HTMLElement),
         },
         "Copy",
       ),
@@ -595,7 +595,7 @@ class AddressConverter extends BaseComponent {
   }
 
   private share(): void {
-    copyToClipboard(location.href, this.$(".btn")!);
+    void copyToClipboard(location.href, this.$(".btn")!);
   }
 
   private clear(): void {

packages/webui/src/wasm-utxo/parser/index.ts

@@ -231,7 +231,7 @@ function renderTreeNode(
                 class: "copy-btn",
                 onclick: (e: Event) => {
                   e.stopPropagation();
-                  copyToClipboard(getFullValue(node.value), e.target as HTMLElement);
+                  void copyToClipboard(getFullValue(node.value), e.target as HTMLElement);
                 },
               },
               "Copy",
@@ -1437,7 +1437,8 @@ class PsbtTxParser extends BaseComponent {
       this.applyPsbtEdit();
     } catch (e) {
       if (errorEl) {
-        errorEl.replaceChildren(h("div", { class: "error-message" }, `${e}`));
+        const message = e instanceof Error ? e.message : String(e);
+        errorEl.replaceChildren(h("div", { class: "error-message" }, message));
       }
     }
   }
@@ -1502,7 +1503,7 @@ class PsbtTxParser extends BaseComponent {
   }
 
   private share(): void {
-    copyToClipboard(location.href, this.$(".btn")!);
+    void copyToClipboard(location.href, this.$(".btn")!);
   }
 
   private clear(): void {