Skip to content

Commit 6178e8f

Browse files
OttoAllmendingerllm-git
OttoAllmendinger
and
llm-git
committed
feat(web): add initial webui and README with demos
Add webui package with first demo for the WASM-UTXO package. The webui provides a simple, framework-free demo environment to showcase functionality of the BitGoWASM packages. - Create README explaining the project structure - Add address converter demo for wasm-utxo - Use a clean, monospace-oriented design - Remove old implementation files - Implement simple router for multi-page support Issue: BTC-0 Co-authored-by: llm-git <llm-git@ttll.de>
1 parent 5912f8c commit 6178e8f

14 files changed

Lines changed: 1222 additions & 1307 deletions

File tree

‎packages/webui/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# BitGoWASM WebUI
2+
3+
This project contains demos for the different wasm packages in the BitGoWASM project.
4+
5+
## Architecture
6+
7+
- No frontend frameworks
8+
- Demo vibe for UI: monospace font
9+
- Demo of the `@bitgo/wasm-utxo` package lives in src/wasm-utxo
10+
- Toplevel index.html contains navigation to the sub-package demo sites

‎packages/webui/src/codec.ts‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎packages/webui/src/descriptorFixtures.ts‎

Lines changed: 0 additions & 670 deletions
This file was deleted.

‎packages/webui/src/hex.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎packages/webui/src/html.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎packages/webui/src/htmlAST.ts‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎packages/webui/src/index.html‎

Lines changed: 128 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,130 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Wasm-Miniscript Playground</title>
8-
</head>
9-
10-
<body>
11-
<div class="container">
12-
<div>
13-
<h3>Descriptor</h3>
14-
<div class="toolbar">
15-
<label for="input-example">Example</label>
16-
<select id="input-example"></select>
17-
<label for="input-derivation-index">Derivation Index</label>
18-
<input id="input-derivation-index" type="number" value="0" min="0" />
19-
</div>
20-
<textarea id="edit-descriptor" spellcheck="false"></textarea>
21-
</div>
22-
<div>
23-
<h3>Descriptor AST</h3>
24-
<div class="ast" id="output-descriptor-ast">AST</div>
25-
</div>
26-
<div>
27-
<h3>Miniscript</h3>
28-
<div class="toolbar">
29-
<label for="input-script-context">Script Context</label>
30-
<select id="input-script-context"></select>
31-
</div>
32-
<textarea id="edit-miniscript" spellcheck="false"></textarea>
33-
</div>
34-
<div>
35-
<h3>Miniscript AST</h3>
36-
<div class="ast" id="output-miniscript-ast">AST</div>
37-
</div>
38-
<div>
39-
<h3>Bitcoin Address</h3>
40-
<textarea
41-
id="bitcoin-script-pubkey-address"
42-
spellcheck="false"
43-
readonly="readonly"
44-
></textarea>
45-
<textarea id="bitcoin-script-pubkey-hex" spellcheck="false" readonly="readonly"></textarea>
46-
</div>
47-
<div>
48-
<h3>Bitcoin Script (hex)</h3>
49-
<textarea id="edit-bitcoin-script-hex" spellcheck="false"></textarea>
50-
</div>
51-
<div>
52-
<h3>Bitcoin Script (asm)</h3>
53-
<textarea id="edit-bitcoin-script-asm" spellcheck="false" readonly="readonly"></textarea>
54-
</div>
55-
</div>
56-
<div id="status">Status</div>
57-
</body>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>BitGoWASM Demos</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
11+
<style>
12+
:root {
13+
/* BitGo Brand Colors */
14+
/* Primary */
15+
--brand-blue: #1647DB;
16+
--brand-blue-shade1: #0F3199;
17+
--brand-blue-shade2: #121E5C;
18+
--brand-off-black: #0E0F0F;
19+
--brand-white: #FFFFFF;
20+
--brand-gold: #CFAC53;
21+
--brand-gold-shade1: #B78A31;
22+
--brand-gold-shade2: #3C2F19;
23+
24+
/* Grays */
25+
--gray-5: #2E2E2E;
26+
--gray-4: #595959;
27+
--gray-3: #969696;
28+
--gray-2: #D9D9D9;
29+
--gray-1: #F2F2F2;
30+
31+
/* Secondary Colors */
32+
--sky-blue: #62ABF4;
33+
--sky-blue-tint1: #B6D8FF;
34+
--sky-blue-tint2: #DFE8F2;
35+
--purple: #594DFF;
36+
--lavender: #8780FF;
37+
--teal: #2E9987;
38+
--green: #7ACC8F;
39+
--red: #D13B54;
40+
--orange: #FF704C;
41+
--yellow: #EBC55E;
42+
43+
/* Theme mapping (dark mode) */
44+
--bg: var(--brand-off-black);
45+
--fg: var(--gray-1);
46+
--muted: var(--gray-3);
47+
--accent: var(--sky-blue);
48+
--accent-hover: var(--sky-blue-tint1);
49+
--surface: var(--gray-5);
50+
--surface-hover: var(--gray-4);
51+
--border: var(--gray-4);
52+
--border-subtle: var(--gray-5);
53+
--error: var(--red);
54+
--success: var(--green);
55+
--warning: var(--brand-gold);
56+
57+
--mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
58+
}
59+
60+
* {
61+
box-sizing: border-box;
62+
}
63+
64+
html, body {
65+
margin: 0;
66+
padding: 0;
67+
min-height: 100vh;
68+
}
69+
70+
body {
71+
font-family: var(--mono);
72+
font-size: 14px;
73+
line-height: 1.5;
74+
background: var(--bg);
75+
color: var(--fg);
76+
-webkit-font-smoothing: antialiased;
77+
-moz-osx-font-smoothing: grayscale;
78+
}
79+
80+
#app {
81+
padding: 2rem;
82+
max-width: 1200px;
83+
margin: 0 auto;
84+
}
85+
86+
/* Selection styling */
87+
::selection {
88+
background: var(--accent);
89+
color: var(--bg);
90+
}
91+
92+
/* Scrollbar styling */
93+
::-webkit-scrollbar {
94+
width: 8px;
95+
height: 8px;
96+
}
97+
98+
::-webkit-scrollbar-track {
99+
background: var(--surface);
100+
}
101+
102+
::-webkit-scrollbar-thumb {
103+
background: var(--border);
104+
border-radius: 4px;
105+
}
106+
107+
::-webkit-scrollbar-thumb:hover {
108+
background: var(--muted);
109+
}
110+
111+
/* Focus visible styling for accessibility */
112+
:focus-visible {
113+
outline: 2px solid var(--accent);
114+
outline-offset: 2px;
115+
}
116+
117+
/* Loading state */
118+
#app:empty::before {
119+
content: 'Loading...';
120+
display: block;
121+
text-align: center;
122+
padding: 4rem;
123+
color: var(--muted);
124+
}
125+
</style>
126+
</head>
127+
<body>
128+
<div id="app"></div>
129+
</body>
58130
</html>

0 commit comments

Comments
 (0)