feat(webui): add PSBT/TX parser feature with sample data

Add PSBT/TX parser component that allows inspecting PSBTs and transactions
with a collapsible tree view. This new tool helps users and developers to
analyze UTXO transaction structures.

Key additions:
- Parse and display Bitcoin format PSBTs and raw transactions
- Extract sample data from test fixtures for quick testing
- Support auto-detection of transaction format
- Collapsible tree view with search, copy and expand/collapse features
- Share functionality to save and share parser state

Issue: BTC-0

Co-authored-by: llm-git <llm-git@ttll.de>

Author: OttoAllmendinger

package-lock.json

@@ -11,10 +11,11 @@
   "main": "./dist/src/index.js",
   "private": true,
   "scripts": {
-    "build": "webpack --mode production --progress --config ./webpack.config.js",
+    "extract-samples": "node scripts/extract-samples.js",
+    "build": "npm run extract-samples && webpack --mode production --progress --config ./webpack.config.js",
     "typecheck": "tsc --noEmit",
     "test": "echo \"Error: no test specified\"",
-    "dev": "webpack serve --mode development --progress --hot --config ./webpack.config.js",
+    "dev": "npm run extract-samples && webpack serve --mode development --progress --hot --config ./webpack.config.js",
     "fmt": "prettier --write .",
     "check-fmt": "prettier --check '{src,webpack}/**/*.{tsx,ts,js}'",
     "clean": "rm -r ./dist",

packages/webui/package.json

@@ -0,0 +1,130 @@
+#!/usr/bin/env node
+/**
+ * Extract sample PSBT/TX data from fixtures for the parser UI.
+ *
+ * This script reads fixture files and extracts:
+ * - psbtBase64: unsigned or partially signed PSBT
+ * - psbtBase64Finalized: fully signed PSBT
+ * - extractedTransaction: raw transaction hex
+ *
+ * Usage: node scripts/extract-samples.js
+ */
+
+const fs = require("fs");
+const path = require("path");
+
+const FIXTURES_DIR = path.resolve(__dirname, "../src/fixtures/fixed-script");
+const OUTPUT_FILE = path.resolve(__dirname, "../src/wasm-utxo/parser/samples.ts");
+
+function extractSamples() {
+  const samples = [];
+
+  // Read fixture files
+  const files = fs.readdirSync(FIXTURES_DIR).filter((f) => f.endsWith(".json") && f.startsWith("psbt"));
+
+  for (const file of files) {
+    const filePath = path.join(FIXTURES_DIR, file);
+    const content = fs.readFileSync(filePath, "utf-8");
+
+    let fixture;
+    try {
+      fixture = JSON.parse(content);
+    } catch {
+      console.warn(`Skipping invalid JSON: ${file}`);
+      continue;
+    }
+
+    // Extract name from filename: psbt-lite.bitcoin.unsigned.json -> Bitcoin Lite (unsigned)
+    const match = file.match(/^psbt(-lite)?\.(\w+)\.(\w+)\.json$/);
+    if (!match) continue;
+
+    const [, lite, network, state] = match;
+    const networkName = network.charAt(0).toUpperCase() + network.slice(1);
+    const stateName = state.charAt(0).toUpperCase() + state.slice(1);
+    const liteLabel = lite ? " Lite" : "";
+
+    // Add psbtBase64 (unsigned/halfsigned)
+    if (fixture.psbtBase64 && state !== "fullsigned") {
+      samples.push({
+        name: `${networkName}${liteLabel} PSBT (${stateName})`,
+        type: "psbt",
+        data: fixture.psbtBase64,
+      });
+    }
+
+    // Add psbtBase64Finalized (fullsigned)
+    if (fixture.psbtBase64Finalized) {
+      samples.push({
+        name: `${networkName}${liteLabel} PSBT (Finalized)`,
+        type: "psbt",
+        data: fixture.psbtBase64Finalized,
+      });
+    }
+
+    // Add extractedTransaction
+    if (fixture.extractedTransaction) {
+      samples.push({
+        name: `${networkName}${liteLabel} TX (Extracted)`,
+        type: "tx",
+        data: fixture.extractedTransaction,
+      });
+    }
+  }
+
+  // Sort by name
+  samples.sort((a, b) => a.name.localeCompare(b.name));
+
+  return samples;
+}
+
+function generateTypeScript(samples) {
+  const lines = [
+    "/**",
+    " * Sample PSBT/TX data extracted from test fixtures.",
+    " * Auto-generated by scripts/extract-samples.js",
+    " * DO NOT EDIT MANUALLY",
+    " */",
+    "",
+    "export interface Sample {",
+    "  name: string;",
+    '  type: "psbt" | "tx";',
+    "  data: string;",
+    "}",
+    "",
+    "export const samples: Sample[] = [",
+  ];
+
+  for (const sample of samples) {
+    lines.push("  {");
+    lines.push(`    name: ${JSON.stringify(sample.name)},`);
+    lines.push(`    type: ${JSON.stringify(sample.type)},`);
+    lines.push(`    data: ${JSON.stringify(sample.data)},`);
+    lines.push("  },");
+  }
+
+  lines.push("];");
+  lines.push("");
+
+  return lines.join("\n");
+}
+
+function main() {
+  console.log("Extracting samples from fixtures...");
+
+  const samples = extractSamples();
+  console.log(`Found ${samples.length} samples`);
+
+  const typescript = generateTypeScript(samples);
+
+  // Ensure output directory exists
+  const outputDir = path.dirname(OUTPUT_FILE);
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  fs.writeFileSync(OUTPUT_FILE, typescript);
+  console.log(`Written to ${OUTPUT_FILE}`);
+}
+
+main();
+

packages/webui/scripts/extract-samples.js

@@ -0,0 +1 @@
+/home/otto/src/BitGo/BitGoWASM/packages/wasm-utxo/test/fixtures

packages/webui/src/fixtures

@@ -9,6 +9,7 @@ import { initRouter, type Route } from "./lib/router";
 
 // Import demo components (registers them as custom elements)
 import "./wasm-utxo/addresses";
+import "./wasm-utxo/parser";
 
 // Common styles used across components
 export const commonStyles = `
@@ -122,7 +123,7 @@ class HomePage extends BaseComponent {
         "div",
         { class: "home" },
         h("h1", {}, "BitGoWASM Demos"),
-        h("p", { class: "subtitle" }, "Interactive demos for BitGo WASM libraries"),
+        h("p", { class: "subtitle" }, "Developer tools for BitGoWASM libraries"),
         h(
           "ul",
           { class: "demo-list" },
@@ -140,6 +141,20 @@ class HomePage extends BaseComponent {
               ),
             ),
           ),
+          h(
+            "li",
+            {},
+            h(
+              "a",
+              { class: "demo-link", href: "#/wasm-utxo/parser" },
+              h("div", { class: "demo-title" }, "UTXO PSBT/TX Parser"),
+              h(
+                "div",
+                { class: "demo-desc" },
+                "Parse and inspect PSBTs and transactions as collapsible trees",
+              ),
+            ),
+          ),
         ),
       ),
     );
@@ -152,6 +167,7 @@ defineComponent("home-page", HomePage);
 const routes: Route[] = [
   { path: "/", component: "home-page" },
   { path: "/wasm-utxo/addresses", component: "address-converter" },
+  { path: "/wasm-utxo/parser", component: "psbt-tx-parser" },
 ];
 
 // Initialize router when DOM is ready