@aurum-sdk/core 0.2.3 → 0.2.5

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.
@@ -1,2455 +0,0 @@
1
- "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/contexts/WidgetContext.tsx
2
- var _react = require('react');
3
- var _jsxruntime = require('react/jsx-runtime');
4
- var WidgetContext = _react.createContext.call(void 0, null);
5
- var useWidgetContext = () => {
6
- const context = _react.useContext.call(void 0, WidgetContext);
7
- if (!context) {
8
- throw new Error("useWidgetContext must be used within a WidgetProvider");
9
- }
10
- return context;
11
- };
12
- var WidgetProvider = ({
13
- children,
14
- mode,
15
- brandConfig,
16
- onDismiss,
17
- headerPortalRef = null
18
- }) => {
19
- const contextValue = {
20
- mode,
21
- brandConfig,
22
- onDismiss,
23
- headerPortalRef
24
- };
25
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetContext.Provider, { value: contextValue, children });
26
- };
27
-
28
- // src/store/aurumStore.ts
29
- var _zustand = require('zustand');
30
- var _middleware = require('zustand/middleware');
31
- var getStorage = () => ({
32
- getItem: (name) => {
33
- if (typeof window === "undefined") return null;
34
- return localStorage.getItem(name);
35
- },
36
- setItem: (name, value) => {
37
- if (typeof window === "undefined") return;
38
- localStorage.setItem(name, value);
39
- },
40
- removeItem: (name) => {
41
- if (typeof window === "undefined") return;
42
- localStorage.removeItem(name);
43
- }
44
- });
45
- var storeCreator = _middleware.persist.call(void 0,
46
- (set) => ({
47
- walletId: null,
48
- address: null,
49
- walletName: null,
50
- email: null,
51
- isConnected: false,
52
- lastUsedWalletId: null,
53
- setConnection: (walletId, address, walletName, email) => set({
54
- walletId,
55
- address,
56
- walletName,
57
- email: _nullishCoalesce(email, () => ( null)),
58
- isConnected: true,
59
- lastUsedWalletId: walletId
60
- }),
61
- clearConnection: () => set({
62
- walletId: null,
63
- address: null,
64
- walletName: null,
65
- email: null,
66
- isConnected: false
67
- })
68
- }),
69
- {
70
- name: "@aurum-sdk/core-store",
71
- storage: _middleware.createJSONStorage.call(void 0, getStorage),
72
- skipHydration: typeof window === "undefined"
73
- }
74
- );
75
- var useAurumStore = _zustand.create.call(void 0, storeCreator);
76
- var waitForStoreHydration = () => {
77
- return new Promise((resolve) => {
78
- if (useAurumStore.persist.hasHydrated()) {
79
- resolve();
80
- return;
81
- }
82
- useAurumStore.persist.onFinishHydration(() => resolve());
83
- });
84
- };
85
-
86
- // src/utils/sortWallets.ts
87
- var _types = require('@aurum-sdk/types');
88
- var WALLET_PRIORITY = [
89
- _types.WalletId.MetaMask,
90
- _types.WalletId.Phantom,
91
- _types.WalletId.WalletConnect,
92
- _types.WalletId.Brave,
93
- _types.WalletId.Rabby,
94
- _types.WalletId.CoinbaseWallet
95
- ];
96
- function sortWallets(wallets, options = {}) {
97
- const { filterHidden = true } = options;
98
- const lastUsedWalletId = useAurumStore.getState().lastUsedWalletId;
99
- let result = [...wallets];
100
- if (filterHidden) {
101
- result = result.filter((wallet) => !wallet.hide);
102
- }
103
- result.sort((a, b) => {
104
- if (a.id === lastUsedWalletId) return -1;
105
- if (b.id === lastUsedWalletId) return 1;
106
- const aInstalled = a.isInstalled();
107
- const bInstalled = b.isInstalled();
108
- if (aInstalled !== bInstalled) {
109
- return aInstalled ? -1 : 1;
110
- }
111
- const aIndex = WALLET_PRIORITY.indexOf(a.id);
112
- const bIndex = WALLET_PRIORITY.indexOf(b.id);
113
- if (aIndex === -1 && bIndex === -1) return 0;
114
- if (aIndex === -1) return 1;
115
- if (bIndex === -1) return -1;
116
- return aIndex - bIndex;
117
- });
118
- return result;
119
- }
120
-
121
- // src/contexts/NavigationContext.tsx
122
-
123
-
124
- var NavigationContext = _react.createContext.call(void 0, void 0);
125
- var NavigationProvider = ({ children, initialPage }) => {
126
- const [currentPage, setCurrentPage] = _react.useState.call(void 0, initialPage);
127
- const [pageHistory, setPageHistory] = _react.useState.call(void 0, [initialPage]);
128
- const navigateTo = (pageId) => {
129
- setCurrentPage(pageId);
130
- setPageHistory((prev) => [...prev, pageId]);
131
- };
132
- const navigateBack = () => {
133
- if (pageHistory.length > 1) {
134
- const newHistory = pageHistory.slice(0, -1);
135
- const previousPage = newHistory[newHistory.length - 1];
136
- setPageHistory(newHistory);
137
- setCurrentPage(previousPage);
138
- }
139
- };
140
- const canNavigateBack = pageHistory.length > 1;
141
- const value = {
142
- currentPage,
143
- navigateTo,
144
- navigateBack,
145
- canNavigateBack
146
- };
147
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationContext.Provider, { value, children });
148
- };
149
- var useNavigation = () => {
150
- const context = _react.useContext.call(void 0, NavigationContext);
151
- if (context === void 0) {
152
- throw new Error("useNavigation must be used within a NavigationProvider");
153
- }
154
- return context;
155
- };
156
-
157
- // src/contexts/ConnectModalContext.tsx
158
-
159
-
160
- // src/components/ConnectModal/SelectWallet.tsx
161
-
162
-
163
- // src/ui/Badge/Badge.tsx
164
-
165
- var RecentBadge = () => {
166
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "aurum-badge-recent", children: "Recent" });
167
- };
168
-
169
- // src/ui/Button/Button.tsx
170
-
171
- var Button = ({
172
- variant = "primary",
173
- size = "md",
174
- loading = false,
175
- expand = false,
176
- disabled = false,
177
- className,
178
- children,
179
- ...props
180
- }) => {
181
- const baseClassName = "aurum-button";
182
- const classes = [
183
- baseClassName,
184
- `${baseClassName}--${variant}`,
185
- `${baseClassName}--${size}`,
186
- expand && `${baseClassName}--full-width`,
187
- loading && `${baseClassName}--loading`,
188
- disabled && `${baseClassName}--disabled`,
189
- className
190
- ].filter(Boolean).join(" ");
191
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "button", { className: classes, disabled: disabled || loading, ...props, children: [
192
- loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { color: "currentColor" }),
193
- children
194
- ] });
195
- };
196
-
197
- // src/ui/Column/Column.tsx
198
-
199
- var Column = ({
200
- align = "center",
201
- gap = 8,
202
- justify = "center",
203
- style,
204
- children
205
- }) => {
206
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
207
- "div",
208
- {
209
- style: {
210
- display: "flex",
211
- flexDirection: "column",
212
- alignItems: align,
213
- gap: `${gap}px`,
214
- justifyContent: justify,
215
- ...style
216
- },
217
- children
218
- }
219
- );
220
- };
221
-
222
- // src/ui/CopyButton/CopyButton.tsx
223
-
224
- var _lucidereact = require('lucide-react');
225
-
226
- var variantColorMap = {
227
- primary: "var(--color-foreground)",
228
- secondary: "var(--color-foreground-muted)",
229
- tertiary: "var(--color-foreground-subtle)",
230
- success: "var(--color-success)",
231
- error: "var(--color-error)",
232
- brand: "var(--color-primary)"
233
- };
234
- var CopyButton = ({
235
- text,
236
- label,
237
- copiedLabel,
238
- variant = "brand",
239
- size = "sm",
240
- iconSize = 16,
241
- disabled = false
242
- }) => {
243
- const [isCopied, setIsCopied] = _react.useState.call(void 0, false);
244
- const handleCopy = async () => {
245
- if (!text || disabled || isCopied) return;
246
- try {
247
- await navigator.clipboard.writeText(text);
248
- setIsCopied(true);
249
- setTimeout(() => {
250
- setIsCopied(false);
251
- }, 1500);
252
- } catch (error) {
253
- console.error("Failed to copy text", error);
254
- }
255
- };
256
- if (!label && !copiedLabel) {
257
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
258
- Button,
259
- {
260
- variant: "text",
261
- size,
262
- onClick: handleCopy,
263
- disabled,
264
- style: { cursor: disabled ? "not-allowed" : "pointer", padding: "0.25rem" },
265
- children: isCopied ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CopyCheck, { size: iconSize, color: "var(--color-success)" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, { size: iconSize, color: variantColorMap[variant] })
266
- }
267
- );
268
- }
269
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
270
- Button,
271
- {
272
- variant: "text",
273
- size,
274
- onClick: handleCopy,
275
- disabled,
276
- style: { cursor: disabled ? "not-allowed" : "pointer" },
277
- children: isCopied ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
278
- Text,
279
- {
280
- variant: "success",
281
- size: "sm",
282
- align: "center",
283
- weight: "semibold",
284
- style: { display: "flex", alignItems: "center", gap: 6 },
285
- children: [
286
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CopyCheck, { size: iconSize, color: "var(--color-success)" }),
287
- copiedLabel || "Copied"
288
- ]
289
- }
290
- ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
291
- Text,
292
- {
293
- variant,
294
- size: "sm",
295
- align: "center",
296
- weight: "semibold",
297
- style: { display: "flex", alignItems: "center", gap: 6 },
298
- children: [
299
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Copy, { size: iconSize, color: variantColorMap[variant] }),
300
- label || "Copy"
301
- ]
302
- }
303
- )
304
- }
305
- );
306
- };
307
-
308
- // src/ui/Divider/Divider.tsx
309
-
310
- var Divider = ({ children }) => {
311
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "divider", children: [
312
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "divider-line" }),
313
- children && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "divider-text", children }),
314
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "divider-line" })
315
- ] });
316
- };
317
-
318
- // src/ui/Modal/Modal.tsx
319
-
320
-
321
- // src/hooks/useFocusTrap.ts
322
-
323
- var FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
324
- function getDeepActiveElement() {
325
- let active = document.activeElement;
326
- while (_optionalChain([active, 'optionalAccess', _2 => _2.shadowRoot, 'optionalAccess', _3 => _3.activeElement])) {
327
- active = active.shadowRoot.activeElement;
328
- }
329
- return active;
330
- }
331
- function useFocusTrap(containerRef, { isActive, onEscape, refocusKey }) {
332
- _react.useEffect.call(void 0, () => {
333
- if (isActive && containerRef.current) {
334
- const timer = setTimeout(() => {
335
- _optionalChain([containerRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.focus, 'call', _6 => _6()]);
336
- }, 50);
337
- return () => clearTimeout(timer);
338
- }
339
- }, [refocusKey, isActive]);
340
- _react.useEffect.call(void 0, () => {
341
- if (!isActive) return;
342
- const handleKeyDown = (e) => {
343
- if (e.key === "Escape") {
344
- _optionalChain([onEscape, 'optionalCall', _7 => _7()]);
345
- return;
346
- }
347
- if (e.key !== "Tab" || !containerRef.current) return;
348
- const focusableElements = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
349
- if (focusableElements.length === 0) return;
350
- const firstElement = focusableElements[0];
351
- const lastElement = focusableElements[focusableElements.length - 1];
352
- const activeElement = getDeepActiveElement();
353
- if (e.shiftKey && activeElement === firstElement) {
354
- e.preventDefault();
355
- lastElement.focus();
356
- } else if (!e.shiftKey && activeElement === lastElement) {
357
- e.preventDefault();
358
- firstElement.focus();
359
- } else if (!Array.from(focusableElements).includes(activeElement)) {
360
- e.preventDefault();
361
- if (e.shiftKey) {
362
- lastElement.focus();
363
- } else {
364
- firstElement.focus();
365
- }
366
- }
367
- };
368
- document.addEventListener("keydown", handleKeyDown);
369
- return () => document.removeEventListener("keydown", handleKeyDown);
370
- }, [isActive, onEscape]);
371
- }
372
-
373
- // src/components/PageTransitionContainer/PageTransitionContainer.tsx
374
-
375
-
376
- // src/hooks/usePageTransition.ts
377
-
378
-
379
- // src/constants/theme.ts
380
-
381
-
382
-
383
- var DEFAULT_THEME = "dark";
384
- var ANIMATION_DURATION = {
385
- SHAKE: 300,
386
- MODAL_HEIGHT_TRANSITION: 200
387
- };
388
- var DEFAULT_BORDER_RADIUS = "md";
389
- var DEFAULT_MODAL_Z_INDEX = 1e3;
390
- var DEFAULT_APP_NAME = "Aurum";
391
- var DEFAULT_FONT = "'Inter', -apple-system, sans-serif";
392
- var DEFAULT_WALLET_LAYOUT = "stacked";
393
- var getBorderRadiusScale = (token) => {
394
- return _types.BORDER_RADIUS_SCALES[token];
395
- };
396
- var defaultLightThemeConfig = {
397
- logo: "",
398
- theme: "light",
399
- primaryColor: "#000000",
400
- borderRadius: DEFAULT_BORDER_RADIUS,
401
- modalZIndex: DEFAULT_MODAL_Z_INDEX,
402
- appName: DEFAULT_APP_NAME,
403
- hideFooter: false,
404
- font: DEFAULT_FONT,
405
- walletLayout: DEFAULT_WALLET_LAYOUT
406
- };
407
- var defaultDarkThemeConfig = {
408
- logo: "",
409
- theme: "dark",
410
- primaryColor: "#ffffff",
411
- borderRadius: DEFAULT_BORDER_RADIUS,
412
- modalZIndex: DEFAULT_MODAL_Z_INDEX,
413
- appName: DEFAULT_APP_NAME,
414
- hideFooter: false,
415
- font: DEFAULT_FONT,
416
- walletLayout: DEFAULT_WALLET_LAYOUT
417
- };
418
- var getDefaultThemeConfig = (theme) => {
419
- return theme === "dark" ? defaultDarkThemeConfig : defaultLightThemeConfig;
420
- };
421
-
422
- // src/constants/layout.ts
423
- var PAGE_CONTENT_PADDING = 0.25;
424
- var PAGE_MIN_HEIGHT = "8rem";
425
- var PAGE_MAX_HEIGHT = "600";
426
- var HEADER_HEIGHT = "3.5rem";
427
- var POWERED_BY_SPACER_REM = 2.5;
428
- var contentWrapperStyle = { paddingTop: HEADER_HEIGHT };
429
-
430
- // src/hooks/usePageTransition.ts
431
- function useContentHeight(contentRef, transitionKey) {
432
- const [contentHeight, setContentHeight] = _react.useState.call(void 0, null);
433
- _react.useLayoutEffect.call(void 0, () => {
434
- if (contentRef.current) {
435
- setContentHeight(contentRef.current.scrollHeight);
436
- }
437
- }, [transitionKey]);
438
- _react.useEffect.call(void 0, () => {
439
- if (!contentRef.current) return;
440
- const resizeObserver = new ResizeObserver((entries) => {
441
- for (const entry of entries) {
442
- setContentHeight(entry.target.scrollHeight);
443
- }
444
- });
445
- resizeObserver.observe(contentRef.current);
446
- return () => resizeObserver.disconnect();
447
- }, [transitionKey]);
448
- return contentHeight;
449
- }
450
- function usePageActiveState(transitionKey) {
451
- const prevKeyRef = _react.useRef.call(void 0, transitionKey);
452
- const [isPageActive, setIsPageActive] = _react.useState.call(void 0, true);
453
- _react.useEffect.call(void 0, () => {
454
- if (prevKeyRef.current === transitionKey) return;
455
- prevKeyRef.current = transitionKey;
456
- setIsPageActive(false);
457
- requestAnimationFrame(() => {
458
- requestAnimationFrame(() => setIsPageActive(true));
459
- });
460
- }, [transitionKey]);
461
- return isPageActive;
462
- }
463
- function usePageContainerStyle(contentHeight) {
464
- return _react.useMemo.call(void 0,
465
- () => ({
466
- height: contentHeight ? `${contentHeight / 16 + PAGE_CONTENT_PADDING * 2}rem` : "auto",
467
- minHeight: PAGE_MIN_HEIGHT,
468
- maxHeight: PAGE_MAX_HEIGHT,
469
- padding: `${PAGE_CONTENT_PADDING}rem`,
470
- margin: `${-PAGE_CONTENT_PADDING}rem`,
471
- width: `calc(100% + ${PAGE_CONTENT_PADDING * 2}rem)`,
472
- boxSizing: "border-box",
473
- transition: contentHeight ? `height ${ANIMATION_DURATION.MODAL_HEIGHT_TRANSITION}ms cubic-bezier(0.4, 0, 0.2, 1)` : "none"
474
- }),
475
- [contentHeight]
476
- );
477
- }
478
-
479
- // src/components/PageTransitionContainer/PageTransitionContainer.tsx
480
-
481
- var PageTransitionContainer = ({ transitionKey, children }) => {
482
- const pageRef = _react.useRef.call(void 0, null);
483
- const contentRef = _react.useRef.call(void 0, null);
484
- const contentHeight = useContentHeight(contentRef, transitionKey);
485
- const isPageActive = usePageActiveState(transitionKey);
486
- const containerStyle = usePageContainerStyle(contentHeight);
487
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "modal-page-container", style: containerStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: pageRef, className: `modal-page ${isPageActive ? "active" : ""}`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: contentRef, style: contentWrapperStyle, children }) }, transitionKey) });
488
- };
489
-
490
- // src/components/PoweredBy/PoweredBy.tsx
491
- var _react3 = require('@aurum-sdk/logos/react');
492
-
493
- var PoweredBy = () => {
494
- const { brandConfig } = useWidgetContext();
495
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "powered-by-container", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Row, { align: "center", justify: "center", gap: 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
496
- Button,
497
- {
498
- variant: "text",
499
- size: "xs",
500
- onClick: () => window.open("https://aurumsdk.com", "_blank"),
501
- style: { gap: "0.15rem" },
502
- children: [
503
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { variant: "secondary", size: "xs", children: "Powered by" }),
504
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "center", justify: "center", gap: 0, children: [
505
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
506
- _react3.AurumLogo,
507
- {
508
- variant: "icon",
509
- size: 22,
510
- radius: brandConfig.borderRadius,
511
- sizeSlot: "xs",
512
- color: "var(--color-foreground-muted)",
513
- title: "Aurum"
514
- }
515
- ),
516
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { variant: "secondary", weight: "bold", style: { fontSize: "13px" }, children: "Aurum" })
517
- ] })
518
- ]
519
- }
520
- ) }) });
521
- };
522
-
523
- // src/ui/Modal/Modal.tsx
524
-
525
- var Modal = ({
526
- isOpen,
527
- onCloseComplete,
528
- children,
529
- closeOnOverlayClick = true,
530
- transitionKey = "default",
531
- brandConfig
532
- }) => {
533
- const overlayRef = _react.useRef.call(void 0, null);
534
- const dialogRef = _react.useRef.call(void 0, null);
535
- const headerPortalRef = _react.useRef.call(void 0, null);
536
- const [animState, setAnimState] = _react.useState.call(void 0, "closed");
537
- _react.useEffect.call(void 0, () => {
538
- if (isOpen && animState === "closed") {
539
- setAnimState("entering");
540
- }
541
- }, [isOpen, animState]);
542
- _react.useEffect.call(void 0, () => {
543
- if (animState !== "entering") return;
544
- const rafId = requestAnimationFrame(() => {
545
- setAnimState("open");
546
- _optionalChain([dialogRef, 'access', _8 => _8.current, 'optionalAccess', _9 => _9.focus, 'call', _10 => _10()]);
547
- });
548
- return () => cancelAnimationFrame(rafId);
549
- }, [animState]);
550
- _react.useEffect.call(void 0, () => {
551
- if (animState !== "exiting") return;
552
- const dialog = dialogRef.current;
553
- if (!dialog) return;
554
- const handleTransitionEnd = (e) => {
555
- if (e.target === dialog) {
556
- setAnimState("closed");
557
- onCloseComplete();
558
- }
559
- };
560
- dialog.addEventListener("transitionend", handleTransitionEnd);
561
- return () => dialog.removeEventListener("transitionend", handleTransitionEnd);
562
- }, [animState, onCloseComplete]);
563
- _react.useEffect.call(void 0, () => {
564
- if (animState === "closed") return;
565
- document.body.style.overflow = "hidden";
566
- return () => {
567
- document.body.style.overflow = "unset";
568
- };
569
- }, [animState]);
570
- const handleClose = _react.useCallback.call(void 0, () => {
571
- if (animState === "open" || animState === "entering") {
572
- setAnimState("exiting");
573
- }
574
- }, [animState]);
575
- const handleOverlayClick = _react.useCallback.call(void 0,
576
- (e) => {
577
- if (closeOnOverlayClick && e.target === overlayRef.current) {
578
- handleClose();
579
- }
580
- },
581
- [closeOnOverlayClick, handleClose]
582
- );
583
- const focusTrapOptions = _react.useMemo.call(void 0,
584
- () => ({
585
- isActive: animState !== "closed",
586
- onEscape: handleClose,
587
- refocusKey: transitionKey
588
- }),
589
- [animState, handleClose, transitionKey]
590
- );
591
- useFocusTrap(dialogRef, focusTrapOptions);
592
- const overlayClassName = _react.useMemo.call(void 0, () => {
593
- const classes = ["modal-overlay"];
594
- if (animState === "open") classes.push("modal-open");
595
- if (animState === "exiting") classes.push("modal-exiting");
596
- return classes.join(" ");
597
- }, [animState]);
598
- if (animState === "closed") return null;
599
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetProvider, { mode: "modal", brandConfig, onDismiss: handleClose, headerPortalRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: overlayRef, className: overlayClassName, onClick: handleOverlayClick, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: dialogRef, className: "modal-content", role: "dialog", "aria-modal": "true", tabIndex: -1, children: [
600
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: headerPortalRef }),
601
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageTransitionContainer, { transitionKey, children }),
602
- brandConfig.hideFooter ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: "0.3125rem" }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
603
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: `${POWERED_BY_SPACER_REM}rem` }),
604
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PoweredBy, {})
605
- ] })
606
- ] }) }) });
607
- };
608
-
609
- // src/ui/Row/Row.tsx
610
-
611
- var Row = ({
612
- align = "center",
613
- justify = "center",
614
- children,
615
- gap = 8,
616
- style,
617
- ...props
618
- }) => {
619
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
620
- "div",
621
- {
622
- style: {
623
- display: "flex",
624
- flexDirection: "row",
625
- alignItems: align,
626
- justifyContent: justify,
627
- gap: `${gap}px`,
628
- ...style
629
- },
630
- ...props,
631
- children
632
- }
633
- );
634
- };
635
-
636
- // src/ui/Spacer/Spacer.tsx
637
-
638
- var Spacer = ({ size = 16 }) => {
639
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { height: size } });
640
- };
641
-
642
- // src/ui/Spinner/Spinner.tsx
643
-
644
-
645
- var Spinner = ({
646
- size = 16,
647
- color = "var(--aurum-primary-color)",
648
- strokeWidth = 2
649
- }) => {
650
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
651
- _lucidereact.Loader2,
652
- {
653
- className: "spinner",
654
- strokeWidth,
655
- size,
656
- style: {
657
- width: `${size}px`,
658
- height: `${size}px`,
659
- color
660
- }
661
- }
662
- );
663
- };
664
-
665
- // src/ui/Text/Text.tsx
666
-
667
- var Text = ({
668
- variant = "primary",
669
- as = "p",
670
- size = "md",
671
- weight = "normal",
672
- align = "left",
673
- children,
674
- className,
675
- style,
676
- ...props
677
- }) => {
678
- const Element = as;
679
- const baseClassName = "aurum-text";
680
- const classes = [
681
- baseClassName,
682
- `${baseClassName}--${variant}`,
683
- size && `${baseClassName}--${size}`,
684
- weight && `${baseClassName}--${weight}`,
685
- align && `${baseClassName}--align-${align}`,
686
- className
687
- ].filter(Boolean).join(" ");
688
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Element, { className: classes, ...props, style, children });
689
- };
690
-
691
- // src/ui/ThemeContainer.tsx
692
-
693
- var ThemeContainer = ({ children, theme = "light" }) => {
694
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aurum-sdk", "data-theme": theme, children });
695
- };
696
-
697
- // src/components/ConnectModal/SelectWallet.tsx
698
-
699
-
700
- // src/components/ModalHeader/ModalHeader.tsx
701
-
702
- var _reactdom = require('react-dom');
703
-
704
- var ModalHeader = ({ leftAction, rightAction, title }) => {
705
- const { headerPortalRef, mode } = useWidgetContext();
706
- const [portalTarget, setPortalTarget] = _react.useState.call(void 0, null);
707
- _react.useLayoutEffect.call(void 0, () => {
708
- if (headerPortalRef) {
709
- setPortalTarget(headerPortalRef.current);
710
- }
711
- }, [headerPortalRef]);
712
- const resolvedRightAction = mode === "widget" ? null : rightAction;
713
- const headerContent = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "header", { className: "modal-header", children: [
714
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "modal-header-left", children: leftAction }),
715
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "modal-header-center", children: typeof title === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { align: "center", variant: "secondary", style: { fontSize: "15px" }, children: title }) : title }),
716
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "modal-header-right", children: resolvedRightAction })
717
- ] });
718
- if (!portalTarget) return null;
719
- return _reactdom.createPortal.call(void 0, headerContent, portalTarget);
720
- };
721
-
722
- // src/components/ConnectModal/EmailAuth.tsx
723
-
724
-
725
- // src/contexts/EmailAuthContext.tsx
726
-
727
-
728
- // src/services/sentry.ts
729
- var _browser = require('@sentry/browser'); var Sentry = _interopRequireWildcard(_browser);
730
- var initialized = false;
731
- var telemetryEnabled = true;
732
- function getEnvironment() {
733
- if (typeof window !== "undefined") {
734
- const hostname = window.location.hostname;
735
- if (hostname === "localhost" || hostname === "127.0.0.1") {
736
- return "development";
737
- }
738
- }
739
- return "production";
740
- }
741
- function initSentry(enabled = true) {
742
- telemetryEnabled = enabled;
743
- if (initialized || !telemetryEnabled || true) return;
744
- initialized = true;
745
- Sentry.init({
746
- dsn: "",
747
- environment: getEnvironment(),
748
- release: `@aurum-sdk/core@${"0.2.3"}`,
749
- sendDefaultPii: false,
750
- enableLogs: true
751
- });
752
- }
753
- function getUrl() {
754
- if (typeof window !== "undefined") {
755
- return window.location.href;
756
- }
757
- return void 0;
758
- }
759
- var sentryLogger = {
760
- info: (message, attributes) => {
761
- if (telemetryEnabled) Sentry.logger.info(message, { url: getUrl(), ...attributes });
762
- },
763
- warn: (message, attributes) => {
764
- if (telemetryEnabled) Sentry.logger.warn(message, { url: getUrl(), ...attributes });
765
- },
766
- error: (message, attributes) => {
767
- if (telemetryEnabled) Sentry.logger.error(message, { url: getUrl(), ...attributes });
768
- }
769
- };
770
-
771
- // src/utils/isConfigError.ts
772
- var isConfigError = (error) => {
773
- const name = _optionalChain([error, 'optionalAccess', _11 => _11.name]);
774
- return name === "ConfigError";
775
- };
776
- var createConfigError = (adapterName) => {
777
- const error = new Error(`Missing required project ID for ${adapterName}`);
778
- error.name = "ConfigError";
779
- return error;
780
- };
781
-
782
- // src/contexts/EmailAuthContext.tsx
783
-
784
- var EmailAuthContext = _react.createContext.call(void 0, null);
785
- var useEmailAuth = () => {
786
- const context = _react.useContext.call(void 0, EmailAuthContext);
787
- if (!context) {
788
- throw new Error("useEmailAuth must be used within an EmailAuthProvider");
789
- }
790
- return context;
791
- };
792
- var EmailAuthProvider = ({
793
- children,
794
- displayedWallets,
795
- onConnect,
796
- navigateTo,
797
- setSelectedWallet
798
- }) => {
799
- const initialAuthState = {
800
- email: "",
801
- authResult: null,
802
- step: "email"
803
- };
804
- const [error, setError] = _react.useState.call(void 0, "");
805
- const [emailAuthState, setEmailAuthState] = _react.useState.call(void 0, initialAuthState);
806
- const resetEmailAuth = () => {
807
- setEmailAuthState(initialAuthState);
808
- setError("");
809
- };
810
- const clearError = () => {
811
- setError("");
812
- };
813
- const attemptEmailAuth = async (email, emailAdapter) => {
814
- setError("");
815
- if (!emailAdapter.emailAuthStart) {
816
- sentryLogger.error("emailAuthStart not implemented");
817
- throw new Error("emailAuthStart not implemented");
818
- }
819
- const authResult = await emailAdapter.emailAuthStart(email);
820
- setEmailAuthState((prev) => ({ ...prev, authResult, step: "otp" }));
821
- navigateTo(PAGE_IDS.EMAIL_VERIFY_OTP);
822
- };
823
- const handleAlreadyAuthenticatedError = async (email, emailAdapter) => {
824
- try {
825
- await emailAdapter.disconnect();
826
- await attemptEmailAuth(email, emailAdapter);
827
- } catch (retryError) {
828
- sentryLogger.error("Failed to retry email OTP after disconnect:", { error: retryError });
829
- setError("Failed to send email verification");
830
- setEmailAuthState((prev) => ({ ...prev, step: "email" }));
831
- }
832
- };
833
- const sendEmailOTP = async (email) => {
834
- const emailAdapter = displayedWallets.find((adapter) => adapter.id === "email");
835
- if (!emailAdapter) {
836
- sentryLogger.error("sendEmailOTP: Email adapter not found");
837
- throw new Error("Email adapter not found");
838
- }
839
- setEmailAuthState((prev) => ({ ...prev, email }));
840
- try {
841
- await attemptEmailAuth(email, emailAdapter);
842
- } catch (error2) {
843
- setEmailAuthState((prev) => ({ ...prev, step: "email" }));
844
- const errorMessage = _nullishCoalesce(_optionalChain([error2, 'access', _12 => _12.message, 'optionalAccess', _13 => _13.toLowerCase, 'call', _14 => _14()]), () => ( ""));
845
- const isAlreadyAuthenticated = errorMessage.includes("user is already authenticated");
846
- if (isConfigError(error2)) {
847
- navigateTo(PAGE_IDS.CONFIG_ERROR);
848
- } else if (isAlreadyAuthenticated) {
849
- try {
850
- await handleAlreadyAuthenticatedError(email, emailAdapter);
851
- } catch (e2) {
852
- setError("Failed to send email verification");
853
- }
854
- } else {
855
- setError("Failed to send email verification");
856
- }
857
- }
858
- };
859
- const verifyEmailOTPAndConnect = async (otp) => {
860
- try {
861
- if (!emailAuthState.authResult) {
862
- sentryLogger.error("No auth result found");
863
- throw new Error("No auth result found");
864
- }
865
- const emailAdapter = displayedWallets.find((adapter) => adapter.id === "email");
866
- if (!emailAdapter) {
867
- sentryLogger.error("verifyEmailOTPAndConnect: Email adapter not found");
868
- throw new Error("Email adapter not found");
869
- }
870
- setEmailAuthState((prev) => ({ ...prev, step: "connecting" }));
871
- if (!emailAdapter.emailAuthVerify) {
872
- sentryLogger.error("emailAuthVerify not implemented");
873
- throw new Error("emailAuthVerify not implemented");
874
- }
875
- const verifyResult = await emailAdapter.emailAuthVerify(emailAuthState.authResult.flowId, otp);
876
- setSelectedWallet(emailAdapter);
877
- setEmailAuthState((prev) => ({ ...prev, step: "success" }));
878
- setTimeout(() => {
879
- onConnect({
880
- walletId: emailAdapter.id,
881
- address: _nullishCoalesce(_optionalChain([verifyResult, 'access', _15 => _15.user, 'optionalAccess', _16 => _16.evmAccounts, 'optionalAccess', _17 => _17[0]]), () => ( "")),
882
- provider: emailAdapter.getProvider(),
883
- email: emailAuthState.email
884
- });
885
- }, 1500);
886
- } catch (e3) {
887
- setError("Invalid or expired code");
888
- setEmailAuthState((prev) => ({ ...prev, step: "otp" }));
889
- }
890
- };
891
- const contextValue = {
892
- error,
893
- emailAuthState,
894
- clearError,
895
- sendEmailOTP,
896
- resetEmailAuth,
897
- verifyEmailOTPAndConnect
898
- };
899
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailAuthContext.Provider, { value: contextValue, children });
900
- };
901
-
902
- // src/components/ConnectModal/EmailAuth.tsx
903
-
904
-
905
- var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
906
- var EmailAuth = () => {
907
- const { emailAuthState, error, sendEmailOTP, clearError } = useEmailAuth();
908
- const [email, setEmail] = _react.useState.call(void 0, emailAuthState.email);
909
- const [isValidEmail, setIsValidEmail] = _react.useState.call(void 0, false);
910
- const [isLoading, setIsLoading] = _react.useState.call(void 0, false);
911
- const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
912
- const [isButtonFocused, setIsButtonFocused] = _react.useState.call(void 0, false);
913
- const showPrimary = isValidEmail && (isFocused || isButtonFocused);
914
- _react.useEffect.call(void 0, () => {
915
- setIsValidEmail(EMAIL_REGEX.test(email));
916
- }, [email]);
917
- const handleSend = async () => {
918
- try {
919
- setIsLoading(true);
920
- await sendEmailOTP(email);
921
- } finally {
922
- setIsLoading(false);
923
- }
924
- };
925
- const handleKeyDown = (e) => {
926
- if (error) {
927
- clearError();
928
- }
929
- if (e.key === "Enter" && isValidEmail) {
930
- handleSend();
931
- }
932
- };
933
- const getInputClassName = () => {
934
- const classes = ["email-auth-input"];
935
- if (error) classes.push("email-auth-input--error");
936
- return classes.join(" ");
937
- };
938
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
939
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { position: "relative", width: "100%" }, children: [
940
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "email-auth-icon", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Mail, { size: 20, color: "var(--color-foreground-muted)" }) }),
941
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
942
- "input",
943
- {
944
- "aria-label": "Email address",
945
- id: "email-input",
946
- name: "email",
947
- type: "email",
948
- autoComplete: "email",
949
- inputMode: "email",
950
- value: email,
951
- className: getInputClassName(),
952
- disabled: isLoading,
953
- onBlur: () => setIsFocused(false),
954
- onKeyDown: handleKeyDown,
955
- onFocus: () => setIsFocused(true),
956
- placeholder: "Email address",
957
- onChange: (e) => setEmail(e.target.value)
958
- }
959
- ),
960
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
961
- Button,
962
- {
963
- size: "sm",
964
- variant: showPrimary ? "primary" : "secondary",
965
- loading: isLoading,
966
- onClick: handleSend,
967
- disabled: !isValidEmail,
968
- className: "email-auth-submit-button",
969
- onFocus: () => setIsButtonFocused(true),
970
- onBlur: () => setIsButtonFocused(false),
971
- children: !isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
972
- _lucidereact.ChevronRight,
973
- {
974
- size: 16,
975
- color: showPrimary ? "var(--color-primary-foreground)" : "var(--color-foreground-subtle)"
976
- }
977
- )
978
- }
979
- )
980
- ] }),
981
- error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { variant: "error", size: "sm", align: "left", style: { width: "100%", marginTop: "0.3125rem" }, children: error })
982
- ] });
983
- };
984
-
985
- // src/components/WalletLogoWrapper/WalletLogoWrapper.tsx
986
-
987
-
988
- var WalletLogoWrapper = ({ radius, variant = "brand", ...props }) => {
989
- const { brandConfig } = useWidgetContext();
990
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.WalletLogo, { radius: _nullishCoalesce(radius, () => ( brandConfig.borderRadius)), variant, ...props });
991
- };
992
-
993
- // src/components/WalletButton/GridWalletButton.tsx
994
-
995
- var GridWalletButton = ({
996
- wallet,
997
- connectWallet
998
- }) => {
999
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1000
- Button,
1001
- {
1002
- variant: "secondary",
1003
- onClick: () => connectWallet(wallet),
1004
- "aria-label": `Connect with ${wallet.name}`,
1005
- title: wallet.name,
1006
- size: "xs",
1007
- style: { borderRadius: "var(--aurum-border-radius-md)" },
1008
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletLogoWrapper, { id: wallet.id, size: 44, variant: "icon" })
1009
- }
1010
- );
1011
- };
1012
-
1013
- // src/components/ConnectModal/WalletListGrid.tsx
1014
-
1015
- var MAX_COLUMNS = 4;
1016
- function getColumnCount(itemCount) {
1017
- if (itemCount <= MAX_COLUMNS) return itemCount;
1018
- const numRows = Math.ceil(itemCount / MAX_COLUMNS);
1019
- return Math.ceil(itemCount / numRows);
1020
- }
1021
- var WalletListGrid = ({ wallets }) => {
1022
- const { connectWallet } = useConnectModal();
1023
- const columns = getColumnCount(wallets.length);
1024
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aurum-wallet-grid", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: wallets.map((wallet) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, GridWalletButton, { wallet, connectWallet }, wallet.id)) });
1025
- };
1026
-
1027
- // src/components/ConnectModal/WalletListStacked.tsx
1028
-
1029
-
1030
- // src/components/WalletButton/WalletButton.tsx
1031
-
1032
-
1033
- // src/components/WalletButton/WalletButtonLabel.tsx
1034
-
1035
-
1036
- var WalletButtonLabel = ({ type }) => {
1037
- if (!type) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { size: 18, color: "var(--color-foreground-subtle)" });
1038
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RecentBadge, {});
1039
- };
1040
-
1041
- // src/components/WalletButton/WalletButton.tsx
1042
-
1043
-
1044
- var WalletButton = ({
1045
- wallet,
1046
- connectWallet,
1047
- isLastUsed = false,
1048
- iconSize = 32
1049
- }) => {
1050
- const label = isLastUsed ? "Recent" : void 0;
1051
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1052
- Button,
1053
- {
1054
- variant: "secondary",
1055
- onClick: () => connectWallet(wallet),
1056
- expand: true,
1057
- style: { borderRadius: "var(--aurum-border-radius-md)" },
1058
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { justify: "space-between", align: "center", style: { width: "100%" }, children: [
1059
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "center", gap: 10, children: [
1060
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletLogoWrapper, { id: wallet.id, size: iconSize, sizeSlot: "sm" }),
1061
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { weight: "semibold", size: "md", children: wallet.name })
1062
- ] }),
1063
- wallet.id === _types.WalletId.WalletConnect && !isLastUsed ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.QrCode, { color: "var(--color-foreground)", size: 18 }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletButtonLabel, { type: label })
1064
- ] })
1065
- },
1066
- wallet.id
1067
- );
1068
- };
1069
-
1070
- // src/components/ConnectModal/AdditionalWalletsIcon.tsx
1071
-
1072
- var AdditionalWalletsIcon = ({ additionalWallets, size = 32 }) => {
1073
- const walletCount = additionalWallets.length;
1074
- if (walletCount === 1) {
1075
- const iconSize2 = Math.floor(size * 0.7);
1076
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "additional-wallets-container", style: { width: size, height: size }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1077
- WalletLogoWrapper,
1078
- {
1079
- id: additionalWallets[0].id,
1080
- size: iconSize2,
1081
- sizeSlot: "xs",
1082
- title: additionalWallets[0].name
1083
- }
1084
- ) });
1085
- }
1086
- if (walletCount === 2) {
1087
- const iconSize2 = Math.floor(size * 0.55);
1088
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "additional-wallets-container", style: { width: size, height: size }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "center", gap: 0, children: [
1089
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1090
- "div",
1091
- {
1092
- className: "circular-icon-wrapper circular-icon-wrapper--front",
1093
- style: { width: iconSize2, height: iconSize2 },
1094
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1095
- WalletLogoWrapper,
1096
- {
1097
- id: additionalWallets[0].id,
1098
- size: iconSize2,
1099
- sizeSlot: "xs",
1100
- title: additionalWallets[0].name
1101
- }
1102
- )
1103
- }
1104
- ),
1105
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1106
- "div",
1107
- {
1108
- className: "circular-icon-wrapper circular-icon-wrapper--back",
1109
- style: { width: iconSize2, height: iconSize2 },
1110
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1111
- WalletLogoWrapper,
1112
- {
1113
- id: additionalWallets[1].id,
1114
- size: iconSize2,
1115
- sizeSlot: "xs",
1116
- title: additionalWallets[1].name
1117
- }
1118
- )
1119
- }
1120
- )
1121
- ] }) });
1122
- }
1123
- const walletsToShow = additionalWallets.slice(0, 4);
1124
- const iconSize = Math.floor(size * 0.4);
1125
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "additional-wallets-grid", style: { width: size, height: size }, children: [
1126
- walletsToShow.map((wallet) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "additional-wallets-grid-item", style: { width: iconSize, height: iconSize }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletLogoWrapper, { id: wallet.id, size: iconSize, sizeSlot: "xs", title: wallet.name }) }, wallet.id)),
1127
- walletsToShow.length === 3 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "additional-wallets-placeholder", style: { width: iconSize, height: iconSize } })
1128
- ] });
1129
- };
1130
-
1131
- // src/components/ConnectModal/WalletListStacked.tsx
1132
-
1133
- var WalletListStacked = ({ wallets, hasEmailAuth }) => {
1134
- const { navigateTo } = useNavigation();
1135
- const { connectWallet } = useConnectModal();
1136
- const lastUsedWalletId = useAurumStore((state) => state.lastUsedWalletId);
1137
- const showAllButton = hasEmailAuth ? wallets.length > 4 : wallets.length > 5;
1138
- const walletsToShow = showAllButton ? wallets.slice(0, 3) : wallets;
1139
- const additionalWallets = showAllButton ? wallets.slice(3) : [];
1140
- const goToAllWallets = () => {
1141
- navigateTo(PAGE_IDS.ALL_WALLETS);
1142
- };
1143
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { children: [
1144
- walletsToShow.map((wallet) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1145
- WalletButton,
1146
- {
1147
- wallet,
1148
- connectWallet,
1149
- isLastUsed: wallet.id === lastUsedWalletId
1150
- },
1151
- wallet.id
1152
- )),
1153
- showAllButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: goToAllWallets, expand: true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { justify: "space-between", align: "center", style: { width: "100%" }, children: [
1154
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "center", gap: 10, children: [
1155
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AdditionalWalletsIcon, { additionalWallets, size: 32 }),
1156
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { weight: "semibold", size: "md", children: "All Wallets" })
1157
- ] }),
1158
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { size: 18, color: "var(--color-foreground-subtle)" })
1159
- ] }) })
1160
- ] });
1161
- };
1162
-
1163
- // src/components/ConnectModal/SelectWallet.tsx
1164
-
1165
-
1166
- var SelectWalletPage = () => {
1167
- const { displayedWallets } = useConnectModal();
1168
- const { onDismiss, brandConfig } = useWidgetContext();
1169
- const hasEmailAuth = displayedWallets.some((wallet) => wallet.id === _types.WalletId.Email);
1170
- const sortedWallets = _react.useMemo.call(void 0, () => sortWallets(displayedWallets), [displayedWallets]);
1171
- const isGridLayout = brandConfig.walletLayout === "grid";
1172
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1173
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1174
- ModalHeader,
1175
- {
1176
- title: "Log in or sign up",
1177
- rightAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) })
1178
- }
1179
- ),
1180
- hasEmailAuth && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1181
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", gap: 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailAuth, {}) }),
1182
- sortedWallets.length > 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1183
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 20 }),
1184
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Divider, { children: "or continue with" }),
1185
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 20 })
1186
- ] })
1187
- ] }),
1188
- isGridLayout ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletListGrid, { wallets: sortedWallets }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletListStacked, { wallets: sortedWallets, hasEmailAuth })
1189
- ] });
1190
- };
1191
-
1192
- // src/components/ConnectModal/ConnectionStatus/ConnectionStatusBase.tsx
1193
-
1194
-
1195
-
1196
- // src/components/ConnectModal/ConnectionStatus/ConnectionIconsRow.tsx
1197
-
1198
-
1199
-
1200
- // src/components/ConnectModal/BrandLogo.tsx
1201
-
1202
-
1203
- var BrandLogo = ({ size = 70, sizeSlot = "sm" }) => {
1204
- const { brandConfig } = useWidgetContext();
1205
- return brandConfig.logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1206
- "img",
1207
- {
1208
- src: brandConfig.logo,
1209
- alt: `${brandConfig.appName} logo`,
1210
- style: {
1211
- width: size,
1212
- height: size,
1213
- objectFit: "cover",
1214
- borderRadius: _react3.getLogoRadius.call(void 0, brandConfig.borderRadius, sizeSlot)
1215
- }
1216
- }
1217
- ) : null;
1218
- };
1219
-
1220
- // src/components/ConnectModal/ConnectionStatus/StatusIcons.tsx
1221
-
1222
-
1223
- var ELLIPSES_COUNT = 3;
1224
- var StatusIcons = ({ success, error }) => {
1225
- const getStatusKey = () => {
1226
- if (success) return "success";
1227
- if (error) return "error";
1228
- return "connecting";
1229
- };
1230
- if (success) {
1231
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1232
- Row,
1233
- {
1234
- align: "center",
1235
- justify: "center",
1236
- gap: 0,
1237
- style: { padding: "0 0.5rem", minHeight: "3rem" },
1238
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ellipses-success", children: Array.from({ length: ELLIPSES_COUNT }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\xB7" }, i)) })
1239
- },
1240
- getStatusKey()
1241
- );
1242
- }
1243
- if (error) {
1244
- const dotsBeforeIcon = Math.floor(ELLIPSES_COUNT / 2);
1245
- const dotsAfterIcon = ELLIPSES_COUNT - dotsBeforeIcon - 1;
1246
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1247
- Row,
1248
- {
1249
- align: "center",
1250
- justify: "center",
1251
- gap: 0,
1252
- style: { padding: "0 0.5rem", minHeight: "3rem" },
1253
- children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "status-icon-with-dots error", children: [
1254
- Array.from({ length: dotsBeforeIcon }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "dot", children: "\xB7" }, `before-${i}`)),
1255
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "icon-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 24, color: "var(--color-error)" }) }),
1256
- Array.from({ length: dotsAfterIcon }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "dot", children: "\xB7" }, `after-${i}`))
1257
- ] })
1258
- },
1259
- getStatusKey()
1260
- );
1261
- }
1262
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1263
- Row,
1264
- {
1265
- align: "center",
1266
- justify: "center",
1267
- gap: 0,
1268
- style: { padding: "0 0.5rem", minHeight: "3rem" },
1269
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "ellipses-loading", children: Array.from({ length: ELLIPSES_COUNT }, (_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "\xB7" }, i)) })
1270
- },
1271
- getStatusKey()
1272
- );
1273
- };
1274
-
1275
- // src/components/ConnectModal/ConnectionStatus/ConnectionIconsRow.tsx
1276
-
1277
- var ConnectionIconsRow = ({
1278
- brandConfig,
1279
- walletId,
1280
- walletName,
1281
- success,
1282
- error,
1283
- shouldShake,
1284
- onRetry
1285
- }) => {
1286
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `connection-icons-row ${shouldShake ? "wallet-icon-shake" : ""}`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { gap: 4, children: [
1287
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "brand-logo-container", children: brandConfig.logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BrandLogo, { size: 54, sizeSlot: "md" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react3.AurumLogo, { variant: "black", size: 53, radius: brandConfig.borderRadius, sizeSlot: "md", title: "Aurum" }) }),
1288
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusIcons, { success, error }),
1289
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "wallet-logo-with-retry", children: [
1290
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletLogoWrapper, { id: walletId, size: 54, sizeSlot: "md", title: walletName }),
1291
- error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", className: "retry-icon-overlay", onClick: onRetry, "aria-label": "Retry connection", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.RotateCcw, { size: 18 }) })
1292
- ] })
1293
- ] }) });
1294
- };
1295
-
1296
- // src/components/ConnectModal/ConnectionStatus/ConnectionStatusBase.tsx
1297
-
1298
- var ERROR_CODE = {
1299
- USER_REJECTED: 4001,
1300
- REQUEST_PENDING: -32002
1301
- };
1302
- var ConnectionStatusBase = ({
1303
- title,
1304
- pendingHeaderText,
1305
- pendingSubContent,
1306
- extraContent
1307
- }) => {
1308
- const { selectedWallet, error, errorCode, success, goBackToHome, retryConnection } = useConnectModal();
1309
- const { onDismiss, brandConfig } = useWidgetContext();
1310
- const [shouldShake, setShouldShake] = _react.useState.call(void 0, false);
1311
- _react.useEffect.call(void 0, () => {
1312
- if (error) {
1313
- setShouldShake(true);
1314
- const timer = setTimeout(() => {
1315
- setShouldShake(false);
1316
- }, ANIMATION_DURATION.SHAKE);
1317
- return () => clearTimeout(timer);
1318
- }
1319
- }, [error]);
1320
- if (!selectedWallet) {
1321
- return null;
1322
- }
1323
- const getHeaderVariant = () => {
1324
- if (success) return "success";
1325
- if (error && errorCode !== ERROR_CODE.REQUEST_PENDING) return "error";
1326
- return "primary";
1327
- };
1328
- const getHeaderText = () => {
1329
- if (success) return "";
1330
- if (error) {
1331
- if (errorCode === ERROR_CODE.REQUEST_PENDING) return "Request Pending";
1332
- return "Request Rejected";
1333
- }
1334
- return pendingHeaderText;
1335
- };
1336
- const renderSubContent = () => {
1337
- if (success) {
1338
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "success-icon-large", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleCheck, { color: "var(--aurum-primary-color)", size: 46 }) });
1339
- }
1340
- if (error) {
1341
- if (errorCode === ERROR_CODE.REQUEST_PENDING) {
1342
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { align: "center", size: "sm", variant: "secondary", children: [
1343
- "Check your wallet for a ",
1344
- "\n",
1345
- "pending connection request"
1346
- ] });
1347
- }
1348
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { align: "center", size: "sm", variant: "secondary", children: [
1349
- "Please try again or select a ",
1350
- "\n",
1351
- "different wallet"
1352
- ] });
1353
- }
1354
- return pendingSubContent;
1355
- };
1356
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1357
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1358
- ModalHeader,
1359
- {
1360
- leftAction: success ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
1361
- rightAction: success ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) }),
1362
- title: title || selectedWallet.name
1363
- }
1364
- ),
1365
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 12 }),
1366
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", style: { maxWidth: "15.625rem", margin: "0 auto" }, gap: 8, children: [
1367
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1368
- ConnectionIconsRow,
1369
- {
1370
- brandConfig,
1371
- walletId: selectedWallet.id,
1372
- walletName: selectedWallet.name,
1373
- success,
1374
- error,
1375
- shouldShake,
1376
- onRetry: retryConnection
1377
- }
1378
- ),
1379
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 12 }),
1380
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", justify: "start", gap: 0, style: { minHeight: "5rem", width: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { gap: 8, style: { width: "100%" }, align: "center", children: [
1381
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Row, { align: "center", justify: "center", gap: 0, style: { width: "100%" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "lg", variant: getHeaderVariant(), weight: "bold", align: "center", children: getHeaderText() }) }),
1382
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Row, { align: "center", justify: "center", gap: 0, style: { width: "100%", whiteSpace: "pre-line" }, children: renderSubContent() }),
1383
- extraContent
1384
- ] }) })
1385
- ] }),
1386
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 12 })
1387
- ] });
1388
- };
1389
-
1390
- // src/components/ConnectModal/ConnectionStatus/Desktop.tsx
1391
-
1392
- var ConnectionStatusPage = () => {
1393
- const { selectedWallet } = useConnectModal();
1394
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1395
- ConnectionStatusBase,
1396
- {
1397
- pendingHeaderText: `Approve in ${_optionalChain([selectedWallet, 'optionalAccess', _18 => _18.name])}`,
1398
- pendingSubContent: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { align: "center", size: "sm", variant: "secondary", children: [
1399
- "Please check your wallet to",
1400
- "\n",
1401
- "approve the connection"
1402
- ] })
1403
- }
1404
- );
1405
- };
1406
-
1407
- // src/components/ConnectModal/ConnectionStatus/Mobile.tsx
1408
-
1409
-
1410
- var ConnectionStatusMobilePage = () => {
1411
- const { selectedWallet, error, success, retryConnection } = useConnectModal();
1412
- const [showLaunchButton, setShowLaunchButton] = _react.useState.call(void 0, false);
1413
- _react.useEffect.call(void 0, () => {
1414
- const timer = setTimeout(() => setShowLaunchButton(true), 5e3);
1415
- return () => clearTimeout(timer);
1416
- }, []);
1417
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1418
- ConnectionStatusBase,
1419
- {
1420
- title: _optionalChain([selectedWallet, 'optionalAccess', _19 => _19.name]),
1421
- pendingHeaderText: `Opening ${_optionalChain([selectedWallet, 'optionalAccess', _20 => _20.name])}`,
1422
- pendingSubContent: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { size: "sm", variant: "secondary", align: "center", style: { maxWidth: "18.75rem" }, children: [
1423
- "If ",
1424
- _optionalChain([selectedWallet, 'optionalAccess', _21 => _21.name]),
1425
- " doesn't open automatically, click the button below"
1426
- ] }),
1427
- extraContent: showLaunchButton && !success && !error ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "tertiary", size: "md", onClick: retryConnection, style: { width: "100%", marginTop: "0.5rem" }, children: "Launch App" }) : void 0
1428
- }
1429
- );
1430
- };
1431
-
1432
- // src/components/ConnectModal/QRCodePage.tsx
1433
-
1434
-
1435
- // src/components/QRCodeDisplay/QRCodeDisplay.tsx
1436
- var _reactqrcodelogo = require('react-qrcode-logo');
1437
-
1438
- // src/utils/generateQrCodeWalletLogo.tsx
1439
- var _logos = require('@aurum-sdk/logos');
1440
-
1441
- var generateQrCodeWalletLogo = (walletAdapter) => {
1442
- if (_optionalChain([walletAdapter, 'optionalAccess', _22 => _22.icon])) {
1443
- return walletAdapter.icon;
1444
- }
1445
- return _nullishCoalesce(_logos.getLogoDataUri.call(void 0, _types.WalletId.WalletConnect), () => ( ""));
1446
- };
1447
-
1448
- // src/components/QRCodeDisplay/QREye.tsx
1449
-
1450
- var QREye = ({ x, y, eyeSize, eyeRadius, dotSize, fillColor, bgColor }) => {
1451
- const padding = dotSize * 0.8;
1452
- const centerRadius = (eyeSize - 4 * padding) / 2 * 1.1;
1453
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { children: [
1454
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1455
- "rect",
1456
- {
1457
- x,
1458
- y,
1459
- width: eyeSize,
1460
- height: eyeSize,
1461
- fill: fillColor,
1462
- rx: eyeRadius,
1463
- ry: eyeRadius,
1464
- className: "qr-skeleton-eye"
1465
- }
1466
- ),
1467
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1468
- "rect",
1469
- {
1470
- x: x + padding,
1471
- y: y + padding,
1472
- width: eyeSize - 2 * padding,
1473
- height: eyeSize - 2 * padding,
1474
- fill: bgColor,
1475
- rx: eyeRadius / 2,
1476
- ry: eyeRadius / 2
1477
- }
1478
- ),
1479
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: x + eyeSize / 2, cy: y + eyeSize / 2, r: centerRadius, fill: fillColor, className: "qr-skeleton-eye" })
1480
- ] });
1481
- };
1482
-
1483
- // src/components/QRCodeDisplay/generateSkeletonDots.tsx
1484
-
1485
- var generateSkeletonDots = ({
1486
- logoSize,
1487
- dotSize,
1488
- eyeSize,
1489
- gridSize,
1490
- fillColor
1491
- }) => {
1492
- const dots = [];
1493
- for (let row = 0; row < gridSize; row++) {
1494
- for (let col = 0; col < gridSize; col++) {
1495
- const x = col * dotSize;
1496
- const y = row * dotSize;
1497
- const eyeAreaWithPadding = Math.ceil(eyeSize / dotSize);
1498
- const isTopLeftEye = row < eyeAreaWithPadding && col < eyeAreaWithPadding;
1499
- const isTopRightEye = row < eyeAreaWithPadding && col >= gridSize - eyeAreaWithPadding;
1500
- const isBottomLeftEye = row >= gridSize - eyeAreaWithPadding && col < eyeAreaWithPadding;
1501
- const centerX = (gridSize - 1) / 2;
1502
- const centerY = (gridSize - 1) / 2;
1503
- const logoPaddingInGridUnits = 6 / dotSize;
1504
- const logoHalfSize = logoSize / dotSize / 2 + logoPaddingInGridUnits;
1505
- const isLogoArea = Math.abs(col - centerX) < logoHalfSize && Math.abs(row - centerY) < logoHalfSize;
1506
- if (!isTopLeftEye && !isTopRightEye && !isBottomLeftEye && !isLogoArea) {
1507
- dots.push(
1508
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1509
- "circle",
1510
- {
1511
- cx: x + dotSize / 2,
1512
- cy: y + dotSize / 2,
1513
- r: dotSize * 0.25,
1514
- fill: fillColor,
1515
- className: "qr-skeleton-dot"
1516
- },
1517
- `${row}-${col}`
1518
- )
1519
- );
1520
- }
1521
- }
1522
- }
1523
- return dots;
1524
- };
1525
-
1526
- // src/components/QRCodeDisplay/QRCodeSkeleton.tsx
1527
-
1528
- var QRCodeSkeleton = ({ size = 128 }) => {
1529
- const { brandConfig } = useWidgetContext();
1530
- const { selectedWallet } = useConnectModal();
1531
- const fillColor = brandConfig.theme === "light" ? "#777777" : "#6b7280";
1532
- const bgColor = brandConfig.theme === "light" ? "#ffffff" : "#121212";
1533
- const logoSize = size * 0.2;
1534
- const eyeRadius = 6;
1535
- const dotSize = size / 40;
1536
- const eyeSize = 32;
1537
- const gridSize = 40;
1538
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "qr-skeleton-container", style: { height: size }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: size, height: size, className: "qr-skeleton-svg", children: [
1539
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { width: size, height: size, fill: bgColor }),
1540
- generateSkeletonDots({ logoSize, dotSize, eyeSize, gridSize, fillColor }),
1541
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1542
- QREye,
1543
- {
1544
- x: 0,
1545
- y: 0,
1546
- eyeSize,
1547
- eyeRadius,
1548
- dotSize,
1549
- fillColor,
1550
- bgColor
1551
- }
1552
- ),
1553
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1554
- QREye,
1555
- {
1556
- x: size - eyeSize,
1557
- y: 0,
1558
- eyeSize,
1559
- eyeRadius,
1560
- dotSize,
1561
- fillColor,
1562
- bgColor
1563
- }
1564
- ),
1565
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1566
- QREye,
1567
- {
1568
- x: 0,
1569
- y: size - eyeSize,
1570
- eyeSize,
1571
- eyeRadius,
1572
- dotSize,
1573
- fillColor,
1574
- bgColor
1575
- }
1576
- ),
1577
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1578
- "rect",
1579
- {
1580
- x: size / 2 - logoSize / 2,
1581
- y: size / 2 - logoSize / 2,
1582
- width: logoSize,
1583
- height: logoSize,
1584
- fill: bgColor,
1585
- rx: 6,
1586
- ry: 6
1587
- }
1588
- ),
1589
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1590
- "image",
1591
- {
1592
- x: size / 2 - logoSize / 2,
1593
- y: size / 2 - logoSize / 2,
1594
- width: logoSize,
1595
- height: logoSize,
1596
- href: generateQrCodeWalletLogo(selectedWallet || void 0),
1597
- opacity: "1.0"
1598
- }
1599
- )
1600
- ] }) });
1601
- };
1602
-
1603
- // src/components/QRCodeDisplay/QRCodeDisplay.tsx
1604
-
1605
-
1606
- var QRCodeDisplay = ({ uri, size = 256 }) => {
1607
- const { brandConfig } = useWidgetContext();
1608
- const { selectedWallet, displayedWallets, openWalletConnectModal } = useConnectModal();
1609
- const qrCodeDisplayColor = brandConfig.theme === "light" ? "#000000" : "#6b7280";
1610
- const bgColor = brandConfig.theme === "light" ? "#ffffff" : "#121212";
1611
- const wcAdapter = displayedWallets.find(({ id }) => id === _types.WalletId.WalletConnect);
1612
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", gap: 16, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 4, children: [
1613
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1614
- "div",
1615
- {
1616
- className: `qr-container ${!uri ? "qr-container-shimmer" : ""}`,
1617
- style: {
1618
- width: size,
1619
- height: size
1620
- },
1621
- children: !uri ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodeSkeleton, { size }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1622
- _reactqrcodelogo.QRCode,
1623
- {
1624
- value: uri,
1625
- size,
1626
- quietZone: 0,
1627
- bgColor,
1628
- fgColor: qrCodeDisplayColor,
1629
- logoImage: generateQrCodeWalletLogo(selectedWallet || void 0),
1630
- logoWidth: size * 0.2,
1631
- logoHeight: size * 0.2,
1632
- removeQrCodeBehindLogo: true,
1633
- logoPadding: 6,
1634
- qrStyle: "dots",
1635
- eyeRadius: getBorderRadiusScale(brandConfig.borderRadius).xs
1636
- }
1637
- )
1638
- }
1639
- ),
1640
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { justify: _optionalChain([wcAdapter, 'optionalAccess', _23 => _23.openModal]) ? "space-between" : "center", style: { width: "100%" }, children: [
1641
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CopyButton, { text: uri || "", disabled: !uri, variant: "secondary", label: "Copy URI" }),
1642
- _optionalChain([wcAdapter, 'optionalAccess', _24 => _24.openModal]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1643
- Button,
1644
- {
1645
- variant: "text",
1646
- size: "sm",
1647
- onClick: openWalletConnectModal,
1648
- style: { color: "var(--color-foreground-muted)", fontWeight: "500" },
1649
- children: "Open Modal"
1650
- }
1651
- )
1652
- ] })
1653
- ] }) });
1654
- };
1655
-
1656
- // src/components/ConnectModal/QRCodePage.tsx
1657
-
1658
-
1659
-
1660
- var QRCodePage = () => {
1661
- const { onDismiss } = useWidgetContext();
1662
- const { navigateTo } = useNavigation();
1663
- const { selectedWallet, error, configError, retryConnection, qrSuccess } = useConnectModal();
1664
- const [connectionUri, setConnectionUri] = _react.useState.call(void 0, null);
1665
- const goBackToHome = () => {
1666
- navigateTo(PAGE_IDS.SELECT_WALLET);
1667
- };
1668
- const title = _optionalChain([selectedWallet, 'optionalAccess', _25 => _25.name]) === _types.WalletName.WalletConnect ? "Scan QR code" : `Scan with ${_optionalChain([selectedWallet, 'optionalAccess', _26 => _26.name])} app`;
1669
- _react.useEffect.call(void 0, () => {
1670
- const handleWalletConnectURI = (event) => {
1671
- setConnectionUri(event.detail.uri);
1672
- };
1673
- window.addEventListener("walletconnect:uri", handleWalletConnectURI);
1674
- return () => {
1675
- window.removeEventListener("walletconnect:uri", handleWalletConnectURI);
1676
- };
1677
- }, []);
1678
- _react.useEffect.call(void 0, () => {
1679
- if (error && !configError) {
1680
- setConnectionUri(null);
1681
- retryConnection();
1682
- }
1683
- }, [error, configError]);
1684
- if (!selectedWallet) {
1685
- return null;
1686
- }
1687
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1688
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1689
- ModalHeader,
1690
- {
1691
- leftAction: qrSuccess ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
1692
- title,
1693
- rightAction: qrSuccess ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) })
1694
- }
1695
- ),
1696
- qrSuccess ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", style: { height: "8rem" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleCheck, { color: "var(--aurum-primary-color)", size: 46 }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1697
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", gap: 24, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodeDisplay, { uri: error ? null : connectionUri }) }),
1698
- _optionalChain([selectedWallet, 'optionalAccess', _27 => _27.downloadUrl]) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1699
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { size: 15 }),
1700
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
1701
- Button,
1702
- {
1703
- variant: "tertiary",
1704
- expand: true,
1705
- onClick: () => window.open(_nullishCoalesce(selectedWallet.downloadUrl, () => ( "")), "_blank", "noopener,noreferrer"),
1706
- children: [
1707
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SquareArrowOutUpRight, { size: 16, color: "var(--color-foreground-muted)" }),
1708
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { size: "sm", weight: "semibold", variant: "secondary", children: [
1709
- "Download ",
1710
- selectedWallet.name
1711
- ] })
1712
- ]
1713
- }
1714
- )
1715
- ] })
1716
- ] })
1717
- ] });
1718
- };
1719
-
1720
- // src/components/ConnectModal/AllWallets.tsx
1721
-
1722
-
1723
-
1724
- var AllWalletsPage = () => {
1725
- const { onDismiss } = useWidgetContext();
1726
- const { navigateTo } = useNavigation();
1727
- const { displayedWallets, connectWallet } = useConnectModal();
1728
- const lastUsedWalletId = useAurumStore((state) => state.lastUsedWalletId);
1729
- const sortedWallets = _react.useMemo.call(void 0, () => sortWallets(displayedWallets), [displayedWallets]);
1730
- const goBackToSelectWallet = () => {
1731
- navigateTo(PAGE_IDS.SELECT_WALLET);
1732
- };
1733
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1734
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1735
- ModalHeader,
1736
- {
1737
- leftAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: goBackToSelectWallet, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
1738
- rightAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) }),
1739
- title: "All Wallets"
1740
- }
1741
- ),
1742
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { justify: "start", style: { maxHeight: "22rem", overflowY: "auto" }, children: sortedWallets.map((wallet) => {
1743
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1744
- WalletButton,
1745
- {
1746
- wallet,
1747
- connectWallet,
1748
- isLastUsed: wallet.id === lastUsedWalletId
1749
- },
1750
- wallet.id
1751
- );
1752
- }) })
1753
- ] });
1754
- };
1755
-
1756
- // src/components/ConnectModal/DownloadWalletPage.tsx
1757
-
1758
-
1759
- var DownloadWalletPage = () => {
1760
- const { selectedWallet, goBackToHome } = useConnectModal();
1761
- const { onDismiss } = useWidgetContext();
1762
- if (!selectedWallet) {
1763
- return null;
1764
- }
1765
- const downloadUrl = selectedWallet.downloadUrl;
1766
- const handleDownload = () => {
1767
- if (downloadUrl) {
1768
- window.open(downloadUrl, "_blank", "noopener,noreferrer");
1769
- }
1770
- };
1771
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
1772
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1773
- ModalHeader,
1774
- {
1775
- leftAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
1776
- rightAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) }),
1777
- title: `Install ${selectedWallet.name}`
1778
- }
1779
- ),
1780
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 24, justify: "center", children: [
1781
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WalletLogoWrapper, { id: selectedWallet.id, size: 64, sizeSlot: "lg", title: selectedWallet.name }),
1782
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 12, children: [
1783
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { size: "lg", weight: "semibold", align: "center", children: [
1784
- "Install ",
1785
- selectedWallet.name
1786
- ] }),
1787
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { size: "md", variant: "secondary", align: "center", style: { maxWidth: "20rem" }, children: [
1788
- selectedWallet.name,
1789
- " not installed. Please download then try again."
1790
- ] })
1791
- ] }),
1792
- downloadUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button, { variant: "tertiary", onClick: handleDownload, expand: true, children: [
1793
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SquareArrowOutUpRight, { size: 16, color: "var(--color-foreground-muted)" }),
1794
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { size: "sm", weight: "semibold", variant: "secondary", children: [
1795
- "Download ",
1796
- selectedWallet.name
1797
- ] })
1798
- ] }) })
1799
- ] })
1800
- ] });
1801
- };
1802
-
1803
- // src/components/ConnectModal/EmailVerifyOtp/EmailVerifyOtp.tsx
1804
-
1805
-
1806
- // src/components/ConnectModal/EmailVerifyOtp/constants.ts
1807
- var OTP_LENGTH = 6;
1808
- var RESEND_COUNTDOWN_SECONDS = 30;
1809
-
1810
- // src/components/ConnectModal/EmailVerifyOtp/styles.ts
1811
- var getOtpInputStyles = (isFocused, hasError, hideCaret) => ({
1812
- width: "2.625rem",
1813
- height: "3rem",
1814
- textAlign: "center",
1815
- fontFamily: "inherit",
1816
- fontSize: "1.375rem",
1817
- border: `${hasError || !isFocused ? "0.0625rem" : "0.125rem"} solid ${hasError ? "var(--color-error)" : isFocused ? "var(--color-border-focus)" : "var(--color-border-muted)"}`,
1818
- borderRadius: "var(--aurum-border-radius-sm)",
1819
- outline: "none",
1820
- backgroundColor: "var(--color-accent)",
1821
- color: "var(--color-foreground)",
1822
- caretColor: hideCaret ? "transparent" : "auto",
1823
- transition: "border-color 0.3s ease"
1824
- });
1825
- var emailHighlightStyles = {
1826
- fontWeight: "bold",
1827
- color: "var(--color-primary)"
1828
- };
1829
-
1830
- // src/components/ConnectModal/EmailVerifyOtp/useCountdown.ts
1831
-
1832
- var useCountdown = () => {
1833
- const [countdown, setCountdown] = _react.useState.call(void 0, 0);
1834
- const [canResend, setCanResend] = _react.useState.call(void 0, true);
1835
- const startCountdown = (seconds) => {
1836
- setCanResend(false);
1837
- setCountdown(seconds);
1838
- };
1839
- _react.useEffect.call(void 0, () => {
1840
- if (countdown <= 0) return;
1841
- const timer = setTimeout(() => {
1842
- const newCountdown = countdown - 1;
1843
- setCountdown(newCountdown);
1844
- if (newCountdown === 0) {
1845
- setCanResend(true);
1846
- }
1847
- }, 1e3);
1848
- return () => clearTimeout(timer);
1849
- }, [countdown]);
1850
- return { countdown, canResend, startCountdown };
1851
- };
1852
-
1853
- // src/components/ConnectModal/EmailVerifyOtp/useOtpInputs.ts
1854
-
1855
- var useOtpInputs = ({
1856
- emailAuthState,
1857
- error,
1858
- clearError,
1859
- onComplete,
1860
- isVerifying
1861
- }) => {
1862
- const [otp, setOtp] = _react.useState.call(void 0, Array(OTP_LENGTH).fill(""));
1863
- const [focusedIndex, setFocusedIndex] = _react.useState.call(void 0, 0);
1864
- const inputRefs = _react.useRef.call(void 0, []);
1865
- const isOtpComplete = otp.every((digit) => digit !== "");
1866
- const handleInputChange = (index, value) => {
1867
- if (error) clearError();
1868
- if (emailAuthState.step === "connecting" || !/^\d*$/.test(value)) return;
1869
- const newOtp = [...otp];
1870
- newOtp[index] = value.slice(-1);
1871
- setOtp(newOtp);
1872
- if (value && index < OTP_LENGTH - 1) {
1873
- _optionalChain([inputRefs, 'access', _28 => _28.current, 'access', _29 => _29[index + 1], 'optionalAccess', _30 => _30.focus, 'call', _31 => _31()]);
1874
- }
1875
- };
1876
- const handleKeyDown = (index, e) => {
1877
- if (e.key === "Backspace" && !otp[index] && index > 0) {
1878
- _optionalChain([inputRefs, 'access', _32 => _32.current, 'access', _33 => _33[index - 1], 'optionalAccess', _34 => _34.focus, 'call', _35 => _35()]);
1879
- }
1880
- };
1881
- const handlePaste = (e) => {
1882
- e.preventDefault();
1883
- if (error) clearError();
1884
- if (emailAuthState.step === "connecting" || !/^\d*$/.test(e.clipboardData.getData("text"))) return;
1885
- const pastedData = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
1886
- const newOtp = Array(OTP_LENGTH).fill("").map((_, i) => pastedData[i] || "");
1887
- setOtp(newOtp);
1888
- const nextEmptyIndex = newOtp.findIndex((digit) => !digit);
1889
- if (nextEmptyIndex !== -1) {
1890
- _optionalChain([inputRefs, 'access', _36 => _36.current, 'access', _37 => _37[nextEmptyIndex], 'optionalAccess', _38 => _38.focus, 'call', _39 => _39()]);
1891
- }
1892
- };
1893
- _react.useEffect.call(void 0, () => {
1894
- if (isOtpComplete && otp.join("").length === OTP_LENGTH) {
1895
- onComplete(otp.join(""));
1896
- }
1897
- }, [otp]);
1898
- _react.useEffect.call(void 0, () => {
1899
- _optionalChain([inputRefs, 'access', _40 => _40.current, 'access', _41 => _41[0], 'optionalAccess', _42 => _42.focus, 'call', _43 => _43()]);
1900
- const timer = setTimeout(() => {
1901
- _optionalChain([inputRefs, 'access', _44 => _44.current, 'access', _45 => _45[0], 'optionalAccess', _46 => _46.focus, 'call', _47 => _47()]);
1902
- }, 100);
1903
- return () => clearTimeout(timer);
1904
- }, []);
1905
- _react.useEffect.call(void 0, () => {
1906
- if (error) {
1907
- setOtp(Array(OTP_LENGTH).fill(""));
1908
- _optionalChain([inputRefs, 'access', _48 => _48.current, 'access', _49 => _49[0], 'optionalAccess', _50 => _50.focus, 'call', _51 => _51()]);
1909
- }
1910
- }, [error]);
1911
- _react.useEffect.call(void 0, () => {
1912
- if (isVerifying) {
1913
- setFocusedIndex(0);
1914
- }
1915
- }, [isVerifying]);
1916
- return {
1917
- otp,
1918
- setOtp,
1919
- focusedIndex,
1920
- setFocusedIndex,
1921
- inputRefs,
1922
- handleInputChange,
1923
- handleKeyDown,
1924
- handlePaste
1925
- };
1926
- };
1927
-
1928
- // src/components/ConnectModal/EmailVerifyOtp/EmailVerifyOtp.tsx
1929
-
1930
- var EmailVerifyOTP = () => {
1931
- const { onDismiss } = useWidgetContext();
1932
- const { goBackToHome } = useConnectModal();
1933
- const { emailAuthState, sendEmailOTP, verifyEmailOTPAndConnect, error, clearError } = useEmailAuth();
1934
- const isVerifying = emailAuthState.step === "connecting" && !error;
1935
- const { otp, setOtp, focusedIndex, setFocusedIndex, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpInputs({
1936
- emailAuthState,
1937
- error,
1938
- clearError,
1939
- onComplete: verifyEmailOTPAndConnect,
1940
- isVerifying
1941
- });
1942
- const { canResend, startCountdown } = useCountdown();
1943
- const isSuccess = emailAuthState.step === "success";
1944
- const showOtpInputs = !isVerifying && !isSuccess;
1945
- const canResendOtp = canResend && emailAuthState.step !== "success";
1946
- const handleBackToHome = () => {
1947
- if (emailAuthState.step !== "otp") return;
1948
- clearError();
1949
- goBackToHome();
1950
- };
1951
- const handleResendOTP = async () => {
1952
- if (!canResendOtp) return;
1953
- if (error) clearError();
1954
- startCountdown(RESEND_COUNTDOWN_SECONDS);
1955
- await sendEmailOTP(emailAuthState.email);
1956
- setOtp(Array(OTP_LENGTH).fill(""));
1957
- _optionalChain([inputRefs, 'access', _52 => _52.current, 'access', _53 => _53[0], 'optionalAccess', _54 => _54.focus, 'call', _55 => _55()]);
1958
- };
1959
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
1960
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1961
- ModalHeader,
1962
- {
1963
- leftAction: isSuccess ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: handleBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
1964
- rightAction: isSuccess ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) }),
1965
- title: "Verify Email"
1966
- }
1967
- ),
1968
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { gap: 24, children: [
1969
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Text, { align: "center", variant: "secondary", children: [
1970
- "Enter the 6-digit code sent to",
1971
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "br", {}),
1972
- " ",
1973
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: emailHighlightStyles, children: emailAuthState.email })
1974
- ] }),
1975
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 12, children: [
1976
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { position: "relative", height: "3rem" }, children: [
1977
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1978
- Row,
1979
- {
1980
- justify: "center",
1981
- gap: 8,
1982
- style: {
1983
- opacity: showOtpInputs ? 1 : 0,
1984
- pointerEvents: showOtpInputs ? "auto" : "none",
1985
- position: "relative"
1986
- },
1987
- children: otp.map((digit, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
1988
- "input",
1989
- {
1990
- "aria-label": "OTP input",
1991
- id: `otp-input-${index}`,
1992
- type: "text",
1993
- autoFocus: index === 0,
1994
- maxLength: 1,
1995
- value: digit,
1996
- inputMode: "numeric",
1997
- onPaste: handlePaste,
1998
- onBlur: () => setFocusedIndex(null),
1999
- onFocus: () => setFocusedIndex(index),
2000
- onKeyDown: (e) => handleKeyDown(index, e),
2001
- ref: (el) => inputRefs.current[index] = el,
2002
- style: getOtpInputStyles(focusedIndex === index, !!error, !showOtpInputs),
2003
- onChange: (e) => handleInputChange(index, e.target.value)
2004
- },
2005
- index
2006
- ))
2007
- }
2008
- ),
2009
- !showOtpInputs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", justify: "center", style: { position: "absolute", inset: 0 }, children: isVerifying ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { size: 32, color: "var(--aurum-primary-color)" }) : isSuccess ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleCheck, { size: 46, color: "var(--aurum-primary-color)" }) : null })
2010
- ] }),
2011
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2012
- Text,
2013
- {
2014
- align: "center",
2015
- variant: "error",
2016
- size: "sm",
2017
- style: { visibility: error ? "visible" : "hidden", height: "1rem", display: isSuccess ? "none" : "block" },
2018
- children: error
2019
- }
2020
- )
2021
- ] }),
2022
- !isSuccess && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Column, { align: "center", justify: "center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Row, { align: "center", justify: "center", style: { minHeight: "2rem" }, children: canResend ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "baseline", gap: 2, children: [
2023
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "sm", variant: "secondary", children: "Didn't receive the code?" }),
2024
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2025
- Button,
2026
- {
2027
- size: "sm",
2028
- variant: "text",
2029
- onClick: handleResendOTP,
2030
- onMouseDown: (e) => e.preventDefault(),
2031
- disabled: !canResendOtp,
2032
- children: "Resend"
2033
- }
2034
- )
2035
- ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Row, { align: "center", gap: 4, children: [
2036
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "sm", variant: "secondary", children: "Email re-sent" }),
2037
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.Check, { size: 14, color: "var(--color-foreground-muted)" })
2038
- ] }) }) })
2039
- ] })
2040
- ] });
2041
- };
2042
-
2043
- // src/components/ConnectModal/ConfigErrorPage.tsx
2044
-
2045
-
2046
- var ConfigErrorPage = () => {
2047
- const { onDismiss } = useWidgetContext();
2048
- const { goBackToHome } = useConnectModal();
2049
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
2050
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2051
- ModalHeader,
2052
- {
2053
- leftAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: goBackToHome, "aria-label": "Go back", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronLeft, { size: 20, color: "var(--color-foreground-muted)" }) }),
2054
- rightAction: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { size: "sm", variant: "close", onClick: onDismiss, "aria-label": "Close", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.X, { size: 20, color: "var(--color-foreground-muted)" }) }),
2055
- title: "Error"
2056
- }
2057
- ),
2058
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 24, justify: "center", children: [
2059
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2060
- "div",
2061
- {
2062
- style: {
2063
- width: 64,
2064
- height: 64,
2065
- borderRadius: "var(--aurum-border-radius-md)",
2066
- backgroundColor: "color-mix(in srgb, var(--color-error) 80%, transparent)",
2067
- display: "flex",
2068
- alignItems: "center",
2069
- justifyContent: "center"
2070
- },
2071
- children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.AlertTriangle, { size: 32, color: "white" })
2072
- }
2073
- ),
2074
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Column, { align: "center", gap: 12, children: [
2075
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "lg", weight: "semibold", align: "center", children: "Configuration Error" }),
2076
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "md", variant: "secondary", align: "center", style: { maxWidth: "20rem" }, children: "Missing required project ID" })
2077
- ] }),
2078
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { variant: "secondary", onClick: goBackToHome, expand: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Text, { size: "sm", weight: "semibold", children: "Back" }) })
2079
- ] })
2080
- ] });
2081
- };
2082
-
2083
- // src/components/ConnectModal/PageIds.tsx
2084
-
2085
- var PAGE_IDS = {
2086
- SELECT_WALLET: "select-wallet",
2087
- ALL_WALLETS: "all-wallets",
2088
- QR_CODE: "qr-code",
2089
- MOBILE_DEEP_LINK: "mobile-deep-link",
2090
- DOWNLOAD_WALLET: "download-wallet",
2091
- CONNECTING: "connecting",
2092
- EMAIL_VERIFY_OTP: "email-verify-otp",
2093
- CONFIG_ERROR: "config-error"
2094
- };
2095
- var PAGE_COMPONENTS = {
2096
- [PAGE_IDS.SELECT_WALLET]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectWalletPage, {}),
2097
- [PAGE_IDS.ALL_WALLETS]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AllWalletsPage, {}),
2098
- [PAGE_IDS.QR_CODE]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, QRCodePage, {}),
2099
- [PAGE_IDS.MOBILE_DEEP_LINK]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConnectionStatusMobilePage, {}),
2100
- [PAGE_IDS.DOWNLOAD_WALLET]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadWalletPage, {}),
2101
- [PAGE_IDS.CONNECTING]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConnectionStatusPage, {}),
2102
- [PAGE_IDS.EMAIL_VERIFY_OTP]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EmailVerifyOTP, {}),
2103
- [PAGE_IDS.CONFIG_ERROR]: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConfigErrorPage, {})
2104
- };
2105
-
2106
- // src/utils/platform/isMobile.ts
2107
- var _mobiledetect = require('mobile-detect'); var _mobiledetect2 = _interopRequireDefault(_mobiledetect);
2108
- function isMobile() {
2109
- if (typeof window === "undefined" || typeof navigator === "undefined") {
2110
- return false;
2111
- }
2112
- const md = new (0, _mobiledetect2.default)(window.navigator.userAgent);
2113
- return md.mobile() !== null || md.tablet() !== null;
2114
- }
2115
-
2116
- // src/utils/walletConnectDeepLink.ts
2117
- var clearExistingDeepLinkListeners = () => {
2118
- const existingListeners = _nullishCoalesce(window.__aurumDeepLinkListeners, () => ( []));
2119
- existingListeners.forEach((cleanup) => cleanup());
2120
- window.__aurumDeepLinkListeners = [];
2121
- };
2122
- var createWalletConnectHandlers = (deepLinkBaseUrl, onRejection) => {
2123
- const handleUri = (event) => {
2124
- const uri = event.detail.uri;
2125
- if (uri && deepLinkBaseUrl) {
2126
- const deepLinkUrl = `${deepLinkBaseUrl}${encodeURIComponent(uri)}`;
2127
- window.location.href = deepLinkUrl;
2128
- }
2129
- };
2130
- const handleDisconnect = () => {
2131
- onRejection();
2132
- };
2133
- return { handleUri, handleDisconnect };
2134
- };
2135
- var setupEventListeners = (handlers) => {
2136
- const { handleUri, handleDisconnect } = handlers;
2137
- window.addEventListener("walletconnect:uri", handleUri);
2138
- window.addEventListener("walletconnect:disconnect", handleDisconnect);
2139
- return () => {
2140
- window.removeEventListener("walletconnect:uri", handleUri);
2141
- window.removeEventListener("walletconnect:disconnect", handleDisconnect);
2142
- };
2143
- };
2144
- var registerGlobalCleanup = (cleanupFn) => {
2145
- if (!window.__aurumDeepLinkListeners) {
2146
- window.__aurumDeepLinkListeners = [];
2147
- }
2148
- const cleanup = () => {
2149
- const cleanupList = _nullishCoalesce(window.__aurumDeepLinkListeners, () => ( []));
2150
- const index = cleanupList.indexOf(cleanup);
2151
- if (index > -1) cleanupList.splice(index, 1);
2152
- cleanupFn();
2153
- };
2154
- _optionalChain([window, 'access', _56 => _56.__aurumDeepLinkListeners, 'optionalAccess', _57 => _57.push, 'call', _58 => _58(cleanup)]);
2155
- return cleanup;
2156
- };
2157
-
2158
- // src/hooks/useConnectSelectedWallet.tsx
2159
-
2160
- var useConnectSelectedWallet = () => {
2161
- const { navigateTo } = useNavigation();
2162
- const connectInstalledWallet = async ({ adapter, onConnect, setSuccess }) => {
2163
- navigateTo(PAGE_IDS.CONNECTING);
2164
- try {
2165
- const { address, provider } = await adapter.connect();
2166
- _optionalChain([setSuccess, 'optionalCall', _59 => _59(true)]);
2167
- setTimeout(() => {
2168
- onConnect({ walletId: adapter.id, address, provider });
2169
- }, 1e3);
2170
- } catch (error) {
2171
- if (isConfigError(error)) {
2172
- navigateTo(PAGE_IDS.CONFIG_ERROR);
2173
- return;
2174
- }
2175
- throw error;
2176
- }
2177
- };
2178
- const connectUninstalledWalletQRCode = async ({ displayedWallets, onConnect, setSuccess }) => {
2179
- const walletConnectAdapter = _optionalChain([displayedWallets, 'optionalAccess', _60 => _60.find, 'call', _61 => _61(({ id }) => id === _types.WalletId.WalletConnect)]);
2180
- if (!walletConnectAdapter) {
2181
- sentryLogger.error("connectUninstalledWalletQRCode: WalletConnect adapter not found");
2182
- throw new Error("WalletConnect adapter not found");
2183
- }
2184
- navigateTo(PAGE_IDS.QR_CODE);
2185
- try {
2186
- const { address, provider } = await walletConnectAdapter.connect();
2187
- _optionalChain([setSuccess, 'optionalCall', _62 => _62(true)]);
2188
- setTimeout(() => {
2189
- onConnect({ walletId: walletConnectAdapter.id, address, provider });
2190
- }, 1e3);
2191
- } catch (error) {
2192
- if (isConfigError(error)) {
2193
- navigateTo(PAGE_IDS.CONFIG_ERROR);
2194
- return;
2195
- }
2196
- throw error;
2197
- }
2198
- };
2199
- const connectWithMobileDeepLink = async ({
2200
- displayedWallets,
2201
- adapter,
2202
- onConnect,
2203
- setSuccess
2204
- }) => {
2205
- const walletConnectAdapter = _optionalChain([displayedWallets, 'optionalAccess', _63 => _63.find, 'call', _64 => _64(({ id }) => id === _types.WalletId.WalletConnect)]);
2206
- if (!walletConnectAdapter) {
2207
- sentryLogger.error("connectWithMobileDeepLink: WalletConnect adapter not found");
2208
- throw new Error("WalletConnect adapter not found");
2209
- }
2210
- let isRejected = false;
2211
- clearExistingDeepLinkListeners();
2212
- const handlers = createWalletConnectHandlers(adapter.wcDeepLinkUrl, () => {
2213
- isRejected = true;
2214
- });
2215
- const cleanupEventListeners = setupEventListeners(handlers);
2216
- const cleanupGlobal = registerGlobalCleanup(cleanupEventListeners);
2217
- try {
2218
- navigateTo(PAGE_IDS.MOBILE_DEEP_LINK);
2219
- const { address, provider } = await walletConnectAdapter.connect();
2220
- cleanupGlobal();
2221
- if (isRejected) {
2222
- return;
2223
- }
2224
- _optionalChain([setSuccess, 'optionalCall', _65 => _65(true)]);
2225
- setTimeout(() => {
2226
- onConnect({ walletId: walletConnectAdapter.id, address, provider });
2227
- }, 1e3);
2228
- } catch (error) {
2229
- cleanupGlobal();
2230
- if (isConfigError(error)) {
2231
- navigateTo(PAGE_IDS.CONFIG_ERROR);
2232
- return;
2233
- }
2234
- throw error;
2235
- }
2236
- };
2237
- const connectWalletConnectModal = async ({ adapter, onConnect, setSuccess }) => {
2238
- try {
2239
- if (!adapter.openModal) {
2240
- throw new Error("Adapter does not support openModal");
2241
- }
2242
- const { address, provider } = await adapter.openModal();
2243
- _optionalChain([setSuccess, 'optionalCall', _66 => _66(true)]);
2244
- if (isMobile()) {
2245
- onConnect({ walletId: adapter.id, address, provider });
2246
- } else {
2247
- setTimeout(() => {
2248
- onConnect({ walletId: adapter.id, address, provider });
2249
- }, 1e3);
2250
- }
2251
- } catch (error) {
2252
- if (isConfigError(error)) {
2253
- navigateTo(PAGE_IDS.CONFIG_ERROR);
2254
- return;
2255
- }
2256
- }
2257
- };
2258
- const redirectToDownloadPage = async () => {
2259
- navigateTo(PAGE_IDS.DOWNLOAD_WALLET);
2260
- };
2261
- return {
2262
- // Both mobile and desktop
2263
- connectInstalledWallet,
2264
- connectWalletConnectModal,
2265
- redirectToDownloadPage,
2266
- // Desktop only
2267
- connectUninstalledWalletQRCode,
2268
- // Mobile only
2269
- connectWithMobileDeepLink
2270
- };
2271
- };
2272
-
2273
- // src/contexts/ConnectModalContext.tsx
2274
-
2275
-
2276
- var ConnectModalContext = _react.createContext.call(void 0, null);
2277
- var useConnectModal = () => {
2278
- const context = _react.useContext.call(void 0, ConnectModalContext);
2279
- if (!context) {
2280
- throw new Error("useConnectModal must be used within a ConnectModalProvider");
2281
- }
2282
- return context;
2283
- };
2284
- var ConnectModalProvider = ({ children, displayedWallets, onConnect }) => {
2285
- const { navigateTo } = useNavigation();
2286
- const {
2287
- redirectToDownloadPage,
2288
- connectInstalledWallet,
2289
- connectWithMobileDeepLink,
2290
- connectUninstalledWalletQRCode,
2291
- connectWalletConnectModal
2292
- } = useConnectSelectedWallet();
2293
- const [error, setError] = _react.useState.call(void 0, false);
2294
- const [errorCode, setErrorCode] = _react.useState.call(void 0, null);
2295
- const [configError, setConfigError] = _react.useState.call(void 0, false);
2296
- const [success, setSuccess] = _react.useState.call(void 0, false);
2297
- const [qrSuccess, setQrSuccess] = _react.useState.call(void 0, false);
2298
- const [selectedWallet, setSelectedWallet] = _react.useState.call(void 0, null);
2299
- const connectWallet = async (wallet) => {
2300
- try {
2301
- setError(false);
2302
- setErrorCode(null);
2303
- setConfigError(false);
2304
- setSuccess(false);
2305
- setQrSuccess(false);
2306
- setSelectedWallet(wallet);
2307
- const isOnMobile = isMobile();
2308
- const isDesktop = !isOnMobile;
2309
- const hasDeepLink = Boolean(wallet.wcDeepLinkUrl);
2310
- if (isDesktop) {
2311
- if (!wallet.isInstalled() && !hasDeepLink) {
2312
- return await redirectToDownloadPage();
2313
- }
2314
- if (wallet.id === _types.WalletId.WalletConnect || !wallet.isInstalled())
2315
- return await connectUninstalledWalletQRCode({
2316
- adapter: wallet,
2317
- displayedWallets,
2318
- onConnect,
2319
- setSuccess: setQrSuccess
2320
- });
2321
- return await connectInstalledWallet({ adapter: wallet, onConnect, setSuccess });
2322
- }
2323
- if (isOnMobile) {
2324
- if (wallet.id === _types.WalletId.WalletConnect) {
2325
- const wcAdapter = _optionalChain([displayedWallets, 'optionalAccess', _67 => _67.find, 'call', _68 => _68(({ id }) => id === _types.WalletId.WalletConnect)]);
2326
- if (!wcAdapter) {
2327
- sentryLogger.error("WalletConnect adapter not found");
2328
- throw new Error("WalletConnect adapter not found");
2329
- }
2330
- return await connectWalletConnectModal({ adapter: wcAdapter, onConnect, setSuccess: setQrSuccess });
2331
- }
2332
- if (wallet.isInstalled()) return await connectInstalledWallet({ adapter: wallet, onConnect, setSuccess });
2333
- if (hasDeepLink) {
2334
- return await connectWithMobileDeepLink({ adapter: wallet, displayedWallets, onConnect, setSuccess });
2335
- }
2336
- return await redirectToDownloadPage();
2337
- }
2338
- } catch (err) {
2339
- setError(true);
2340
- setErrorCode(_nullishCoalesce(_optionalChain([err, 'optionalAccess', _69 => _69.code]), () => ( null)));
2341
- if (isConfigError(err)) {
2342
- setConfigError(true);
2343
- }
2344
- }
2345
- };
2346
- const retryConnection = () => {
2347
- if (selectedWallet) connectWallet(selectedWallet);
2348
- };
2349
- const openWalletConnectModal = async () => {
2350
- const wcAdapter = _optionalChain([displayedWallets, 'optionalAccess', _70 => _70.find, 'call', _71 => _71(({ id }) => id === _types.WalletId.WalletConnect)]);
2351
- if (!wcAdapter) {
2352
- sentryLogger.error("WalletConnect adapter not found");
2353
- return;
2354
- }
2355
- try {
2356
- await connectWalletConnectModal({ adapter: wcAdapter, onConnect, setSuccess: setQrSuccess });
2357
- } catch (e4) {
2358
- }
2359
- };
2360
- const goBackToHome = () => {
2361
- navigateTo(PAGE_IDS.SELECT_WALLET);
2362
- setSelectedWallet(null);
2363
- setError(false);
2364
- setErrorCode(null);
2365
- setConfigError(false);
2366
- setSuccess(false);
2367
- setQrSuccess(false);
2368
- };
2369
- const contextValue = {
2370
- error,
2371
- errorCode,
2372
- configError,
2373
- success,
2374
- qrSuccess,
2375
- selectedWallet,
2376
- displayedWallets,
2377
- goBackToHome,
2378
- connectWallet,
2379
- openWalletConnectModal,
2380
- retryConnection,
2381
- setSelectedWallet,
2382
- setSuccess,
2383
- setQrSuccess
2384
- };
2385
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConnectModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
2386
- EmailAuthProvider,
2387
- {
2388
- onConnect,
2389
- navigateTo,
2390
- displayedWallets,
2391
- setSelectedWallet,
2392
- children
2393
- }
2394
- ) });
2395
- };
2396
-
2397
- // src/components/ConnectUIProviders.tsx
2398
-
2399
- var ConnectUIProviders = ({ children, onConnect, displayedWallets }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NavigationProvider, { initialPage: PAGE_IDS.SELECT_WALLET, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ConnectModalProvider, { onConnect, displayedWallets, children }) });
2400
-
2401
- // src/components/ConnectModal/ConnectPages.tsx
2402
- var ConnectPages = () => {
2403
- const { currentPage } = useNavigation();
2404
- return PAGE_COMPONENTS[currentPage] || PAGE_COMPONENTS[PAGE_IDS.SELECT_WALLET];
2405
- };
2406
-
2407
- // src/styles/bundledStyles.ts
2408
- var bundledStyles = "/* ui/globals.css */\n/* ============================================\n AURUM SDK - DESIGN TOKEN SYSTEM\n ============================================\n\n Google Fonts:\n - Noto Sans: 400, 500, 600, 700\n ============================================ */\n\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n\n/* ============================================\n External variables (injected by createShadowRoot.ts):\n - --aurum-primary-color: Brand color from dapp\n - --aurum-border-radius-*: Radius scale tokens\n - --aurum-modal-z-index: Modal z-index\n - --aurum-font-family: Font family from dapp\n ============================================ */\n\n/* Base reset styles for Shadow DOM */\n:host {\n all: initial;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Ensure form elements inherit font from parent */\ninput,\nbutton,\ntextarea,\nselect {\n font-family: inherit;\n}\n\n.aurum-sdk {\n /* ==========================================\n TYPOGRAPHY\n ========================================== */\n font-family: var(--aurum-font-family);\n font-size: 1rem;\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n /* Font weights */\n --font-normal: 400;\n --font-medium: 500;\n --font-semibold: 600;\n --font-bold: 700;\n\n /* ==========================================\n TRANSITIONS\n ========================================== */\n --duration-fast: 100ms;\n --duration-normal: 200ms;\n --duration-slow: 300ms;\n --ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n --ease-in: cubic-bezier(0.4, 0, 1, 1);\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n\n /* ==========================================\n LIGHT THEME COLORS (Default)\n ========================================== */\n\n /* Foreground / Text */\n --color-foreground: #0c0c0c;\n --color-foreground-muted: #787878;\n --color-foreground-subtle: #979797;\n\n /* Card surfaces */\n --color-card: #ffffff;\n\n /* Borders */\n --color-border: #d9d9d9;\n --color-border-muted: #c0c0c0;\n --color-border-focus: var(--aurum-primary-color);\n\n /* Brand / Primary (from integrator) */\n --color-primary: var(--aurum-primary-color);\n --color-primary-foreground: #ffffff;\n --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #000);\n --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 15%, transparent);\n\n /* Interactive elements */\n --color-accent: #f1f1f1;\n --color-accent-foreground: #0d0d0d;\n --color-accent-hover: #e6e6e6;\n\n /* Semantic colors */\n --color-success: #22c55e;\n --color-error: #ef4444;\n\n /* Overlay / Modal */\n --color-overlay: rgb(0 0 0 / 0.5);\n\n /* Ring (focus indicator) */\n --color-ring: var(--aurum-primary-color);\n --ring-offset: 0.125rem;\n\n /* Shadows */\n --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n}\n\n/* ==========================================\n DARK THEME COLORS\n ========================================== */\n\n.aurum-sdk[data-theme='dark'] {\n /* Foreground / Text */\n --color-foreground: #fafafa;\n --color-foreground-muted: #a9a9a9;\n --color-foreground-subtle: #777777;\n\n /* Card surfaces */\n --color-card: #151515;\n\n /* Borders */\n --color-border: #282828;\n --color-border-muted: #424242;\n --color-border-focus: var(--aurum-primary-color);\n\n /* Brand / Primary (from integrator) */\n --color-primary: var(--aurum-primary-color);\n --color-primary-foreground: #0a0a0a;\n --color-primary-hover: color-mix(in srgb, var(--aurum-primary-color) 85%, #fff);\n --color-primary-muted: color-mix(in srgb, var(--aurum-primary-color) 20%, transparent);\n\n /* Interactive elements */\n --color-accent: #272727;\n --color-accent-foreground: #fafafa;\n --color-accent-hover: #404040;\n\n /* Semantic colors */\n --color-success: #22c55e;\n --color-error: #ef4444;\n\n /* Overlay / Modal */\n --color-overlay: rgb(0 0 0 / 0.7);\n\n /* Ring (focus indicator) */\n --color-ring: var(--aurum-primary-color);\n --ring-offset: 0.125rem;\n\n /* Shadows */\n --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);\n}\n\n\n/* components/ConnectModal/AdditionalWalletsIcon.css */\n.additional-wallets-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.additional-wallets-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-template-rows: 1fr 1fr;\n gap: 0.125rem;\n align-items: center;\n justify-items: center;\n}\n\n.additional-wallets-grid-item {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.additional-wallets-placeholder {\n background-color: var(--aurum-color-bg-tertiary);\n border-radius: var(--aurum-border-radius-xs);\n opacity: 0.4;\n}\n\n.circular-icon-wrapper {\n border-radius: 50%;\n overflow: hidden;\n border: 2px solid var(--aurum-color-bg-secondary);\n}\n\n.circular-icon-wrapper--front {\n z-index: 2;\n}\n\n.circular-icon-wrapper--back {\n margin-left: -0.5rem;\n z-index: 1;\n}\n\n\n/* components/ConnectModal/ConnectionStatus/ConnectionStatus.css */\n@keyframes shake {\n 0%,\n 100% {\n transform: translateX(0);\n }\n 20%,\n 60% {\n transform: translateX(-0.125rem);\n }\n 40%,\n 80% {\n transform: translateX(0.125rem);\n }\n}\n\n@keyframes opacity-pulse {\n 0%,\n 100% {\n opacity: 0.4;\n }\n 50% {\n opacity: 1;\n }\n}\n\n@keyframes scale-in {\n from {\n transform: scale(0.75);\n }\n to {\n transform: scale(1);\n }\n}\n\n.wallet-icon-shake {\n /* Duration synced with ANIMATION_DURATION.SHAKE in constants/theme.ts */\n animation: shake var(--duration-slow) var(--ease-default);\n}\n\n.ellipses-loading,\n.ellipses-success,\n.status-icon-with-dots {\n display: flex;\n gap: 0.25rem;\n align-items: center;\n justify-content: center;\n width: 100%;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot,\n.status-icon-with-dots .icon-center {\n font-size: 3rem;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 0.9375rem;\n height: 3rem;\n margin: 0;\n padding: 0;\n flex-shrink: 0;\n}\n\n.ellipses-loading span,\n.ellipses-success span,\n.status-icon-with-dots .dot {\n transform: translateY(-0.28125rem);\n}\n\n.status-icon-with-dots .icon-center {\n transform: translateY(-0.2rem);\n}\n\n.ellipses-loading span {\n color: var(--color-foreground-subtle);\n opacity: 0.4;\n animation: opacity-pulse 1.5s var(--ease-default) infinite;\n will-change: opacity;\n}\n\n.ellipses-loading span:nth-child(2) {\n animation-delay: 0.2s;\n}\n.ellipses-loading span:nth-child(3) {\n animation-delay: 0.4s;\n}\n.ellipses-loading span:nth-child(4) {\n animation-delay: 0.6s;\n}\n.ellipses-loading span:nth-child(5) {\n animation-delay: 0.8s;\n}\n\n.ellipses-success span,\n.status-icon-with-dots.success .dot {\n color: var(--aurum-primary-color);\n}\n\n.status-icon-with-dots.error .dot {\n color: var(--color-error);\n}\n\n.status-button {\n display: flex;\n align-items: flex-start;\n justify-content: center;\n width: 100%;\n}\n\n.success-icon-large {\n animation: scale-in var(--duration-fast) var(--ease-out);\n}\n\n/* Logo containers for visual balance */\n.brand-logo-container,\n.wallet-logo-with-retry {\n position: relative;\n display: inline-block;\n}\n\n/* Always reserve space on both sides to prevent layout shift when retry button appears/disappears */\n.brand-logo-container {\n margin-left: 0.375rem; /* Matches retry button's right: -0.375rem */\n}\n\n.wallet-logo-with-retry {\n margin-right: 0.375rem; /* Reserve space for retry button */\n}\n\n.retry-icon-overlay.retry-icon-overlay {\n position: absolute;\n bottom: -0.125rem;\n right: -0.375rem;\n width: 1.625rem;\n height: 1.625rem;\n min-width: 1.625rem;\n min-height: 1.625rem;\n border-radius: 50%;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n\n/* components/ConnectModal/EmailAuth.css */\n.email-auth-input {\n width: 100%;\n outline: none;\n font-family: inherit;\n font-size: 1rem;\n line-height: 1.75rem;\n box-sizing: border-box;\n padding: 0.75rem 3rem 0.75rem 3rem;\n color: var(--color-foreground);\n transition:\n outline 0.2s ease,\n border-color 0.2s ease;\n background-color: var(--color-card);\n border-width: 1px;\n border-style: solid;\n border-color: var(--color-border);\n border-radius: var(--aurum-border-radius-md);\n}\n\n.email-auth-input:hover:not(:focus):not(.email-auth-input--error) {\n border-color: var(--color-border-muted);\n}\n\n.email-auth-input:focus {\n outline: 2px solid var(--color-ring);\n outline-offset: var(--ring-offset);\n}\n\n.email-auth-input--error {\n outline: 2px solid var(--color-error);\n outline-offset: var(--ring-offset);\n}\n\n.email-auth-submit-button.aurum-button {\n top: 50%;\n right: 0.75rem;\n height: auto;\n padding: 0.5rem;\n min-width: auto;\n position: absolute;\n transform: translateY(-50%);\n border-radius: var(--aurum-border-radius-sm);\n}\n\n.email-auth-icon {\n top: 50%;\n left: 1rem;\n position: absolute;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n\n\n/* components/ConnectModal/WalletGrid.css */\n.aurum-wallet-grid {\n display: grid;\n gap: 10px;\n width: 100%;\n}\n\n\n/* components/ModalHeader/ModalHeader.css */\n.modal-header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n padding: 1rem;\n background-color: var(--color-card);\n border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n z-index: 1;\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n}\n\n.modal-header > div {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.modal-header-left {\n justify-content: flex-start;\n min-width: 2.25rem;\n height: 2.25rem;\n}\n\n.modal-header-center {\n justify-content: center;\n max-width: 12.5rem;\n text-align: center;\n line-height: 1.2;\n overflow-wrap: break-word;\n}\n\n.modal-header-right {\n justify-content: flex-end;\n min-width: 2.25rem;\n height: 2.25rem;\n}\n\n\n/* components/PoweredBy/PoweredBy.css */\n.powered-by-container {\n position: absolute;\n bottom: 1rem;\n left: 0;\n right: 0;\n width: 100%;\n}\n\n\n/* components/QRCodeDisplay/QRCodeDisplay.css */\n@keyframes qr-shimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n.qr-container-shimmer {\n position: relative;\n overflow: hidden; /* Keep for shimmer animation */\n}\n\n.qr-container-shimmer::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n color-mix(in srgb, var(--color-foreground) 10%, transparent) 50%,\n transparent 100%\n );\n animation: qr-shimmer 2s infinite;\n pointer-events: none;\n z-index: 1;\n}\n\n.qr-container {\n border-radius: var(--aurum-border-radius-md);\n border: 1px solid var(--color-border);\n padding: 0.5rem;\n box-sizing: content-box;\n transition: border-color var(--duration-slow) var(--ease-default);\n}\n\n.qr-subtitle {\n max-width: 15rem;\n}\n\n\n/* components/QRCodeDisplay/QRCodeSkeleton.css */\n.qr-skeleton-container {\n width: 100%;\n position: relative;\n}\n\n.qr-skeleton-svg {\n display: block;\n position: relative;\n z-index: 2;\n border-radius: var(--aurum-border-radius-sm);\n}\n\n.qr-skeleton-dot {\n opacity: 0.7;\n}\n\n.qr-skeleton-eye {\n opacity: 0.7;\n}\n\n\n/* components/SpinnerWithIcon/SpinnerWithIcon.css */\n.spinner-with-icon {\n transition: all var(--duration-normal) var(--ease-default);\n}\n\n.spinner-with-icon svg {\n transition: color var(--duration-normal) var(--ease-default);\n}\n\n\n/* components/widgets/widgets.css */\n/* Widget-specific styles that match modal-content */\n\n.widget-provider {\n position: relative;\n width: 23.75rem;\n min-width: 17rem;\n margin: 0 auto;\n padding: 1.25rem 1.5rem;\n background-color: var(--color-card);\n border-radius: var(--aurum-border-radius-lg);\n border: 1px solid var(--color-border-muted);\n box-sizing: border-box;\n color: var(--color-card-foreground);\n box-shadow: var(--shadow);\n outline: none;\n overflow-x: auto;\n}\n\n.widget-provider .modal-header {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n}\n\n@media (max-width: 30.25rem) {\n .widget-provider {\n width: 100%;\n max-width: 100%;\n border-radius: var(--aurum-border-radius-md);\n display: flex;\n flex-direction: column;\n }\n\n /* Ensure page wrapper fills width in flex container on mobile */\n /* .widget-pages {\n width: 100%;\n } */\n}\n\n\n/* ui/Badge/Badge.css */\n.aurum-badge-recent {\n padding: 0.25rem 0.5rem;\n border-radius: var(--aurum-border-radius-xs);\n\n font-size: 0.65rem;\n line-height: 1;\n letter-spacing: 0.07em;\n text-transform: uppercase;\n\n color: var(--color-foreground-muted);\n}\n\n\n/* ui/Button/Button.css */\n.aurum-button {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n font-weight: var(--font-semibold);\n cursor: pointer;\n transition:\n background-color var(--duration-normal) var(--ease-default),\n color var(--duration-normal) var(--ease-default),\n transform var(--duration-fast) var(--ease-default),\n box-shadow var(--duration-normal) var(--ease-default);\n text-decoration: none;\n box-sizing: border-box;\n position: relative;\n outline: none;\n font-family: inherit;\n}\n\n.aurum-button:focus-visible {\n outline: 2px solid var(--color-ring);\n outline-offset: var(--ring-offset);\n}\n\n.aurum-button--xs {\n padding: 0.25rem 0.5rem;\n font-size: 0.75rem;\n gap: 0.25rem;\n border-radius: var(--aurum-border-radius-xs);\n}\n\n.aurum-button--sm {\n padding: 0.5rem 0.75rem;\n font-size: 0.875rem;\n gap: 0.25rem;\n border-radius: calc(var(--aurum-border-radius-sm) - 2px);\n}\n\n.aurum-button--md {\n padding: 0.75rem 1rem;\n font-size: 0.9rem;\n gap: 0.5rem;\n border-radius: calc(var(--aurum-border-radius-md) - 2px);\n}\n\n.aurum-button--lg {\n padding: 1rem 1.5rem;\n font-size: 1rem;\n gap: 0.75rem;\n border-radius: var(--aurum-border-radius-md);\n}\n\n.aurum-button--full-width {\n width: 100%;\n}\n\n.aurum-button--primary {\n background-color: var(--color-primary);\n color: var(--color-primary-foreground);\n}\n\n.aurum-button--primary:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.aurum-button--secondary {\n background-color: var(--color-accent);\n color: var(--color-accent-foreground);\n}\n\n.aurum-button--secondary:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.aurum-button--tertiary {\n background: transparent;\n color: var(--color-foreground);\n border: 1px solid var(--color-border);\n}\n\n.aurum-button--tertiary:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.aurum-button--text {\n background: transparent;\n color: var(--color-primary);\n padding: 0.25rem;\n}\n\n.aurum-button--text:not(.aurum-button--full-width) {\n width: fit-content;\n}\n\n.aurum-button--text:active:not(:disabled) {\n transform: scale(0.98);\n}\n\n.aurum-button--close {\n background: transparent;\n color: var(--color-foreground-muted);\n border: none;\n padding: 0.5rem;\n border-radius: var(--aurum-border-radius-md);\n font-size: 1.25rem;\n line-height: 1;\n}\n\n.aurum-button--close:active:not(:disabled) {\n transform: scale(0.95);\n}\n\n/* Hover styles only for devices with hover capability (not touch) */\n@media (hover: hover) {\n .aurum-button--primary:hover:not(:disabled) {\n background-color: var(--color-primary-hover);\n }\n\n .aurum-button--secondary:hover:not(:disabled) {\n background-color: var(--color-accent-hover);\n }\n\n .aurum-button--tertiary:hover:not(:disabled) {\n background-color: var(--color-accent);\n border-color: var(--color-border-muted);\n }\n\n .aurum-button--text:hover:not(:disabled) {\n opacity: 0.7;\n }\n\n .aurum-button--close:hover:not(:disabled) {\n background-color: var(--color-accent);\n color: var(--color-foreground);\n }\n}\n\n.aurum-button--disabled,\n.aurum-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.aurum-button--loading {\n pointer-events: none;\n}\n\n\n/* ui/Divider/Divider.css */\n.divider {\n display: flex;\n align-items: center;\n width: 100%;\n}\n\n.divider-line {\n flex: 1;\n height: 1px;\n background-color: var(--color-border);\n}\n\n.divider-text {\n padding: 0 1rem;\n color: var(--color-foreground-subtle);\n font-size: 0.875rem;\n font-weight: var(--font-medium);\n}\n\n\n/* ui/Modal/Modal.css */\n.modal-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: var(--aurum-modal-z-index);\n background-color: var(--color-overlay);\n opacity: 0;\n}\n\n.modal-overlay.modal-open {\n opacity: 1;\n transition: opacity 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting {\n opacity: 0;\n transition: opacity 150ms ease-in;\n}\n\n.modal-content {\n position: relative;\n width: 23.75rem;\n min-width: 17rem;\n padding: 1.25rem 1.5rem;\n color: var(--color-card-foreground);\n background-color: var(--color-card);\n border-radius: var(--aurum-border-radius-lg);\n box-shadow: var(--shadow);\n border: 1px solid var(--color-border-muted);\n outline: none;\n opacity: 0;\n transform: scale(0.95);\n}\n\n.modal-overlay.modal-open .modal-content {\n opacity: 1;\n transform: scale(1);\n transition:\n opacity 150ms ease-out,\n transform 150ms ease-out;\n}\n\n.modal-overlay.modal-exiting .modal-content {\n opacity: 0;\n transform: scale(0.95);\n transition:\n opacity 150ms ease-in,\n transform 150ms ease-in;\n}\n\n.modal-page-container {\n position: relative;\n width: 100%;\n overflow-x: visible;\n overflow-y: auto;\n scrollbar-width: none;\n -ms-overflow-style: none;\n}\n\n.modal-page-container::-webkit-scrollbar {\n display: none;\n}\n\n.modal-page {\n position: relative;\n width: 100%;\n box-sizing: border-box;\n opacity: 0;\n transition: opacity 0s;\n}\n\n.modal-page.active {\n opacity: 1;\n transition: opacity var(--duration-slow) var(--ease-out);\n}\n\n/* Mobile drawer layout */\n@media (max-width: 30.25rem) {\n .modal-overlay {\n align-items: flex-end;\n justify-content: center;\n opacity: 1;\n transition: none;\n }\n\n .modal-overlay.modal-open {\n transition: none;\n }\n\n .modal-overlay.modal-exiting {\n opacity: 1;\n background-color: transparent;\n transition: none;\n }\n\n .modal-content {\n width: 100%;\n max-height: 82vh;\n max-height: 82dvh;\n min-height: 35vh;\n min-height: 35dvh;\n padding: 1rem;\n border-radius: var(--aurum-border-radius-lg) var(--aurum-border-radius-lg) 0 0;\n border-bottom: none;\n display: flex;\n flex-direction: column;\n height: auto;\n opacity: 1;\n transform: translateY(100%);\n }\n\n .modal-overlay.modal-open .modal-content {\n opacity: 1;\n transform: translateY(0);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .modal-overlay.modal-exiting .modal-content {\n opacity: 1;\n transform: translateY(100%);\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .modal-page-container {\n flex: 0 1 auto;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n }\n\n .modal-page {\n flex: 0 1 auto;\n display: flex;\n flex-direction: column;\n }\n}\n\n\n/* ui/Spinner/Spinner.css */\n.spinner {\n flex-shrink: 0;\n animation: spinner-rotate 1s linear infinite;\n}\n\n@keyframes spinner-rotate {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n\n/* ui/Text/Text.css */\n.aurum-text {\n margin: 0;\n padding: 0;\n font-family: inherit;\n line-height: 1.5;\n}\n\n.aurum-text--primary {\n color: var(--color-foreground);\n}\n\n.aurum-text--secondary {\n color: var(--color-foreground-muted);\n}\n\n.aurum-text--tertiary {\n color: var(--color-foreground-subtle);\n}\n\n.aurum-text--error {\n color: var(--color-error);\n}\n\n.aurum-text--brand {\n color: var(--color-primary);\n}\n\n.aurum-text--success {\n color: var(--color-success);\n}\n\n.aurum-text--xs {\n font-size: 0.75rem;\n line-height: 1.4;\n}\n\n.aurum-text--sm {\n font-size: 0.875rem;\n line-height: 1.45;\n}\n\n.aurum-text--md {\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.aurum-text--lg {\n font-size: 1.125rem;\n line-height: 1.5;\n}\n\n.aurum-text--normal {\n font-weight: var(--font-normal);\n}\n\n.aurum-text--semibold {\n font-weight: var(--font-semibold);\n}\n\n.aurum-text--bold {\n font-weight: var(--font-bold);\n}\n\n.aurum-text--align-left {\n text-align: left;\n}\n\n.aurum-text--align-center {\n text-align: center;\n}\n\n.aurum-text--align-right {\n text-align: right;\n}\n\n\n";
2409
-
2410
- // src/utils/generateBrandStyles.ts
2411
- function generateBrandCssVariables(brandConfig) {
2412
- const r = getBorderRadiusScale(brandConfig.borderRadius);
2413
- const fontFamily = brandConfig.font === DEFAULT_FONT ? brandConfig.font : `${brandConfig.font}, ${DEFAULT_FONT}`;
2414
- return `
2415
- .aurum-sdk {
2416
- --aurum-primary-color: ${brandConfig.primaryColor};
2417
- --aurum-border-radius-xs: ${r.xs}px;
2418
- --aurum-border-radius-sm: ${r.sm}px;
2419
- --aurum-border-radius-md: ${r.md}px;
2420
- --aurum-border-radius-lg: ${r.lg}px;
2421
- --aurum-border-radius-xl: ${r.xl}px;
2422
- --aurum-border-radius: ${r.md}px;
2423
- --aurum-modal-z-index: ${brandConfig.modalZIndex};
2424
- --aurum-font-family: ${fontFamily};
2425
- }
2426
- `;
2427
- }
2428
- function generateCompleteStyles(brandConfig) {
2429
- return `${bundledStyles}
2430
- ${generateBrandCssVariables(brandConfig)}`;
2431
- }
2432
-
2433
-
2434
-
2435
-
2436
-
2437
-
2438
-
2439
-
2440
-
2441
-
2442
-
2443
-
2444
-
2445
-
2446
-
2447
-
2448
-
2449
-
2450
-
2451
-
2452
-
2453
-
2454
- exports.useAurumStore = useAurumStore; exports.waitForStoreHydration = waitForStoreHydration; exports.useWidgetContext = useWidgetContext; exports.WidgetProvider = WidgetProvider; exports.DEFAULT_THEME = DEFAULT_THEME; exports.getDefaultThemeConfig = getDefaultThemeConfig; exports.POWERED_BY_SPACER_REM = POWERED_BY_SPACER_REM; exports.PageTransitionContainer = PageTransitionContainer; exports.PoweredBy = PoweredBy; exports.Modal = Modal; exports.Spacer = Spacer; exports.ThemeContainer = ThemeContainer; exports.useNavigation = useNavigation; exports.sortWallets = sortWallets; exports.initSentry = initSentry; exports.sentryLogger = sentryLogger; exports.createConfigError = createConfigError; exports.ConnectUIProviders = ConnectUIProviders; exports.ConnectPages = ConnectPages; exports.generateCompleteStyles = generateCompleteStyles;
2455
- //# sourceMappingURL=chunk-JXTTDJRM.js.map