@nockchain/rose 0.1.4-nightly.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (205) hide show
  1. package/.github/workflows/artifacts.yml +33 -0
  2. package/.github/workflows/ci.yml +68 -0
  3. package/.github/workflows/publish-sdk.yml +35 -0
  4. package/.nvmrc +1 -0
  5. package/.prettierignore +5 -0
  6. package/.prettierrc +8 -0
  7. package/LICENSE +22 -0
  8. package/README.md +117 -0
  9. package/extension/background/index.ts +1500 -0
  10. package/extension/content/index.ts +59 -0
  11. package/extension/icons/rose.svg +27 -0
  12. package/extension/icons/rose128.png +0 -0
  13. package/extension/icons/rose16.png +0 -0
  14. package/extension/icons/rose256.png +0 -0
  15. package/extension/icons/rose32.png +0 -0
  16. package/extension/icons/rose48.png +0 -0
  17. package/extension/icons/rose512.png +0 -0
  18. package/extension/inpage/index.ts +86 -0
  19. package/extension/manifest.json +48 -0
  20. package/extension/popup/Popup.tsx +94 -0
  21. package/extension/popup/Router.tsx +121 -0
  22. package/extension/popup/assets/arrow-down-icon.svg +3 -0
  23. package/extension/popup/assets/arrow-left-icon.svg +3 -0
  24. package/extension/popup/assets/arrow-right-icon.svg +3 -0
  25. package/extension/popup/assets/arrow-up-icon.svg +3 -0
  26. package/extension/popup/assets/arrow-up-right-icon.svg +3 -0
  27. package/extension/popup/assets/checkmark-icon.svg +3 -0
  28. package/extension/popup/assets/checkmark-pencil-icon.svg +3 -0
  29. package/extension/popup/assets/checkmark-success-icon.svg +3 -0
  30. package/extension/popup/assets/clock-icon.svg +3 -0
  31. package/extension/popup/assets/close-x-icon.svg +3 -0
  32. package/extension/popup/assets/copy-icon.svg +6 -0
  33. package/extension/popup/assets/explorer-icon.svg +3 -0
  34. package/extension/popup/assets/eye-off-icon.svg +3 -0
  35. package/extension/popup/assets/eye-open-icon.svg +4 -0
  36. package/extension/popup/assets/feedback-icon.svg +3 -0
  37. package/extension/popup/assets/green-status-dot.svg +3 -0
  38. package/extension/popup/assets/info-icon.svg +3 -0
  39. package/extension/popup/assets/iris-logo-40.svg +27 -0
  40. package/extension/popup/assets/iris-logo-96.svg +27 -0
  41. package/extension/popup/assets/iris-logo-blue.svg +27 -0
  42. package/extension/popup/assets/iris-logo-no-eye.svg +27 -0
  43. package/extension/popup/assets/iris-logo-orange.svg +27 -0
  44. package/extension/popup/assets/iris-logo.svg +27 -0
  45. package/extension/popup/assets/key-icon.svg +3 -0
  46. package/extension/popup/assets/lock-icon-yellow.svg +3 -0
  47. package/extension/popup/assets/lock-icon.svg +3 -0
  48. package/extension/popup/assets/pencil-edit-icon.svg +3 -0
  49. package/extension/popup/assets/permissions-icon.svg +3 -0
  50. package/extension/popup/assets/receipt-icon.svg +5 -0
  51. package/extension/popup/assets/refresh-icon.svg +3 -0
  52. package/extension/popup/assets/settings-gear-icon.svg +8 -0
  53. package/extension/popup/assets/settings-icon.svg +3 -0
  54. package/extension/popup/assets/theme-icon.svg +3 -0
  55. package/extension/popup/assets/trash-bin-icon.svg +3 -0
  56. package/extension/popup/assets/trend-down-arrow.svg +5 -0
  57. package/extension/popup/assets/trend-up-arrow.svg +5 -0
  58. package/extension/popup/assets/user-account-icon.svg +3 -0
  59. package/extension/popup/assets/vector-bottom-left.svg +9 -0
  60. package/extension/popup/assets/vector-left.svg +9 -0
  61. package/extension/popup/assets/vector-right.svg +9 -0
  62. package/extension/popup/assets/vector-top-right-rotated.svg +8 -0
  63. package/extension/popup/assets/vector-top-right.svg +9 -0
  64. package/extension/popup/assets/wallet-dropdown-arrow.svg +5 -0
  65. package/extension/popup/assets/wallet-icon-style-1.svg +6 -0
  66. package/extension/popup/assets/wallet-icon-style-10.svg +8 -0
  67. package/extension/popup/assets/wallet-icon-style-11.svg +8 -0
  68. package/extension/popup/assets/wallet-icon-style-12.svg +8 -0
  69. package/extension/popup/assets/wallet-icon-style-13.svg +8 -0
  70. package/extension/popup/assets/wallet-icon-style-14.svg +8 -0
  71. package/extension/popup/assets/wallet-icon-style-15.svg +8 -0
  72. package/extension/popup/assets/wallet-icon-style-2.svg +8 -0
  73. package/extension/popup/assets/wallet-icon-style-3.svg +8 -0
  74. package/extension/popup/assets/wallet-icon-style-4.svg +8 -0
  75. package/extension/popup/assets/wallet-icon-style-5.svg +8 -0
  76. package/extension/popup/assets/wallet-icon-style-6.svg +8 -0
  77. package/extension/popup/assets/wallet-icon-style-7.svg +8 -0
  78. package/extension/popup/assets/wallet-icon-style-8.svg +8 -0
  79. package/extension/popup/assets/wallet-icon-style-9.svg +8 -0
  80. package/extension/popup/components/AccountIcon.tsx +78 -0
  81. package/extension/popup/components/AccountSelector.tsx +246 -0
  82. package/extension/popup/components/Alert.tsx +48 -0
  83. package/extension/popup/components/ConfirmModal.tsx +81 -0
  84. package/extension/popup/components/PasswordInput.tsx +49 -0
  85. package/extension/popup/components/ScreenContainer.tsx +17 -0
  86. package/extension/popup/components/SiteIcon.tsx +60 -0
  87. package/extension/popup/components/ThemeToggle.tsx +44 -0
  88. package/extension/popup/components/icons/ArrowDownLeftIcon.tsx +20 -0
  89. package/extension/popup/components/icons/ArrowUpRightIcon.tsx +20 -0
  90. package/extension/popup/components/icons/CheckIcon.tsx +20 -0
  91. package/extension/popup/components/icons/ChevronDownIcon.tsx +15 -0
  92. package/extension/popup/components/icons/ChevronLeftIcon.tsx +15 -0
  93. package/extension/popup/components/icons/ChevronRightIcon.tsx +15 -0
  94. package/extension/popup/components/icons/ChevronUpIcon.tsx +15 -0
  95. package/extension/popup/components/icons/CloseIcon.tsx +26 -0
  96. package/extension/popup/components/icons/CopyIcon.tsx +20 -0
  97. package/extension/popup/components/icons/EditIcon.tsx +20 -0
  98. package/extension/popup/components/icons/EyeIcon.tsx +13 -0
  99. package/extension/popup/components/icons/EyeOffIcon.tsx +13 -0
  100. package/extension/popup/components/icons/InfoIcon.tsx +20 -0
  101. package/extension/popup/components/icons/LockIcon.tsx +20 -0
  102. package/extension/popup/components/icons/PlusIcon.tsx +15 -0
  103. package/extension/popup/components/icons/ReceiveArrowIcon.tsx +14 -0
  104. package/extension/popup/components/icons/ReceiveCircleIcon.tsx +20 -0
  105. package/extension/popup/components/icons/SendPaperPlaneIcon.tsx +18 -0
  106. package/extension/popup/components/icons/SentArrowIcon.tsx +21 -0
  107. package/extension/popup/components/icons/SettingsIcon.tsx +26 -0
  108. package/extension/popup/components/icons/ShieldIcon.tsx +20 -0
  109. package/extension/popup/components/icons/UploadIcon.tsx +20 -0
  110. package/extension/popup/components/icons/WalletIcon.tsx +20 -0
  111. package/extension/popup/contexts/ThemeContext.tsx +105 -0
  112. package/extension/popup/hooks/useApprovalDetection.ts +128 -0
  113. package/extension/popup/hooks/useAutoFocus.ts +36 -0
  114. package/extension/popup/hooks/useAutoRejectOnClose.ts +25 -0
  115. package/extension/popup/hooks/useClickOutside.ts +33 -0
  116. package/extension/popup/hooks/useCopyToClipboard.ts +33 -0
  117. package/extension/popup/hooks/useFavicon.ts +64 -0
  118. package/extension/popup/hooks/useNumericInput.ts +93 -0
  119. package/extension/popup/index.html +13 -0
  120. package/extension/popup/index.tsx +24 -0
  121. package/extension/popup/screens/AboutScreen.tsx +118 -0
  122. package/extension/popup/screens/HomeScreen.tailwind.css +85 -0
  123. package/extension/popup/screens/HomeScreen.tsx +902 -0
  124. package/extension/popup/screens/KeySettingsPasswordScreen.tsx +164 -0
  125. package/extension/popup/screens/LockTimeScreen.tsx +155 -0
  126. package/extension/popup/screens/ReceiveScreen.tsx +149 -0
  127. package/extension/popup/screens/RecoveryPhraseScreen.tsx +183 -0
  128. package/extension/popup/screens/SendReviewScreen.tsx +308 -0
  129. package/extension/popup/screens/SendScreen.tsx +825 -0
  130. package/extension/popup/screens/SendSubmittedScreen.tsx +193 -0
  131. package/extension/popup/screens/SettingsScreen.tsx +116 -0
  132. package/extension/popup/screens/ThemeSettingsScreen.tsx +107 -0
  133. package/extension/popup/screens/TransactionDetailsScreen.tsx +346 -0
  134. package/extension/popup/screens/ViewSecretPhraseScreen.tsx +212 -0
  135. package/extension/popup/screens/WalletPermissionsScreen.tsx +123 -0
  136. package/extension/popup/screens/WalletSettingsScreen.tsx +381 -0
  137. package/extension/popup/screens/WalletStylingScreen.tsx +306 -0
  138. package/extension/popup/screens/approvals/ConnectApprovalScreen.tsx +136 -0
  139. package/extension/popup/screens/approvals/SignMessageScreen.tsx +140 -0
  140. package/extension/popup/screens/approvals/SignRawTxScreen.tsx +320 -0
  141. package/extension/popup/screens/approvals/TransactionApprovalScreen.tsx +167 -0
  142. package/extension/popup/screens/onboarding/BackupScreen.tsx +254 -0
  143. package/extension/popup/screens/onboarding/CreateScreen.tsx +273 -0
  144. package/extension/popup/screens/onboarding/ImportScreen.tsx +676 -0
  145. package/extension/popup/screens/onboarding/ImportScreenV0.tsx +678 -0
  146. package/extension/popup/screens/onboarding/ImportSuccessScreen.tsx +236 -0
  147. package/extension/popup/screens/onboarding/ResumeBackupScreen.tsx +166 -0
  148. package/extension/popup/screens/onboarding/StartScreen.tsx +142 -0
  149. package/extension/popup/screens/onboarding/SuccessScreen.tsx +193 -0
  150. package/extension/popup/screens/onboarding/VerifyScreen.tsx +220 -0
  151. package/extension/popup/screens/system/LockedScreen.tsx +288 -0
  152. package/extension/popup/screens/transactions/ReceiveScreen.tsx +84 -0
  153. package/extension/popup/screens/transactions/SentScreen.tsx +138 -0
  154. package/extension/popup/store.ts +482 -0
  155. package/extension/popup/styles.css +246 -0
  156. package/extension/popup/utils/format.ts +58 -0
  157. package/extension/popup/utils/formatWalletError.ts +36 -0
  158. package/extension/popup/utils/memo.ts +299 -0
  159. package/extension/popup/utils/messaging.ts +16 -0
  160. package/extension/shared/address-encoding.ts +69 -0
  161. package/extension/shared/balance-query.ts +123 -0
  162. package/extension/shared/constants.ts +386 -0
  163. package/extension/shared/currency.ts +128 -0
  164. package/extension/shared/first-name-derivation.ts +128 -0
  165. package/extension/shared/keyfile.ts +58 -0
  166. package/extension/shared/onboarding.ts +78 -0
  167. package/extension/shared/price-api.ts +79 -0
  168. package/extension/shared/rpc-client-browser.ts +315 -0
  169. package/extension/shared/transaction-builder.ts +443 -0
  170. package/extension/shared/types.ts +450 -0
  171. package/extension/shared/utxo-diff.ts +212 -0
  172. package/extension/shared/utxo-store.ts +548 -0
  173. package/extension/shared/utxo-sync.ts +343 -0
  174. package/extension/shared/validators.ts +26 -0
  175. package/extension/shared/vault.ts +1580 -0
  176. package/extension/shared/wallet-crypto.ts +77 -0
  177. package/extension/shared/wasm-utils.ts +76 -0
  178. package/extension/shared/webcrypto.ts +67 -0
  179. package/extension/types/wasm.d.ts +13 -0
  180. package/package.json +39 -0
  181. package/postcss.config.js +6 -0
  182. package/rose-extension-dist.zip +0 -0
  183. package/sdk/README.md +88 -0
  184. package/sdk/examples/app.ts +166 -0
  185. package/sdk/examples/index.html +51 -0
  186. package/sdk/examples/tsconfig.json +15 -0
  187. package/sdk/examples/tx-builder.html +532 -0
  188. package/sdk/examples/tx-builder.ts +1766 -0
  189. package/sdk/package-lock.json +424 -0
  190. package/sdk/package.json +68 -0
  191. package/sdk/src/constants.ts +28 -0
  192. package/sdk/src/errors.ts +74 -0
  193. package/sdk/src/hooks/index.ts +1 -0
  194. package/sdk/src/hooks/use-rose.ts +94 -0
  195. package/sdk/src/index.ts +12 -0
  196. package/sdk/src/provider.ts +396 -0
  197. package/sdk/src/transaction.ts +163 -0
  198. package/sdk/src/types/rose-wasm.d.ts +14 -0
  199. package/sdk/src/types.ts +97 -0
  200. package/sdk/src/wasm.ts +13 -0
  201. package/sdk/tsconfig.json +20 -0
  202. package/sdk/vite.config.examples.ts +32 -0
  203. package/tailwind.config.ts +38 -0
  204. package/tsconfig.json +20 -0
  205. package/vite.config.ts +60 -0
package/sdk/examples/tx-builder.html ADDED
@@ -0,0 +1,532 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Nockchain Transaction Builder</title>
7
+ <style>
8
+ * {
9
+ box-sizing: border-box;
10
+ margin: 0;
11
+ padding: 0;
12
+ }
13
+
14
+ body {
15
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
16
+ background: #0a0a0a;
17
+ color: #e0e0e0;
18
+ height: 100vh;
19
+ overflow: hidden;
20
+ }
21
+
22
+ .header {
23
+ background: #1a1a1a;
24
+ border-bottom: 1px solid #333;
25
+ padding: 1rem 1.5rem;
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ }
30
+
31
+ .header h1 {
32
+ font-size: 1.25rem;
33
+ font-weight: 600;
34
+ }
35
+
36
+ .connect-btn {
37
+ background: #3b82f6;
38
+ color: white;
39
+ border: none;
40
+ padding: 0.5rem 1rem;
41
+ border-radius: 0.375rem;
42
+ cursor: pointer;
43
+ font-size: 0.875rem;
44
+ font-weight: 500;
45
+ transition: background 0.2s;
46
+ }
47
+
48
+ .connect-btn:hover {
49
+ background: #2563eb;
50
+ }
51
+
52
+ .connect-btn:disabled {
53
+ background: #4b5563;
54
+ cursor: not-allowed;
55
+ }
56
+
57
+ .main {
58
+ display: grid;
59
+ grid-template-columns: 300px 1fr 350px;
60
+ height: calc(100vh - 65px);
61
+ gap: 1px;
62
+ background: #333;
63
+ }
64
+
65
+ .panel {
66
+ background: #1a1a1a;
67
+ overflow-y: auto;
68
+ padding: 1rem;
69
+ }
70
+
71
+ .panel-title {
72
+ font-size: 0.875rem;
73
+ font-weight: 600;
74
+ text-transform: uppercase;
75
+ letter-spacing: 0.05em;
76
+ color: #9ca3af;
77
+ margin-bottom: 1rem;
78
+ }
79
+
80
+ .btn {
81
+ background: #374151;
82
+ color: #e0e0e0;
83
+ border: none;
84
+ padding: 0.5rem 0.75rem;
85
+ border-radius: 0.375rem;
86
+ cursor: pointer;
87
+ font-size: 0.875rem;
88
+ transition: background 0.2s;
89
+ }
90
+
91
+ .btn:hover {
92
+ background: #4b5563;
93
+ }
94
+
95
+ .btn-primary {
96
+ background: #3b82f6;
97
+ }
98
+
99
+ .btn-primary:hover {
100
+ background: #2563eb;
101
+ }
102
+
103
+ .btn-sm {
104
+ padding: 0.25rem 0.5rem;
105
+ font-size: 0.75rem;
106
+ }
107
+
108
+ .btn-danger {
109
+ background: #dc2626;
110
+ }
111
+
112
+ .btn-danger:hover {
113
+ background: #b91c1c;
114
+ }
115
+
116
+ /* Lock List */
117
+ .lock-list-header {
118
+ display: flex;
119
+ gap: 0.5rem;
120
+ margin-bottom: 1rem;
121
+ }
122
+
123
+ .lock-item {
124
+ background: #262626;
125
+ border: 1px solid #333;
126
+ border-radius: 0.5rem;
127
+ margin-bottom: 0.75rem;
128
+ }
129
+
130
+ .lock-header {
131
+ padding: 0.75rem;
132
+ display: flex;
133
+ justify-content: space-between;
134
+ align-items: center;
135
+ cursor: pointer;
136
+ user-select: none;
137
+ }
138
+
139
+ .lock-header:hover {
140
+ background: #2a2a2a;
141
+ }
142
+
143
+ .lock-title {
144
+ font-size: 0.875rem;
145
+ font-weight: 500;
146
+ }
147
+
148
+ .lock-actions {
149
+ display: flex;
150
+ gap: 0.5rem;
151
+ align-items: center;
152
+ }
153
+
154
+ .note-list {
155
+ border-top: 1px solid #333;
156
+ padding: 0.5rem;
157
+ background: #1f1f1f;
158
+ }
159
+
160
+ .note-item {
161
+ padding: 0.5rem;
162
+ background: #262626;
163
+ border-radius: 0.375rem;
164
+ margin-bottom: 0.5rem;
165
+ display: flex;
166
+ justify-content: space-between;
167
+ align-items: center;
168
+ }
169
+
170
+ .note-info {
171
+ font-size: 0.75rem;
172
+ }
173
+
174
+ .note-amount {
175
+ font-weight: 600;
176
+ color: #fbbf24;
177
+ }
178
+
179
+ /* Spends */
180
+ .spend-item {
181
+ background: #262626;
182
+ border: 1px solid #333;
183
+ border-radius: 0.5rem;
184
+ padding: 1rem;
185
+ margin-bottom: 1rem;
186
+ }
187
+
188
+ .spend-balanced {
189
+ border-color: #10b981;
190
+ }
191
+
192
+ .spend-unbalanced {
193
+ border-color: #dc2626;
194
+ }
195
+
196
+ .input {
197
+ background: #1f1f1f;
198
+ border: 1px solid #333;
199
+ color: #e0e0e0;
200
+ padding: 0.5rem;
201
+ border-radius: 0.375rem;
202
+ font-size: 0.875rem;
203
+ width: 100%;
204
+ }
205
+
206
+ .input:focus {
207
+ outline: none;
208
+ border-color: #3b82f6;
209
+ }
210
+
211
+ .seed-item {
212
+ background: #1f1f1f;
213
+ padding: 0.5rem;
214
+ border-radius: 0.375rem;
215
+ margin-top: 0.5rem;
216
+ display: flex;
217
+ gap: 0.5rem;
218
+ align-items: center;
219
+ }
220
+
221
+ /* Modal */
222
+ .modal {
223
+ position: fixed;
224
+ top: 0;
225
+ left: 0;
226
+ right: 0;
227
+ bottom: 0;
228
+ background: rgba(0, 0, 0, 0.8);
229
+ display: none;
230
+ align-items: center;
231
+ justify-content: center;
232
+ z-index: 1000;
233
+ }
234
+
235
+ .modal.active {
236
+ display: flex;
237
+ }
238
+
239
+ .modal-content {
240
+ background: #1a1a1a;
241
+ border: 1px solid #333;
242
+ border-radius: 0.5rem;
243
+ padding: 1.5rem;
244
+ max-width: 500px;
245
+ width: 90%;
246
+ max-height: 80vh;
247
+ overflow-y: auto;
248
+ }
249
+
250
+ .modal-header {
251
+ display: flex;
252
+ justify-content: space-between;
253
+ align-items: center;
254
+ margin-bottom: 1rem;
255
+ }
256
+
257
+ .modal-title {
258
+ font-size: 1.125rem;
259
+ font-weight: 600;
260
+ }
261
+
262
+ .form-group {
263
+ margin-bottom: 1rem;
264
+ }
265
+
266
+ .form-label {
267
+ display: block;
268
+ font-size: 0.875rem;
269
+ font-weight: 500;
270
+ margin-bottom: 0.5rem;
271
+ color: #9ca3af;
272
+ }
273
+
274
+ .empty-state {
275
+ text-align: center;
276
+ padding: 2rem;
277
+ color: #6b7280;
278
+ font-size: 0.875rem;
279
+ }
280
+
281
+ .preimage-item {
282
+ background: #262626;
283
+ padding: 0.5rem;
284
+ border-radius: 0.375rem;
285
+ margin-bottom: 0.5rem;
286
+ display: flex;
287
+ justify-content: space-between;
288
+ align-items: center;
289
+ font-size: 0.75rem;
290
+ font-family: monospace;
291
+ }
292
+
293
+ .unlock-item {
294
+ background: #262626;
295
+ padding: 0.75rem;
296
+ border-radius: 0.375rem;
297
+ margin-bottom: 0.5rem;
298
+ font-size: 0.875rem;
299
+ }
300
+
301
+ .unlock-pkh {
302
+ border-left: 3px solid #3b82f6;
303
+ }
304
+
305
+ .unlock-hax {
306
+ border-left: 3px solid #fbbf24;
307
+ }
308
+
309
+ .unlock-brn {
310
+ border-left: 3px solid #dc2626;
311
+ }
312
+
313
+ .output-item {
314
+ background: #262626;
315
+ padding: 0.75rem;
316
+ border-radius: 0.375rem;
317
+ margin-bottom: 0.5rem;
318
+ font-size: 0.875rem;
319
+ }
320
+
321
+ .validation-status {
322
+ padding: 0.75rem;
323
+ border-radius: 0.375rem;
324
+ margin-bottom: 1rem;
325
+ font-size: 0.875rem;
326
+ font-weight: 500;
327
+ }
328
+
329
+ .validation-success {
330
+ background: #10b98144;
331
+ color: #10b981;
332
+ border: 1px solid #10b981;
333
+ }
334
+
335
+ .validation-error {
336
+ background: #dc262644;
337
+ color: #dc2626;
338
+ border: 1px solid #dc2626;
339
+ }
340
+
341
+ select {
342
+ background: #1f1f1f;
343
+ border: 1px solid #333;
344
+ color: #e0e0e0;
345
+ padding: 0.5rem;
346
+ border-radius: 0.375rem;
347
+ font-size: 0.875rem;
348
+ width: 100%;
349
+ }
350
+
351
+ .hidden {
352
+ display: none;
353
+ }
354
+
355
+ @keyframes fadeOut {
356
+ from {
357
+ opacity: 1;
358
+ }
359
+
360
+ to {
361
+ opacity: 0;
362
+ }
363
+ }
364
+ </style>
365
+ </head>
366
+
367
+ <body>
368
+ <!-- Header -->
369
+ <div class="header">
370
+ <h1>Transaction Builder</h1>
371
+ <button id="connectBtn" class="connect-btn">Connect Wallet</button>
372
+ </div>
373
+
374
+ <!-- Main Layout -->
375
+ <div class="main">
376
+ <!-- Left Panel: Locks & Notes -->
377
+ <div class="panel">
378
+ <div class="panel-title">Locks & Notes</div>
379
+ <div class="lock-list-header">
380
+ <button id="addLockBtn" class="btn btn-primary btn-sm">+ Add Lock</button>
381
+ <button id="refreshAllBtn" class="btn btn-sm">↻ Refresh All</button>
382
+ <button id="importLocksBtn" class="btn btn-sm">📥 Import</button>
383
+ <button id="exportLocksBtn" class="btn btn-sm">📤 Export</button>
384
+ </div>
385
+ <div id="lockList"></div>
386
+ </div>
387
+
388
+ <!-- Center Panel: Spends -->
389
+ <div class="panel">
390
+ <div class="panel-title">Transaction Spends</div>
391
+ <div id="spendsList">
392
+ <div class="empty-state">
393
+ Select input notes from the left panel to start building a transaction
394
+ </div>
395
+ </div>
396
+ </div>
397
+
398
+ <!-- Right Panel: Unlocker & Outputs -->
399
+ <div class="panel">
400
+ <div class="panel-title">Unlocks & Outputs</div>
401
+
402
+ <!-- Preimages -->
403
+ <div style="margin-bottom: 1.5rem">
404
+ <div
405
+ style="
406
+ display: flex;
407
+ justify-content: space-between;
408
+ align-items: center;
409
+ margin-bottom: 0.5rem;
410
+ "
411
+ >
412
+ <span style="font-size: 0.75rem; font-weight: 600; color: #9ca3af">PREIMAGES</span>
413
+ <button id="addPreimageBtn" class="btn btn-sm">+ Add</button>
414
+ </div>
415
+ <div id="preimagesList"></div>
416
+ </div>
417
+
418
+ <!-- Missing Unlocks -->
419
+ <div style="margin-bottom: 1.5rem">
420
+ <div style="font-size: 0.75rem; font-weight: 600; color: #9ca3af; margin-bottom: 0.5rem">
421
+ MISSING UNLOCKS
422
+ </div>
423
+ <div id="unlocksList"></div>
424
+ </div>
425
+
426
+ <!-- Transaction Info -->
427
+ <div style="margin-bottom: 1.5rem">
428
+ <div style="font-size: 0.75rem; font-weight: 600; color: #9ca3af; margin-bottom: 0.5rem">
429
+ TRANSACTION
430
+ </div>
431
+ <div id="txValidation"></div>
432
+ <div id="txInfo"></div>
433
+ </div>
434
+
435
+ <!-- Outputs -->
436
+ <div style="margin-bottom: 1.5rem">
437
+ <div style="font-size: 0.75rem; font-weight: 600; color: #9ca3af; margin-bottom: 0.5rem">
438
+ OUTPUTS
439
+ </div>
440
+ <div id="outputsList"></div>
441
+ </div>
442
+
443
+ <!-- Actions -->
444
+ <div style="display: flex; flex-direction: column; gap: 0.5rem">
445
+ <button id="downloadTxBtn" class="btn" disabled>Download Unsigned TX</button>
446
+ <button id="signTxBtn" class="btn btn-primary">Sign TX</button>
447
+ </div>
448
+
449
+ <!-- Signed TX Section (Hidden by default) -->
450
+ <div
451
+ id="signedTxSection"
452
+ class="hidden"
453
+ style="margin-top: 1.5rem; border-top: 1px solid #333; padding-top: 1.5rem"
454
+ >
455
+ <div style="font-size: 0.75rem; font-weight: 600; color: #10b981; margin-bottom: 0.5rem">
456
+ SIGNED TRANSACTION
457
+ </div>
458
+ <div
459
+ style="
460
+ background: #262626;
461
+ padding: 0.75rem;
462
+ border-radius: 0.375rem;
463
+ font-size: 0.875rem;
464
+ margin-bottom: 1rem;
465
+ "
466
+ >
467
+ <div style="margin-bottom: 0.5rem">
468
+ <span style="color: #9ca3af">TX ID:</span>
469
+ <span id="signedTxId" style="font-family: monospace; font-size: 0.75rem"></span>
470
+ </div>
471
+ </div>
472
+ <div id="signedTxValidation"></div>
473
+ <div style="display: flex; gap: 0.5rem">
474
+ <button id="downloadSignedTxBtn" class="btn" style="flex: 1">Download Signed</button>
475
+ <button id="submitSignedTxBtn" class="btn btn-primary" style="flex: 1">
476
+ Submit Signed
477
+ </button>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+
483
+ <!-- Add Lock Modal -->
484
+ <div id="addLockModal" class="modal">
485
+ <div class="modal-content">
486
+ <div class="modal-header">
487
+ <div class="modal-title">Add Lock</div>
488
+ <button id="closeLockModal" class="btn btn-sm">×</button>
489
+ </div>
490
+ <div id="lockModalContent">
491
+ <div class="form-group">
492
+ <label class="form-label">Lock Name</label>
493
+ <input type="text" id="lockNameInput" class="input" placeholder="My Custom Lock" />
494
+ </div>
495
+
496
+ <div class="form-group">
497
+ <label class="form-label">Lock Primitives</label>
498
+ <div id="primitivesContainer"></div>
499
+ <button id="addPrimitiveBtn" class="btn btn-sm" style="margin-top: 0.5rem">
500
+ + Add Primitive
501
+ </button>
502
+ </div>
503
+
504
+ <div style="display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem">
505
+ <button id="cancelAddLockBtn" class="btn">Cancel</button>
506
+ <button id="confirmAddLockBtn" class="btn btn-primary">Add Lock</button>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+
512
+ <!-- Add Preimage Modal -->
513
+ <div id="addPreimageModal" class="modal">
514
+ <div class="modal-content">
515
+ <div class="modal-header">
516
+ <div class="modal-title">Add Preimage</div>
517
+ <button id="closePreimageModal" class="btn btn-sm">×</button>
518
+ </div>
519
+ <div class="form-group">
520
+ <label class="form-label">Select JAM file</label>
521
+ <input type="file" id="preimageFileInput" accept=".jam,.txt" class="input" />
522
+ </div>
523
+ <div style="display: flex; gap: 0.5rem; justify-content: flex-end">
524
+ <button id="cancelPreimageBtn" class="btn">Cancel</button>
525
+ <button id="addPreimageConfirmBtn" class="btn btn-primary">Add</button>
526
+ </div>
527
+ </div>
528
+ </div>
529
+
530
+ <script type="module" src="./tx-builder.ts"></script>
531
+ </body>
532
+ </html>