@ab-org/predicate-market-sdk 2.1.2 → 2.2.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/README.md +1 -1
  2. package/dist/{autoReconnect-IFPVI2XU.js → autoReconnect-UEPGLSA7.js} +12 -3
  3. package/dist/{chunk-LOJTP47I.js → chunk-3AR6ZOML.js} +1 -1
  4. package/dist/{chunk-JFRRJXOJ.js → chunk-55FTUSW7.js} +48 -2
  5. package/dist/{chunk-F2UPP3YC.js → chunk-6MMOYCWR.js} +1 -1
  6. package/dist/{chunk-TPMI3XWV.js → chunk-AAFQWHHY.js} +1 -1
  7. package/dist/{chunk-VKONTJQE.js → chunk-FIDON2BY.js} +3 -3
  8. package/dist/chunk-FMFRUZS3.js +3770 -0
  9. package/dist/{chunk-SHLNBZBY.js → chunk-ITLN6GHC.js} +5 -0
  10. package/dist/core.js +4 -4
  11. package/dist/index.js +7 -7
  12. package/dist/merchant.js +4 -4
  13. package/dist/react.d.ts +4 -1
  14. package/dist/react.js +3 -3
  15. package/package.json +2 -2
  16. package/dist/chunk-KAMUFSZ7.js +0 -3193
package/dist/chunk-FMFRUZS3.js ADDED
@@ -0,0 +1,3770 @@
1
+ import { getExplorerUrl } from './chunk-XB2DFS2W.js';
2
+ import { getChains, registerPlatform, quote, getWithdrawOrder } from './chunk-AAFQWHHY.js';
3
+ import { getEnv } from './chunk-ITLN6GHC.js';
4
+ import { clientIds, stage } from './chunk-6YQEHB6P.js';
5
+ import { getSDKConfig } from './chunk-WHTI52FI.js';
6
+ import { cache_exports } from './chunk-YX56ZGDB.js';
7
+ import { useEffect, useState, useRef, useMemo, useCallback } from 'react';
8
+ import { sessionStore, getSupportedChainFromEvmChainId, createSessionCapabilityPolicy, createChainContext, CUBIST_CAPABILITIES, createDefaultInjectedWalletRegistry, WalletConnector } from '@ab-org/sdk-core';
9
+ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
10
+ import qrcode from 'qrcode-generator';
11
+
12
+ // ../sign_in_sdk/src/ui/theme.ts
13
+ var colors = {
14
+ card: "#121214",
15
+ cardRaised: "#151821",
16
+ border: "rgba(126,135,162,0.2)",
17
+ textPrimary: "#FFFFFF",
18
+ textSecondary: "#737477",
19
+ accent: "#29FF9B",
20
+ danger: "#FF6B6B"};
21
+ var radii = {
22
+ pill: "99px",
23
+ card: "12px"};
24
+ var fonts = {
25
+ family: '"Switzer", "Inter", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
26
+ };
27
+ var GoogleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", children: [
28
+ /* @__PURE__ */ jsx("path", { d: "M20.3 10.73c0-.79-.07-1.54-.19-2.27H10.5v4.51h5.5a4.69 4.69 0 0 1-2.04 3.09v2.57h3.3c1.93-1.78 3.04-4.4 3.04-7.9Z", fill: "#4285F4" }),
29
+ /* @__PURE__ */ jsx("path", { d: "M10.5 21c2.76 0 5.07-.91 6.76-2.47l-3.3-2.57c-.92.61-2.09.97-3.46.97-2.66 0-4.91-1.8-5.71-4.22H1.39v2.65A10.5 10.5 0 0 0 10.5 21Z", fill: "#34A853" }),
30
+ /* @__PURE__ */ jsx("path", { d: "M4.79 12.71A6.3 6.3 0 0 1 4.46 10.5c0-.77.13-1.51.33-2.21V5.64H1.39A10.5 10.5 0 0 0 0 10.5c0 1.7.41 3.3 1.39 4.86l3.4-2.65Z", fill: "#FBBC05" }),
31
+ /* @__PURE__ */ jsx("path", { d: "M10.5 4.07c1.5 0 2.84.51 3.9 1.52l2.92-2.92C15.56 1.02 13.26 0 10.5 0A10.5 10.5 0 0 0 1.39 5.64l3.4 2.65C5.59 5.87 7.84 4.07 10.5 4.07Z", fill: "#EA4335" })
32
+ ] });
33
+ var XIcon = () => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z", fill: "white" }) });
34
+ var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsxs(
35
+ "svg",
36
+ {
37
+ width: "24",
38
+ height: "24",
39
+ viewBox: "0 0 24 24",
40
+ fill: "none",
41
+ style: { transform: expanded ? "rotate(180deg)" : void 0, transition: "transform 0.2s" },
42
+ children: [
43
+ /* @__PURE__ */ jsx("path", { d: "M5 9L9 13L13 9", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
44
+ /* @__PURE__ */ jsx("path", { d: "M11 9L15 13L19 9", stroke: colors.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
45
+ ]
46
+ }
47
+ );
48
+ var SpinnerIcon = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", style: { animation: "spin 1s linear infinite" }, children: [
49
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "8", stroke: "rgba(255,255,255,0.2)", strokeWidth: "2.5" }),
50
+ /* @__PURE__ */ jsx("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: colors.textPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
51
+ /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
52
+ ] });
53
+ var defaultSocialProviders = [
54
+ { id: "google", label: "Continue with Google", icon: /* @__PURE__ */ jsx(GoogleIcon, {}) },
55
+ { id: "x", label: "Continue with X", icon: /* @__PURE__ */ jsx(XIcon, {}) }
56
+ ];
57
+ function resolveWalletItems(wallets, defaultWalletRegistry) {
58
+ const walletMap = new Map(
59
+ defaultWalletRegistry.map((item) => [
60
+ item.id,
61
+ {
62
+ name: item.title,
63
+ installed: item.installed,
64
+ installUrl: item.installUrl
65
+ }
66
+ ])
67
+ );
68
+ if (wallets === void 0) {
69
+ return defaultWalletRegistry.map((item) => ({
70
+ id: item.id,
71
+ name: item.title,
72
+ icon: void 0,
73
+ installed: item.installed,
74
+ installUrl: item.installUrl
75
+ }));
76
+ }
77
+ if (wallets.length === 0) {
78
+ return [];
79
+ }
80
+ return wallets.map((wallet) => {
81
+ const fallback = walletMap.get(wallet.id);
82
+ return {
83
+ ...wallet,
84
+ name: wallet.name ?? fallback?.name ?? wallet.id,
85
+ installed: wallet.installed ?? fallback?.installed,
86
+ installUrl: wallet.installUrl ?? fallback?.installUrl
87
+ };
88
+ });
89
+ }
90
+ function resolveSocialProviders(socialProviders) {
91
+ if (socialProviders === void 0) {
92
+ return defaultSocialProviders;
93
+ }
94
+ if (socialProviders.length === 0) {
95
+ return [];
96
+ }
97
+ const defaultProviderMap = new Map(
98
+ defaultSocialProviders.map((provider) => [provider.id, provider])
99
+ );
100
+ return socialProviders.map((provider) => {
101
+ const fallback = defaultProviderMap.get(provider.id);
102
+ return {
103
+ ...provider,
104
+ label: provider.label ?? fallback?.label ?? provider.id,
105
+ icon: provider.icon ?? fallback?.icon
106
+ };
107
+ });
108
+ }
109
+ var IconFrame = ({
110
+ background,
111
+ children
112
+ }) => /* @__PURE__ */ jsx(
113
+ "div",
114
+ {
115
+ style: {
116
+ width: 48,
117
+ height: 48,
118
+ borderRadius: 12,
119
+ background,
120
+ display: "flex",
121
+ alignItems: "center",
122
+ justifyContent: "center",
123
+ overflow: "hidden"
124
+ },
125
+ children
126
+ }
127
+ );
128
+ var MetaMaskWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#1A0F07", children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", children: [
129
+ /* @__PURE__ */ jsx("path", { d: "M8 6L15 11L12 14L8 6Z", fill: "#E17726" }),
130
+ /* @__PURE__ */ jsx("path", { d: "M24 6L17 11L20 14L24 6Z", fill: "#E27625" }),
131
+ /* @__PURE__ */ jsx("path", { d: "M11 19L15 22V17L11 19Z", fill: "#F6851B" }),
132
+ /* @__PURE__ */ jsx("path", { d: "M21 19L17 22V17L21 19Z", fill: "#F6851B" }),
133
+ /* @__PURE__ */ jsx("path", { d: "M12 14L15 11V17L11 19L12 14Z", fill: "#763D16" }),
134
+ /* @__PURE__ */ jsx("path", { d: "M20 14L17 11V17L21 19L20 14Z", fill: "#763D16" })
135
+ ] }) });
136
+ var OKXWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#FFFFFF", children: /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", children: [
137
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "2", fill: "#050608" }),
138
+ /* @__PURE__ */ jsx("rect", { x: "11", y: "2", width: "8", height: "8", rx: "2", fill: "#050608" }),
139
+ /* @__PURE__ */ jsx("rect", { x: "20", y: "2", width: "8", height: "8", rx: "2", fill: "#050608" }),
140
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "8", height: "8", rx: "2", fill: "#050608" }),
141
+ /* @__PURE__ */ jsx("rect", { x: "20", y: "11", width: "8", height: "8", rx: "2", fill: "#050608" }),
142
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "20", width: "8", height: "8", rx: "2", fill: "#050608" }),
143
+ /* @__PURE__ */ jsx("rect", { x: "11", y: "20", width: "8", height: "8", rx: "2", fill: "#050608" }),
144
+ /* @__PURE__ */ jsx("rect", { x: "20", y: "20", width: "8", height: "8", rx: "2", fill: "#050608" })
145
+ ] }) });
146
+ var CoinbaseWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#0052FF", children: /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", children: [
147
+ /* @__PURE__ */ jsx("circle", { cx: "15", cy: "15", r: "10", stroke: "white", strokeWidth: "4" }),
148
+ /* @__PURE__ */ jsx("rect", { x: "9", y: "13", width: "12", height: "4", rx: "2", fill: "white" })
149
+ ] }) });
150
+ var TrustWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#3375FF", children: /* @__PURE__ */ jsxs("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", children: [
151
+ /* @__PURE__ */ jsx("path", { d: "M14 4L21 6.6V12.8C21 17.1 18.1 20.9 14 22.4C9.9 20.9 7 17.1 7 12.8V6.6L14 4Z", fill: "white" }),
152
+ /* @__PURE__ */ jsx("path", { d: "M14 8L17 9.1V12.3C17 14.7 15.7 16.8 14 17.6C12.3 16.8 11 14.7 11 12.3V9.1L14 8Z", fill: "#3375FF" })
153
+ ] }) });
154
+ var PhantomWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "linear-gradient(135deg, #6C47FF 0%, #9B6BFF 100%)", children: /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", children: [
155
+ /* @__PURE__ */ jsx("path", { d: "M8 18.5C8 14.4 11.2 11 15.3 11H20.4C21.8 11 23 12.2 23 13.6C23 15 21.8 16.2 20.4 16.2H14.7", stroke: "white", strokeWidth: "3", strokeLinecap: "round" }),
156
+ /* @__PURE__ */ jsx("path", { d: "M10.5 14H19.5", stroke: "white", strokeWidth: "3", strokeLinecap: "round" }),
157
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "20", r: "1.4", fill: "white" }),
158
+ /* @__PURE__ */ jsx("circle", { cx: "18", cy: "20", r: "1.4", fill: "white" })
159
+ ] }) });
160
+ var RabbyWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#EBF2FF", children: /* @__PURE__ */ jsxs("svg", { width: "30", height: "30", viewBox: "0 0 30 30", fill: "none", children: [
161
+ /* @__PURE__ */ jsx("path", { d: "M11 7L13.5 13", stroke: "#7084FF", strokeWidth: "3", strokeLinecap: "round" }),
162
+ /* @__PURE__ */ jsx("path", { d: "M19 7L16.5 13", stroke: "#7084FF", strokeWidth: "3", strokeLinecap: "round" }),
163
+ /* @__PURE__ */ jsx("rect", { x: "8", y: "12", width: "14", height: "11", rx: "6", fill: "#7084FF" }),
164
+ /* @__PURE__ */ jsx("circle", { cx: "13", cy: "17", r: "1.4", fill: "white" }),
165
+ /* @__PURE__ */ jsx("circle", { cx: "17", cy: "17", r: "1.4", fill: "white" }),
166
+ /* @__PURE__ */ jsx("path", { d: "M13 20C13.6 20.4 14.3 20.6 15 20.6C15.7 20.6 16.4 20.4 17 20", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" })
167
+ ] }) });
168
+ var RainbowWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "linear-gradient(180deg, #174299 0%, #001E59 100%)", children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "0 0 120 120", fill: "none", style: { overflow: "hidden", borderRadius: 12 }, children: [
169
+ /* @__PURE__ */ jsxs("defs", { children: [
170
+ /* @__PURE__ */ jsxs("radialGradient", { id: "rainbow_r1", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(26 94) rotate(-90) scale(74)", children: [
171
+ /* @__PURE__ */ jsx("stop", { offset: "0.770277", stopColor: "#FF4000" }),
172
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8754C9" })
173
+ ] }),
174
+ /* @__PURE__ */ jsxs("linearGradient", { id: "rainbow_l2", x1: "83", y1: "97", x2: "100", y2: "97", gradientUnits: "userSpaceOnUse", children: [
175
+ /* @__PURE__ */ jsx("stop", { stopColor: "#FF4000" }),
176
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#8754C9" })
177
+ ] }),
178
+ /* @__PURE__ */ jsxs("linearGradient", { id: "rainbow_l3", x1: "23", y1: "20", x2: "23", y2: "37", gradientUnits: "userSpaceOnUse", children: [
179
+ /* @__PURE__ */ jsx("stop", { stopColor: "#8754C9" }),
180
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF4000" })
181
+ ] }),
182
+ /* @__PURE__ */ jsxs("radialGradient", { id: "rainbow_r4", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(26 94) rotate(-90) scale(58)", children: [
183
+ /* @__PURE__ */ jsx("stop", { offset: "0.723929", stopColor: "#FFF700" }),
184
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF9901" })
185
+ ] }),
186
+ /* @__PURE__ */ jsxs("linearGradient", { id: "rainbow_l5", x1: "68", y1: "97", x2: "84", y2: "97", gradientUnits: "userSpaceOnUse", children: [
187
+ /* @__PURE__ */ jsx("stop", { stopColor: "#FFF700" }),
188
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF9901" })
189
+ ] }),
190
+ /* @__PURE__ */ jsxs("linearGradient", { id: "rainbow_l6", x1: "23", y1: "52", x2: "23", y2: "36", gradientUnits: "userSpaceOnUse", children: [
191
+ /* @__PURE__ */ jsx("stop", { stopColor: "#FFF700" }),
192
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#FF9901" })
193
+ ] }),
194
+ /* @__PURE__ */ jsxs("radialGradient", { id: "rainbow_r7", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(26 94) rotate(-90) scale(42)", children: [
195
+ /* @__PURE__ */ jsx("stop", { offset: "0.59513", stopColor: "#00AAFF" }),
196
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#01DA40" })
197
+ ] }),
198
+ /* @__PURE__ */ jsxs("radialGradient", { id: "rainbow_r8", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(51 97) scale(17 45.3333)", children: [
199
+ /* @__PURE__ */ jsx("stop", { stopColor: "#00AAFF" }),
200
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#01DA40" })
201
+ ] }),
202
+ /* @__PURE__ */ jsxs("radialGradient", { id: "rainbow_r9", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(23 69) rotate(-90) scale(17 322.37)", children: [
203
+ /* @__PURE__ */ jsx("stop", { stopColor: "#00AAFF" }),
204
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#01DA40" })
205
+ ] })
206
+ ] }),
207
+ /* @__PURE__ */ jsx("path", { d: "M20 38H26C56.9279 38 82 63.0721 82 94V100H94C97.3137 100 100 97.3137 100 94C100 53.1309 66.8691 20 26 20C22.6863 20 20 22.6863 20 26V38Z", fill: "url(#rainbow_r1)" }),
208
+ /* @__PURE__ */ jsx("path", { d: "M84 94H100C100 97.3137 97.3137 100 94 100H84V94Z", fill: "url(#rainbow_l2)" }),
209
+ /* @__PURE__ */ jsx("path", { d: "M26 20L26 36H20L20 26C20 22.6863 22.6863 20 26 20Z", fill: "url(#rainbow_l3)" }),
210
+ /* @__PURE__ */ jsx("path", { d: "M20 36H26C58.0325 36 84 61.9675 84 94V100H66V94C66 71.9086 48.0914 54 26 54H20V36Z", fill: "url(#rainbow_r4)" }),
211
+ /* @__PURE__ */ jsx("path", { d: "M68 94H84V100H68V94Z", fill: "url(#rainbow_l5)" }),
212
+ /* @__PURE__ */ jsx("path", { d: "M20 52L20 36L26 36L26 52H20Z", fill: "url(#rainbow_l6)" }),
213
+ /* @__PURE__ */ jsx("path", { d: "M20 62C20 65.3137 22.6863 68 26 68C40.3594 68 52 79.6406 52 94C52 97.3137 54.6863 100 58 100H68V94C68 70.804 49.196 52 26 52H20V62Z", fill: "url(#rainbow_r7)" }),
214
+ /* @__PURE__ */ jsx("path", { d: "M52 94H68V100H58C54.6863 100 52 97.3137 52 94Z", fill: "url(#rainbow_r8)" }),
215
+ /* @__PURE__ */ jsx("path", { d: "M26 68C22.6863 68 20 65.3137 20 62L20 52L26 52L26 68Z", fill: "url(#rainbow_r9)" })
216
+ ] }) });
217
+ var ZerionWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#2962EF", children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M6.073 7c-.48 0-.665.593-.262.841l10.073 6.074a.577.577 0 0 0 .758-.139l4.43-5.814c.3-.404-.004-.962-.525-.962H6.073ZM21.904 21c.48 0 .67-.596.267-.844l-10.075-6.073a.569.569 0 0 0-.751.146l-4.437 5.813c-.301.404.012.958.534.958h14.462Z" }) }) });
218
+ var BraveWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#FFF", children: /* @__PURE__ */ jsxs("svg", { width: "32", height: "32", viewBox: "-100 -100 2970 2970", fill: "none", style: { overflow: "hidden", borderRadius: 12 }, children: [
219
+ /* @__PURE__ */ jsxs("defs", { children: [
220
+ /* @__PURE__ */ jsxs("linearGradient", { id: "brave_a", y1: "51%", y2: "51%", children: [
221
+ /* @__PURE__ */ jsx("stop", { offset: "0.4", stopColor: "#f50" }),
222
+ /* @__PURE__ */ jsx("stop", { offset: "0.6", stopColor: "#ff2000" })
223
+ ] }),
224
+ /* @__PURE__ */ jsxs("linearGradient", { id: "brave_b", x1: "2%", y1: "51%", x2: "51%", y2: "51%", children: [
225
+ /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "#ff452a" }),
226
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#ff2000" })
227
+ ] })
228
+ ] }),
229
+ /* @__PURE__ */ jsx("path", { fill: "url(#brave_a)", d: "m2395 723 60-147-170-176c-92-92-288-38-288-38l-222-252H992L769 363s-196-53-288 37L311 575l60 147-75 218 250 953c52 204 87 283 234 387l457 310c44 27 98 74 147 74s103-47 147-74l457-310c147-104 182-183 234-387l250-953z" }),
230
+ /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M1935 524s287 347 287 420c0 75-36 94-72 133l-215 230c-20 20-63 54-38 113 25 60 60 134 20 210-40 77-110 128-155 120a820 820 0 0 1-190-90c-38-25-160-126-160-165s126-110 150-124c23-16 130-78 132-102s2-30-30-90-88-140-80-192c10-52 100-80 167-105l207-78c16-8 12-15-36-20-48-4-183-22-244-5s-163 43-173 57c-8 14-16 14-7 62l58 315c4 40 12 67-30 77-44 10-117 27-142 27s-99-17-142-27-35-37-30-77c4-40 48-268 57-315 10-48 1-48-7-62-10-14-113-40-174-57-60-17-196 1-244 6-48 4-52 10-36 20l207 77c66 25 158 53 167 105 10 53-47 132-80 192s-32 66-30 90 110 86 132 102c24 15 150 85 150 124s-119 140-159 165a820 820 0 0 1-190 90c-45 8-115-43-156-120-40-76-4-150 20-210 25-60-17-92-38-113l-215-230c-35-37-71-57-71-131s287-420 287-420l273 44c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47zm-215 1328c18 10 7 32-10 44l-254 198c-20 20-52 50-73 50s-52-30-73-50a13200 13200 0 0 0-255-198c-16-12-27-33-10-44l150-80a870 870 0 0 1 188-73c15 0 110 34 187 73l150 80z" }),
231
+ /* @__PURE__ */ jsx("path", { fill: "url(#brave_b)", d: "m1999 363-224-253H992L769 363s-196-53-288 37c0 0 260-23 350 123l276 47c32 0 103-27 168-50 65-20 110-22 110-22s44 0 110 22 136 50 168 50c33 0 275-47 275-47 90-146 350-123 350-123-92-92-288-38-288-38" })
232
+ ] }) });
233
+ var BitgetWalletIcon = () => /* @__PURE__ */ jsx(IconFrame, { background: "#001F29", children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 512 512", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M219.948 95.7022C201.623 95.6929 183.33 95.6835 164.941 95.7116C153.822 95.7116 149.651 109.671 157.921 117.939L283.098 243.117C287.004 246.69 289.441 250.574 289.53 255.693C289.441 260.812 287.004 264.696 283.098 268.269L157.921 393.446C149.651 401.715 153.822 415.674 164.941 415.674C183.33 415.702 201.623 415.693 219.948 415.683C229.122 415.679 238.305 415.674 247.511 415.674C259.555 415.674 266.72 409.24 273.154 402.805L386.047 289.912C395.057 280.902 403.119 268.939 403.009 255.693C403.119 242.447 395.057 230.484 386.047 221.474L273.154 108.58C266.72 102.146 259.555 95.7116 247.511 95.7116C238.305 95.7116 229.122 95.7069 219.948 95.7022Z", fill: "#00F0FF" }) }) });
234
+ var WalletPlaceholder = ({ name }) => /* @__PURE__ */ jsx(
235
+ "div",
236
+ {
237
+ style: {
238
+ width: 48,
239
+ height: 48,
240
+ borderRadius: 10,
241
+ background: colors.cardRaised,
242
+ display: "flex",
243
+ alignItems: "center",
244
+ justifyContent: "center",
245
+ fontSize: 16,
246
+ fontWeight: 600,
247
+ color: colors.textSecondary,
248
+ fontFamily: fonts.family
249
+ },
250
+ children: name.slice(0, 2).toUpperCase()
251
+ }
252
+ );
253
+ var DefaultWalletIcon = ({
254
+ walletId,
255
+ name
256
+ }) => {
257
+ switch (walletId) {
258
+ case "metamask":
259
+ return /* @__PURE__ */ jsx(MetaMaskWalletIcon, {});
260
+ case "okx":
261
+ return /* @__PURE__ */ jsx(OKXWalletIcon, {});
262
+ case "coinbase":
263
+ return /* @__PURE__ */ jsx(CoinbaseWalletIcon, {});
264
+ case "trust":
265
+ return /* @__PURE__ */ jsx(TrustWalletIcon, {});
266
+ case "phantom":
267
+ return /* @__PURE__ */ jsx(PhantomWalletIcon, {});
268
+ case "rabby":
269
+ return /* @__PURE__ */ jsx(RabbyWalletIcon, {});
270
+ case "rainbow":
271
+ return /* @__PURE__ */ jsx(RainbowWalletIcon, {});
272
+ case "zerion":
273
+ return /* @__PURE__ */ jsx(ZerionWalletIcon, {});
274
+ case "brave":
275
+ return /* @__PURE__ */ jsx(BraveWalletIcon, {});
276
+ case "bitget":
277
+ return /* @__PURE__ */ jsx(BitgetWalletIcon, {});
278
+ default:
279
+ return /* @__PURE__ */ jsx(WalletPlaceholder, { name });
280
+ }
281
+ };
282
+ var CloseButton = ({ onClick }) => /* @__PURE__ */ jsx(
283
+ "button",
284
+ {
285
+ className: "absdk-predicate-close-button",
286
+ type: "button",
287
+ onClick,
288
+ "aria-label": "Close",
289
+ style: {
290
+ width: 30,
291
+ height: 30,
292
+ borderRadius: "50%",
293
+ background: colors.card,
294
+ border: "none",
295
+ cursor: "pointer",
296
+ display: "flex",
297
+ alignItems: "center",
298
+ justifyContent: "center",
299
+ padding: 0,
300
+ flexShrink: 0
301
+ },
302
+ children: /* @__PURE__ */ jsx("svg", { className: "absdk-predicate-close-button__icon", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsx(
303
+ "path",
304
+ {
305
+ className: "absdk-predicate-close-button__icon-path",
306
+ d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75",
307
+ stroke: colors.textPrimary,
308
+ strokeWidth: "1.5",
309
+ strokeLinecap: "round"
310
+ }
311
+ ) })
312
+ }
313
+ );
314
+ var MOBILE_BREAKPOINT_PX = 720;
315
+ var MOBILE_MODAL_WIDTH_PX = 375;
316
+ var MOBILE_MODAL_GUTTER_PX = 16;
317
+ function isMobileViewport(width) {
318
+ return width < MOBILE_BREAKPOINT_PX;
319
+ }
320
+ function useIsMobileViewport() {
321
+ const [isMobile, setIsMobile] = useState(
322
+ () => typeof window !== "undefined" ? isMobileViewport(window.innerWidth) : false
323
+ );
324
+ useEffect(() => {
325
+ if (typeof window === "undefined") return;
326
+ const handleResize = () => {
327
+ setIsMobile(isMobileViewport(window.innerWidth));
328
+ };
329
+ handleResize();
330
+ window.addEventListener("resize", handleResize);
331
+ return () => window.removeEventListener("resize", handleResize);
332
+ }, []);
333
+ return isMobile;
334
+ }
335
+ var ModalFrame = ({
336
+ onClose,
337
+ width = 500,
338
+ cardStyle,
339
+ contentStyle,
340
+ children
341
+ }) => {
342
+ const isMobile = useIsMobileViewport();
343
+ return /* @__PURE__ */ jsx(
344
+ "div",
345
+ {
346
+ className: `absdk-predicate-modal-frame ${isMobile ? "absdk-predicate-modal-frame--mobile" : "absdk-predicate-modal-frame--desktop"}`,
347
+ style: {
348
+ display: "flex",
349
+ flexDirection: "column",
350
+ alignItems: "center",
351
+ justifyContent: "center",
352
+ width: "100%",
353
+ maxHeight: isMobile ? "90vh" : void 0
354
+ },
355
+ children: /* @__PURE__ */ jsxs(
356
+ "div",
357
+ {
358
+ className: "absdk-predicate-modal-frame__layout",
359
+ style: {
360
+ display: "flex",
361
+ flexDirection: isMobile ? "column" : "row",
362
+ gap: isMobile ? 10 : 14,
363
+ alignItems: isMobile ? "stretch" : "flex-start",
364
+ width: isMobile ? `min(${MOBILE_MODAL_WIDTH_PX}px, calc(100vw - ${MOBILE_MODAL_GUTTER_PX * 2}px))` : "auto"
365
+ },
366
+ children: [
367
+ onClose ? /* @__PURE__ */ jsx(
368
+ "div",
369
+ {
370
+ className: "absdk-predicate-modal-frame__close",
371
+ style: {
372
+ display: "flex",
373
+ justifyContent: isMobile ? "flex-end" : "flex-start",
374
+ order: isMobile ? -1 : 1,
375
+ paddingTop: isMobile ? 13 : 0,
376
+ paddingRight: isMobile ? 2 : 0
377
+ },
378
+ children: /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
379
+ }
380
+ ) : null,
381
+ /* @__PURE__ */ jsx(
382
+ "div",
383
+ {
384
+ className: "absdk-predicate-modal-frame__card",
385
+ style: {
386
+ width: isMobile ? "100%" : width,
387
+ maxWidth: "100%",
388
+ maxHeight: isMobile ? "90vh" : void 0,
389
+ background: colors.card,
390
+ borderRadius: radii.card,
391
+ overflow: "hidden",
392
+ ...cardStyle
393
+ },
394
+ children: /* @__PURE__ */ jsx(
395
+ "div",
396
+ {
397
+ className: "absdk-predicate-modal-frame__content",
398
+ style: {
399
+ display: "flex",
400
+ flexDirection: "column",
401
+ minHeight: 0,
402
+ maxHeight: isMobile ? "90vh" : void 0,
403
+ overflowY: isMobile ? "auto" : void 0,
404
+ overflowX: "hidden",
405
+ WebkitOverflowScrolling: "touch",
406
+ fontFamily: fonts.family,
407
+ color: colors.textPrimary,
408
+ boxSizing: "border-box",
409
+ ...contentStyle
410
+ },
411
+ children
412
+ }
413
+ )
414
+ }
415
+ )
416
+ ]
417
+ }
418
+ )
419
+ }
420
+ );
421
+ };
422
+ async function loadWalletAccount() {
423
+ return import('./account-F5Z2SMJE.js');
424
+ }
425
+ async function loadOidcAuth() {
426
+ return import('./dist-Q2PDXT2F.js');
427
+ }
428
+ var SignInModalFrame = ({
429
+ id,
430
+ title,
431
+ onClose,
432
+ footer,
433
+ children
434
+ }) => {
435
+ const isMobile = useIsMobileViewport();
436
+ return /* @__PURE__ */ jsx(
437
+ ModalFrame,
438
+ {
439
+ onClose,
440
+ cardStyle: { padding: isMobile ? "24px 16px" : "32px 24px" },
441
+ contentStyle: { alignItems: "center" },
442
+ children: /* @__PURE__ */ jsxs(
443
+ "div",
444
+ {
445
+ style: { width: "100%", display: "flex", flexDirection: "column", gap: isMobile ? 20 : 24, alignItems: "center" },
446
+ id,
447
+ className: `absdk-predicate-signin-modal ${isMobile ? "absdk-predicate-signin-modal--mobile" : "absdk-predicate-signin-modal--desktop"}`,
448
+ children: [
449
+ /* @__PURE__ */ jsx(
450
+ "h2",
451
+ {
452
+ className: "absdk-predicate-signin-modal__title",
453
+ style: { margin: 0, fontSize: isMobile ? 22 : 24, fontWeight: 600, lineHeight: 1.4, textAlign: "center" },
454
+ children: title
455
+ }
456
+ ),
457
+ /* @__PURE__ */ jsx("div", { className: "absdk-predicate-signin-modal__content", style: { width: "100%", display: "flex", flexDirection: "column", gap: 12, alignItems: "center" }, children }),
458
+ footer
459
+ ]
460
+ }
461
+ )
462
+ }
463
+ );
464
+ };
465
+ var SignInWithEmailSection = () => {
466
+ const [email, setEmail] = useState("");
467
+ const [partialOidcToken, setPartialOidcToken] = useState("");
468
+ const [emailCode, setEmailCode] = useState("");
469
+ return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24 }, children: [
470
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: /* @__PURE__ */ jsx("input", { type: "email", placeholder: "Email", value: email, onChange: (e) => setEmail(e.target.value), style: { color: "black" } }) }),
471
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
472
+ /* @__PURE__ */ jsx(
473
+ "input",
474
+ {
475
+ type: "text",
476
+ className: "absdk-predicate-signin-modal__email-code-input",
477
+ style: { color: "black" },
478
+ value: emailCode,
479
+ placeholder: "emailCode",
480
+ onChange: (e) => setEmailCode(e.target.value)
481
+ }
482
+ ),
483
+ " "
484
+ ] }),
485
+ /* @__PURE__ */ jsx("button", { disabled: !email, onClick: async () => {
486
+ const { OidcAuth } = await loadOidcAuth();
487
+ const { loginByEmail } = OidcAuth({
488
+ stage: "dev",
489
+ xClientId: clientIds.x ?? "",
490
+ googleClientId: clientIds.google ?? ""
491
+ });
492
+ const { partialOidcToken: partialOidcToken2 } = await loginByEmail(email);
493
+ setPartialOidcToken(partialOidcToken2);
494
+ }, children: "send code" }),
495
+ /* @__PURE__ */ jsx("button", { disabled: !partialOidcToken || !emailCode, onClick: async () => {
496
+ const oidcToken = `${partialOidcToken}${emailCode}`;
497
+ const { default: WalletAccount2 } = await loadWalletAccount();
498
+ await WalletAccount2.getInstance(oidcToken);
499
+ }, children: "sign in" })
500
+ ] });
501
+ };
502
+ var SignInModalSocialSection = ({
503
+ id,
504
+ socialProviders,
505
+ isBusy,
506
+ loadingProvider,
507
+ onSocialClick
508
+ }) => /* @__PURE__ */ jsxs(
509
+ "div",
510
+ {
511
+ style: { width: "100%", display: "flex", flexDirection: "column", gap: 24 },
512
+ id,
513
+ className: "absdk-predicate-signin-modal__social",
514
+ children: [
515
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: socialProviders.map((provider) => {
516
+ const isLoading = loadingProvider === provider.id;
517
+ return /* @__PURE__ */ jsxs(
518
+ "button",
519
+ {
520
+ id: `absdk-predicate-signin-modal-social-provider-${provider.id}`,
521
+ className: `absdk-predicate-signin-modal__social-button absdk-predicate-signin-modal__social-button--${provider.id}`,
522
+ type: "button",
523
+ disabled: isBusy,
524
+ onClick: () => onSocialClick(provider.id),
525
+ style: {
526
+ width: "100%",
527
+ height: 48,
528
+ borderRadius: radii.pill,
529
+ border: `1px solid ${colors.border}`,
530
+ background: "transparent",
531
+ display: "flex",
532
+ alignItems: "center",
533
+ justifyContent: "center",
534
+ gap: 12,
535
+ cursor: isBusy ? "wait" : "pointer",
536
+ padding: 12,
537
+ boxSizing: "border-box",
538
+ opacity: isLoading ? 0.6 : isBusy ? 0.8 : 1,
539
+ transition: "opacity .15s"
540
+ },
541
+ children: [
542
+ isLoading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : provider.icon,
543
+ /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family }, children: isLoading ? "Signing in..." : provider.label })
544
+ ]
545
+ },
546
+ provider.id
547
+ );
548
+ }) }),
549
+ typeof window !== "undefined" && window.location.href.indexOf("emailSignIn") !== -1 && /* @__PURE__ */ jsx(SignInWithEmailSection, {}),
550
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 20, width: "100%" }, children: [
551
+ /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: colors.border } }),
552
+ /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary, opacity: 0.4, whiteSpace: "nowrap" }, children: "Or connect a wallet" }),
553
+ /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: colors.border } })
554
+ ] })
555
+ ]
556
+ }
557
+ );
558
+ var SignInModalWalletGrid = ({
559
+ wallets,
560
+ isBusy,
561
+ loadingWalletId,
562
+ expanded,
563
+ showExpandToggle,
564
+ onWalletClick,
565
+ onToggleExpanded
566
+ }) => {
567
+ const isMobile = useIsMobileViewport();
568
+ return /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-signin-modal__wallets", style: { width: "100%", display: "flex", flexDirection: "column", gap: 8, alignItems: "center", paddingTop: 12 }, children: [
569
+ /* @__PURE__ */ jsx("div", { className: "absdk-predicate-signin-modal__wallet-grid", style: { width: "100%", display: "flex", flexWrap: "wrap", gap: "14px 0" }, children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
570
+ "button",
571
+ {
572
+ id: `absdk-predicate-signin-modal-wallet-${wallet.id}`,
573
+ className: `absdk-predicate-signin-modal__wallet-button absdk-predicate-signin-modal__wallet-button--${wallet.id}`,
574
+ type: "button",
575
+ disabled: isBusy,
576
+ onClick: () => onWalletClick(wallet.id),
577
+ style: {
578
+ width: isMobile ? "33.3333%" : "25%",
579
+ display: "flex",
580
+ flexDirection: "column",
581
+ alignItems: "center",
582
+ gap: 4,
583
+ background: "transparent",
584
+ border: "none",
585
+ cursor: isBusy ? "wait" : "pointer",
586
+ padding: 0,
587
+ opacity: loadingWalletId === wallet.id ? 0.7 : isBusy ? 0.85 : 1
588
+ },
589
+ children: [
590
+ /* @__PURE__ */ jsx("div", { style: { width: 56, height: 56, display: "flex", alignItems: "center", justifyContent: "center" }, children: loadingWalletId === wallet.id ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : wallet.icon ?? /* @__PURE__ */ jsx(DefaultWalletIcon, { walletId: wallet.id, name: wallet.name }) }),
591
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [
592
+ /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family, textAlign: "center", whiteSpace: "nowrap" }, children: wallet.name }),
593
+ loadingWalletId === wallet.id ? /* @__PURE__ */ jsx("span", { style: { fontSize: 10, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family }, children: "Connecting..." }) : wallet.installed ? /* @__PURE__ */ jsx("span", { style: { fontSize: 10, lineHeight: 1.4, color: colors.accent, fontFamily: fonts.family }, children: "Installed" }) : wallet.installUrl ? /* @__PURE__ */ jsx(
594
+ "a",
595
+ {
596
+ href: wallet.installUrl,
597
+ target: "_blank",
598
+ rel: "noopener noreferrer",
599
+ onClick: (event) => event.stopPropagation(),
600
+ style: { fontSize: 10, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family, textDecoration: "underline" },
601
+ children: "Install"
602
+ }
603
+ ) : null
604
+ ] })
605
+ ]
606
+ },
607
+ wallet.id
608
+ )) }),
609
+ showExpandToggle && /* @__PURE__ */ jsx(
610
+ "button",
611
+ {
612
+ id: "absdk-predicate-signin-modal-expand-button",
613
+ className: "absdk-predicate-signin-modal__expand-button",
614
+ type: "button",
615
+ onClick: onToggleExpanded,
616
+ style: {
617
+ background: "transparent",
618
+ border: "none",
619
+ cursor: "pointer",
620
+ display: "flex",
621
+ alignItems: "center",
622
+ justifyContent: "center",
623
+ padding: 4
624
+ },
625
+ children: /* @__PURE__ */ jsx(ExpandIcon, { expanded })
626
+ }
627
+ )
628
+ ] });
629
+ };
630
+ var SignInModalFooter = ({
631
+ privacyPolicyUrl,
632
+ termsOfUseUrl
633
+ }) => /* @__PURE__ */ jsx("div", { className: "absdk-predicate-signin-modal__footer", style: { padding: "12px 0", display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsxs("p", { style: { margin: 0, fontSize: 14, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family, textAlign: "center" }, children: [
634
+ "By continuing, I agree to the",
635
+ " ",
636
+ /* @__PURE__ */ jsx("a", { href: privacyPolicyUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }),
637
+ " ",
638
+ "and",
639
+ " ",
640
+ /* @__PURE__ */ jsx("a", { href: termsOfUseUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Terms of Use" })
641
+ ] }) });
642
+ var useSignInModalController = ({
643
+ wallets,
644
+ initialVisibleCount,
645
+ onGoogleLogin: _onGoogleLogin,
646
+ onTwitterLogin: _onTwitterLogin,
647
+ onCubeSignerSession: _onCubeSignerSession,
648
+ onWalletConnected,
649
+ onSocialLogin: _onSocialLogin,
650
+ onWalletSelect
651
+ }) => {
652
+ const [expanded, setExpanded] = useState(false);
653
+ const [loadingProvider, setLoadingProvider] = useState(null);
654
+ const [loadingWalletId, setLoadingWalletId] = useState(null);
655
+ const defaultWalletRegistry = useMemo(() => createDefaultInjectedWalletRegistry(), []);
656
+ const defaultWalletConnector = useMemo(
657
+ () => new WalletConnector(defaultWalletRegistry.map((item) => item.provider)),
658
+ [defaultWalletRegistry]
659
+ );
660
+ const resolvedWallets = useMemo(
661
+ () => resolveWalletItems(wallets, defaultWalletRegistry),
662
+ [defaultWalletRegistry, wallets]
663
+ );
664
+ const showExpandToggle = resolvedWallets.length > initialVisibleCount;
665
+ const visibleWallets = expanded ? resolvedWallets : resolvedWallets.slice(0, initialVisibleCount);
666
+ const isBusy = !!loadingProvider || !!loadingWalletId;
667
+ async function loadOidcAuth2() {
668
+ return import('./dist-Q2PDXT2F.js');
669
+ }
670
+ const handleSocialClick = async (providerId) => {
671
+ setLoadingProvider(providerId);
672
+ const cfg = getSDKConfig();
673
+ const { OidcAuth } = await loadOidcAuth2();
674
+ const { loginByX, loginByGoogle } = OidcAuth({
675
+ stage,
676
+ xClientId: cfg.twitterClientId ?? clientIds.x ?? "",
677
+ googleClientId: cfg.googleClientId ?? clientIds.google ?? ""
678
+ });
679
+ if (providerId === "google") {
680
+ try {
681
+ const oidcToken = await loginByGoogle();
682
+ return oidcToken;
683
+ } catch (error) {
684
+ console.error(`[SDK] Google sign-in failed:`, error);
685
+ }
686
+ }
687
+ if (providerId === "x") {
688
+ const oidcToken = await loginByX();
689
+ return oidcToken;
690
+ }
691
+ };
692
+ const clearSocialLoading = () => setLoadingProvider(null);
693
+ const handleWalletClick = async (walletId) => {
694
+ if (isBusy) return;
695
+ const targetWallet = resolvedWallets.find((wallet) => wallet.id === walletId);
696
+ if (!targetWallet) return;
697
+ if (targetWallet.installed === false && targetWallet.installUrl) return;
698
+ setLoadingWalletId(walletId);
699
+ try {
700
+ if (onWalletSelect) {
701
+ await onWalletSelect(walletId);
702
+ return;
703
+ }
704
+ const builtInWallet = defaultWalletRegistry.find((item) => item.id === walletId);
705
+ if (!builtInWallet || !builtInWallet.installed) return;
706
+ const session = await defaultWalletConnector.connect(walletId);
707
+ onWalletConnected?.(session, walletId);
708
+ } catch (err) {
709
+ console.error(`[SDK] Wallet connect failed for ${walletId}:`, err);
710
+ } finally {
711
+ setLoadingWalletId(null);
712
+ }
713
+ };
714
+ return {
715
+ expanded,
716
+ loadingProvider,
717
+ loadingWalletId,
718
+ visibleWallets,
719
+ showExpandToggle,
720
+ isBusy,
721
+ handleSocialClick,
722
+ handleWalletClick,
723
+ clearSocialLoading,
724
+ toggleExpanded: () => setExpanded((value) => !value)
725
+ };
726
+ };
727
+ var variantStyles = {
728
+ success: { bg: "rgba(41, 255, 155, 0.82)", border: "rgba(41, 255, 155, 0.53)", icon: colors.accent },
729
+ error: { bg: "rgba(255, 107, 107, 0.82)", border: "rgba(255, 107, 107, 0.53)", icon: colors.danger },
730
+ info: { bg: "rgba(126, 135, 162, 0.82)", border: "rgba(126, 135, 162, 0.55)", icon: colors.textSecondary }
731
+ };
732
+ var Toast = ({ message, variant = "info", duration, onClose }) => {
733
+ const style = variantStyles[variant];
734
+ useEffect(() => {
735
+ if (duration != null && duration > 0 && onClose) {
736
+ const t = setTimeout(onClose, duration);
737
+ return () => clearTimeout(t);
738
+ }
739
+ }, [duration, onClose]);
740
+ return /* @__PURE__ */ jsx(
741
+ "div",
742
+ {
743
+ className: "absdk-predicate-toast",
744
+ style: {
745
+ position: "fixed",
746
+ top: 0,
747
+ left: 0,
748
+ right: 0,
749
+ display: "flex",
750
+ justifyContent: "center",
751
+ paddingTop: 16,
752
+ zIndex: 1e4,
753
+ pointerEvents: "none"
754
+ },
755
+ children: /* @__PURE__ */ jsxs(
756
+ "div",
757
+ {
758
+ className: `absdk-predicate-toast__content absdk-predicate-toast__content--${variant}`,
759
+ role: "alert",
760
+ style: {
761
+ pointerEvents: "auto",
762
+ display: "flex",
763
+ alignItems: "center",
764
+ gap: 10,
765
+ padding: "12px 16px",
766
+ borderRadius: radii.card,
767
+ background: style.bg,
768
+ border: `1px solid ${style.border}`,
769
+ color: colors.textPrimary,
770
+ fontSize: 14,
771
+ lineHeight: 1.4,
772
+ maxWidth: 360,
773
+ boxSizing: "border-box"
774
+ },
775
+ children: [
776
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-toast__message", style: { flex: 1 }, children: message }),
777
+ onClose && /* @__PURE__ */ jsx(
778
+ "button",
779
+ {
780
+ className: "absdk-predicate-toast__dismiss",
781
+ type: "button",
782
+ "aria-label": "Dismiss",
783
+ onClick: onClose,
784
+ style: {
785
+ padding: 4,
786
+ margin: -4,
787
+ border: "none",
788
+ background: "transparent",
789
+ color: colors.textSecondary,
790
+ cursor: "pointer",
791
+ borderRadius: 4,
792
+ lineHeight: 1
793
+ },
794
+ children: /* @__PURE__ */ jsx("svg", { className: "absdk-predicate-toast__dismiss-icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
795
+ "path",
796
+ {
797
+ className: "absdk-predicate-toast__dismiss-icon-path",
798
+ d: "M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5",
799
+ stroke: "currentColor",
800
+ strokeWidth: "1.5",
801
+ strokeLinecap: "round"
802
+ }
803
+ ) })
804
+ }
805
+ )
806
+ ]
807
+ }
808
+ )
809
+ }
810
+ );
811
+ };
812
+ async function loadWalletAccount2() {
813
+ return import('./account-F5Z2SMJE.js');
814
+ }
815
+ var SOCIAL_ADAPTER_ID = "cubist";
816
+ function persistSocialAdapterId() {
817
+ try {
818
+ const storage = typeof localStorage !== "undefined" ? localStorage : null;
819
+ storage?.setItem("ab:wallet:adapterId", SOCIAL_ADAPTER_ID);
820
+ } catch {
821
+ }
822
+ }
823
+ var SignInModal = ({
824
+ title = "Welcome to PredicateMarket",
825
+ socialProviders,
826
+ wallets,
827
+ initialVisibleCount,
828
+ privacyPolicyUrl = "#",
829
+ termsOfUseUrl = "#",
830
+ onGoogleLogin,
831
+ onTwitterLogin,
832
+ onCubeSignerSession,
833
+ onWalletConnected,
834
+ onSocialLogin,
835
+ onWalletSelect,
836
+ onDismiss,
837
+ onSuccess
838
+ }) => {
839
+ const sdkConfig = getSDKConfig();
840
+ const effectiveSocialProviders = resolveSocialProviders(
841
+ socialProviders ?? sdkConfig.signIn?.socialProviders
842
+ );
843
+ const effectiveWallets = wallets ?? sdkConfig.signIn?.wallets;
844
+ const effectiveInitialVisibleCount = initialVisibleCount ?? sdkConfig.signIn?.initialVisibleCount ?? 5;
845
+ const [toastError, setToastError] = useState(null);
846
+ const [socialLoadingProvider, setSocialLoadingProvider] = useState(null);
847
+ const {
848
+ expanded,
849
+ loadingProvider,
850
+ loadingWalletId,
851
+ visibleWallets,
852
+ showExpandToggle,
853
+ isBusy,
854
+ handleSocialClick,
855
+ handleWalletClick,
856
+ clearSocialLoading,
857
+ toggleExpanded
858
+ } = useSignInModalController({
859
+ wallets: effectiveWallets,
860
+ initialVisibleCount: effectiveInitialVisibleCount,
861
+ onGoogleLogin,
862
+ onTwitterLogin,
863
+ onCubeSignerSession,
864
+ onWalletConnected,
865
+ onSocialLogin,
866
+ onWalletSelect
867
+ });
868
+ return /* @__PURE__ */ jsxs(
869
+ SignInModalFrame,
870
+ {
871
+ id: "absdk-predicate-signin-modal-frame",
872
+ title,
873
+ onClose: onDismiss,
874
+ footer: /* @__PURE__ */ jsx(
875
+ SignInModalFooter,
876
+ {
877
+ privacyPolicyUrl,
878
+ termsOfUseUrl
879
+ }
880
+ ),
881
+ children: [
882
+ toastError && /* @__PURE__ */ jsx(
883
+ Toast,
884
+ {
885
+ message: toastError,
886
+ variant: "error",
887
+ duration: 5e3,
888
+ onClose: () => setToastError(null)
889
+ }
890
+ ),
891
+ /* @__PURE__ */ jsx(
892
+ SignInModalSocialSection,
893
+ {
894
+ id: "absdk-predicate-signin-modal-social",
895
+ socialProviders: effectiveSocialProviders,
896
+ isBusy: isBusy || !!socialLoadingProvider,
897
+ loadingProvider: loadingProvider ?? socialLoadingProvider,
898
+ onSocialClick: async (providerId) => {
899
+ setSocialLoadingProvider(providerId);
900
+ sessionStore.clearSession();
901
+ try {
902
+ const { default: WalletAccount2 } = await loadWalletAccount2();
903
+ WalletAccount2.clearInstance();
904
+ const oidcToken = await handleSocialClick(providerId);
905
+ if (!oidcToken) {
906
+ setToastError("Social login failed, please try again");
907
+ return;
908
+ }
909
+ const walletAccount = await WalletAccount2.getInstance(oidcToken);
910
+ const cubeSignerSession = walletAccount.getCubeSignerSession();
911
+ onCubeSignerSession?.(cubeSignerSession);
912
+ cache_exports.set("oidcToken", oidcToken, false);
913
+ const [address] = await walletAccount.eth_accounts();
914
+ if (!address) {
915
+ throw new Error("Social wallet did not return an account");
916
+ }
917
+ const chainId = await walletAccount.eth_chainId();
918
+ const chain = getSupportedChainFromEvmChainId(chainId);
919
+ const authSource = providerId === "x" ? "twitter" : providerId;
920
+ const capabilityPolicy = sdkConfig.cubeSigner?.defaultSessionPolicy ? createSessionCapabilityPolicy(sdkConfig.cubeSigner.defaultSessionPolicy) : void 0;
921
+ const session = {
922
+ address,
923
+ chain,
924
+ provider: walletAccount,
925
+ walletType: "social",
926
+ authSource,
927
+ sessionId: `${authSource}:${address.toLowerCase()}`,
928
+ expiresAt: capabilityPolicy?.expiresAt,
929
+ capabilities: CUBIST_CAPABILITIES,
930
+ sessionData: cubeSignerSession.sessionData,
931
+ chainContext: createChainContext(chain),
932
+ capabilityPolicy
933
+ };
934
+ persistSocialAdapterId();
935
+ sessionStore.setSession(session);
936
+ onSuccess?.(session);
937
+ } catch (error) {
938
+ setToastError(error?.message ?? "Failed to get wallet account, please try again");
939
+ return;
940
+ } finally {
941
+ setSocialLoadingProvider(null);
942
+ clearSocialLoading();
943
+ }
944
+ }
945
+ }
946
+ ),
947
+ /* @__PURE__ */ jsx(
948
+ SignInModalWalletGrid,
949
+ {
950
+ wallets: visibleWallets,
951
+ isBusy,
952
+ loadingWalletId,
953
+ expanded,
954
+ showExpandToggle,
955
+ onWalletClick: handleWalletClick,
956
+ onToggleExpanded: toggleExpanded
957
+ }
958
+ )
959
+ ]
960
+ }
961
+ );
962
+ };
963
+
964
+ // src/ui/theme.ts
965
+ var colors2 = {
966
+ background: "#050608",
967
+ card: "#121214",
968
+ cardRaised: "#151821",
969
+ border: "rgba(126,135,162,0.2)",
970
+ borderStrong: "rgba(255,255,255,0.16)",
971
+ borderFocused: "#FFFFFF",
972
+ textPrimary: "#FFFFFF",
973
+ textSecondary: "#737477",
974
+ accent: "#29FF9B",
975
+ accentStrong: "#4AD481",
976
+ warning: "#FFB547",
977
+ danger: "#FF6B6B",
978
+ stepActive: "#FFFFFF",
979
+ stepInactive: "#36383D",
980
+ buttonDisabledBg: "rgba(255,255,255,0.14)",
981
+ buttonDisabledBorder: "#444444"
982
+ };
983
+ var radii2 = {
984
+ xl: "28px",
985
+ lg: "20px",
986
+ pill: "99px",
987
+ full: "9999px",
988
+ card: "12px",
989
+ input: "8px"
990
+ };
991
+ var fonts2 = {
992
+ family: '"Switzer", "Inter", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
993
+ };
994
+ var placeholderIcon = (label) => /* @__PURE__ */ jsx(
995
+ "div",
996
+ {
997
+ style: {
998
+ width: 40,
999
+ height: 40,
1000
+ borderRadius: "12px",
1001
+ background: colors2.cardRaised,
1002
+ display: "flex",
1003
+ alignItems: "center",
1004
+ justifyContent: "center",
1005
+ color: colors2.textSecondary,
1006
+ fontWeight: 600
1007
+ },
1008
+ children: label.slice(0, 2).toUpperCase()
1009
+ }
1010
+ );
1011
+ var WalletSelectionModal = ({
1012
+ title = "Connect Wallet",
1013
+ options,
1014
+ onSelect
1015
+ }) => {
1016
+ const sections = [
1017
+ {
1018
+ id: "social",
1019
+ label: "Social Wallets",
1020
+ items: options.filter((item) => item.category === "social")
1021
+ },
1022
+ {
1023
+ id: "plugin",
1024
+ label: "Plugin Wallets",
1025
+ items: options.filter((item) => item.category === "plugin")
1026
+ }
1027
+ ].filter((section) => section.items.length > 0);
1028
+ return /* @__PURE__ */ jsxs(
1029
+ "div",
1030
+ {
1031
+ style: {
1032
+ width: "min(720px, 90vw)",
1033
+ background: colors2.card,
1034
+ borderRadius: radii2.xl,
1035
+ border: `1px solid ${colors2.border}`,
1036
+ padding: "40px",
1037
+ display: "flex",
1038
+ flexDirection: "column",
1039
+ gap: 32,
1040
+ color: colors2.textPrimary,
1041
+ fontFamily: fonts2.family
1042
+ },
1043
+ children: [
1044
+ /* @__PURE__ */ jsxs("div", { children: [
1045
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 26, fontWeight: 600 }, children: title }),
1046
+ /* @__PURE__ */ jsx("p", { style: { color: colors2.textSecondary, marginTop: 8 }, children: "Choose social or plugin wallets" })
1047
+ ] }),
1048
+ sections.map((section) => /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
1049
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 14, textTransform: "uppercase", letterSpacing: 1.5, color: colors2.textSecondary }, children: section.label }),
1050
+ /* @__PURE__ */ jsx(
1051
+ "div",
1052
+ {
1053
+ style: {
1054
+ display: "grid",
1055
+ gap: 16,
1056
+ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
1057
+ },
1058
+ children: section.items.map((option) => /* @__PURE__ */ jsxs(
1059
+ "button",
1060
+ {
1061
+ onClick: () => onSelect?.(option.id),
1062
+ style: {
1063
+ borderRadius: radii2.lg,
1064
+ border: `1px solid ${colors2.border}`,
1065
+ background: colors2.cardRaised,
1066
+ padding: "20px",
1067
+ display: "flex",
1068
+ gap: 14,
1069
+ alignItems: "center",
1070
+ textAlign: "left",
1071
+ cursor: "pointer",
1072
+ color: colors2.textPrimary
1073
+ },
1074
+ children: [
1075
+ option.icon ?? placeholderIcon(option.label),
1076
+ /* @__PURE__ */ jsxs("div", { children: [
1077
+ /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: option.label }),
1078
+ /* @__PURE__ */ jsx("div", { style: { color: colors2.textSecondary, fontSize: 14 }, children: option.description })
1079
+ ] })
1080
+ ]
1081
+ },
1082
+ option.id
1083
+ ))
1084
+ }
1085
+ )
1086
+ ] }, section.id))
1087
+ ]
1088
+ }
1089
+ );
1090
+ };
1091
+ var CloseButton2 = ({ onClick }) => /* @__PURE__ */ jsx(
1092
+ "button",
1093
+ {
1094
+ className: "absdk-predicate-close-button",
1095
+ type: "button",
1096
+ onClick,
1097
+ "aria-label": "Close",
1098
+ style: {
1099
+ width: 30,
1100
+ height: 30,
1101
+ borderRadius: "50%",
1102
+ background: colors2.card,
1103
+ border: "none",
1104
+ cursor: "pointer",
1105
+ display: "flex",
1106
+ alignItems: "center",
1107
+ justifyContent: "center",
1108
+ padding: 0,
1109
+ flexShrink: 0
1110
+ },
1111
+ children: /* @__PURE__ */ jsx("svg", { className: "absdk-predicate-close-button__icon", width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsx(
1112
+ "path",
1113
+ {
1114
+ className: "absdk-predicate-close-button__icon-path",
1115
+ d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75",
1116
+ stroke: colors2.textPrimary,
1117
+ strokeWidth: "1.5",
1118
+ strokeLinecap: "round"
1119
+ }
1120
+ ) })
1121
+ }
1122
+ );
1123
+ var MOBILE_BREAKPOINT_PX2 = 720;
1124
+ var MOBILE_MODAL_WIDTH_PX2 = 375;
1125
+ var MOBILE_MODAL_GUTTER_PX2 = 16;
1126
+ function isMobileViewport2(width) {
1127
+ return width < MOBILE_BREAKPOINT_PX2;
1128
+ }
1129
+ function useIsMobileViewport2() {
1130
+ const [isMobile, setIsMobile] = useState(
1131
+ () => typeof window !== "undefined" ? isMobileViewport2(window.innerWidth) : false
1132
+ );
1133
+ useEffect(() => {
1134
+ if (typeof window === "undefined") return;
1135
+ const handleResize = () => {
1136
+ setIsMobile(isMobileViewport2(window.innerWidth));
1137
+ };
1138
+ handleResize();
1139
+ window.addEventListener("resize", handleResize);
1140
+ return () => window.removeEventListener("resize", handleResize);
1141
+ }, []);
1142
+ return isMobile;
1143
+ }
1144
+ var ModalFrame2 = ({
1145
+ onClose,
1146
+ width = 500,
1147
+ cardStyle,
1148
+ contentStyle,
1149
+ children
1150
+ }) => {
1151
+ const isMobile = useIsMobileViewport2();
1152
+ return /* @__PURE__ */ jsx(
1153
+ "div",
1154
+ {
1155
+ className: `absdk-predicate-modal-frame ${isMobile ? "absdk-predicate-modal-frame--mobile" : "absdk-predicate-modal-frame--desktop"}`,
1156
+ style: {
1157
+ display: "flex",
1158
+ flexDirection: "column",
1159
+ alignItems: "center",
1160
+ justifyContent: "center",
1161
+ width: "100%",
1162
+ maxHeight: isMobile ? "90vh" : void 0
1163
+ },
1164
+ children: /* @__PURE__ */ jsxs(
1165
+ "div",
1166
+ {
1167
+ className: "absdk-predicate-modal-frame__layout",
1168
+ style: {
1169
+ display: "flex",
1170
+ flexDirection: isMobile ? "column" : "row",
1171
+ gap: isMobile ? 10 : 14,
1172
+ alignItems: isMobile ? "stretch" : "flex-start",
1173
+ width: isMobile ? `min(${MOBILE_MODAL_WIDTH_PX2}px, calc(100vw - ${MOBILE_MODAL_GUTTER_PX2 * 2}px))` : "auto"
1174
+ },
1175
+ children: [
1176
+ onClose ? /* @__PURE__ */ jsx(
1177
+ "div",
1178
+ {
1179
+ className: "absdk-predicate-modal-frame__close",
1180
+ style: {
1181
+ display: "flex",
1182
+ justifyContent: isMobile ? "flex-end" : "flex-start",
1183
+ order: isMobile ? -1 : 1,
1184
+ paddingTop: isMobile ? 13 : 0,
1185
+ paddingRight: isMobile ? 2 : 0
1186
+ },
1187
+ children: /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose })
1188
+ }
1189
+ ) : null,
1190
+ /* @__PURE__ */ jsx(
1191
+ "div",
1192
+ {
1193
+ className: "absdk-predicate-modal-frame__card",
1194
+ style: {
1195
+ width: isMobile ? "100%" : width,
1196
+ maxWidth: "100%",
1197
+ maxHeight: isMobile ? "90vh" : void 0,
1198
+ background: colors2.card,
1199
+ borderRadius: radii2.card,
1200
+ overflow: "hidden",
1201
+ ...cardStyle
1202
+ },
1203
+ children: /* @__PURE__ */ jsx(
1204
+ "div",
1205
+ {
1206
+ className: "absdk-predicate-modal-frame__content",
1207
+ style: {
1208
+ display: "flex",
1209
+ flexDirection: "column",
1210
+ minHeight: 0,
1211
+ maxHeight: isMobile ? "90vh" : void 0,
1212
+ overflowY: isMobile ? "auto" : void 0,
1213
+ overflowX: "hidden",
1214
+ WebkitOverflowScrolling: "touch",
1215
+ fontFamily: fonts2.family,
1216
+ color: colors2.textPrimary,
1217
+ boxSizing: "border-box",
1218
+ ...contentStyle
1219
+ },
1220
+ children
1221
+ }
1222
+ )
1223
+ }
1224
+ )
1225
+ ]
1226
+ }
1227
+ )
1228
+ }
1229
+ );
1230
+ };
1231
+ var StepIndicator = ({
1232
+ steps,
1233
+ stepActive,
1234
+ activeStep = 0,
1235
+ orientation = "vertical"
1236
+ }) => {
1237
+ const isHorizontal = orientation === "horizontal";
1238
+ return /* @__PURE__ */ jsx(
1239
+ "div",
1240
+ {
1241
+ className: `absdk-predicate-step-indicator absdk-predicate-step-indicator--${orientation}`,
1242
+ style: {
1243
+ display: "flex",
1244
+ flexDirection: isHorizontal ? "row" : "column",
1245
+ alignItems: "center",
1246
+ justifyContent: "center",
1247
+ width: isHorizontal ? "100%" : 20,
1248
+ paddingTop: isHorizontal ? 0 : 4,
1249
+ flexShrink: 0,
1250
+ gap: isHorizontal ? 0 : void 0
1251
+ },
1252
+ children: Array.from({ length: steps }, (_, i) => {
1253
+ const isActive = stepActive && stepActive.length > i ? stepActive[i] : i <= activeStep;
1254
+ const isLast = i === steps - 1;
1255
+ return /* @__PURE__ */ jsxs(
1256
+ "div",
1257
+ {
1258
+ className: "absdk-predicate-step-indicator__item",
1259
+ style: {
1260
+ display: "flex",
1261
+ flexDirection: isHorizontal ? "row" : "column",
1262
+ alignItems: "center",
1263
+ width: isHorizontal ? "100%" : void 0,
1264
+ flex: isHorizontal ? void 0 : void 0
1265
+ },
1266
+ children: [
1267
+ /* @__PURE__ */ jsx(
1268
+ "div",
1269
+ {
1270
+ className: "absdk-predicate-step-indicator__dot",
1271
+ style: {
1272
+ width: 20,
1273
+ height: 20,
1274
+ minWidth: 20,
1275
+ minHeight: 20,
1276
+ flexShrink: 0,
1277
+ borderRadius: "50%",
1278
+ border: `2px solid ${isActive ? colors2.stepActive : colors2.stepInactive}`,
1279
+ display: "flex",
1280
+ alignItems: "center",
1281
+ justifyContent: "center",
1282
+ boxSizing: "border-box"
1283
+ },
1284
+ children: /* @__PURE__ */ jsx(
1285
+ "div",
1286
+ {
1287
+ className: "absdk-predicate-step-indicator__dot-inner",
1288
+ style: {
1289
+ width: 7.5,
1290
+ height: 7.5,
1291
+ borderRadius: "50%",
1292
+ background: isActive ? colors2.stepActive : colors2.stepInactive
1293
+ }
1294
+ }
1295
+ )
1296
+ }
1297
+ ),
1298
+ !isLast && /* @__PURE__ */ jsx(
1299
+ "div",
1300
+ {
1301
+ className: "absdk-predicate-step-indicator__line",
1302
+ style: {
1303
+ width: isHorizontal ? "100%" : 1,
1304
+ height: isHorizontal ? 1 : 87,
1305
+ flex: isHorizontal ? 1 : void 0,
1306
+ flexShrink: 1,
1307
+ background: isActive ? colors2.stepActive : colors2.stepInactive,
1308
+ opacity: 0.3,
1309
+ margin: isHorizontal ? "0 8px" : "8px 0"
1310
+ }
1311
+ }
1312
+ )
1313
+ ]
1314
+ },
1315
+ i
1316
+ );
1317
+ })
1318
+ }
1319
+ );
1320
+ };
1321
+ var Chevron = ({ up }) => /* @__PURE__ */ jsx(
1322
+ "svg",
1323
+ {
1324
+ className: `absdk-predicate-dropdown-field__chevron ${up ? "absdk-predicate-dropdown-field__chevron--open" : "absdk-predicate-dropdown-field__chevron--closed"}`,
1325
+ width: "16",
1326
+ height: "16",
1327
+ viewBox: "0 0 16 16",
1328
+ fill: "none",
1329
+ style: { transition: "transform .2s", transform: up ? "rotate(180deg)" : "none" },
1330
+ children: /* @__PURE__ */ jsx("path", { className: "absdk-predicate-dropdown-field__chevron-path", d: "M4 6L8 10L12 6", stroke: colors2.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
1331
+ }
1332
+ );
1333
+ var DropdownField = ({
1334
+ label,
1335
+ placeholder,
1336
+ value,
1337
+ icon,
1338
+ focused,
1339
+ options,
1340
+ onSelect,
1341
+ wrapperClassName,
1342
+ triggerClassName,
1343
+ triggerId,
1344
+ onClick
1345
+ }) => {
1346
+ const [open, setOpen] = useState(false);
1347
+ const [triggerFocused, setTriggerFocused] = useState(false);
1348
+ const ref = useRef(null);
1349
+ useEffect(() => {
1350
+ if (!open) return;
1351
+ const handler = (e) => {
1352
+ if (ref.current && !ref.current.contains(e.target)) setOpen(false);
1353
+ };
1354
+ document.addEventListener("mousedown", handler);
1355
+ return () => document.removeEventListener("mousedown", handler);
1356
+ }, [open]);
1357
+ const hasOptions = options && options.length > 0;
1358
+ const handleClick = () => {
1359
+ if (hasOptions) {
1360
+ setOpen((p) => !p);
1361
+ } else {
1362
+ onClick?.();
1363
+ }
1364
+ };
1365
+ const handleSelect = (id) => {
1366
+ onSelect?.(id);
1367
+ setOpen(false);
1368
+ };
1369
+ const selected = hasOptions ? options.find((o) => o.id === value) : void 0;
1370
+ return /* @__PURE__ */ jsxs(
1371
+ "div",
1372
+ {
1373
+ ref,
1374
+ className: wrapperClassName ? `absdk-predicate-dropdown-field ${wrapperClassName}` : "absdk-predicate-dropdown-field",
1375
+ style: { display: "flex", flexDirection: "column", gap: 8, width: "100%", position: "relative" },
1376
+ children: [
1377
+ /* @__PURE__ */ jsx(
1378
+ "span",
1379
+ {
1380
+ className: "absdk-predicate-dropdown-field__label",
1381
+ style: {
1382
+ fontSize: 14,
1383
+ fontWeight: 400,
1384
+ lineHeight: 1.4,
1385
+ color: colors2.textPrimary,
1386
+ fontFamily: fonts2.family
1387
+ },
1388
+ children: label
1389
+ }
1390
+ ),
1391
+ /* @__PURE__ */ jsxs(
1392
+ "button",
1393
+ {
1394
+ id: triggerId,
1395
+ className: triggerClassName ? `absdk-predicate-dropdown-field__trigger ${triggerClassName}` : "absdk-predicate-dropdown-field__trigger",
1396
+ type: "button",
1397
+ onClick: handleClick,
1398
+ onFocus: () => setTriggerFocused(true),
1399
+ onBlur: () => setTriggerFocused(false),
1400
+ style: {
1401
+ display: "flex",
1402
+ alignItems: "center",
1403
+ justifyContent: "space-between",
1404
+ height: 44,
1405
+ padding: "0 16px",
1406
+ borderRadius: radii2.input,
1407
+ border: `1px solid ${open || triggerFocused ? colors2.borderFocused : colors2.border}`,
1408
+ background: "transparent",
1409
+ cursor: "pointer",
1410
+ fontFamily: fonts2.family,
1411
+ width: "100%",
1412
+ boxSizing: "border-box"
1413
+ },
1414
+ children: [
1415
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-dropdown-field__trigger-content", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1416
+ selected?.icon ?? icon ? /* @__PURE__ */ jsx("span", { className: "absdk-predicate-dropdown-field__trigger-icon", children: selected?.icon ?? icon }) : null,
1417
+ /* @__PURE__ */ jsx(
1418
+ "span",
1419
+ {
1420
+ className: "absdk-predicate-dropdown-field__trigger-text",
1421
+ style: {
1422
+ fontSize: 14,
1423
+ lineHeight: 1.4,
1424
+ color: value ? colors2.textPrimary : colors2.textSecondary,
1425
+ fontFamily: fonts2.family
1426
+ },
1427
+ children: selected?.label ?? value ?? placeholder
1428
+ }
1429
+ )
1430
+ ] }),
1431
+ /* @__PURE__ */ jsx(Chevron, { up: open })
1432
+ ]
1433
+ }
1434
+ ),
1435
+ open && hasOptions && /* @__PURE__ */ jsx(
1436
+ "div",
1437
+ {
1438
+ className: "absdk-predicate-dropdown-field__list",
1439
+ style: {
1440
+ position: "absolute",
1441
+ top: "calc(100% + 4px)",
1442
+ left: 0,
1443
+ right: 0,
1444
+ zIndex: 10,
1445
+ borderRadius: radii2.input,
1446
+ border: `1px solid ${colors2.border}`,
1447
+ background: colors2.card,
1448
+ overflow: "hidden",
1449
+ boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
1450
+ },
1451
+ children: options.map((opt) => /* @__PURE__ */ jsxs(
1452
+ "button",
1453
+ {
1454
+ className: "absdk-predicate-dropdown-field__option",
1455
+ type: "button",
1456
+ onClick: () => handleSelect(opt.id),
1457
+ style: {
1458
+ display: "flex",
1459
+ alignItems: "center",
1460
+ gap: 10,
1461
+ width: "100%",
1462
+ padding: "10px 16px",
1463
+ border: "none",
1464
+ background: opt.id === value ? "rgba(255,255,255,0.06)" : "transparent",
1465
+ cursor: "pointer",
1466
+ fontFamily: fonts2.family,
1467
+ textAlign: "left",
1468
+ transition: "background .12s"
1469
+ },
1470
+ onMouseEnter: (e) => {
1471
+ e.currentTarget.style.background = "rgba(255,255,255,0.08)";
1472
+ },
1473
+ onMouseLeave: (e) => {
1474
+ e.currentTarget.style.background = opt.id === value ? "rgba(255,255,255,0.06)" : "transparent";
1475
+ },
1476
+ children: [
1477
+ opt.icon && /* @__PURE__ */ jsx("div", { className: "absdk-predicate-dropdown-field__option-icon", style: { width: 28, height: 28, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: opt.icon }),
1478
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-dropdown-field__option-copy", style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
1479
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-dropdown-field__option-label", style: { fontSize: 14, fontWeight: 500, color: colors2.textPrimary }, children: opt.label }),
1480
+ opt.subtitle && /* @__PURE__ */ jsx("span", { className: "absdk-predicate-dropdown-field__option-subtitle", style: { fontSize: 12, color: colors2.textSecondary }, children: opt.subtitle })
1481
+ ] })
1482
+ ]
1483
+ },
1484
+ opt.id
1485
+ ))
1486
+ }
1487
+ )
1488
+ ]
1489
+ }
1490
+ );
1491
+ };
1492
+ function getRemaining(expiresAt) {
1493
+ const end = typeof expiresAt === "string" ? new Date(expiresAt).getTime() : expiresAt;
1494
+ return Math.max(0, Math.floor((end - Date.now()) / 1e3));
1495
+ }
1496
+ function formatRemaining(seconds) {
1497
+ const m = Math.floor(seconds / 60);
1498
+ const s = seconds % 60;
1499
+ return `${m}:${s.toString().padStart(2, "0")}`;
1500
+ }
1501
+ function Countdown({
1502
+ expiresAt,
1503
+ expiredLabel = "Expired",
1504
+ style,
1505
+ isExpired = false,
1506
+ onExpired
1507
+ }) {
1508
+ const [remaining, setRemaining] = useState(() => getRemaining(expiresAt));
1509
+ const hasFiredExpired = useRef(false);
1510
+ useEffect(() => {
1511
+ hasFiredExpired.current = false;
1512
+ }, [expiresAt]);
1513
+ useEffect(() => {
1514
+ if (isExpired) {
1515
+ setRemaining(0);
1516
+ return;
1517
+ }
1518
+ const tick = () => {
1519
+ const r = getRemaining(expiresAt);
1520
+ setRemaining(r);
1521
+ if (r <= 0 && onExpired && !hasFiredExpired.current) {
1522
+ hasFiredExpired.current = true;
1523
+ onExpired();
1524
+ }
1525
+ };
1526
+ tick();
1527
+ const id = setInterval(tick, 1e3);
1528
+ return () => clearInterval(id);
1529
+ }, [expiresAt, isExpired, onExpired]);
1530
+ const text = remaining <= 0 ? expiredLabel : formatRemaining(remaining);
1531
+ const color = remaining <= 0 ? colors2.warning : colors2.textSecondary;
1532
+ return /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-countdown", style: { fontSize: 12, color, fontFamily: fonts2.family, ...style }, children: [
1533
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-countdown__label", children: "Expires in " }),
1534
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-countdown__value", style: { fontWeight: 600, color: "#fff" }, children: text })
1535
+ ] });
1536
+ }
1537
+ function generateMatrix(data) {
1538
+ const qr = qrcode(0, "H");
1539
+ qr.addData(data);
1540
+ qr.make();
1541
+ const count = qr.getModuleCount();
1542
+ const matrix = [];
1543
+ for (let r = 0; r < count; r++) {
1544
+ const row = [];
1545
+ for (let c = 0; c < count; c++) {
1546
+ row.push(qr.isDark(r, c));
1547
+ }
1548
+ matrix.push(row);
1549
+ }
1550
+ return matrix;
1551
+ }
1552
+ function isFinderZone(row, col, size) {
1553
+ return row < 7 && col < 7 || row < 7 && col >= size - 7 || row >= size - 7 && col < 7;
1554
+ }
1555
+ var FinderEye = ({ ox, oy, s }) => /* @__PURE__ */ jsxs(Fragment, { children: [
1556
+ /* @__PURE__ */ jsx("rect", { x: ox, y: oy, width: 7 * s, height: 7 * s, rx: s * 1.4, ry: s * 1.4, fill: "#fff" }),
1557
+ /* @__PURE__ */ jsx(
1558
+ "rect",
1559
+ {
1560
+ x: ox + s,
1561
+ y: oy + s,
1562
+ width: 5 * s,
1563
+ height: 5 * s,
1564
+ rx: s * 0.9,
1565
+ ry: s * 0.9,
1566
+ fill: colors2.background
1567
+ }
1568
+ ),
1569
+ /* @__PURE__ */ jsx(
1570
+ "rect",
1571
+ {
1572
+ x: ox + 2 * s,
1573
+ y: oy + 2 * s,
1574
+ width: 3 * s,
1575
+ height: 3 * s,
1576
+ rx: s * 0.7,
1577
+ ry: s * 0.7,
1578
+ fill: "#fff"
1579
+ }
1580
+ )
1581
+ ] });
1582
+ var SVG_SIZE = 176;
1583
+ var QUIET_ZONE = 2;
1584
+ var StyledQR = ({ data }) => {
1585
+ const matrix = useMemo(() => generateMatrix(data), [data]);
1586
+ const n = matrix.length;
1587
+ const total = n + QUIET_ZONE * 2;
1588
+ const cell = SVG_SIZE / total;
1589
+ const off = QUIET_ZONE * cell;
1590
+ const dotR = cell * 0.42;
1591
+ const centerClearR = 3;
1592
+ const cx = n / 2;
1593
+ const cy = n / 2;
1594
+ const dots = [];
1595
+ for (let r = 0; r < n; r++) {
1596
+ for (let c = 0; c < n; c++) {
1597
+ if (!matrix[r][c]) continue;
1598
+ if (isFinderZone(r, c, n)) continue;
1599
+ if (Math.abs(c - cx) < centerClearR && Math.abs(r - cy) < centerClearR) continue;
1600
+ dots.push(
1601
+ /* @__PURE__ */ jsx(
1602
+ "circle",
1603
+ {
1604
+ cx: off + c * cell + cell / 2,
1605
+ cy: off + r * cell + cell / 2,
1606
+ r: dotR,
1607
+ fill: "#fff"
1608
+ },
1609
+ `${r}-${c}`
1610
+ )
1611
+ );
1612
+ }
1613
+ }
1614
+ return /* @__PURE__ */ jsxs(
1615
+ "svg",
1616
+ {
1617
+ className: "absdk-predicate-deposit-details__qr-svg",
1618
+ width: SVG_SIZE,
1619
+ height: SVG_SIZE,
1620
+ viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
1621
+ style: { borderRadius: 12 },
1622
+ children: [
1623
+ /* @__PURE__ */ jsx("rect", { className: "absdk-predicate-deposit-details__qr-background", width: SVG_SIZE, height: SVG_SIZE, fill: colors2.background }),
1624
+ /* @__PURE__ */ jsx(FinderEye, { ox: off, oy: off, s: cell }),
1625
+ /* @__PURE__ */ jsx(FinderEye, { ox: off + (n - 7) * cell, oy: off, s: cell }),
1626
+ /* @__PURE__ */ jsx(FinderEye, { ox: off, oy: off + (n - 7) * cell, s: cell }),
1627
+ dots
1628
+ ]
1629
+ }
1630
+ );
1631
+ };
1632
+ var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { className: "absdk-predicate-deposit-details__copy-icon", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
1633
+ /* @__PURE__ */ jsx("rect", { className: "absdk-predicate-deposit-details__copy-icon-body", x: "4.5", y: "4.5", width: "7", height: "7", rx: "1.5", stroke: colors2.textPrimary, strokeWidth: "1.2" }),
1634
+ /* @__PURE__ */ jsx(
1635
+ "path",
1636
+ {
1637
+ className: "absdk-predicate-deposit-details__copy-icon-path",
1638
+ d: "M9.5 4.5V3.5C9.5 2.67 8.83 2 8 2H3.5C2.67 2 2 2.67 2 3.5V8C2 8.83 2.67 9.5 3.5 9.5H4.5",
1639
+ stroke: colors2.textPrimary,
1640
+ strokeWidth: "1.2"
1641
+ }
1642
+ )
1643
+ ] });
1644
+ var DepositDetailsPanel = ({
1645
+ address,
1646
+ tokenIcon,
1647
+ minimumDeposit,
1648
+ onCopyAddress
1649
+ }) => {
1650
+ const isMobile = useIsMobileViewport2();
1651
+ const canCopy = typeof address === "string" && address.trim().length > 0;
1652
+ const handleCopy = async () => {
1653
+ if (!canCopy) return;
1654
+ try {
1655
+ if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
1656
+ await navigator.clipboard.writeText(address);
1657
+ } else {
1658
+ const el = document.createElement("textarea");
1659
+ el.value = address;
1660
+ el.setAttribute("readonly", "");
1661
+ el.style.position = "absolute";
1662
+ el.style.left = "-9999px";
1663
+ document.body.appendChild(el);
1664
+ el.select();
1665
+ try {
1666
+ document.execCommand("copy");
1667
+ } catch {
1668
+ }
1669
+ document.body.removeChild(el);
1670
+ }
1671
+ } finally {
1672
+ onCopyAddress?.(address);
1673
+ }
1674
+ };
1675
+ return /* @__PURE__ */ jsxs(
1676
+ "div",
1677
+ {
1678
+ className: `absdk-predicate-deposit-details ${isMobile ? "absdk-predicate-deposit-details--mobile" : "absdk-predicate-deposit-details--desktop"}`,
1679
+ style: {
1680
+ display: "flex",
1681
+ flexDirection: "column",
1682
+ alignItems: "center",
1683
+ gap: 16,
1684
+ padding: isMobile ? "16px" : "20px",
1685
+ borderRadius: radii2.card,
1686
+ border: `1px solid ${colors2.border}`,
1687
+ fontFamily: fonts2.family
1688
+ },
1689
+ children: [
1690
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-details__qr", style: { position: "relative", display: "inline-flex" }, children: [
1691
+ /* @__PURE__ */ jsx(StyledQR, { data: address }),
1692
+ tokenIcon && /* @__PURE__ */ jsx(
1693
+ "div",
1694
+ {
1695
+ className: "absdk-predicate-deposit-details__token-icon-shell",
1696
+ style: {
1697
+ position: "absolute",
1698
+ top: "50%",
1699
+ left: "50%",
1700
+ transform: "translate(-50%, -50%)",
1701
+ width: 30,
1702
+ height: 30,
1703
+ borderRadius: "50%",
1704
+ background: "#3B5998",
1705
+ display: "flex",
1706
+ alignItems: "center",
1707
+ justifyContent: "center",
1708
+ boxShadow: `0 0 0 3px ${colors2.background}`
1709
+ },
1710
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-details__token-icon", children: tokenIcon })
1711
+ }
1712
+ )
1713
+ ] }),
1714
+ /* @__PURE__ */ jsx("div", { className: "absdk-predicate-deposit-details__address-group", style: { width: "100%", display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ jsx(
1715
+ "div",
1716
+ {
1717
+ id: "absdk-predicate-deposit-details-address",
1718
+ className: "absdk-predicate-deposit-details__address",
1719
+ style: {
1720
+ padding: "10px 14px",
1721
+ borderRadius: radii2.input,
1722
+ background: "rgba(255,255,255,0.05)",
1723
+ fontSize: 13,
1724
+ color: colors2.textPrimary,
1725
+ wordBreak: "break-all",
1726
+ lineHeight: 1.5
1727
+ },
1728
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-details__address-text", children: address })
1729
+ }
1730
+ ) }),
1731
+ minimumDeposit && /* @__PURE__ */ jsxs(
1732
+ "div",
1733
+ {
1734
+ className: "absdk-predicate-deposit-details__minimum",
1735
+ style: {
1736
+ width: "100%",
1737
+ display: "flex",
1738
+ justifyContent: "space-between",
1739
+ fontSize: 13
1740
+ },
1741
+ children: [
1742
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-details__minimum-label", style: { color: colors2.textSecondary }, children: "Minimum deposit" }),
1743
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-details__minimum-value", style: { color: colors2.textPrimary, fontWeight: 500 }, children: minimumDeposit })
1744
+ ]
1745
+ }
1746
+ ),
1747
+ /* @__PURE__ */ jsxs(
1748
+ "button",
1749
+ {
1750
+ id: "absdk-predicate-deposit-details-copy-button",
1751
+ className: "absdk-predicate-deposit-details__copy-button",
1752
+ type: "button",
1753
+ onClick: handleCopy,
1754
+ disabled: !canCopy,
1755
+ style: {
1756
+ display: "flex",
1757
+ alignItems: "center",
1758
+ gap: 6,
1759
+ padding: "10px 28px",
1760
+ borderRadius: radii2.pill,
1761
+ border: `1px solid ${colors2.borderStrong}`,
1762
+ background: "transparent",
1763
+ color: colors2.textPrimary,
1764
+ fontSize: 14,
1765
+ fontWeight: 500,
1766
+ cursor: canCopy ? "pointer" : "not-allowed",
1767
+ opacity: canCopy ? 1 : 0.6,
1768
+ fontFamily: fonts2.family,
1769
+ transition: "background .15s"
1770
+ },
1771
+ onMouseEnter: (e) => {
1772
+ if (!canCopy) return;
1773
+ e.currentTarget.style.background = "rgba(255,255,255,0.06)";
1774
+ },
1775
+ onMouseLeave: (e) => {
1776
+ e.currentTarget.style.background = "transparent";
1777
+ },
1778
+ children: [
1779
+ /* @__PURE__ */ jsx(CopyIcon, {}),
1780
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-details__copy-button-label", children: "Copy address" })
1781
+ ]
1782
+ }
1783
+ )
1784
+ ]
1785
+ }
1786
+ );
1787
+ };
1788
+ var LockIcon = () => /* @__PURE__ */ jsxs("svg", { className: "absdk-predicate-login-required__icon", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [
1789
+ /* @__PURE__ */ jsx("rect", { className: "absdk-predicate-login-required__icon-body", x: "10", y: "22", width: "28", height: "20", rx: "4", stroke: colors2.textSecondary, strokeWidth: "2" }),
1790
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-login-required__icon-shackle", d: "M16 22V16C16 11.5817 19.5817 8 24 8C28.4183 8 32 11.5817 32 16V22", stroke: colors2.textSecondary, strokeWidth: "2", strokeLinecap: "round" }),
1791
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-login-required__icon-core", cx: "24", cy: "33", r: "3", fill: colors2.textSecondary })
1792
+ ] });
1793
+ var LoginRequiredOverlay = ({
1794
+ title,
1795
+ onSignIn,
1796
+ onClose
1797
+ }) => {
1798
+ const isMobile = useIsMobileViewport2();
1799
+ return /* @__PURE__ */ jsx(ModalFrame2, { onClose, contentStyle: { padding: isMobile ? "32px 16px" : "48px 24px" }, children: /* @__PURE__ */ jsxs(
1800
+ "div",
1801
+ {
1802
+ className: `absdk-predicate-login-required ${isMobile ? "absdk-predicate-login-required--mobile" : "absdk-predicate-login-required--desktop"}`,
1803
+ style: {
1804
+ display: "flex",
1805
+ flexDirection: "column",
1806
+ alignItems: "center",
1807
+ gap: isMobile ? 20 : 24,
1808
+ textAlign: "center"
1809
+ },
1810
+ children: [
1811
+ /* @__PURE__ */ jsx(LockIcon, {}),
1812
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-login-required__copy", style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
1813
+ /* @__PURE__ */ jsx(
1814
+ "h2",
1815
+ {
1816
+ className: "absdk-predicate-login-required__title",
1817
+ style: {
1818
+ margin: 0,
1819
+ fontSize: isMobile ? 18 : 20,
1820
+ fontWeight: 600,
1821
+ color: colors2.textPrimary
1822
+ },
1823
+ children: title
1824
+ }
1825
+ ),
1826
+ /* @__PURE__ */ jsx(
1827
+ "p",
1828
+ {
1829
+ className: "absdk-predicate-login-required__description",
1830
+ style: {
1831
+ margin: 0,
1832
+ fontSize: 14,
1833
+ color: colors2.textSecondary,
1834
+ lineHeight: 1.5
1835
+ },
1836
+ children: "Please sign in to continue"
1837
+ }
1838
+ )
1839
+ ] }),
1840
+ onSignIn && /* @__PURE__ */ jsx(
1841
+ "button",
1842
+ {
1843
+ id: "absdk-predicate-login-required-signin-button",
1844
+ className: "absdk-predicate-login-required__signin-button",
1845
+ type: "button",
1846
+ onClick: onSignIn,
1847
+ style: {
1848
+ width: isMobile ? "100%" : void 0,
1849
+ padding: "12px 48px",
1850
+ borderRadius: radii2.full,
1851
+ border: "none",
1852
+ background: colors2.textPrimary,
1853
+ color: "#15181D",
1854
+ fontSize: 16,
1855
+ fontWeight: 500,
1856
+ fontFamily: fonts2.family,
1857
+ cursor: "pointer"
1858
+ },
1859
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-login-required__signin-button-label", children: "Sign In" })
1860
+ }
1861
+ )
1862
+ ]
1863
+ }
1864
+ ) });
1865
+ };
1866
+ function useSession() {
1867
+ const [session, setSession] = useState(
1868
+ () => sessionStore.getState().session
1869
+ );
1870
+ useEffect(() => {
1871
+ const unsub = sessionStore.on("session:changed", setSession);
1872
+ return () => {
1873
+ unsub();
1874
+ };
1875
+ }, []);
1876
+ return session;
1877
+ }
1878
+ var BackArrow = () => /* @__PURE__ */ jsx("svg", { className: "absdk-predicate-deposit-modal__back-icon", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__back-icon-path", d: "M15 6L9 12L15 18", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
1879
+ var TransferIcon = () => /* @__PURE__ */ jsxs("svg", { className: "absdk-predicate-deposit-modal__transfer-icon", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
1880
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-deposit-modal__transfer-icon-circle absdk-predicate-deposit-modal__transfer-icon-circle--outer", cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.08)" }),
1881
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-deposit-modal__transfer-icon-circle absdk-predicate-deposit-modal__transfer-icon-circle--middle", cx: "18", cy: "18", r: "7", stroke: colors2.textPrimary, strokeWidth: "1.5" }),
1882
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-deposit-modal__transfer-icon-circle absdk-predicate-deposit-modal__transfer-icon-circle--inner", cx: "18", cy: "18", r: "2.5", fill: colors2.textPrimary }),
1883
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__transfer-icon-path", d: "M18 7V11", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1884
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__transfer-icon-path", d: "M18 25V29", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1885
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__transfer-icon-path", d: "M7 18H11", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1886
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__transfer-icon-path", d: "M25 18H29", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" })
1887
+ ] });
1888
+ var FiatIcon = () => /* @__PURE__ */ jsxs("svg", { className: "absdk-predicate-deposit-modal__fiat-icon", width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
1889
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-deposit-modal__fiat-icon-circle absdk-predicate-deposit-modal__fiat-icon-circle--outer", cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.06)" }),
1890
+ /* @__PURE__ */ jsx("circle", { className: "absdk-predicate-deposit-modal__fiat-icon-circle absdk-predicate-deposit-modal__fiat-icon-circle--inner", cx: "18", cy: "18", r: "10", stroke: colors2.textSecondary, strokeWidth: "1.5" }),
1891
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__fiat-icon-path", d: "M18 12V24", stroke: colors2.textSecondary, strokeWidth: "1.5", strokeLinecap: "round" }),
1892
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-deposit-modal__fiat-icon-path", d: "M15 15.5C15 14.12 16.34 13 18 13C19.66 13 21 14.12 21 15.5C21 16.88 19.66 18 18 18C16.34 18 15 19.12 15 20.5C15 21.88 16.34 23 18 23C19.66 23 21 21.88 21 20.5", stroke: colors2.textSecondary, strokeWidth: "1.5", strokeLinecap: "round" })
1893
+ ] });
1894
+ var DefaultCryptoIcons = ({ isMobile }) => {
1895
+ const tokens = [
1896
+ { label: "B", bg: "#F7931A" },
1897
+ { label: "E", bg: "#627EEA" },
1898
+ { label: "\u2261", bg: "#26A17B" },
1899
+ { label: "$", bg: "#2775CA" },
1900
+ { label: "S", bg: "#9945FF" },
1901
+ { label: "A", bg: "#E84142" }
1902
+ ];
1903
+ return /* @__PURE__ */ jsx(
1904
+ "div",
1905
+ {
1906
+ className: "absdk-predicate-deposit-modal__crypto-icons",
1907
+ style: {
1908
+ display: "flex",
1909
+ gap: 0,
1910
+ flexWrap: isMobile ? "wrap" : "nowrap",
1911
+ width: isMobile ? 84 : void 0,
1912
+ justifyContent: isMobile ? "flex-end" : "flex-start",
1913
+ rowGap: isMobile ? 4 : 0,
1914
+ padding: "10px 0 0 4px"
1915
+ },
1916
+ children: tokens.map((t, i) => /* @__PURE__ */ jsx(
1917
+ "div",
1918
+ {
1919
+ className: `absdk-predicate-deposit-modal__crypto-icon absdk-predicate-deposit-modal__crypto-icon--${i + 1}`,
1920
+ style: {
1921
+ width: 24,
1922
+ height: 24,
1923
+ borderRadius: "50%",
1924
+ background: t.bg,
1925
+ display: "flex",
1926
+ alignItems: "center",
1927
+ justifyContent: "center",
1928
+ fontSize: 11,
1929
+ fontWeight: 700,
1930
+ color: "#fff",
1931
+ marginLeft: -4,
1932
+ marginTop: -10,
1933
+ border: `2px solid ${colors2.card}`,
1934
+ boxSizing: "content-box"
1935
+ },
1936
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__crypto-icon-label", children: t.label })
1937
+ },
1938
+ i
1939
+ ))
1940
+ }
1941
+ );
1942
+ };
1943
+ function chainsToTokenOptions(chains) {
1944
+ const bySymbol = /* @__PURE__ */ new Map();
1945
+ for (const c of chains) {
1946
+ for (const t of c.tokens) {
1947
+ if (!bySymbol.has(t.symbol)) bySymbol.set(t.symbol, { symbol: t.symbol, decimals: t.decimals });
1948
+ }
1949
+ }
1950
+ return Array.from(bySymbol.entries()).map(([id, { symbol }]) => ({
1951
+ id,
1952
+ label: symbol,
1953
+ subtitle: symbol
1954
+ }));
1955
+ }
1956
+ function chainsToChainOptionsForToken(chains, tokenSymbol) {
1957
+ return chains.filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol)).map((c) => ({
1958
+ id: c.chain_id,
1959
+ label: c.network,
1960
+ subtitle: `chainId: ${c.chain_id}`,
1961
+ icon: /* @__PURE__ */ jsx(
1962
+ "span",
1963
+ {
1964
+ style: {
1965
+ display: "inline-flex",
1966
+ alignItems: "center",
1967
+ justifyContent: "center",
1968
+ minWidth: 28,
1969
+ height: 28,
1970
+ padding: "0 6px",
1971
+ borderRadius: radii2.card,
1972
+ background: "rgba(255,255,255,0.08)",
1973
+ fontSize: 12,
1974
+ fontWeight: 600,
1975
+ color: colors2.textPrimary,
1976
+ fontFamily: fonts2.family
1977
+ },
1978
+ children: c.network
1979
+ }
1980
+ )
1981
+ }));
1982
+ }
1983
+ function getTokenAddressForChain(chains, chainId, tokenSymbol) {
1984
+ const chain = chains.find((c) => c.chain_id === chainId);
1985
+ return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
1986
+ }
1987
+ var FUNDING_TOKEN_SYMBOL = getEnv("FUNDING_TOKEN_SYMBOL");
1988
+ var DepositModal = ({
1989
+ token,
1990
+ chain,
1991
+ tokenOptions: tokenOptionsProp,
1992
+ chainOptions: chainOptionsProp,
1993
+ depositAddress,
1994
+ minimumDeposit,
1995
+ qrCenterIcon,
1996
+ cryptoIcons,
1997
+ depositAmount,
1998
+ onShowToast,
1999
+ txHash,
2000
+ explorerTxUrl,
2001
+ onTokenSelect,
2002
+ onChainSelect,
2003
+ onCopyAddress,
2004
+ onBuyCrypto,
2005
+ onSignIn,
2006
+ onBack,
2007
+ onClose
2008
+ }) => {
2009
+ const isMobile = useIsMobileViewport2();
2010
+ const session = useSession();
2011
+ const [view, setView] = useState("entry");
2012
+ const [copySuccessMessage, setCopySuccessMessage] = useState(null);
2013
+ const [apiChains, setApiChains] = useState(null);
2014
+ const [apiQuote, setApiQuote] = useState(null);
2015
+ const [loadingChains, setLoadingChains] = useState(false);
2016
+ const [loadingQuote, setLoadingQuote] = useState(false);
2017
+ const [quoteRefreshKey, setQuoteRefreshKey] = useState(0);
2018
+ const [internalDepositAddress, setInternalDepositAddress] = useState(void 0);
2019
+ const lastEmittedAddressRef = useRef(void 0);
2020
+ const lastEmittedChainRef = useRef(void 0);
2021
+ const tokenOptions = useMemo(() => {
2022
+ if (tokenOptionsProp?.length) return tokenOptionsProp;
2023
+ if (!apiChains?.length) return void 0;
2024
+ return chainsToTokenOptions(apiChains);
2025
+ }, [tokenOptionsProp, apiChains]);
2026
+ const chainOptions = useMemo(() => {
2027
+ if (chainOptionsProp?.length) return chainOptionsProp;
2028
+ if (!apiChains?.length || !token) return void 0;
2029
+ return chainsToChainOptionsForToken(apiChains, token);
2030
+ }, [chainOptionsProp, apiChains, token]);
2031
+ useEffect(() => {
2032
+ if (chainOptions?.length !== 1 || !onChainSelect) return;
2033
+ const onlyId = chainOptions[0].id;
2034
+ if (chain === onlyId) return;
2035
+ onChainSelect(onlyId);
2036
+ }, [chainOptions, chain, onChainSelect]);
2037
+ useEffect(() => {
2038
+ if (view !== "transfer") return;
2039
+ setLoadingChains(true);
2040
+ getChains().then((res) => setApiChains(res?.chains ?? {})).finally(() => setLoadingChains(false));
2041
+ }, [view]);
2042
+ useEffect(() => {
2043
+ if (view !== "transfer") return;
2044
+ if (!session?.address || !chain) return;
2045
+ const platform_contract_address = getEnv("PLATFORM_CONTRACT_ADDRESS") || session.address;
2046
+ registerPlatform({
2047
+ platform_contract_address,
2048
+ chain_id: chain
2049
+ }).then((res) => {
2050
+ if (res?.deposit_address) {
2051
+ setInternalDepositAddress(res.deposit_address);
2052
+ }
2053
+ }).catch(() => {
2054
+ });
2055
+ }, [view, chain, session?.address]);
2056
+ useEffect(() => {
2057
+ if (!apiChains?.length || !token || !chain) {
2058
+ setApiQuote(null);
2059
+ return;
2060
+ }
2061
+ const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
2062
+ if (!tokenAddress) {
2063
+ setApiQuote(null);
2064
+ return;
2065
+ }
2066
+ setLoadingQuote(true);
2067
+ quote({
2068
+ direction: "deposit",
2069
+ chain_id: chain,
2070
+ token_address: tokenAddress,
2071
+ token_amount: depositAmount || void 0
2072
+ }).then((q) => setApiQuote(q ?? null)).catch((err) => {
2073
+ const message = err?.message ?? String(err);
2074
+ if (onShowToast) onShowToast(message);
2075
+ setApiQuote({
2076
+ token_address: tokenAddress,
2077
+ token_symbol: token,
2078
+ token_decimals: 18,
2079
+ rate: "1",
2080
+ chain_id: Number(chain) || 56,
2081
+ deposit_address: "0x" + "0".repeat(39) + "1",
2082
+ dst_token_amount: depositAmount ?? "0",
2083
+ expires_at: new Date(Date.now() + 6e4).toISOString()
2084
+ });
2085
+ }).finally(() => setLoadingQuote(false));
2086
+ }, [apiChains, token, chain, depositAmount, quoteRefreshKey, onShowToast]);
2087
+ useEffect(() => {
2088
+ if (!chain) return;
2089
+ if (!depositAddress) return;
2090
+ if (lastEmittedAddressRef.current === depositAddress && lastEmittedChainRef.current === chain) {
2091
+ return;
2092
+ }
2093
+ lastEmittedAddressRef.current = depositAddress;
2094
+ lastEmittedChainRef.current = chain;
2095
+ }, [depositAddress, chain]);
2096
+ const handleQuoteExpired = useCallback(() => {
2097
+ setQuoteRefreshKey((k) => k + 1);
2098
+ }, []);
2099
+ useEffect(() => {
2100
+ if (txHash && chain && onShowToast) {
2101
+ onShowToast("Transfer confirmed");
2102
+ }
2103
+ }, [txHash, chain, onShowToast]);
2104
+ if (!session) {
2105
+ return /* @__PURE__ */ jsx(LoginRequiredOverlay, { title: "Deposit", onSignIn, onClose });
2106
+ }
2107
+ const goToEntry = () => {
2108
+ setView("entry");
2109
+ onBack?.();
2110
+ };
2111
+ const handleCopyAddress = useCallback((address) => {
2112
+ onCopyAddress?.(address);
2113
+ onShowToast?.("Address copied");
2114
+ setCopySuccessMessage("Address copied");
2115
+ }, [onCopyAddress, onShowToast]);
2116
+ useEffect(() => {
2117
+ if (!copySuccessMessage) return;
2118
+ const t = setTimeout(() => setCopySuccessMessage(null), 2e3);
2119
+ return () => clearTimeout(t);
2120
+ }, [copySuccessMessage]);
2121
+ return /* @__PURE__ */ jsxs(
2122
+ ModalFrame2,
2123
+ {
2124
+ onClose,
2125
+ contentStyle: { padding: isMobile ? "20px 16px" : "24px", position: "relative" },
2126
+ children: [
2127
+ copySuccessMessage && /* @__PURE__ */ jsx(
2128
+ "div",
2129
+ {
2130
+ className: "absdk-predicate-deposit-modal__toast",
2131
+ style: {
2132
+ position: "absolute",
2133
+ top: 12,
2134
+ left: 0,
2135
+ right: 0,
2136
+ display: "flex",
2137
+ justifyContent: "center",
2138
+ pointerEvents: "none",
2139
+ zIndex: 10
2140
+ },
2141
+ children: /* @__PURE__ */ jsx(
2142
+ "div",
2143
+ {
2144
+ className: "absdk-predicate-deposit-modal__toast-content",
2145
+ style: {
2146
+ pointerEvents: "auto",
2147
+ padding: "10px 20px",
2148
+ borderRadius: 8,
2149
+ background: "var(--pm-colors-card, #1a1a2e)",
2150
+ color: "var(--pm-colors-textPrimary, #fff)",
2151
+ fontSize: 13,
2152
+ fontWeight: 500,
2153
+ boxShadow: "0 4px 12px rgba(0,0,0,.25)"
2154
+ },
2155
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__toast-message", children: copySuccessMessage })
2156
+ }
2157
+ )
2158
+ }
2159
+ ),
2160
+ /* @__PURE__ */ jsx(
2161
+ "div",
2162
+ {
2163
+ id: "absdk-predicate-deposit-modal",
2164
+ className: `absdk-predicate-deposit-modal ${isMobile ? "absdk-predicate-deposit-modal--mobile" : "absdk-predicate-deposit-modal--desktop"}`,
2165
+ children: view === "entry" ? /* @__PURE__ */ jsx(
2166
+ EntryView,
2167
+ {
2168
+ isMobile,
2169
+ cryptoIcons,
2170
+ onTransferCrypto: () => setView("transfer"),
2171
+ onBuyCrypto
2172
+ }
2173
+ ) : /* @__PURE__ */ jsx(
2174
+ TransferView,
2175
+ {
2176
+ isMobile,
2177
+ token,
2178
+ chain,
2179
+ tokenOptions,
2180
+ chainOptions,
2181
+ depositAddress: depositAddress ?? internalDepositAddress,
2182
+ minimumDeposit,
2183
+ qrCenterIcon,
2184
+ quote: apiQuote,
2185
+ quoteLoading: loadingQuote,
2186
+ txHash,
2187
+ chainIdForExplorer: chain,
2188
+ explorerTxUrl,
2189
+ loadingChains,
2190
+ onTokenSelect,
2191
+ onChainSelect,
2192
+ onCopyAddress: handleCopyAddress,
2193
+ onQuoteExpired: handleQuoteExpired,
2194
+ onRefreshQuote: () => {
2195
+ if (!apiChains?.length || !token || !chain) return;
2196
+ const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
2197
+ if (tokenAddress) {
2198
+ setLoadingQuote(true);
2199
+ quote({ direction: "deposit", chain_id: chain, token_address: tokenAddress, token_amount: depositAmount }).then((q) => setApiQuote(q ?? null)).catch(() => {
2200
+ setApiQuote({
2201
+ token_address: tokenAddress,
2202
+ token_symbol: token,
2203
+ token_decimals: 18,
2204
+ rate: "1",
2205
+ chain_id: Number(chain) || 56,
2206
+ deposit_address: "0x" + "0".repeat(39) + "1",
2207
+ dst_token_amount: depositAmount ?? "0",
2208
+ expires_at: new Date(Date.now() + 6e4).toISOString()
2209
+ });
2210
+ }).finally(() => setLoadingQuote(false));
2211
+ }
2212
+ },
2213
+ onShowToast,
2214
+ onBack: goToEntry
2215
+ }
2216
+ )
2217
+ }
2218
+ )
2219
+ ]
2220
+ }
2221
+ );
2222
+ };
2223
+ var EntryView = ({
2224
+ isMobile,
2225
+ cryptoIcons,
2226
+ onTransferCrypto,
2227
+ onBuyCrypto: _onBuyCrypto
2228
+ }) => /* @__PURE__ */ jsxs(
2229
+ "div",
2230
+ {
2231
+ className: "absdk-predicate-deposit-modal__entry",
2232
+ style: { display: "flex", flexDirection: "column", gap: isMobile ? 20 : 24 },
2233
+ children: [
2234
+ /* @__PURE__ */ jsx(
2235
+ "h2",
2236
+ {
2237
+ className: "absdk-predicate-deposit-modal__title",
2238
+ style: { margin: 0, fontSize: isMobile ? 22 : 24, fontWeight: 600, lineHeight: 1.4 },
2239
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__title-text", children: "Deposit" })
2240
+ }
2241
+ ),
2242
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-modal__actions", style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
2243
+ /* @__PURE__ */ jsxs(
2244
+ "button",
2245
+ {
2246
+ id: "absdk-predicate-deposit-modal-transfer-button",
2247
+ className: "absdk-predicate-deposit-modal__action absdk-predicate-deposit-modal__action--primary",
2248
+ type: "button",
2249
+ onClick: onTransferCrypto,
2250
+ style: {
2251
+ display: "flex",
2252
+ alignItems: "center",
2253
+ gap: isMobile ? 12 : 14,
2254
+ padding: isMobile ? "16px" : "18px 20px",
2255
+ borderRadius: radii2.card,
2256
+ border: `1px solid ${colors2.border}`,
2257
+ background: "transparent",
2258
+ cursor: "pointer",
2259
+ textAlign: "left",
2260
+ fontFamily: fonts2.family,
2261
+ width: "100%",
2262
+ transition: "border-color .15s"
2263
+ },
2264
+ onMouseEnter: (e) => {
2265
+ e.target.closest("button").style.borderColor = colors2.borderStrong;
2266
+ },
2267
+ onMouseLeave: (e) => {
2268
+ e.target.closest("button").style.borderColor = colors2.border;
2269
+ },
2270
+ children: [
2271
+ /* @__PURE__ */ jsx(TransferIcon, {}),
2272
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-modal__action-copy", style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [
2273
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-title", style: { color: colors2.textPrimary, fontSize: 16, fontWeight: 600 }, children: "Transfer Crypto" }),
2274
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-subtitle", style: { color: colors2.textSecondary, fontSize: 13 }, children: "No limit \xB7 Instant" })
2275
+ ] }),
2276
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-trailing", children: cryptoIcons ?? /* @__PURE__ */ jsx(DefaultCryptoIcons, { isMobile }) })
2277
+ ]
2278
+ }
2279
+ ),
2280
+ /* @__PURE__ */ jsxs(
2281
+ "div",
2282
+ {
2283
+ className: "absdk-predicate-deposit-modal__action absdk-predicate-deposit-modal__action--secondary",
2284
+ style: {
2285
+ display: "flex",
2286
+ alignItems: "center",
2287
+ gap: isMobile ? 12 : 14,
2288
+ padding: isMobile ? "16px" : "18px 20px",
2289
+ borderRadius: radii2.card,
2290
+ border: `1px solid ${colors2.border}`,
2291
+ opacity: 0.55
2292
+ },
2293
+ children: [
2294
+ /* @__PURE__ */ jsx(FiatIcon, {}),
2295
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-modal__action-copy", style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [
2296
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-title", style: { color: colors2.textSecondary, fontSize: 16, fontWeight: 600 }, children: "Buy Crypto" }),
2297
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-subtitle", style: { color: colors2.textSecondary, fontSize: 13 }, children: "Debit card, credit card, ACH" })
2298
+ ] }),
2299
+ /* @__PURE__ */ jsx(
2300
+ "span",
2301
+ {
2302
+ className: "absdk-predicate-deposit-modal__action-badge",
2303
+ style: {
2304
+ padding: "5px 12px",
2305
+ borderRadius: radii2.pill,
2306
+ border: `1px solid ${colors2.border}`,
2307
+ fontSize: 12,
2308
+ fontWeight: 500,
2309
+ color: colors2.textSecondary,
2310
+ whiteSpace: "nowrap"
2311
+ },
2312
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__action-badge-text", children: "Coming Soon" })
2313
+ }
2314
+ )
2315
+ ]
2316
+ }
2317
+ )
2318
+ ] })
2319
+ ]
2320
+ }
2321
+ );
2322
+ var TransferView = ({
2323
+ isMobile,
2324
+ token,
2325
+ chain,
2326
+ tokenOptions,
2327
+ chainOptions,
2328
+ depositAddress,
2329
+ minimumDeposit,
2330
+ qrCenterIcon,
2331
+ quote: quoteData,
2332
+ quoteLoading,
2333
+ txHash,
2334
+ chainIdForExplorer,
2335
+ explorerTxUrl,
2336
+ loadingChains,
2337
+ onTokenSelect,
2338
+ onChainSelect,
2339
+ onCopyAddress,
2340
+ onQuoteExpired,
2341
+ onRefreshQuote,
2342
+ onShowToast,
2343
+ onBack
2344
+ }) => {
2345
+ const activeStep = chain ? 2 : token ? 1 : 0;
2346
+ const stepActive = [!!token, !!chain, !!quoteData];
2347
+ const quoteExpired = useMemo(() => {
2348
+ if (!quoteData?.expires_at) return false;
2349
+ try {
2350
+ return new Date(quoteData.expires_at).getTime() < Date.now();
2351
+ } catch {
2352
+ return false;
2353
+ }
2354
+ }, [quoteData?.expires_at]);
2355
+ const didToastWait = useRef(false);
2356
+ useEffect(() => {
2357
+ if (!depositAddress || !onShowToast || didToastWait.current) return;
2358
+ didToastWait.current = true;
2359
+ onShowToast("Please wait for deposit-address balance to update");
2360
+ }, [depositAddress, onShowToast]);
2361
+ return /* @__PURE__ */ jsxs(
2362
+ "div",
2363
+ {
2364
+ className: "absdk-predicate-deposit-modal__transfer",
2365
+ style: { display: "flex", flexDirection: "column", gap: isMobile ? 20 : 24 },
2366
+ children: [
2367
+ /* @__PURE__ */ jsx(
2368
+ "div",
2369
+ {
2370
+ className: "absdk-predicate-deposit-modal__header",
2371
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
2372
+ children: /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-modal__header-main", style: { display: "flex", alignItems: "center", gap: 12 }, children: [
2373
+ onBack && /* @__PURE__ */ jsx(
2374
+ "button",
2375
+ {
2376
+ id: "absdk-predicate-deposit-modal-back-button",
2377
+ className: "absdk-predicate-deposit-modal__back-button",
2378
+ type: "button",
2379
+ onClick: onBack,
2380
+ style: {
2381
+ background: "transparent",
2382
+ border: "none",
2383
+ cursor: "pointer",
2384
+ padding: 0,
2385
+ display: "flex",
2386
+ alignItems: "center"
2387
+ },
2388
+ children: /* @__PURE__ */ jsx(BackArrow, {})
2389
+ }
2390
+ ),
2391
+ /* @__PURE__ */ jsx(
2392
+ "h2",
2393
+ {
2394
+ className: "absdk-predicate-deposit-modal__title",
2395
+ style: { margin: 0, fontSize: isMobile ? 22 : 24, fontWeight: 600, lineHeight: 1.4 },
2396
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__title-text", children: "Transfer Crypto" })
2397
+ }
2398
+ )
2399
+ ] })
2400
+ }
2401
+ ),
2402
+ /* @__PURE__ */ jsxs(
2403
+ "div",
2404
+ {
2405
+ className: "absdk-predicate-deposit-modal__body",
2406
+ style: { display: "flex", flexDirection: isMobile ? "column" : "row", gap: 16, position: "relative" },
2407
+ children: [
2408
+ /* @__PURE__ */ jsx(
2409
+ StepIndicator,
2410
+ {
2411
+ steps: 3,
2412
+ stepActive,
2413
+ activeStep,
2414
+ orientation: isMobile ? "horizontal" : "vertical"
2415
+ }
2416
+ ),
2417
+ /* @__PURE__ */ jsxs(
2418
+ "div",
2419
+ {
2420
+ className: "absdk-predicate-deposit-modal__form",
2421
+ style: { flex: 1, display: "flex", flexDirection: "column", gap: isMobile ? 24 : 40 },
2422
+ children: [
2423
+ /* @__PURE__ */ jsx(
2424
+ DropdownField,
2425
+ {
2426
+ wrapperClassName: "absdk-predicate-deposit-modal__field absdk-predicate-deposit-modal__field--token",
2427
+ triggerId: "absdk-predicate-deposit-modal-token-select",
2428
+ label: "Select token",
2429
+ placeholder: loadingChains ? "Loading\u2026" : "Token",
2430
+ value: token,
2431
+ options: tokenOptions,
2432
+ onSelect: onTokenSelect
2433
+ }
2434
+ ),
2435
+ /* @__PURE__ */ jsx(
2436
+ DropdownField,
2437
+ {
2438
+ wrapperClassName: "absdk-predicate-deposit-modal__field absdk-predicate-deposit-modal__field--chain",
2439
+ triggerId: "absdk-predicate-deposit-modal-chain-select",
2440
+ label: "Select chain",
2441
+ placeholder: loadingChains ? "Loading\u2026" : "Chain",
2442
+ value: chain,
2443
+ options: chainOptions,
2444
+ onSelect: onChainSelect
2445
+ }
2446
+ ),
2447
+ quoteData && token && chain && /* @__PURE__ */ jsxs(
2448
+ "div",
2449
+ {
2450
+ id: "absdk-predicate-deposit-modal-quote-panel",
2451
+ className: "absdk-predicate-deposit-modal__quote-panel",
2452
+ style: {
2453
+ padding: "12px 16px",
2454
+ borderRadius: radii2.card,
2455
+ margin: "-10px 0",
2456
+ border: `1px solid ${colors2.border}`,
2457
+ display: "flex",
2458
+ flexDirection: "column",
2459
+ gap: 8
2460
+ },
2461
+ children: [
2462
+ /* @__PURE__ */ jsx(
2463
+ "div",
2464
+ {
2465
+ className: "absdk-predicate-deposit-modal__quote-rate-row",
2466
+ style: { minHeight: 18, display: "flex", alignItems: "center" },
2467
+ children: quoteLoading ? /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__quote-loading", style: { fontSize: 13, color: colors2.textSecondary }, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-deposit-modal__quote-rate", style: { fontSize: 13, color: colors2.textSecondary }, children: [
2468
+ "1 ",
2469
+ quoteData.token_symbol,
2470
+ " = ",
2471
+ quoteData.rate,
2472
+ " ",
2473
+ FUNDING_TOKEN_SYMBOL
2474
+ ] })
2475
+ }
2476
+ ),
2477
+ !quoteLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
2478
+ quoteData.expires_at && /* @__PURE__ */ jsx(
2479
+ Countdown,
2480
+ {
2481
+ expiresAt: quoteData.expires_at,
2482
+ isExpired: quoteExpired,
2483
+ onExpired: onQuoteExpired
2484
+ }
2485
+ ),
2486
+ quoteExpired && /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-deposit-modal__quote-expired", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2487
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__quote-expired-text", style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }),
2488
+ onRefreshQuote && /* @__PURE__ */ jsx(
2489
+ "button",
2490
+ {
2491
+ className: "absdk-predicate-deposit-modal__quote-refresh-button",
2492
+ type: "button",
2493
+ onClick: onRefreshQuote,
2494
+ style: {
2495
+ padding: "4px 12px",
2496
+ fontSize: 12,
2497
+ borderRadius: radii2.pill,
2498
+ border: `1px solid ${colors2.border}`,
2499
+ background: "transparent",
2500
+ color: colors2.textPrimary,
2501
+ cursor: "pointer",
2502
+ fontFamily: fonts2.family
2503
+ },
2504
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__quote-refresh-button-label", children: "Refresh" })
2505
+ }
2506
+ )
2507
+ ] })
2508
+ ] })
2509
+ ]
2510
+ }
2511
+ ),
2512
+ /* @__PURE__ */ jsxs(
2513
+ "div",
2514
+ {
2515
+ id: "absdk-predicate-deposit-modal-details",
2516
+ className: "absdk-predicate-deposit-modal__details",
2517
+ style: { display: "flex", flexDirection: "column", gap: 8, marginTop: isMobile ? 0 : "-5px" },
2518
+ children: [
2519
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__details-title", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Deposit details" }),
2520
+ depositAddress ? /* @__PURE__ */ jsxs(Fragment, { children: [
2521
+ /* @__PURE__ */ jsx(
2522
+ DepositDetailsPanel,
2523
+ {
2524
+ address: depositAddress,
2525
+ tokenIcon: qrCenterIcon,
2526
+ minimumDeposit,
2527
+ onCopyAddress
2528
+ }
2529
+ ),
2530
+ txHash && chainIdForExplorer && explorerTxUrl && /* @__PURE__ */ jsx(
2531
+ "a",
2532
+ {
2533
+ className: "absdk-predicate-deposit-modal__explorer-link",
2534
+ href: explorerTxUrl(chainIdForExplorer, txHash),
2535
+ target: "_blank",
2536
+ rel: "noopener noreferrer",
2537
+ style: {
2538
+ fontSize: 13,
2539
+ color: colors2.textPrimary,
2540
+ textDecoration: "underline"
2541
+ },
2542
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__explorer-link-text", children: "View on explorer" })
2543
+ }
2544
+ )
2545
+ ] }) : /* @__PURE__ */ jsx(
2546
+ "div",
2547
+ {
2548
+ className: "absdk-predicate-deposit-modal__details-empty",
2549
+ style: {
2550
+ padding: "20px",
2551
+ borderRadius: radii2.card,
2552
+ border: `1px solid ${colors2.border}`,
2553
+ color: colors2.textSecondary,
2554
+ fontSize: 13,
2555
+ textAlign: "center"
2556
+ },
2557
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-deposit-modal__details-empty-text", children: "Select token and chain to view deposit details" })
2558
+ }
2559
+ )
2560
+ ]
2561
+ }
2562
+ )
2563
+ ]
2564
+ }
2565
+ )
2566
+ ]
2567
+ }
2568
+ )
2569
+ ]
2570
+ }
2571
+ );
2572
+ };
2573
+ var SuccessIcon = () => {
2574
+ return /* @__PURE__ */ jsxs("svg", { width: "80", height: "81", viewBox: "0 0 80 81", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2575
+ /* @__PURE__ */ jsx(
2576
+ "path",
2577
+ {
2578
+ d: "M40 80.5C62.0914 80.5 80 62.5914 80 40.5C80 18.4086 62.0914 0.5 40 0.5C17.9086 0.5 0 18.4086 0 40.5C0 62.5914 17.9086 80.5 40 80.5Z",
2579
+ fill: "#627EEA"
2580
+ }
2581
+ ),
2582
+ /* @__PURE__ */ jsx(
2583
+ "path",
2584
+ {
2585
+ d: "M38.999 16.5V34.2437L53.9962 40.9451L38.999 16.5Z",
2586
+ fill: "white",
2587
+ fillOpacity: "0.602"
2588
+ }
2589
+ ),
2590
+ /* @__PURE__ */ jsx("path", { d: "M38.9991 16.5L24 40.9451L38.9991 34.2437V16.5Z", fill: "white" }),
2591
+ /* @__PURE__ */ jsx(
2592
+ "path",
2593
+ {
2594
+ d: "M38.999 52.4434V64.4999L54.0061 43.7376L38.999 52.4434Z",
2595
+ fill: "white",
2596
+ fillOpacity: "0.602"
2597
+ }
2598
+ ),
2599
+ /* @__PURE__ */ jsx("path", { d: "M38.9991 64.4999V52.4414L24 43.7376L38.9991 64.4999Z", fill: "white" }),
2600
+ /* @__PURE__ */ jsx(
2601
+ "path",
2602
+ {
2603
+ d: "M38.999 49.653L53.9962 40.9451L38.999 34.2477V49.653Z",
2604
+ fill: "white",
2605
+ fillOpacity: "0.2"
2606
+ }
2607
+ ),
2608
+ /* @__PURE__ */ jsx(
2609
+ "path",
2610
+ {
2611
+ d: "M24 40.9451L38.9991 49.653V34.2477L24 40.9451Z",
2612
+ fill: "white",
2613
+ fillOpacity: "0.602"
2614
+ }
2615
+ ),
2616
+ /* @__PURE__ */ jsx("g", { filter: "url(#filter0_ii_34_1690)", children: /* @__PURE__ */ jsx("circle", { cx: "40", cy: "40", r: "40", fill: "url(#paint0_linear_34_1690)" }) }),
2617
+ /* @__PURE__ */ jsx(
2618
+ "path",
2619
+ {
2620
+ d: "M25.8057 35.9858L38.7921 49.0324L56.7734 30.9678",
2621
+ stroke: "#58AE36",
2622
+ strokeWidth: "5.16129",
2623
+ fill: "none"
2624
+ }
2625
+ ),
2626
+ /* @__PURE__ */ jsxs("defs", { children: [
2627
+ /* @__PURE__ */ jsxs(
2628
+ "filter",
2629
+ {
2630
+ id: "filter0_ii_34_1690",
2631
+ x: "0",
2632
+ y: "0",
2633
+ width: "80",
2634
+ height: "80",
2635
+ filterUnits: "userSpaceOnUse",
2636
+ colorInterpolationFilters: "sRGB",
2637
+ children: [
2638
+ /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
2639
+ /* @__PURE__ */ jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
2640
+ /* @__PURE__ */ jsx(
2641
+ "feColorMatrix",
2642
+ {
2643
+ in: "SourceAlpha",
2644
+ type: "matrix",
2645
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
2646
+ result: "hardAlpha"
2647
+ }
2648
+ ),
2649
+ /* @__PURE__ */ jsx("feOffset", { dx: "-1.29032", dy: "-1.29032" }),
2650
+ /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
2651
+ /* @__PURE__ */ jsx(
2652
+ "feColorMatrix",
2653
+ {
2654
+ type: "matrix",
2655
+ values: "0 0 0 0 0.584745 0 0 0 0 1 0 0 0 0 0.420982 0 0 0 1 0"
2656
+ }
2657
+ ),
2658
+ /* @__PURE__ */ jsx("feBlend", { mode: "multiply", in2: "shape", result: "effect1_innerShadow_34_1690" }),
2659
+ /* @__PURE__ */ jsx(
2660
+ "feColorMatrix",
2661
+ {
2662
+ in: "SourceAlpha",
2663
+ type: "matrix",
2664
+ values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
2665
+ result: "hardAlpha"
2666
+ }
2667
+ ),
2668
+ /* @__PURE__ */ jsx("feOffset", { dx: "1.29032", dy: "1.29032" }),
2669
+ /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
2670
+ /* @__PURE__ */ jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" }),
2671
+ /* @__PURE__ */ jsx("feBlend", { mode: "normal", in2: "effect1_innerShadow_34_1690", result: "effect2_innerShadow_34_1690" })
2672
+ ]
2673
+ }
2674
+ ),
2675
+ /* @__PURE__ */ jsxs(
2676
+ "linearGradient",
2677
+ {
2678
+ id: "paint0_linear_34_1690",
2679
+ x1: "27.4722",
2680
+ y1: "7.62951",
2681
+ x2: "70.4313",
2682
+ y2: "26.563",
2683
+ gradientUnits: "userSpaceOnUse",
2684
+ children: [
2685
+ /* @__PURE__ */ jsx("stop", { stopColor: "#BBFFA1" }),
2686
+ /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#ACFE8B" })
2687
+ ]
2688
+ }
2689
+ )
2690
+ ] })
2691
+ ] });
2692
+ };
2693
+ function CopyIcon2() {
2694
+ return /* @__PURE__ */ jsxs("svg", { className: "absdk-predicate-withdraw-modal__copy-icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
2695
+ /* @__PURE__ */ jsx("rect", { className: "absdk-predicate-withdraw-modal__copy-icon-rect", x: "5", y: "5", width: "9", height: "9", rx: "1", stroke: "currentColor", strokeWidth: "1.2", fill: "none" }),
2696
+ /* @__PURE__ */ jsx("path", { className: "absdk-predicate-withdraw-modal__copy-icon-path", d: "M3 11V3a1 1 0 0 1 1-1h8", stroke: "currentColor", strokeWidth: "1.2", fill: "none" })
2697
+ ] });
2698
+ }
2699
+ var FUNDING_TOKEN_SYMBOL2 = getEnv("FUNDING_TOKEN_SYMBOL");
2700
+ function chainsToTokenOptions2(chains) {
2701
+ const bySymbol = /* @__PURE__ */ new Map();
2702
+ for (const c of chains) {
2703
+ for (const t of c.tokens) {
2704
+ if (!bySymbol.has(t.symbol)) bySymbol.set(t.symbol, t.symbol);
2705
+ }
2706
+ }
2707
+ return Array.from(bySymbol.entries()).map(([id, symbol]) => ({
2708
+ id,
2709
+ label: symbol,
2710
+ subtitle: symbol
2711
+ }));
2712
+ }
2713
+ function chainsToChainOptionsForToken2(chains, tokenSymbol) {
2714
+ return chains.filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol)).map((c) => ({ id: c.chain_id, label: c.network, subtitle: c.chain_id }));
2715
+ }
2716
+ function getTokenAddressForChain2(chains, chainId, tokenSymbol) {
2717
+ const chain = chains.find((c) => c.chain_id === chainId);
2718
+ return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
2719
+ }
2720
+ function parseBalanceNumber(balance) {
2721
+ const match = balance.trim().match(/^(\d*\.?\d*)/);
2722
+ if (!match) return null;
2723
+ const n = Number(match[1]);
2724
+ return Number.isNaN(n) ? null : n;
2725
+ }
2726
+ function formatBalanceTo2Decimals(balance) {
2727
+ const match = balance.trim().match(/^(\d*\.?\d*)(.*)$/);
2728
+ if (!match) return balance;
2729
+ const numPart = match[1];
2730
+ const suffix = match[2].trim() ? " " + match[2].trim() : "";
2731
+ const n = Number(numPart);
2732
+ if (Number.isNaN(n)) return balance;
2733
+ const formatted = n.toFixed(2);
2734
+ return formatted + suffix;
2735
+ }
2736
+ function weiToEtherDisplay(wei) {
2737
+ const s = (wei || "0").trim().replace(/^0+/, "") || "0";
2738
+ if (s === "0") return "0";
2739
+ const padded = s.padStart(19, "0");
2740
+ const intPart = padded.slice(0, Math.max(0, padded.length - 18));
2741
+ const decPart = padded.slice(-18).replace(/0+$/, "");
2742
+ const combined = decPart ? `${intPart}.${decPart}` : intPart;
2743
+ const num = Number(combined);
2744
+ if (Number.isNaN(num)) return wei;
2745
+ const fixed = num.toFixed(6).replace(/\.?0+$/, "");
2746
+ return fixed;
2747
+ }
2748
+ function findScrollableAncestor(node) {
2749
+ let current = node?.parentElement ?? null;
2750
+ while (current) {
2751
+ if (current.scrollHeight > current.clientHeight + 1) {
2752
+ return current;
2753
+ }
2754
+ current = current.parentElement;
2755
+ }
2756
+ return null;
2757
+ }
2758
+ var POLL_INTERVAL_MS = 4e3;
2759
+ var WithdrawModal = ({
2760
+ address = "",
2761
+ token,
2762
+ tokenSymbol,
2763
+ chain,
2764
+ amount = "",
2765
+ balance,
2766
+ status = "idle",
2767
+ receiveAmount: receiveAmountProp,
2768
+ txHash,
2769
+ tokenOptions: tokenOptionsProp,
2770
+ chainOptions: chainOptionsProp,
2771
+ useMerchantApi = false,
2772
+ orderId,
2773
+ withdrawMode,
2774
+ withdrawDirectResult,
2775
+ feeDisplay,
2776
+ fundingChainId,
2777
+ onShowToast,
2778
+ onAddressChange,
2779
+ onTokenSelect,
2780
+ onChainSelect,
2781
+ onAmountChange,
2782
+ onMaxClick,
2783
+ onSubmit,
2784
+ onWithdrawCompleted,
2785
+ onStartAnotherWithdrawal,
2786
+ onSignIn,
2787
+ onClose
2788
+ }) => {
2789
+ const isMobile = useIsMobileViewport2();
2790
+ const session = useSession();
2791
+ const addressInputRef = useRef(null);
2792
+ const footerRef = useRef(null);
2793
+ const [addressInputFocused, setAddressInputFocused] = useState(false);
2794
+ const [amountInputFocused, setAmountInputFocused] = useState(false);
2795
+ const [apiChains, setApiChains] = useState(null);
2796
+ const [apiQuote, setApiQuote] = useState(null);
2797
+ const [withdrawOrder, setWithdrawOrder] = useState(null);
2798
+ const [loadingChains, setLoadingChains] = useState(false);
2799
+ const [loadingQuote, setLoadingQuote] = useState(false);
2800
+ const tokenOptions = useMemo(() => {
2801
+ const raw = tokenOptionsProp?.length ? tokenOptionsProp : apiChains?.length ? chainsToTokenOptions2(apiChains) : void 0;
2802
+ if (!raw?.length) return void 0;
2803
+ return raw;
2804
+ }, [tokenOptionsProp, apiChains]);
2805
+ const chainOptions = useMemo(() => {
2806
+ if (chainOptionsProp?.length) return chainOptionsProp;
2807
+ if (!apiChains?.length || !token) return void 0;
2808
+ return chainsToChainOptionsForToken2(apiChains, token);
2809
+ }, [chainOptionsProp, apiChains, token]);
2810
+ const resolvedTokenAddress = useMemo(() => {
2811
+ if (!apiChains?.length || !token || !chain) return void 0;
2812
+ return getTokenAddressForChain2(apiChains, chain, token);
2813
+ }, [apiChains, token, chain]);
2814
+ const [directActive, setDirectActive] = useState(false);
2815
+ useEffect(() => {
2816
+ setDirectActive(withdrawMode === "direct" && Boolean(withdrawDirectResult));
2817
+ }, [withdrawMode, withdrawDirectResult]);
2818
+ const trackingWithdraw = useMemo(
2819
+ () => Boolean(orderId) || directActive,
2820
+ [orderId, directActive]
2821
+ );
2822
+ useEffect(() => {
2823
+ if (trackingWithdraw) return;
2824
+ const t = requestAnimationFrame(() => {
2825
+ addressInputRef.current?.focus();
2826
+ });
2827
+ return () => cancelAnimationFrame(t);
2828
+ }, [trackingWithdraw]);
2829
+ const shouldLoadChains = useMerchantApi || Boolean(token && chain);
2830
+ useEffect(() => {
2831
+ if (!shouldLoadChains) return;
2832
+ setLoadingChains(true);
2833
+ getChains().then((res) => setApiChains(res?.chains ?? [])).finally(() => setLoadingChains(false));
2834
+ }, [shouldLoadChains]);
2835
+ useEffect(() => {
2836
+ if (!apiChains?.length || !token || !chain) {
2837
+ setApiQuote(null);
2838
+ return;
2839
+ }
2840
+ const tokenAddress = getTokenAddressForChain2(apiChains, chain, token);
2841
+ if (!tokenAddress) {
2842
+ setApiQuote(null);
2843
+ return;
2844
+ }
2845
+ const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
2846
+ const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
2847
+ setLoadingQuote(true);
2848
+ quote({
2849
+ direction: "withdraw",
2850
+ chain_id: chain,
2851
+ token_address: tokenAddress,
2852
+ dst_token_amount: amountWei
2853
+ }).then((q) => setApiQuote(q ?? null)).catch(() => {
2854
+ setApiQuote({
2855
+ token_address: tokenAddress,
2856
+ token_symbol: token,
2857
+ token_decimals: 18,
2858
+ rate: "1",
2859
+ chain_id: Number(chain) || 56,
2860
+ token_amount: amountWei,
2861
+ expires_at: new Date(Date.now() + 6e4).toISOString()
2862
+ });
2863
+ }).finally(() => setLoadingQuote(false));
2864
+ }, [apiChains, token, chain, amount]);
2865
+ useEffect(() => {
2866
+ if (tokenOptions?.length !== 1 || !onTokenSelect) return;
2867
+ const onlyId = tokenOptions[0].id;
2868
+ if (token === onlyId) return;
2869
+ onTokenSelect(onlyId);
2870
+ }, [tokenOptions, token, onTokenSelect]);
2871
+ useEffect(() => {
2872
+ if (chainOptions?.length !== 1 || !onChainSelect) return;
2873
+ const onlyId = chainOptions[0].id;
2874
+ if (chain === onlyId) return;
2875
+ onChainSelect(onlyId);
2876
+ }, [chainOptions, chain, onChainSelect]);
2877
+ const mockWithdrawOrderState = useMemo(
2878
+ () => ({
2879
+ order_id: orderId ?? "",
2880
+ status: "pending",
2881
+ chain_id: "56",
2882
+ dst_token_amount: "0",
2883
+ target_chain_id: chain ?? "1",
2884
+ target_address: address ?? "0x",
2885
+ created_at: (/* @__PURE__ */ new Date()).toISOString(),
2886
+ updated_at: (/* @__PURE__ */ new Date()).toISOString()
2887
+ }),
2888
+ [orderId, chain, address]
2889
+ );
2890
+ useEffect(() => {
2891
+ if (orderId) {
2892
+ const t = setInterval(() => {
2893
+ getWithdrawOrder(orderId).then((order) => {
2894
+ setWithdrawOrder(order);
2895
+ }).catch(() => setWithdrawOrder(mockWithdrawOrderState));
2896
+ }, POLL_INTERVAL_MS);
2897
+ getWithdrawOrder(orderId).then(setWithdrawOrder).catch(() => setWithdrawOrder(mockWithdrawOrderState));
2898
+ return () => clearInterval(t);
2899
+ }
2900
+ if (!orderId && directActive) {
2901
+ const now = (/* @__PURE__ */ new Date()).toISOString();
2902
+ const inferredAmountWei = (() => {
2903
+ if (withdrawDirectResult?.dst_token_amount) return withdrawDirectResult.dst_token_amount;
2904
+ const n = Number(amount || "0");
2905
+ return String(n > 0 ? BigInt(Math.floor(n * 1e18)) : 0n);
2906
+ })();
2907
+ const synthetic = {
2908
+ order_id: withdrawDirectResult?.order_id ?? `direct-${Date.now()}`,
2909
+ status: withdrawDirectResult?.status ?? "pending",
2910
+ chain_id: withdrawDirectResult?.chain_id ?? String(fundingChainId ?? "3131"),
2911
+ dst_token_amount: inferredAmountWei,
2912
+ fee: withdrawDirectResult?.fee ?? feeDisplay,
2913
+ target_chain_id: withdrawDirectResult?.target_chain_id ?? (chain ?? ""),
2914
+ target_address: withdrawDirectResult?.target_address ?? (address ?? ""),
2915
+ funding_tx_hash: withdrawDirectResult?.funding_tx_hash ?? txHash,
2916
+ dst_tx_hash: withdrawDirectResult?.dst_tx_hash,
2917
+ out_tx_hash: withdrawDirectResult?.out_tx_hash,
2918
+ created_at: withdrawDirectResult?.created_at ?? now,
2919
+ updated_at: withdrawDirectResult?.updated_at ?? now,
2920
+ one_time_address: withdrawDirectResult?.one_time_address
2921
+ };
2922
+ setWithdrawOrder(synthetic);
2923
+ return;
2924
+ }
2925
+ setWithdrawOrder(null);
2926
+ }, [orderId, directActive, withdrawDirectResult, amount, feeDisplay, chain, address, txHash, fundingChainId, onShowToast, mockWithdrawOrderState]);
2927
+ const completedKeyRef = useRef(null);
2928
+ const successToastKeyRef = useRef(null);
2929
+ useEffect(() => {
2930
+ if (withdrawOrder?.status !== "completed") return;
2931
+ const key = orderId ?? withdrawOrder.order_id;
2932
+ if (key && completedKeyRef.current !== key) {
2933
+ completedKeyRef.current = key;
2934
+ onWithdrawCompleted?.();
2935
+ }
2936
+ if (!trackingWithdraw) completedKeyRef.current = null;
2937
+ }, [withdrawOrder?.status, orderId, trackingWithdraw, onWithdrawCompleted]);
2938
+ useEffect(() => {
2939
+ if (!withdrawOrder || withdrawOrder.status !== "completed") return;
2940
+ const key = orderId ?? withdrawOrder.order_id;
2941
+ if (!key) return;
2942
+ if (successToastKeyRef.current === key) return;
2943
+ successToastKeyRef.current = key;
2944
+ onShowToast?.("Withdrawal completed");
2945
+ }, [withdrawOrder, orderId, onShowToast]);
2946
+ useEffect(() => {
2947
+ if (!trackingWithdraw) successToastKeyRef.current = null;
2948
+ }, [trackingWithdraw]);
2949
+ const receiveAmount = useMemo(() => {
2950
+ if (receiveAmountProp) {
2951
+ const n = Number(receiveAmountProp);
2952
+ if (!Number.isNaN(n)) return n.toFixed(2);
2953
+ return receiveAmountProp;
2954
+ }
2955
+ if (!apiQuote?.token_amount || !apiQuote?.token_symbol) return void 0;
2956
+ const amount2 = Number(apiQuote.token_amount);
2957
+ const formatted = Number.isNaN(amount2) ? apiQuote.token_amount : amount2.toFixed(2);
2958
+ return `\u2248 ${formatted} (wei) ${apiQuote.token_symbol}`;
2959
+ }, [receiveAmountProp, apiQuote]);
2960
+ const quoteExpired = useMemo(() => {
2961
+ if (!apiQuote?.expires_at) return false;
2962
+ try {
2963
+ return new Date(apiQuote.expires_at).getTime() < Date.now();
2964
+ } catch {
2965
+ return false;
2966
+ }
2967
+ }, [apiQuote?.expires_at]);
2968
+ const handleRefreshQuote = useCallback(() => {
2969
+ if (!apiChains?.length || !token || !chain) return;
2970
+ const tokenAddress = getTokenAddressForChain2(apiChains, chain, token);
2971
+ if (!tokenAddress) return;
2972
+ const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
2973
+ const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
2974
+ setLoadingQuote(true);
2975
+ quote({
2976
+ direction: "withdraw",
2977
+ chain_id: chain,
2978
+ token_address: tokenAddress,
2979
+ dst_token_amount: amountWei
2980
+ }).then((q) => setApiQuote(q ?? null)).catch(() => {
2981
+ setApiQuote({
2982
+ token_address: tokenAddress,
2983
+ token_symbol: token,
2984
+ token_decimals: 18,
2985
+ rate: "1",
2986
+ chain_id: Number(chain) || 56,
2987
+ token_amount: amountWei,
2988
+ expires_at: new Date(Date.now() + 6e4).toISOString()
2989
+ });
2990
+ }).finally(() => setLoadingQuote(false));
2991
+ }, [apiChains, token, chain, amount]);
2992
+ const handleAmountChange = useCallback(
2993
+ (e) => {
2994
+ const raw = e.target.value;
2995
+ const maxNum = balance ? parseBalanceNumber(balance) : null;
2996
+ if (maxNum != null && raw !== "" && raw !== ".") {
2997
+ const num = Number(raw);
2998
+ if (!Number.isNaN(num) && num > maxNum) {
2999
+ onAmountChange?.({
3000
+ ...e,
3001
+ target: { ...e.target, value: String(maxNum) }
3002
+ });
3003
+ return;
3004
+ }
3005
+ }
3006
+ onAmountChange?.(e);
3007
+ },
3008
+ [balance, onAmountChange]
3009
+ );
3010
+ if (!session) {
3011
+ return /* @__PURE__ */ jsx(LoginRequiredOverlay, { title: "Withdraw", onSignIn, onClose });
3012
+ }
3013
+ const activeStep = amount ? 3 : chain ? 2 : token ? 1 : address ? 0 : 0;
3014
+ const canSubmit = address && token && chain && amount;
3015
+ const isSubmitting = status !== "idle";
3016
+ const orderInProgress = trackingWithdraw && (!withdrawOrder || withdrawOrder.status !== "completed");
3017
+ const orderSucceeded = trackingWithdraw && withdrawOrder?.status === "completed";
3018
+ useEffect(() => {
3019
+ if (trackingWithdraw) return;
3020
+ if (!amount || Number(amount) <= 0) return;
3021
+ const frame = requestAnimationFrame(() => {
3022
+ const footer = footerRef.current;
3023
+ if (!footer) return;
3024
+ const scrollableAncestor = findScrollableAncestor(footer);
3025
+ if (!scrollableAncestor) return;
3026
+ scrollableAncestor.scrollTo({
3027
+ top: scrollableAncestor.scrollHeight,
3028
+ behavior: "smooth"
3029
+ });
3030
+ });
3031
+ return () => cancelAnimationFrame(frame);
3032
+ }, [amount, receiveAmount, trackingWithdraw]);
3033
+ return /* @__PURE__ */ jsxs(
3034
+ ModalFrame2,
3035
+ {
3036
+ onClose,
3037
+ contentStyle: {
3038
+ justifyContent: "space-between",
3039
+ padding: isMobile ? "20px 16px" : "24px"
3040
+ },
3041
+ children: [
3042
+ /* @__PURE__ */ jsxs(
3043
+ "div",
3044
+ {
3045
+ id: "absdk-predicate-withdraw-modal",
3046
+ className: `absdk-predicate-withdraw-modal ${isMobile ? "absdk-predicate-withdraw-modal--mobile" : "absdk-predicate-withdraw-modal--desktop"}`,
3047
+ style: { display: "flex", flexDirection: "column", gap: isMobile ? 24 : 32 },
3048
+ children: [
3049
+ /* @__PURE__ */ jsx(
3050
+ "div",
3051
+ {
3052
+ className: "absdk-predicate-withdraw-modal__header",
3053
+ style: { display: "flex", alignItems: "center", justifyContent: "space-between" },
3054
+ children: /* @__PURE__ */ jsx(
3055
+ "h2",
3056
+ {
3057
+ className: "absdk-predicate-withdraw-modal__title",
3058
+ style: { margin: 0, fontSize: isMobile ? 22 : 24, fontWeight: 600, lineHeight: 1.4 },
3059
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__title-text", children: "Withdraw" })
3060
+ }
3061
+ )
3062
+ }
3063
+ ),
3064
+ /* @__PURE__ */ jsxs(
3065
+ "div",
3066
+ {
3067
+ className: "absdk-predicate-withdraw-modal__body",
3068
+ style: { display: "flex", flexDirection: isMobile ? "column" : "row", gap: 16 },
3069
+ children: [
3070
+ /* @__PURE__ */ jsx(
3071
+ "div",
3072
+ {
3073
+ className: "absdk-predicate-withdraw-modal__steps",
3074
+ style: {
3075
+ opacity: trackingWithdraw ? 0 : 1,
3076
+ maxWidth: trackingWithdraw ? 0 : isMobile ? 999 : 48,
3077
+ overflow: "hidden",
3078
+ transition: "opacity 0.3s ease, max-width 0.35s ease"
3079
+ },
3080
+ children: /* @__PURE__ */ jsx(
3081
+ StepIndicator,
3082
+ {
3083
+ steps: 4,
3084
+ stepActive: [!!address, !!token, !!chain, !!apiQuote],
3085
+ activeStep,
3086
+ orientation: isMobile ? "horizontal" : "vertical"
3087
+ }
3088
+ )
3089
+ }
3090
+ ),
3091
+ /* @__PURE__ */ jsxs(
3092
+ "div",
3093
+ {
3094
+ className: "absdk-predicate-withdraw-modal__content",
3095
+ style: { flex: 1, position: "relative", minHeight: isMobile ? 320 : 400 },
3096
+ children: [
3097
+ /* @__PURE__ */ jsxs(
3098
+ "div",
3099
+ {
3100
+ className: "absdk-predicate-withdraw-modal__tracking",
3101
+ style: {
3102
+ position: "absolute",
3103
+ inset: 0,
3104
+ display: "flex",
3105
+ flexDirection: "column",
3106
+ alignItems: "center",
3107
+ justifyContent: "center",
3108
+ gap: 12,
3109
+ padding: "0 16px",
3110
+ opacity: trackingWithdraw ? 1 : 0,
3111
+ maxHeight: trackingWithdraw ? 400 : 0,
3112
+ overflow: "hidden",
3113
+ pointerEvents: trackingWithdraw ? "auto" : "none",
3114
+ transition: "opacity 0.3s ease, max-height 0.35s ease"
3115
+ },
3116
+ children: [
3117
+ orderInProgress && /* @__PURE__ */ jsxs(
3118
+ "div",
3119
+ {
3120
+ id: "absdk-predicate-withdraw-modal-processing",
3121
+ className: "absdk-predicate-withdraw-modal__processing",
3122
+ style: {
3123
+ display: "flex",
3124
+ flexDirection: "column",
3125
+ alignItems: "center",
3126
+ justifyContent: "center",
3127
+ gap: 32
3128
+ },
3129
+ children: [
3130
+ /* @__PURE__ */ jsx(
3131
+ "span",
3132
+ {
3133
+ className: "absdk-predicate-withdraw-modal__processing-spinner",
3134
+ style: {
3135
+ display: "inline-block",
3136
+ width: 60,
3137
+ height: 60,
3138
+ border: `3px solid ${colors2.border}`,
3139
+ borderTopColor: colors2.textPrimary,
3140
+ borderRadius: "50%",
3141
+ animation: "withdraw-modal-spin 0.8s linear infinite"
3142
+ },
3143
+ "aria-hidden": true
3144
+ }
3145
+ ),
3146
+ /* @__PURE__ */ jsx(
3147
+ "span",
3148
+ {
3149
+ className: "absdk-predicate-withdraw-modal__processing-text",
3150
+ style: {
3151
+ fontSize: 20,
3152
+ fontWeight: 600,
3153
+ color: colors2.textPrimary,
3154
+ textAlign: "center",
3155
+ fontFamily: fonts2.family,
3156
+ lineHeight: 1.4
3157
+ },
3158
+ children: "Processing withdrawal..."
3159
+ }
3160
+ )
3161
+ ]
3162
+ }
3163
+ ),
3164
+ orderSucceeded && (() => {
3165
+ const destTxHash = withdrawOrder.dst_tx_hash ?? withdrawOrder.out_tx_hash;
3166
+ const targetChainName = apiChains?.find((c) => c.chain_id === withdrawOrder.target_chain_id)?.network ?? withdrawOrder.target_chain_id ?? "\u2014";
3167
+ const explorerUrl = destTxHash && withdrawOrder.target_chain_id ? getExplorerUrl(withdrawOrder.target_chain_id, { txId: destTxHash }) : null;
3168
+ const copyHash = () => {
3169
+ if (destTxHash && typeof navigator?.clipboard?.writeText === "function") {
3170
+ navigator.clipboard.writeText(destTxHash);
3171
+ onShowToast?.("Copied");
3172
+ }
3173
+ };
3174
+ return /* @__PURE__ */ jsxs(
3175
+ "div",
3176
+ {
3177
+ id: "absdk-predicate-withdraw-modal-success",
3178
+ className: "absdk-predicate-withdraw-modal__success",
3179
+ style: {
3180
+ display: "flex",
3181
+ flexDirection: "column",
3182
+ alignItems: "center",
3183
+ gap: 20,
3184
+ width: "100%",
3185
+ maxWidth: 412
3186
+ },
3187
+ children: [
3188
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__success-header", style: { display: "flex", flexDirection: "column", alignItems: "center", gap: isMobile ? 6 : 24 }, children: [
3189
+ /* @__PURE__ */ jsx(
3190
+ "span",
3191
+ {
3192
+ className: "absdk-predicate-withdraw-modal__success-icon",
3193
+ style: {
3194
+ display: "flex",
3195
+ alignItems: "center",
3196
+ justifyContent: "center",
3197
+ width: isMobile ? 48 : 60,
3198
+ height: isMobile ? 48 : 60,
3199
+ borderRadius: "50%",
3200
+ color: "#22c55e",
3201
+ fontSize: isMobile ? 32 : 40,
3202
+ lineHeight: 1,
3203
+ fontWeight: 700
3204
+ },
3205
+ "aria-hidden": true,
3206
+ children: /* @__PURE__ */ jsx(SuccessIcon, {})
3207
+ }
3208
+ ),
3209
+ /* @__PURE__ */ jsx(
3210
+ "span",
3211
+ {
3212
+ className: "absdk-predicate-withdraw-modal__success-title",
3213
+ style: {
3214
+ fontSize: 20,
3215
+ fontWeight: 600,
3216
+ color: colors2.textPrimary,
3217
+ textAlign: "center",
3218
+ fontFamily: fonts2.family,
3219
+ lineHeight: 1.4
3220
+ },
3221
+ children: "Withdrawal successful"
3222
+ }
3223
+ )
3224
+ ] }),
3225
+ /* @__PURE__ */ jsxs(
3226
+ "div",
3227
+ {
3228
+ className: "absdk-predicate-withdraw-modal__summary",
3229
+ style: {
3230
+ display: "flex",
3231
+ flexDirection: "column",
3232
+ gap: isMobile ? 2 : 4,
3233
+ width: "100%"
3234
+ },
3235
+ children: [
3236
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__summary-row absdk-predicate-withdraw-modal__summary-row--amount", style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: isMobile ? "6px 0" : "8px 0", height: isMobile ? 29 : 36 }, children: [
3237
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Amount" }),
3238
+ /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__summary-value", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: [
3239
+ weiToEtherDisplay(withdrawOrder.dst_token_amount),
3240
+ " ",
3241
+ tokenSymbol
3242
+ ] })
3243
+ ] }),
3244
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__summary-row absdk-predicate-withdraw-modal__summary-row--fee", style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: isMobile ? "6px 0" : "8px 0", height: isMobile ? 29 : 36 }, children: [
3245
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Fee" }),
3246
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-value", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: withdrawOrder.fee ?? feeDisplay ?? "\u2014" })
3247
+ ] }),
3248
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__summary-row absdk-predicate-withdraw-modal__summary-row--network", style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: isMobile ? "6px 0" : "8px 0", height: isMobile ? 29 : 36 }, children: [
3249
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Network" }),
3250
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-value", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: targetChainName })
3251
+ ] }),
3252
+ destTxHash && /* @__PURE__ */ jsxs(
3253
+ "div",
3254
+ {
3255
+ className: "absdk-predicate-withdraw-modal__summary-row absdk-predicate-withdraw-modal__summary-row--hash",
3256
+ style: {
3257
+ display: "flex",
3258
+ justifyContent: "space-between",
3259
+ alignItems: isMobile ? "flex-start" : "center",
3260
+ flexDirection: "row",
3261
+ gap: isMobile ? 8 : 0,
3262
+ padding: isMobile ? "6px 0" : "8px 0",
3263
+ minHeight: 38
3264
+ },
3265
+ children: [
3266
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__summary-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Transaction" }),
3267
+ /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__transaction", style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [
3268
+ explorerUrl ? /* @__PURE__ */ jsx(
3269
+ "a",
3270
+ {
3271
+ className: "absdk-predicate-withdraw-modal__transaction-link",
3272
+ href: explorerUrl,
3273
+ target: "_blank",
3274
+ rel: "noopener noreferrer",
3275
+ style: {
3276
+ fontSize: 14,
3277
+ color: colors2.textPrimary,
3278
+ textDecoration: "underline",
3279
+ whiteSpace: "nowrap"
3280
+ },
3281
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__transaction-text", children: isMobile ? `${destTxHash.slice(0, 6)}...${destTxHash.slice(-4)}` : `${destTxHash.slice(0, 10)}...${destTxHash.slice(-8)}` })
3282
+ }
3283
+ ) : /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__transaction-text", style: { fontSize: 14, color: colors2.textPrimary, whiteSpace: "nowrap" }, children: isMobile ? `${destTxHash.slice(0, 6)}...${destTxHash.slice(-4)}` : `${destTxHash.slice(0, 10)}...${destTxHash.slice(-8)}` }),
3284
+ /* @__PURE__ */ jsx(
3285
+ "button",
3286
+ {
3287
+ className: "absdk-predicate-withdraw-modal__transaction-copy-button",
3288
+ type: "button",
3289
+ onClick: copyHash,
3290
+ "aria-label": "Copy hash",
3291
+ style: {
3292
+ padding: 0,
3293
+ border: "none",
3294
+ background: "transparent",
3295
+ color: colors2.textPrimary,
3296
+ cursor: "pointer",
3297
+ display: "flex",
3298
+ alignItems: "center",
3299
+ justifyContent: "center",
3300
+ width: 16,
3301
+ height: 16
3302
+ },
3303
+ children: /* @__PURE__ */ jsx(CopyIcon2, {})
3304
+ }
3305
+ )
3306
+ ] })
3307
+ ]
3308
+ }
3309
+ )
3310
+ ]
3311
+ }
3312
+ ),
3313
+ /* @__PURE__ */ jsx("div", { style: { paddingTop: isMobile ? 14 : 24, width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
3314
+ "button",
3315
+ {
3316
+ id: "absdk-predicate-withdraw-modal-reset-button",
3317
+ className: "absdk-predicate-withdraw-modal__reset-button",
3318
+ type: "button",
3319
+ onClick: () => {
3320
+ setDirectActive(false);
3321
+ setWithdrawOrder(null);
3322
+ (onStartAnotherWithdrawal ?? onClose)?.();
3323
+ },
3324
+ style: {
3325
+ width: isMobile ? "100%" : 274,
3326
+ padding: "12px 0",
3327
+ borderRadius: radii2.full,
3328
+ border: `1px solid ${colors2.buttonDisabledBorder}`,
3329
+ background: colors2.textPrimary,
3330
+ color: "#121214",
3331
+ fontSize: 16,
3332
+ fontWeight: 500,
3333
+ lineHeight: 1.4,
3334
+ fontFamily: fonts2.family,
3335
+ cursor: "pointer",
3336
+ textAlign: "center"
3337
+ },
3338
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__reset-button-label", children: "Start another withdrawal" })
3339
+ }
3340
+ ) })
3341
+ ]
3342
+ }
3343
+ );
3344
+ })()
3345
+ ]
3346
+ }
3347
+ ),
3348
+ /* @__PURE__ */ jsx(
3349
+ "div",
3350
+ {
3351
+ className: "absdk-predicate-withdraw-modal__form-state",
3352
+ style: {
3353
+ opacity: trackingWithdraw ? 0 : 1,
3354
+ maxHeight: trackingWithdraw ? 0 : 1200,
3355
+ overflow: "hidden",
3356
+ pointerEvents: trackingWithdraw ? "none" : "auto",
3357
+ transition: "opacity 0.3s ease, max-height 0.35s ease"
3358
+ },
3359
+ children: /* @__PURE__ */ jsxs(
3360
+ "div",
3361
+ {
3362
+ className: "absdk-predicate-withdraw-modal__form",
3363
+ style: { display: "flex", flexDirection: "column", gap: isMobile ? 24 : 40 },
3364
+ children: [
3365
+ /* @__PURE__ */ jsxs(
3366
+ "div",
3367
+ {
3368
+ className: "absdk-predicate-withdraw-modal__field absdk-predicate-withdraw-modal__field--address",
3369
+ style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
3370
+ children: [
3371
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__field-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Recipient address" }),
3372
+ /* @__PURE__ */ jsx(
3373
+ "div",
3374
+ {
3375
+ className: "absdk-predicate-withdraw-modal__input-shell absdk-predicate-withdraw-modal__input-shell--address",
3376
+ style: {
3377
+ display: "flex",
3378
+ alignItems: "center",
3379
+ height: 44,
3380
+ padding: "0 16px",
3381
+ borderRadius: radii2.input,
3382
+ border: `1px solid ${addressInputFocused ? colors2.borderFocused : colors2.border}`,
3383
+ boxSizing: "border-box"
3384
+ },
3385
+ children: /* @__PURE__ */ jsx(
3386
+ "input",
3387
+ {
3388
+ id: "absdk-predicate-withdraw-modal-address-input",
3389
+ className: "absdk-predicate-withdraw-modal__input absdk-predicate-withdraw-modal__input--address",
3390
+ ref: addressInputRef,
3391
+ value: address,
3392
+ onChange: onAddressChange,
3393
+ readOnly: !onAddressChange,
3394
+ onFocus: () => setAddressInputFocused(true),
3395
+ onBlur: () => setAddressInputFocused(false),
3396
+ spellCheck: false,
3397
+ placeholder: "0x",
3398
+ style: {
3399
+ flex: 1,
3400
+ border: "none",
3401
+ outline: "none",
3402
+ background: "transparent",
3403
+ color: colors2.textPrimary,
3404
+ fontSize: 14,
3405
+ fontFamily: fonts2.family,
3406
+ lineHeight: 1.4,
3407
+ padding: 0
3408
+ }
3409
+ }
3410
+ )
3411
+ }
3412
+ )
3413
+ ]
3414
+ }
3415
+ ),
3416
+ /* @__PURE__ */ jsx(
3417
+ DropdownField,
3418
+ {
3419
+ wrapperClassName: "absdk-predicate-withdraw-modal__field absdk-predicate-withdraw-modal__field--token",
3420
+ triggerClassName: "absdk-predicate-withdraw-modal__select-trigger absdk-predicate-withdraw-modal__select-trigger--token",
3421
+ triggerId: "absdk-predicate-withdraw-modal-token-select",
3422
+ label: "Select token",
3423
+ placeholder: loadingChains ? "Loading\u2026" : "Token",
3424
+ value: token,
3425
+ options: tokenOptions,
3426
+ onSelect: onTokenSelect
3427
+ }
3428
+ ),
3429
+ /* @__PURE__ */ jsx(
3430
+ DropdownField,
3431
+ {
3432
+ wrapperClassName: "absdk-predicate-withdraw-modal__field absdk-predicate-withdraw-modal__field--chain",
3433
+ triggerClassName: "absdk-predicate-withdraw-modal__select-trigger absdk-predicate-withdraw-modal__select-trigger--chain",
3434
+ triggerId: "absdk-predicate-withdraw-modal-chain-select",
3435
+ label: "Select chain",
3436
+ placeholder: loadingChains ? "Loading\u2026" : "Chain",
3437
+ value: chain,
3438
+ options: chainOptions,
3439
+ onSelect: onChainSelect
3440
+ }
3441
+ ),
3442
+ apiQuote && token && chain && /* @__PURE__ */ jsxs(
3443
+ "div",
3444
+ {
3445
+ id: "absdk-predicate-withdraw-modal-quote-panel",
3446
+ className: "absdk-predicate-withdraw-modal__quote-panel",
3447
+ style: {
3448
+ padding: "12px 16px",
3449
+ borderRadius: radii2.card,
3450
+ border: `1px solid ${colors2.border}`,
3451
+ display: "flex",
3452
+ flexDirection: "column",
3453
+ gap: 8
3454
+ },
3455
+ children: [
3456
+ /* @__PURE__ */ jsx(
3457
+ "div",
3458
+ {
3459
+ className: "absdk-predicate-withdraw-modal__quote-rate-row",
3460
+ style: { minHeight: 18, display: "flex", alignItems: "center" },
3461
+ children: loadingQuote ? /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__quote-loading", style: { fontSize: 13, color: colors2.textSecondary }, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__quote-rate", style: { fontSize: 13, color: colors2.textSecondary }, children: [
3462
+ "Rate: 1 ",
3463
+ FUNDING_TOKEN_SYMBOL2,
3464
+ " = ",
3465
+ apiQuote.rate,
3466
+ " ",
3467
+ apiQuote.token_symbol
3468
+ ] })
3469
+ }
3470
+ ),
3471
+ !loadingQuote && /* @__PURE__ */ jsxs(Fragment, { children: [
3472
+ apiQuote.expires_at && /* @__PURE__ */ jsx(
3473
+ Countdown,
3474
+ {
3475
+ expiresAt: apiQuote.expires_at,
3476
+ isExpired: quoteExpired,
3477
+ onExpired: handleRefreshQuote
3478
+ }
3479
+ ),
3480
+ quoteExpired && /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__quote-expired", style: { display: "flex", alignItems: "center", gap: 8 }, children: [
3481
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__quote-expired-text", style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }),
3482
+ /* @__PURE__ */ jsx(
3483
+ "button",
3484
+ {
3485
+ className: "absdk-predicate-withdraw-modal__quote-refresh-button",
3486
+ type: "button",
3487
+ onClick: handleRefreshQuote,
3488
+ style: {
3489
+ padding: "4px 12px",
3490
+ fontSize: 12,
3491
+ borderRadius: radii2.pill,
3492
+ border: `1px solid ${colors2.border}`,
3493
+ background: "transparent",
3494
+ color: colors2.textPrimary,
3495
+ cursor: "pointer",
3496
+ fontFamily: fonts2.family
3497
+ },
3498
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__quote-refresh-button-label", children: "Refresh" })
3499
+ }
3500
+ )
3501
+ ] })
3502
+ ] })
3503
+ ]
3504
+ }
3505
+ ),
3506
+ /* @__PURE__ */ jsx("div", { className: "absdk-predicate-withdraw-modal__amount-section", style: { display: "flex", flexDirection: "column", gap: 16 }, children: /* @__PURE__ */ jsxs("div", { className: "absdk-predicate-withdraw-modal__amount-field", style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
3507
+ /* @__PURE__ */ jsxs(
3508
+ "div",
3509
+ {
3510
+ className: "absdk-predicate-withdraw-modal__amount-header",
3511
+ style: {
3512
+ display: "flex",
3513
+ justifyContent: "space-between",
3514
+ alignItems: isMobile ? "flex-start" : "center",
3515
+ flexDirection: isMobile ? "column" : "row",
3516
+ gap: isMobile ? 4 : 0
3517
+ },
3518
+ children: [
3519
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__field-label", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Amount" }),
3520
+ balance && /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__balance", style: { fontSize: 13, lineHeight: 1.2, color: colors2.textSecondary }, children: [
3521
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__balance-label", children: "Balance:" }),
3522
+ " ",
3523
+ /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__balance-value", children: [
3524
+ formatBalanceTo2Decimals(balance),
3525
+ " ",
3526
+ FUNDING_TOKEN_SYMBOL2
3527
+ ] })
3528
+ ] })
3529
+ ]
3530
+ }
3531
+ ),
3532
+ /* @__PURE__ */ jsxs(
3533
+ "div",
3534
+ {
3535
+ className: "absdk-predicate-withdraw-modal__input-shell absdk-predicate-withdraw-modal__input-shell--amount",
3536
+ style: {
3537
+ display: "flex",
3538
+ alignItems: "center",
3539
+ justifyContent: "space-between",
3540
+ height: 48,
3541
+ padding: "0 16px",
3542
+ borderRadius: radii2.input,
3543
+ border: `1px solid ${amountInputFocused ? colors2.borderFocused : colors2.border}`,
3544
+ boxSizing: "border-box"
3545
+ },
3546
+ children: [
3547
+ /* @__PURE__ */ jsx(
3548
+ "input",
3549
+ {
3550
+ id: "absdk-predicate-withdraw-modal-amount-input",
3551
+ className: "absdk-predicate-withdraw-modal__input absdk-predicate-withdraw-modal__input--amount",
3552
+ value: amount,
3553
+ onChange: handleAmountChange,
3554
+ onFocus: () => setAmountInputFocused(true),
3555
+ onBlur: () => setAmountInputFocused(false),
3556
+ placeholder: "0.00",
3557
+ type: "text",
3558
+ inputMode: "decimal",
3559
+ style: {
3560
+ flex: 1,
3561
+ border: "none",
3562
+ outline: "none",
3563
+ background: "transparent",
3564
+ color: amount ? colors2.textPrimary : colors2.textSecondary,
3565
+ fontSize: 14,
3566
+ fontFamily: fonts2.family,
3567
+ lineHeight: 1.4,
3568
+ padding: 0
3569
+ }
3570
+ }
3571
+ ),
3572
+ /* @__PURE__ */ jsx("div", { className: "absdk-predicate-withdraw-modal__input-actions", style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsx(
3573
+ "button",
3574
+ {
3575
+ id: "absdk-predicate-withdraw-modal-max-button",
3576
+ className: "absdk-predicate-withdraw-modal__max-button",
3577
+ type: "button",
3578
+ onClick: onMaxClick,
3579
+ style: {
3580
+ background: colors2.textPrimary,
3581
+ border: "none",
3582
+ borderRadius: radii2.pill,
3583
+ padding: "2px 8px",
3584
+ fontSize: 12,
3585
+ lineHeight: 1.4,
3586
+ fontWeight: 400,
3587
+ color: "#15181D",
3588
+ fontFamily: fonts2.family,
3589
+ cursor: "pointer"
3590
+ },
3591
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__max-button-label", children: "Max" })
3592
+ }
3593
+ ) })
3594
+ ]
3595
+ }
3596
+ ),
3597
+ !orderSucceeded && /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__receive-amount", style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary, opacity: !trackingWithdraw && amount && Number(amount) > 0 ? 1 : 0 }, children: [
3598
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__receive-amount-label", children: "You will receive :" }),
3599
+ " ",
3600
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__receive-amount-value", children: receiveAmount })
3601
+ ] })
3602
+ ] }) })
3603
+ ]
3604
+ }
3605
+ )
3606
+ }
3607
+ )
3608
+ ]
3609
+ }
3610
+ )
3611
+ ]
3612
+ }
3613
+ )
3614
+ ]
3615
+ }
3616
+ ),
3617
+ /* @__PURE__ */ jsxs(
3618
+ "div",
3619
+ {
3620
+ id: "absdk-predicate-withdraw-modal-receive-amount",
3621
+ className: "absdk-predicate-withdraw-modal__footer",
3622
+ ref: footerRef,
3623
+ style: {
3624
+ padding: isMobile ? "12px 0 0" : "20px 20px 0",
3625
+ display: "flex",
3626
+ flexDirection: "column",
3627
+ gap: 10,
3628
+ alignItems: "center",
3629
+ position: isMobile ? "sticky" : "static",
3630
+ bottom: 0,
3631
+ background: isMobile ? colors2.card : "transparent",
3632
+ zIndex: isMobile ? 1 : void 0,
3633
+ marginTop: "auto"
3634
+ },
3635
+ children: [
3636
+ orderInProgress && withdrawOrder && (() => {
3637
+ const fundingHash = txHash ?? withdrawOrder?.funding_tx_hash;
3638
+ const showFundingLink = fundingHash && fundingChainId;
3639
+ try {
3640
+ return /* @__PURE__ */ jsx("div", { className: "absdk-predicate-withdraw-modal__funding-link-group", style: { display: "none", flexDirection: "column", gap: 6, alignItems: "center" }, children: showFundingLink && /* @__PURE__ */ jsx(
3641
+ "a",
3642
+ {
3643
+ className: "absdk-predicate-withdraw-modal__funding-link",
3644
+ href: getExplorerUrl(fundingChainId, { txId: fundingHash }),
3645
+ target: "_blank",
3646
+ rel: "noopener noreferrer",
3647
+ style: { fontSize: 13, color: colors2.textPrimary, textDecoration: "underline" },
3648
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__funding-link-text", children: "Withdraw request transaction on explorer" })
3649
+ }
3650
+ ) });
3651
+ } catch {
3652
+ return /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__funding-status", style: { fontSize: 13, color: colors2.textPrimary }, children: "Withdraw in progress." });
3653
+ }
3654
+ })(),
3655
+ orderInProgress && withdrawOrder && /* @__PURE__ */ jsxs("span", { className: "absdk-predicate-withdraw-modal__order-status", style: { fontSize: 13, color: colors2.textSecondary, display: "none", alignItems: "center", gap: 6 }, children: [
3656
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__order-status-label", children: "Order status:" }),
3657
+ " ",
3658
+ /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__order-status-value", children: withdrawOrder.status }),
3659
+ /* @__PURE__ */ jsx(
3660
+ "span",
3661
+ {
3662
+ className: "absdk-predicate-withdraw-modal__order-status-spinner",
3663
+ style: {
3664
+ display: "inline-block",
3665
+ width: 10,
3666
+ height: 10,
3667
+ border: `2px solid ${colors2.textSecondary}`,
3668
+ borderTopColor: "transparent",
3669
+ borderRadius: "50%",
3670
+ animation: "withdraw-modal-spin 0.7s linear infinite"
3671
+ },
3672
+ "aria-hidden": true
3673
+ }
3674
+ )
3675
+ ] }),
3676
+ /* @__PURE__ */ jsx("style", { children: `@keyframes withdraw-modal-spin { to { transform: rotate(360deg); } }` }),
3677
+ orderSucceeded || trackingWithdraw ? null : /* @__PURE__ */ jsx(
3678
+ SubmitButton,
3679
+ {
3680
+ id: "absdk-predicate-withdraw-modal-submit-button",
3681
+ className: "absdk-predicate-withdraw-modal__submit-button",
3682
+ disabled: !canSubmit || isSubmitting,
3683
+ status,
3684
+ onClick: () => {
3685
+ try {
3686
+ const ret = onSubmit?.({
3687
+ toAddress: address,
3688
+ amount: amount ?? "",
3689
+ token: token ?? "",
3690
+ tokenAddress: resolvedTokenAddress ?? apiQuote?.token_address ?? "",
3691
+ chain: chain ?? ""
3692
+ });
3693
+ if (ret && typeof ret.then === "function") {
3694
+ ret.catch((err) => {
3695
+ const msg = err instanceof Error ? err.message : "Transaction failed";
3696
+ onShowToast?.(msg);
3697
+ });
3698
+ }
3699
+ } catch (err) {
3700
+ const msg = err instanceof Error ? err.message : "Transaction failed";
3701
+ onShowToast?.(msg);
3702
+ }
3703
+ }
3704
+ }
3705
+ )
3706
+ ]
3707
+ }
3708
+ )
3709
+ ]
3710
+ }
3711
+ );
3712
+ };
3713
+ var SubmitButton = ({ id, className, disabled, status, onClick }) => {
3714
+ const isMobile = useIsMobileViewport2();
3715
+ const labels = {
3716
+ idle: disabled ? "Please fill in withdrawal information" : "Submit",
3717
+ pending: "Processing...",
3718
+ success: "Withdrawal successful",
3719
+ manual_review: "Under manual review"
3720
+ };
3721
+ const isDisabled = disabled || status !== "idle";
3722
+ return /* @__PURE__ */ jsx(
3723
+ "button",
3724
+ {
3725
+ id,
3726
+ className,
3727
+ type: "button",
3728
+ disabled: isDisabled,
3729
+ onClick,
3730
+ style: {
3731
+ width: isMobile ? "100%" : 364,
3732
+ padding: "12px 0",
3733
+ borderRadius: radii2.full,
3734
+ border: isDisabled ? `1px solid ${colors2.buttonDisabledBorder}` : "none",
3735
+ background: isDisabled ? colors2.buttonDisabledBg : colors2.textPrimary,
3736
+ color: isDisabled ? colors2.textSecondary : "#15181D",
3737
+ fontSize: 16,
3738
+ fontWeight: 500,
3739
+ lineHeight: 1.4,
3740
+ fontFamily: fonts2.family,
3741
+ cursor: isDisabled ? "not-allowed" : "pointer",
3742
+ textAlign: "center"
3743
+ },
3744
+ children: /* @__PURE__ */ jsx("span", { className: "absdk-predicate-withdraw-modal__submit-button-label", children: labels[status] })
3745
+ }
3746
+ );
3747
+ };
3748
+
3749
+ // src/react.ts
3750
+ async function loadWalletAccountModule() {
3751
+ return import('./account-F5Z2SMJE.js');
3752
+ }
3753
+ var WalletAccount = {
3754
+ async getInstance(oidcToken) {
3755
+ const { default: WalletAccount2 } = await loadWalletAccountModule();
3756
+ return WalletAccount2.getInstance(oidcToken);
3757
+ },
3758
+ clearInstance() {
3759
+ void loadWalletAccountModule().then(({ default: WalletAccount2 }) => {
3760
+ WalletAccount2.clearInstance();
3761
+ });
3762
+ }
3763
+ };
3764
+ function clearSocialAccountInstance() {
3765
+ void loadWalletAccountModule().then(({ clearSocialAccountInstance: clearSocialAccountInstance2 }) => {
3766
+ clearSocialAccountInstance2();
3767
+ });
3768
+ }
3769
+
3770
+ export { DepositDetailsPanel, DepositModal, DropdownField, SignInModal, Toast, WalletAccount, WalletSelectionModal, WithdrawModal, clearSocialAccountInstance };