Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
549 lines (534 loc) · 29.7 KB
/
Copy pathindex.html
File metadata and controls
549 lines (534 loc) · 29.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<!-- Primary Meta -->
<meta name="title" content="pool" />
<meta
name="description"
content="A lightweight interface for PoolTogether V5 WETH vaults."
/>
<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pool.baboya.eth.limo" />
<meta property="og:title" content="pool" />
<meta
property="og:description"
content="A lightweight interface for PoolTogether V5 WETH vaults."
/>
<meta
property="og:image"
content="https://pool.baboya.eth.limo/assets/img/pool.png"
/>
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://pool.baboya.eth.limo" />
<meta name="twitter:title" content="pool" />
<meta
name="twitter:description"
content="A lightweight interface for PoolTogether V5 WETH vaults."
/>
<meta
name="twitter:image"
content="https://pool.baboya.eth.limo/assets/img/pool.png"
/>
<title>pool</title>
<script>
(() => {
const m = localStorage.themeMode;
const t =
m === "light" || m === "dark"
? m
: matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.dataset.theme = t;
})();
</script>
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="./assets/img/apple-touch-icon.png"
/>
<link rel="stylesheet" href="./assets/css/styleKit.css" />
<style>
/* Base layout */
:root {
--color-bg: #F4F6FA;
--color-txt: #1e074b;
--vault-color-bg: color-mix(in srgb, var(--color-bg) 95%, black 10%);
--vault-shadow: 0 4px 10px color-mix(in srgb, black 15%, transparent);
--btn-color-hvr: color-mix(in srgb, var(--color-bg) 85%, black 15%);
--focus-color: #1e074b;
}
[data-theme="dark"] {
--color-bg: #1e074b;
--color-txt: #dbcffc;
--vault-color-bg: color-mix(in srgb, var(--color-bg) 92%, white 8%);
--vault-shadow: 0 4px 10px color-mix(in srgb, black 40%, transparent);
--btn-color-hvr: color-mix(in srgb, var(--color-bg) 85%, white 15%);
--focus-color: #dbcffc;
}
html {
block-size: 100dvh;
inline-size: 100%;
padding: env(safe-area-inset-top) env(safe-area-inset-right)
env(safe-area-inset-bottom) env(safe-area-inset-left);
box-sizing: border-box;
}
body {
background: var(--color-bg);
color: var(--color-txt);
font-family: "Helvetica Neue", system-ui, sans-serif;
transition:
background 0.3s,
color 0.3s;
display: flex;
justify-content: center;
align-items: center;
min-height: 100dvh;
margin: 0;
}
/* Vault styles */
input::placeholder {
opacity: 0.4;
color: var(--color-txt);
}
.vault-interaction {
max-width: 500px;
width: 500px;
padding: 20px;
display: grid;
gap: 18px;
}
.vault-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.header-right-group {
display: flex;
align-items: center;
gap: 15px;
}
.pooltogether-logo {
width: 91px;
height: 36px;
color: var(--color-txt);
}
.network-logo {
width: 26px;
height: 26px;
border-radius: 50%;
}
.vault-interaction h2 {
margin: 0;
font-size: 1.4em;
text-align: center;
opacity: 0.9;
}
.row {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: center;
}
.btn {
font-size: 1.1em;
color: var(--color-txt);
background: var(--dk-connect-color-btn);
border: none;
height: 44px;
padding: 7.5px 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
flex: 1;
}
.btn:hover {
background-color: var(--btn-color-hvr);
color: var(--color-btn-txt);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: translateY(0);
background-color: transparent !important;
}
/* Accordion Styles */
.accordion-content {
display: grid;
gap: 15px;
background-color: var(--color-bg);
padding: 15px;
border-radius: 10px;
overflow: hidden;
box-sizing: content-box;
transition: all 0.4s ease-in-out;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
border: 1px solid var(--dk-connect-color-btn);
}
.accordion-content.open {
padding-top: 15px;
padding-bottom: 15px;
border-color: var(--dk-connect-color-btn);
}
.balance-display {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1em;
opacity: 0.8;
}
.balance-label-group {
display: flex;
align-items: center;
gap: 8px;
}
.token-icon {
width: 24px;
height: 24px;
}
.balance-action-group {
display: flex;
align-items: center;
gap: 8px;
}
.btn-max-small {
padding: 2px 8px;
font-size: 0.8em;
border-radius: 5px;
border: none;
background: transparent;
color: var(--color-txt);
cursor: pointer;
transition: opacity 0.3s;
}
.btn-max-small:hover {
opacity: 0.6;
}
.input-group {
display: flex;
align-items: center;
}
.accordion-input {
font-size: 1.1em;
color: var(--color-txt);
background: var(--color-bg);
border: 1px solid var(--dk-connect-color-btn);
height: 44px;
padding: 7.5px 15px;
border-radius: 10px 0 0 10px;
width: 100%;
box-sizing: border-box;
text-align: left;
flex-grow: 1;
border-right: none;
}
.accordion-input.wrap {
border-radius: 10px;
border-right: 1px solid var(--dk-connect-color-btn);
}
.accordion-input:focus {
outline: none;
border-color: var(--focus-color);
}
.accordion-input:focus + .btn-max {
border-color: var(--focus-color);
}
.btn-max {
height: 44px;
border: 1px solid var(--dk-connect-color-btn);
border-left: 0;
background: var(--color-bg);
color: var(--color-txt);
padding: 0 15px;
border-radius: 0 10px 10px 0;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s;
}
.btn-max:hover {
background-color: var(--btn-color-hvr);
}
.btn-execute {
width: 100%;
background-color: var(--dk-connect-color-btn);
transition: background-color 0.3s;
}
.btn-execute:hover {
background-color: var(--btn-color-hvr);
}
.vault-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.github-link {
color: var(--color-txt);
text-decoration: none;
font-size: 0.9em;
color: var(--color-txt);
opacity: 0.6;
transition: opacity 0.3s;
&:hover {
opacity: 0.9;
}
}
</style>
</head>
<body>
<!-- RPC Settings Modal -->
<div id="rpc-modal" class="rpc-modal">
<div class="rpc-modal-content">
<button type="button" class="rpc-close-btn" aria-label="Close"></button>
<h2>Custom RPC Settings</h2>
<div id="rpc-inputs"></div>
<button id="save-rpc-btn">Save</button>
</div>
</div>
<!-- Notifications Container -->
<div id="notificationContainer"></div>
<div class="vault-interaction">
<div class="vault-header">
<svg class="pooltogether-logo" role="img" aria-label="PoolTogether" width="183" height="72" viewBox="0 0 183 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="pooltogether-logo">
<g id="pooltogether-trophy">
<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M7.76384 15.9923C7.64943 14.9392 8.2054 14.8235 8.49769 14.8974C8.49769 14.8974 13.3326 16.9512 22.9879 17.1197C32.6432 17.2882 37.9568 14.9694 37.9568 14.9694C38.2494 14.8969 38.8048 15.0153 38.6852 16.0679C38.5657 17.1205 38.3828 20.1617 38.3063 21.5507L43.8631 21.5643C44.5456 21.5416 45.8071 21.9346 45.3934 23.6884C45.3092 24.0452 45.1857 24.6556 45.0271 25.4392C44.2113 29.4705 42.4676 38.0869 40.3807 40.3468C38.9141 42.0981 36.9378 42.9706 35.4015 43.3325C34.1217 43.713 32.7871 43.646 32.3256 43.6229L32.3255 43.6229C32.2594 43.6195 32.2112 43.6171 32.1836 43.6171C31.1563 45.15 28.5306 48.4631 26.2469 49.4519C25.5025 49.7206 25.5084 49.9911 25.5131 50.2037C25.5135 50.221 25.5138 50.2379 25.5138 50.2544C25.6308 52.2288 26.127 56.6463 27.1753 58.5207C27.3143 58.8005 27.3534 59.0133 27.3802 59.1593C27.4095 59.3189 27.4242 59.3987 27.5387 59.399L28.9279 59.4024C29.0742 59.4027 29.4251 59.4036 29.6584 59.6966C29.7831 59.8532 30.0017 59.8497 30.2396 59.8458C30.5581 59.8406 30.9111 59.8348 31.1195 60.212C31.3425 60.6158 31.2961 61.047 31.2722 61.2692C31.267 61.3176 31.2629 61.3561 31.2628 61.3822L33.4563 61.3876C33.7244 61.3882 34.2603 61.5211 34.259 62.0476L34.2483 66.4346C34.2481 66.5145 34.2424 66.5799 34.2377 66.6333C34.2167 66.8732 34.2167 66.8732 34.8321 66.8747L36.7332 66.8793C36.8552 66.8796 37.0987 66.8949 37.0971 67.5383L37.0923 69.5124C37.092 69.6587 37.0912 69.9511 36.4332 69.9495L9.75255 69.8843C9.0945 69.8827 9.09521 69.5903 9.09557 69.444L9.10039 67.4699C9.10197 66.8265 9.34555 66.8124 9.46758 66.8127L11.3686 66.8174C11.9841 66.8189 11.9841 66.8189 11.9642 66.5789L11.9642 66.5788L11.9642 66.5788C11.9598 66.5253 11.9544 66.46 11.9546 66.3801L11.9653 61.9931C11.9666 61.4667 12.5031 61.3364 12.7712 61.337L14.9647 61.3424C14.9648 61.3163 14.9608 61.2778 14.9559 61.2294C14.9331 61.007 14.8888 60.5756 15.1138 60.1729C15.324 59.7967 15.677 59.8042 15.9954 59.811C16.2333 59.816 16.4519 59.8207 16.5774 59.6646C16.8121 59.3727 17.163 59.3736 17.3093 59.374L18.6985 59.3774C18.813 59.3776 18.8281 59.2979 18.8581 59.1385C18.8857 58.9926 18.9258 58.78 19.0662 58.5009C20.1236 56.6316 20.6414 52.2167 20.7681 50.2428C20.7681 50.2264 20.7686 50.2095 20.769 50.1923L20.769 50.1921C20.7747 49.9795 20.782 49.709 20.0389 49.4367C17.7601 48.4368 15.1506 45.1109 14.1307 43.573C14.1034 43.5729 14.0555 43.575 13.9898 43.578L13.9895 43.578L13.9888 43.5781L13.9887 43.5781C13.5271 43.599 12.1922 43.6594 10.9143 43.2726C9.37977 42.9033 7.40777 42.0211 5.94973 40.2627C3.87388 37.9926 2.17234 29.3678 1.37625 25.3325C1.22151 24.5481 1.10097 23.9372 1.01855 23.58C0.613388 21.8242 1.87682 21.4373 2.55918 21.4634L8.11602 21.477C8.0463 20.0876 7.87825 17.0455 7.76384 15.9923ZM4.05614 23.9079C3.20131 23.8929 3.4043 24.8923 3.55874 25.6527C3.57878 25.7514 3.59801 25.8461 3.614 25.934C3.7532 26.6991 4.39981 29.8527 6.10103 34.9264C7.80225 40.0001 11.0907 40.3694 12.5222 39.9198C11.5423 37.801 9.47429 31.0193 9.0576 28.673C8.6409 26.3268 8.12259 23.9788 7.51263 23.9682L4.05614 23.9079ZM42.8047 25.9546C42.9724 25.1971 43.1928 24.2013 42.3378 24.2013L38.8808 24.2013C38.2707 24.2013 37.7115 26.5399 37.254 28.8785C36.7964 31.2171 34.6103 37.9617 33.5936 40.0631C35.0171 40.5376 38.3114 40.2258 40.1009 35.1825C41.8904 30.1393 42.592 26.9975 42.7445 26.2349C42.7621 26.1473 42.7829 26.053 42.8047 25.9547L42.8047 25.9546Z" fill="#FFB636"/>
<path id="Ellipse 1" d="M38.4795 15.1222C38.4672 16.5261 31.6747 17.6049 23.3079 17.5319C14.9411 17.4589 7.96509 16.2581 7.97734 14.8543C7.9896 13.4505 14.9855 12.3752 23.3523 12.4482C31.7191 12.5212 38.4917 13.7184 38.4795 15.1222Z" fill="#FFD469"/>
<path id="Ellipse 2" d="M34.0877 20.1265C34.8352 20.1265 34.9687 20.1265 36.3243 19.6521C36.1563 20.5541 35.2722 27.3901 34.9687 28.4629C34.1577 31.3297 33.2418 35.76 32.0544 36.6162C31.8288 36.7789 30.8345 36.6162 30.4643 36.3778C30.0942 36.1393 31.3767 33.6817 32.9355 28.4629C33.8166 22.8375 33.5455 20.3976 34.0877 20.1265Z" fill="#FFCC4E"/>
<path
id="ether-diamond"
fill-rule="evenodd"
clip-rule="evenodd"
d="M28.1379 33.8175L23.1536 36.9543L18.1912 33.7832L23.139 40.9976L23.139 40.9996L23.1397 40.9986L23.1404 40.9996L23.1404 40.9976L28.1379 33.8175ZM23.2025 23.198L23.2025 23.1933L23.2012 23.1956L23.1999 23.1934L23.1998 23.1979L18.1661 31.7996L23.1594 34.9309L23.1593 34.9326L23.1607 34.9318L23.162 34.9326L23.162 34.931L28.1767 31.8342L23.2025 23.198Z"
fill="#1e074b"
/>
</g>
<g id="pooltogether-white-wordmark">
<path id="pool" d="M74.5378 12.926C83.7733 12.926 91.2602 20.5379 91.2602 29.9276V39.7035C91.2602 49.0932 83.7733 56.7051 74.5378 56.7051C73.0871 56.7051 71.6795 56.5172 70.3374 56.1642L70.3375 57.3183C70.3375 64.1872 64.8341 69.7686 58.0032 69.8796L57.7958 69.8813V32.4778L57.8149 32.4774L57.8155 29.9276C57.8155 20.5379 65.3023 12.926 74.5378 12.926ZM149.424 12.926C158.665 12.926 166.157 20.5814 166.157 30.0247V39.8565C166.157 49.2999 158.665 56.9553 149.424 56.9553C140.183 56.9553 132.692 49.2999 132.692 39.8565V30.0247C132.692 20.5814 140.183 12.926 149.424 12.926ZM111.976 12.1181C121.217 12.1181 128.708 19.7735 128.708 29.2169V39.0486C128.708 48.492 121.217 56.1474 111.976 56.1474C102.735 56.1474 95.244 48.492 95.244 39.0486V29.2169C95.244 19.7735 102.735 12.1181 111.976 12.1181ZM182.889 0V43.3775C182.889 50.3596 177.295 56.0329 170.351 56.1457L170.14 56.1474V12.7699C170.14 5.71728 175.848 0 182.889 0ZM149.424 25.7501C147.114 25.7501 145.241 27.6639 145.241 30.0247V39.8565C145.241 42.2174 147.114 44.1312 149.424 44.1312C151.735 44.1312 153.607 42.2174 153.607 39.8565V30.0247C153.607 27.6639 151.735 25.7501 149.424 25.7501ZM74.5378 25.6772C72.2289 25.6772 70.3572 27.5802 70.3572 29.9276V39.7035C70.3572 42.0509 72.2289 43.9539 74.5378 43.9539C76.8467 43.9539 78.7184 42.0509 78.7184 39.7035V29.9276C78.7184 27.5802 76.8467 25.6772 74.5378 25.6772ZM111.976 24.9422C109.666 24.9422 107.793 26.856 107.793 29.2169V39.0486C107.793 41.4095 109.666 43.3233 111.976 43.3233C114.286 43.3233 116.159 41.4095 116.159 39.0486V29.2169C116.159 26.856 114.286 24.9422 111.976 24.9422Z" fill="currentColor"/>
<g id="together">
<path d="M136.063 67.8327H135.715C135.369 67.8327 135.065 67.509 135.065 67.0048V64.6226H135.807C136.152 64.6226 136.416 64.3941 136.416 64.069C136.416 63.9047 136.354 63.7585 136.242 63.6539C136.131 63.5499 135.978 63.4951 135.807 63.4951H135.065V62.1592C135.065 61.7945 134.793 61.5243 134.426 61.5243C134.059 61.5243 133.786 61.7945 133.786 62.1592V63.4951H133.444C133.273 63.4951 133.12 63.5499 133.008 63.6539C132.896 63.7585 132.835 63.9047 132.835 64.069C132.835 64.3941 133.098 64.6226 133.444 64.6226H133.786V67.0048C133.786 68.191 134.61 69.1025 135.715 69.1025H135.899C136.297 69.1025 136.631 68.8515 136.631 68.4676C136.631 68.1196 136.395 67.8327 136.063 67.8327Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M143.775 66.2023L143.775 66.2015C143.765 64.4778 142.543 63.2512 140.834 63.2512C139.974 63.2512 139.235 63.5548 138.71 64.0799C138.185 64.6049 137.882 65.344 137.882 66.2023C137.882 67.0557 138.185 67.7923 138.71 68.3159C139.235 68.8396 139.974 69.1432 140.834 69.1432C141.689 69.1432 142.426 68.8395 142.949 68.3158C143.472 67.7922 143.775 67.0556 143.775 66.2023ZM140.834 64.4195C141.333 64.4195 141.751 64.6044 142.045 64.9153C142.34 65.2268 142.517 65.6719 142.517 66.2023C142.517 66.7326 142.34 67.175 142.046 67.4838C141.752 67.7922 141.333 67.9749 140.834 67.9749C140.335 67.9749 139.914 67.7921 139.617 67.4835C139.32 67.1745 139.141 66.7321 139.141 66.2023C139.141 65.1484 139.847 64.4195 140.834 64.4195Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.229 71.4085C147.222 71.4085 146.304 71.0082 145.694 70.2437C145.581 70.1057 145.538 69.9447 145.566 69.7904C145.593 69.6372 145.687 69.5022 145.824 69.409L145.825 69.4083C146.132 69.2055 146.502 69.2969 146.703 69.5582C147.044 69.9904 147.567 70.2403 148.249 70.2403C148.708 70.2403 149.126 70.0723 149.43 69.7542C149.734 69.4362 149.932 68.9588 149.932 68.3254V68.2449C149.48 68.8107 148.822 69.1432 148.045 69.1432C147.243 69.1432 146.554 68.8373 146.066 68.3125C145.578 67.7884 145.298 67.0529 145.298 66.2023C145.298 65.344 145.6 64.6049 146.125 64.0799C146.65 63.5548 147.389 63.2512 148.249 63.2512C149.959 63.2512 151.18 64.4778 151.191 66.2015L151.191 66.2023L151.191 68.3965C151.191 70.0656 149.983 71.4085 148.229 71.4085ZM148.249 67.9749C147.75 67.9749 147.329 67.7921 147.032 67.4835C146.735 67.1745 146.556 66.7321 146.556 66.2023C146.556 65.1484 147.262 64.4195 148.249 64.4195C148.748 64.4195 149.166 64.6044 149.461 64.9153C149.755 65.2268 149.932 65.6719 149.932 66.2023C149.932 66.7326 149.755 67.175 149.461 67.4838C149.167 67.7922 148.748 67.9749 148.249 67.9749Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M157.669 67.6484C157.444 67.4644 157.113 67.4719 156.867 67.6548C156.611 67.8427 156.147 68.0156 155.757 68.0156C154.829 68.0156 154.144 67.4752 153.949 66.6848H157.68C157.847 66.6848 157.997 66.6292 158.107 66.5253C158.217 66.4209 158.279 66.2751 158.279 66.1109C158.279 65.284 158.033 64.5683 157.57 64.0577C157.106 63.5455 156.433 63.2512 155.603 63.2512C154.763 63.2512 154.038 63.5555 153.524 64.0808C153.01 64.6059 152.713 65.3447 152.713 66.2023C152.713 67.057 153.027 67.7941 153.569 68.3174C154.11 68.8404 154.872 69.1432 155.757 69.1432C156.407 69.1432 157.203 68.8811 157.688 68.4963C157.828 68.3883 157.904 68.2397 157.899 68.0787C157.893 67.92 157.81 67.7695 157.672 67.6505L157.669 67.6484ZM155.603 64.3788C156.033 64.3788 156.371 64.5225 156.616 64.7615C156.834 64.9736 156.985 65.2672 157.058 65.6182H153.96C154.047 65.2669 154.22 64.9745 154.465 64.7629C154.743 64.5226 155.124 64.3788 155.603 64.3788Z" fill="currentColor"/>
<path d="M162.377 67.8327H162.029C161.683 67.8327 161.379 67.509 161.379 67.0048V64.6226H162.121C162.466 64.6226 162.73 64.3941 162.73 64.069C162.73 63.9047 162.669 63.7585 162.557 63.6539C162.445 63.5499 162.292 63.4951 162.121 63.4951H161.379V62.1592C161.379 61.7945 161.107 61.5243 160.74 61.5243C160.373 61.5243 160.101 61.7945 160.101 62.1592V63.4951H159.758C159.587 63.4951 159.434 63.5499 159.322 63.6539C159.21 63.7585 159.149 63.9047 159.149 64.069C159.149 64.3941 159.413 64.6226 159.758 64.6226H160.101V67.0048C160.101 68.191 160.924 69.1025 162.029 69.1025H162.213C162.611 69.1025 162.945 68.8515 162.945 68.4676C162.945 68.1196 162.709 67.8327 162.377 67.8327Z" fill="currentColor"/>
<path d="M167.394 63.2411C166.776 63.2411 166.216 63.4329 165.782 63.7676V61.5599C165.782 61.3771 165.717 61.2142 165.599 61.0967C165.481 60.9793 165.317 60.9148 165.133 60.9148C164.949 60.9148 164.785 60.9793 164.666 61.0967C164.548 61.2142 164.483 61.3771 164.483 61.5599V68.4676C164.483 68.6504 164.548 68.8133 164.666 68.9307C164.785 69.0482 164.949 69.1127 165.133 69.1127C165.317 69.1127 165.481 69.0482 165.599 68.9307C165.717 68.8133 165.782 68.6504 165.782 68.4676V65.6029C165.782 64.9499 166.37 64.4296 167.189 64.4296C167.632 64.4296 168.003 64.5526 168.264 64.7974C168.523 65.0409 168.688 65.4207 168.688 65.9686V68.4676C168.688 68.8324 168.97 69.1127 169.338 69.1127C169.705 69.1127 169.987 68.8324 169.987 68.4676V65.9686C169.987 65.0983 169.712 64.4137 169.243 63.9463C168.774 63.4793 168.123 63.2411 167.394 63.2411Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M176.659 66.6848H172.928C173.123 67.4752 173.808 68.0156 174.735 68.0156C175.126 68.0156 175.59 67.8427 175.846 67.6546C176.092 67.4719 176.423 67.4645 176.648 67.6484L176.651 67.6506C176.789 67.7696 176.872 67.92 176.877 68.0787C176.883 68.2397 176.807 68.3883 176.666 68.4963C176.181 68.8811 175.386 69.1432 174.735 69.1432C173.851 69.1432 173.089 68.8404 172.548 68.3174C172.006 67.7941 171.692 67.057 171.692 66.2023C171.692 65.3447 171.989 64.6059 172.503 64.0808C173.017 63.5555 173.742 63.2512 174.582 63.2512C175.412 63.2512 176.085 63.5455 176.549 64.0577C177.012 64.5683 177.257 65.284 177.257 66.1109C177.257 66.2751 177.196 66.4209 177.086 66.5253C176.976 66.6292 176.826 66.6848 176.659 66.6848ZM174.582 64.3788C175.012 64.3788 175.349 64.5225 175.595 64.7615C175.812 64.9736 175.964 65.2672 176.037 65.6182H172.939C173.026 65.2669 173.198 64.9745 173.443 64.7629C173.722 64.5226 174.102 64.3788 174.582 64.3788Z" fill="currentColor"/>
<path d="M181.714 63.2309C181.104 63.2309 180.539 63.4521 180.117 63.8189C180.101 63.6759 180.051 63.5512 179.956 63.4573C179.839 63.3405 179.673 63.2919 179.483 63.2919C179.296 63.2919 179.132 63.3446 179.015 63.4611C178.897 63.5777 178.844 63.7409 178.844 63.9268V68.4676C178.844 68.6577 178.897 68.8218 179.015 68.9378C179.133 69.0534 179.298 69.1025 179.483 69.1025C179.675 69.1025 179.84 69.0503 179.957 68.9326C180.073 68.8152 180.123 68.6516 180.123 68.4676V65.5014C180.123 65.087 180.339 64.7726 180.713 64.5848C181.091 64.3945 181.635 64.3345 182.27 64.4574C182.421 64.4914 182.575 64.4892 182.708 64.4241C182.845 64.3567 182.94 64.2312 182.984 64.0592C183.014 63.94 183.002 63.8217 182.95 63.7138C182.898 63.6076 182.809 63.5188 182.696 63.4484C182.472 63.309 182.136 63.2309 181.714 63.2309Z" fill="currentColor"/>
</g>
</g>
</g>
</svg>
<div class="header-right-group">
<img id="network-logo" src="" alt="Network" class="network-logo" />
</div>
</div>
<div class="row">
<button id="wrap-toggle-btn" class="btn">Wrap/Unwrap ETH</button>
</div>
<!-- Wrap/Unwrap Accordion Content (hidden by default) -->
<div id="wrap-accordion" class="accordion-content">
<div class="balance-display">
<div class="balance-label-group">
<img src="./assets/img/eth.png" class="token-icon" alt="ETH icon" />
<span>ETH:</span>
</div>
<div class="balance-action-group">
<strong id="eth-balance">0</strong>
<button id="wrap-max-eth-btn" class="btn-max-small">Max</button>
</div>
</div>
<div class="balance-display">
<div class="balance-label-group">
<img
src="./assets/img/weth.png"
class="token-icon"
alt="WETH icon"
/>
<span>WETH:</span>
</div>
<div class="balance-action-group">
<strong id="weth-balance">0</strong>
<button id="wrap-max-weth-btn" class="btn-max-small">Max</button>
</div>
</div>
<div class="input-group">
<input
type="text"
id="wrap-amount-input"
placeholder="Enter amount"
class="accordion-input wrap"
/>
</div>
<div class="row">
<button id="wrap-execute-btn" class="btn btn-execute">Wrap</button>
<button id="unwrap-execute-btn" class="btn btn-execute">
Unwrap
</button>
</div>
</div>
<div class="row">
<button id="deposit-toggle-btn" class="btn">Deposit</button>
<button id="redeem-toggle-btn" class="btn">Redeem</button>
</div>
<!-- Deposit Accordion Content (hidden by default) -->
<div id="deposit-accordion" class="accordion-content">
<div class="balance-display">
<div class="balance-label-group">
<img
src="./assets/img/weth.png"
id="deposit-token-icon"
class="token-icon"
alt="WETH icon"
/>
<span>WETH:</span>
</div>
<strong id="deposit-asset-balance">0</strong>
</div>
<div class="input-group">
<input
type="text"
id="deposit-amount-input"
placeholder="Enter WETH amount"
class="accordion-input"
/>
<button id="deposit-max-btn" class="btn-max">Max</button>
</div>
<button id="deposit-execute-btn" class="btn btn-execute">
Deposit WETH
</button>
</div>
<!-- Redeem Accordion Content (hidden by default) -->
<div id="redeem-accordion" class="accordion-content">
<div class="balance-display">
<div class="balance-label-group">
<img
src="./assets/img/przweth.png"
id="redeem-token-icon"
class="token-icon"
alt="przWETH icon"
/>
<span>przWETH:</span>
</div>
<strong id="redeem-shares-balance">0</strong>
</div>
<div class="input-group">
<input
type="text"
id="redeem-amount-input"
placeholder="Enter przWETH amount"
class="accordion-input"
/>
<button id="redeem-max-btn" class="btn-max">Max</button>
</div>
<button id="redeem-execute-btn" class="btn btn-execute">
Redeem przWETH
</button>
</div>
<!-- Footer for Connect Button -->
<div class="vault-footer">
<a href="" class="github-link">GitHub</a>
<div
style="
display: flex;
justify-content: end;
align-items: center;
gap: 10px;
"
>
<!-- Connect Widget -->
<div class="connect-widget">
<button id="connect-btn" class="connect-btn">Connect</button>
<div id="connect-modal" class="connect-modal">
<div class="connect-chain-list" id="connect-chain-list"></div>
<!-- Theme Button -->
<button id="theme-btn" aria-label="Toggle theme" title="theme">
<svg id="theme-light" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5" />
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
</svg>
<svg id="theme-dark" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</svg>
<svg id="theme-system" xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="9" />
<path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke-linejoin="round" />
</svg>
<span class="connect-theme-text"></span>
</button>
<button
id="connect-rpc"
class="connect-rpc"
aria-label="Add RPC"
title="Add RPC"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="26"
height="26"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="3"></circle>
<path
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
></path>
</svg>
Add RPC
</button>
<div id="connect-get-wallet" class="connect-get-wallet">
<a href="https://ethereum.org/en/wallets/" target="_blank"
>Get a Wallet!</a
>
</div>
<div id="connect-wallet-list" class="connect-wallet-list"></div>
</div>
</div>
</div>
</div>
</div>
<script>
(() => {
const order = ["system", "light", "dark"];
const mq = matchMedia("(prefers-color-scheme: dark)");
const apply = () => {
const m = localStorage.themeMode || "system";
const t = m === "system" ? (mq.matches ? "dark" : "light") : m;
Object.assign(document.documentElement.dataset, {
theme: t,
themeSource: m,
selectedTheme: m === "system" ? "" : m,
});
};
const cycle = () => {
const m = localStorage.themeMode || "system";
localStorage.themeMode = order[(order.indexOf(m) + 1) % 3];
apply();
};
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("theme-btn");
if (btn) btn.onclick = cycle;
mq.addEventListener(
"change",
() => (localStorage.themeMode || "system") === "system" && apply(),
);
apply();
});
})();
</script>
<script type="module" src="./js/main.js"></script>
</body>
</html>