@hfunlabs/hypurr-connect 0.1.16 → 0.1.18
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/dist/index.js +501 -545
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/AddWalletModal.tsx +37 -30
- package/src/DeleteWalletModal.tsx +5 -8
- package/src/LoginModal.tsx +2 -26
- package/src/RenameWalletModal.tsx +14 -24
- package/src/RenewAgentModal.tsx +26 -21
- package/src/UserProfileModal.tsx +36 -63
- package/src/WalletSelectorDropdown.tsx +40 -28
- package/src/profileStyles.ts +51 -30
- package/src/styles.css +1 -1
- package/src/tailwind.css +289 -23
- package/src/useIsMobile.ts +22 -0
package/src/tailwind.css
CHANGED
|
@@ -1,72 +1,240 @@
|
|
|
1
1
|
@tailwind components;
|
|
2
2
|
@tailwind utilities;
|
|
3
3
|
|
|
4
|
+
/* ============================================================================
|
|
5
|
+
Theme tokens. Values are space-separated RGB channels so Tailwind opacity
|
|
6
|
+
modifiers (e.g. bg-surface-modal/70) work. `:root` is the default (dark)
|
|
7
|
+
theme; `.light` on <html> (set by the host app) overrides it.
|
|
8
|
+
|
|
9
|
+
Mirrors the alpha-trade host app so wallet/auth modals follow the host's
|
|
10
|
+
theme automatically.
|
|
11
|
+
========================================================================== */
|
|
12
|
+
:root {
|
|
13
|
+
/* Surfaces */
|
|
14
|
+
--surface-btn: 13 18 25;
|
|
15
|
+
--surface-btn-hover: 21 23 26;
|
|
16
|
+
--surface-btn-active: 30 33 36;
|
|
17
|
+
--surface-bd: 38 42 48;
|
|
18
|
+
--surface-bd-hover: 68 69 72;
|
|
19
|
+
--surface-bd-active: 75 77 80;
|
|
20
|
+
--surface-modal: 14 18 24;
|
|
21
|
+
--surface-dropdown: 17 24 32;
|
|
22
|
+
--surface-base: 11 14 17;
|
|
23
|
+
--surface-deep: 9 11 14;
|
|
24
|
+
--surface-raised: 17 24 39;
|
|
25
|
+
--surface-elevated: 31 41 55;
|
|
26
|
+
--surface-inset: 55 65 81;
|
|
27
|
+
--surface-inverse: 255 255 255;
|
|
28
|
+
|
|
29
|
+
/* Foreground */
|
|
30
|
+
--content: 243 244 246;
|
|
31
|
+
--content-secondary: 229 231 235;
|
|
32
|
+
--content-tertiary: 209 213 219;
|
|
33
|
+
--content-muted: 170 177 193;
|
|
34
|
+
--content-subtle: 125 133 151;
|
|
35
|
+
--content-faint: 107 114 128;
|
|
36
|
+
--content-disabled: 55 65 81;
|
|
37
|
+
|
|
38
|
+
/* Borders */
|
|
39
|
+
--line: 31 41 55;
|
|
40
|
+
--line-strong: 55 65 81;
|
|
41
|
+
--line-subtle: 17 24 39;
|
|
42
|
+
--line-inverse: 255 255 255;
|
|
43
|
+
|
|
44
|
+
/* Scrims */
|
|
45
|
+
--overlay: 0 0 0;
|
|
46
|
+
|
|
47
|
+
/* Brand / semantic accents */
|
|
48
|
+
--accent: 168 85 247;
|
|
49
|
+
--trade-up: 52 211 153;
|
|
50
|
+
--trade-down: 248 113 113;
|
|
51
|
+
--purple-400: 216 180 254;
|
|
52
|
+
--purple-500: 185 125 241;
|
|
53
|
+
--blue-500: 90 153 255;
|
|
54
|
+
--green-400: 83 203 127;
|
|
55
|
+
--amber-200: 253 230 138;
|
|
56
|
+
--amber-400: 251 191 36;
|
|
57
|
+
--amber-500: 245 158 11;
|
|
58
|
+
|
|
59
|
+
/* Raised-button surfaces (mirror alpha-trade) */
|
|
60
|
+
--btn-bg: 13 18 25;
|
|
61
|
+
--btn-fg: 170 177 193;
|
|
62
|
+
--btn-ring: 38 42 48;
|
|
63
|
+
--btn-bevel: 255 255 255;
|
|
64
|
+
--accent-btn-bg: 37 28 57;
|
|
65
|
+
--accent-btn-bg-hover: 52 35 80;
|
|
66
|
+
--accent-btn-fg: 216 180 254;
|
|
67
|
+
--accent-btn-fg-hover: 233 213 255;
|
|
68
|
+
--accent-btn-inset: 15 5 35;
|
|
69
|
+
|
|
70
|
+
/* Recessed input channel */
|
|
71
|
+
--input-bg: 18 23 31;
|
|
72
|
+
--input-bg-focus: 26 33 44;
|
|
73
|
+
--input-ring: 45 53 64;
|
|
74
|
+
--input-ring-focus: 59 69 82;
|
|
75
|
+
|
|
76
|
+
/* Elevation shadows */
|
|
77
|
+
--shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
|
|
78
|
+
--shadow-dropdown: 0 8px 40px rgba(0, 0, 0, 0.85);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.light {
|
|
82
|
+
--surface-btn: 244 246 249;
|
|
83
|
+
--surface-btn-hover: 236 239 243;
|
|
84
|
+
--surface-btn-active: 226 230 236;
|
|
85
|
+
--surface-bd: 214 220 228;
|
|
86
|
+
--surface-bd-hover: 194 201 211;
|
|
87
|
+
--surface-bd-active: 168 176 191;
|
|
88
|
+
--surface-modal: 255 255 255;
|
|
89
|
+
--surface-dropdown: 255 255 255;
|
|
90
|
+
--surface-base: 245 244 249;
|
|
91
|
+
--surface-deep: 233 236 242;
|
|
92
|
+
--surface-raised: 255 255 255;
|
|
93
|
+
--surface-elevated: 228 231 237;
|
|
94
|
+
--surface-inset: 225 229 235;
|
|
95
|
+
--surface-inverse: 17 24 39;
|
|
96
|
+
|
|
97
|
+
--content: 17 24 39;
|
|
98
|
+
--content-secondary: 31 41 55;
|
|
99
|
+
--content-tertiary: 55 65 81;
|
|
100
|
+
--content-muted: 91 101 115;
|
|
101
|
+
--content-subtle: 107 114 128;
|
|
102
|
+
--content-faint: 148 163 184;
|
|
103
|
+
--content-disabled: 179 185 196;
|
|
104
|
+
|
|
105
|
+
--line: 222 226 234;
|
|
106
|
+
--line-strong: 205 211 220;
|
|
107
|
+
--line-subtle: 238 240 243;
|
|
108
|
+
--line-inverse: 17 24 39;
|
|
109
|
+
|
|
110
|
+
--overlay: 0 0 0;
|
|
111
|
+
|
|
112
|
+
--accent: 147 51 234;
|
|
113
|
+
--trade-up: 5 150 105;
|
|
114
|
+
--trade-down: 220 38 38;
|
|
115
|
+
--purple-400: 124 58 237;
|
|
116
|
+
--purple-500: 109 40 217;
|
|
117
|
+
--blue-500: 37 99 235;
|
|
118
|
+
--green-400: 22 163 74;
|
|
119
|
+
--amber-200: 161 98 7;
|
|
120
|
+
--amber-400: 180 83 9;
|
|
121
|
+
--amber-500: 180 83 9;
|
|
122
|
+
|
|
123
|
+
--btn-bg: 255 255 255;
|
|
124
|
+
--btn-fg: 71 85 105;
|
|
125
|
+
--btn-ring: 217 221 228;
|
|
126
|
+
--btn-bevel: 15 23 42;
|
|
127
|
+
--accent-btn-bg: 243 232 255;
|
|
128
|
+
--accent-btn-bg-hover: 233 213 255;
|
|
129
|
+
--accent-btn-fg: 109 40 217;
|
|
130
|
+
--accent-btn-fg-hover: 88 28 135;
|
|
131
|
+
--accent-btn-inset: 147 51 234;
|
|
132
|
+
|
|
133
|
+
--input-bg: 238 240 246;
|
|
134
|
+
--input-bg-focus: 230 232 240;
|
|
135
|
+
--input-ring: 200 206 218;
|
|
136
|
+
--input-ring-focus: 168 175 192;
|
|
137
|
+
|
|
138
|
+
--shadow-modal:
|
|
139
|
+
0 16px 40px -12px rgba(15, 23, 42, 0.24),
|
|
140
|
+
0 4px 12px -4px rgba(15, 23, 42, 0.12);
|
|
141
|
+
--shadow-dropdown:
|
|
142
|
+
0 12px 28px -8px rgba(15, 23, 42, 0.2), 0 2px 8px -2px rgba(15, 23, 42, 0.1);
|
|
143
|
+
}
|
|
144
|
+
|
|
4
145
|
@layer components {
|
|
146
|
+
/* ===== Raised buttons — theme-aware via CSS variables ===== */
|
|
5
147
|
.hypurr-connect .btn-raised {
|
|
6
|
-
background-color:
|
|
148
|
+
background-color: rgb(var(--btn-bg));
|
|
7
149
|
background-image: linear-gradient(
|
|
8
150
|
to bottom,
|
|
9
|
-
|
|
151
|
+
rgb(var(--btn-bevel) / 0.03),
|
|
10
152
|
transparent
|
|
11
153
|
);
|
|
12
154
|
box-shadow:
|
|
13
|
-
inset 0 1px 0
|
|
155
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.1),
|
|
14
156
|
inset 0 -1px 0 rgba(0, 0, 0, 0.35),
|
|
15
|
-
inset 0 0 0 1px
|
|
16
|
-
color:
|
|
157
|
+
inset 0 0 0 1px rgb(var(--btn-ring));
|
|
158
|
+
color: rgb(var(--btn-fg));
|
|
17
159
|
transition:
|
|
18
160
|
background-color 150ms,
|
|
19
161
|
color 150ms,
|
|
20
162
|
background-image 150ms,
|
|
21
163
|
box-shadow 150ms;
|
|
22
164
|
}
|
|
23
|
-
|
|
24
165
|
.hypurr-connect .btn-raised:hover:not(:disabled) {
|
|
25
|
-
background-color:
|
|
166
|
+
background-color: rgb(var(--surface-btn-hover));
|
|
26
167
|
background-image: linear-gradient(
|
|
27
168
|
to bottom,
|
|
28
|
-
|
|
169
|
+
rgb(var(--btn-bevel) / 0.04),
|
|
29
170
|
transparent
|
|
30
171
|
);
|
|
31
172
|
box-shadow:
|
|
32
|
-
inset 0 1px 0
|
|
173
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.14),
|
|
33
174
|
inset 0 -1px 0 rgba(0, 0, 0, 0.4),
|
|
34
|
-
inset 0 0 0 1px
|
|
35
|
-
color:
|
|
175
|
+
inset 0 0 0 1px rgb(var(--surface-bd-hover));
|
|
176
|
+
color: rgb(var(--content-tertiary));
|
|
36
177
|
}
|
|
37
|
-
|
|
38
178
|
.hypurr-connect .btn-raised-active {
|
|
39
|
-
background-color:
|
|
179
|
+
background-color: rgb(var(--surface-btn-active));
|
|
40
180
|
background-image: linear-gradient(
|
|
41
181
|
to bottom,
|
|
42
|
-
|
|
182
|
+
rgb(var(--btn-bevel) / 0.05),
|
|
43
183
|
transparent
|
|
44
184
|
);
|
|
45
185
|
box-shadow:
|
|
46
|
-
inset 0 1px 0
|
|
186
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.18),
|
|
47
187
|
inset 0 -1px 0 rgba(0, 0, 0, 0.45),
|
|
48
|
-
inset 0 0 0 1px
|
|
188
|
+
inset 0 0 0 1px rgb(var(--surface-bd-active)),
|
|
49
189
|
0 1px 2px rgba(0, 0, 0, 0.5);
|
|
50
|
-
color:
|
|
190
|
+
color: rgb(var(--content));
|
|
51
191
|
transition:
|
|
52
192
|
background-color 150ms,
|
|
53
193
|
color 150ms,
|
|
54
194
|
background-image 150ms,
|
|
55
195
|
box-shadow 150ms;
|
|
56
196
|
}
|
|
57
|
-
|
|
197
|
+
.hypurr-connect .btn-raised-accent {
|
|
198
|
+
background-color: rgb(var(--accent-btn-bg));
|
|
199
|
+
background-image: linear-gradient(
|
|
200
|
+
to bottom,
|
|
201
|
+
rgb(var(--btn-bevel) / 0.03),
|
|
202
|
+
transparent
|
|
203
|
+
);
|
|
204
|
+
box-shadow:
|
|
205
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.1),
|
|
206
|
+
inset 0 -1px 0 rgb(var(--accent-btn-inset) / 0.75);
|
|
207
|
+
color: rgb(var(--accent-btn-fg));
|
|
208
|
+
transition:
|
|
209
|
+
background-color 150ms,
|
|
210
|
+
color 150ms,
|
|
211
|
+
background-image 150ms,
|
|
212
|
+
box-shadow 150ms;
|
|
213
|
+
}
|
|
214
|
+
.hypurr-connect .btn-raised-accent:hover:not(:disabled) {
|
|
215
|
+
background-color: rgb(var(--accent-btn-bg-hover));
|
|
216
|
+
background-image: linear-gradient(
|
|
217
|
+
to bottom,
|
|
218
|
+
rgb(var(--btn-bevel) / 0.04),
|
|
219
|
+
transparent
|
|
220
|
+
);
|
|
221
|
+
box-shadow:
|
|
222
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.14),
|
|
223
|
+
inset 0 -1px 0 rgb(var(--accent-btn-inset) / 0.8);
|
|
224
|
+
color: rgb(var(--accent-btn-fg-hover));
|
|
225
|
+
}
|
|
58
226
|
.hypurr-connect .btn-raised-disabled {
|
|
59
|
-
background-color:
|
|
227
|
+
background-color: rgb(var(--btn-bg));
|
|
60
228
|
background-image: linear-gradient(
|
|
61
229
|
to bottom,
|
|
62
|
-
|
|
230
|
+
rgb(var(--btn-bevel) / 0.02),
|
|
63
231
|
transparent
|
|
64
232
|
);
|
|
65
233
|
box-shadow:
|
|
66
|
-
inset 0 1px 0
|
|
234
|
+
inset 0 1px 0 rgb(var(--btn-bevel) / 0.05),
|
|
67
235
|
inset 0 -1px 0 rgba(0, 0, 0, 0.25),
|
|
68
|
-
inset 0 0 0 1px
|
|
69
|
-
color:
|
|
236
|
+
inset 0 0 0 1px rgb(var(--btn-ring) / 0.6);
|
|
237
|
+
color: rgb(var(--content-faint));
|
|
70
238
|
cursor: not-allowed;
|
|
71
239
|
transition:
|
|
72
240
|
background-color 150ms,
|
|
@@ -74,4 +242,102 @@
|
|
|
74
242
|
background-image 150ms,
|
|
75
243
|
box-shadow 150ms;
|
|
76
244
|
}
|
|
245
|
+
|
|
246
|
+
/* Light theme: raised gets real elevation instead of inset bevel. */
|
|
247
|
+
.light .hypurr-connect .btn-raised {
|
|
248
|
+
background-image: linear-gradient(
|
|
249
|
+
to bottom,
|
|
250
|
+
#ffffff,
|
|
251
|
+
rgb(var(--surface-btn))
|
|
252
|
+
);
|
|
253
|
+
box-shadow:
|
|
254
|
+
0 1px 2px rgba(15, 23, 42, 0.08),
|
|
255
|
+
0 1px 1px rgba(15, 23, 42, 0.04),
|
|
256
|
+
inset 0 0 0 1px rgb(var(--surface-bd));
|
|
257
|
+
}
|
|
258
|
+
.light .hypurr-connect .btn-raised:hover:not(:disabled) {
|
|
259
|
+
background-image: linear-gradient(
|
|
260
|
+
to bottom,
|
|
261
|
+
#ffffff,
|
|
262
|
+
rgb(var(--surface-btn-hover))
|
|
263
|
+
);
|
|
264
|
+
box-shadow:
|
|
265
|
+
0 2px 6px rgba(15, 23, 42, 0.12),
|
|
266
|
+
0 1px 2px rgba(15, 23, 42, 0.06),
|
|
267
|
+
inset 0 0 0 1px rgb(var(--surface-bd-hover));
|
|
268
|
+
}
|
|
269
|
+
.light .hypurr-connect .btn-raised-active {
|
|
270
|
+
background-image: none;
|
|
271
|
+
background-color: rgb(var(--surface-btn-active));
|
|
272
|
+
box-shadow:
|
|
273
|
+
inset 0 1px 2px rgba(15, 23, 42, 0.12),
|
|
274
|
+
inset 0 0 0 1px rgb(var(--surface-bd-active));
|
|
275
|
+
}
|
|
276
|
+
.light .hypurr-connect .btn-raised-disabled {
|
|
277
|
+
background-image: none;
|
|
278
|
+
box-shadow: inset 0 0 0 1px rgb(var(--surface-bd));
|
|
279
|
+
}
|
|
280
|
+
.light .hypurr-connect .btn-raised-accent {
|
|
281
|
+
box-shadow:
|
|
282
|
+
0 1px 2px rgba(124, 58, 237, 0.18),
|
|
283
|
+
inset 0 0 0 1px rgba(124, 58, 237, 0.22);
|
|
284
|
+
}
|
|
285
|
+
.light .hypurr-connect .btn-raised-accent:hover:not(:disabled) {
|
|
286
|
+
box-shadow:
|
|
287
|
+
0 2px 6px rgba(124, 58, 237, 0.24),
|
|
288
|
+
inset 0 0 0 1px rgba(124, 58, 237, 0.28);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
/* ===== Recessed input channel ===== */
|
|
292
|
+
.hypurr-connect .input {
|
|
293
|
+
background-color: rgb(var(--input-bg));
|
|
294
|
+
box-shadow:
|
|
295
|
+
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
|
296
|
+
inset 0 -1px 0 rgb(var(--btn-bevel) / 0.05),
|
|
297
|
+
inset 0 0 0 1px rgb(var(--input-ring));
|
|
298
|
+
color: rgb(var(--content));
|
|
299
|
+
transition:
|
|
300
|
+
box-shadow 150ms,
|
|
301
|
+
background-color 150ms;
|
|
302
|
+
}
|
|
303
|
+
.hypurr-connect .input::placeholder {
|
|
304
|
+
color: rgb(var(--content-faint));
|
|
305
|
+
opacity: 1;
|
|
306
|
+
}
|
|
307
|
+
.hypurr-connect .input:focus,
|
|
308
|
+
.hypurr-connect .input:focus-within {
|
|
309
|
+
background-color: rgb(var(--input-bg-focus));
|
|
310
|
+
box-shadow:
|
|
311
|
+
inset 0 2px 4px rgba(0, 0, 0, 0.45),
|
|
312
|
+
inset 0 -1px 0 rgb(var(--btn-bevel) / 0.06),
|
|
313
|
+
inset 0 0 0 1px rgb(var(--input-ring-focus));
|
|
314
|
+
}
|
|
315
|
+
.hypurr-connect .input-error,
|
|
316
|
+
.hypurr-connect .input-error:focus,
|
|
317
|
+
.hypurr-connect .input-error:focus-within {
|
|
318
|
+
box-shadow:
|
|
319
|
+
inset 0 2px 4px rgba(0, 0, 0, 0.5),
|
|
320
|
+
inset 0 -1px 0 rgb(var(--btn-bevel) / 0.05),
|
|
321
|
+
inset 0 0 0 1px rgba(248, 113, 113, 0.7);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
/* Light theme: softer recessed channel without the heavy dark inset. */
|
|
325
|
+
.light .hypurr-connect .input {
|
|
326
|
+
box-shadow:
|
|
327
|
+
inset 0 2px 3px rgba(15, 23, 42, 0.08),
|
|
328
|
+
inset 0 0 0 1px rgb(var(--input-ring));
|
|
329
|
+
}
|
|
330
|
+
.light .hypurr-connect .input:focus,
|
|
331
|
+
.light .hypurr-connect .input:focus-within {
|
|
332
|
+
box-shadow:
|
|
333
|
+
inset 0 2px 4px rgba(15, 23, 42, 0.1),
|
|
334
|
+
inset 0 0 0 1px rgb(var(--input-ring-focus));
|
|
335
|
+
}
|
|
336
|
+
.light .hypurr-connect .input-error,
|
|
337
|
+
.light .hypurr-connect .input-error:focus,
|
|
338
|
+
.light .hypurr-connect .input-error:focus-within {
|
|
339
|
+
box-shadow:
|
|
340
|
+
inset 0 2px 3px rgba(15, 23, 42, 0.08),
|
|
341
|
+
inset 0 0 0 1px rgba(220, 38, 38, 0.7);
|
|
342
|
+
}
|
|
77
343
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useSyncExternalStore } from "react";
|
|
2
|
+
|
|
3
|
+
const MOBILE_BREAKPOINT = 640;
|
|
4
|
+
|
|
5
|
+
const mobileQuery =
|
|
6
|
+
typeof window !== "undefined"
|
|
7
|
+
? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`)
|
|
8
|
+
: null;
|
|
9
|
+
|
|
10
|
+
function subscribeMobile(cb: () => void) {
|
|
11
|
+
mobileQuery?.addEventListener("change", cb);
|
|
12
|
+
return () => mobileQuery?.removeEventListener("change", cb);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function getSnapshotMobile() {
|
|
16
|
+
return mobileQuery?.matches ?? false;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/** Tracks whether the viewport is at or below the mobile breakpoint (640px). */
|
|
20
|
+
export function useIsMobile() {
|
|
21
|
+
return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
|
|
22
|
+
}
|