@zerodev/wallet-react-ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/README.md +124 -0
  2. package/dist/_types/auth/authStoreSlice.d.ts +33 -0
  3. package/dist/_types/auth/authStoreSlice.d.ts.map +1 -0
  4. package/dist/_types/auth/components/BlobAnimation/index.d.ts +4 -0
  5. package/dist/_types/auth/components/BlobAnimation/index.d.ts.map +1 -0
  6. package/dist/_types/auth/components/CodeInput/index.d.ts +11 -0
  7. package/dist/_types/auth/components/CodeInput/index.d.ts.map +1 -0
  8. package/dist/_types/auth/hooks/useAuth.d.ts +18 -0
  9. package/dist/_types/auth/hooks/useAuth.d.ts.map +1 -0
  10. package/dist/_types/auth/index.d.ts +4 -0
  11. package/dist/_types/auth/index.d.ts.map +1 -0
  12. package/dist/_types/auth/pages/EmailVerification.d.ts +2 -0
  13. package/dist/_types/auth/pages/EmailVerification.d.ts.map +1 -0
  14. package/dist/_types/auth/pages/ErrorScreen.d.ts +9 -0
  15. package/dist/_types/auth/pages/ErrorScreen.d.ts.map +1 -0
  16. package/dist/_types/auth/pages/OtpInput.d.ts +2 -0
  17. package/dist/_types/auth/pages/OtpInput.d.ts.map +1 -0
  18. package/dist/_types/auth/pages/SignUp.d.ts +2 -0
  19. package/dist/_types/auth/pages/SignUp.d.ts.map +1 -0
  20. package/dist/_types/auth/pages/Verifying.d.ts +2 -0
  21. package/dist/_types/auth/pages/Verifying.d.ts.map +1 -0
  22. package/dist/_types/auth/pages/WalletSelection.d.ts +2 -0
  23. package/dist/_types/auth/pages/WalletSelection.d.ts.map +1 -0
  24. package/dist/_types/auth/types.d.ts +12 -0
  25. package/dist/_types/auth/types.d.ts.map +1 -0
  26. package/dist/_types/auth/utils/url.d.ts +3 -0
  27. package/dist/_types/auth/utils/url.d.ts.map +1 -0
  28. package/dist/_types/connector.d.ts +17 -0
  29. package/dist/_types/connector.d.ts.map +1 -0
  30. package/dist/_types/index.d.ts +10 -0
  31. package/dist/_types/index.d.ts.map +1 -0
  32. package/dist/_types/shared/components/PoweredBy/index.d.ts +6 -0
  33. package/dist/_types/shared/components/PoweredBy/index.d.ts.map +1 -0
  34. package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts +23 -0
  35. package/dist/_types/shared/components/Screen/EllipticalRadial.d.ts.map +1 -0
  36. package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts +4 -0
  37. package/dist/_types/shared/components/Screen/MultiRadialBackground.d.ts.map +1 -0
  38. package/dist/_types/shared/components/Screen/index.d.ts +9 -0
  39. package/dist/_types/shared/components/Screen/index.d.ts.map +1 -0
  40. package/dist/_types/shared/components/SignUpFooter/index.d.ts +8 -0
  41. package/dist/_types/shared/components/SignUpFooter/index.d.ts.map +1 -0
  42. package/dist/_types/shared/components/StatusScreen/index.d.ts +10 -0
  43. package/dist/_types/shared/components/StatusScreen/index.d.ts.map +1 -0
  44. package/dist/_types/shared/components/TopNav/index.d.ts +10 -0
  45. package/dist/_types/shared/components/TopNav/index.d.ts.map +1 -0
  46. package/dist/_types/shared/hooks/useKitStore.d.ts +11 -0
  47. package/dist/_types/shared/hooks/useKitStore.d.ts.map +1 -0
  48. package/dist/_types/shared/utils/common.d.ts +5 -0
  49. package/dist/_types/shared/utils/common.d.ts.map +1 -0
  50. package/dist/_types/shared/utils/store.d.ts +4 -0
  51. package/dist/_types/shared/utils/store.d.ts.map +1 -0
  52. package/dist/_types/store.d.ts +25 -0
  53. package/dist/_types/store.d.ts.map +1 -0
  54. package/dist/_types/types.d.ts +38 -0
  55. package/dist/_types/types.d.ts.map +1 -0
  56. package/dist/blob.webm +0 -0
  57. package/dist/error.webp +0 -0
  58. package/dist/index.cjs +4 -0
  59. package/dist/index.cjs.map +1 -0
  60. package/dist/index.mjs +1374 -0
  61. package/dist/index.mjs.map +1 -0
  62. package/dist/loading.webp +0 -0
  63. package/dist/send.webp +0 -0
  64. package/dist/styles.css +2 -0
  65. package/dist/success.webp +0 -0
  66. package/package.json +96 -0
  67. package/src/assets.d.ts +14 -0
  68. package/src/auth/authStoreSlice.ts +180 -0
  69. package/src/auth/components/BlobAnimation/index.tsx +24 -0
  70. package/src/auth/components/CodeInput/index.tsx +118 -0
  71. package/src/auth/hooks/useAuth.ts +32 -0
  72. package/src/auth/index.tsx +108 -0
  73. package/src/auth/pages/EmailVerification.tsx +76 -0
  74. package/src/auth/pages/ErrorScreen.tsx +53 -0
  75. package/src/auth/pages/OtpInput.tsx +124 -0
  76. package/src/auth/pages/SignUp.tsx +303 -0
  77. package/src/auth/pages/Verifying.tsx +108 -0
  78. package/src/auth/pages/WalletSelection.tsx +53 -0
  79. package/src/auth/types.ts +23 -0
  80. package/src/auth/utils/url.ts +12 -0
  81. package/src/connector.ts +182 -0
  82. package/src/index.ts +25 -0
  83. package/src/shared/components/PoweredBy/index.tsx +26 -0
  84. package/src/shared/components/Screen/EllipticalRadial.tsx +65 -0
  85. package/src/shared/components/Screen/MultiRadialBackground.tsx +323 -0
  86. package/src/shared/components/Screen/index.tsx +65 -0
  87. package/src/shared/components/SignUpFooter/index.tsx +66 -0
  88. package/src/shared/components/StatusScreen/index.tsx +49 -0
  89. package/src/shared/components/TopNav/index.tsx +45 -0
  90. package/src/shared/hooks/useKitStore.ts +20 -0
  91. package/src/shared/utils/common.ts +26 -0
  92. package/src/shared/utils/store.ts +9 -0
  93. package/src/store.ts +44 -0
  94. package/src/types.ts +48 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,1374 @@
1
+ import { jsxs as a, jsx as t, Fragment as b } from "react/jsx-runtime";
2
+ import { useId as D, useState as x, useEffect as P, useMemo as ie, useRef as K } from "react";
3
+ import { useStore as O, create as se } from "zustand";
4
+ import { cn as R, IconButton as q, Text as h, Icon as X, Button as C, Wrapper as de, ListItem as Y, Input as ae } from "@zerodev/react-ui";
5
+ import { useConfig as le, useConnect as ce } from "wagmi";
6
+ import { useSendMagicLink as J, useSendOTP as Q, useVerifyOTP as ue, useAuthenticateOAuth as pe, useRegisterPasskey as fe, useLoginPasskey as he, useVerifyMagicLink as ze, zeroDevWallet as me, NotAuthenticatedError as ge } from "@zerodev/wallet-react";
7
+ import { subscribeWithSelector as ye } from "zustand/middleware";
8
+ const Z = 52;
9
+ function xe({
10
+ onBack: e,
11
+ onClose: o,
12
+ title: i,
13
+ logo: n,
14
+ className: r
15
+ }) {
16
+ return /* @__PURE__ */ a(
17
+ "div",
18
+ {
19
+ className: R(
20
+ "zd:absolute zd:top-4 zd:left-0 zd:right-0 zd:flex zd:flex-row zd:items-center zd:justify-between",
21
+ r
22
+ ),
23
+ style: { height: Z },
24
+ children: [
25
+ e ? /* @__PURE__ */ t(q, { iconName: "chevronLeft", onClick: e }) : /* @__PURE__ */ t("div", { className: "zd:h-13 zd:w-13" }),
26
+ n && /* @__PURE__ */ t("div", { className: "zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none", children: n }),
27
+ i && /* @__PURE__ */ t("div", { className: "zd:absolute zd:left-0 zd:right-0 zd:flex zd:items-center zd:justify-center zd:pointer-events-none", children: /* @__PURE__ */ t(h, { className: "zd:text-body1", children: i }) }),
28
+ /* @__PURE__ */ t(q, { iconName: "x", onClick: o })
29
+ ]
30
+ }
31
+ );
32
+ }
33
+ function we({
34
+ layer: e,
35
+ rect: o
36
+ }) {
37
+ const { id: i, matrix: n, fillOpacity: r, stops: c } = e;
38
+ return /* @__PURE__ */ a(b, { children: [
39
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t(
40
+ "radialGradient",
41
+ {
42
+ id: i,
43
+ cx: "0",
44
+ cy: "0",
45
+ r: "1",
46
+ gradientUnits: "userSpaceOnUse",
47
+ gradientTransform: `matrix(${n.join(" ")})`,
48
+ children: c.map((s, u) => /* @__PURE__ */ t(
49
+ "stop",
50
+ {
51
+ offset: s.offset,
52
+ stopColor: s.color,
53
+ stopOpacity: s.opacity
54
+ },
55
+ s.color + u.toString()
56
+ ))
57
+ }
58
+ ) }),
59
+ /* @__PURE__ */ t(
60
+ "rect",
61
+ {
62
+ x: o.x,
63
+ y: o.y,
64
+ width: o.width,
65
+ height: o.height,
66
+ fill: `url(#${i})`,
67
+ fillOpacity: r
68
+ }
69
+ )
70
+ ] });
71
+ }
72
+ const ve = "-6 -6 412 812";
73
+ function Ne() {
74
+ return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none", children: /* @__PURE__ */ t(
75
+ "svg",
76
+ {
77
+ width: "100%",
78
+ height: "100%",
79
+ viewBox: ve,
80
+ preserveAspectRatio: "none",
81
+ role: "img",
82
+ "aria-label": "Decorative gradient background",
83
+ children: /* @__PURE__ */ t("rect", { x: "-6", y: "-6", width: "412", height: "812", fill: "#FBF7F2" })
84
+ }
85
+ ) });
86
+ }
87
+ function Se() {
88
+ const e = D(), o = [
89
+ {
90
+ // (CSS #6) blue → top-right. x-radius widened so the lobe reaches further
91
+ // left; y-radius kept short so it stays up top and doesn't bleed into the
92
+ // orange band.
93
+ id: `${e}-blue`,
94
+ matrix: [1850, 0, 0, 645, 381.44, 0],
95
+ fillOpacity: 1,
96
+ stops: [
97
+ { offset: 0, color: "#45ABFB", opacity: 0.66 },
98
+ { offset: 0.4615, color: "#1E9AFB", opacity: 0.35 },
99
+ { offset: 1, color: "#45ABFB", opacity: 0 }
100
+ ]
101
+ },
102
+ {
103
+ // (CSS #5) offWhite → blue, very faint
104
+ id: `${e}-offwhite-tr`,
105
+ matrix: [55.28, 0, 0, 773.36, 386.68, 13.28],
106
+ fillOpacity: 1,
107
+ stops: [
108
+ { offset: 0, color: "#F7F5F0", opacity: 0.1 },
109
+ { offset: 1, color: "#45ABFB", opacity: 0 }
110
+ ]
111
+ },
112
+ {
113
+ // (CSS #4) warmGrey
114
+ id: `${e}-warmgrey`,
115
+ matrix: [326.72, 0, 0, 855.52, 0, 50.32],
116
+ fillOpacity: 1,
117
+ stops: [
118
+ { offset: 0, color: "#E3CFC3", opacity: 1 },
119
+ { offset: 1, color: "#E3CFC3", opacity: 0 }
120
+ ]
121
+ },
122
+ {
123
+ // (CSS #3) orange — spans the full width across the bottom ~30%, uniform.
124
+ id: `${e}-orange`,
125
+ matrix: [580, 0, 0, 380, 200, 835],
126
+ fillOpacity: 1,
127
+ stops: [
128
+ { offset: 0, color: "#EE6C2E", opacity: 0.8 },
129
+ { offset: 0.55, color: "#EE6C2E", opacity: 0.6 },
130
+ { offset: 1, color: "#EE6C2E", opacity: 0.15 }
131
+ ]
132
+ },
133
+ {
134
+ // (CSS #2) peach — spread further up (~30% of the bottom), a bit more vivid
135
+ id: `${e}-peach`,
136
+ matrix: [520, 0, 0, 560, 180, 830],
137
+ fillOpacity: 1,
138
+ stops: [
139
+ { offset: 0, color: "#FAC8AC", opacity: 1 },
140
+ { offset: 1, color: "#F27B3E", opacity: 0 }
141
+ ]
142
+ },
143
+ {
144
+ // (CSS #1) white glow (topmost of the colour stack)
145
+ id: `${e}-white-bl`,
146
+ matrix: [90.72, 0, 0, 550.48, 38.04, 702.64],
147
+ fillOpacity: 1,
148
+ stops: [
149
+ { offset: 0, color: "white", opacity: 0.58 },
150
+ { offset: 1, color: "white", opacity: 0 }
151
+ ]
152
+ }
153
+ ];
154
+ return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ a(
155
+ "svg",
156
+ {
157
+ width: "100%",
158
+ height: "100%",
159
+ viewBox: "0 0 400 800",
160
+ preserveAspectRatio: "none",
161
+ role: "presentation",
162
+ children: [
163
+ o.map((i) => /* @__PURE__ */ t(
164
+ we,
165
+ {
166
+ layer: i,
167
+ rect: { x: 0, y: 0, width: 400, height: 800 }
168
+ },
169
+ i.id
170
+ )),
171
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ a(
172
+ "linearGradient",
173
+ {
174
+ id: `${e}-vfade`,
175
+ x1: "0",
176
+ y1: "0",
177
+ x2: "0",
178
+ y2: "800",
179
+ gradientUnits: "userSpaceOnUse",
180
+ children: [
181
+ /* @__PURE__ */ t("stop", { offset: "0", stopColor: "white", stopOpacity: "0.55" }),
182
+ /* @__PURE__ */ t("stop", { offset: "0.45", stopColor: "white", stopOpacity: "0.52" }),
183
+ /* @__PURE__ */ t("stop", { offset: "0.65", stopColor: "white", stopOpacity: "0.5" }),
184
+ /* @__PURE__ */ t("stop", { offset: "0.85", stopColor: "white", stopOpacity: "0.5" }),
185
+ /* @__PURE__ */ t("stop", { offset: "1", stopColor: "white", stopOpacity: "0.5" })
186
+ ]
187
+ }
188
+ ) }),
189
+ /* @__PURE__ */ t(
190
+ "rect",
191
+ {
192
+ x: "0",
193
+ y: "0",
194
+ width: "400",
195
+ height: "800",
196
+ fill: `url(#${e}-vfade)`
197
+ }
198
+ ),
199
+ /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ a(
200
+ "linearGradient",
201
+ {
202
+ id: `${e}-bluefade`,
203
+ x1: "0",
204
+ y1: "800",
205
+ x2: "120",
206
+ y2: "640",
207
+ gradientUnits: "userSpaceOnUse",
208
+ children: [
209
+ /* @__PURE__ */ t("stop", { offset: "0", stopColor: "#A7B8E2", stopOpacity: "1" }),
210
+ /* @__PURE__ */ t("stop", { offset: "0.33", stopColor: "#A7B8E2", stopOpacity: "0.7" }),
211
+ /* @__PURE__ */ t("stop", { offset: "0.66", stopColor: "#A7B8E2", stopOpacity: "0.35" }),
212
+ /* @__PURE__ */ t("stop", { offset: "1", stopColor: "#A7B8E2", stopOpacity: "0" })
213
+ ]
214
+ }
215
+ ) }),
216
+ /* @__PURE__ */ t(
217
+ "rect",
218
+ {
219
+ x: "0",
220
+ y: "0",
221
+ width: "400",
222
+ height: "800",
223
+ fill: `url(#${e}-bluefade)`
224
+ }
225
+ )
226
+ ]
227
+ }
228
+ ) });
229
+ }
230
+ function Ee() {
231
+ const e = D(), o = [
232
+ {
233
+ id: `${e}-g6`,
234
+ // (CSS #6) blue, top-right
235
+ cx: 0.9536,
236
+ cy: 0,
237
+ rx: 0.9385,
238
+ ry: 1.2256,
239
+ stops: [
240
+ { offset: 0, color: "#45ABFB", opacity: 0.6 },
241
+ { offset: 0.4615, color: "#1E9AFB", opacity: 0.32 },
242
+ { offset: 1, color: "#45ABFB", opacity: 0 }
243
+ ]
244
+ },
245
+ {
246
+ id: `${e}-g5`,
247
+ // (CSS #5) faint light, top-right
248
+ cx: 0.9667,
249
+ cy: 0.0166,
250
+ rx: 0.1382,
251
+ ry: 0.9667,
252
+ stops: [
253
+ { offset: 0, color: "#F7F5F0", opacity: 0.1 },
254
+ { offset: 1, color: "#45ABFB", opacity: 0 }
255
+ ]
256
+ },
257
+ {
258
+ id: `${e}-g4`,
259
+ // (CSS #4) warm grey, top-left
260
+ cx: 0,
261
+ cy: 0.0629,
262
+ rx: 0.8168,
263
+ ry: 1.0694,
264
+ stops: [
265
+ { offset: 0, color: "#E3CFC3", opacity: 1 },
266
+ { offset: 1, color: "#E3CFC3", opacity: 0 }
267
+ ]
268
+ },
269
+ {
270
+ id: `${e}-g3`,
271
+ // (CSS #3) orange, bottom-left
272
+ cx: 0.0393,
273
+ cy: 1,
274
+ rx: 1.0628,
275
+ ry: 1.0303,
276
+ stops: [
277
+ { offset: 0, color: "#FF6B1F", opacity: 1 },
278
+ { offset: 0.476, color: "#E76000", opacity: 0.72 },
279
+ { offset: 1, color: "#E76000", opacity: 0 }
280
+ ]
281
+ },
282
+ {
283
+ id: `${e}-g2`,
284
+ // (CSS #2) peach, bottom-center
285
+ cx: 0.3476,
286
+ cy: 1,
287
+ rx: 0.9614,
288
+ ry: 0.338,
289
+ stops: [
290
+ { offset: 0, color: "#FAC8AC", opacity: 0.7 },
291
+ { offset: 1, color: "#F27B3E", opacity: 0 }
292
+ ]
293
+ },
294
+ {
295
+ id: `${e}-g1`,
296
+ // (CSS #1) white glow, bottom-left
297
+ cx: 0.0951,
298
+ cy: 0.8783,
299
+ rx: 0.2268,
300
+ ry: 0.6881,
301
+ stops: [
302
+ { offset: 0, color: "#FFFFFF", opacity: 0.58 },
303
+ { offset: 1, color: "#FFFFFF", opacity: 0 }
304
+ ]
305
+ }
306
+ ];
307
+ return /* @__PURE__ */ t("div", { className: "zd:absolute zd:inset-0 zd:z-0 zd:rounded-4xl zd:pointer-events-none zd:overflow-hidden", children: /* @__PURE__ */ a(
308
+ "svg",
309
+ {
310
+ width: "100%",
311
+ height: "100%",
312
+ preserveAspectRatio: "none",
313
+ role: "presentation",
314
+ children: [
315
+ /* @__PURE__ */ t("rect", { width: "100%", height: "100%", fill: "#130E0B" }),
316
+ /* @__PURE__ */ t("defs", { children: o.map((i) => /* @__PURE__ */ t(
317
+ "radialGradient",
318
+ {
319
+ id: i.id,
320
+ cx: `${i.cx / i.rx * 100}%`,
321
+ cy: `${i.cy / i.ry * 100}%`,
322
+ r: "100%",
323
+ gradientUnits: "objectBoundingBox",
324
+ gradientTransform: `scale(${i.rx}, ${i.ry})`,
325
+ children: i.stops.map((n, r) => /* @__PURE__ */ t(
326
+ "stop",
327
+ {
328
+ offset: n.offset,
329
+ stopColor: n.color,
330
+ stopOpacity: n.opacity
331
+ },
332
+ n.color + r.toString()
333
+ ))
334
+ },
335
+ i.id
336
+ )) }),
337
+ o.map((i) => /* @__PURE__ */ t(
338
+ "rect",
339
+ {
340
+ width: "100%",
341
+ height: "100%",
342
+ fill: `url(#${i.id})`
343
+ },
344
+ `${i.id}-rect`
345
+ ))
346
+ ]
347
+ }
348
+ ) });
349
+ }
350
+ const be = Z + 16;
351
+ function Ce({
352
+ children: e,
353
+ className: o,
354
+ contentClassName: i,
355
+ style: n,
356
+ topNav: r
357
+ }) {
358
+ return /* @__PURE__ */ a(
359
+ "div",
360
+ {
361
+ className: R(
362
+ "zd:flex zd:flex-col zd:overflow-hidden zd:text-left",
363
+ "zd:fixed zd:inset-0 zd:z-50 zd:w-screen zd:h-[100dvh] zd:rounded-[36px]",
364
+ "zd:sm:relative zd:sm:z-auto zd:sm:w-100 zd:sm:max-w-full zd:sm:h-[810px] zd:sm:max-h-[100dvh]",
365
+ o
366
+ ),
367
+ style: n,
368
+ children: [
369
+ /* @__PURE__ */ t(Ee, {}),
370
+ /* @__PURE__ */ a(
371
+ "div",
372
+ {
373
+ className: R(
374
+ "zd:flex zd:flex-1 zd:flex-col zd:m-1.5 zd:px-4 zd:overflow-hidden zd:rounded-4xl zd:relative",
375
+ i
376
+ ),
377
+ style: { clipPath: "inset(0 round 32px)" },
378
+ children: [
379
+ /* @__PURE__ */ t(Ne, {}),
380
+ /* @__PURE__ */ t(Se, {}),
381
+ /* @__PURE__ */ a("div", { className: "zd:relative zd:z-10 zd:flex zd:flex-1 zd:flex-col zd:min-h-0", children: [
382
+ r,
383
+ /* @__PURE__ */ t(
384
+ "div",
385
+ {
386
+ className: "zd:flex zd:flex-1 zd:flex-col zd:min-h-0 zd:overflow-y-auto zd:overflow-x-hidden",
387
+ style: { paddingTop: `${be}px` },
388
+ children: e
389
+ }
390
+ )
391
+ ] })
392
+ ]
393
+ }
394
+ )
395
+ ]
396
+ }
397
+ );
398
+ }
399
+ const ke = "" + new URL("error.webp", import.meta.url).href, Ae = "" + new URL("loading.webp", import.meta.url).href, Oe = "" + new URL("send.webp", import.meta.url).href, Te = "" + new URL("success.webp", import.meta.url).href, Be = {
400
+ error: ke,
401
+ loading: Ae,
402
+ send: Oe,
403
+ success: Te
404
+ };
405
+ function I({
406
+ imageName: e,
407
+ title: o,
408
+ children: i,
409
+ className: n
410
+ }) {
411
+ return /* @__PURE__ */ a(
412
+ "div",
413
+ {
414
+ className: R("zd:flex zd:flex-col zd:gap-8 zd:items-center", n),
415
+ children: [
416
+ /* @__PURE__ */ t(
417
+ "img",
418
+ {
419
+ src: Be[e],
420
+ alt: e,
421
+ className: "zd:w-[118px] zd:h-[118px] zd:bg-transparent"
422
+ }
423
+ ),
424
+ /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:items-center", children: [
425
+ /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center zd:whitespace-pre-wrap", children: o }),
426
+ /* @__PURE__ */ t(h, { className: "zd:text-center zd:whitespace-pre-wrap", children: i })
427
+ ] })
428
+ ]
429
+ }
430
+ );
431
+ }
432
+ function ee() {
433
+ const o = le().connectors.find((i) => i.id === "zerodev-wallet");
434
+ if (!o || !("getKitStore" in o))
435
+ throw new Error("useKitStore must be used with the zeroDevWallet connector");
436
+ return o.getKitStore();
437
+ }
438
+ function F() {
439
+ const e = ee(), o = O(e, (l) => l.auth.step), i = O(e, (l) => l.auth.stepHistory), n = O(e, (l) => l.auth.email), r = O(e, (l) => l.auth.otpId), c = O(
440
+ e,
441
+ (l) => l.auth.otpEncryptionTargetBundle
442
+ ), s = O(e, (l) => l.auth.enabledMethods), u = O(e, (l) => l.auth.config);
443
+ return {
444
+ step: o,
445
+ email: n,
446
+ otpId: r,
447
+ otpEncryptionTargetBundle: c,
448
+ enabledMethods: s,
449
+ config: u,
450
+ goToStep: e.getState().auth.goToStep,
451
+ goBack: i.length > 0 ? e.getState().auth.goBack : null,
452
+ reset: e.getState().auth.reset,
453
+ setEmail: e.getState().auth.setEmail,
454
+ setOtpSession: e.getState().auth.setOtpSession,
455
+ clearOtpSession: e.getState().auth.clearOtpSession
456
+ };
457
+ }
458
+ function L({
459
+ className: e,
460
+ style: o
461
+ }) {
462
+ return /* @__PURE__ */ a(
463
+ "div",
464
+ {
465
+ className: R(
466
+ "zd:gap-1.5 zd:flex zd:flex-row zd:items-center",
467
+ e
468
+ ),
469
+ children: [
470
+ /* @__PURE__ */ t(h, { children: "Powered by" }),
471
+ /* @__PURE__ */ t(
472
+ X,
473
+ {
474
+ name: "zerodevLogo",
475
+ className: "zd:h-[18px] zd:w-auto",
476
+ style: o
477
+ }
478
+ )
479
+ ]
480
+ }
481
+ );
482
+ }
483
+ function Ie() {
484
+ const { email: e, setOtpSession: o } = F(), { mutateAsync: i, isPending: n } = J(), [r, c] = x(60), s = r <= 0 && !n;
485
+ return P(() => {
486
+ if (r <= 0) return;
487
+ const l = setInterval(() => {
488
+ c((p) => Math.max(0, p - 1));
489
+ }, 1e3);
490
+ return () => {
491
+ clearInterval(l);
492
+ };
493
+ }, [r]), /* @__PURE__ */ a(b, { children: [
494
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
495
+ /* @__PURE__ */ a(
496
+ I,
497
+ {
498
+ imageName: "send",
499
+ title: `Check your email!
500
+ An Email is On Its Way`,
501
+ children: [
502
+ "We've sent a magic link to",
503
+ " ",
504
+ /* @__PURE__ */ t(h, { as: "span", className: "zd:text-solarOrange", children: e }),
505
+ `
506
+ `,
507
+ "Please open the email and click the link to log in."
508
+ ]
509
+ }
510
+ ),
511
+ /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
512
+ "Did not get an email?",
513
+ " ",
514
+ /* @__PURE__ */ t(
515
+ "button",
516
+ {
517
+ type: "button",
518
+ disabled: !s,
519
+ onClick: async () => {
520
+ if (!(!e || !s))
521
+ try {
522
+ const { otpId: l, otpEncryptionTargetBundle: p } = await i({
523
+ email: e
524
+ });
525
+ o({ otpId: l, otpEncryptionTargetBundle: p }), c(60);
526
+ } catch {
527
+ }
528
+ },
529
+ className: "zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed",
530
+ children: s ? "Resend" : `Resend in ${r} ${r === 1 ? "second" : "seconds"}`
531
+ }
532
+ )
533
+ ] }) })
534
+ ] }),
535
+ /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
536
+ ] });
537
+ }
538
+ function Fe() {
539
+ return typeof window > "u" ? !1 : new URLSearchParams(window.location.search).has("code");
540
+ }
541
+ function $() {
542
+ if (typeof window > "u") return;
543
+ const e = new URL(window.location.href);
544
+ e.searchParams.has("code") && (e.searchParams.delete("code"), window.history.replaceState(null, "", e.toString()));
545
+ }
546
+ function Pe({
547
+ title: e = "Oops, something went wrong",
548
+ message: o = "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request.",
549
+ showRetry: i = !1,
550
+ showChooseAnother: n = !0
551
+ }) {
552
+ const { goToStep: r, goBack: c, reset: s } = F();
553
+ return /* @__PURE__ */ a(b, { children: [
554
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
555
+ /* @__PURE__ */ t(I, { imageName: "error", title: e, children: o }),
556
+ /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-1", children: [
557
+ i && /* @__PURE__ */ t(C, { action: "primary", text: "Try again", onClick: c ?? (() => r("sign-up")) }),
558
+ n && /* @__PURE__ */ t(
559
+ C,
560
+ {
561
+ action: i ? "secondary" : "primary",
562
+ onClick: () => {
563
+ $(), r("sign-up");
564
+ },
565
+ text: "Choose another sign-in method"
566
+ }
567
+ ),
568
+ !i && !n && /* @__PURE__ */ t(C, { action: "primary", text: "Start over", onClick: s })
569
+ ] })
570
+ ] }),
571
+ /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
572
+ ] });
573
+ }
574
+ const Re = 4, Le = 8, $e = 6;
575
+ function Ue(e) {
576
+ return Math.max(Re, Math.min(Le, e));
577
+ }
578
+ function Me({ char: e, isFocused: o }) {
579
+ return /* @__PURE__ */ t(
580
+ de,
581
+ {
582
+ "data-testid": "code-input-box",
583
+ "data-active": o || void 0,
584
+ className: R(
585
+ "zd:h-16 zd:w-14 zd:rounded-lg zd:flex zd:items-center zd:justify-center",
586
+ o && "zd:border-[1.5px] zd:border-greyScale"
587
+ ),
588
+ children: /* @__PURE__ */ t(h, { className: "zd:text-h2", children: e })
589
+ }
590
+ );
591
+ }
592
+ function je({
593
+ onChange: e,
594
+ onComplete: o,
595
+ disabled: i = !1,
596
+ error: n = !1,
597
+ autoFocus: r = !1,
598
+ length: c = $e,
599
+ "data-testid": s
600
+ }) {
601
+ const u = Ue(c), l = ie(
602
+ () => Array.from({ length: u }, (f, g) => ({
603
+ id: `char-${g}`,
604
+ index: g
605
+ })),
606
+ [u]
607
+ ), [p, w] = x(""), [m, N] = x(!1), k = K(null);
608
+ P(() => {
609
+ var f;
610
+ r && !i && ((f = k.current) == null || f.focus());
611
+ }, [r, i]), P(() => {
612
+ w((f) => f.slice(0, u));
613
+ }, [u]);
614
+ const S = (f) => {
615
+ const g = f.slice(0, u).toUpperCase();
616
+ w(g), e == null || e(g), g.length === u && setTimeout(() => {
617
+ var T;
618
+ o == null || o(g), (T = k.current) == null || T.blur();
619
+ }, 0);
620
+ };
621
+ return /* @__PURE__ */ a(
622
+ "button",
623
+ {
624
+ type: "button",
625
+ className: "zd:flex zd:flex-row zd:items-center zd:justify-between zd:gap-2 zd:w-full zd:cursor-text",
626
+ onClick: () => {
627
+ var f;
628
+ return (f = k.current) == null ? void 0 : f.focus();
629
+ },
630
+ disabled: i,
631
+ "data-testid": s,
632
+ children: [
633
+ /* @__PURE__ */ t(
634
+ "input",
635
+ {
636
+ ref: k,
637
+ value: p,
638
+ onChange: (f) => S(f.target.value),
639
+ onFocus: () => N(!0),
640
+ onBlur: () => N(!1),
641
+ maxLength: u,
642
+ disabled: i,
643
+ className: "zd:absolute zd:opacity-0 zd:pointer-events-none",
644
+ style: { position: "absolute", opacity: 0 },
645
+ "aria-label": "Verification code"
646
+ }
647
+ ),
648
+ l.map((f) => /* @__PURE__ */ t(
649
+ Me,
650
+ {
651
+ char: p[f.index] ?? "",
652
+ isFocused: !n && m && f.index === p.length
653
+ },
654
+ f.id
655
+ ))
656
+ ]
657
+ }
658
+ );
659
+ }
660
+ function _e() {
661
+ const {
662
+ email: e,
663
+ otpId: o,
664
+ otpEncryptionTargetBundle: i,
665
+ setOtpSession: n,
666
+ clearOtpSession: r,
667
+ goToStep: c,
668
+ config: s
669
+ } = F(), { mutateAsync: u, isPending: l } = Q(), { mutateAsync: p, isPending: w } = ue(), [m, N] = x(""), [k, S] = x(!1), [f, g] = x(60);
670
+ P(() => {
671
+ if (f <= 0) return;
672
+ const v = setInterval(() => {
673
+ g((A) => Math.max(0, A - 1));
674
+ }, 1e3);
675
+ return () => clearInterval(v);
676
+ }, [f]);
677
+ const T = async () => {
678
+ var v, A;
679
+ if (!(!m.trim() || !o || !i)) {
680
+ S(!1);
681
+ try {
682
+ await p({
683
+ otpId: o,
684
+ code: m.trim(),
685
+ otpEncryptionTargetBundle: i
686
+ }), r(), c("authenticated"), (v = s == null ? void 0 : s.onSuccess) == null || v.call(s);
687
+ } catch (_) {
688
+ S(!0), (A = s == null ? void 0 : s.onError) == null || A.call(s, _);
689
+ }
690
+ }
691
+ }, y = (v) => {
692
+ N(v);
693
+ }, j = async () => {
694
+ if (!(!e || f > 0 || l))
695
+ try {
696
+ const { otpId: v, otpEncryptionTargetBundle: A } = await u({ email: e });
697
+ n({
698
+ otpId: v,
699
+ otpEncryptionTargetBundle: A
700
+ }), g(60), S(!1);
701
+ } catch {
702
+ S(!0);
703
+ }
704
+ }, U = f <= 0 && !l;
705
+ return /* @__PURE__ */ a(b, { children: [
706
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center zd:items-center", children: [
707
+ /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4", children: [
708
+ /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Enter verification code" }),
709
+ /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
710
+ "Enter the code from the email we sent to",
711
+ " ",
712
+ /* @__PURE__ */ t(h, { className: "zd:text-solarOrange", children: e })
713
+ ] })
714
+ ] }),
715
+ /* @__PURE__ */ t(
716
+ je,
717
+ {
718
+ onComplete: y,
719
+ onChange: () => S(!1),
720
+ disabled: w,
721
+ error: k,
722
+ autoFocus: !0
723
+ }
724
+ ),
725
+ /* @__PURE__ */ t(
726
+ C,
727
+ {
728
+ text: "Confirm code",
729
+ onClick: T,
730
+ disabled: !m.trim() || w
731
+ }
732
+ ),
733
+ /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-1", children: /* @__PURE__ */ a(h, { className: "zd:text-center", children: [
734
+ "Did not get an email?",
735
+ " ",
736
+ /* @__PURE__ */ t(
737
+ "button",
738
+ {
739
+ type: "button",
740
+ disabled: !U,
741
+ onClick: j,
742
+ className: "zd:cursor-pointer zd:underline zd:disabled:opacity-50 zd:disabled:cursor-not-allowed",
743
+ children: U ? "Resend" : `Resend in ${f} ${f === 1 ? "second" : "seconds"}`
744
+ }
745
+ )
746
+ ] }) })
747
+ ] }),
748
+ /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
749
+ ] });
750
+ }
751
+ function He({
752
+ termsAndConditionsUrl: e,
753
+ privacyPolicyUrl: o,
754
+ agreedToTerms: i,
755
+ setAgreedToTerms: n,
756
+ highlight: r = !1
757
+ }) {
758
+ return /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:items-center zd:gap-5", children: [
759
+ !!(e || o) && /* @__PURE__ */ a(
760
+ "div",
761
+ {
762
+ className: `zd:flex zd:flex-row zd:items-center zd:gap-2 zd:rounded-md zd:p-2 zd:transition-colors ${r ? "zd:border zd:border-negative" : "zd:border zd:border-transparent"}`,
763
+ children: [
764
+ /* @__PURE__ */ t(
765
+ "input",
766
+ {
767
+ type: "checkbox",
768
+ checked: i,
769
+ onChange: (s) => n(s.target.checked),
770
+ className: "zd:cursor-pointer zd:[color-scheme:light]"
771
+ }
772
+ ),
773
+ /* @__PURE__ */ a(h, { className: "zd:flex-1", children: [
774
+ "I agree to the",
775
+ " ",
776
+ e && /* @__PURE__ */ t(
777
+ h,
778
+ {
779
+ as: "a",
780
+ href: e,
781
+ target: "_blank",
782
+ rel: "noopener noreferrer",
783
+ className: "zd:underline",
784
+ children: "Terms & Conditions"
785
+ }
786
+ ),
787
+ e && o && " and ",
788
+ o && /* @__PURE__ */ t(
789
+ h,
790
+ {
791
+ as: "a",
792
+ href: o,
793
+ target: "_blank",
794
+ rel: "noopener noreferrer",
795
+ className: "zd:underline",
796
+ children: "Privacy Policy"
797
+ }
798
+ )
799
+ ] })
800
+ ]
801
+ }
802
+ ),
803
+ /* @__PURE__ */ t(L, {})
804
+ ] });
805
+ }
806
+ const Ge = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
807
+ function M(e) {
808
+ return Ge.test(e.trim());
809
+ }
810
+ const We = "" + new URL("blob.webm", import.meta.url).href;
811
+ function qe({ className: e }) {
812
+ return /* @__PURE__ */ t(
813
+ "video",
814
+ {
815
+ className: e,
816
+ style: { aspectRatio: "1 / 1" },
817
+ src: We,
818
+ autoPlay: !0,
819
+ loop: !0,
820
+ muted: !0,
821
+ playsInline: !0,
822
+ "aria-hidden": "true",
823
+ tabIndex: -1
824
+ }
825
+ );
826
+ }
827
+ function H(e) {
828
+ return e instanceof Error ? e.name === "AbortError" || e.name === "NotAllowedError" ? !0 : e.message.toLowerCase().includes("oauth popup was closed") : !1;
829
+ }
830
+ function Ve() {
831
+ const { goToStep: e, setEmail: o, setOtpSession: i, config: n, enabledMethods: r } = F(), [c, s] = x(!1), [u, l] = x(!1), [p, w] = x(""), m = (n == null ? void 0 : n.emailAuthMethod) === "otp", { mutateAsync: N, isPending: k } = Q(), { mutateAsync: S, isPending: f } = J(), g = k || f, [T, y] = x(null), { mutateAsync: j, isPending: U } = pe({
832
+ mutation: {
833
+ onSuccess: async () => {
834
+ var d;
835
+ e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
836
+ },
837
+ onError: (d) => {
838
+ var z;
839
+ (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
840
+ }
841
+ }
842
+ }), { mutate: v, isPending: A } = fe({
843
+ mutation: {
844
+ onSuccess: () => {
845
+ var d;
846
+ e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
847
+ },
848
+ onError: (d) => {
849
+ var z;
850
+ H(d) || y(d instanceof Error ? d.message : String(d)), (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
851
+ }
852
+ }
853
+ }), { mutate: _, isPending: te } = he({
854
+ mutation: {
855
+ onSuccess: () => {
856
+ var d;
857
+ e("authenticated"), (d = n == null ? void 0 : n.onSuccess) == null || d.call(n);
858
+ },
859
+ onError: (d) => {
860
+ var z;
861
+ H(d) || y(d instanceof Error ? d.message : String(d)), (z = n == null ? void 0 : n.onError) == null || z.call(n, d);
862
+ }
863
+ }
864
+ }), E = U || g || A || te, B = !!(n != null && n.termsAndConditionsUrl || n != null && n.privacyPolicyUrl) && !c, ne = () => {
865
+ if (!E) {
866
+ if (B) {
867
+ l(!0);
868
+ return;
869
+ }
870
+ y(null), v();
871
+ }
872
+ }, oe = () => {
873
+ if (!E) {
874
+ if (B) {
875
+ l(!0);
876
+ return;
877
+ }
878
+ y(null), _();
879
+ }
880
+ }, re = async () => {
881
+ if (B) {
882
+ l(!0);
883
+ return;
884
+ }
885
+ y(null);
886
+ try {
887
+ await j({ provider: "google" });
888
+ } catch (d) {
889
+ const z = d instanceof Error ? d.message : String(d);
890
+ H(d) || y(z);
891
+ }
892
+ }, W = m ? async () => {
893
+ if (!(!p || E) && M(p)) {
894
+ if (B) {
895
+ l(!0);
896
+ return;
897
+ }
898
+ y(null);
899
+ try {
900
+ const { otpId: d, otpEncryptionTargetBundle: z } = await N({
901
+ email: p
902
+ });
903
+ o(p), i({ otpId: d, otpEncryptionTargetBundle: z }), e("otp-input");
904
+ } catch (d) {
905
+ y(
906
+ d instanceof Error ? d.message : "Failed to send verification code"
907
+ );
908
+ }
909
+ }
910
+ } : async () => {
911
+ if (!(!p || E) && M(p)) {
912
+ if (B) {
913
+ l(!0);
914
+ return;
915
+ }
916
+ y(null);
917
+ try {
918
+ const { otpId: d, otpEncryptionTargetBundle: z } = await S({
919
+ email: p
920
+ });
921
+ o(p), i({ otpId: d, otpEncryptionTargetBundle: z }), e("email-verification");
922
+ } catch (d) {
923
+ y(
924
+ d instanceof Error ? d.message : "Failed to send verification code"
925
+ );
926
+ }
927
+ }
928
+ };
929
+ return T ? /* @__PURE__ */ t("div", { className: "zd:flex zd:items-center zd:justify-center zd:h-full", children: /* @__PURE__ */ a("div", { className: "zd:flex zd:flex-col zd:gap-4 zd:max-w-md", children: [
930
+ /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Error occurred" }),
931
+ /* @__PURE__ */ t(h, { className: "zd:text-center zd:text-red-500", children: T }),
932
+ /* @__PURE__ */ t(
933
+ C,
934
+ {
935
+ action: "primary",
936
+ text: "Try again",
937
+ onClick: () => y(null)
938
+ }
939
+ )
940
+ ] }) }) : /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-between zd:pb-4 zd:overflow-y-auto zd:overflow-x-hidden", children: [
941
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:justify-center", children: [
942
+ /* @__PURE__ */ a("div", { className: "zd:px-4 zd:flex zd:flex-col zd:items-center", children: [
943
+ /* @__PURE__ */ t("div", { className: "zd:w-full zd:px-16 zd:py-4", children: /* @__PURE__ */ t(qe, { className: "zd:w-full zd:pointer-events-none zd:select-none" }) }),
944
+ /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Continue to your wallet" }),
945
+ /* @__PURE__ */ t(h, { className: "zd:mt-2 zd:text-center zd:text-greyScale/50", children: "Choose a sign-in method to proceed" })
946
+ ] }),
947
+ /* @__PURE__ */ a("div", { className: "zd:mt-6 zd:flex zd:flex-col zd:gap-4 zd:mb-4", children: [
948
+ r.includes("passkey") && /* @__PURE__ */ a(b, { children: [
949
+ /* @__PURE__ */ a("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
950
+ /* @__PURE__ */ t(
951
+ C,
952
+ {
953
+ action: "secondary",
954
+ text: "Create a passkey",
955
+ iconName: "key",
956
+ trailIcon: !0,
957
+ disabled: E,
958
+ onClick: ne
959
+ }
960
+ ),
961
+ /* @__PURE__ */ t(
962
+ C,
963
+ {
964
+ action: "secondary",
965
+ text: "Log in with passkey",
966
+ iconName: "key",
967
+ trailIcon: !0,
968
+ disabled: E,
969
+ onClick: oe
970
+ }
971
+ )
972
+ ] }),
973
+ /* @__PURE__ */ a("div", { className: "zd:flex zd:items-center zd:gap-3", children: [
974
+ /* @__PURE__ */ t("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" }),
975
+ /* @__PURE__ */ t(h, { className: "zd:text-body3", children: "or" }),
976
+ /* @__PURE__ */ t("div", { className: "zd:h-px zd:flex-1 zd:bg-greyScale/30" })
977
+ ] })
978
+ ] }),
979
+ /* @__PURE__ */ a("div", { className: "zd:px-4 zd:flex zd:flex-col zd:gap-2", children: [
980
+ r.includes("google") && /* @__PURE__ */ t(
981
+ Y,
982
+ {
983
+ iconName: "google",
984
+ title: "Google",
985
+ chevron: !0,
986
+ className: "zd:rounded-3xl",
987
+ disabled: E,
988
+ onClick: re
989
+ }
990
+ ),
991
+ r.includes("email") && /* @__PURE__ */ t(
992
+ ae,
993
+ {
994
+ iconName: "email",
995
+ placeholder: "Enter your email",
996
+ value: p,
997
+ onChange: (d) => w(d.target.value),
998
+ type: "email",
999
+ autoCapitalize: "none",
1000
+ autoComplete: "email",
1001
+ disabled: E,
1002
+ variant: "listItemStyle",
1003
+ containerClassName: "zd:rounded-3xl",
1004
+ onKeyDown: (d) => {
1005
+ d.key === "Enter" && p && !E && W();
1006
+ },
1007
+ children: g ? /* @__PURE__ */ t("div", { className: "zd:w-13 zd:h-13 zd:flex zd:items-center zd:justify-center", children: /* @__PURE__ */ t("div", { className: "zd:w-5 zd:h-5 zd:border-2 zd:border-solarOrange zd:border-t-transparent zd:rounded-full zd:animate-spin" }) }) : /* @__PURE__ */ t(
1008
+ "button",
1009
+ {
1010
+ type: "button",
1011
+ disabled: !M(p) || B,
1012
+ className: `zd:w-13 zd:h-13 zd:rounded-2xl zd:flex zd:items-center zd:justify-center zd:transition-colors ${M(p) && !B ? "zd:cursor-pointer" : "zd:cursor-not-allowed zd:opacity-50"}`,
1013
+ onClick: () => W(),
1014
+ children: /* @__PURE__ */ t(X, { name: "chevronRight", className: "zd:text-greyScale" })
1015
+ }
1016
+ )
1017
+ }
1018
+ )
1019
+ ] })
1020
+ ] })
1021
+ ] }),
1022
+ /* @__PURE__ */ t("div", { className: "zd:px-4", children: /* @__PURE__ */ t(
1023
+ He,
1024
+ {
1025
+ termsAndConditionsUrl: n == null ? void 0 : n.termsAndConditionsUrl,
1026
+ privacyPolicyUrl: n == null ? void 0 : n.privacyPolicyUrl,
1027
+ agreedToTerms: c,
1028
+ setAgreedToTerms: (d) => {
1029
+ s(d), d && l(!1);
1030
+ },
1031
+ highlight: u
1032
+ }
1033
+ ) })
1034
+ ] });
1035
+ }
1036
+ function De() {
1037
+ return typeof window > "u" ? null : new URLSearchParams(window.location.search).get("code");
1038
+ }
1039
+ function Ke() {
1040
+ const {
1041
+ otpId: e,
1042
+ otpEncryptionTargetBundle: o,
1043
+ goToStep: i,
1044
+ clearOtpSession: n,
1045
+ config: r
1046
+ } = F(), [c] = x(De), [s, u] = x(null), l = K(!1), { mutate: p, isPending: w } = ze({
1047
+ mutation: {
1048
+ onSuccess: async () => {
1049
+ var m;
1050
+ n(), i("authenticated"), (m = r == null ? void 0 : r.onSuccess) == null || m.call(r);
1051
+ },
1052
+ onError: (m) => {
1053
+ var N;
1054
+ u(m), (N = r == null ? void 0 : r.onError) == null || N.call(r, m);
1055
+ }
1056
+ }
1057
+ });
1058
+ return P(() => {
1059
+ if (!(l.current || !c)) {
1060
+ if (l.current = !0, !e || !o) {
1061
+ $(), i(null);
1062
+ return;
1063
+ }
1064
+ p({ otpId: e, code: c, otpEncryptionTargetBundle: o });
1065
+ }
1066
+ }, [e, o, c, p, i]), /* @__PURE__ */ a(b, { children: [
1067
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:items-center zd:justify-center", children: [
1068
+ !s && w && /* @__PURE__ */ t(I, { imageName: "loading", title: "Verifying Your Email", children: "Please wait while we securely connect your wallet." }),
1069
+ !s && !c && !w && /* @__PURE__ */ a(b, { children: [
1070
+ /* @__PURE__ */ a(I, { imageName: "error", title: "Invalid Link", children: [
1071
+ "This verification link is invalid or incomplete.",
1072
+ /* @__PURE__ */ t("br", {}),
1073
+ "Please check your email and try again with the correct link."
1074
+ ] }),
1075
+ /* @__PURE__ */ t(
1076
+ C,
1077
+ {
1078
+ action: "primary",
1079
+ onClick: () => {
1080
+ $(), i("sign-up");
1081
+ },
1082
+ text: "Choose another sign-in method"
1083
+ }
1084
+ )
1085
+ ] }),
1086
+ s != null && /* @__PURE__ */ a(b, { children: [
1087
+ /* @__PURE__ */ t(I, { imageName: "error", title: "Oops, something went wrong", children: "We couldn't complete the sign-in process. This could be due to timeout, an expired link, or a cancelled request." }),
1088
+ /* @__PURE__ */ t(
1089
+ C,
1090
+ {
1091
+ action: "primary",
1092
+ onClick: () => {
1093
+ $(), i("sign-up");
1094
+ },
1095
+ text: "Choose another sign-in method"
1096
+ }
1097
+ )
1098
+ ] })
1099
+ ] }),
1100
+ /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
1101
+ ] });
1102
+ }
1103
+ function Xe() {
1104
+ const { goToStep: e } = F(), { connect: o, connectors: i, isPending: n } = ce(), r = i.filter((s) => s.id !== "zerodev-wallet"), c = (s) => {
1105
+ o(
1106
+ { connector: s },
1107
+ {
1108
+ onSuccess: () => {
1109
+ e(null);
1110
+ }
1111
+ }
1112
+ );
1113
+ };
1114
+ return /* @__PURE__ */ a(b, { children: [
1115
+ /* @__PURE__ */ a("div", { className: "zd:flex-1 zd:flex zd:flex-col zd:gap-8 zd:justify-center", children: [
1116
+ /* @__PURE__ */ t(h, { className: "zd:text-h2 zd:text-center", children: "Select your wallet" }),
1117
+ /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-col zd:gap-2", children: r.length === 0 ? /* @__PURE__ */ t(h, { className: "zd:text-center", children: "No wallets detected. Install a browser wallet extension to continue." }) : r.map((s) => /* @__PURE__ */ t(
1118
+ Y,
1119
+ {
1120
+ title: s.name,
1121
+ iconName: "walletOutline",
1122
+ ...s.icon ? { imageUri: s.icon } : {},
1123
+ disabled: n,
1124
+ onClick: () => c(s),
1125
+ className: "zd:rounded-3xl"
1126
+ },
1127
+ s.uid
1128
+ )) })
1129
+ ] }),
1130
+ /* @__PURE__ */ t(L, { className: "zd:self-center zd:pt-4 zd:pb-6" })
1131
+ ] });
1132
+ }
1133
+ const Ye = {
1134
+ "wallet-selection": "Choose your wallet"
1135
+ };
1136
+ function Je() {
1137
+ return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(I, { imageName: "loading", title: "Authenticating...", children: "Please wait while we complete the OAuth authentication." }) });
1138
+ }
1139
+ function Qe() {
1140
+ return /* @__PURE__ */ t("div", { className: "zd:flex zd:flex-1 zd:items-center zd:justify-center", children: /* @__PURE__ */ t(I, { imageName: "loading", title: "Passkey authentication", children: "Please authenticate with your passkey." }) });
1141
+ }
1142
+ function Ze(e) {
1143
+ switch (e) {
1144
+ case "sign-up":
1145
+ return /* @__PURE__ */ t(Ve, {});
1146
+ case "email-verification":
1147
+ return /* @__PURE__ */ t(Ie, {});
1148
+ case "otp-input":
1149
+ return /* @__PURE__ */ t(_e, {});
1150
+ case "verifying-otp":
1151
+ return /* @__PURE__ */ t(Ke, {});
1152
+ case "oauth-in-progress":
1153
+ return /* @__PURE__ */ t(Je, {});
1154
+ case "passkey-prompt":
1155
+ return /* @__PURE__ */ t(Qe, {});
1156
+ case "wallet-selection":
1157
+ return /* @__PURE__ */ t(Xe, {});
1158
+ case "error":
1159
+ return /* @__PURE__ */ t(Pe, {});
1160
+ default:
1161
+ return null;
1162
+ }
1163
+ }
1164
+ function zt({
1165
+ onClose: e
1166
+ } = {}) {
1167
+ const { step: o, goToStep: i, goBack: n, reset: r } = F(), c = O(ee(), (p) => p.logo);
1168
+ P(() => {
1169
+ o === null && Fe() && i("verifying-otp");
1170
+ }, [o, i]);
1171
+ const s = Ze(o);
1172
+ if (!s) return null;
1173
+ const u = () => {
1174
+ $(), r(), e == null || e();
1175
+ }, l = o ? Ye[o] : void 0;
1176
+ return /* @__PURE__ */ t(
1177
+ Ce,
1178
+ {
1179
+ contentClassName: o === "sign-up" ? "zd:px-0" : void 0,
1180
+ topNav: /* @__PURE__ */ t(
1181
+ xe,
1182
+ {
1183
+ ...n !== null && { onBack: n },
1184
+ onClose: u,
1185
+ ...l && { title: l },
1186
+ ...o === "sign-up" && {
1187
+ ...c && { logo: c },
1188
+ className: "zd:px-4"
1189
+ }
1190
+ }
1191
+ ),
1192
+ children: s
1193
+ }
1194
+ );
1195
+ }
1196
+ const G = "zerodev:auth:otpSession";
1197
+ function et() {
1198
+ if (typeof window > "u") return null;
1199
+ try {
1200
+ const e = window.localStorage.getItem(G);
1201
+ if (!e) return null;
1202
+ const o = JSON.parse(e);
1203
+ return !(o != null && o.otpId) || !(o != null && o.otpEncryptionTargetBundle) ? null : o;
1204
+ } catch {
1205
+ return null;
1206
+ }
1207
+ }
1208
+ function tt(e) {
1209
+ if (!(typeof window > "u"))
1210
+ try {
1211
+ window.localStorage.setItem(
1212
+ G,
1213
+ JSON.stringify(e)
1214
+ );
1215
+ } catch {
1216
+ }
1217
+ }
1218
+ function V() {
1219
+ if (!(typeof window > "u"))
1220
+ try {
1221
+ window.localStorage.removeItem(G);
1222
+ } catch {
1223
+ }
1224
+ }
1225
+ const nt = (e, o, i) => ({
1226
+ auth: {
1227
+ // Initial state
1228
+ step: null,
1229
+ stepHistory: [],
1230
+ enabledMethods: [],
1231
+ email: null,
1232
+ otpId: null,
1233
+ otpEncryptionTargetBundle: null,
1234
+ config: null,
1235
+ // Actions
1236
+ initialize: (n) => {
1237
+ const r = et();
1238
+ e((c) => ({
1239
+ auth: {
1240
+ ...c.auth,
1241
+ config: n,
1242
+ enabledMethods: n.enabledMethods,
1243
+ ...r && {
1244
+ otpId: r.otpId,
1245
+ otpEncryptionTargetBundle: r.otpEncryptionTargetBundle
1246
+ }
1247
+ }
1248
+ }));
1249
+ },
1250
+ goToStep: (n) => {
1251
+ e((r) => ({
1252
+ auth: {
1253
+ ...r.auth,
1254
+ step: n,
1255
+ stepHistory: r.auth.step === null ? r.auth.stepHistory : [...r.auth.stepHistory, r.auth.step]
1256
+ }
1257
+ }));
1258
+ },
1259
+ goBack: () => {
1260
+ const { auth: n } = o();
1261
+ if (n.stepHistory.length === 0) return;
1262
+ const r = [...n.stepHistory], c = r.pop();
1263
+ e((s) => ({
1264
+ auth: {
1265
+ ...s.auth,
1266
+ step: c,
1267
+ stepHistory: r
1268
+ }
1269
+ }));
1270
+ },
1271
+ reset: () => {
1272
+ V(), e((n) => ({
1273
+ auth: {
1274
+ ...n.auth,
1275
+ step: null,
1276
+ stepHistory: [],
1277
+ email: null,
1278
+ otpId: null,
1279
+ otpEncryptionTargetBundle: null
1280
+ }
1281
+ }));
1282
+ },
1283
+ setEmail: (n) => {
1284
+ e((r) => ({
1285
+ auth: {
1286
+ ...r.auth,
1287
+ email: n
1288
+ }
1289
+ }));
1290
+ },
1291
+ setOtpSession: ({ otpId: n, otpEncryptionTargetBundle: r }) => {
1292
+ tt({ otpId: n, otpEncryptionTargetBundle: r }), e((c) => ({
1293
+ auth: {
1294
+ ...c.auth,
1295
+ otpId: n,
1296
+ otpEncryptionTargetBundle: r
1297
+ }
1298
+ }));
1299
+ },
1300
+ clearOtpSession: () => {
1301
+ V(), e((n) => ({
1302
+ auth: {
1303
+ ...n.auth,
1304
+ otpId: null,
1305
+ otpEncryptionTargetBundle: null
1306
+ }
1307
+ }));
1308
+ }
1309
+ }
1310
+ }), ot = (e = {}) => se()(
1311
+ ye((o, i, n) => ({
1312
+ pendingRequests: [],
1313
+ userConfirmationListenerActive: !1,
1314
+ logo: e.logo ?? null,
1315
+ addPendingRequest: (r) => o((c) => ({
1316
+ pendingRequests: [...c.pendingRequests, r]
1317
+ })),
1318
+ removePendingRequest: (r) => o((c) => ({
1319
+ pendingRequests: c.pendingRequests.filter((s) => s.id !== r)
1320
+ })),
1321
+ clearPendingRequests: () => o({ pendingRequests: [] }),
1322
+ setUserConfirmationListenerActive: (r) => o({ userConfirmationListenerActive: r }),
1323
+ ...nt(o, i)
1324
+ }))
1325
+ );
1326
+ function rt(e) {
1327
+ return new Promise((o, i) => {
1328
+ const n = e.subscribe(
1329
+ (r) => r.auth.step,
1330
+ (r) => {
1331
+ r === "authenticated" ? (n(), o()) : r === null && (n(), i(new Error("Auth flow dismissed")));
1332
+ }
1333
+ );
1334
+ });
1335
+ }
1336
+ function mt(e) {
1337
+ var n, r;
1338
+ const o = me(e), i = ot({ logo: (n = e.config) == null ? void 0 : n.logo });
1339
+ return (r = e.config) != null && r.auth && i.getState().auth.initialize(e.config.auth), (c) => {
1340
+ const s = o(c);
1341
+ return {
1342
+ ...s,
1343
+ async connect(u) {
1344
+ var l;
1345
+ try {
1346
+ return await s.connect(u);
1347
+ } catch (p) {
1348
+ if (u != null && u.isReconnecting || !((l = e.config) != null && l.auth) || !(p instanceof ge))
1349
+ throw p;
1350
+ if (i.getState().auth.step !== null)
1351
+ throw new Error("Auth flow already in progress");
1352
+ return i.getState().auth.goToStep("sign-up"), await rt(i), s.connect(u);
1353
+ }
1354
+ },
1355
+ async disconnect() {
1356
+ var u, l;
1357
+ await ((u = s.disconnect) == null ? void 0 : u.call(s)), (l = e.config) != null && l.auth && i.getState().auth.reset();
1358
+ },
1359
+ async setup() {
1360
+ var u;
1361
+ await ((u = s.setup) == null ? void 0 : u.call(s)), typeof window > "u";
1362
+ },
1363
+ getKitStore() {
1364
+ return i;
1365
+ }
1366
+ };
1367
+ };
1368
+ }
1369
+ export {
1370
+ zt as AuthFlow,
1371
+ F as useAuth,
1372
+ mt as zeroDevWallet
1373
+ };
1374
+ //# sourceMappingURL=index.mjs.map