@miradorlabs/parallax-web 1.0.4 → 1.0.7
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.
- package/README.md +300 -134
- package/dist/index.d.ts +206 -77
- package/dist/index.esm.js +770 -2828
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +772 -2827
- package/dist/index.umd.js.map +1 -1
- package/example/README.md +257 -0
- package/example/app.js +411 -0
- package/example/index.html +469 -0
- package/example/package-lock.json +1877 -0
- package/example/package.json +33 -0
- package/example/proxy-server.js +86 -0
- package/example/rollup.config.js +16 -0
- package/index.ts +3 -10
- package/package.json +3 -2
- package/src/parallax/ParallaxService.ts +296 -0
- package/src/parallax/index.ts +168 -155
|
@@ -0,0 +1,469 @@
|
|
|
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>Parallax Trace Demo</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
16
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
17
|
+
min-height: 100vh;
|
|
18
|
+
padding: 20px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.container {
|
|
22
|
+
max-width: 800px;
|
|
23
|
+
margin: 0 auto;
|
|
24
|
+
background: white;
|
|
25
|
+
border-radius: 12px;
|
|
26
|
+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
27
|
+
padding: 30px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
h1 {
|
|
31
|
+
color: #333;
|
|
32
|
+
margin-bottom: 10px;
|
|
33
|
+
font-size: 28px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.subtitle {
|
|
37
|
+
color: #666;
|
|
38
|
+
margin-bottom: 30px;
|
|
39
|
+
font-size: 14px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.section {
|
|
43
|
+
margin-bottom: 30px;
|
|
44
|
+
padding: 20px;
|
|
45
|
+
background: #f8f9fa;
|
|
46
|
+
border-radius: 8px;
|
|
47
|
+
border: 1px solid #e9ecef;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.section h2 {
|
|
51
|
+
color: #495057;
|
|
52
|
+
font-size: 18px;
|
|
53
|
+
margin-bottom: 15px;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
gap: 8px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.section h2::before {
|
|
60
|
+
content: "→";
|
|
61
|
+
color: #667eea;
|
|
62
|
+
font-weight: bold;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.form-group {
|
|
66
|
+
margin-bottom: 15px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
label {
|
|
70
|
+
display: block;
|
|
71
|
+
margin-bottom: 5px;
|
|
72
|
+
color: #495057;
|
|
73
|
+
font-weight: 500;
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
input, select, textarea {
|
|
78
|
+
width: 100%;
|
|
79
|
+
padding: 10px 12px;
|
|
80
|
+
border: 1px solid #ced4da;
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-family: inherit;
|
|
84
|
+
transition: border-color 0.2s;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
input:focus, select:focus, textarea:focus {
|
|
88
|
+
outline: none;
|
|
89
|
+
border-color: #667eea;
|
|
90
|
+
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
textarea {
|
|
94
|
+
resize: vertical;
|
|
95
|
+
min-height: 80px;
|
|
96
|
+
font-family: 'Monaco', 'Courier New', monospace;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.input-group {
|
|
100
|
+
display: grid;
|
|
101
|
+
grid-template-columns: 1fr 1fr;
|
|
102
|
+
gap: 15px;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
button {
|
|
106
|
+
background: #667eea;
|
|
107
|
+
color: white;
|
|
108
|
+
border: none;
|
|
109
|
+
padding: 12px 24px;
|
|
110
|
+
border-radius: 6px;
|
|
111
|
+
font-size: 14px;
|
|
112
|
+
font-weight: 600;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
transition: all 0.2s;
|
|
115
|
+
width: 100%;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
button:hover {
|
|
119
|
+
background: #5568d3;
|
|
120
|
+
transform: translateY(-1px);
|
|
121
|
+
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
button:active {
|
|
125
|
+
transform: translateY(0);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
button:disabled {
|
|
129
|
+
background: #adb5bd;
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
transform: none;
|
|
132
|
+
box-shadow: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.button-group {
|
|
136
|
+
display: grid;
|
|
137
|
+
grid-template-columns: 1fr 1fr;
|
|
138
|
+
gap: 10px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.btn-secondary {
|
|
142
|
+
background: #6c757d;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.btn-secondary:hover {
|
|
146
|
+
background: #5a6268;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.btn-danger {
|
|
150
|
+
background: #dc3545;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.btn-danger:hover {
|
|
154
|
+
background: #c82333;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.btn-success {
|
|
158
|
+
background: #28a745;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.btn-success:hover {
|
|
162
|
+
background: #218838;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.status {
|
|
166
|
+
padding: 15px;
|
|
167
|
+
border-radius: 6px;
|
|
168
|
+
margin-top: 15px;
|
|
169
|
+
font-size: 14px;
|
|
170
|
+
display: none;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.status.show {
|
|
174
|
+
display: block;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.status.success {
|
|
178
|
+
background: #d4edda;
|
|
179
|
+
border: 1px solid #c3e6cb;
|
|
180
|
+
color: #155724;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.status.error {
|
|
184
|
+
background: #f8d7da;
|
|
185
|
+
border: 1px solid #f5c6cb;
|
|
186
|
+
color: #721c24;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.status.info {
|
|
190
|
+
background: #d1ecf1;
|
|
191
|
+
border: 1px solid #bee5eb;
|
|
192
|
+
color: #0c5460;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.trace-info {
|
|
196
|
+
background: #e7f3ff;
|
|
197
|
+
border: 1px solid #b3d9ff;
|
|
198
|
+
padding: 15px;
|
|
199
|
+
border-radius: 6px;
|
|
200
|
+
margin-top: 15px;
|
|
201
|
+
display: none;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.trace-info.show {
|
|
205
|
+
display: block;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.trace-info strong {
|
|
209
|
+
color: #004085;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.trace-info code {
|
|
213
|
+
background: white;
|
|
214
|
+
padding: 2px 6px;
|
|
215
|
+
border-radius: 3px;
|
|
216
|
+
font-family: 'Monaco', 'Courier New', monospace;
|
|
217
|
+
font-size: 12px;
|
|
218
|
+
color: #495057;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.log {
|
|
222
|
+
background: #1e1e1e;
|
|
223
|
+
color: #d4d4d4;
|
|
224
|
+
padding: 15px;
|
|
225
|
+
border-radius: 6px;
|
|
226
|
+
font-family: 'Monaco', 'Courier New', monospace;
|
|
227
|
+
font-size: 12px;
|
|
228
|
+
max-height: 300px;
|
|
229
|
+
overflow-y: auto;
|
|
230
|
+
line-height: 1.6;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.log-entry {
|
|
234
|
+
margin-bottom: 8px;
|
|
235
|
+
padding: 4px 0;
|
|
236
|
+
border-bottom: 1px solid #333;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.log-entry:last-child {
|
|
240
|
+
border-bottom: none;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.log-time {
|
|
244
|
+
color: #858585;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
.log-success {
|
|
248
|
+
color: #4ec9b0;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.log-error {
|
|
252
|
+
color: #f48771;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.log-info {
|
|
256
|
+
color: #569cd6;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.log-warn {
|
|
260
|
+
color: #dcdcaa;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.chip {
|
|
264
|
+
display: inline-block;
|
|
265
|
+
background: #e9ecef;
|
|
266
|
+
padding: 4px 10px;
|
|
267
|
+
border-radius: 12px;
|
|
268
|
+
font-size: 12px;
|
|
269
|
+
margin-right: 5px;
|
|
270
|
+
margin-bottom: 5px;
|
|
271
|
+
color: #495057;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.tags-container {
|
|
275
|
+
display: flex;
|
|
276
|
+
flex-wrap: wrap;
|
|
277
|
+
gap: 5px;
|
|
278
|
+
margin-top: 10px;
|
|
279
|
+
min-height: 30px;
|
|
280
|
+
padding: 10px;
|
|
281
|
+
background: white;
|
|
282
|
+
border-radius: 6px;
|
|
283
|
+
border: 1px solid #ced4da;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.attributes-container {
|
|
287
|
+
background: white;
|
|
288
|
+
padding: 10px;
|
|
289
|
+
border-radius: 6px;
|
|
290
|
+
border: 1px solid #ced4da;
|
|
291
|
+
margin-top: 10px;
|
|
292
|
+
min-height: 60px;
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
.attribute-item {
|
|
296
|
+
display: flex;
|
|
297
|
+
align-items: center;
|
|
298
|
+
gap: 8px;
|
|
299
|
+
margin-bottom: 8px;
|
|
300
|
+
font-size: 13px;
|
|
301
|
+
font-family: 'Monaco', 'Courier New', monospace;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.attribute-key {
|
|
305
|
+
color: #667eea;
|
|
306
|
+
font-weight: 600;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.attribute-value {
|
|
310
|
+
color: #495057;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.hidden {
|
|
314
|
+
display: none;
|
|
315
|
+
}
|
|
316
|
+
</style>
|
|
317
|
+
</head>
|
|
318
|
+
<body>
|
|
319
|
+
<div class="container">
|
|
320
|
+
<h1>🔍 Parallax Trace Builder</h1>
|
|
321
|
+
<p class="subtitle">Create and manage transaction traces with the Parallax SDK</p>
|
|
322
|
+
<div style="background: #e7f3ff; border: 1px solid #b3d9ff; padding: 10px; border-radius: 6px; margin-bottom: 20px; font-size: 13px;">
|
|
323
|
+
<strong>🔧 Proxy Mode:</strong> <span id="proxyStatus">Checking...</span>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<!-- Step 1: Create Trace -->
|
|
327
|
+
<div class="section">
|
|
328
|
+
<h2>Create New Trace</h2>
|
|
329
|
+
|
|
330
|
+
<div class="form-group">
|
|
331
|
+
<label for="traceName">Trace Name</label>
|
|
332
|
+
<input type="text" id="traceName" placeholder="e.g., swap_execution, payment_flow" value="demo_transaction">
|
|
333
|
+
</div>
|
|
334
|
+
|
|
335
|
+
<div class="form-group">
|
|
336
|
+
<label>Transaction Data</label>
|
|
337
|
+
<div class="input-group">
|
|
338
|
+
<div>
|
|
339
|
+
<label for="fromAddress">From Address</label>
|
|
340
|
+
<input type="text" id="fromAddress" placeholder="0xabc..." value="0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb">
|
|
341
|
+
</div>
|
|
342
|
+
<div>
|
|
343
|
+
<label for="toAddress">To Address</label>
|
|
344
|
+
<input type="text" id="toAddress" placeholder="0xdef..." value="0x1234567890123456789012345678901234567890">
|
|
345
|
+
</div>
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
<div class="form-group">
|
|
350
|
+
<div class="input-group">
|
|
351
|
+
<div>
|
|
352
|
+
<label for="value">Value (ETH)</label>
|
|
353
|
+
<input type="text" id="value" placeholder="0.1" value="0.5">
|
|
354
|
+
</div>
|
|
355
|
+
<div>
|
|
356
|
+
<label for="network">Network</label>
|
|
357
|
+
<select id="network">
|
|
358
|
+
<option value="ethereum">Ethereum</option>
|
|
359
|
+
<option value="polygon">Polygon</option>
|
|
360
|
+
<option value="arbitrum">Arbitrum</option>
|
|
361
|
+
<option value="optimism">Optimism</option>
|
|
362
|
+
</select>
|
|
363
|
+
</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
|
|
367
|
+
<button id="createTraceBtn">Create Trace</button>
|
|
368
|
+
|
|
369
|
+
<div id="traceInfo" class="trace-info">
|
|
370
|
+
<strong>Trace Created!</strong><br>
|
|
371
|
+
<div style="margin-top: 8px;">
|
|
372
|
+
Trace ID: <code id="traceId"></code><br>
|
|
373
|
+
Transaction ID: <code id="txId"></code>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<!-- Step 2: Add Attributes -->
|
|
379
|
+
<div id="attributesSection" class="section hidden">
|
|
380
|
+
<h2>Add Custom Attributes</h2>
|
|
381
|
+
|
|
382
|
+
<div class="input-group">
|
|
383
|
+
<div class="form-group">
|
|
384
|
+
<label for="attrKey">Attribute Key</label>
|
|
385
|
+
<input type="text" id="attrKey" placeholder="e.g., slippage_bps, gas_limit">
|
|
386
|
+
</div>
|
|
387
|
+
<div class="form-group">
|
|
388
|
+
<label for="attrValue">Attribute Value</label>
|
|
389
|
+
<input type="text" id="attrValue" placeholder="e.g., 50, 21000">
|
|
390
|
+
</div>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
<button id="addAttributeBtn" class="btn-secondary">Add Attribute</button>
|
|
394
|
+
|
|
395
|
+
<div class="attributes-container" id="attributesContainer">
|
|
396
|
+
<em style="color: #6c757d; font-size: 13px;">No custom attributes added yet</em>
|
|
397
|
+
</div>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<!-- Step 3: Add Tags -->
|
|
401
|
+
<div id="tagsSection" class="section hidden">
|
|
402
|
+
<h2>Add Tags</h2>
|
|
403
|
+
|
|
404
|
+
<div class="form-group">
|
|
405
|
+
<label for="tagInput">Tag Name</label>
|
|
406
|
+
<input type="text" id="tagInput" placeholder="e.g., dex, swap, critical">
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<button id="addTagBtn" class="btn-secondary">Add Tag</button>
|
|
410
|
+
|
|
411
|
+
<div class="tags-container" id="tagsContainer">
|
|
412
|
+
<em style="color: #6c757d; font-size: 13px;">No tags added yet</em>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
|
|
416
|
+
<!-- Step 4: Add Events -->
|
|
417
|
+
<div id="eventsSection" class="section hidden">
|
|
418
|
+
<h2>Add Events</h2>
|
|
419
|
+
|
|
420
|
+
<div class="form-group">
|
|
421
|
+
<label for="eventName">Event Name</label>
|
|
422
|
+
<input type="text" id="eventName" placeholder="e.g., wallet_connected, quote_received">
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<div class="form-group">
|
|
426
|
+
<label for="eventDetails">Event Details (JSON or text)</label>
|
|
427
|
+
<textarea id="eventDetails" placeholder='{"amount": 100, "currency": "USD"}'></textarea>
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<button id="addEventBtn" class="btn-secondary">Add Event</button>
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
<!-- Step 5: Submit with Transaction Hash -->
|
|
434
|
+
<div id="submitSection" class="section hidden">
|
|
435
|
+
<h2>Submit Trace</h2>
|
|
436
|
+
|
|
437
|
+
<div class="form-group">
|
|
438
|
+
<label for="txHash">Transaction Hash (optional)</label>
|
|
439
|
+
<input type="text" id="txHash" placeholder="0x123...">
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<div class="form-group">
|
|
443
|
+
<label for="chainId">Chain ID (optional)</label>
|
|
444
|
+
<input type="text" id="chainId" placeholder="1" value="1">
|
|
445
|
+
</div>
|
|
446
|
+
|
|
447
|
+
<div class="button-group">
|
|
448
|
+
<button id="submitBtn" class="btn-success">Submit Trace</button>
|
|
449
|
+
<button id="resetBtn" class="btn-danger">Reset & Start Over</button>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
|
|
453
|
+
<!-- Activity Log -->
|
|
454
|
+
<div class="section">
|
|
455
|
+
<h2>Activity Log</h2>
|
|
456
|
+
<div id="log" class="log">
|
|
457
|
+
<div class="log-entry">
|
|
458
|
+
<span class="log-time">[00:00:00]</span>
|
|
459
|
+
<span class="log-info">Ready to create a trace...</span>
|
|
460
|
+
</div>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
|
|
464
|
+
<div id="status" class="status"></div>
|
|
465
|
+
</div>
|
|
466
|
+
|
|
467
|
+
<script type="module" src="./bundle.js"></script>
|
|
468
|
+
</body>
|
|
469
|
+
</html>
|