@stableops/wallet-ui 0.1.4 → 0.1.6

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.css CHANGED
@@ -1,36 +1,39 @@
1
1
  /* src/walletconnect-dialog.css */
2
2
  :root {
3
- --stableops-wc-backdrop: rgb(0 0 0 / 45%);
4
- --stableops-wc-surface: #ffffff;
5
- --stableops-wc-text: #0f1c2e;
6
- --stableops-wc-muted: rgb(15 28 46 / 55%);
7
- --stableops-wc-border: rgb(15 28 46 / 10%);
8
- --stableops-wc-strong-border: rgb(15 28 46 / 15%);
9
- --stableops-wc-subtle: rgb(15 28 46 / 3%);
10
- --stableops-wc-hover: rgb(15 28 46 / 5%);
3
+ --stableops-wc-backdrop: rgb(0 0 0 / 80%);
4
+ --stableops-wc-surface: var(--background, oklch(1 0 0));
5
+ --stableops-wc-text: var(--foreground, oklch(0.141 0.005 285.823));
6
+ --stableops-wc-muted: var(--muted-foreground, oklch(0.552 0.016 285.938));
7
+ --stableops-wc-border: var(--border, oklch(0.92 0.004 286.32));
8
+ --stableops-wc-strong-border: var(--input, oklch(0.92 0.004 286.32));
9
+ --stableops-wc-subtle: var(--muted, oklch(0.967 0.001 286.375));
10
+ --stableops-wc-hover: var(--accent, #e8faf7);
11
+ --stableops-wc-hover-text: var(--accent-foreground, #0f766e);
11
12
  --stableops-wc-shade: #000000;
12
- --stableops-wc-brand: #14b8a6;
13
- --stableops-wc-copy-done-bg: color-mix(in srgb, var(--stableops-wc-brand) 8%, var(--stableops-wc-surface));
14
- --stableops-wc-danger: #e11d48;
15
- --stableops-wc-danger-border: rgb(225 29 72 / 25%);
16
- --stableops-wc-danger-bg: rgb(225 29 72 / 8%);
13
+ --stableops-wc-brand: var(--primary, #12233a);
14
+ --stableops-wc-brand-text: var(--primary-foreground, oklch(0.985 0 0));
15
+ --stableops-wc-copy-done-bg: var(--accent, #e8faf7);
16
+ --stableops-wc-danger: var(--destructive, oklch(0.577 0.245 27.325));
17
+ --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));
18
+ --stableops-wc-danger-border: color-mix(in oklab, var(--stableops-wc-danger) 25%, transparent);
19
+ --stableops-wc-danger-bg: color-mix( in oklab, var(--stableops-wc-danger) 8%, var(--stableops-wc-surface) );
17
20
  }
18
21
  @media (prefers-color-scheme: dark) {
19
22
  :root {
20
- --stableops-wc-backdrop: rgb(0 0 0 / 60%);
21
- --stableops-wc-surface: #111c2e;
22
- --stableops-wc-text: #e6edf6;
23
- --stableops-wc-muted: rgb(230 237 246 / 55%);
24
- --stableops-wc-border: rgb(230 237 246 / 12%);
25
- --stableops-wc-strong-border: rgb(230 237 246 / 18%);
26
- --stableops-wc-subtle: rgb(230 237 246 / 5%);
27
- --stableops-wc-hover: rgb(230 237 246 / 8%);
23
+ --stableops-wc-surface: var(--background, oklch(0.141 0.005 285.823));
24
+ --stableops-wc-text: var(--foreground, oklch(0.985 0 0));
25
+ --stableops-wc-muted: var(--muted-foreground, oklch(0.705 0.015 286.067));
26
+ --stableops-wc-border: var(--border, oklch(1 0 0 / 10%));
27
+ --stableops-wc-strong-border: var(--input, oklch(1 0 0 / 15%));
28
+ --stableops-wc-subtle: var(--muted, oklch(0.274 0.006 286.033));
29
+ --stableops-wc-hover: var(--accent, oklch(0.274 0.006 286.033));
30
+ --stableops-wc-hover-text: var(--accent-foreground, oklch(0.985 0 0));
28
31
  --stableops-wc-shade: #ffffff;
29
- --stableops-wc-brand: #2dd4bf;
30
- --stableops-wc-copy-done-bg: color-mix(in srgb, var(--stableops-wc-brand) 14%, var(--stableops-wc-surface));
31
- --stableops-wc-danger: #fb7185;
32
- --stableops-wc-danger-border: rgb(251 113 133 / 30%);
33
- --stableops-wc-danger-bg: rgb(251 113 133 / 10%);
32
+ --stableops-wc-brand: var(--primary, oklch(0.92 0.004 286.32));
33
+ --stableops-wc-brand-text: var(--primary-foreground, oklch(0.21 0.006 285.885));
34
+ --stableops-wc-copy-done-bg: var(--accent, oklch(0.274 0.006 286.033));
35
+ --stableops-wc-danger: var(--destructive, oklch(0.704 0.191 22.216));
36
+ --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));
34
37
  }
35
38
  }
36
39
  @keyframes stableops-walletconnect-backdrop-in {
@@ -86,9 +89,24 @@
86
89
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
87
90
  background: var(--stableops-wc-surface);
88
91
  color: var(--stableops-wc-text);
89
- box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
92
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
90
93
  animation: stableops-walletconnect-sheet-in 220ms cubic-bezier(0.2, 0, 0, 1) both;
91
94
  }
95
+ .stableops-wc-sheet,
96
+ .stableops-wc-sheet * {
97
+ box-sizing: border-box;
98
+ }
99
+ .stableops-wc-sheet :where(button, a, p, img) {
100
+ margin: 0;
101
+ font: inherit;
102
+ color: inherit;
103
+ text-decoration: none;
104
+ }
105
+ .stableops-wc-sheet :where(img) {
106
+ display: block;
107
+ max-width: 100%;
108
+ height: auto;
109
+ }
92
110
  .stableops-wc-header {
93
111
  position: relative;
94
112
  display: flex;
@@ -140,7 +158,7 @@
140
158
  .stableops-wc-qr-frame {
141
159
  position: relative;
142
160
  width: 100%;
143
- max-width: 15rem;
161
+ max-width: 12rem;
144
162
  aspect-ratio: 1 / 1;
145
163
  margin: 0 auto;
146
164
  border: 1px solid rgb(15 28 46 / 8%);
@@ -150,6 +168,8 @@
150
168
  overflow: hidden;
151
169
  }
152
170
  .stableops-wc-qr-image {
171
+ width: 100%;
172
+ height: 100%;
153
173
  object-fit: contain;
154
174
  }
155
175
  .stableops-wc-qr-placeholder {
@@ -176,6 +196,30 @@
176
196
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
177
197
  outline: 1px solid rgb(0 0 0 / 5%);
178
198
  }
199
+ .stableops-wc-refresh-button {
200
+ display: inline-flex;
201
+ min-width: 6.5rem;
202
+ cursor: pointer;
203
+ align-items: center;
204
+ justify-content: center;
205
+ gap: 0.375rem;
206
+ border: 1px solid rgb(0 0 0 / 8%);
207
+ border-radius: 0.75rem;
208
+ padding: 0.625rem 0.75rem;
209
+ background: #ffffff;
210
+ color: var(--stableops-wc-text);
211
+ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
212
+ font-size: 0.8125rem;
213
+ font-weight: 600;
214
+ }
215
+ .stableops-wc-refresh-button:hover {
216
+ background: var(--stableops-wc-hover);
217
+ }
218
+ .stableops-wc-refresh-icon {
219
+ width: 1rem;
220
+ height: 1rem;
221
+ color: var(--stableops-wc-brand);
222
+ }
179
223
  .stableops-wc-wallet-logo,
180
224
  .stableops-wc-wallet-fallback {
181
225
  display: flex;
@@ -191,6 +235,12 @@
191
235
  .stableops-wc-wallet-logo {
192
236
  object-fit: cover;
193
237
  }
238
+ .stableops-wc-wallet-chip .stableops-wc-wallet-logo,
239
+ .stableops-wc-wallet-chip .stableops-wc-wallet-fallback {
240
+ width: 2.25rem;
241
+ height: 2.25rem;
242
+ border-radius: 0.375rem;
243
+ }
194
244
  .stableops-wc-wallet-fallback {
195
245
  color: #ffffff;
196
246
  font-size: 0.75rem;
@@ -222,7 +272,9 @@
222
272
  .stableops-wc-muted-spinner {
223
273
  color: #9ca3af;
224
274
  }
225
- .stableops-wc-error-text {
275
+ .stableops-wc-error-icon {
276
+ width: 1.75rem;
277
+ height: 1.75rem;
226
278
  color: var(--stableops-wc-danger);
227
279
  }
228
280
  .stableops-wc-help-text {
@@ -267,12 +319,18 @@
267
319
  font-size: 0.875rem;
268
320
  font-weight: 500;
269
321
  text-decoration: none;
322
+ overflow: hidden;
323
+ text-overflow: ellipsis;
324
+ white-space: nowrap;
270
325
  }
271
326
  .stableops-wc-primary-action {
272
327
  border: 1px solid transparent;
273
328
  background: var(--stableops-wc-brand);
274
- color: #ffffff;
275
- box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
329
+ color: var(--stableops-wc-brand-text);
330
+ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
331
+ }
332
+ .stableops-wc-button-action {
333
+ font: inherit;
276
334
  }
277
335
  .stableops-wc-primary-action:hover {
278
336
  background: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));
@@ -283,7 +341,8 @@
283
341
  color: var(--stableops-wc-text);
284
342
  }
285
343
  .stableops-wc-secondary-action:hover {
286
- background: var(--stableops-wc-subtle);
344
+ background: var(--stableops-wc-hover);
345
+ color: var(--stableops-wc-hover-text);
287
346
  }
288
347
  .stableops-wc-secondary-action:disabled,
289
348
  .stableops-wc-disabled-link {
@@ -321,7 +380,8 @@
321
380
  }
322
381
  .stableops-wc-wallet-button:hover {
323
382
  border-color: color-mix(in srgb, var(--stableops-wc-brand) 40%, transparent);
324
- background: var(--stableops-wc-subtle);
383
+ background: var(--stableops-wc-hover);
384
+ color: var(--stableops-wc-hover-text);
325
385
  }
326
386
  .stableops-wc-wallet-button:disabled {
327
387
  cursor: not-allowed;
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/walletconnect-dialog.css"],"sourcesContent":["/* 语义色 token:亮色在 :root 定义,暗色在下方 prefers-color-scheme 媒体查询里\n 覆盖同名变量,随系统自动切换。主题色只有 --stableops-wc-brand 一个,可被\n themeColor prop 内联覆盖;强调态颜色一律对 brand 做 color-mix 现算,混合目标\n 由 --stableops-wc-shade 控制(亮色掺黑、暗色掺白),不再额外引入 brand token。 */\n:root {\n --stableops-wc-backdrop: rgb(0 0 0 / 45%);\n --stableops-wc-surface: #ffffff;\n --stableops-wc-text: #0f1c2e;\n --stableops-wc-muted: rgb(15 28 46 / 55%);\n --stableops-wc-border: rgb(15 28 46 / 10%);\n --stableops-wc-strong-border: rgb(15 28 46 / 15%);\n --stableops-wc-subtle: rgb(15 28 46 / 3%);\n --stableops-wc-hover: rgb(15 28 46 / 5%);\n --stableops-wc-shade: #000000;\n --stableops-wc-brand: #14b8a6;\n --stableops-wc-copy-done-bg: color-mix(in srgb, var(--stableops-wc-brand) 8%, var(--stableops-wc-surface));\n --stableops-wc-danger: #e11d48;\n --stableops-wc-danger-border: rgb(225 29 72 / 25%);\n --stableops-wc-danger-bg: rgb(225 29 72 / 8%);\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --stableops-wc-backdrop: rgb(0 0 0 / 60%);\n --stableops-wc-surface: #111c2e;\n --stableops-wc-text: #e6edf6;\n --stableops-wc-muted: rgb(230 237 246 / 55%);\n --stableops-wc-border: rgb(230 237 246 / 12%);\n --stableops-wc-strong-border: rgb(230 237 246 / 18%);\n --stableops-wc-subtle: rgb(230 237 246 / 5%);\n --stableops-wc-hover: rgb(230 237 246 / 8%);\n --stableops-wc-shade: #ffffff;\n --stableops-wc-brand: #2dd4bf;\n --stableops-wc-copy-done-bg: color-mix(in srgb, var(--stableops-wc-brand) 14%, var(--stableops-wc-surface));\n --stableops-wc-danger: #fb7185;\n --stableops-wc-danger-border: rgb(251 113 133 / 30%);\n --stableops-wc-danger-bg: rgb(251 113 133 / 10%);\n }\n}\n\n@keyframes stableops-walletconnect-backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(1.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (min-width: 640px) {\n @keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(0.375rem) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n}\n\n.stableops-wc-backdrop {\n position: fixed;\n inset: 0;\n z-index: 50;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n margin: 0;\n padding: 0;\n background: var(--stableops-wc-backdrop);\n animation: stableops-walletconnect-backdrop-in 160ms ease-out both;\n}\n\n.stableops-wc-sheet {\n position: relative;\n width: 100%;\n max-width: 28rem;\n max-height: min(90dvh, calc(100vh - 1rem));\n overflow: hidden;\n border: 1px solid var(--stableops-wc-border);\n border-radius: 1rem 1rem 0 0;\n padding-bottom: max(0.75rem, env(safe-area-inset-bottom));\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);\n animation: stableops-walletconnect-sheet-in 220ms cubic-bezier(0.2, 0, 0, 1) both;\n}\n\n.stableops-wc-header {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem 1.5rem 0;\n}\n\n.stableops-wc-title {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.stableops-wc-icon-button {\n position: absolute;\n display: flex;\n width: 2rem;\n height: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-icon-button:hover {\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-back-button {\n left: 1.25rem;\n}\n\n.stableops-wc-close-button {\n right: 1.25rem;\n}\n\n.stableops-wc-icon,\n.stableops-wc-action-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.stableops-wc-body {\n padding: 1.5rem;\n}\n\n.stableops-wc-qr-frame {\n position: relative;\n width: 100%;\n max-width: 15rem;\n aspect-ratio: 1 / 1;\n margin: 0 auto;\n border: 1px solid rgb(15 28 46 / 8%);\n border-radius: 1rem;\n padding: 1rem;\n background: #ffffff;\n overflow: hidden;\n}\n\n.stableops-wc-qr-image {\n object-fit: contain;\n}\n\n.stableops-wc-qr-placeholder {\n opacity: 0.9;\n}\n\n.stableops-wc-centered-overlay,\n.stableops-wc-loading-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.stableops-wc-loading-overlay {\n inset: 0.5rem;\n border-radius: 0.5rem;\n background: rgb(255 255 255 / 60%);\n backdrop-filter: blur(4px);\n}\n\n.stableops-wc-wallet-chip {\n border-radius: 0.75rem;\n padding: 0.25rem;\n background: #ffffff;\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 10%),\n 0 2px 4px -2px rgb(0 0 0 / 10%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-wallet-logo,\n.stableops-wc-wallet-fallback {\n display: flex;\n width: 3rem;\n height: 3rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-wallet-logo {\n object-fit: cover;\n}\n\n.stableops-wc-wallet-fallback {\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.stableops-wc-empty-qr {\n display: flex;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0 0.75rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-spinner {\n width: 1.5rem;\n height: 1.5rem;\n animation: stableops-wc-spin 1s linear infinite;\n}\n\n@keyframes stableops-wc-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.stableops-wc-muted-spinner {\n color: #9ca3af;\n}\n\n.stableops-wc-error-text {\n color: var(--stableops-wc-danger);\n}\n\n.stableops-wc-help-text {\n margin: 1.25rem 0 0;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n}\n\n.stableops-wc-separator {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 1rem 0;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-line {\n height: 1px;\n flex: 1;\n background: var(--stableops-wc-border);\n}\n\n.stableops-wc-spacer {\n height: 1rem;\n}\n\n.stableops-wc-actions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.stableops-wc-primary-action,\n.stableops-wc-secondary-action {\n display: inline-flex;\n min-height: 2.5rem;\n flex: 1;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.5rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n text-decoration: none;\n}\n\n.stableops-wc-primary-action {\n border: 1px solid transparent;\n background: var(--stableops-wc-brand);\n color: #ffffff;\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-primary-action:hover {\n background: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-secondary-action {\n border: 1px solid var(--stableops-wc-strong-border);\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-secondary-action:hover {\n background: var(--stableops-wc-subtle);\n}\n\n.stableops-wc-secondary-action:disabled,\n.stableops-wc-disabled-link {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n.stableops-wc-check-icon {\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-copy-done {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 35%, transparent);\n background: var(--stableops-wc-copy-done-bg);\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-wallet-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.5rem 1rem;\n overflow-y: auto;\n padding: 1rem;\n}\n\n.stableops-wc-wallet-button {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid transparent;\n border-radius: 0.75rem;\n background: transparent;\n padding: 1rem 0.5rem;\n text-align: center;\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-wallet-button:hover {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 40%, transparent);\n background: var(--stableops-wc-subtle);\n}\n\n.stableops-wc-wallet-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.stableops-wc-wallet-button span {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.stableops-wc-error-box {\n margin: 0 1.25rem 1.25rem;\n border: 1px solid var(--stableops-wc-danger-border);\n border-radius: 0.5rem;\n background: var(--stableops-wc-danger-bg);\n padding: 0.625rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-danger);\n}\n\n@media (min-width: 640px) {\n .stableops-wc-backdrop {\n align-items: center;\n padding: 1rem;\n }\n\n .stableops-wc-sheet {\n max-height: calc(100vh - 2rem);\n border-radius: 1rem;\n padding-bottom: 0;\n }\n\n .stableops-wc-actions {\n flex-direction: row;\n }\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/walletconnect-dialog.css"],"sourcesContent":["/* 语义色 token:优先读取 dashboard/shadcn 的 CSS 变量;未接入这些变量的宿主使用\n dashboard 当前 light/dark 默认值作为 fallback。主题色只有 --stableops-wc-brand\n 一个,可被 themeColor prop 内联覆盖。 */\n:root {\n --stableops-wc-backdrop: rgb(0 0 0 / 80%);\n --stableops-wc-surface: var(--background, oklch(1 0 0));\n --stableops-wc-text: var(--foreground, oklch(0.141 0.005 285.823));\n --stableops-wc-muted: var(--muted-foreground, oklch(0.552 0.016 285.938));\n --stableops-wc-border: var(--border, oklch(0.92 0.004 286.32));\n --stableops-wc-strong-border: var(--input, oklch(0.92 0.004 286.32));\n --stableops-wc-subtle: var(--muted, oklch(0.967 0.001 286.375));\n --stableops-wc-hover: var(--accent, #e8faf7);\n --stableops-wc-hover-text: var(--accent-foreground, #0f766e);\n --stableops-wc-shade: #000000;\n --stableops-wc-brand: var(--primary, #12233a);\n --stableops-wc-brand-text: var(--primary-foreground, oklch(0.985 0 0));\n --stableops-wc-copy-done-bg: var(--accent, #e8faf7);\n --stableops-wc-danger: var(--destructive, oklch(0.577 0.245 27.325));\n --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));\n --stableops-wc-danger-border: color-mix(in oklab, var(--stableops-wc-danger) 25%, transparent);\n --stableops-wc-danger-bg: color-mix(\n in oklab,\n var(--stableops-wc-danger) 8%,\n var(--stableops-wc-surface)\n );\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --stableops-wc-surface: var(--background, oklch(0.141 0.005 285.823));\n --stableops-wc-text: var(--foreground, oklch(0.985 0 0));\n --stableops-wc-muted: var(--muted-foreground, oklch(0.705 0.015 286.067));\n --stableops-wc-border: var(--border, oklch(1 0 0 / 10%));\n --stableops-wc-strong-border: var(--input, oklch(1 0 0 / 15%));\n --stableops-wc-subtle: var(--muted, oklch(0.274 0.006 286.033));\n --stableops-wc-hover: var(--accent, oklch(0.274 0.006 286.033));\n --stableops-wc-hover-text: var(--accent-foreground, oklch(0.985 0 0));\n --stableops-wc-shade: #ffffff;\n --stableops-wc-brand: var(--primary, oklch(0.92 0.004 286.32));\n --stableops-wc-brand-text: var(--primary-foreground, oklch(0.21 0.006 285.885));\n --stableops-wc-copy-done-bg: var(--accent, oklch(0.274 0.006 286.033));\n --stableops-wc-danger: var(--destructive, oklch(0.704 0.191 22.216));\n --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));\n }\n}\n\n@keyframes stableops-walletconnect-backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(1.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (min-width: 640px) {\n @keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(0.375rem) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n}\n\n.stableops-wc-backdrop {\n position: fixed;\n inset: 0;\n z-index: 50;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n margin: 0;\n padding: 0;\n background: var(--stableops-wc-backdrop);\n animation: stableops-walletconnect-backdrop-in 160ms ease-out both;\n}\n\n.stableops-wc-sheet {\n position: relative;\n width: 100%;\n max-width: 28rem;\n max-height: min(90dvh, calc(100vh - 1rem));\n overflow: hidden;\n border: 1px solid var(--stableops-wc-border);\n border-radius: 1rem 1rem 0 0;\n padding-bottom: max(0.75rem, env(safe-area-inset-bottom));\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n box-shadow:\n 0 10px 15px -3px rgb(0 0 0 / 10%),\n 0 4px 6px -4px rgb(0 0 0 / 10%);\n animation: stableops-walletconnect-sheet-in 220ms cubic-bezier(0.2, 0, 0, 1) both;\n}\n\n.stableops-wc-sheet,\n.stableops-wc-sheet * {\n box-sizing: border-box;\n}\n\n.stableops-wc-sheet :where(button, a, p, img) {\n margin: 0;\n font: inherit;\n color: inherit;\n text-decoration: none;\n}\n\n.stableops-wc-sheet :where(img) {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n.stableops-wc-header {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem 1.5rem 0;\n}\n\n.stableops-wc-title {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.stableops-wc-icon-button {\n position: absolute;\n display: flex;\n width: 2rem;\n height: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-icon-button:hover {\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-back-button {\n left: 1.25rem;\n}\n\n.stableops-wc-close-button {\n right: 1.25rem;\n}\n\n.stableops-wc-icon,\n.stableops-wc-action-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.stableops-wc-body {\n padding: 1.5rem;\n}\n\n.stableops-wc-qr-frame {\n position: relative;\n width: 100%;\n max-width: 12rem;\n aspect-ratio: 1 / 1;\n margin: 0 auto;\n border: 1px solid rgb(15 28 46 / 8%);\n border-radius: 1rem;\n padding: 1rem;\n background: #ffffff;\n overflow: hidden;\n}\n\n.stableops-wc-qr-image {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.stableops-wc-qr-placeholder {\n opacity: 0.9;\n}\n\n.stableops-wc-centered-overlay,\n.stableops-wc-loading-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.stableops-wc-loading-overlay {\n inset: 0.5rem;\n border-radius: 0.5rem;\n background: rgb(255 255 255 / 60%);\n backdrop-filter: blur(4px);\n}\n\n.stableops-wc-wallet-chip {\n border-radius: 0.75rem;\n padding: 0.25rem;\n background: #ffffff;\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 10%),\n 0 2px 4px -2px rgb(0 0 0 / 10%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-refresh-button {\n display: inline-flex;\n min-width: 6.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n border: 1px solid rgb(0 0 0 / 8%);\n border-radius: 0.75rem;\n padding: 0.625rem 0.75rem;\n background: #ffffff;\n color: var(--stableops-wc-text);\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 10%),\n 0 2px 4px -2px rgb(0 0 0 / 10%);\n font-size: 0.8125rem;\n font-weight: 600;\n}\n\n.stableops-wc-refresh-button:hover {\n background: var(--stableops-wc-hover);\n}\n\n.stableops-wc-refresh-icon {\n width: 1rem;\n height: 1rem;\n color: var(--stableops-wc-brand);\n}\n\n.stableops-wc-wallet-logo,\n.stableops-wc-wallet-fallback {\n display: flex;\n width: 3rem;\n height: 3rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-wallet-logo {\n object-fit: cover;\n}\n\n.stableops-wc-wallet-chip .stableops-wc-wallet-logo,\n.stableops-wc-wallet-chip .stableops-wc-wallet-fallback {\n width: 2.25rem;\n height: 2.25rem;\n border-radius: 0.375rem;\n}\n\n.stableops-wc-wallet-fallback {\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.stableops-wc-empty-qr {\n display: flex;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0 0.75rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-spinner {\n width: 1.5rem;\n height: 1.5rem;\n animation: stableops-wc-spin 1s linear infinite;\n}\n\n@keyframes stableops-wc-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.stableops-wc-muted-spinner {\n color: #9ca3af;\n}\n\n.stableops-wc-error-icon {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--stableops-wc-danger);\n}\n\n.stableops-wc-help-text {\n margin: 1.25rem 0 0;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n}\n\n.stableops-wc-separator {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 1rem 0;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-line {\n height: 1px;\n flex: 1;\n background: var(--stableops-wc-border);\n}\n\n.stableops-wc-spacer {\n height: 1rem;\n}\n\n.stableops-wc-actions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.stableops-wc-primary-action,\n.stableops-wc-secondary-action {\n display: inline-flex;\n min-height: 2.5rem;\n flex: 1;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.5rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.stableops-wc-primary-action {\n border: 1px solid transparent;\n background: var(--stableops-wc-brand);\n color: var(--stableops-wc-brand-text);\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 10%),\n 0 1px 2px -1px rgb(0 0 0 / 10%);\n}\n\n.stableops-wc-button-action {\n font: inherit;\n}\n\n.stableops-wc-primary-action:hover {\n background: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-secondary-action {\n border: 1px solid var(--stableops-wc-strong-border);\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-secondary-action:hover {\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-hover-text);\n}\n\n.stableops-wc-secondary-action:disabled,\n.stableops-wc-disabled-link {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n.stableops-wc-check-icon {\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-copy-done {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 35%, transparent);\n background: var(--stableops-wc-copy-done-bg);\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-wallet-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.5rem 1rem;\n overflow-y: auto;\n padding: 1rem;\n}\n\n.stableops-wc-wallet-button {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid transparent;\n border-radius: 0.75rem;\n background: transparent;\n padding: 1rem 0.5rem;\n text-align: center;\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-wallet-button:hover {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 40%, transparent);\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-hover-text);\n}\n\n.stableops-wc-wallet-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.stableops-wc-wallet-button span {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.stableops-wc-error-box {\n margin: 0 1.25rem 1.25rem;\n border: 1px solid var(--stableops-wc-danger-border);\n border-radius: 0.5rem;\n background: var(--stableops-wc-danger-bg);\n padding: 0.625rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-danger);\n}\n\n@media (min-width: 640px) {\n .stableops-wc-backdrop {\n align-items: center;\n padding: 1rem;\n }\n\n .stableops-wc-sheet {\n max-height: calc(100vh - 2rem);\n border-radius: 1rem;\n padding-bottom: 0;\n }\n\n .stableops-wc-actions {\n flex-direction: row;\n }\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.mts CHANGED
@@ -28,10 +28,19 @@ type WalletConnectDialogCopy = {
28
28
  scanWithWallet: (wallet: string) => string;
29
29
  scanAnyWallet: string;
30
30
  openWallet: (wallet: string) => string;
31
+ paymentPrompt: (wallet: string) => string;
32
+ retryPayment: (wallet: string) => string;
33
+ retryingPayment: string;
31
34
  copyUri: string;
32
35
  copied: string;
33
36
  or: string;
34
37
  connectFailed: string;
38
+ refreshConnection: string;
39
+ errorMessage: (code: string) => string | null;
40
+ };
41
+ type WalletConnectDialogError = string | {
42
+ code?: string;
43
+ message: string;
35
44
  };
36
45
  type WalletConnectDialogProps<TWallet extends WalletConnectDialogWallet> = {
37
46
  open: boolean;
@@ -42,12 +51,17 @@ type WalletConnectDialogProps<TWallet extends WalletConnectDialogWallet> = {
42
51
  selectedWallet: TWallet | null;
43
52
  state: WalletConnectControllerState;
44
53
  qrCode: string | null;
45
- error: string | null;
54
+ error: WalletConnectDialogError | null;
46
55
  walletLinkMode?: boolean;
56
+ useShadowRoot?: boolean;
47
57
  themeColor?: string;
48
58
  copied: boolean;
59
+ paymentPending?: boolean;
60
+ connectionRefreshAvailable?: boolean;
49
61
  renderWalletIcon?: (wallet: TWallet) => ReactNode;
50
62
  onSelectWallet: (wallet: TWallet) => void;
63
+ onRetryPayment?: () => void;
64
+ onRefreshConnection?: () => void;
51
65
  onBack: () => void;
52
66
  onClose: () => void;
53
67
  onCopyUri: (uri: string) => void;
@@ -58,8 +72,8 @@ declare const walletConnectDialogClassNames: {
58
72
  readonly qrFrame: "stableops-wc-qr-frame";
59
73
  };
60
74
  declare function walletLink(prefix: string, uri: string): string;
61
- declare function WalletConnectDialog<TWallet extends WalletConnectDialogWallet>({ open, copy, projectId, available, wallets, selectedWallet, state, qrCode, error, walletLinkMode, themeColor, copied, renderWalletIcon, onSelectWallet, onBack, onClose, onCopyUri, }: WalletConnectDialogProps<TWallet>): ReactNode;
75
+ declare function WalletConnectDialog<TWallet extends WalletConnectDialogWallet>({ useShadowRoot, ...props }: WalletConnectDialogProps<TWallet>): ReactNode;
62
76
 
63
77
  declare const WALLET_LOGOS: Record<string, string>;
64
78
 
65
- export { WALLET_LOGOS, WalletConnectDialog, type WalletConnectDialogCopy, type WalletConnectDialogProps, type WalletConnectDialogWallet, WalletIcon, type WalletIconWallet, walletConnectDialogClassNames, walletLink };
79
+ export { WALLET_LOGOS, WalletConnectDialog, type WalletConnectDialogCopy, type WalletConnectDialogError, type WalletConnectDialogProps, type WalletConnectDialogWallet, WalletIcon, type WalletIconWallet, walletConnectDialogClassNames, walletLink };
package/dist/index.d.ts CHANGED
@@ -28,10 +28,19 @@ type WalletConnectDialogCopy = {
28
28
  scanWithWallet: (wallet: string) => string;
29
29
  scanAnyWallet: string;
30
30
  openWallet: (wallet: string) => string;
31
+ paymentPrompt: (wallet: string) => string;
32
+ retryPayment: (wallet: string) => string;
33
+ retryingPayment: string;
31
34
  copyUri: string;
32
35
  copied: string;
33
36
  or: string;
34
37
  connectFailed: string;
38
+ refreshConnection: string;
39
+ errorMessage: (code: string) => string | null;
40
+ };
41
+ type WalletConnectDialogError = string | {
42
+ code?: string;
43
+ message: string;
35
44
  };
36
45
  type WalletConnectDialogProps<TWallet extends WalletConnectDialogWallet> = {
37
46
  open: boolean;
@@ -42,12 +51,17 @@ type WalletConnectDialogProps<TWallet extends WalletConnectDialogWallet> = {
42
51
  selectedWallet: TWallet | null;
43
52
  state: WalletConnectControllerState;
44
53
  qrCode: string | null;
45
- error: string | null;
54
+ error: WalletConnectDialogError | null;
46
55
  walletLinkMode?: boolean;
56
+ useShadowRoot?: boolean;
47
57
  themeColor?: string;
48
58
  copied: boolean;
59
+ paymentPending?: boolean;
60
+ connectionRefreshAvailable?: boolean;
49
61
  renderWalletIcon?: (wallet: TWallet) => ReactNode;
50
62
  onSelectWallet: (wallet: TWallet) => void;
63
+ onRetryPayment?: () => void;
64
+ onRefreshConnection?: () => void;
51
65
  onBack: () => void;
52
66
  onClose: () => void;
53
67
  onCopyUri: (uri: string) => void;
@@ -58,8 +72,8 @@ declare const walletConnectDialogClassNames: {
58
72
  readonly qrFrame: "stableops-wc-qr-frame";
59
73
  };
60
74
  declare function walletLink(prefix: string, uri: string): string;
61
- declare function WalletConnectDialog<TWallet extends WalletConnectDialogWallet>({ open, copy, projectId, available, wallets, selectedWallet, state, qrCode, error, walletLinkMode, themeColor, copied, renderWalletIcon, onSelectWallet, onBack, onClose, onCopyUri, }: WalletConnectDialogProps<TWallet>): ReactNode;
75
+ declare function WalletConnectDialog<TWallet extends WalletConnectDialogWallet>({ useShadowRoot, ...props }: WalletConnectDialogProps<TWallet>): ReactNode;
62
76
 
63
77
  declare const WALLET_LOGOS: Record<string, string>;
64
78
 
65
- export { WALLET_LOGOS, WalletConnectDialog, type WalletConnectDialogCopy, type WalletConnectDialogProps, type WalletConnectDialogWallet, WalletIcon, type WalletIconWallet, walletConnectDialogClassNames, walletLink };
79
+ export { WALLET_LOGOS, WalletConnectDialog, type WalletConnectDialogCopy, type WalletConnectDialogError, type WalletConnectDialogProps, type WalletConnectDialogWallet, WalletIcon, type WalletIconWallet, walletConnectDialogClassNames, walletLink };
package/dist/index.js CHANGED
@@ -29,8 +29,13 @@ __export(index_exports, {
29
29
  module.exports = __toCommonJS(index_exports);
30
30
 
31
31
  // src/walletconnect-dialog.tsx
32
+ var import_react = require("react");
33
+ var import_react_dom = require("react-dom");
32
34
  var import_lucide_react = require("lucide-react");
33
35
 
36
+ // src/walletconnect-dialog-css.ts
37
+ var WALLETCONNECT_DIALOG_CSS = "/* \u8BED\u4E49\u8272 token\uFF1A\u4F18\u5148\u8BFB\u53D6 dashboard/shadcn \u7684 CSS \u53D8\u91CF\uFF1B\u672A\u63A5\u5165\u8FD9\u4E9B\u53D8\u91CF\u7684\u5BBF\u4E3B\u4F7F\u7528\n dashboard \u5F53\u524D light/dark \u9ED8\u8BA4\u503C\u4F5C\u4E3A fallback\u3002\u4E3B\u9898\u8272\u53EA\u6709 --stableops-wc-brand\n \u4E00\u4E2A\uFF0C\u53EF\u88AB themeColor prop \u5185\u8054\u8986\u76D6\u3002 */\n:root {\n --stableops-wc-backdrop: rgb(0 0 0 / 80%);\n --stableops-wc-surface: var(--background, oklch(1 0 0));\n --stableops-wc-text: var(--foreground, oklch(0.141 0.005 285.823));\n --stableops-wc-muted: var(--muted-foreground, oklch(0.552 0.016 285.938));\n --stableops-wc-border: var(--border, oklch(0.92 0.004 286.32));\n --stableops-wc-strong-border: var(--input, oklch(0.92 0.004 286.32));\n --stableops-wc-subtle: var(--muted, oklch(0.967 0.001 286.375));\n --stableops-wc-hover: var(--accent, #e8faf7);\n --stableops-wc-hover-text: var(--accent-foreground, #0f766e);\n --stableops-wc-shade: #000000;\n --stableops-wc-brand: var(--primary, #12233a);\n --stableops-wc-brand-text: var(--primary-foreground, oklch(0.985 0 0));\n --stableops-wc-copy-done-bg: var(--accent, #e8faf7);\n --stableops-wc-danger: var(--destructive, oklch(0.577 0.245 27.325));\n --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));\n --stableops-wc-danger-border: color-mix(in oklab, var(--stableops-wc-danger) 25%, transparent);\n --stableops-wc-danger-bg: color-mix(\n in oklab,\n var(--stableops-wc-danger) 8%,\n var(--stableops-wc-surface)\n );\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --stableops-wc-surface: var(--background, oklch(0.141 0.005 285.823));\n --stableops-wc-text: var(--foreground, oklch(0.985 0 0));\n --stableops-wc-muted: var(--muted-foreground, oklch(0.705 0.015 286.067));\n --stableops-wc-border: var(--border, oklch(1 0 0 / 10%));\n --stableops-wc-strong-border: var(--input, oklch(1 0 0 / 15%));\n --stableops-wc-subtle: var(--muted, oklch(0.274 0.006 286.033));\n --stableops-wc-hover: var(--accent, oklch(0.274 0.006 286.033));\n --stableops-wc-hover-text: var(--accent-foreground, oklch(0.985 0 0));\n --stableops-wc-shade: #ffffff;\n --stableops-wc-brand: var(--primary, oklch(0.92 0.004 286.32));\n --stableops-wc-brand-text: var(--primary-foreground, oklch(0.21 0.006 285.885));\n --stableops-wc-copy-done-bg: var(--accent, oklch(0.274 0.006 286.033));\n --stableops-wc-danger: var(--destructive, oklch(0.704 0.191 22.216));\n --stableops-wc-danger-text: var(--destructive-foreground, oklch(0.985 0 0));\n }\n}\n\n@keyframes stableops-walletconnect-backdrop-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(1.25rem);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@media (min-width: 640px) {\n @keyframes stableops-walletconnect-sheet-in {\n from {\n opacity: 0;\n transform: translateY(0.375rem) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n}\n\n.stableops-wc-backdrop {\n position: fixed;\n inset: 0;\n z-index: 50;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n margin: 0;\n padding: 0;\n background: var(--stableops-wc-backdrop);\n animation: stableops-walletconnect-backdrop-in 160ms ease-out both;\n}\n\n.stableops-wc-sheet {\n position: relative;\n width: 100%;\n max-width: 28rem;\n max-height: min(90dvh, calc(100vh - 1rem));\n overflow: hidden;\n border: 1px solid var(--stableops-wc-border);\n border-radius: 1rem 1rem 0 0;\n padding-bottom: max(0.75rem, env(safe-area-inset-bottom));\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n box-shadow:\n 0 10px 15px -3px rgb(0 0 0 / 10%),\n 0 4px 6px -4px rgb(0 0 0 / 10%);\n animation: stableops-walletconnect-sheet-in 220ms cubic-bezier(0.2, 0, 0, 1) both;\n}\n\n.stableops-wc-sheet,\n.stableops-wc-sheet * {\n box-sizing: border-box;\n}\n\n.stableops-wc-sheet :where(button, a, p, img) {\n margin: 0;\n font: inherit;\n color: inherit;\n text-decoration: none;\n}\n\n.stableops-wc-sheet :where(img) {\n display: block;\n max-width: 100%;\n height: auto;\n}\n\n.stableops-wc-header {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1.5rem 1.5rem 0;\n}\n\n.stableops-wc-title {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.875rem;\n font-weight: 600;\n}\n\n.stableops-wc-icon-button {\n position: absolute;\n display: flex;\n width: 2rem;\n height: 2rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 0.375rem;\n background: transparent;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-icon-button:hover {\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-back-button {\n left: 1.25rem;\n}\n\n.stableops-wc-close-button {\n right: 1.25rem;\n}\n\n.stableops-wc-icon,\n.stableops-wc-action-icon {\n width: 1rem;\n height: 1rem;\n}\n\n.stableops-wc-body {\n padding: 1.5rem;\n}\n\n.stableops-wc-qr-frame {\n position: relative;\n width: 100%;\n max-width: 12rem;\n aspect-ratio: 1 / 1;\n margin: 0 auto;\n border: 1px solid rgb(15 28 46 / 8%);\n border-radius: 1rem;\n padding: 1rem;\n background: #ffffff;\n overflow: hidden;\n}\n\n.stableops-wc-qr-image {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.stableops-wc-qr-placeholder {\n opacity: 0.9;\n}\n\n.stableops-wc-centered-overlay,\n.stableops-wc-loading-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.stableops-wc-loading-overlay {\n inset: 0.5rem;\n border-radius: 0.5rem;\n background: rgb(255 255 255 / 60%);\n backdrop-filter: blur(4px);\n}\n\n.stableops-wc-wallet-chip {\n border-radius: 0.75rem;\n padding: 0.25rem;\n background: #ffffff;\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 10%),\n 0 2px 4px -2px rgb(0 0 0 / 10%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-refresh-button {\n display: inline-flex;\n min-width: 6.5rem;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n border: 1px solid rgb(0 0 0 / 8%);\n border-radius: 0.75rem;\n padding: 0.625rem 0.75rem;\n background: #ffffff;\n color: var(--stableops-wc-text);\n box-shadow:\n 0 4px 6px -1px rgb(0 0 0 / 10%),\n 0 2px 4px -2px rgb(0 0 0 / 10%);\n font-size: 0.8125rem;\n font-weight: 600;\n}\n\n.stableops-wc-refresh-button:hover {\n background: var(--stableops-wc-hover);\n}\n\n.stableops-wc-refresh-icon {\n width: 1rem;\n height: 1rem;\n color: var(--stableops-wc-brand);\n}\n\n.stableops-wc-wallet-logo,\n.stableops-wc-wallet-fallback {\n display: flex;\n width: 3rem;\n height: 3rem;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border-radius: 0.5rem;\n box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);\n outline: 1px solid rgb(0 0 0 / 5%);\n}\n\n.stableops-wc-wallet-logo {\n object-fit: cover;\n}\n\n.stableops-wc-wallet-chip .stableops-wc-wallet-logo,\n.stableops-wc-wallet-chip .stableops-wc-wallet-fallback {\n width: 2.25rem;\n height: 2.25rem;\n border-radius: 0.375rem;\n}\n\n.stableops-wc-wallet-fallback {\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.stableops-wc-empty-qr {\n display: flex;\n width: 100%;\n height: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0 0.75rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-spinner {\n width: 1.5rem;\n height: 1.5rem;\n animation: stableops-wc-spin 1s linear infinite;\n}\n\n@keyframes stableops-wc-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.stableops-wc-muted-spinner {\n color: #9ca3af;\n}\n\n.stableops-wc-error-icon {\n width: 1.75rem;\n height: 1.75rem;\n color: var(--stableops-wc-danger);\n}\n\n.stableops-wc-help-text {\n margin: 1.25rem 0 0;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n}\n\n.stableops-wc-separator {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n margin: 1rem 0;\n font-size: 0.75rem;\n color: var(--stableops-wc-muted);\n}\n\n.stableops-wc-line {\n height: 1px;\n flex: 1;\n background: var(--stableops-wc-border);\n}\n\n.stableops-wc-spacer {\n height: 1rem;\n}\n\n.stableops-wc-actions {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.stableops-wc-primary-action,\n.stableops-wc-secondary-action {\n display: inline-flex;\n min-height: 2.5rem;\n flex: 1;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: 0.5rem;\n padding: 0.5rem 1rem;\n text-align: center;\n font-size: 0.875rem;\n font-weight: 500;\n text-decoration: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.stableops-wc-primary-action {\n border: 1px solid transparent;\n background: var(--stableops-wc-brand);\n color: var(--stableops-wc-brand-text);\n box-shadow:\n 0 1px 3px 0 rgb(0 0 0 / 10%),\n 0 1px 2px -1px rgb(0 0 0 / 10%);\n}\n\n.stableops-wc-button-action {\n font: inherit;\n}\n\n.stableops-wc-primary-action:hover {\n background: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-secondary-action {\n border: 1px solid var(--stableops-wc-strong-border);\n background: var(--stableops-wc-surface);\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-secondary-action:hover {\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-hover-text);\n}\n\n.stableops-wc-secondary-action:disabled,\n.stableops-wc-disabled-link {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n.stableops-wc-check-icon {\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-copy-done {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 35%, transparent);\n background: var(--stableops-wc-copy-done-bg);\n color: color-mix(in srgb, var(--stableops-wc-brand) 82%, var(--stableops-wc-shade));\n}\n\n.stableops-wc-wallet-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 0.5rem 1rem;\n overflow-y: auto;\n padding: 1rem;\n}\n\n.stableops-wc-wallet-button {\n display: flex;\n cursor: pointer;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n border: 1px solid transparent;\n border-radius: 0.75rem;\n background: transparent;\n padding: 1rem 0.5rem;\n text-align: center;\n color: var(--stableops-wc-text);\n}\n\n.stableops-wc-wallet-button:hover {\n border-color: color-mix(in srgb, var(--stableops-wc-brand) 40%, transparent);\n background: var(--stableops-wc-hover);\n color: var(--stableops-wc-hover-text);\n}\n\n.stableops-wc-wallet-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.stableops-wc-wallet-button span {\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.stableops-wc-error-box {\n margin: 0 1.25rem 1.25rem;\n border: 1px solid var(--stableops-wc-danger-border);\n border-radius: 0.5rem;\n background: var(--stableops-wc-danger-bg);\n padding: 0.625rem;\n text-align: center;\n font-size: 0.75rem;\n color: var(--stableops-wc-danger);\n}\n\n@media (min-width: 640px) {\n .stableops-wc-backdrop {\n align-items: center;\n padding: 1rem;\n }\n\n .stableops-wc-sheet {\n max-height: calc(100vh - 2rem);\n border-radius: 1rem;\n padding-bottom: 0;\n }\n\n .stableops-wc-actions {\n flex-direction: row;\n }\n}\n";
38
+
34
39
  // src/wallet-icon.tsx
35
40
  var import_jsx_runtime = require("react/jsx-runtime");
36
41
  function WalletIcon({ wallet }) {
@@ -59,7 +64,35 @@ var walletConnectDialogClassNames = {
59
64
  function walletLink(prefix, uri) {
60
65
  return `${prefix}${encodeURIComponent(uri)}`;
61
66
  }
67
+ function formatWalletConnectDialogError(error, copy) {
68
+ if (typeof error === "string") return error;
69
+ if (error.code) return copy.errorMessage(error.code) ?? error.message;
70
+ return error.message;
71
+ }
62
72
  function WalletConnectDialog({
73
+ useShadowRoot = false,
74
+ ...props
75
+ }) {
76
+ if (useShadowRoot) return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ShadowRootWalletConnectDialog, { ...props });
77
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletConnectDialogContent, { ...props });
78
+ }
79
+ function ShadowRootWalletConnectDialog(props) {
80
+ const hostRef = (0, import_react.useRef)(null);
81
+ const [shadowRoot, setShadowRoot] = (0, import_react.useState)(null);
82
+ (0, import_react.useEffect)(() => {
83
+ const host = hostRef.current;
84
+ if (!host) return;
85
+ setShadowRoot(host.shadowRoot ?? host.attachShadow({ mode: "open" }));
86
+ }, []);
87
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { ref: hostRef, children: shadowRoot ? (0, import_react_dom.createPortal)(
88
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
89
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: WALLETCONNECT_DIALOG_CSS }),
90
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletConnectDialogContent, { ...props })
91
+ ] }),
92
+ shadowRoot
93
+ ) : null });
94
+ }
95
+ function WalletConnectDialogContent({
63
96
  open,
64
97
  copy,
65
98
  projectId,
@@ -72,8 +105,12 @@ function WalletConnectDialog({
72
105
  walletLinkMode = false,
73
106
  themeColor,
74
107
  copied,
108
+ paymentPending = false,
109
+ connectionRefreshAvailable = false,
75
110
  renderWalletIcon,
76
111
  onSelectWallet,
112
+ onRetryPayment,
113
+ onRefreshConnection,
77
114
  onBack,
78
115
  onClose,
79
116
  onCopyUri
@@ -83,10 +120,14 @@ function WalletConnectDialog({
83
120
  const appLinkIsUniversal = !selectedWallet?.links?.native && Boolean(selectedWallet?.links?.universal);
84
121
  const readyUri = state.status === "uri_ready" ? state.uri : null;
85
122
  const walletHref = walletLinkMode && readyUri ? readyUri : appLink && readyUri ? walletLink(appLink, readyUri) : void 0;
86
- const qrLoading = selectedWallet && !qrCode && (state.status === "connecting" || state.status === "uri_ready");
123
+ const showRefreshControl = connectionRefreshAvailable && Boolean(onRefreshConnection);
124
+ const visibleQrCode = showRefreshControl ? null : qrCode;
125
+ const qrLoading = selectedWallet && !visibleQrCode && (state.status === "connecting" || state.status === "uri_ready");
126
+ const paymentReady = Boolean(selectedWallet) && state.status === "connected" && Boolean(onRetryPayment);
87
127
  const disabledList = !walletLinkMode && !projectId || !available;
88
128
  const renderIcon = renderWalletIcon ?? ((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletIcon, { wallet }));
89
129
  const themeStyle = themeColor ? { "--stableops-wc-brand": themeColor } : void 0;
130
+ const visibleError = error !== null ? formatWalletConnectDialogError(error, copy) : state.status === "failed" ? formatWalletConnectDialogError(state.error, copy) : null;
90
131
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: walletConnectDialogClassNames.backdrop, style: themeStyle, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
91
132
  "div",
92
133
  {
@@ -121,8 +162,8 @@ function WalletConnectDialog({
121
162
  )
122
163
  ] }),
123
164
  selectedWallet ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "stableops-wc-body", children: [
124
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: walletConnectDialogClassNames.qrFrame, children: qrCode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
125
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: qrCode, alt: copy.qrAlt, className: "stableops-wc-qr-image" }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: walletConnectDialogClassNames.qrFrame, children: visibleQrCode ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
166
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: visibleQrCode, alt: copy.qrAlt, className: "stableops-wc-qr-image" }),
126
167
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-centered-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-wallet-chip", children: renderIcon(selectedWallet) }) })
127
168
  ] }) : qrLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
128
169
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -136,15 +177,54 @@ function WalletConnectDialog({
136
177
  ),
137
178
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-centered-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-wallet-chip", children: renderIcon(selectedWallet) }) }),
138
179
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-loading-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { className: "stableops-wc-spinner stableops-wc-muted-spinner" }) })
139
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-empty-qr", children: state.status === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "stableops-wc-error-text", children: copy.connectFailed }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { className: "stableops-wc-spinner" }) }) }),
140
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "stableops-wc-help-text", children: walletLinkMode || selectedWallet.links ? copy.scanWithWallet(selectedWallet.name) : copy.scanAnyWallet }),
180
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
181
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
182
+ "img",
183
+ {
184
+ src: PLACEHOLDER_QR_CODE,
185
+ alt: "",
186
+ className: "stableops-wc-qr-image stableops-wc-qr-placeholder",
187
+ "aria-hidden": "true"
188
+ }
189
+ ),
190
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-centered-overlay", children: showRefreshControl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
191
+ "button",
192
+ {
193
+ type: "button",
194
+ className: "stableops-wc-refresh-button",
195
+ onClick: () => {
196
+ if (onRefreshConnection) onRefreshConnection();
197
+ },
198
+ children: [
199
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.RotateCw, { className: "stableops-wc-refresh-icon" }),
200
+ copy.refreshConnection
201
+ ]
202
+ }
203
+ ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-wallet-chip", children: renderIcon(selectedWallet) }) }),
204
+ state.status === "failed" && !showRefreshControl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-loading-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.CircleAlert, { className: "stableops-wc-error-icon", "aria-hidden": "true" }) }) : null
205
+ ] }) }),
206
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "stableops-wc-help-text", children: paymentReady ? copy.paymentPrompt(selectedWallet.name) : walletLinkMode || selectedWallet.links ? copy.scanWithWallet(selectedWallet.name) : copy.scanAnyWallet }),
141
207
  walletLinkMode || appLink ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "stableops-wc-separator", children: [
142
208
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-line" }),
143
209
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: copy.or }),
144
210
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-line" })
145
211
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-spacer" }),
146
212
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "stableops-wc-actions", children: [
147
- walletLinkMode || appLink ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
213
+ paymentReady ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
214
+ "button",
215
+ {
216
+ type: "button",
217
+ className: "stableops-wc-primary-action stableops-wc-button-action",
218
+ onClick: () => {
219
+ if (onRetryPayment) onRetryPayment();
220
+ },
221
+ children: [
222
+ paymentPending ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { className: "stableops-wc-action-icon stableops-wc-spinner" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ExternalLink, { className: "stableops-wc-action-icon" }),
223
+ paymentPending ? copy.retryingPayment : copy.retryPayment(selectedWallet.name)
224
+ ]
225
+ }
226
+ ) : null,
227
+ !paymentReady && (walletLinkMode || appLink) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
148
228
  "a",
149
229
  {
150
230
  className: `stableops-wc-primary-action ${walletHref ? "" : "stableops-wc-disabled-link"}`,
@@ -196,7 +276,7 @@ function WalletConnectDialog({
196
276
  },
197
277
  wallet.id
198
278
  )) }),
199
- error || state.status === "failed" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-error-box", children: error || (state.status === "failed" ? state.error.message : void 0) }) : null
279
+ visibleError ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "stableops-wc-error-box", children: visibleError }) : null
200
280
  ]
201
281
  }
202
282
  ) });