feat(webui): add PSBT editor

- Add Playwright as dev dependency and configure test environment
- Extract common styles to separate module for reusability
- Implement PSBT output editing (add/remove) in parser component
- Add comprehensive E2E tests for parser functionality
- Auto-expand tree to outputs level when PSBT is loaded

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

Author: OttoAllmendinger

package-lock.json

@@ -15,7 +15,7 @@
     "build:wasm": "bash scripts/build-wasm.sh",
     "build": "npm run build:wasm && npm run extract-samples && webpack --mode production --progress --config ./webpack.config.js",
     "typecheck": "tsc --noEmit",
-    "test": "echo \"Error: no test specified\"",
+    "test": "playwright test",
     "dev": "npm run build:wasm && npm run extract-samples && webpack serve --mode development --progress --hot --config ./webpack.config.js",
     "fmt": "prettier --write '{src,webpack}/**/*.{tsx,ts,js}'",
     "check-fmt": "prettier --check '{src,webpack}/**/*.{tsx,ts,js}'",
@@ -33,6 +33,7 @@
     "newtype-ts": "^0.3.5"
   },
   "devDependencies": {
+    "@playwright/test": "^1.58.2",
     "css-loader": "^7.1.2",
     "gh-pages": "^6.1.1",
     "html-webpack-plugin": "^5.6.0",

packages/webui/package.json

@@ -0,0 +1,22 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./tests",
+  timeout: 30_000,
+  use: {
+    baseURL: "http://localhost:9090",
+    headless: true,
+  },
+  webServer: {
+    command: "npx webpack serve --mode development --port 9090",
+    port: 9090,
+    timeout: 60_000,
+    reuseExistingServer: true,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { browserName: "chromium" },
+    },
+  ],
+});

packages/webui/playwright.config.ts

@@ -12,60 +12,7 @@ import "./wasm-utxo/addresses";
 import "./wasm-solana/transaction";
 import "./wasm-utxo/parser";
 
-// Common styles used across components
-export const commonStyles = `
-  * {
-    box-sizing: border-box;
-  }
-
-  :host {
-    display: block;
-    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
-    color: var(--fg, #c9d1d9);
-    line-height: 1.5;
-  }
-
-  a {
-    color: var(--accent, #58a6ff);
-    text-decoration: none;
-  }
-
-  a:hover {
-    text-decoration: underline;
-  }
-
-  button, input, textarea, select {
-    font-family: inherit;
-  }
-
-  h1, h2, h3 {
-    margin: 0 0 1rem;
-    font-weight: 500;
-  }
-
-  h1 {
-    font-size: 1.5rem;
-    color: var(--fg, #c9d1d9);
-  }
-
-  h2 {
-    font-size: 1.25rem;
-  }
-
-  .breadcrumb {
-    font-size: 0.875rem;
-    margin-bottom: 1.5rem;
-    color: var(--muted, #8b949e);
-  }
-
-  .breadcrumb a {
-    color: var(--accent, #58a6ff);
-  }
-
-  .breadcrumb span {
-    color: var(--fg, #c9d1d9);
-  }
-`;
+import { commonStyles } from "./styles";
 
 /**
  * Home page component - navigation hub for all demos.

packages/webui/src/index.ts

@@ -0,0 +1,54 @@
+/** Common styles shared across all web components. */
+export const commonStyles = `
+  * {
+    box-sizing: border-box;
+  }
+
+  :host {
+    display: block;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+    color: var(--fg, #c9d1d9);
+    line-height: 1.5;
+  }
+
+  a {
+    color: var(--accent, #58a6ff);
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  button, input, textarea, select {
+    font-family: inherit;
+  }
+
+  h1, h2, h3 {
+    margin: 0 0 1rem;
+    font-weight: 500;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    color: var(--fg, #c9d1d9);
+  }
+
+  h2 {
+    font-size: 1.25rem;
+  }
+
+  .breadcrumb {
+    font-size: 0.875rem;
+    margin-bottom: 1.5rem;
+    color: var(--muted, #8b949e);
+  }
+
+  .breadcrumb a {
+    color: var(--accent, #58a6ff);
+  }
+
+  .breadcrumb span {
+    color: var(--fg, #c9d1d9);
+  }
+`;

packages/webui/src/styles.ts

@@ -7,7 +7,7 @@
 
 import { BaseComponent, defineComponent, h, css, fragment, type Child } from "../../lib/html";
 import { setParams } from "../../lib/router";
-import { commonStyles } from "../../index";
+import { commonStyles } from "../../styles";
 import {
   Transaction,
   parseTransaction,

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

@@ -7,7 +7,7 @@
 
 import { BaseComponent, defineComponent, h, css, fragment, type Child } from "../../lib/html";
 import { setParams } from "../../lib/router";
-import { commonStyles } from "../../index";
+import { commonStyles } from "../../styles";
 import { address, type CoinName, type AddressFormat } from "@bitgo/wasm-utxo";
 
 const { toOutputScriptWithCoin, fromOutputScriptWithCoin } = address;