@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-KAMUFSZ7.js DELETED
@@ -1,3193 +0,0 @@
1
- import { getExplorerUrl } from './chunk-XB2DFS2W.js';
2
- import { getChains, registerPlatform, quote, getWithdrawOrder } from './chunk-TPMI3XWV.js';
3
- import { getEnv } from './chunk-SHLNBZBY.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, 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
- type: "button",
286
- onClick,
287
- "aria-label": "Close",
288
- style: {
289
- width: 30,
290
- height: 30,
291
- borderRadius: "50%",
292
- background: colors.card,
293
- border: "none",
294
- cursor: "pointer",
295
- display: "flex",
296
- alignItems: "center",
297
- justifyContent: "center",
298
- padding: 0,
299
- flexShrink: 0
300
- },
301
- children: /* @__PURE__ */ jsx("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsx(
302
- "path",
303
- {
304
- d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75",
305
- stroke: colors.textPrimary,
306
- strokeWidth: "1.5",
307
- strokeLinecap: "round"
308
- }
309
- ) })
310
- }
311
- );
312
- var ModalFrame = ({
313
- onClose,
314
- width = 500,
315
- cardStyle,
316
- contentStyle,
317
- children
318
- }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 14, alignItems: "flex-start" }, children: [
319
- /* @__PURE__ */ jsx(
320
- "div",
321
- {
322
- style: {
323
- width,
324
- background: colors.card,
325
- borderRadius: radii.card,
326
- overflow: "hidden",
327
- ...cardStyle
328
- },
329
- children: /* @__PURE__ */ jsx(
330
- "div",
331
- {
332
- style: {
333
- display: "flex",
334
- flexDirection: "column",
335
- minHeight: 0,
336
- fontFamily: fonts.family,
337
- color: colors.textPrimary,
338
- boxSizing: "border-box",
339
- ...contentStyle
340
- },
341
- children
342
- }
343
- )
344
- }
345
- ),
346
- /* @__PURE__ */ jsx(CloseButton, { onClick: onClose })
347
- ] }) });
348
- async function loadWalletAccount() {
349
- return import('./account-F5Z2SMJE.js');
350
- }
351
- async function loadOidcAuth() {
352
- return import('./dist-Q2PDXT2F.js');
353
- }
354
- var SignInModalFrame = ({
355
- id,
356
- title,
357
- onClose,
358
- footer,
359
- children
360
- }) => /* @__PURE__ */ jsx(
361
- ModalFrame,
362
- {
363
- onClose,
364
- cardStyle: { padding: "32px 24px" },
365
- contentStyle: { alignItems: "center" },
366
- children: /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24, alignItems: "center" }, id, children: [
367
- /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4, textAlign: "center" }, children: title }),
368
- /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 12, alignItems: "center" }, children }),
369
- footer
370
- ] })
371
- }
372
- );
373
- var SignInWithEmailSection = () => {
374
- const [email, setEmail] = useState("");
375
- const [partialOidcToken, setPartialOidcToken] = useState("");
376
- const [emailCode, setEmailCode] = useState("");
377
- return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24 }, children: [
378
- /* @__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" } }) }),
379
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
380
- /* @__PURE__ */ jsx(
381
- "input",
382
- {
383
- type: "text",
384
- className: "m-1 bg-[#fff] p-1",
385
- style: { color: "black" },
386
- value: emailCode,
387
- placeholder: "emailCode",
388
- onChange: (e) => setEmailCode(e.target.value)
389
- }
390
- ),
391
- " "
392
- ] }),
393
- /* @__PURE__ */ jsx("button", { disabled: !email, onClick: async () => {
394
- const { OidcAuth } = await loadOidcAuth();
395
- const { loginByEmail } = OidcAuth({
396
- stage: "dev",
397
- xClientId: clientIds.x ?? "",
398
- googleClientId: clientIds.google ?? ""
399
- });
400
- const { partialOidcToken: partialOidcToken2 } = await loginByEmail(email);
401
- setPartialOidcToken(partialOidcToken2);
402
- }, children: "send code" }),
403
- /* @__PURE__ */ jsx("button", { disabled: !partialOidcToken || !emailCode, onClick: async () => {
404
- const oidcToken = `${partialOidcToken}${emailCode}`;
405
- const { default: WalletAccount2 } = await loadWalletAccount();
406
- await WalletAccount2.getInstance(oidcToken);
407
- }, children: "sign in" })
408
- ] });
409
- };
410
- var SignInModalSocialSection = ({
411
- id,
412
- socialProviders,
413
- isBusy,
414
- loadingProvider,
415
- onSocialClick
416
- }) => /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 24 }, id, children: [
417
- /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: socialProviders.map((provider) => {
418
- const isLoading = loadingProvider === provider.id;
419
- return /* @__PURE__ */ jsxs(
420
- "button",
421
- {
422
- id: `social-provider-${provider.id}`,
423
- type: "button",
424
- disabled: isBusy,
425
- onClick: () => onSocialClick(provider.id),
426
- style: {
427
- width: "100%",
428
- height: 48,
429
- borderRadius: radii.pill,
430
- border: `1px solid ${colors.border}`,
431
- background: "transparent",
432
- display: "flex",
433
- alignItems: "center",
434
- justifyContent: "center",
435
- gap: 12,
436
- cursor: isBusy ? "wait" : "pointer",
437
- padding: 12,
438
- boxSizing: "border-box",
439
- opacity: isLoading ? 0.6 : isBusy ? 0.8 : 1,
440
- transition: "opacity .15s"
441
- },
442
- children: [
443
- isLoading ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : provider.icon,
444
- /* @__PURE__ */ jsx("span", { style: { fontSize: 16, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family }, children: isLoading ? "Signing in..." : provider.label })
445
- ]
446
- },
447
- provider.id
448
- );
449
- }) }),
450
- typeof window !== "undefined" && window.location.href.indexOf("emailSignIn") !== -1 && /* @__PURE__ */ jsx(SignInWithEmailSection, {}),
451
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 20, width: "100%" }, children: [
452
- /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: colors.border } }),
453
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors.textPrimary, opacity: 0.4, whiteSpace: "nowrap" }, children: "Or connect a wallet" }),
454
- /* @__PURE__ */ jsx("div", { style: { flex: 1, height: 1, background: colors.border } })
455
- ] })
456
- ] });
457
- var SignInModalWalletGrid = ({
458
- wallets,
459
- isBusy,
460
- loadingWalletId,
461
- expanded,
462
- showExpandToggle,
463
- onWalletClick,
464
- onToggleExpanded
465
- }) => /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 8, alignItems: "center", paddingTop: 12 }, children: [
466
- /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex", flexWrap: "wrap", gap: "14px 0" }, children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
467
- "button",
468
- {
469
- type: "button",
470
- disabled: isBusy,
471
- onClick: () => onWalletClick(wallet.id),
472
- style: {
473
- width: "25%",
474
- display: "flex",
475
- flexDirection: "column",
476
- alignItems: "center",
477
- gap: 4,
478
- background: "transparent",
479
- border: "none",
480
- cursor: isBusy ? "wait" : "pointer",
481
- padding: 0,
482
- opacity: loadingWalletId === wallet.id ? 0.7 : isBusy ? 0.85 : 1
483
- },
484
- children: [
485
- /* @__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 }) }),
486
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: "100%" }, children: [
487
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, lineHeight: 1.4, color: colors.textPrimary, fontFamily: fonts.family, textAlign: "center", whiteSpace: "nowrap" }, children: wallet.name }),
488
- 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(
489
- "a",
490
- {
491
- href: wallet.installUrl,
492
- target: "_blank",
493
- rel: "noopener noreferrer",
494
- onClick: (event) => event.stopPropagation(),
495
- style: { fontSize: 10, lineHeight: 1.4, color: colors.textSecondary, fontFamily: fonts.family, textDecoration: "underline" },
496
- children: "Install"
497
- }
498
- ) : null
499
- ] })
500
- ]
501
- },
502
- wallet.id
503
- )) }),
504
- showExpandToggle && /* @__PURE__ */ jsx(
505
- "button",
506
- {
507
- type: "button",
508
- onClick: onToggleExpanded,
509
- style: {
510
- background: "transparent",
511
- border: "none",
512
- cursor: "pointer",
513
- display: "flex",
514
- alignItems: "center",
515
- justifyContent: "center",
516
- padding: 4
517
- },
518
- children: /* @__PURE__ */ jsx(ExpandIcon, { expanded })
519
- }
520
- )
521
- ] });
522
- var SignInModalFooter = ({
523
- privacyPolicyUrl,
524
- termsOfUseUrl
525
- }) => /* @__PURE__ */ jsx("div", { 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: [
526
- "By continuing, I agree to the",
527
- " ",
528
- /* @__PURE__ */ jsx("a", { href: privacyPolicyUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Privacy Policy" }),
529
- " ",
530
- "and",
531
- " ",
532
- /* @__PURE__ */ jsx("a", { href: termsOfUseUrl, style: { color: colors.textPrimary, textDecoration: "underline" }, target: "_blank", rel: "noopener noreferrer", children: "Terms of Use" })
533
- ] }) });
534
- var useSignInModalController = ({
535
- wallets,
536
- initialVisibleCount,
537
- onGoogleLogin: _onGoogleLogin,
538
- onTwitterLogin: _onTwitterLogin,
539
- onCubeSignerSession: _onCubeSignerSession,
540
- onWalletConnected,
541
- onSocialLogin: _onSocialLogin,
542
- onWalletSelect
543
- }) => {
544
- const [expanded, setExpanded] = useState(false);
545
- const [loadingProvider, setLoadingProvider] = useState(null);
546
- const [loadingWalletId, setLoadingWalletId] = useState(null);
547
- const defaultWalletRegistry = useMemo(() => createDefaultInjectedWalletRegistry(), []);
548
- const defaultWalletConnector = useMemo(
549
- () => new WalletConnector(defaultWalletRegistry.map((item) => item.provider)),
550
- [defaultWalletRegistry]
551
- );
552
- const resolvedWallets = useMemo(
553
- () => resolveWalletItems(wallets, defaultWalletRegistry),
554
- [defaultWalletRegistry, wallets]
555
- );
556
- const showExpandToggle = resolvedWallets.length > initialVisibleCount;
557
- const visibleWallets = expanded ? resolvedWallets : resolvedWallets.slice(0, initialVisibleCount);
558
- const isBusy = !!loadingProvider || !!loadingWalletId;
559
- async function loadOidcAuth2() {
560
- return import('./dist-Q2PDXT2F.js');
561
- }
562
- const handleSocialClick = async (providerId) => {
563
- setLoadingProvider(providerId);
564
- const cfg = getSDKConfig();
565
- const { OidcAuth } = await loadOidcAuth2();
566
- const { loginByX, loginByGoogle } = OidcAuth({
567
- stage,
568
- xClientId: cfg.twitterClientId ?? clientIds.x ?? "",
569
- googleClientId: cfg.googleClientId ?? clientIds.google ?? ""
570
- });
571
- if (providerId === "google") {
572
- try {
573
- const oidcToken = await loginByGoogle();
574
- return oidcToken;
575
- } catch (error) {
576
- console.error(`[SDK] Google sign-in failed:`, error);
577
- }
578
- }
579
- if (providerId === "x") {
580
- const oidcToken = await loginByX();
581
- return oidcToken;
582
- }
583
- };
584
- const clearSocialLoading = () => setLoadingProvider(null);
585
- const handleWalletClick = async (walletId) => {
586
- if (isBusy) return;
587
- const targetWallet = resolvedWallets.find((wallet) => wallet.id === walletId);
588
- if (!targetWallet) return;
589
- if (targetWallet.installed === false && targetWallet.installUrl) return;
590
- setLoadingWalletId(walletId);
591
- try {
592
- if (onWalletSelect) {
593
- await onWalletSelect(walletId);
594
- return;
595
- }
596
- const builtInWallet = defaultWalletRegistry.find((item) => item.id === walletId);
597
- if (!builtInWallet || !builtInWallet.installed) return;
598
- const session = await defaultWalletConnector.connect(walletId);
599
- onWalletConnected?.(session, walletId);
600
- } catch (err) {
601
- console.error(`[SDK] Wallet connect failed for ${walletId}:`, err);
602
- } finally {
603
- setLoadingWalletId(null);
604
- }
605
- };
606
- return {
607
- expanded,
608
- loadingProvider,
609
- loadingWalletId,
610
- visibleWallets,
611
- showExpandToggle,
612
- isBusy,
613
- handleSocialClick,
614
- handleWalletClick,
615
- clearSocialLoading,
616
- toggleExpanded: () => setExpanded((value) => !value)
617
- };
618
- };
619
- var variantStyles = {
620
- success: { bg: "rgba(41, 255, 155, 0.82)", border: "rgba(41, 255, 155, 0.53)", icon: colors.accent },
621
- error: { bg: "rgba(255, 107, 107, 0.82)", border: "rgba(255, 107, 107, 0.53)", icon: colors.danger },
622
- info: { bg: "rgba(126, 135, 162, 0.82)", border: "rgba(126, 135, 162, 0.55)", icon: colors.textSecondary }
623
- };
624
- var Toast = ({ message, variant = "info", duration, onClose }) => {
625
- const style = variantStyles[variant];
626
- useEffect(() => {
627
- if (duration != null && duration > 0 && onClose) {
628
- const t = setTimeout(onClose, duration);
629
- return () => clearTimeout(t);
630
- }
631
- }, [duration, onClose]);
632
- return /* @__PURE__ */ jsx(
633
- "div",
634
- {
635
- style: {
636
- position: "fixed",
637
- top: 0,
638
- left: 0,
639
- right: 0,
640
- display: "flex",
641
- justifyContent: "center",
642
- paddingTop: 16,
643
- zIndex: 1e4,
644
- pointerEvents: "none"
645
- },
646
- children: /* @__PURE__ */ jsxs(
647
- "div",
648
- {
649
- role: "alert",
650
- style: {
651
- pointerEvents: "auto",
652
- display: "flex",
653
- alignItems: "center",
654
- gap: 10,
655
- padding: "12px 16px",
656
- borderRadius: radii.card,
657
- background: style.bg,
658
- border: `1px solid ${style.border}`,
659
- color: colors.textPrimary,
660
- fontSize: 14,
661
- lineHeight: 1.4,
662
- maxWidth: 360,
663
- boxSizing: "border-box"
664
- },
665
- children: [
666
- /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: message }),
667
- onClose && /* @__PURE__ */ jsx(
668
- "button",
669
- {
670
- type: "button",
671
- "aria-label": "Dismiss",
672
- onClick: onClose,
673
- style: {
674
- padding: 4,
675
- margin: -4,
676
- border: "none",
677
- background: "transparent",
678
- color: colors.textSecondary,
679
- cursor: "pointer",
680
- borderRadius: 4,
681
- lineHeight: 1
682
- },
683
- children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
684
- "path",
685
- {
686
- d: "M3.5 3.5L10.5 10.5M10.5 3.5L3.5 10.5",
687
- stroke: "currentColor",
688
- strokeWidth: "1.5",
689
- strokeLinecap: "round"
690
- }
691
- ) })
692
- }
693
- )
694
- ]
695
- }
696
- )
697
- }
698
- );
699
- };
700
- async function loadWalletAccount2() {
701
- return import('./account-F5Z2SMJE.js');
702
- }
703
- var SignInModal = ({
704
- title = "Welcome to PredicateMarket",
705
- socialProviders,
706
- wallets,
707
- initialVisibleCount,
708
- privacyPolicyUrl = "#",
709
- termsOfUseUrl = "#",
710
- onGoogleLogin,
711
- onTwitterLogin,
712
- onCubeSignerSession,
713
- onWalletConnected,
714
- onSocialLogin,
715
- onWalletSelect,
716
- onDismiss,
717
- onSuccess
718
- }) => {
719
- const sdkConfig = getSDKConfig();
720
- const effectiveSocialProviders = resolveSocialProviders(
721
- socialProviders ?? sdkConfig.signIn?.socialProviders
722
- );
723
- const effectiveWallets = wallets ?? sdkConfig.signIn?.wallets;
724
- const effectiveInitialVisibleCount = initialVisibleCount ?? sdkConfig.signIn?.initialVisibleCount ?? 5;
725
- const [toastError, setToastError] = useState(null);
726
- const [socialLoadingProvider, setSocialLoadingProvider] = useState(null);
727
- const {
728
- expanded,
729
- loadingProvider,
730
- loadingWalletId,
731
- visibleWallets,
732
- showExpandToggle,
733
- isBusy,
734
- handleSocialClick,
735
- handleWalletClick,
736
- clearSocialLoading,
737
- toggleExpanded
738
- } = useSignInModalController({
739
- wallets: effectiveWallets,
740
- initialVisibleCount: effectiveInitialVisibleCount,
741
- onGoogleLogin,
742
- onTwitterLogin,
743
- onCubeSignerSession,
744
- onWalletConnected,
745
- onSocialLogin,
746
- onWalletSelect
747
- });
748
- return /* @__PURE__ */ jsxs(
749
- SignInModalFrame,
750
- {
751
- id: "SignInModalFrame",
752
- title,
753
- onClose: onDismiss,
754
- footer: /* @__PURE__ */ jsx(
755
- SignInModalFooter,
756
- {
757
- privacyPolicyUrl,
758
- termsOfUseUrl
759
- }
760
- ),
761
- children: [
762
- toastError && /* @__PURE__ */ jsx(
763
- Toast,
764
- {
765
- message: toastError,
766
- variant: "error",
767
- duration: 5e3,
768
- onClose: () => setToastError(null)
769
- }
770
- ),
771
- /* @__PURE__ */ jsx(
772
- SignInModalSocialSection,
773
- {
774
- id: "SignInModalSocialSection",
775
- socialProviders: effectiveSocialProviders,
776
- isBusy: isBusy || !!socialLoadingProvider,
777
- loadingProvider: loadingProvider ?? socialLoadingProvider,
778
- onSocialClick: async (providerId) => {
779
- setSocialLoadingProvider(providerId);
780
- sessionStore.clearSession();
781
- let walletAccount = null;
782
- let address = "";
783
- try {
784
- const { default: WalletAccount2 } = await loadWalletAccount2();
785
- WalletAccount2.clearInstance();
786
- const oidcToken = await handleSocialClick(providerId);
787
- if (!oidcToken) {
788
- setToastError("Social login failed, please try again");
789
- return;
790
- }
791
- walletAccount = await WalletAccount2.getInstance(oidcToken);
792
- onCubeSignerSession?.(walletAccount.getCubeSignerSession());
793
- cache_exports.set("oidcToken", oidcToken, false);
794
- const res = await walletAccount.eth_accounts();
795
- address = res?.[0] || "";
796
- const authSource = providerId === "x" ? "twitter" : providerId;
797
- const session = {
798
- address,
799
- chain: "BSC",
800
- provider: walletAccount,
801
- walletType: "social",
802
- authSource
803
- };
804
- onSuccess?.(session);
805
- } catch (error) {
806
- setToastError(error?.message ?? "Failed to get wallet account, please try again");
807
- return;
808
- } finally {
809
- setSocialLoadingProvider(null);
810
- clearSocialLoading();
811
- }
812
- }
813
- }
814
- ),
815
- /* @__PURE__ */ jsx(
816
- SignInModalWalletGrid,
817
- {
818
- wallets: visibleWallets,
819
- isBusy,
820
- loadingWalletId,
821
- expanded,
822
- showExpandToggle,
823
- onWalletClick: handleWalletClick,
824
- onToggleExpanded: toggleExpanded
825
- }
826
- )
827
- ]
828
- }
829
- );
830
- };
831
-
832
- // src/ui/theme.ts
833
- var colors2 = {
834
- background: "#050608",
835
- card: "#121214",
836
- cardRaised: "#151821",
837
- border: "rgba(126,135,162,0.2)",
838
- borderStrong: "rgba(255,255,255,0.16)",
839
- borderFocused: "#FFFFFF",
840
- textPrimary: "#FFFFFF",
841
- textSecondary: "#737477",
842
- accent: "#29FF9B",
843
- accentStrong: "#4AD481",
844
- warning: "#FFB547",
845
- danger: "#FF6B6B",
846
- stepActive: "#FFFFFF",
847
- stepInactive: "#36383D",
848
- buttonDisabledBg: "rgba(255,255,255,0.14)",
849
- buttonDisabledBorder: "#444444"
850
- };
851
- var radii2 = {
852
- xl: "28px",
853
- lg: "20px",
854
- pill: "99px",
855
- full: "9999px",
856
- card: "12px",
857
- input: "8px"
858
- };
859
- var fonts2 = {
860
- family: '"Switzer", "Inter", "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
861
- };
862
- var placeholderIcon = (label) => /* @__PURE__ */ jsx(
863
- "div",
864
- {
865
- style: {
866
- width: 40,
867
- height: 40,
868
- borderRadius: "12px",
869
- background: colors2.cardRaised,
870
- display: "flex",
871
- alignItems: "center",
872
- justifyContent: "center",
873
- color: colors2.textSecondary,
874
- fontWeight: 600
875
- },
876
- children: label.slice(0, 2).toUpperCase()
877
- }
878
- );
879
- var WalletSelectionModal = ({
880
- title = "Connect Wallet",
881
- options,
882
- onSelect
883
- }) => {
884
- const sections = [
885
- {
886
- id: "social",
887
- label: "Social Wallets",
888
- items: options.filter((item) => item.category === "social")
889
- },
890
- {
891
- id: "plugin",
892
- label: "Plugin Wallets",
893
- items: options.filter((item) => item.category === "plugin")
894
- }
895
- ].filter((section) => section.items.length > 0);
896
- return /* @__PURE__ */ jsxs(
897
- "div",
898
- {
899
- style: {
900
- width: "min(720px, 90vw)",
901
- background: colors2.card,
902
- borderRadius: radii2.xl,
903
- border: `1px solid ${colors2.border}`,
904
- padding: "40px",
905
- display: "flex",
906
- flexDirection: "column",
907
- gap: 32,
908
- color: colors2.textPrimary,
909
- fontFamily: fonts2.family
910
- },
911
- children: [
912
- /* @__PURE__ */ jsxs("div", { children: [
913
- /* @__PURE__ */ jsx("div", { style: { fontSize: 26, fontWeight: 600 }, children: title }),
914
- /* @__PURE__ */ jsx("p", { style: { color: colors2.textSecondary, marginTop: 8 }, children: "Choose social or plugin wallets" })
915
- ] }),
916
- sections.map((section) => /* @__PURE__ */ jsxs("section", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
917
- /* @__PURE__ */ jsx("div", { style: { fontSize: 14, textTransform: "uppercase", letterSpacing: 1.5, color: colors2.textSecondary }, children: section.label }),
918
- /* @__PURE__ */ jsx(
919
- "div",
920
- {
921
- style: {
922
- display: "grid",
923
- gap: 16,
924
- gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
925
- },
926
- children: section.items.map((option) => /* @__PURE__ */ jsxs(
927
- "button",
928
- {
929
- onClick: () => onSelect?.(option.id),
930
- style: {
931
- borderRadius: radii2.lg,
932
- border: `1px solid ${colors2.border}`,
933
- background: colors2.cardRaised,
934
- padding: "20px",
935
- display: "flex",
936
- gap: 14,
937
- alignItems: "center",
938
- textAlign: "left",
939
- cursor: "pointer",
940
- color: colors2.textPrimary
941
- },
942
- children: [
943
- option.icon ?? placeholderIcon(option.label),
944
- /* @__PURE__ */ jsxs("div", { children: [
945
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: option.label }),
946
- /* @__PURE__ */ jsx("div", { style: { color: colors2.textSecondary, fontSize: 14 }, children: option.description })
947
- ] })
948
- ]
949
- },
950
- option.id
951
- ))
952
- }
953
- )
954
- ] }, section.id))
955
- ]
956
- }
957
- );
958
- };
959
- var CloseButton2 = ({ onClick }) => /* @__PURE__ */ jsx(
960
- "button",
961
- {
962
- type: "button",
963
- onClick,
964
- "aria-label": "Close",
965
- style: {
966
- width: 30,
967
- height: 30,
968
- borderRadius: "50%",
969
- background: colors2.card,
970
- border: "none",
971
- cursor: "pointer",
972
- display: "flex",
973
- alignItems: "center",
974
- justifyContent: "center",
975
- padding: 0,
976
- flexShrink: 0
977
- },
978
- children: /* @__PURE__ */ jsx("svg", { width: "17", height: "17", viewBox: "0 0 17 17", fill: "none", children: /* @__PURE__ */ jsx(
979
- "path",
980
- {
981
- d: "M4.25 4.25L12.75 12.75M12.75 4.25L4.25 12.75",
982
- stroke: colors2.textPrimary,
983
- strokeWidth: "1.5",
984
- strokeLinecap: "round"
985
- }
986
- ) })
987
- }
988
- );
989
- var ModalFrame2 = ({
990
- onClose,
991
- width = 500,
992
- cardStyle,
993
- contentStyle,
994
- children
995
- }) => /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 14, alignItems: "flex-start" }, children: [
996
- /* @__PURE__ */ jsx(
997
- "div",
998
- {
999
- style: {
1000
- width,
1001
- background: colors2.card,
1002
- borderRadius: radii2.card,
1003
- overflow: "hidden",
1004
- ...cardStyle
1005
- },
1006
- children: /* @__PURE__ */ jsx(
1007
- "div",
1008
- {
1009
- style: {
1010
- display: "flex",
1011
- flexDirection: "column",
1012
- minHeight: 0,
1013
- fontFamily: fonts2.family,
1014
- color: colors2.textPrimary,
1015
- boxSizing: "border-box",
1016
- ...contentStyle
1017
- },
1018
- children
1019
- }
1020
- )
1021
- }
1022
- ),
1023
- /* @__PURE__ */ jsx(CloseButton2, { onClick: onClose })
1024
- ] }) });
1025
- var StepIndicator = ({ steps, stepActive, activeStep = 0 }) => {
1026
- return /* @__PURE__ */ jsx(
1027
- "div",
1028
- {
1029
- style: {
1030
- display: "flex",
1031
- flexDirection: "column",
1032
- alignItems: "center",
1033
- width: 20,
1034
- paddingTop: 4,
1035
- flexShrink: 0
1036
- },
1037
- children: Array.from({ length: steps }, (_, i) => {
1038
- const isActive = stepActive && stepActive.length > i ? stepActive[i] : i <= activeStep;
1039
- const isLast = i === steps - 1;
1040
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
1041
- /* @__PURE__ */ jsx(
1042
- "div",
1043
- {
1044
- style: {
1045
- width: 20,
1046
- height: 20,
1047
- borderRadius: "50%",
1048
- border: `2px solid ${isActive ? colors2.stepActive : colors2.stepInactive}`,
1049
- display: "flex",
1050
- alignItems: "center",
1051
- justifyContent: "center",
1052
- boxSizing: "border-box"
1053
- },
1054
- children: /* @__PURE__ */ jsx(
1055
- "div",
1056
- {
1057
- style: {
1058
- width: 7.5,
1059
- height: 7.5,
1060
- borderRadius: "50%",
1061
- background: isActive ? colors2.stepActive : colors2.stepInactive
1062
- }
1063
- }
1064
- )
1065
- }
1066
- ),
1067
- !isLast && /* @__PURE__ */ jsx(
1068
- "div",
1069
- {
1070
- style: {
1071
- width: 1,
1072
- height: 87,
1073
- background: isActive ? colors2.stepActive : colors2.stepInactive,
1074
- opacity: 0.3
1075
- }
1076
- }
1077
- )
1078
- ] }, i);
1079
- })
1080
- }
1081
- );
1082
- };
1083
- var Chevron = ({ up }) => /* @__PURE__ */ jsx(
1084
- "svg",
1085
- {
1086
- width: "16",
1087
- height: "16",
1088
- viewBox: "0 0 16 16",
1089
- fill: "none",
1090
- style: { transition: "transform .2s", transform: up ? "rotate(180deg)" : "none" },
1091
- children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: colors2.textSecondary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
1092
- }
1093
- );
1094
- var DropdownField = ({
1095
- label,
1096
- placeholder,
1097
- value,
1098
- icon,
1099
- focused,
1100
- options,
1101
- onSelect,
1102
- onClick
1103
- }) => {
1104
- const [open, setOpen] = useState(false);
1105
- const [triggerFocused, setTriggerFocused] = useState(false);
1106
- const ref = useRef(null);
1107
- useEffect(() => {
1108
- if (!open) return;
1109
- const handler = (e) => {
1110
- if (ref.current && !ref.current.contains(e.target)) setOpen(false);
1111
- };
1112
- document.addEventListener("mousedown", handler);
1113
- return () => document.removeEventListener("mousedown", handler);
1114
- }, [open]);
1115
- const hasOptions = options && options.length > 0;
1116
- const handleClick = () => {
1117
- if (hasOptions) {
1118
- setOpen((p) => !p);
1119
- } else {
1120
- onClick?.();
1121
- }
1122
- };
1123
- const handleSelect = (id) => {
1124
- onSelect?.(id);
1125
- setOpen(false);
1126
- };
1127
- const selected = hasOptions ? options.find((o) => o.id === value) : void 0;
1128
- return /* @__PURE__ */ jsxs("div", { ref, style: { display: "flex", flexDirection: "column", gap: 8, width: "100%", position: "relative" }, children: [
1129
- /* @__PURE__ */ jsx(
1130
- "span",
1131
- {
1132
- style: {
1133
- fontSize: 14,
1134
- fontWeight: 400,
1135
- lineHeight: 1.4,
1136
- color: colors2.textPrimary,
1137
- fontFamily: fonts2.family
1138
- },
1139
- children: label
1140
- }
1141
- ),
1142
- /* @__PURE__ */ jsxs(
1143
- "button",
1144
- {
1145
- type: "button",
1146
- onClick: handleClick,
1147
- onFocus: () => setTriggerFocused(true),
1148
- onBlur: () => setTriggerFocused(false),
1149
- style: {
1150
- display: "flex",
1151
- alignItems: "center",
1152
- justifyContent: "space-between",
1153
- height: 44,
1154
- padding: "0 16px",
1155
- borderRadius: radii2.input,
1156
- border: `1px solid ${open || triggerFocused ? colors2.borderFocused : colors2.border}`,
1157
- background: "transparent",
1158
- cursor: "pointer",
1159
- fontFamily: fonts2.family,
1160
- width: "100%",
1161
- boxSizing: "border-box"
1162
- },
1163
- children: [
1164
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
1165
- selected?.icon ?? icon,
1166
- /* @__PURE__ */ jsx(
1167
- "span",
1168
- {
1169
- style: {
1170
- fontSize: 14,
1171
- lineHeight: 1.4,
1172
- color: value ? colors2.textPrimary : colors2.textSecondary,
1173
- fontFamily: fonts2.family
1174
- },
1175
- children: selected?.label ?? value ?? placeholder
1176
- }
1177
- )
1178
- ] }),
1179
- /* @__PURE__ */ jsx(Chevron, { up: open })
1180
- ]
1181
- }
1182
- ),
1183
- open && hasOptions && /* @__PURE__ */ jsx(
1184
- "div",
1185
- {
1186
- className: "dropdown-list-item",
1187
- style: {
1188
- position: "absolute",
1189
- top: "calc(100% + 4px)",
1190
- left: 0,
1191
- right: 0,
1192
- zIndex: 10,
1193
- borderRadius: radii2.input,
1194
- border: `1px solid ${colors2.border}`,
1195
- background: colors2.card,
1196
- overflow: "hidden",
1197
- boxShadow: "0 8px 24px rgba(0,0,0,0.4)"
1198
- },
1199
- children: options.map((opt) => /* @__PURE__ */ jsxs(
1200
- "button",
1201
- {
1202
- type: "button",
1203
- onClick: () => handleSelect(opt.id),
1204
- style: {
1205
- display: "flex",
1206
- alignItems: "center",
1207
- gap: 10,
1208
- width: "100%",
1209
- padding: "10px 16px",
1210
- border: "none",
1211
- background: opt.id === value ? "rgba(255,255,255,0.06)" : "transparent",
1212
- cursor: "pointer",
1213
- fontFamily: fonts2.family,
1214
- textAlign: "left",
1215
- transition: "background .12s"
1216
- },
1217
- onMouseEnter: (e) => {
1218
- e.currentTarget.style.background = "rgba(255,255,255,0.08)";
1219
- },
1220
- onMouseLeave: (e) => {
1221
- e.currentTarget.style.background = opt.id === value ? "rgba(255,255,255,0.06)" : "transparent";
1222
- },
1223
- children: [
1224
- opt.icon && /* @__PURE__ */ jsx("div", { style: { width: 28, height: 28, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }, children: opt.icon }),
1225
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 1 }, children: [
1226
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 500, color: colors2.textPrimary }, children: opt.label }),
1227
- opt.subtitle && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: colors2.textSecondary }, children: opt.subtitle })
1228
- ] })
1229
- ]
1230
- },
1231
- opt.id
1232
- ))
1233
- }
1234
- )
1235
- ] });
1236
- };
1237
- function getRemaining(expiresAt) {
1238
- const end = typeof expiresAt === "string" ? new Date(expiresAt).getTime() : expiresAt;
1239
- return Math.max(0, Math.floor((end - Date.now()) / 1e3));
1240
- }
1241
- function formatRemaining(seconds) {
1242
- const m = Math.floor(seconds / 60);
1243
- const s = seconds % 60;
1244
- return `${m}:${s.toString().padStart(2, "0")}`;
1245
- }
1246
- function Countdown({
1247
- expiresAt,
1248
- expiredLabel = "Expired",
1249
- style,
1250
- isExpired = false,
1251
- onExpired
1252
- }) {
1253
- const [remaining, setRemaining] = useState(() => getRemaining(expiresAt));
1254
- const hasFiredExpired = useRef(false);
1255
- useEffect(() => {
1256
- hasFiredExpired.current = false;
1257
- }, [expiresAt]);
1258
- useEffect(() => {
1259
- if (isExpired) {
1260
- setRemaining(0);
1261
- return;
1262
- }
1263
- const tick = () => {
1264
- const r = getRemaining(expiresAt);
1265
- setRemaining(r);
1266
- if (r <= 0 && onExpired && !hasFiredExpired.current) {
1267
- hasFiredExpired.current = true;
1268
- onExpired();
1269
- }
1270
- };
1271
- tick();
1272
- const id = setInterval(tick, 1e3);
1273
- return () => clearInterval(id);
1274
- }, [expiresAt, isExpired, onExpired]);
1275
- const text = remaining <= 0 ? expiredLabel : formatRemaining(remaining);
1276
- const color = remaining <= 0 ? colors2.warning : colors2.textSecondary;
1277
- return /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color, fontFamily: fonts2.family, ...style }, children: [
1278
- "Expires in ",
1279
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#fff" }, children: text })
1280
- ] });
1281
- }
1282
- function generateMatrix(data) {
1283
- const qr = qrcode(0, "H");
1284
- qr.addData(data);
1285
- qr.make();
1286
- const count = qr.getModuleCount();
1287
- const matrix = [];
1288
- for (let r = 0; r < count; r++) {
1289
- const row = [];
1290
- for (let c = 0; c < count; c++) {
1291
- row.push(qr.isDark(r, c));
1292
- }
1293
- matrix.push(row);
1294
- }
1295
- return matrix;
1296
- }
1297
- function isFinderZone(row, col, size) {
1298
- return row < 7 && col < 7 || row < 7 && col >= size - 7 || row >= size - 7 && col < 7;
1299
- }
1300
- var FinderEye = ({ ox, oy, s }) => /* @__PURE__ */ jsxs(Fragment, { children: [
1301
- /* @__PURE__ */ jsx("rect", { x: ox, y: oy, width: 7 * s, height: 7 * s, rx: s * 1.4, ry: s * 1.4, fill: "#fff" }),
1302
- /* @__PURE__ */ jsx(
1303
- "rect",
1304
- {
1305
- x: ox + s,
1306
- y: oy + s,
1307
- width: 5 * s,
1308
- height: 5 * s,
1309
- rx: s * 0.9,
1310
- ry: s * 0.9,
1311
- fill: colors2.background
1312
- }
1313
- ),
1314
- /* @__PURE__ */ jsx(
1315
- "rect",
1316
- {
1317
- x: ox + 2 * s,
1318
- y: oy + 2 * s,
1319
- width: 3 * s,
1320
- height: 3 * s,
1321
- rx: s * 0.7,
1322
- ry: s * 0.7,
1323
- fill: "#fff"
1324
- }
1325
- )
1326
- ] });
1327
- var SVG_SIZE = 220;
1328
- var QUIET_ZONE = 2;
1329
- var StyledQR = ({ data }) => {
1330
- const matrix = useMemo(() => generateMatrix(data), [data]);
1331
- const n = matrix.length;
1332
- const total = n + QUIET_ZONE * 2;
1333
- const cell = SVG_SIZE / total;
1334
- const off = QUIET_ZONE * cell;
1335
- const dotR = cell * 0.42;
1336
- const centerClearR = 3;
1337
- const cx = n / 2;
1338
- const cy = n / 2;
1339
- const dots = [];
1340
- for (let r = 0; r < n; r++) {
1341
- for (let c = 0; c < n; c++) {
1342
- if (!matrix[r][c]) continue;
1343
- if (isFinderZone(r, c, n)) continue;
1344
- if (Math.abs(c - cx) < centerClearR && Math.abs(r - cy) < centerClearR) continue;
1345
- dots.push(
1346
- /* @__PURE__ */ jsx(
1347
- "circle",
1348
- {
1349
- cx: off + c * cell + cell / 2,
1350
- cy: off + r * cell + cell / 2,
1351
- r: dotR,
1352
- fill: "#fff"
1353
- },
1354
- `${r}-${c}`
1355
- )
1356
- );
1357
- }
1358
- }
1359
- return /* @__PURE__ */ jsxs(
1360
- "svg",
1361
- {
1362
- width: SVG_SIZE,
1363
- height: SVG_SIZE,
1364
- viewBox: `0 0 ${SVG_SIZE} ${SVG_SIZE}`,
1365
- style: { borderRadius: 12 },
1366
- children: [
1367
- /* @__PURE__ */ jsx("rect", { width: SVG_SIZE, height: SVG_SIZE, fill: colors2.background }),
1368
- /* @__PURE__ */ jsx(FinderEye, { ox: off, oy: off, s: cell }),
1369
- /* @__PURE__ */ jsx(FinderEye, { ox: off + (n - 7) * cell, oy: off, s: cell }),
1370
- /* @__PURE__ */ jsx(FinderEye, { ox: off, oy: off + (n - 7) * cell, s: cell }),
1371
- dots
1372
- ]
1373
- }
1374
- );
1375
- };
1376
- var CopyIcon = () => /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: [
1377
- /* @__PURE__ */ jsx("rect", { x: "4.5", y: "4.5", width: "7", height: "7", rx: "1.5", stroke: colors2.textPrimary, strokeWidth: "1.2" }),
1378
- /* @__PURE__ */ jsx(
1379
- "path",
1380
- {
1381
- 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",
1382
- stroke: colors2.textPrimary,
1383
- strokeWidth: "1.2"
1384
- }
1385
- )
1386
- ] });
1387
- var DepositDetailsPanel = ({
1388
- address,
1389
- tokenIcon,
1390
- minimumDeposit,
1391
- onCopyAddress
1392
- }) => {
1393
- const canCopy = typeof address === "string" && address.trim().length > 0;
1394
- const handleCopy = async () => {
1395
- if (!canCopy) return;
1396
- try {
1397
- if (navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
1398
- await navigator.clipboard.writeText(address);
1399
- } else {
1400
- const el = document.createElement("textarea");
1401
- el.value = address;
1402
- el.setAttribute("readonly", "");
1403
- el.style.position = "absolute";
1404
- el.style.left = "-9999px";
1405
- document.body.appendChild(el);
1406
- el.select();
1407
- try {
1408
- document.execCommand("copy");
1409
- } catch {
1410
- }
1411
- document.body.removeChild(el);
1412
- }
1413
- } finally {
1414
- onCopyAddress?.(address);
1415
- }
1416
- };
1417
- return /* @__PURE__ */ jsxs(
1418
- "div",
1419
- {
1420
- style: {
1421
- display: "flex",
1422
- flexDirection: "column",
1423
- alignItems: "center",
1424
- gap: 16,
1425
- padding: "20px",
1426
- borderRadius: radii2.card,
1427
- border: `1px solid ${colors2.border}`,
1428
- fontFamily: fonts2.family
1429
- },
1430
- children: [
1431
- /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "inline-flex" }, children: [
1432
- /* @__PURE__ */ jsx(StyledQR, { data: address }),
1433
- tokenIcon && /* @__PURE__ */ jsx(
1434
- "div",
1435
- {
1436
- style: {
1437
- position: "absolute",
1438
- top: "50%",
1439
- left: "50%",
1440
- transform: "translate(-50%, -50%)",
1441
- width: 36,
1442
- height: 36,
1443
- borderRadius: "50%",
1444
- background: "#3B5998",
1445
- display: "flex",
1446
- alignItems: "center",
1447
- justifyContent: "center",
1448
- boxShadow: `0 0 0 3px ${colors2.background}`
1449
- },
1450
- children: tokenIcon
1451
- }
1452
- )
1453
- ] }),
1454
- /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ jsx(
1455
- "div",
1456
- {
1457
- style: {
1458
- padding: "10px 14px",
1459
- borderRadius: radii2.input,
1460
- background: "rgba(255,255,255,0.05)",
1461
- fontSize: 13,
1462
- color: colors2.textPrimary,
1463
- wordBreak: "break-all",
1464
- lineHeight: 1.5
1465
- },
1466
- children: address
1467
- }
1468
- ) }),
1469
- minimumDeposit && /* @__PURE__ */ jsxs(
1470
- "div",
1471
- {
1472
- style: {
1473
- width: "100%",
1474
- display: "flex",
1475
- justifyContent: "space-between",
1476
- fontSize: 13
1477
- },
1478
- children: [
1479
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textSecondary }, children: "Minimum deposit" }),
1480
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textPrimary, fontWeight: 500 }, children: minimumDeposit })
1481
- ]
1482
- }
1483
- ),
1484
- /* @__PURE__ */ jsxs(
1485
- "button",
1486
- {
1487
- type: "button",
1488
- onClick: handleCopy,
1489
- disabled: !canCopy,
1490
- style: {
1491
- display: "flex",
1492
- alignItems: "center",
1493
- gap: 6,
1494
- padding: "10px 28px",
1495
- borderRadius: radii2.pill,
1496
- border: `1px solid ${colors2.borderStrong}`,
1497
- background: "transparent",
1498
- color: colors2.textPrimary,
1499
- fontSize: 14,
1500
- fontWeight: 500,
1501
- cursor: canCopy ? "pointer" : "not-allowed",
1502
- opacity: canCopy ? 1 : 0.6,
1503
- fontFamily: fonts2.family,
1504
- transition: "background .15s"
1505
- },
1506
- onMouseEnter: (e) => {
1507
- if (!canCopy) return;
1508
- e.currentTarget.style.background = "rgba(255,255,255,0.06)";
1509
- },
1510
- onMouseLeave: (e) => {
1511
- e.currentTarget.style.background = "transparent";
1512
- },
1513
- children: [
1514
- /* @__PURE__ */ jsx(CopyIcon, {}),
1515
- "Copy address"
1516
- ]
1517
- }
1518
- )
1519
- ]
1520
- }
1521
- );
1522
- };
1523
- var LockIcon = () => /* @__PURE__ */ jsxs("svg", { width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [
1524
- /* @__PURE__ */ jsx("rect", { x: "10", y: "22", width: "28", height: "20", rx: "4", stroke: colors2.textSecondary, strokeWidth: "2" }),
1525
- /* @__PURE__ */ jsx("path", { d: "M16 22V16C16 11.5817 19.5817 8 24 8C28.4183 8 32 11.5817 32 16V22", stroke: colors2.textSecondary, strokeWidth: "2", strokeLinecap: "round" }),
1526
- /* @__PURE__ */ jsx("circle", { cx: "24", cy: "33", r: "3", fill: colors2.textSecondary })
1527
- ] });
1528
- var LoginRequiredOverlay = ({
1529
- title,
1530
- onSignIn,
1531
- onClose
1532
- }) => /* @__PURE__ */ jsx(ModalFrame2, { onClose, contentStyle: { padding: "48px 24px" }, children: /* @__PURE__ */ jsxs(
1533
- "div",
1534
- {
1535
- style: {
1536
- display: "flex",
1537
- flexDirection: "column",
1538
- alignItems: "center",
1539
- gap: 24,
1540
- textAlign: "center"
1541
- },
1542
- children: [
1543
- /* @__PURE__ */ jsx(LockIcon, {}),
1544
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
1545
- /* @__PURE__ */ jsx(
1546
- "h2",
1547
- {
1548
- style: {
1549
- margin: 0,
1550
- fontSize: 20,
1551
- fontWeight: 600,
1552
- color: colors2.textPrimary
1553
- },
1554
- children: title
1555
- }
1556
- ),
1557
- /* @__PURE__ */ jsx(
1558
- "p",
1559
- {
1560
- style: {
1561
- margin: 0,
1562
- fontSize: 14,
1563
- color: colors2.textSecondary,
1564
- lineHeight: 1.5
1565
- },
1566
- children: "Please sign in to continue"
1567
- }
1568
- )
1569
- ] }),
1570
- onSignIn && /* @__PURE__ */ jsx(
1571
- "button",
1572
- {
1573
- type: "button",
1574
- onClick: onSignIn,
1575
- style: {
1576
- padding: "12px 48px",
1577
- borderRadius: radii2.full,
1578
- border: "none",
1579
- background: colors2.textPrimary,
1580
- color: "#15181D",
1581
- fontSize: 16,
1582
- fontWeight: 500,
1583
- fontFamily: fonts2.family,
1584
- cursor: "pointer"
1585
- },
1586
- children: "Sign In"
1587
- }
1588
- )
1589
- ]
1590
- }
1591
- ) });
1592
- function useSession() {
1593
- const [session, setSession] = useState(
1594
- () => sessionStore.getState().session
1595
- );
1596
- useEffect(() => {
1597
- const unsub = sessionStore.on("session:changed", setSession);
1598
- return () => {
1599
- unsub();
1600
- };
1601
- }, []);
1602
- return session;
1603
- }
1604
- var BackArrow = () => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 6L9 12L15 18", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
1605
- var TransferIcon = () => /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
1606
- /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.08)" }),
1607
- /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "7", stroke: colors2.textPrimary, strokeWidth: "1.5" }),
1608
- /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "2.5", fill: colors2.textPrimary }),
1609
- /* @__PURE__ */ jsx("path", { d: "M18 7V11", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1610
- /* @__PURE__ */ jsx("path", { d: "M18 25V29", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1611
- /* @__PURE__ */ jsx("path", { d: "M7 18H11", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" }),
1612
- /* @__PURE__ */ jsx("path", { d: "M25 18H29", stroke: colors2.textPrimary, strokeWidth: "1.5", strokeLinecap: "round" })
1613
- ] });
1614
- var FiatIcon = () => /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
1615
- /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "18", fill: "rgba(255,255,255,0.06)" }),
1616
- /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "10", stroke: colors2.textSecondary, strokeWidth: "1.5" }),
1617
- /* @__PURE__ */ jsx("path", { d: "M18 12V24", stroke: colors2.textSecondary, strokeWidth: "1.5", strokeLinecap: "round" }),
1618
- /* @__PURE__ */ jsx("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" })
1619
- ] });
1620
- var DefaultCryptoIcons = () => {
1621
- const tokens = [
1622
- { label: "B", bg: "#F7931A" },
1623
- { label: "E", bg: "#627EEA" },
1624
- { label: "\u2261", bg: "#26A17B" },
1625
- { label: "$", bg: "#2775CA" },
1626
- { label: "S", bg: "#9945FF" },
1627
- { label: "A", bg: "#E84142" }
1628
- ];
1629
- return /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 0 }, children: tokens.map((t, i) => /* @__PURE__ */ jsx(
1630
- "div",
1631
- {
1632
- style: {
1633
- width: 24,
1634
- height: 24,
1635
- borderRadius: "50%",
1636
- background: t.bg,
1637
- display: "flex",
1638
- alignItems: "center",
1639
- justifyContent: "center",
1640
- fontSize: 11,
1641
- fontWeight: 700,
1642
- color: "#fff",
1643
- marginLeft: i > 0 ? -4 : 0,
1644
- border: `2px solid ${colors2.card}`,
1645
- boxSizing: "content-box"
1646
- },
1647
- children: t.label
1648
- },
1649
- i
1650
- )) });
1651
- };
1652
- function chainsToTokenOptions(chains) {
1653
- const bySymbol = /* @__PURE__ */ new Map();
1654
- for (const c of chains) {
1655
- for (const t of c.tokens) {
1656
- if (!bySymbol.has(t.symbol)) bySymbol.set(t.symbol, { symbol: t.symbol, decimals: t.decimals });
1657
- }
1658
- }
1659
- return Array.from(bySymbol.entries()).map(([id, { symbol }]) => ({
1660
- id,
1661
- label: symbol,
1662
- subtitle: symbol
1663
- }));
1664
- }
1665
- function chainsToChainOptionsForToken(chains, tokenSymbol) {
1666
- return chains.filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol)).map((c) => ({
1667
- id: c.chain_id,
1668
- label: c.network,
1669
- subtitle: `chainId: ${c.chain_id}`,
1670
- icon: /* @__PURE__ */ jsx(
1671
- "span",
1672
- {
1673
- style: {
1674
- display: "inline-flex",
1675
- alignItems: "center",
1676
- justifyContent: "center",
1677
- minWidth: 28,
1678
- height: 28,
1679
- padding: "0 6px",
1680
- borderRadius: radii2.card,
1681
- background: "rgba(255,255,255,0.08)",
1682
- fontSize: 12,
1683
- fontWeight: 600,
1684
- color: colors2.textPrimary,
1685
- fontFamily: fonts2.family
1686
- },
1687
- children: c.network
1688
- }
1689
- )
1690
- }));
1691
- }
1692
- function getTokenAddressForChain(chains, chainId, tokenSymbol) {
1693
- const chain = chains.find((c) => c.chain_id === chainId);
1694
- return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
1695
- }
1696
- var FUNDING_TOKEN_SYMBOL = getEnv("FUNDING_TOKEN_SYMBOL");
1697
- var DepositModal = ({
1698
- token,
1699
- chain,
1700
- tokenOptions: tokenOptionsProp,
1701
- chainOptions: chainOptionsProp,
1702
- depositAddress,
1703
- minimumDeposit,
1704
- qrCenterIcon,
1705
- cryptoIcons,
1706
- depositAmount,
1707
- onShowToast,
1708
- txHash,
1709
- explorerTxUrl,
1710
- onTokenSelect,
1711
- onChainSelect,
1712
- onCopyAddress,
1713
- onBuyCrypto,
1714
- onSignIn,
1715
- onBack,
1716
- onClose
1717
- }) => {
1718
- const session = useSession();
1719
- const [view, setView] = useState("entry");
1720
- const [copySuccessMessage, setCopySuccessMessage] = useState(null);
1721
- const [apiChains, setApiChains] = useState(null);
1722
- const [apiQuote, setApiQuote] = useState(null);
1723
- const [loadingChains, setLoadingChains] = useState(false);
1724
- const [loadingQuote, setLoadingQuote] = useState(false);
1725
- const [quoteRefreshKey, setQuoteRefreshKey] = useState(0);
1726
- const [internalDepositAddress, setInternalDepositAddress] = useState(void 0);
1727
- const lastEmittedAddressRef = useRef(void 0);
1728
- const lastEmittedChainRef = useRef(void 0);
1729
- const tokenOptions = useMemo(() => {
1730
- if (tokenOptionsProp?.length) return tokenOptionsProp;
1731
- if (!apiChains?.length) return void 0;
1732
- return chainsToTokenOptions(apiChains);
1733
- }, [tokenOptionsProp, apiChains]);
1734
- const chainOptions = useMemo(() => {
1735
- if (chainOptionsProp?.length) return chainOptionsProp;
1736
- if (!apiChains?.length || !token) return void 0;
1737
- return chainsToChainOptionsForToken(apiChains, token);
1738
- }, [chainOptionsProp, apiChains, token]);
1739
- useEffect(() => {
1740
- if (chainOptions?.length !== 1 || !onChainSelect) return;
1741
- const onlyId = chainOptions[0].id;
1742
- if (chain === onlyId) return;
1743
- onChainSelect(onlyId);
1744
- }, [chainOptions, chain, onChainSelect]);
1745
- useEffect(() => {
1746
- if (view !== "transfer") return;
1747
- setLoadingChains(true);
1748
- getChains().then((res) => setApiChains(res?.chains ?? {})).finally(() => setLoadingChains(false));
1749
- }, [view]);
1750
- useEffect(() => {
1751
- if (view !== "transfer") return;
1752
- if (!session?.address || !chain) return;
1753
- const platform_contract_address = getEnv("PLATFORM_CONTRACT_ADDRESS") || session.address;
1754
- registerPlatform({
1755
- platform_contract_address,
1756
- chain_id: chain
1757
- }).then((res) => {
1758
- if (res?.deposit_address) {
1759
- setInternalDepositAddress(res.deposit_address);
1760
- }
1761
- }).catch(() => {
1762
- });
1763
- }, [view, chain, session?.address]);
1764
- useEffect(() => {
1765
- if (!apiChains?.length || !token || !chain) {
1766
- setApiQuote(null);
1767
- return;
1768
- }
1769
- const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
1770
- if (!tokenAddress) {
1771
- setApiQuote(null);
1772
- return;
1773
- }
1774
- setLoadingQuote(true);
1775
- quote({
1776
- direction: "deposit",
1777
- chain_id: chain,
1778
- token_address: tokenAddress,
1779
- token_amount: depositAmount || void 0
1780
- }).then((q) => setApiQuote(q ?? null)).catch((err) => {
1781
- const message = err?.message ?? String(err);
1782
- if (onShowToast) onShowToast(message);
1783
- setApiQuote({
1784
- token_address: tokenAddress,
1785
- token_symbol: token,
1786
- token_decimals: 18,
1787
- rate: "1",
1788
- chain_id: Number(chain) || 56,
1789
- deposit_address: "0x" + "0".repeat(39) + "1",
1790
- dst_token_amount: depositAmount ?? "0",
1791
- expires_at: new Date(Date.now() + 6e4).toISOString()
1792
- });
1793
- }).finally(() => setLoadingQuote(false));
1794
- }, [apiChains, token, chain, depositAmount, quoteRefreshKey, onShowToast]);
1795
- useEffect(() => {
1796
- if (!chain) return;
1797
- if (!depositAddress) return;
1798
- if (lastEmittedAddressRef.current === depositAddress && lastEmittedChainRef.current === chain) {
1799
- return;
1800
- }
1801
- lastEmittedAddressRef.current = depositAddress;
1802
- lastEmittedChainRef.current = chain;
1803
- }, [depositAddress, chain]);
1804
- const handleQuoteExpired = useCallback(() => {
1805
- setQuoteRefreshKey((k) => k + 1);
1806
- }, []);
1807
- useEffect(() => {
1808
- if (txHash && chain && onShowToast) {
1809
- onShowToast("Transfer confirmed");
1810
- }
1811
- }, [txHash, chain, onShowToast]);
1812
- if (!session) {
1813
- return /* @__PURE__ */ jsx(LoginRequiredOverlay, { title: "Deposit", onSignIn, onClose });
1814
- }
1815
- const goToEntry = () => {
1816
- setView("entry");
1817
- onBack?.();
1818
- };
1819
- const handleCopyAddress = useCallback((address) => {
1820
- onCopyAddress?.(address);
1821
- onShowToast?.("Address copied");
1822
- setCopySuccessMessage("Address copied");
1823
- }, [onCopyAddress, onShowToast]);
1824
- useEffect(() => {
1825
- if (!copySuccessMessage) return;
1826
- const t = setTimeout(() => setCopySuccessMessage(null), 2e3);
1827
- return () => clearTimeout(t);
1828
- }, [copySuccessMessage]);
1829
- return /* @__PURE__ */ jsxs(ModalFrame2, { onClose, contentStyle: { padding: "24px", position: "relative" }, children: [
1830
- copySuccessMessage && /* @__PURE__ */ jsx(
1831
- "div",
1832
- {
1833
- style: {
1834
- position: "absolute",
1835
- top: 12,
1836
- left: 0,
1837
- right: 0,
1838
- display: "flex",
1839
- justifyContent: "center",
1840
- pointerEvents: "none",
1841
- zIndex: 10
1842
- },
1843
- children: /* @__PURE__ */ jsx(
1844
- "div",
1845
- {
1846
- style: {
1847
- pointerEvents: "auto",
1848
- padding: "10px 20px",
1849
- borderRadius: 8,
1850
- background: "var(--pm-colors-card, #1a1a2e)",
1851
- color: "var(--pm-colors-textPrimary, #fff)",
1852
- fontSize: 13,
1853
- fontWeight: 500,
1854
- boxShadow: "0 4px 12px rgba(0,0,0,.25)"
1855
- },
1856
- children: copySuccessMessage
1857
- }
1858
- )
1859
- }
1860
- ),
1861
- view === "entry" ? /* @__PURE__ */ jsx(
1862
- EntryView,
1863
- {
1864
- cryptoIcons,
1865
- onTransferCrypto: () => setView("transfer"),
1866
- onBuyCrypto
1867
- }
1868
- ) : /* @__PURE__ */ jsx(
1869
- TransferView,
1870
- {
1871
- token,
1872
- chain,
1873
- tokenOptions,
1874
- chainOptions,
1875
- depositAddress: depositAddress ?? internalDepositAddress,
1876
- minimumDeposit,
1877
- qrCenterIcon,
1878
- quote: apiQuote,
1879
- quoteLoading: loadingQuote,
1880
- txHash,
1881
- chainIdForExplorer: chain,
1882
- explorerTxUrl,
1883
- loadingChains,
1884
- onTokenSelect,
1885
- onChainSelect,
1886
- onCopyAddress: handleCopyAddress,
1887
- onQuoteExpired: handleQuoteExpired,
1888
- onRefreshQuote: () => {
1889
- if (!apiChains?.length || !token || !chain) return;
1890
- const tokenAddress = getTokenAddressForChain(apiChains, chain, token);
1891
- if (tokenAddress) {
1892
- setLoadingQuote(true);
1893
- quote({ direction: "deposit", chain_id: chain, token_address: tokenAddress, token_amount: depositAmount }).then((q) => setApiQuote(q ?? null)).catch(() => {
1894
- setApiQuote({
1895
- token_address: tokenAddress,
1896
- token_symbol: token,
1897
- token_decimals: 18,
1898
- rate: "1",
1899
- chain_id: Number(chain) || 56,
1900
- deposit_address: "0x" + "0".repeat(39) + "1",
1901
- dst_token_amount: depositAmount ?? "0",
1902
- expires_at: new Date(Date.now() + 6e4).toISOString()
1903
- });
1904
- }).finally(() => setLoadingQuote(false));
1905
- }
1906
- },
1907
- onShowToast,
1908
- onBack: goToEntry
1909
- }
1910
- )
1911
- ] });
1912
- };
1913
- var EntryView = ({
1914
- cryptoIcons,
1915
- onTransferCrypto,
1916
- onBuyCrypto: _onBuyCrypto
1917
- }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
1918
- /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Deposit" }),
1919
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
1920
- /* @__PURE__ */ jsxs(
1921
- "button",
1922
- {
1923
- type: "button",
1924
- onClick: onTransferCrypto,
1925
- style: {
1926
- display: "flex",
1927
- alignItems: "center",
1928
- gap: 14,
1929
- padding: "18px 20px",
1930
- borderRadius: radii2.card,
1931
- border: `1px solid ${colors2.border}`,
1932
- background: "transparent",
1933
- cursor: "pointer",
1934
- textAlign: "left",
1935
- fontFamily: fonts2.family,
1936
- width: "100%",
1937
- transition: "border-color .15s"
1938
- },
1939
- onMouseEnter: (e) => {
1940
- e.target.closest("button").style.borderColor = colors2.borderStrong;
1941
- },
1942
- onMouseLeave: (e) => {
1943
- e.target.closest("button").style.borderColor = colors2.border;
1944
- },
1945
- children: [
1946
- /* @__PURE__ */ jsx(TransferIcon, {}),
1947
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [
1948
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textPrimary, fontSize: 16, fontWeight: 600 }, children: "Transfer Crypto" }),
1949
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textSecondary, fontSize: 13 }, children: "No limit \xB7 Instant" })
1950
- ] }),
1951
- cryptoIcons ?? /* @__PURE__ */ jsx(DefaultCryptoIcons, {})
1952
- ]
1953
- }
1954
- ),
1955
- /* @__PURE__ */ jsxs(
1956
- "div",
1957
- {
1958
- style: {
1959
- display: "flex",
1960
- alignItems: "center",
1961
- gap: 14,
1962
- padding: "18px 20px",
1963
- borderRadius: radii2.card,
1964
- border: `1px solid ${colors2.border}`,
1965
- opacity: 0.55
1966
- },
1967
- children: [
1968
- /* @__PURE__ */ jsx(FiatIcon, {}),
1969
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 2 }, children: [
1970
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textSecondary, fontSize: 16, fontWeight: 600 }, children: "Buy Crypto" }),
1971
- /* @__PURE__ */ jsx("span", { style: { color: colors2.textSecondary, fontSize: 13 }, children: "Debit card, credit card, ACH" })
1972
- ] }),
1973
- /* @__PURE__ */ jsx(
1974
- "span",
1975
- {
1976
- style: {
1977
- padding: "5px 12px",
1978
- borderRadius: radii2.pill,
1979
- border: `1px solid ${colors2.border}`,
1980
- fontSize: 12,
1981
- fontWeight: 500,
1982
- color: colors2.textSecondary,
1983
- whiteSpace: "nowrap"
1984
- },
1985
- children: "Coming Soon"
1986
- }
1987
- )
1988
- ]
1989
- }
1990
- )
1991
- ] })
1992
- ] });
1993
- var TransferView = ({
1994
- token,
1995
- chain,
1996
- tokenOptions,
1997
- chainOptions,
1998
- depositAddress,
1999
- minimumDeposit,
2000
- qrCenterIcon,
2001
- quote: quoteData,
2002
- quoteLoading,
2003
- txHash,
2004
- chainIdForExplorer,
2005
- explorerTxUrl,
2006
- loadingChains,
2007
- onTokenSelect,
2008
- onChainSelect,
2009
- onCopyAddress,
2010
- onQuoteExpired,
2011
- onRefreshQuote,
2012
- onShowToast,
2013
- onBack
2014
- }) => {
2015
- const activeStep = chain ? 2 : token ? 1 : 0;
2016
- const stepActive = [!!token, !!chain, !!quoteData];
2017
- const quoteExpired = useMemo(() => {
2018
- if (!quoteData?.expires_at) return false;
2019
- try {
2020
- return new Date(quoteData.expires_at).getTime() < Date.now();
2021
- } catch {
2022
- return false;
2023
- }
2024
- }, [quoteData?.expires_at]);
2025
- const didToastWait = useRef(false);
2026
- useEffect(() => {
2027
- if (!depositAddress || !onShowToast || didToastWait.current) return;
2028
- didToastWait.current = true;
2029
- onShowToast("Please wait for deposit-address balance to update");
2030
- }, [depositAddress, onShowToast]);
2031
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24 }, children: [
2032
- /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
2033
- onBack && /* @__PURE__ */ jsx(
2034
- "button",
2035
- {
2036
- type: "button",
2037
- onClick: onBack,
2038
- style: {
2039
- background: "transparent",
2040
- border: "none",
2041
- cursor: "pointer",
2042
- padding: 0,
2043
- display: "flex",
2044
- alignItems: "center"
2045
- },
2046
- children: /* @__PURE__ */ jsx(BackArrow, {})
2047
- }
2048
- ),
2049
- /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Transfer Crypto" })
2050
- ] }) }),
2051
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 16, position: "relative" }, children: [
2052
- /* @__PURE__ */ jsx(StepIndicator, { steps: 3, stepActive, activeStep }),
2053
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 40 }, children: [
2054
- /* @__PURE__ */ jsx(
2055
- DropdownField,
2056
- {
2057
- label: "Select token",
2058
- placeholder: loadingChains ? "Loading\u2026" : "Token",
2059
- value: token,
2060
- options: tokenOptions,
2061
- onSelect: onTokenSelect
2062
- }
2063
- ),
2064
- /* @__PURE__ */ jsx(
2065
- DropdownField,
2066
- {
2067
- label: "Select chain",
2068
- placeholder: loadingChains ? "Loading\u2026" : "Chain",
2069
- value: chain,
2070
- options: chainOptions,
2071
- onSelect: onChainSelect
2072
- }
2073
- ),
2074
- quoteData && token && chain && /* @__PURE__ */ jsx(
2075
- "div",
2076
- {
2077
- id: "quote-panel",
2078
- style: {
2079
- padding: "12px 16px",
2080
- borderRadius: radii2.card,
2081
- margin: "-10px 0",
2082
- border: `1px solid ${colors2.border}`,
2083
- display: "flex",
2084
- flexDirection: "column",
2085
- gap: 8
2086
- },
2087
- children: quoteLoading ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: colors2.textSecondary }, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2088
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: colors2.textSecondary }, children: [
2089
- "1 ",
2090
- quoteData.token_symbol,
2091
- " = ",
2092
- quoteData.rate,
2093
- " ",
2094
- FUNDING_TOKEN_SYMBOL
2095
- ] }),
2096
- quoteData.expires_at && /* @__PURE__ */ jsx(
2097
- Countdown,
2098
- {
2099
- expiresAt: quoteData.expires_at,
2100
- isExpired: quoteExpired,
2101
- onExpired: onQuoteExpired
2102
- }
2103
- ),
2104
- quoteExpired && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2105
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }),
2106
- onRefreshQuote && /* @__PURE__ */ jsx(
2107
- "button",
2108
- {
2109
- type: "button",
2110
- onClick: onRefreshQuote,
2111
- style: {
2112
- padding: "4px 12px",
2113
- fontSize: 12,
2114
- borderRadius: radii2.pill,
2115
- border: `1px solid ${colors2.border}`,
2116
- background: "transparent",
2117
- color: colors2.textPrimary,
2118
- cursor: "pointer",
2119
- fontFamily: fonts2.family
2120
- },
2121
- children: "Refresh"
2122
- }
2123
- )
2124
- ] })
2125
- ] })
2126
- }
2127
- ),
2128
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, marginTop: "-5px" }, id: "deposit-details", children: [
2129
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Deposit details" }),
2130
- depositAddress ? /* @__PURE__ */ jsxs(Fragment, { children: [
2131
- /* @__PURE__ */ jsx(
2132
- DepositDetailsPanel,
2133
- {
2134
- address: depositAddress,
2135
- tokenIcon: qrCenterIcon,
2136
- minimumDeposit,
2137
- onCopyAddress
2138
- }
2139
- ),
2140
- txHash && chainIdForExplorer && explorerTxUrl && /* @__PURE__ */ jsx(
2141
- "a",
2142
- {
2143
- href: explorerTxUrl(chainIdForExplorer, txHash),
2144
- target: "_blank",
2145
- rel: "noopener noreferrer",
2146
- style: {
2147
- fontSize: 13,
2148
- color: colors2.textPrimary,
2149
- textDecoration: "underline"
2150
- },
2151
- children: "View on explorer"
2152
- }
2153
- )
2154
- ] }) : /* @__PURE__ */ jsx(
2155
- "div",
2156
- {
2157
- style: {
2158
- padding: "20px",
2159
- borderRadius: radii2.card,
2160
- border: `1px solid ${colors2.border}`,
2161
- color: colors2.textSecondary,
2162
- fontSize: 13,
2163
- textAlign: "center"
2164
- },
2165
- children: "Select token and chain to view deposit details"
2166
- }
2167
- )
2168
- ] })
2169
- ] })
2170
- ] })
2171
- ] });
2172
- };
2173
- var SuccessIcon = () => {
2174
- return /* @__PURE__ */ jsxs("svg", { width: "80", height: "81", viewBox: "0 0 80 81", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
2175
- /* @__PURE__ */ jsx(
2176
- "path",
2177
- {
2178
- 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",
2179
- fill: "#627EEA"
2180
- }
2181
- ),
2182
- /* @__PURE__ */ jsx(
2183
- "path",
2184
- {
2185
- d: "M38.999 16.5V34.2437L53.9962 40.9451L38.999 16.5Z",
2186
- fill: "white",
2187
- fillOpacity: "0.602"
2188
- }
2189
- ),
2190
- /* @__PURE__ */ jsx("path", { d: "M38.9991 16.5L24 40.9451L38.9991 34.2437V16.5Z", fill: "white" }),
2191
- /* @__PURE__ */ jsx(
2192
- "path",
2193
- {
2194
- d: "M38.999 52.4434V64.4999L54.0061 43.7376L38.999 52.4434Z",
2195
- fill: "white",
2196
- fillOpacity: "0.602"
2197
- }
2198
- ),
2199
- /* @__PURE__ */ jsx("path", { d: "M38.9991 64.4999V52.4414L24 43.7376L38.9991 64.4999Z", fill: "white" }),
2200
- /* @__PURE__ */ jsx(
2201
- "path",
2202
- {
2203
- d: "M38.999 49.653L53.9962 40.9451L38.999 34.2477V49.653Z",
2204
- fill: "white",
2205
- fillOpacity: "0.2"
2206
- }
2207
- ),
2208
- /* @__PURE__ */ jsx(
2209
- "path",
2210
- {
2211
- d: "M24 40.9451L38.9991 49.653V34.2477L24 40.9451Z",
2212
- fill: "white",
2213
- fillOpacity: "0.602"
2214
- }
2215
- ),
2216
- /* @__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)" }) }),
2217
- /* @__PURE__ */ jsx(
2218
- "path",
2219
- {
2220
- d: "M25.8057 35.9858L38.7921 49.0324L56.7734 30.9678",
2221
- stroke: "#58AE36",
2222
- strokeWidth: "5.16129",
2223
- fill: "none"
2224
- }
2225
- ),
2226
- /* @__PURE__ */ jsxs("defs", { children: [
2227
- /* @__PURE__ */ jsxs(
2228
- "filter",
2229
- {
2230
- id: "filter0_ii_34_1690",
2231
- x: "0",
2232
- y: "0",
2233
- width: "80",
2234
- height: "80",
2235
- filterUnits: "userSpaceOnUse",
2236
- colorInterpolationFilters: "sRGB",
2237
- children: [
2238
- /* @__PURE__ */ jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
2239
- /* @__PURE__ */ jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "BackgroundImageFix", result: "shape" }),
2240
- /* @__PURE__ */ jsx(
2241
- "feColorMatrix",
2242
- {
2243
- in: "SourceAlpha",
2244
- type: "matrix",
2245
- values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
2246
- result: "hardAlpha"
2247
- }
2248
- ),
2249
- /* @__PURE__ */ jsx("feOffset", { dx: "-1.29032", dy: "-1.29032" }),
2250
- /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
2251
- /* @__PURE__ */ jsx(
2252
- "feColorMatrix",
2253
- {
2254
- type: "matrix",
2255
- values: "0 0 0 0 0.584745 0 0 0 0 1 0 0 0 0 0.420982 0 0 0 1 0"
2256
- }
2257
- ),
2258
- /* @__PURE__ */ jsx("feBlend", { mode: "multiply", in2: "shape", result: "effect1_innerShadow_34_1690" }),
2259
- /* @__PURE__ */ jsx(
2260
- "feColorMatrix",
2261
- {
2262
- in: "SourceAlpha",
2263
- type: "matrix",
2264
- values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
2265
- result: "hardAlpha"
2266
- }
2267
- ),
2268
- /* @__PURE__ */ jsx("feOffset", { dx: "1.29032", dy: "1.29032" }),
2269
- /* @__PURE__ */ jsx("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
2270
- /* @__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" }),
2271
- /* @__PURE__ */ jsx("feBlend", { mode: "normal", in2: "effect1_innerShadow_34_1690", result: "effect2_innerShadow_34_1690" })
2272
- ]
2273
- }
2274
- ),
2275
- /* @__PURE__ */ jsxs(
2276
- "linearGradient",
2277
- {
2278
- id: "paint0_linear_34_1690",
2279
- x1: "27.4722",
2280
- y1: "7.62951",
2281
- x2: "70.4313",
2282
- y2: "26.563",
2283
- gradientUnits: "userSpaceOnUse",
2284
- children: [
2285
- /* @__PURE__ */ jsx("stop", { stopColor: "#BBFFA1" }),
2286
- /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#ACFE8B" })
2287
- ]
2288
- }
2289
- )
2290
- ] })
2291
- ] });
2292
- };
2293
- function CopyIcon2() {
2294
- return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [
2295
- /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1", stroke: "currentColor", strokeWidth: "1.2", fill: "none" }),
2296
- /* @__PURE__ */ jsx("path", { d: "M3 11V3a1 1 0 0 1 1-1h8", stroke: "currentColor", strokeWidth: "1.2", fill: "none" })
2297
- ] });
2298
- }
2299
- var FUNDING_TOKEN_SYMBOL2 = getEnv("FUNDING_TOKEN_SYMBOL");
2300
- function chainsToTokenOptions2(chains) {
2301
- const bySymbol = /* @__PURE__ */ new Map();
2302
- for (const c of chains) {
2303
- for (const t of c.tokens) {
2304
- if (!bySymbol.has(t.symbol)) bySymbol.set(t.symbol, t.symbol);
2305
- }
2306
- }
2307
- return Array.from(bySymbol.entries()).map(([id, symbol]) => ({
2308
- id,
2309
- label: symbol,
2310
- subtitle: symbol
2311
- }));
2312
- }
2313
- function chainsToChainOptionsForToken2(chains, tokenSymbol) {
2314
- return chains.filter((c) => c.tokens.some((t) => t.symbol === tokenSymbol)).map((c) => ({ id: c.chain_id, label: c.network, subtitle: c.chain_id }));
2315
- }
2316
- function getTokenAddressForChain2(chains, chainId, tokenSymbol) {
2317
- const chain = chains.find((c) => c.chain_id === chainId);
2318
- return chain?.tokens.find((t) => t.symbol === tokenSymbol)?.address;
2319
- }
2320
- function parseBalanceNumber(balance) {
2321
- const match = balance.trim().match(/^(\d*\.?\d*)/);
2322
- if (!match) return null;
2323
- const n = Number(match[1]);
2324
- return Number.isNaN(n) ? null : n;
2325
- }
2326
- function formatBalanceTo2Decimals(balance) {
2327
- const match = balance.trim().match(/^(\d*\.?\d*)(.*)$/);
2328
- if (!match) return balance;
2329
- const numPart = match[1];
2330
- const suffix = match[2].trim() ? " " + match[2].trim() : "";
2331
- const n = Number(numPart);
2332
- if (Number.isNaN(n)) return balance;
2333
- const formatted = n.toFixed(2);
2334
- return formatted + suffix;
2335
- }
2336
- function weiToEtherDisplay(wei) {
2337
- const s = (wei || "0").trim().replace(/^0+/, "") || "0";
2338
- if (s === "0") return "0";
2339
- const padded = s.padStart(19, "0");
2340
- const intPart = padded.slice(0, Math.max(0, padded.length - 18));
2341
- const decPart = padded.slice(-18).replace(/0+$/, "");
2342
- const combined = decPart ? `${intPart}.${decPart}` : intPart;
2343
- const num = Number(combined);
2344
- if (Number.isNaN(num)) return wei;
2345
- const fixed = num.toFixed(6).replace(/\.?0+$/, "");
2346
- return fixed;
2347
- }
2348
- var POLL_INTERVAL_MS = 4e3;
2349
- var WithdrawModal = ({
2350
- address = "",
2351
- token,
2352
- tokenSymbol,
2353
- chain,
2354
- amount = "",
2355
- balance,
2356
- status = "idle",
2357
- receiveAmount: receiveAmountProp,
2358
- txHash,
2359
- tokenOptions: tokenOptionsProp,
2360
- chainOptions: chainOptionsProp,
2361
- useMerchantApi = false,
2362
- orderId,
2363
- withdrawMode,
2364
- withdrawDirectResult,
2365
- feeDisplay,
2366
- fundingChainId,
2367
- onShowToast,
2368
- onAddressChange,
2369
- onTokenSelect,
2370
- onChainSelect,
2371
- onAmountChange,
2372
- onMaxClick,
2373
- onSubmit,
2374
- onWithdrawCompleted,
2375
- onStartAnotherWithdrawal,
2376
- onSignIn,
2377
- onClose
2378
- }) => {
2379
- const session = useSession();
2380
- const addressInputRef = useRef(null);
2381
- const [addressInputFocused, setAddressInputFocused] = useState(false);
2382
- const [amountInputFocused, setAmountInputFocused] = useState(false);
2383
- const [apiChains, setApiChains] = useState(null);
2384
- const [apiQuote, setApiQuote] = useState(null);
2385
- const [withdrawOrder, setWithdrawOrder] = useState(null);
2386
- const [loadingChains, setLoadingChains] = useState(false);
2387
- const [loadingQuote, setLoadingQuote] = useState(false);
2388
- const tokenOptions = useMemo(() => {
2389
- const raw = tokenOptionsProp?.length ? tokenOptionsProp : apiChains?.length ? chainsToTokenOptions2(apiChains) : void 0;
2390
- if (!raw?.length) return void 0;
2391
- return raw;
2392
- }, [tokenOptionsProp, apiChains]);
2393
- const chainOptions = useMemo(() => {
2394
- if (chainOptionsProp?.length) return chainOptionsProp;
2395
- if (!apiChains?.length || !token) return void 0;
2396
- return chainsToChainOptionsForToken2(apiChains, token);
2397
- }, [chainOptionsProp, apiChains, token]);
2398
- const resolvedTokenAddress = useMemo(() => {
2399
- if (!apiChains?.length || !token || !chain) return void 0;
2400
- return getTokenAddressForChain2(apiChains, chain, token);
2401
- }, [apiChains, token, chain]);
2402
- const [directActive, setDirectActive] = useState(false);
2403
- useEffect(() => {
2404
- setDirectActive(withdrawMode === "direct" && Boolean(withdrawDirectResult));
2405
- }, [withdrawMode, withdrawDirectResult]);
2406
- const trackingWithdraw = useMemo(
2407
- () => Boolean(orderId) || directActive,
2408
- [orderId, directActive]
2409
- );
2410
- useEffect(() => {
2411
- if (trackingWithdraw) return;
2412
- const t = requestAnimationFrame(() => {
2413
- addressInputRef.current?.focus();
2414
- });
2415
- return () => cancelAnimationFrame(t);
2416
- }, [trackingWithdraw]);
2417
- const shouldLoadChains = useMerchantApi || Boolean(token && chain);
2418
- useEffect(() => {
2419
- if (!shouldLoadChains) return;
2420
- setLoadingChains(true);
2421
- getChains().then((res) => setApiChains(res?.chains ?? [])).finally(() => setLoadingChains(false));
2422
- }, [shouldLoadChains]);
2423
- useEffect(() => {
2424
- if (!apiChains?.length || !token || !chain) {
2425
- setApiQuote(null);
2426
- return;
2427
- }
2428
- const tokenAddress = getTokenAddressForChain2(apiChains, chain, token);
2429
- if (!tokenAddress) {
2430
- setApiQuote(null);
2431
- return;
2432
- }
2433
- const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
2434
- const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
2435
- setLoadingQuote(true);
2436
- quote({
2437
- direction: "withdraw",
2438
- chain_id: chain,
2439
- token_address: tokenAddress,
2440
- dst_token_amount: amountWei
2441
- }).then((q) => setApiQuote(q ?? null)).catch(() => {
2442
- setApiQuote({
2443
- token_address: tokenAddress,
2444
- token_symbol: token,
2445
- token_decimals: 18,
2446
- rate: "1",
2447
- chain_id: Number(chain) || 56,
2448
- token_amount: amountWei,
2449
- expires_at: new Date(Date.now() + 6e4).toISOString()
2450
- });
2451
- }).finally(() => setLoadingQuote(false));
2452
- }, [apiChains, token, chain, amount]);
2453
- useEffect(() => {
2454
- if (tokenOptions?.length !== 1 || !onTokenSelect) return;
2455
- const onlyId = tokenOptions[0].id;
2456
- if (token === onlyId) return;
2457
- onTokenSelect(onlyId);
2458
- }, [tokenOptions, token, onTokenSelect]);
2459
- useEffect(() => {
2460
- if (chainOptions?.length !== 1 || !onChainSelect) return;
2461
- const onlyId = chainOptions[0].id;
2462
- if (chain === onlyId) return;
2463
- onChainSelect(onlyId);
2464
- }, [chainOptions, chain, onChainSelect]);
2465
- const mockWithdrawOrderState = useMemo(
2466
- () => ({
2467
- order_id: orderId ?? "",
2468
- status: "pending",
2469
- chain_id: "56",
2470
- dst_token_amount: "0",
2471
- target_chain_id: chain ?? "1",
2472
- target_address: address ?? "0x",
2473
- created_at: (/* @__PURE__ */ new Date()).toISOString(),
2474
- updated_at: (/* @__PURE__ */ new Date()).toISOString()
2475
- }),
2476
- [orderId, chain, address]
2477
- );
2478
- useEffect(() => {
2479
- if (orderId) {
2480
- const t = setInterval(() => {
2481
- getWithdrawOrder(orderId).then((order) => {
2482
- setWithdrawOrder(order);
2483
- }).catch(() => setWithdrawOrder(mockWithdrawOrderState));
2484
- }, POLL_INTERVAL_MS);
2485
- getWithdrawOrder(orderId).then(setWithdrawOrder).catch(() => setWithdrawOrder(mockWithdrawOrderState));
2486
- return () => clearInterval(t);
2487
- }
2488
- if (!orderId && directActive) {
2489
- const now = (/* @__PURE__ */ new Date()).toISOString();
2490
- const inferredAmountWei = (() => {
2491
- if (withdrawDirectResult?.dst_token_amount) return withdrawDirectResult.dst_token_amount;
2492
- const n = Number(amount || "0");
2493
- return String(n > 0 ? BigInt(Math.floor(n * 1e18)) : 0n);
2494
- })();
2495
- const synthetic = {
2496
- order_id: withdrawDirectResult?.order_id ?? `direct-${Date.now()}`,
2497
- status: withdrawDirectResult?.status ?? "pending",
2498
- chain_id: withdrawDirectResult?.chain_id ?? String(fundingChainId ?? "3131"),
2499
- dst_token_amount: inferredAmountWei,
2500
- fee: withdrawDirectResult?.fee ?? feeDisplay,
2501
- target_chain_id: withdrawDirectResult?.target_chain_id ?? (chain ?? ""),
2502
- target_address: withdrawDirectResult?.target_address ?? (address ?? ""),
2503
- funding_tx_hash: withdrawDirectResult?.funding_tx_hash ?? txHash,
2504
- dst_tx_hash: withdrawDirectResult?.dst_tx_hash,
2505
- out_tx_hash: withdrawDirectResult?.out_tx_hash,
2506
- created_at: withdrawDirectResult?.created_at ?? now,
2507
- updated_at: withdrawDirectResult?.updated_at ?? now,
2508
- one_time_address: withdrawDirectResult?.one_time_address
2509
- };
2510
- setWithdrawOrder(synthetic);
2511
- return;
2512
- }
2513
- setWithdrawOrder(null);
2514
- }, [orderId, directActive, withdrawDirectResult, amount, feeDisplay, chain, address, txHash, fundingChainId, onShowToast, mockWithdrawOrderState]);
2515
- const completedKeyRef = useRef(null);
2516
- const successToastKeyRef = useRef(null);
2517
- useEffect(() => {
2518
- if (withdrawOrder?.status !== "completed") return;
2519
- const key = orderId ?? withdrawOrder.order_id;
2520
- if (key && completedKeyRef.current !== key) {
2521
- completedKeyRef.current = key;
2522
- onWithdrawCompleted?.();
2523
- }
2524
- if (!trackingWithdraw) completedKeyRef.current = null;
2525
- }, [withdrawOrder?.status, orderId, trackingWithdraw, onWithdrawCompleted]);
2526
- useEffect(() => {
2527
- if (!withdrawOrder || withdrawOrder.status !== "completed") return;
2528
- const key = orderId ?? withdrawOrder.order_id;
2529
- if (!key) return;
2530
- if (successToastKeyRef.current === key) return;
2531
- successToastKeyRef.current = key;
2532
- onShowToast?.("Withdrawal completed");
2533
- }, [withdrawOrder, orderId, onShowToast]);
2534
- useEffect(() => {
2535
- if (!trackingWithdraw) successToastKeyRef.current = null;
2536
- }, [trackingWithdraw]);
2537
- const receiveAmount = useMemo(() => {
2538
- if (receiveAmountProp) {
2539
- const n = Number(receiveAmountProp);
2540
- if (!Number.isNaN(n)) return n.toFixed(2);
2541
- return receiveAmountProp;
2542
- }
2543
- if (!apiQuote?.token_amount || !apiQuote?.token_symbol) return void 0;
2544
- const amount2 = Number(apiQuote.token_amount);
2545
- const formatted = Number.isNaN(amount2) ? apiQuote.token_amount : amount2.toFixed(2);
2546
- return `\u2248 ${formatted} (wei) ${apiQuote.token_symbol}`;
2547
- }, [receiveAmountProp, apiQuote]);
2548
- const quoteExpired = useMemo(() => {
2549
- if (!apiQuote?.expires_at) return false;
2550
- try {
2551
- return new Date(apiQuote.expires_at).getTime() < Date.now();
2552
- } catch {
2553
- return false;
2554
- }
2555
- }, [apiQuote?.expires_at]);
2556
- const handleRefreshQuote = useCallback(() => {
2557
- if (!apiChains?.length || !token || !chain) return;
2558
- const tokenAddress = getTokenAddressForChain2(apiChains, chain, token);
2559
- if (!tokenAddress) return;
2560
- const amountNum = amount && Number(amount) > 0 ? Number(amount) : 1;
2561
- const amountWei = String(BigInt(Math.floor(amountNum * 1e18)));
2562
- setLoadingQuote(true);
2563
- quote({
2564
- direction: "withdraw",
2565
- chain_id: chain,
2566
- token_address: tokenAddress,
2567
- dst_token_amount: amountWei
2568
- }).then((q) => setApiQuote(q ?? null)).catch(() => {
2569
- setApiQuote({
2570
- token_address: tokenAddress,
2571
- token_symbol: token,
2572
- token_decimals: 18,
2573
- rate: "1",
2574
- chain_id: Number(chain) || 56,
2575
- token_amount: amountWei,
2576
- expires_at: new Date(Date.now() + 6e4).toISOString()
2577
- });
2578
- }).finally(() => setLoadingQuote(false));
2579
- }, [apiChains, token, chain, amount]);
2580
- const handleAmountChange = useCallback(
2581
- (e) => {
2582
- const raw = e.target.value;
2583
- const maxNum = balance ? parseBalanceNumber(balance) : null;
2584
- if (maxNum != null && raw !== "" && raw !== ".") {
2585
- const num = Number(raw);
2586
- if (!Number.isNaN(num) && num > maxNum) {
2587
- onAmountChange?.({
2588
- ...e,
2589
- target: { ...e.target, value: String(maxNum) }
2590
- });
2591
- return;
2592
- }
2593
- }
2594
- onAmountChange?.(e);
2595
- },
2596
- [balance, onAmountChange]
2597
- );
2598
- if (!session) {
2599
- return /* @__PURE__ */ jsx(LoginRequiredOverlay, { title: "Withdraw", onSignIn, onClose });
2600
- }
2601
- const activeStep = amount ? 3 : chain ? 2 : token ? 1 : address ? 0 : 0;
2602
- const canSubmit = address && token && chain && amount;
2603
- const isSubmitting = status !== "idle";
2604
- const orderInProgress = trackingWithdraw && (!withdrawOrder || withdrawOrder.status !== "completed");
2605
- const orderSucceeded = trackingWithdraw && withdrawOrder?.status === "completed";
2606
- return /* @__PURE__ */ jsxs(
2607
- ModalFrame2,
2608
- {
2609
- onClose,
2610
- contentStyle: {
2611
- justifyContent: "space-between",
2612
- padding: "24px"
2613
- },
2614
- children: [
2615
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
2616
- /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 24, fontWeight: 600, lineHeight: 1.4 }, children: "Withdraw" }) }),
2617
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 16 }, children: [
2618
- /* @__PURE__ */ jsx(
2619
- "div",
2620
- {
2621
- style: {
2622
- opacity: trackingWithdraw ? 0 : 1,
2623
- maxWidth: trackingWithdraw ? 0 : 48,
2624
- overflow: "hidden",
2625
- transition: "opacity 0.3s ease, max-width 0.35s ease"
2626
- },
2627
- children: /* @__PURE__ */ jsx(
2628
- StepIndicator,
2629
- {
2630
- steps: 4,
2631
- stepActive: [!!address, !!token, !!chain, !!apiQuote],
2632
- activeStep
2633
- }
2634
- )
2635
- }
2636
- ),
2637
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, position: "relative", minHeight: 400 }, children: [
2638
- /* @__PURE__ */ jsxs(
2639
- "div",
2640
- {
2641
- style: {
2642
- position: "absolute",
2643
- inset: 0,
2644
- display: "flex",
2645
- flexDirection: "column",
2646
- alignItems: "center",
2647
- justifyContent: "center",
2648
- gap: 12,
2649
- padding: "0 16px",
2650
- opacity: trackingWithdraw ? 1 : 0,
2651
- maxHeight: trackingWithdraw ? 400 : 0,
2652
- overflow: "hidden",
2653
- pointerEvents: trackingWithdraw ? "auto" : "none",
2654
- transition: "opacity 0.3s ease, max-height 0.35s ease"
2655
- },
2656
- children: [
2657
- orderInProgress && /* @__PURE__ */ jsxs(
2658
- "div",
2659
- {
2660
- style: {
2661
- display: "flex",
2662
- flexDirection: "column",
2663
- alignItems: "center",
2664
- justifyContent: "center",
2665
- gap: 32
2666
- },
2667
- children: [
2668
- /* @__PURE__ */ jsx(
2669
- "span",
2670
- {
2671
- style: {
2672
- display: "inline-block",
2673
- width: 60,
2674
- height: 60,
2675
- border: `3px solid ${colors2.border}`,
2676
- borderTopColor: colors2.textPrimary,
2677
- borderRadius: "50%",
2678
- animation: "withdraw-modal-spin 0.8s linear infinite"
2679
- },
2680
- "aria-hidden": true
2681
- }
2682
- ),
2683
- /* @__PURE__ */ jsx(
2684
- "span",
2685
- {
2686
- style: {
2687
- fontSize: 20,
2688
- fontWeight: 600,
2689
- color: colors2.textPrimary,
2690
- textAlign: "center",
2691
- fontFamily: fonts2.family,
2692
- lineHeight: 1.4
2693
- },
2694
- children: "Processing withdrawal..."
2695
- }
2696
- )
2697
- ]
2698
- }
2699
- ),
2700
- orderSucceeded && (() => {
2701
- const destTxHash = withdrawOrder.dst_tx_hash ?? withdrawOrder.out_tx_hash;
2702
- const targetChainName = apiChains?.find((c) => c.chain_id === withdrawOrder.target_chain_id)?.network ?? withdrawOrder.target_chain_id ?? "\u2014";
2703
- const explorerUrl = destTxHash && withdrawOrder.target_chain_id ? getExplorerUrl(withdrawOrder.target_chain_id, { txId: destTxHash }) : null;
2704
- const copyHash = () => {
2705
- if (destTxHash && typeof navigator?.clipboard?.writeText === "function") {
2706
- navigator.clipboard.writeText(destTxHash);
2707
- onShowToast?.("Copied");
2708
- }
2709
- };
2710
- return /* @__PURE__ */ jsxs(
2711
- "div",
2712
- {
2713
- style: {
2714
- display: "flex",
2715
- flexDirection: "column",
2716
- alignItems: "center",
2717
- gap: 20,
2718
- width: "100%",
2719
- maxWidth: 412
2720
- },
2721
- children: [
2722
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 24 }, children: [
2723
- /* @__PURE__ */ jsx(
2724
- "span",
2725
- {
2726
- style: {
2727
- display: "flex",
2728
- alignItems: "center",
2729
- justifyContent: "center",
2730
- width: 60,
2731
- height: 60,
2732
- borderRadius: "50%",
2733
- color: "#22c55e",
2734
- fontSize: 40,
2735
- lineHeight: 1,
2736
- fontWeight: 700
2737
- },
2738
- "aria-hidden": true,
2739
- children: /* @__PURE__ */ jsx(SuccessIcon, {})
2740
- }
2741
- ),
2742
- /* @__PURE__ */ jsx(
2743
- "span",
2744
- {
2745
- style: {
2746
- fontSize: 20,
2747
- fontWeight: 600,
2748
- color: colors2.textPrimary,
2749
- textAlign: "center",
2750
- fontFamily: fonts2.family,
2751
- lineHeight: 1.4
2752
- },
2753
- children: "Withdrawal successful"
2754
- }
2755
- )
2756
- ] }),
2757
- /* @__PURE__ */ jsxs(
2758
- "div",
2759
- {
2760
- style: {
2761
- display: "flex",
2762
- flexDirection: "column",
2763
- gap: 4,
2764
- width: "100%"
2765
- },
2766
- children: [
2767
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [
2768
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Amount" }),
2769
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: [
2770
- weiToEtherDisplay(withdrawOrder.dst_token_amount),
2771
- " ",
2772
- tokenSymbol
2773
- ] })
2774
- ] }),
2775
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [
2776
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Fee" }),
2777
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: withdrawOrder.fee ?? feeDisplay ?? "\u2014" })
2778
- ] }),
2779
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", height: 36 }, children: [
2780
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Network" }),
2781
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: targetChainName })
2782
- ] }),
2783
- destTxHash && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", minHeight: 38 }, children: [
2784
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textSecondary }, children: "Transaction Hash" }),
2785
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2786
- explorerUrl ? /* @__PURE__ */ jsxs(
2787
- "a",
2788
- {
2789
- href: explorerUrl,
2790
- target: "_blank",
2791
- rel: "noopener noreferrer",
2792
- style: { fontSize: 14, color: colors2.textPrimary, textDecoration: "underline" },
2793
- children: [
2794
- destTxHash.slice(0, 10),
2795
- "...",
2796
- destTxHash.slice(-8)
2797
- ]
2798
- }
2799
- ) : /* @__PURE__ */ jsxs("span", { style: { fontSize: 14, color: colors2.textPrimary }, children: [
2800
- destTxHash.slice(0, 10),
2801
- "...",
2802
- destTxHash.slice(-8)
2803
- ] }),
2804
- /* @__PURE__ */ jsx(
2805
- "button",
2806
- {
2807
- type: "button",
2808
- onClick: copyHash,
2809
- "aria-label": "Copy hash",
2810
- style: {
2811
- padding: 0,
2812
- border: "none",
2813
- background: "transparent",
2814
- color: colors2.textPrimary,
2815
- cursor: "pointer",
2816
- display: "flex",
2817
- alignItems: "center",
2818
- justifyContent: "center",
2819
- width: 16,
2820
- height: 16
2821
- },
2822
- children: /* @__PURE__ */ jsx(CopyIcon2, {})
2823
- }
2824
- )
2825
- ] })
2826
- ] })
2827
- ]
2828
- }
2829
- ),
2830
- /* @__PURE__ */ jsx("div", { style: { paddingTop: 24, width: "100%", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
2831
- "button",
2832
- {
2833
- type: "button",
2834
- onClick: () => {
2835
- setDirectActive(false);
2836
- setWithdrawOrder(null);
2837
- (onStartAnotherWithdrawal ?? onClose)?.();
2838
- },
2839
- style: {
2840
- width: 274,
2841
- padding: "12px 0",
2842
- borderRadius: radii2.full,
2843
- border: `1px solid ${colors2.buttonDisabledBorder}`,
2844
- background: colors2.textPrimary,
2845
- color: "#121214",
2846
- fontSize: 16,
2847
- fontWeight: 500,
2848
- lineHeight: 1.4,
2849
- fontFamily: fonts2.family,
2850
- cursor: "pointer",
2851
- textAlign: "center"
2852
- },
2853
- children: "Start another withdrawal"
2854
- }
2855
- ) })
2856
- ]
2857
- }
2858
- );
2859
- })()
2860
- ]
2861
- }
2862
- ),
2863
- /* @__PURE__ */ jsx(
2864
- "div",
2865
- {
2866
- style: {
2867
- opacity: trackingWithdraw ? 0 : 1,
2868
- maxHeight: trackingWithdraw ? 0 : 1200,
2869
- overflow: "hidden",
2870
- pointerEvents: trackingWithdraw ? "none" : "auto",
2871
- transition: "opacity 0.3s ease, max-height 0.35s ease"
2872
- },
2873
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 40 }, children: [
2874
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" }, children: [
2875
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Recipient address" }),
2876
- /* @__PURE__ */ jsx(
2877
- "div",
2878
- {
2879
- style: {
2880
- display: "flex",
2881
- alignItems: "center",
2882
- height: 44,
2883
- padding: "0 16px",
2884
- borderRadius: radii2.input,
2885
- border: `1px solid ${addressInputFocused ? colors2.borderFocused : colors2.border}`,
2886
- boxSizing: "border-box"
2887
- },
2888
- children: /* @__PURE__ */ jsx(
2889
- "input",
2890
- {
2891
- ref: addressInputRef,
2892
- value: address,
2893
- onChange: onAddressChange,
2894
- readOnly: !onAddressChange,
2895
- onFocus: () => setAddressInputFocused(true),
2896
- onBlur: () => setAddressInputFocused(false),
2897
- spellCheck: false,
2898
- placeholder: "0x",
2899
- style: {
2900
- flex: 1,
2901
- border: "none",
2902
- outline: "none",
2903
- background: "transparent",
2904
- color: colors2.textPrimary,
2905
- fontSize: 14,
2906
- fontFamily: fonts2.family,
2907
- lineHeight: 1.4,
2908
- padding: 0
2909
- }
2910
- }
2911
- )
2912
- }
2913
- )
2914
- ] }),
2915
- /* @__PURE__ */ jsx(
2916
- DropdownField,
2917
- {
2918
- label: "Select token",
2919
- placeholder: loadingChains ? "Loading\u2026" : "Token",
2920
- value: token,
2921
- options: tokenOptions,
2922
- onSelect: onTokenSelect
2923
- }
2924
- ),
2925
- /* @__PURE__ */ jsx(
2926
- DropdownField,
2927
- {
2928
- label: "Select chain",
2929
- placeholder: loadingChains ? "Loading\u2026" : "Chain",
2930
- value: chain,
2931
- options: chainOptions,
2932
- onSelect: onChainSelect
2933
- }
2934
- ),
2935
- apiQuote && token && chain && /* @__PURE__ */ jsx(
2936
- "div",
2937
- {
2938
- style: {
2939
- padding: "12px 16px",
2940
- borderRadius: radii2.card,
2941
- border: `1px solid ${colors2.border}`,
2942
- display: "flex",
2943
- flexDirection: "column",
2944
- gap: 8
2945
- },
2946
- children: loadingQuote ? /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: colors2.textSecondary }, children: "Loading\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
2947
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: colors2.textSecondary }, children: [
2948
- "Rate: 1 ",
2949
- FUNDING_TOKEN_SYMBOL2,
2950
- " = ",
2951
- apiQuote.rate,
2952
- " ",
2953
- apiQuote.token_symbol
2954
- ] }),
2955
- apiQuote.expires_at && /* @__PURE__ */ jsx(
2956
- Countdown,
2957
- {
2958
- expiresAt: apiQuote.expires_at,
2959
- isExpired: quoteExpired,
2960
- onExpired: handleRefreshQuote
2961
- }
2962
- ),
2963
- quoteExpired && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2964
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#f59e0b" }, children: "Quote expired, please refresh" }),
2965
- /* @__PURE__ */ jsx(
2966
- "button",
2967
- {
2968
- type: "button",
2969
- onClick: handleRefreshQuote,
2970
- style: {
2971
- padding: "4px 12px",
2972
- fontSize: 12,
2973
- borderRadius: radii2.pill,
2974
- border: `1px solid ${colors2.border}`,
2975
- background: "transparent",
2976
- color: colors2.textPrimary,
2977
- cursor: "pointer",
2978
- fontFamily: fonts2.family
2979
- },
2980
- children: "Refresh"
2981
- }
2982
- )
2983
- ] })
2984
- ] })
2985
- }
2986
- ),
2987
- /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
2988
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
2989
- /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: "Amount" }),
2990
- balance && /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, lineHeight: 1.2, color: colors2.textSecondary }, children: [
2991
- "Balance: \xA0",
2992
- formatBalanceTo2Decimals(balance),
2993
- " ",
2994
- FUNDING_TOKEN_SYMBOL2
2995
- ] })
2996
- ] }),
2997
- /* @__PURE__ */ jsxs(
2998
- "div",
2999
- {
3000
- style: {
3001
- display: "flex",
3002
- alignItems: "center",
3003
- justifyContent: "space-between",
3004
- height: 48,
3005
- padding: "0 16px",
3006
- borderRadius: radii2.input,
3007
- border: `1px solid ${amountInputFocused ? colors2.borderFocused : colors2.border}`,
3008
- boxSizing: "border-box"
3009
- },
3010
- children: [
3011
- /* @__PURE__ */ jsx(
3012
- "input",
3013
- {
3014
- value: amount,
3015
- onChange: handleAmountChange,
3016
- onFocus: () => setAmountInputFocused(true),
3017
- onBlur: () => setAmountInputFocused(false),
3018
- placeholder: "0.00",
3019
- type: "text",
3020
- inputMode: "decimal",
3021
- style: {
3022
- flex: 1,
3023
- border: "none",
3024
- outline: "none",
3025
- background: "transparent",
3026
- color: amount ? colors2.textPrimary : colors2.textSecondary,
3027
- fontSize: 14,
3028
- fontFamily: fonts2.family,
3029
- lineHeight: 1.4,
3030
- padding: 0
3031
- }
3032
- }
3033
- ),
3034
- /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: /* @__PURE__ */ jsx(
3035
- "button",
3036
- {
3037
- type: "button",
3038
- onClick: onMaxClick,
3039
- style: {
3040
- background: colors2.textPrimary,
3041
- border: "none",
3042
- borderRadius: radii2.pill,
3043
- padding: "2px 8px",
3044
- fontSize: 12,
3045
- lineHeight: 1.4,
3046
- fontWeight: 400,
3047
- color: "#15181D",
3048
- fontFamily: fonts2.family,
3049
- cursor: "pointer"
3050
- },
3051
- children: "Max"
3052
- }
3053
- ) })
3054
- ]
3055
- }
3056
- )
3057
- ] }) })
3058
- ] })
3059
- }
3060
- )
3061
- ] })
3062
- ] })
3063
- ] }),
3064
- /* @__PURE__ */ jsxs("div", { style: { padding: "20px 20px 0", display: "flex", flexDirection: "column", gap: 10, alignItems: "center" }, id: "WithdrawModalReceiveAmount", children: [
3065
- !trackingWithdraw && amount && Number(amount) > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: 14, lineHeight: 1.4, color: colors2.textPrimary }, children: [
3066
- "You will receive : ",
3067
- receiveAmount
3068
- ] }),
3069
- orderInProgress && withdrawOrder && (() => {
3070
- const fundingHash = txHash ?? withdrawOrder?.funding_tx_hash;
3071
- const showFundingLink = fundingHash && fundingChainId;
3072
- try {
3073
- return /* @__PURE__ */ jsx("div", { style: { display: "none", flexDirection: "column", gap: 6, alignItems: "center" }, children: showFundingLink && /* @__PURE__ */ jsx(
3074
- "a",
3075
- {
3076
- href: getExplorerUrl(fundingChainId, { txId: fundingHash }),
3077
- target: "_blank",
3078
- rel: "noopener noreferrer",
3079
- style: { fontSize: 13, color: colors2.textPrimary, textDecoration: "underline" },
3080
- children: "Withdraw request transaction on explorer"
3081
- }
3082
- ) });
3083
- } catch {
3084
- return /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: colors2.textPrimary }, children: "Withdraw in progress." });
3085
- }
3086
- })(),
3087
- orderInProgress && withdrawOrder && /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: colors2.textSecondary, display: "none", alignItems: "center", gap: 6 }, children: [
3088
- "Order status: ",
3089
- withdrawOrder.status,
3090
- /* @__PURE__ */ jsx(
3091
- "span",
3092
- {
3093
- style: {
3094
- display: "inline-block",
3095
- width: 10,
3096
- height: 10,
3097
- border: `2px solid ${colors2.textSecondary}`,
3098
- borderTopColor: "transparent",
3099
- borderRadius: "50%",
3100
- animation: "withdraw-modal-spin 0.7s linear infinite"
3101
- },
3102
- "aria-hidden": true
3103
- }
3104
- )
3105
- ] }),
3106
- /* @__PURE__ */ jsx("style", { children: `@keyframes withdraw-modal-spin { to { transform: rotate(360deg); } }` }),
3107
- orderSucceeded || trackingWithdraw ? null : /* @__PURE__ */ jsx(
3108
- SubmitButton,
3109
- {
3110
- disabled: !canSubmit || isSubmitting,
3111
- status,
3112
- onClick: () => {
3113
- try {
3114
- const ret = onSubmit?.({
3115
- toAddress: address,
3116
- amount: amount ?? "",
3117
- token: token ?? "",
3118
- tokenAddress: resolvedTokenAddress ?? apiQuote?.token_address ?? "",
3119
- chain: chain ?? ""
3120
- });
3121
- if (ret && typeof ret.then === "function") {
3122
- ret.catch((err) => {
3123
- const msg = err instanceof Error ? err.message : "Transaction failed";
3124
- onShowToast?.(msg);
3125
- });
3126
- }
3127
- } catch (err) {
3128
- const msg = err instanceof Error ? err.message : "Transaction failed";
3129
- onShowToast?.(msg);
3130
- }
3131
- }
3132
- }
3133
- )
3134
- ] })
3135
- ]
3136
- }
3137
- );
3138
- };
3139
- var SubmitButton = ({ disabled, status, onClick }) => {
3140
- const labels = {
3141
- idle: disabled ? "Please fill in withdrawal information" : "Submit",
3142
- pending: "Processing...",
3143
- success: "Withdrawal successful",
3144
- manual_review: "Under manual review"
3145
- };
3146
- const isDisabled = disabled || status !== "idle";
3147
- return /* @__PURE__ */ jsx(
3148
- "button",
3149
- {
3150
- type: "button",
3151
- disabled: isDisabled,
3152
- onClick,
3153
- style: {
3154
- width: 364,
3155
- padding: "12px 0",
3156
- borderRadius: radii2.full,
3157
- border: isDisabled ? `1px solid ${colors2.buttonDisabledBorder}` : "none",
3158
- background: isDisabled ? colors2.buttonDisabledBg : colors2.textPrimary,
3159
- color: isDisabled ? colors2.textSecondary : "#15181D",
3160
- fontSize: 16,
3161
- fontWeight: 500,
3162
- lineHeight: 1.4,
3163
- fontFamily: fonts2.family,
3164
- cursor: isDisabled ? "not-allowed" : "pointer",
3165
- textAlign: "center"
3166
- },
3167
- children: labels[status]
3168
- }
3169
- );
3170
- };
3171
-
3172
- // src/react.ts
3173
- async function loadWalletAccountModule() {
3174
- return import('./account-F5Z2SMJE.js');
3175
- }
3176
- var WalletAccount = {
3177
- async getInstance(oidcToken) {
3178
- const { default: WalletAccount2 } = await loadWalletAccountModule();
3179
- return WalletAccount2.getInstance(oidcToken);
3180
- },
3181
- clearInstance() {
3182
- void loadWalletAccountModule().then(({ default: WalletAccount2 }) => {
3183
- WalletAccount2.clearInstance();
3184
- });
3185
- }
3186
- };
3187
- function clearSocialAccountInstance() {
3188
- void loadWalletAccountModule().then(({ clearSocialAccountInstance: clearSocialAccountInstance2 }) => {
3189
- clearSocialAccountInstance2();
3190
- });
3191
- }
3192
-
3193
- export { DepositDetailsPanel, DepositModal, DropdownField, SignInModal, Toast, WalletAccount, WalletSelectionModal, WithdrawModal, clearSocialAccountInstance };