@surf_liquid/surf-widget 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2443 @@
1
+ import { jsx as t, jsxs as a, Fragment as H } from "react/jsx-runtime";
2
+ import { createContext as he, useEffect as B, useMemo as fe, useContext as pe, useState as m, useCallback as D, useRef as R } from "react";
3
+ const ie = he(null);
4
+ function me(e, s) {
5
+ const n = s.colors ?? {}, i = {
6
+ "--surf-primary": n.primary,
7
+ "--surf-primary-text": n.primaryText,
8
+ "--surf-background": n.background,
9
+ "--surf-card-background": n.cardBackground,
10
+ "--surf-text": n.text,
11
+ "--surf-text-secondary": n.textSecondary,
12
+ "--surf-apy": n.apy,
13
+ "--surf-border": n.border,
14
+ "--surf-success": n.success,
15
+ "--surf-border-radius": s.borderRadius,
16
+ "--surf-font-family": s.fontFamily
17
+ };
18
+ for (const [o, r] of Object.entries(i))
19
+ r != null && e.style.setProperty(o, r);
20
+ }
21
+ function ge({ config: e, containerRef: s, children: n }) {
22
+ const { client: i, walletAddress: o, chainId: r = 8453, theme: l = {}, onSuccess: c, onError: f } = e;
23
+ B(() => {
24
+ s.current && me(s.current, l);
25
+ }, [l, s]);
26
+ const h = fe(
27
+ () => ({ walletAddress: o, chainId: r, surfClient: i, theme: l, onSuccess: c, onError: f }),
28
+ [o, r, i, l, c, f]
29
+ );
30
+ return /* @__PURE__ */ t(ie.Provider, { value: h, children: n });
31
+ }
32
+ function C() {
33
+ const e = pe(ie);
34
+ if (!e) throw new Error("useSurf must be used within a SurfProvider");
35
+ return e;
36
+ }
37
+ const ye = {
38
+ 8453: "Base",
39
+ 137: "Polygon",
40
+ 84532: "Base Sepolia"
41
+ };
42
+ function be(e, s) {
43
+ var h;
44
+ const n = s || e.homeChainId || 8453, i = {
45
+ name: ye[n] ?? `Chain ${n}`,
46
+ id: n
47
+ };
48
+ if (!e.exists || e.assets.length === 0)
49
+ return {
50
+ token: { symbol: "USDC", name: "USD Coin", decimals: 6, address: "" },
51
+ chain: i,
52
+ balance: "0.00",
53
+ earnings: "0.00",
54
+ apy: ((h = e.apyBreakdown) == null ? void 0 : h.currentAPY) ?? 0,
55
+ withdrawalType: "instant",
56
+ availableBalance: "0.00",
57
+ userVaultAddress: e.userVaultAddress ?? void 0,
58
+ assets: []
59
+ };
60
+ const o = e.assets.filter((u) => u.chainId === n), r = o.length > 0 ? o : e.assets, l = r.reduce(
61
+ (u, d) => d.currentValueUSD > u.currentValueUSD ? d : u,
62
+ r[0]
63
+ ), c = r.reduce((u, d) => u + d.currentValueUSD, 0), f = r.reduce((u, d) => u + d.totalEarningsUSD, 0);
64
+ return {
65
+ token: {
66
+ symbol: l.assetSymbol,
67
+ name: l.assetSymbol === "USDC" ? "USD Coin" : l.assetSymbol,
68
+ decimals: l.assetDecimals ?? 6,
69
+ address: l.assetAddress
70
+ },
71
+ chain: i,
72
+ balance: c.toFixed(2),
73
+ earnings: f.toFixed(2),
74
+ apy: e.apyBreakdown.currentAPY,
75
+ withdrawalType: "instant",
76
+ availableBalance: c.toFixed(2),
77
+ userVaultAddress: e.userVaultAddress ?? void 0,
78
+ assets: o.length > 0 ? o : e.assets
79
+ };
80
+ }
81
+ function ve() {
82
+ const { walletAddress: e, surfClient: s, chainId: n } = C(), [i, o] = m(null), [r, l] = m(!0), [c, f] = m(null), [h, u] = m(0);
83
+ B(() => {
84
+ let p = !1;
85
+ async function y() {
86
+ l(!0), f(null);
87
+ try {
88
+ const g = await s.getVault(e);
89
+ p || o(be(g, n));
90
+ } catch (g) {
91
+ p || f(g instanceof Error ? g : new Error(String(g)));
92
+ } finally {
93
+ p || l(!1);
94
+ }
95
+ }
96
+ return y(), () => {
97
+ p = !0;
98
+ };
99
+ }, [e, s, n, h]);
100
+ const d = D(() => u((p) => p + 1), []);
101
+ return { vault: i, isLoading: r, error: c, refetch: d };
102
+ }
103
+ const U = "https://cdn.jsdelivr.net/npm/@aanchal16/surf-widget-sdk/dist", N = {
104
+ USDC: `${U}/USDC.svg`,
105
+ BASE_CHAIN: `${U}/Base.svg`,
106
+ POLYGON: `${U}/Polygon.png`,
107
+ SURF_TOKEN: `${U}/SurfToken.png`
108
+ };
109
+ function we(e) {
110
+ const s = [
111
+ "#3B82F6",
112
+ "#8B5CF6",
113
+ "#10B981",
114
+ "#F59E0B",
115
+ "#EF4444",
116
+ "#06B6D4",
117
+ "#EC4899",
118
+ "#6366F1"
119
+ ];
120
+ let n = 0;
121
+ for (let i = 0; i < e.length; i++)
122
+ n = e.charCodeAt(i) + ((n << 5) - n);
123
+ return s[Math.abs(n) % s.length];
124
+ }
125
+ function L({ symbol: e, icon: s, size: n = 32, className: i }) {
126
+ const o = ["surf-token-icon", i].filter(Boolean).join(" ");
127
+ if (s)
128
+ return /* @__PURE__ */ t(
129
+ "img",
130
+ {
131
+ src: s,
132
+ alt: e,
133
+ className: o,
134
+ style: { width: n, height: n }
135
+ }
136
+ );
137
+ if (e.toUpperCase() === "USDC")
138
+ return /* @__PURE__ */ t("img", { src: N.USDC, alt: "USDC", className: o, style: { width: n, height: n } });
139
+ const r = we(e), l = e.slice(0, 2).toUpperCase(), c = Math.floor(n * 0.38);
140
+ return /* @__PURE__ */ t(
141
+ "div",
142
+ {
143
+ className: o,
144
+ style: { width: n, height: n, backgroundColor: r, fontSize: c },
145
+ "aria-label": e,
146
+ children: l
147
+ }
148
+ );
149
+ }
150
+ function v({
151
+ variant: e = "primary",
152
+ size: s = "md",
153
+ isLoading: n = !1,
154
+ leftIcon: i,
155
+ rightIcon: o,
156
+ fullWidth: r = !1,
157
+ children: l,
158
+ className: c,
159
+ disabled: f,
160
+ style: h,
161
+ ...u
162
+ }) {
163
+ const d = [
164
+ "surf-btn",
165
+ `surf-btn--${e}`,
166
+ `surf-btn--${s}`,
167
+ r ? "surf-btn--full" : "",
168
+ c ?? ""
169
+ ].filter(Boolean).join(" ");
170
+ return /* @__PURE__ */ a(
171
+ "button",
172
+ {
173
+ className: d,
174
+ disabled: f || n,
175
+ style: h,
176
+ ...u,
177
+ children: [
178
+ n ? /* @__PURE__ */ t("span", { className: "surf-btn-spinner" }) : i && /* @__PURE__ */ t("span", { style: { flexShrink: 0, display: "flex" }, children: i }),
179
+ l,
180
+ !n && o && /* @__PURE__ */ t("span", { style: { flexShrink: 0, display: "flex" }, children: o })
181
+ ]
182
+ }
183
+ );
184
+ }
185
+ function xe({ isOpen: e, onClose: s, onWithdraw: n, onViewDeposits: i, onViewActivities: o }) {
186
+ const r = R(null);
187
+ return B(() => {
188
+ if (!e) return;
189
+ const l = (c) => {
190
+ r.current && !r.current.contains(c.target) && s();
191
+ };
192
+ return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
193
+ }, [e, s]), e ? /* @__PURE__ */ a("div", { ref: r, className: "surf-dropdown surf-fade-in", children: [
194
+ /* @__PURE__ */ t("button", { className: "surf-dropdown-item", onClick: () => {
195
+ n(), s();
196
+ }, children: "Withdraw" }),
197
+ /* @__PURE__ */ t("button", { className: "surf-dropdown-item", onClick: () => {
198
+ i(), s();
199
+ }, children: "View Deposits" }),
200
+ /* @__PURE__ */ t("button", { className: "surf-dropdown-item", onClick: () => {
201
+ o(), s();
202
+ }, children: "Vault Activities" })
203
+ ] }) : null;
204
+ }
205
+ function ke({ chainId: e }) {
206
+ const s = e === 137 ? N.POLYGON : N.BASE_CHAIN;
207
+ return /* @__PURE__ */ t("img", { src: s, alt: `chain-${e}`, width: 14, height: 14, className: "surf-chain-icon" });
208
+ }
209
+ function q({ label: e, value: s, apy: n = !1 }) {
210
+ return /* @__PURE__ */ a("div", { className: "surf-stat", children: [
211
+ /* @__PURE__ */ t("span", { className: "surf-stat-label", children: e }),
212
+ /* @__PURE__ */ t("span", { className: ["surf-stat-value", n ? "surf-stat-value--apy" : ""].filter(Boolean).join(" "), children: s })
213
+ ] });
214
+ }
215
+ function Ne({
216
+ vault: e,
217
+ onDeposit: s,
218
+ onWithdraw: n,
219
+ onViewDeposits: i,
220
+ onViewActivities: o,
221
+ isSelected: r = !1,
222
+ isLoading: l = !1,
223
+ className: c
224
+ }) {
225
+ const [f, h] = m(!1);
226
+ if (l)
227
+ return /* @__PURE__ */ a("div", { className: ["surf-skeleton-card", c].filter(Boolean).join(" "), children: [
228
+ /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 18 }, children: [
229
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
230
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { width: 44, height: 44, borderRadius: "50%" } }),
231
+ /* @__PURE__ */ a("div", { children: [
232
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 14, width: 120, marginBottom: 6 } }),
233
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 11, width: 60 } })
234
+ ] })
235
+ ] }),
236
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 26, width: 110, borderRadius: 6 } })
237
+ ] }),
238
+ /* @__PURE__ */ a("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
239
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 16, alignItems: "center" }, children: [
240
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 32, width: 80 } }),
241
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 32, width: 60 } }),
242
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 32, width: 80 } })
243
+ ] }),
244
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 8 }, children: [
245
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 34, width: 80, borderRadius: 22 } }),
246
+ /* @__PURE__ */ t("div", { className: "surf-skeleton", style: { height: 34, width: 100, borderRadius: 22 } })
247
+ ] })
248
+ ] })
249
+ ] });
250
+ const u = parseFloat(e.balance).toLocaleString("en-US", {
251
+ style: "currency",
252
+ currency: "USD"
253
+ }), d = parseFloat(e.earnings).toLocaleString("en-US", {
254
+ style: "currency",
255
+ currency: "USD"
256
+ });
257
+ return /* @__PURE__ */ a("div", { className: ["surf-card", r ? "surf-card--selected" : "", c].filter(Boolean).join(" "), children: [
258
+ /* @__PURE__ */ a("div", { className: "surf-card-header", children: [
259
+ /* @__PURE__ */ a("div", { className: "surf-token-meta", children: [
260
+ /* @__PURE__ */ t(L, { symbol: e.token.symbol, icon: e.token.icon, size: 44 }),
261
+ /* @__PURE__ */ a("div", { children: [
262
+ /* @__PURE__ */ a("p", { className: "surf-token-name", children: [
263
+ e.token.name,
264
+ " ",
265
+ /* @__PURE__ */ t("span", { className: "surf-token-symbol", children: e.token.symbol })
266
+ ] }),
267
+ /* @__PURE__ */ a("div", { className: "surf-chain-badge", children: [
268
+ /* @__PURE__ */ t(ke, { chainId: e.chain.id }),
269
+ /* @__PURE__ */ t("span", { className: "surf-chain-name", children: e.chain.name })
270
+ ] })
271
+ ] })
272
+ ] }),
273
+ /* @__PURE__ */ t("p", { className: "surf-balance-amount", children: u })
274
+ ] }),
275
+ /* @__PURE__ */ a("div", { className: "surf-card-bottom", children: [
276
+ /* @__PURE__ */ a("div", { className: "surf-stats-row", children: [
277
+ /* @__PURE__ */ t(q, { label: "Earnings", value: d }),
278
+ /* @__PURE__ */ t("div", { className: "surf-stat-divider" }),
279
+ /* @__PURE__ */ t(q, { label: "APY", value: e.apy.toFixed(2) + "%", apy: !0 }),
280
+ /* @__PURE__ */ t("div", { className: "surf-stat-divider" }),
281
+ /* @__PURE__ */ t(
282
+ q,
283
+ {
284
+ label: "Withdrawal",
285
+ value: e.withdrawalType === "instant" ? /* @__PURE__ */ a("span", { style: { display: "inline-flex", alignItems: "center", gap: 2 }, children: [
286
+ "Instant ",
287
+ /* @__PURE__ */ t("span", { style: { fontSize: 13 }, children: "⚡" })
288
+ ] }) : "Standard"
289
+ }
290
+ )
291
+ ] }),
292
+ /* @__PURE__ */ a("div", { className: "surf-actions", children: [
293
+ /* @__PURE__ */ t(v, { variant: "outline", size: "md", onClick: s, children: "Deposit" }),
294
+ /* @__PURE__ */ a("div", { className: "surf-dropdown-wrap", children: [
295
+ /* @__PURE__ */ t(
296
+ v,
297
+ {
298
+ variant: "primary",
299
+ size: "md",
300
+ onClick: () => h((p) => !p),
301
+ rightIcon: /* @__PURE__ */ t(
302
+ "svg",
303
+ {
304
+ width: "12",
305
+ height: "12",
306
+ viewBox: "0 0 24 24",
307
+ fill: "none",
308
+ stroke: "currentColor",
309
+ strokeWidth: "2.5",
310
+ style: { transition: "transform 0.2s", transform: f ? "rotate(180deg)" : "none" },
311
+ children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6" })
312
+ }
313
+ ),
314
+ children: "Manage"
315
+ }
316
+ ),
317
+ /* @__PURE__ */ t(
318
+ xe,
319
+ {
320
+ isOpen: f,
321
+ onClose: () => h(!1),
322
+ onWithdraw: n,
323
+ onViewDeposits: i,
324
+ onViewActivities: o
325
+ }
326
+ )
327
+ ] })
328
+ ] })
329
+ ] })
330
+ ] });
331
+ }
332
+ function Se(e) {
333
+ var o, r;
334
+ const s = ((o = e.transactionType) == null ? void 0 : o.toUpperCase().includes("WITHDRAWAL")) || ((r = e.transactionType) == null ? void 0 : r.toUpperCase().includes("WITHDRAW")), n = e.vaultVersion ? ` ${e.vaultVersion.toUpperCase()}` : "", i = e.executedBy === "AGENT" ? `Surf Agent${n}` : `Surf${n}`;
335
+ return {
336
+ id: e.txHash,
337
+ type: s ? "withdraw" : "deposit",
338
+ description: e.message,
339
+ protocol: i,
340
+ timestamp: new Date(e.timestamp).getTime(),
341
+ txHash: e.txHash
342
+ };
343
+ }
344
+ function Ce() {
345
+ const { surfClient: e, walletAddress: s } = C(), [n, i] = m([]), [o, r] = m(!1), [l, c] = m(0);
346
+ B(() => {
347
+ let h = !1;
348
+ return r(!0), e.getAgentMessages(s).then((u) => {
349
+ if (h) return;
350
+ const d = Array.isArray(u) ? u : u.messages ?? [];
351
+ i(d.map(Se));
352
+ }).catch(() => {
353
+ h || i([]);
354
+ }).finally(() => {
355
+ h || r(!1);
356
+ }), () => {
357
+ h = !0;
358
+ };
359
+ }, [e, s, l]);
360
+ const f = D(() => c((h) => h + 1), []);
361
+ return { activities: n, isLoading: o, refetch: f };
362
+ }
363
+ function P({ isOpen: e, onClose: s, children: n, className: i }) {
364
+ const o = R(null);
365
+ return B(() => {
366
+ if (!e) return;
367
+ const r = (l) => {
368
+ l.key === "Escape" && s();
369
+ };
370
+ return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
371
+ }, [e, s]), e ? /* @__PURE__ */ t(
372
+ "div",
373
+ {
374
+ ref: o,
375
+ className: "surf-modal-overlay surf-fade-in",
376
+ onClick: (r) => {
377
+ r.target === o.current && s();
378
+ },
379
+ children: /* @__PURE__ */ t(
380
+ "div",
381
+ {
382
+ role: "dialog",
383
+ "aria-modal": "true",
384
+ className: ["surf-modal", i].filter(Boolean).join(" "),
385
+ children: n
386
+ }
387
+ )
388
+ }
389
+ ) : null;
390
+ }
391
+ function A({ tabs: e, activeTab: s, onChange: n, className: i, variant: o = "underline" }) {
392
+ const r = [
393
+ "surf-tabs",
394
+ o === "pill" ? "surf-tabs--pill" : "surf-tabs--underline",
395
+ i
396
+ ].filter(Boolean).join(" ");
397
+ return /* @__PURE__ */ t("div", { className: r, children: e.map((l) => /* @__PURE__ */ t(
398
+ "button",
399
+ {
400
+ onClick: () => n(l.id),
401
+ className: ["surf-tab", l.id === s ? "surf-tab--active" : ""].filter(Boolean).join(" "),
402
+ children: l.label
403
+ },
404
+ l.id
405
+ )) });
406
+ }
407
+ const Be = {
408
+ 8453: "Base",
409
+ 137: "Polygon",
410
+ 84532: "Base Sepolia"
411
+ };
412
+ function Ae({ timestamp: e }) {
413
+ const s = Date.now() - e, n = Math.floor(s / 864e5), i = Math.floor(s / 36e5), o = Math.floor(s / 6e4);
414
+ return n >= 1 ? /* @__PURE__ */ a("span", { children: [
415
+ n,
416
+ " day",
417
+ n === 1 ? "" : "s",
418
+ " ago"
419
+ ] }) : i >= 1 ? /* @__PURE__ */ a("span", { children: [
420
+ i,
421
+ " hour",
422
+ i === 1 ? "" : "s",
423
+ " ago"
424
+ ] }) : /* @__PURE__ */ a("span", { children: [
425
+ Math.max(o, 1),
426
+ " min ago"
427
+ ] });
428
+ }
429
+ function Te({
430
+ chainId: e,
431
+ size: s = 16
432
+ }) {
433
+ return /* @__PURE__ */ t(
434
+ "img",
435
+ {
436
+ src: e === 137 ? N.POLYGON : N.BASE_CHAIN,
437
+ alt: Be[e ?? 8453] ?? "Base",
438
+ width: s,
439
+ height: s
440
+ }
441
+ );
442
+ }
443
+ function De({ activity: e }) {
444
+ const s = e.type === "deposit";
445
+ return /* @__PURE__ */ a("div", { className: "surf-activity-item", children: [
446
+ /* @__PURE__ */ t(
447
+ "div",
448
+ {
449
+ className: [
450
+ "surf-activity-icon",
451
+ s ? "surf-activity-icon--in" : "surf-activity-icon--out"
452
+ ].join(" "),
453
+ children: /* @__PURE__ */ t(
454
+ "svg",
455
+ {
456
+ width: "14",
457
+ height: "14",
458
+ viewBox: "0 0 24 24",
459
+ fill: "none",
460
+ stroke: s ? "#10B981" : "#EF4444",
461
+ strokeWidth: "2.5",
462
+ children: s ? /* @__PURE__ */ t(H, { children: /* @__PURE__ */ t("path", { d: "M7 7l10 10M17 7v10H7" }) }) : /* @__PURE__ */ t(H, { children: /* @__PURE__ */ t("path", { d: "M17 17L7 7M7 17V7h10" }) })
463
+ }
464
+ )
465
+ }
466
+ ),
467
+ /* @__PURE__ */ a("div", { style: { flex: 1, minWidth: 0 }, children: [
468
+ /* @__PURE__ */ t("p", { className: "surf-activity-desc", children: e.description }),
469
+ /* @__PURE__ */ a("div", { className: "surf-activity-meta", children: [
470
+ /* @__PURE__ */ a("span", { className: "surf-activity-protocol", children: [
471
+ /* @__PURE__ */ t("img", { src: N.SURF_TOKEN, alt: "Surf", width: 16, height: 16 }),
472
+ " ",
473
+ e.protocol,
474
+ " · ",
475
+ /* @__PURE__ */ t(Ae, { timestamp: e.timestamp })
476
+ ] }),
477
+ e.txHash && /* @__PURE__ */ a(
478
+ "a",
479
+ {
480
+ href: `https://basescan.org/tx/${e.txHash}`,
481
+ target: "_blank",
482
+ rel: "noopener noreferrer",
483
+ className: "surf-activity-link",
484
+ children: [
485
+ "View Transaction",
486
+ /* @__PURE__ */ t(
487
+ "svg",
488
+ {
489
+ width: "10",
490
+ height: "10",
491
+ viewBox: "0 0 24 24",
492
+ fill: "none",
493
+ stroke: "currentColor",
494
+ strokeWidth: "2",
495
+ children: /* @__PURE__ */ t("path", { d: "M5 12h14M12 5l7 7-7 7" })
496
+ }
497
+ )
498
+ ]
499
+ }
500
+ )
501
+ ] })
502
+ ] })
503
+ ] });
504
+ }
505
+ function We({
506
+ deposit: e,
507
+ onWithdraw: s,
508
+ onDeposit: n
509
+ }) {
510
+ return /* @__PURE__ */ a("tr", { className: "surf-deposits-tr", children: [
511
+ /* @__PURE__ */ t("td", { className: "surf-deposits-td", children: /* @__PURE__ */ a("div", { className: "surf-deposits-token", children: [
512
+ /* @__PURE__ */ t(
513
+ L,
514
+ {
515
+ symbol: e.token.symbol,
516
+ icon: e.token.icon,
517
+ size: 22
518
+ }
519
+ ),
520
+ e.token.symbol
521
+ ] }) }),
522
+ /* @__PURE__ */ t("td", { className: "surf-deposits-td", children: /* @__PURE__ */ a("div", { className: "surf-deposits-chain", children: [
523
+ /* @__PURE__ */ t(Te, { chainId: e.chain.id, size: 16 }),
524
+ e.chain.name
525
+ ] }) }),
526
+ /* @__PURE__ */ t("td", { className: "surf-deposits-td", children: e.amount }),
527
+ /* @__PURE__ */ t("td", { className: "surf-deposits-td", children: e.earned }),
528
+ /* @__PURE__ */ t("td", { className: "surf-deposits-td", children: /* @__PURE__ */ a("div", { className: "surf-deposits-actions", children: [
529
+ /* @__PURE__ */ t("button", { className: "surf-link-btn", onClick: s, children: "Withdraw" }),
530
+ /* @__PURE__ */ t(
531
+ v,
532
+ {
533
+ variant: "primary",
534
+ size: "sm",
535
+ onClick: n,
536
+ style: { borderRadius: 50 },
537
+ children: "Deposit"
538
+ }
539
+ ),
540
+ e.vaultUrl && /* @__PURE__ */ a(
541
+ "a",
542
+ {
543
+ href: e.vaultUrl,
544
+ target: "_blank",
545
+ rel: "noopener noreferrer",
546
+ className: "surf-ext-link",
547
+ children: [
548
+ "Vault",
549
+ /* @__PURE__ */ t(
550
+ "svg",
551
+ {
552
+ width: "11",
553
+ height: "11",
554
+ viewBox: "0 0 24 24",
555
+ fill: "none",
556
+ stroke: "currentColor",
557
+ strokeWidth: "2",
558
+ children: /* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14 21 3" })
559
+ }
560
+ )
561
+ ]
562
+ }
563
+ )
564
+ ] }) })
565
+ ] });
566
+ }
567
+ const Ee = [
568
+ { id: "activities", label: "Activities" },
569
+ { id: "deposits", label: "Deposits" }
570
+ ];
571
+ function Ie({
572
+ isOpen: e,
573
+ onClose: s,
574
+ initialTab: n = "activities",
575
+ vault: i,
576
+ onWithdraw: o,
577
+ onDeposit: r
578
+ }) {
579
+ const [l, c] = m(n), { activities: f, isLoading: h } = Ce(), u = i && parseFloat(i.balance) > 0 ? [
580
+ {
581
+ id: i.token.address || i.token.symbol,
582
+ token: { symbol: i.token.symbol, icon: i.token.icon },
583
+ chain: { name: i.chain.name, id: i.chain.id },
584
+ amount: `${parseFloat(i.balance).toLocaleString("en-US", { minimumFractionDigits: 2 })} ${i.token.symbol}`,
585
+ earned: `${parseFloat(i.earnings).toLocaleString("en-US", { minimumFractionDigits: 2 })} ${i.token.symbol}`
586
+ }
587
+ ] : [];
588
+ return B(() => {
589
+ c(n);
590
+ }, [n]), /* @__PURE__ */ a(P, { isOpen: e, onClose: s, className: "surf-modal--wide", children: [
591
+ /* @__PURE__ */ t("button", { className: "surf-modal-close", onClick: s, "aria-label": "Close", children: /* @__PURE__ */ t(
592
+ "svg",
593
+ {
594
+ width: "16",
595
+ height: "16",
596
+ viewBox: "0 0 24 24",
597
+ fill: "none",
598
+ stroke: "currentColor",
599
+ strokeWidth: "2.5",
600
+ children: /* @__PURE__ */ t("path", { d: "M18 6 6 18M6 6l12 12" })
601
+ }
602
+ ) }),
603
+ /* @__PURE__ */ t("div", { style: { padding: "20px 20px 0" }, children: /* @__PURE__ */ t(
604
+ A,
605
+ {
606
+ tabs: Ee,
607
+ activeTab: l,
608
+ onChange: c,
609
+ variant: "pill"
610
+ }
611
+ ) }),
612
+ l === "activities" && /* @__PURE__ */ t("div", { className: "surf-modal-body", children: h ? /* @__PURE__ */ t("div", { style: { display: "flex", flexDirection: "column", gap: 10 }, children: [1, 2, 3].map((d) => /* @__PURE__ */ t(
613
+ "div",
614
+ {
615
+ className: "surf-skeleton",
616
+ style: { height: 72, borderRadius: 12 }
617
+ },
618
+ d
619
+ )) }) : f.length === 0 ? /* @__PURE__ */ t("div", { className: "surf-empty", children: "No activities yet" }) : /* @__PURE__ */ t("div", { className: "surf-activity-list", children: f.map((d) => /* @__PURE__ */ t(De, { activity: d }, d.id)) }) }),
620
+ l === "deposits" && /* @__PURE__ */ t("div", { className: "surf-modal-body", style: { overflowX: "auto" }, children: u.length === 0 ? /* @__PURE__ */ t("div", { className: "surf-empty", children: "No open deposits" }) : /* @__PURE__ */ a("table", { className: "surf-deposits-table", children: [
621
+ /* @__PURE__ */ t("thead", { children: /* @__PURE__ */ a("tr", { children: [
622
+ /* @__PURE__ */ t("th", { className: "surf-deposits-th", children: "Token" }),
623
+ /* @__PURE__ */ t("th", { className: "surf-deposits-th", children: "Blockchain" }),
624
+ /* @__PURE__ */ t("th", { className: "surf-deposits-th", children: "Amount" }),
625
+ /* @__PURE__ */ t("th", { className: "surf-deposits-th", children: "Earned" }),
626
+ /* @__PURE__ */ t(
627
+ "th",
628
+ {
629
+ className: "surf-deposits-th",
630
+ style: { textAlign: "right" },
631
+ children: "Actions"
632
+ }
633
+ )
634
+ ] }) }),
635
+ /* @__PURE__ */ t("tbody", { children: u.map((d) => /* @__PURE__ */ t(
636
+ We,
637
+ {
638
+ deposit: d,
639
+ onWithdraw: () => {
640
+ s(), o == null || o();
641
+ },
642
+ onDeposit: () => {
643
+ s(), r == null || r();
644
+ }
645
+ },
646
+ d.id
647
+ )) })
648
+ ] }) })
649
+ ] });
650
+ }
651
+ const X = { id: "idle" };
652
+ function se() {
653
+ const { surfClient: e, walletAddress: s, onSuccess: n, onError: i } = C(), [o, r] = m(X), l = R(o);
654
+ l.current = o;
655
+ const c = o.id !== "idle" && o.id !== "success" && o.id !== "error";
656
+ B(() => {
657
+ const u = ({ txHash: d }) => {
658
+ r({ id: "approving", txHash: d });
659
+ };
660
+ return e.on("deposit:approved", u), () => e.off("deposit:approved", u);
661
+ }, [e]);
662
+ const f = D(
663
+ async (u, d) => {
664
+ try {
665
+ if (!d.userVaultAddress) {
666
+ r({ id: "creating_contract" });
667
+ const g = await e.deployVault();
668
+ r({ id: "creating_contract", txHash: g.transactionHash });
669
+ }
670
+ r({ id: "approving" });
671
+ const p = d.token.address, y = await e.deposit({ asset: p, amount: u });
672
+ r({ id: "depositing", txHash: y.hash }), await y.wait(), r({ id: "success", txHash: y.hash, amount: u }), n && n("deposit", y.hash);
673
+ } catch (p) {
674
+ const y = p instanceof Error ? p : new Error(String(p));
675
+ r({ id: "error", error: y }), i && i("deposit", y);
676
+ }
677
+ },
678
+ [e, s, n, i]
679
+ ), h = D(() => r(X), []);
680
+ return { step: o, isProcessing: c, execute: f, reset: h };
681
+ }
682
+ const Q = { id: "idle" };
683
+ function re() {
684
+ const { surfClient: e, onSuccess: s, onError: n } = C(), [i, o] = m(Q), r = i.id !== "idle" && i.id !== "success" && i.id !== "error", l = D(
685
+ async (f, h) => {
686
+ try {
687
+ o({ id: "closing_position" });
688
+ const u = await e.withdraw({
689
+ asset: h.token.address,
690
+ amount: f || void 0
691
+ });
692
+ o({ id: "closing_position", txHash: u.hash }), o({ id: "redeeming_reward" }), await u.wait(), o({ id: "redeeming_reward", txHash: u.hash }), o({ id: "success", txHash: u.hash, amount: f }), s && s("withdraw", u.hash);
693
+ } catch (u) {
694
+ const d = u instanceof Error ? u : new Error(String(u));
695
+ o({ id: "error", error: d }), n && n("withdraw", d);
696
+ }
697
+ },
698
+ [e, s, n]
699
+ ), c = D(() => o(Q), []);
700
+ return { step: i, isProcessing: r, execute: l, reset: c };
701
+ }
702
+ function ae(e, s = 6) {
703
+ const n = s || 6, i = typeof e == "bigint" ? e : BigInt(Math.round(parseFloat(String(e)))), o = BigInt(10 ** n), r = i / o, l = i % o;
704
+ if (l === 0n) return r.toString();
705
+ const c = l.toString().padStart(n, "0").replace(/0+$/, "");
706
+ return `${r}.${c}`;
707
+ }
708
+ function oe(e, s = 6) {
709
+ const { surfClient: n, walletAddress: i } = C(), [o, r] = m("0"), [l, c] = m(!1), [f, h] = m(0);
710
+ B(() => {
711
+ if (!e) return;
712
+ let d = !1;
713
+ return c(!0), n.getTokenBalance(e, i).then((p) => {
714
+ console.log("[useDepositBalance] raw:", p, "| type:", typeof p, "| token:", e), d || r(ae(p, s));
715
+ }).catch((p) => {
716
+ console.error("[useDepositBalance] error:", p), d || r("0");
717
+ }).finally(() => {
718
+ d || c(!1);
719
+ }), () => {
720
+ d = !0;
721
+ };
722
+ }, [n, i, e, s, f]);
723
+ const u = D(() => h((d) => d + 1), []);
724
+ return { balance: o, isLoading: l, refetch: u };
725
+ }
726
+ function le(e, s, n = 6) {
727
+ const { surfClient: i } = C(), [o, r] = m("0"), [l, c] = m(!1), [f, h] = m(0);
728
+ B(() => {
729
+ if (!e) return;
730
+ let d = !1;
731
+ return c(!0), i.getWithdrawableAmount(e, s).then((p) => {
732
+ console.log("[useWithdrawableBalance] raw:", p, "| type:", typeof p, "| asset:", e), d || r(ae(p, n));
733
+ }).catch((p) => {
734
+ console.error("[useWithdrawableBalance] error:", p), d || r("0");
735
+ }).finally(() => {
736
+ d || c(!1);
737
+ }), () => {
738
+ d = !0;
739
+ };
740
+ }, [i, e, s, n, f]);
741
+ const u = D(() => h((d) => d + 1), []);
742
+ return { balance: o, isLoading: l, refetch: u };
743
+ }
744
+ function Me({ status: e }) {
745
+ return e === "completed" ? /* @__PURE__ */ t("div", { className: "surf-step-icon surf-step-icon--completed", children: /* @__PURE__ */ t("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "3", children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" }) }) }) : e === "active" ? /* @__PURE__ */ t("div", { className: "surf-step-icon surf-step-icon--active", children: /* @__PURE__ */ t("span", { className: "surf-step-active-dot" }) }) : e === "error" ? /* @__PURE__ */ t("div", { className: "surf-step-icon surf-step-icon--error", children: /* @__PURE__ */ t("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "#ef4444", strokeWidth: "3", children: /* @__PURE__ */ t("path", { d: "M18 6 6 18M6 6l12 12" }) }) }) : /* @__PURE__ */ t("div", { className: "surf-step-icon surf-step-icon--pending" });
746
+ }
747
+ const Z = () => /* @__PURE__ */ t("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14 21 3" }) });
748
+ function z({ steps: e, className: s, baseExplorerUrl: n = "https://basescan.org/tx/" }) {
749
+ return /* @__PURE__ */ t("div", { className: ["surf-steps", s].filter(Boolean).join(" "), children: e.map((i, o) => /* @__PURE__ */ a("div", { className: ["surf-step", `surf-step--${i.status}`].join(" "), children: [
750
+ /* @__PURE__ */ a("div", { className: "surf-step-icon-col", children: [
751
+ /* @__PURE__ */ t(Me, { status: i.status }),
752
+ o < e.length - 1 && /* @__PURE__ */ t("div", { className: [
753
+ "surf-step-line",
754
+ i.status === "completed" ? "surf-step-line--done" : "",
755
+ i.status === "active" ? "surf-step-line--active" : ""
756
+ ].filter(Boolean).join(" ") })
757
+ ] }),
758
+ /* @__PURE__ */ a("div", { className: "surf-step-body", children: [
759
+ /* @__PURE__ */ t("p", { className: "surf-step-title", children: i.title }),
760
+ /* @__PURE__ */ t("p", { className: "surf-step-desc", children: i.description })
761
+ ] }),
762
+ /* @__PURE__ */ t("div", { className: "surf-step-explore", children: i.txHash ? /* @__PURE__ */ a(
763
+ "a",
764
+ {
765
+ href: `${n}${i.txHash}`,
766
+ target: "_blank",
767
+ rel: "noopener noreferrer",
768
+ className: "surf-step-link",
769
+ children: [
770
+ "Explore ",
771
+ /* @__PURE__ */ t(Z, {})
772
+ ]
773
+ }
774
+ ) : /* @__PURE__ */ a("span", { className: "surf-step-link surf-step-link--ghost", children: [
775
+ "Explore ",
776
+ /* @__PURE__ */ t(Z, {})
777
+ ] }) })
778
+ ] }, i.id)) });
779
+ }
780
+ const ce = [10, 25, 50, 100];
781
+ function K(e) {
782
+ return e.length < 10 ? e : `${e.slice(0, 6)}...${e.slice(-4)}`;
783
+ }
784
+ function Fe(e) {
785
+ return (Math.floor(e * 100) / 100).toFixed(2);
786
+ }
787
+ function de(e) {
788
+ const s = typeof e == "string" ? e : (e == null ? void 0 : e.message) ?? "";
789
+ if (!s) return "Transaction failed. Please try again.";
790
+ const n = s.toLowerCase();
791
+ if (n.includes("user rejected") || n.includes("user denied")) return "Transaction rejected by wallet.";
792
+ if (n.includes("insufficient funds")) return "Insufficient funds for transaction.";
793
+ if (n.includes("execution reverted")) return "Transaction reverted by contract.";
794
+ if (n.includes("nonce")) return "Nonce error — please reset your wallet and retry.";
795
+ if (n.includes("network") || n.includes("disconnected")) return "Network error. Check your connection.";
796
+ const i = s.split(/[.(]/)[0].trim();
797
+ return i.length > 0 && i.length <= 100 ? i : "Transaction failed. Please try again.";
798
+ }
799
+ const He = () => /* @__PURE__ */ t("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2.5", children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" }) }), Le = () => /* @__PURE__ */ t("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14 21 3" }) }), ue = () => /* @__PURE__ */ a("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", children: [
800
+ /* @__PURE__ */ t("path", { d: "M1 4v6h6M23 20v-6h-6" }),
801
+ /* @__PURE__ */ t("path", { d: "M20.49 9A9 9 0 005.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 013.51 15" })
802
+ ] });
803
+ function _e({
804
+ vault: e,
805
+ amount: s,
806
+ availableBalance: n,
807
+ isBalanceLoading: i,
808
+ onAmountChange: o,
809
+ onSubmit: r,
810
+ onRefreshBalance: l,
811
+ onSwitchTab: c
812
+ }) {
813
+ const f = parseFloat(n) || 0, h = parseFloat(s) || 0, u = h > 0 && h <= f;
814
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
815
+ /* @__PURE__ */ t(
816
+ A,
817
+ {
818
+ tabs: [{ id: "deposit", label: "Deposit" }, { id: "withdraw", label: "Withdraw" }],
819
+ activeTab: "deposit",
820
+ onChange: c,
821
+ variant: "pill"
822
+ }
823
+ ),
824
+ /* @__PURE__ */ t("p", { className: "surf-modal-subtitle", style: { marginTop: 14, textAlign: "center" }, children: "Your surf is ready! Enter your deposit to activate" }),
825
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginBottom: 16 }, children: [
826
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
827
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Token" }),
828
+ /* @__PURE__ */ a("div", { className: "surf-select-box", children: [
829
+ /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 2 }, children: [
830
+ /* @__PURE__ */ t(L, { symbol: e.token.symbol, icon: e.token.icon, size: 26 }),
831
+ /* @__PURE__ */ t("span", { style: { fontSize: 14, fontWeight: 600 }, children: e.token.symbol })
832
+ ] }),
833
+ /* @__PURE__ */ a("span", { className: "surf-select-box--apy", children: [
834
+ e.apy.toFixed(2),
835
+ "% APY"
836
+ ] })
837
+ ] })
838
+ ] }),
839
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
840
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Blockchain" }),
841
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
842
+ /* @__PURE__ */ t("img", { src: e.chain.id === 137 ? N.POLYGON : N.BASE_CHAIN, alt: e.chain.name, width: 18, height: 18 }),
843
+ /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 500 }, children: e.chain.name })
844
+ ] }) })
845
+ ] })
846
+ ] }),
847
+ /* @__PURE__ */ a("div", { className: "surf-amount-box", children: [
848
+ /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
849
+ /* @__PURE__ */ t("span", { className: "surf-label", style: { margin: 0 }, children: "Enter Amount" }),
850
+ /* @__PURE__ */ t("div", { style: { display: "flex", gap: 10 }, children: ce.map((d) => /* @__PURE__ */ a("button", { className: "surf-pct-link", onClick: () => o((f * d / 100).toFixed(2)), children: [
851
+ d,
852
+ "%"
853
+ ] }, d)) })
854
+ ] }),
855
+ /* @__PURE__ */ t("input", { type: "number", value: s, onChange: (d) => o(d.target.value), placeholder: "0", min: "0", step: "any", className: "surf-amount-input" }),
856
+ /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 8 }, children: [
857
+ /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
858
+ "Min 100 ",
859
+ e.token.symbol
860
+ ] }),
861
+ /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
862
+ "Available: ",
863
+ i ? "..." : f.toLocaleString("en-US", { minimumFractionDigits: 2 }),
864
+ " ",
865
+ e.token.symbol,
866
+ /* @__PURE__ */ t("button", { className: "surf-refresh-btn", onClick: l, title: "Refresh balance", children: /* @__PURE__ */ t(ue, {}) })
867
+ ] })
868
+ ] })
869
+ ] }),
870
+ /* @__PURE__ */ a(v, { variant: "primary", size: "lg", fullWidth: !0, disabled: !u, onClick: r, style: { borderRadius: 50, marginTop: 16 }, children: [
871
+ "Deposit ",
872
+ e.token.symbol
873
+ ] }),
874
+ /* @__PURE__ */ a("p", { className: "surf-disclaimer", style: { marginTop: 10 }, children: [
875
+ "You'll need Base-bridged ETH to deposit. After activation, all agent fees are covered. By activating Surf, you agree to the",
876
+ " ",
877
+ /* @__PURE__ */ t("a", { href: "https://surfliquid.com/terms", target: "_blank", rel: "noopener noreferrer", children: "platform terms" }),
878
+ " ",
879
+ "and ",
880
+ /* @__PURE__ */ t("a", { href: "https://surfliquid.com/privacy", target: "_blank", rel: "noopener noreferrer", children: "privacy policy" }),
881
+ ", and acknowledge that returns may vary according to market conditions and selected strategy"
882
+ ] })
883
+ ] });
884
+ }
885
+ function Re({
886
+ vault: e,
887
+ amount: s,
888
+ walletAddress: n,
889
+ withdrawableBalance: i,
890
+ isBalanceLoading: o,
891
+ onAmountChange: r,
892
+ onSubmit: l,
893
+ onRefreshBalance: c,
894
+ onSwitchTab: f
895
+ }) {
896
+ const h = parseFloat(i) > 0 ? parseFloat(i) : parseFloat(e.availableBalance) || parseFloat(e.balance) || 0, u = parseFloat(s) || 0, d = u > 0 && u <= h;
897
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
898
+ /* @__PURE__ */ t(
899
+ A,
900
+ {
901
+ tabs: [{ id: "deposit", label: "Deposit" }, { id: "withdraw", label: "Withdraw" }],
902
+ activeTab: "withdraw",
903
+ onChange: f,
904
+ variant: "pill"
905
+ }
906
+ ),
907
+ /* @__PURE__ */ a("p", { className: "surf-modal-subtitle", style: { marginTop: 14, textAlign: "center" }, children: [
908
+ "Surf will withdraw to your connected wallet",
909
+ " ",
910
+ /* @__PURE__ */ t("span", { style: { fontWeight: 600, color: "var(--surf-text)" }, children: K(n) })
911
+ ] }),
912
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginBottom: 16 }, children: [
913
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
914
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Token" }),
915
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
916
+ /* @__PURE__ */ t(L, { symbol: e.token.symbol, icon: e.token.icon, size: 26 }),
917
+ /* @__PURE__ */ t("span", { style: { fontSize: 14, fontWeight: 600 }, children: e.token.symbol })
918
+ ] }) })
919
+ ] }),
920
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
921
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Blockchain" }),
922
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
923
+ /* @__PURE__ */ t("img", { src: e.chain.id === 137 ? N.POLYGON : N.BASE_CHAIN, alt: e.chain.name, width: 18, height: 18 }),
924
+ /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 500 }, children: e.chain.name })
925
+ ] }) })
926
+ ] })
927
+ ] }),
928
+ /* @__PURE__ */ a("div", { className: "surf-amount-box", children: [
929
+ /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 8 }, children: [
930
+ /* @__PURE__ */ t("span", { className: "surf-label", style: { margin: 0 }, children: "Enter Amount" }),
931
+ /* @__PURE__ */ t("div", { style: { display: "flex", gap: 10 }, children: ce.map((p) => /* @__PURE__ */ a("button", { className: "surf-pct-link", onClick: () => r(Fe(h * p / 100)), children: [
932
+ p,
933
+ "%"
934
+ ] }, p)) })
935
+ ] }),
936
+ /* @__PURE__ */ t("input", { type: "number", value: s, onChange: (p) => r(p.target.value), placeholder: "0", min: "0", step: "any", className: "surf-amount-input" }),
937
+ /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "flex-end", marginTop: 8 }, children: /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
938
+ "Available: ",
939
+ o ? "..." : h.toLocaleString("en-US", { minimumFractionDigits: 2 }),
940
+ " ",
941
+ e.token.symbol,
942
+ /* @__PURE__ */ t("button", { className: "surf-refresh-btn", onClick: c, title: "Refresh balance", children: /* @__PURE__ */ t(ue, {}) })
943
+ ] }) })
944
+ ] }),
945
+ /* @__PURE__ */ t(v, { variant: "primary", size: "lg", fullWidth: !0, disabled: !d, onClick: l, style: { borderRadius: 50, marginTop: 16 }, children: "Withdraw funds" }),
946
+ /* @__PURE__ */ t("p", { className: "surf-disclaimer", style: { marginTop: 10 }, children: "Rewards will also be withdrawn by default" })
947
+ ] });
948
+ }
949
+ function Ve(e, s) {
950
+ const n = ["creating_contract", "approving", "depositing"];
951
+ function i(r) {
952
+ if (r === "creating_contract" && s) return "completed";
953
+ const l = n.indexOf(e.id), c = n.indexOf(r);
954
+ return e.id === "success" ? "completed" : l === -1 ? "pending" : c < l ? "completed" : c === l ? "active" : "pending";
955
+ }
956
+ function o(r) {
957
+ return e.id === r && "txHash" in e ? e.txHash : void 0;
958
+ }
959
+ return [
960
+ { id: "creating_contract", title: "Surf Account Creation", description: "Deploy your self-custodial smart contract", status: i("creating_contract"), txHash: o("creating_contract") },
961
+ { id: "approving", title: "Approve USDC", description: "Grant access for automated strategies", status: i("approving"), txHash: o("approving") },
962
+ { id: "depositing", title: "Deposit USDC", description: "Fund your Surf Account by depositing", status: i("depositing"), txHash: o("depositing") }
963
+ ];
964
+ }
965
+ function $e({ step: e, vaultExists: s, onDashboard: n, onSwitchTab: i }) {
966
+ const o = e.id === "depositing" && "txHash" in e && !!e.txHash, r = !o && e.id !== "success" && e.id !== "error" && e.id !== "idle", l = e.id === "creating_contract" ? "Creating contract" : e.id === "approving" ? "Approve USDC" : e.id === "depositing" ? "Access Dashboard" : "Processing...";
967
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
968
+ /* @__PURE__ */ t(
969
+ A,
970
+ {
971
+ tabs: [{ id: "deposit", label: "Deposit" }, { id: "withdraw", label: "Withdraw" }],
972
+ activeTab: "deposit",
973
+ onChange: i,
974
+ variant: "pill"
975
+ }
976
+ ),
977
+ /* @__PURE__ */ t("p", { className: "surf-modal-subtitle", style: { marginTop: 14, textAlign: "center" }, children: "Confirm wallet requests to finish agent activation" }),
978
+ /* @__PURE__ */ t(z, { steps: Ve(e, s) }),
979
+ /* @__PURE__ */ t("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ t(v, { variant: o ? "primary" : "soft", size: "lg", fullWidth: !0, isLoading: r, disabled: !o && e.id !== "error", onClick: o ? n : void 0, style: { borderRadius: 50 }, children: l }) }),
980
+ e.id === "error" && /* @__PURE__ */ a("div", { className: "surf-error-box", children: [
981
+ "⚠ ",
982
+ de(e.error)
983
+ ] })
984
+ ] });
985
+ }
986
+ function Ue(e, s, n) {
987
+ const i = ["closing_position", "redeeming_reward"];
988
+ function o(l) {
989
+ const c = i.indexOf(e.id), f = i.indexOf(l);
990
+ return e.id === "success" ? "completed" : c === -1 ? "pending" : f < c ? "completed" : f === c ? "active" : "pending";
991
+ }
992
+ function r(l) {
993
+ return e.id === l && "txHash" in e ? e.txHash : void 0;
994
+ }
995
+ return [
996
+ { id: "closing_position", title: "Close current position", description: `Withdraw ${parseFloat(s || "0").toFixed(2)} ${n} from Vault`, status: o("closing_position"), txHash: r("closing_position") },
997
+ { id: "redeeming_reward", title: "Redeem Reward", description: "Transferring to your wallet", status: o("redeeming_reward"), txHash: r("redeeming_reward") }
998
+ ];
999
+ }
1000
+ function Pe({ step: e, amount: s, tokenSymbol: n, walletAddress: i, onSwitchTab: o }) {
1001
+ const r = e.id !== "success" && e.id !== "error" && e.id !== "idle", l = e.id === "closing_position" ? "Withdrawing Funds..." : e.id === "redeeming_reward" ? "Redeeming Reward..." : "Processing...";
1002
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
1003
+ /* @__PURE__ */ t(
1004
+ A,
1005
+ {
1006
+ tabs: [{ id: "deposit", label: "Deposit" }, { id: "withdraw", label: "Withdraw" }],
1007
+ activeTab: "withdraw",
1008
+ onChange: o,
1009
+ variant: "pill"
1010
+ }
1011
+ ),
1012
+ /* @__PURE__ */ a("p", { className: "surf-modal-subtitle", style: { marginTop: 14, textAlign: "center" }, children: [
1013
+ "Surf is resolving all your positions and withdrawing to your connected wallet ",
1014
+ /* @__PURE__ */ t("strong", { children: K(i) })
1015
+ ] }),
1016
+ /* @__PURE__ */ t(z, { steps: Ue(e, s, n) }),
1017
+ /* @__PURE__ */ t("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ t(v, { variant: "soft", size: "lg", fullWidth: !0, isLoading: r, disabled: e.id !== "error", style: { borderRadius: 50 }, children: l }) }),
1018
+ e.id === "error" && /* @__PURE__ */ a("div", { className: "surf-error-box", children: [
1019
+ "⚠ ",
1020
+ de(e.error)
1021
+ ] })
1022
+ ] });
1023
+ }
1024
+ function ee({ action: e, amount: s, tokenSymbol: n, walletAddress: i, txHash: o, onExplore: r, onBack: l }) {
1025
+ return /* @__PURE__ */ a("div", { className: "surf-success", children: [
1026
+ /* @__PURE__ */ t("div", { className: "surf-success-icon", children: /* @__PURE__ */ t("div", { className: "surf-success-icon-inner", children: /* @__PURE__ */ t(He, {}) }) }),
1027
+ /* @__PURE__ */ t("p", { className: "surf-success-title", children: "You're all done!" }),
1028
+ /* @__PURE__ */ a("p", { className: "surf-success-desc", children: [
1029
+ "Successfully ",
1030
+ e === "deposit" ? "deposited" : "withdrew",
1031
+ " ",
1032
+ /* @__PURE__ */ a("strong", { children: [
1033
+ parseFloat(s).toLocaleString("en-US", { minimumFractionDigits: 2 }),
1034
+ " ",
1035
+ n
1036
+ ] }),
1037
+ " ",
1038
+ "to your wallet ",
1039
+ /* @__PURE__ */ t("strong", { children: K(i) })
1040
+ ] }),
1041
+ /* @__PURE__ */ a("div", { className: "surf-success-actions", children: [
1042
+ /* @__PURE__ */ t(v, { variant: "outline", size: "md", style: { flex: 1 }, onClick: r, rightIcon: /* @__PURE__ */ t(Le, {}), children: "Explore" }),
1043
+ /* @__PURE__ */ t(v, { variant: "primary", size: "md", style: { flex: 1 }, onClick: l, children: "Back to dashboard" })
1044
+ ] })
1045
+ ] });
1046
+ }
1047
+ const ze = {
1048
+ token: { symbol: "USDC", name: "USD Coin", decimals: 6, address: "" },
1049
+ chain: { name: "Base", id: 8453 },
1050
+ balance: "0.00",
1051
+ earnings: "0.00",
1052
+ apy: 0,
1053
+ withdrawalType: "instant",
1054
+ availableBalance: "0.00"
1055
+ };
1056
+ function je({ isOpen: e, initialTab: s, onClose: n, vault: i }) {
1057
+ const { walletAddress: o } = C(), r = i ?? ze, [l, c] = m(s), [f, h] = m(""), [u, d] = m(""), { step: p, execute: y, reset: g } = se(), { step: b, execute: k, reset: W } = re(), { balance: j, isLoading: O, refetch: Y } = oe(r.token.address, r.token.decimals ?? 6), { balance: I, isLoading: M, refetch: F } = le(r.token.address, r.userVaultAddress, r.token.decimals ?? 6), _ = m(s)[0];
1058
+ e && s !== _ && c(s);
1059
+ function T(G) {
1060
+ G !== l && (G === "deposit" ? (W(), d("")) : (g(), h("")), c(G));
1061
+ }
1062
+ function E() {
1063
+ g(), W(), h(""), d(""), n();
1064
+ }
1065
+ const V = p.id === "idle", w = p.id === "success", x = b.id === "idle", S = b.id === "success";
1066
+ function $() {
1067
+ return l === "deposit" ? w && p.id === "success" ? /* @__PURE__ */ t(
1068
+ ee,
1069
+ {
1070
+ action: "deposit",
1071
+ amount: p.amount,
1072
+ tokenSymbol: r.token.symbol,
1073
+ walletAddress: o,
1074
+ txHash: p.txHash,
1075
+ onExplore: () => window.open(`https://basescan.org/tx/${p.txHash}`, "_blank"),
1076
+ onBack: E
1077
+ }
1078
+ ) : V ? /* @__PURE__ */ t(
1079
+ _e,
1080
+ {
1081
+ vault: r,
1082
+ amount: f,
1083
+ availableBalance: j,
1084
+ isBalanceLoading: O,
1085
+ onAmountChange: h,
1086
+ onSubmit: () => f && y(f, r),
1087
+ onRefreshBalance: Y,
1088
+ onSwitchTab: T
1089
+ }
1090
+ ) : /* @__PURE__ */ t(
1091
+ $e,
1092
+ {
1093
+ step: p,
1094
+ vaultExists: !!r.userVaultAddress,
1095
+ onDashboard: E,
1096
+ onSwitchTab: T
1097
+ }
1098
+ ) : S && b.id === "success" ? /* @__PURE__ */ t(
1099
+ ee,
1100
+ {
1101
+ action: "withdraw",
1102
+ amount: b.amount,
1103
+ tokenSymbol: r.token.symbol,
1104
+ walletAddress: o,
1105
+ txHash: b.txHash,
1106
+ onExplore: () => window.open(`https://basescan.org/tx/${b.txHash}`, "_blank"),
1107
+ onBack: E
1108
+ }
1109
+ ) : x ? /* @__PURE__ */ t(
1110
+ Re,
1111
+ {
1112
+ vault: r,
1113
+ amount: u,
1114
+ walletAddress: o,
1115
+ withdrawableBalance: I,
1116
+ isBalanceLoading: M,
1117
+ onAmountChange: d,
1118
+ onSubmit: () => u && k(u, r),
1119
+ onRefreshBalance: F,
1120
+ onSwitchTab: T
1121
+ }
1122
+ ) : /* @__PURE__ */ t(
1123
+ Pe,
1124
+ {
1125
+ step: b,
1126
+ amount: u,
1127
+ tokenSymbol: r.token.symbol,
1128
+ walletAddress: o,
1129
+ onSwitchTab: T
1130
+ }
1131
+ );
1132
+ }
1133
+ return /* @__PURE__ */ a(P, { isOpen: e, onClose: E, children: [
1134
+ /* @__PURE__ */ t("button", { className: "surf-modal-close", onClick: E, "aria-label": "Close", children: /* @__PURE__ */ t("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ t("path", { d: "M18 6 6 18M6 6l12 12" }) }) }),
1135
+ $()
1136
+ ] });
1137
+ }
1138
+ function Oe() {
1139
+ const { vault: e, isLoading: s, refetch: n } = ve(), { chainId: i } = C(), o = R(null);
1140
+ e && (o.current = e);
1141
+ const r = e ?? o.current, [l, c] = m(null), [f, h] = m(!1), [u, d] = m("activities");
1142
+ function p() {
1143
+ h(!1), c("deposit");
1144
+ }
1145
+ function y() {
1146
+ h(!1), c("withdraw");
1147
+ }
1148
+ function g(W = "activities") {
1149
+ c(null), d(W), h(!0);
1150
+ }
1151
+ const k = {
1152
+ token: { symbol: "USDC", name: "USD Coin", decimals: 6, address: "" },
1153
+ chain: { name: { 8453: "Base", 137: "Polygon" }[i] ?? "Base", id: i },
1154
+ balance: "0.00",
1155
+ earnings: "0.00",
1156
+ apy: 0,
1157
+ withdrawalType: "instant",
1158
+ availableBalance: "0.00"
1159
+ };
1160
+ return /* @__PURE__ */ a(H, { children: [
1161
+ /* @__PURE__ */ t(
1162
+ Ne,
1163
+ {
1164
+ vault: r ?? k,
1165
+ isLoading: s && !r,
1166
+ onDeposit: p,
1167
+ onWithdraw: y,
1168
+ onViewDeposits: () => g("deposits"),
1169
+ onViewActivities: () => g("activities")
1170
+ }
1171
+ ),
1172
+ /* @__PURE__ */ t(
1173
+ je,
1174
+ {
1175
+ isOpen: l !== null,
1176
+ initialTab: l ?? "deposit",
1177
+ onClose: () => {
1178
+ c(null), n();
1179
+ },
1180
+ vault: r
1181
+ }
1182
+ ),
1183
+ /* @__PURE__ */ t(
1184
+ Ie,
1185
+ {
1186
+ isOpen: f,
1187
+ onClose: () => h(!1),
1188
+ initialTab: u,
1189
+ vault: r,
1190
+ onWithdraw: y,
1191
+ onDeposit: p
1192
+ }
1193
+ )
1194
+ ] });
1195
+ }
1196
+ function ft({ client: e, walletAddress: s, chainId: n, theme: i, onSuccess: o, onError: r, className: l }) {
1197
+ const c = R(null);
1198
+ return /* @__PURE__ */ t(
1199
+ "div",
1200
+ {
1201
+ ref: c,
1202
+ className: ["surf-widget-root", l].filter(Boolean).join(" "),
1203
+ "data-surf-widget": !0,
1204
+ children: /* @__PURE__ */ t("div", { className: "surf-widget-shell", children: /* @__PURE__ */ t(
1205
+ ge,
1206
+ {
1207
+ config: { client: e, walletAddress: s, chainId: n, theme: i, onSuccess: o, onError: r },
1208
+ containerRef: c,
1209
+ children: /* @__PURE__ */ t(Oe, {})
1210
+ }
1211
+ ) })
1212
+ }
1213
+ );
1214
+ }
1215
+ const te = "https://e609-106-219-158-226.ngrok-free.app";
1216
+ function Ye({ value: e }) {
1217
+ const [s, n] = m(!1);
1218
+ function i() {
1219
+ navigator.clipboard.writeText(e).then(() => {
1220
+ n(!0), setTimeout(() => n(!1), 2e3);
1221
+ });
1222
+ }
1223
+ return /* @__PURE__ */ t(
1224
+ "button",
1225
+ {
1226
+ onClick: i,
1227
+ title: "Copy to clipboard",
1228
+ style: {
1229
+ background: "none",
1230
+ border: "none",
1231
+ cursor: "pointer",
1232
+ padding: "2px 6px",
1233
+ borderRadius: 4,
1234
+ color: s ? "#22c55e" : "#6b7280",
1235
+ fontSize: 12,
1236
+ fontWeight: 600,
1237
+ flexShrink: 0
1238
+ },
1239
+ children: s ? "✓ Copied" : "Copy"
1240
+ }
1241
+ );
1242
+ }
1243
+ function ne({
1244
+ label: e,
1245
+ value: s,
1246
+ masked: n
1247
+ }) {
1248
+ const [i, o] = m(!1), r = n && !i ? "•".repeat(Math.min(s.length, 36)) : s;
1249
+ return /* @__PURE__ */ a("div", { style: { marginBottom: 12 }, children: [
1250
+ /* @__PURE__ */ t("div", { style: { fontSize: 11, fontWeight: 600, color: "#6b7280", marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.05em" }, children: e }),
1251
+ /* @__PURE__ */ a("div", { style: {
1252
+ display: "flex",
1253
+ alignItems: "center",
1254
+ gap: 8,
1255
+ background: "#f9fafb",
1256
+ border: "1px solid #e5e7eb",
1257
+ borderRadius: 8,
1258
+ padding: "8px 12px"
1259
+ }, children: [
1260
+ /* @__PURE__ */ t("span", { style: { fontFamily: "monospace", fontSize: 13, color: "#1a2540", flex: 1, wordBreak: "break-all" }, children: r }),
1261
+ n && /* @__PURE__ */ t(
1262
+ "button",
1263
+ {
1264
+ onClick: () => o((l) => !l),
1265
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 11, color: "#6b7280", flexShrink: 0, padding: "2px 4px" },
1266
+ children: i ? "Hide" : "Show"
1267
+ }
1268
+ ),
1269
+ /* @__PURE__ */ t(Ye, { value: s })
1270
+ ] })
1271
+ ] });
1272
+ }
1273
+ function pt({ walletAddress: e = "", onSuccess: s }) {
1274
+ const [n, i] = m("register"), [o, r] = m(!1), [l, c] = m(""), [f, h] = m(e), [u, d] = m(""), [p, y] = m(""), [g, b] = m(""), [k, W] = m(null);
1275
+ async function j(w) {
1276
+ w.preventDefault(), c(""), r(!0);
1277
+ try {
1278
+ const x = await fetch(`${te}/api/sdk/register`, {
1279
+ method: "POST",
1280
+ headers: { "Content-Type": "application/json", "ngrok-skip-browser-warning": "1" },
1281
+ body: JSON.stringify({ walletAddress: f, email: u, appName: p })
1282
+ }), S = await x.json();
1283
+ if (!x.ok) throw new Error((S == null ? void 0 : S.message) || `Error ${x.status}`);
1284
+ i("verify");
1285
+ } catch (x) {
1286
+ c(x.message ?? "Registration failed");
1287
+ } finally {
1288
+ r(!1);
1289
+ }
1290
+ }
1291
+ async function O(w) {
1292
+ w.preventDefault(), c(""), r(!0);
1293
+ try {
1294
+ const x = await fetch(`${te}/api/sdk/verify-email`, {
1295
+ method: "POST",
1296
+ headers: { "Content-Type": "application/json", "ngrok-skip-browser-warning": "1" },
1297
+ body: JSON.stringify({ email: u, otp: g })
1298
+ }), S = await x.json();
1299
+ if (!x.ok) throw new Error((S == null ? void 0 : S.message) || `Error ${x.status}`);
1300
+ const $ = { appId: S.appId, apiSecret: S.apiSecret };
1301
+ W($), i("done"), s == null || s($);
1302
+ } catch (x) {
1303
+ c(x.message ?? "Verification failed");
1304
+ } finally {
1305
+ r(!1);
1306
+ }
1307
+ }
1308
+ const Y = {
1309
+ background: "white",
1310
+ border: "1px solid #e5e7eb",
1311
+ borderRadius: 16,
1312
+ padding: 28,
1313
+ maxWidth: 420,
1314
+ width: "100%",
1315
+ boxShadow: "0 1px 4px rgba(0,0,0,0.06)"
1316
+ }, I = {
1317
+ display: "block",
1318
+ fontSize: 13,
1319
+ fontWeight: 600,
1320
+ color: "#374151",
1321
+ marginBottom: 6
1322
+ }, M = {
1323
+ width: "100%",
1324
+ padding: "10px 12px",
1325
+ borderRadius: 8,
1326
+ border: "1px solid #d1d5db",
1327
+ fontSize: 14,
1328
+ color: "#1a2540",
1329
+ outline: "none",
1330
+ boxSizing: "border-box",
1331
+ fontFamily: "inherit",
1332
+ transition: "border-color 0.15s"
1333
+ }, F = {
1334
+ width: "100%",
1335
+ padding: "11px 16px",
1336
+ borderRadius: 10,
1337
+ border: "none",
1338
+ background: "#2563eb",
1339
+ color: "white",
1340
+ fontWeight: 700,
1341
+ fontSize: 14,
1342
+ cursor: o ? "not-allowed" : "pointer",
1343
+ opacity: o ? 0.7 : 1,
1344
+ marginTop: 4
1345
+ }, _ = {
1346
+ fontWeight: 700,
1347
+ fontSize: 18,
1348
+ color: "#1a2540",
1349
+ marginBottom: 4
1350
+ }, T = {
1351
+ fontSize: 13,
1352
+ color: "#6b7280",
1353
+ marginBottom: 20
1354
+ }, E = ["Register", "Verify OTP", "Done"], V = n === "register" ? 0 : n === "verify" ? 1 : 2;
1355
+ return /* @__PURE__ */ a("div", { style: Y, children: [
1356
+ /* @__PURE__ */ t("div", { style: { display: "flex", gap: 6, marginBottom: 24 }, children: E.map((w, x) => /* @__PURE__ */ t(
1357
+ "div",
1358
+ {
1359
+ style: {
1360
+ flex: 1,
1361
+ textAlign: "center",
1362
+ fontSize: 11,
1363
+ fontWeight: 600,
1364
+ padding: "4px 0",
1365
+ borderRadius: 20,
1366
+ background: x <= V ? "#2563eb" : "#f3f4f6",
1367
+ color: x <= V ? "white" : "#9ca3af",
1368
+ transition: "all 0.2s"
1369
+ },
1370
+ children: w
1371
+ },
1372
+ w
1373
+ )) }),
1374
+ n === "register" && /* @__PURE__ */ a(H, { children: [
1375
+ /* @__PURE__ */ t("div", { style: _, children: "Register your app" }),
1376
+ /* @__PURE__ */ a("div", { style: T, children: [
1377
+ "Get an ",
1378
+ /* @__PURE__ */ t("code", { children: "appId" }),
1379
+ " and ",
1380
+ /* @__PURE__ */ t("code", { children: "apiSecret" }),
1381
+ " to start integrating SurfLiquid SDK."
1382
+ ] }),
1383
+ /* @__PURE__ */ a("form", { onSubmit: j, style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
1384
+ /* @__PURE__ */ a("div", { children: [
1385
+ /* @__PURE__ */ t("label", { style: I, children: "Wallet address" }),
1386
+ /* @__PURE__ */ t(
1387
+ "input",
1388
+ {
1389
+ style: M,
1390
+ type: "text",
1391
+ placeholder: "0x...",
1392
+ value: f,
1393
+ onChange: (w) => h(w.target.value),
1394
+ required: !0,
1395
+ spellCheck: !1
1396
+ }
1397
+ )
1398
+ ] }),
1399
+ /* @__PURE__ */ a("div", { children: [
1400
+ /* @__PURE__ */ t("label", { style: I, children: "Email" }),
1401
+ /* @__PURE__ */ t(
1402
+ "input",
1403
+ {
1404
+ style: M,
1405
+ type: "email",
1406
+ placeholder: "you@yourplatform.com",
1407
+ value: u,
1408
+ onChange: (w) => d(w.target.value),
1409
+ required: !0
1410
+ }
1411
+ )
1412
+ ] }),
1413
+ /* @__PURE__ */ a("div", { children: [
1414
+ /* @__PURE__ */ t("label", { style: I, children: "App name" }),
1415
+ /* @__PURE__ */ t(
1416
+ "input",
1417
+ {
1418
+ style: M,
1419
+ type: "text",
1420
+ placeholder: "My DeFi App",
1421
+ value: p,
1422
+ onChange: (w) => y(w.target.value),
1423
+ required: !0
1424
+ }
1425
+ )
1426
+ ] }),
1427
+ l && /* @__PURE__ */ t("p", { style: { margin: 0, color: "#ef4444", fontSize: 13 }, children: l }),
1428
+ /* @__PURE__ */ t("button", { type: "submit", style: F, disabled: o, children: o ? "Sending OTP…" : "Register →" })
1429
+ ] })
1430
+ ] }),
1431
+ n === "verify" && /* @__PURE__ */ a(H, { children: [
1432
+ /* @__PURE__ */ t("div", { style: _, children: "Check your email" }),
1433
+ /* @__PURE__ */ a("div", { style: T, children: [
1434
+ "We sent a 6-digit OTP to ",
1435
+ /* @__PURE__ */ t("strong", { children: u }),
1436
+ ". Enter it below to complete registration."
1437
+ ] }),
1438
+ /* @__PURE__ */ a("form", { onSubmit: O, style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
1439
+ /* @__PURE__ */ a("div", { children: [
1440
+ /* @__PURE__ */ t("label", { style: I, children: "OTP code" }),
1441
+ /* @__PURE__ */ t(
1442
+ "input",
1443
+ {
1444
+ style: { ...M, fontSize: 22, letterSpacing: "0.3em", textAlign: "center", fontFamily: "monospace" },
1445
+ type: "text",
1446
+ inputMode: "numeric",
1447
+ placeholder: "------",
1448
+ maxLength: 6,
1449
+ value: g,
1450
+ onChange: (w) => b(w.target.value.replace(/\D/g, "")),
1451
+ required: !0,
1452
+ autoFocus: !0
1453
+ }
1454
+ )
1455
+ ] }),
1456
+ l && /* @__PURE__ */ t("p", { style: { margin: 0, color: "#ef4444", fontSize: 13 }, children: l }),
1457
+ /* @__PURE__ */ t("button", { type: "submit", style: F, disabled: o || g.length < 6, children: o ? "Verifying…" : "Verify →" }),
1458
+ /* @__PURE__ */ t(
1459
+ "button",
1460
+ {
1461
+ type: "button",
1462
+ style: { ...F, background: "transparent", color: "#6b7280", border: "1px solid #e5e7eb", marginTop: 0 },
1463
+ onClick: () => {
1464
+ i("register"), c(""), b("");
1465
+ },
1466
+ disabled: o,
1467
+ children: "← Back"
1468
+ }
1469
+ )
1470
+ ] })
1471
+ ] }),
1472
+ n === "done" && k && /* @__PURE__ */ a(H, { children: [
1473
+ /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
1474
+ /* @__PURE__ */ t("span", { style: { fontSize: 22 }, children: "🎉" }),
1475
+ /* @__PURE__ */ t("div", { style: _, children: "App registered!" })
1476
+ ] }),
1477
+ /* @__PURE__ */ a("div", { style: T, children: [
1478
+ "Save your credentials below. ",
1479
+ /* @__PURE__ */ t("strong", { children: "apiSecret is shown only once" }),
1480
+ " and cannot be recovered."
1481
+ ] }),
1482
+ /* @__PURE__ */ t(ne, { label: "App ID (public)", value: k.appId }),
1483
+ /* @__PURE__ */ t(ne, { label: "API Secret (keep secret!)", value: k.apiSecret, masked: !0 }),
1484
+ /* @__PURE__ */ a("div", { style: {
1485
+ marginTop: 16,
1486
+ padding: "10px 14px",
1487
+ background: "#fefce8",
1488
+ border: "1px solid #fde68a",
1489
+ borderRadius: 8,
1490
+ fontSize: 12,
1491
+ color: "#92400e",
1492
+ lineHeight: 1.5
1493
+ }, children: [
1494
+ "Store ",
1495
+ /* @__PURE__ */ t("strong", { children: "apiSecret" }),
1496
+ " securely (env var, secret manager). Embed ",
1497
+ /* @__PURE__ */ t("strong", { children: "appId" }),
1498
+ " freely in your frontend."
1499
+ ] }),
1500
+ /* @__PURE__ */ t(
1501
+ "button",
1502
+ {
1503
+ style: { ...F, marginTop: 16, background: "#f3f4f6", color: "#374151", border: "1px solid #e5e7eb" },
1504
+ onClick: () => {
1505
+ i("register"), h(e), d(""), y(""), b(""), W(null), c("");
1506
+ },
1507
+ children: "Register another app"
1508
+ }
1509
+ )
1510
+ ] })
1511
+ ] });
1512
+ }
1513
+ const Ge = [10, 25, 50, 100];
1514
+ function qe(e) {
1515
+ return e.length < 10 ? e : `${e.slice(0, 6)}...${e.slice(-4)}`;
1516
+ }
1517
+ function Ke(e) {
1518
+ const s = typeof e == "string" ? e : (e == null ? void 0 : e.message) ?? "";
1519
+ if (!s) return "Transaction failed. Please try again.";
1520
+ const n = s.toLowerCase();
1521
+ if (n.includes("user rejected") || n.includes("user denied")) return "Transaction rejected by wallet.";
1522
+ if (n.includes("insufficient funds")) return "Insufficient funds for transaction.";
1523
+ if (n.includes("execution reverted")) return "Transaction reverted by contract.";
1524
+ if (n.includes("nonce")) return "Nonce error — please reset your wallet and retry.";
1525
+ if (n.includes("network") || n.includes("disconnected")) return "Network error. Check your connection.";
1526
+ const i = s.split(/[.(]/)[0].trim();
1527
+ return i.length > 0 && i.length <= 100 ? i : "Transaction failed. Please try again.";
1528
+ }
1529
+ function Je({
1530
+ vault: e,
1531
+ amount: s,
1532
+ availableBalance: n,
1533
+ isBalanceLoading: i,
1534
+ onAmountChange: o,
1535
+ onSubmit: r,
1536
+ onRefreshBalance: l,
1537
+ onSwitchToWithdraw: c
1538
+ }) {
1539
+ const f = parseFloat(n) || 0, h = parseFloat(s) || 0, u = h > 0 && h <= f;
1540
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
1541
+ /* @__PURE__ */ t(
1542
+ A,
1543
+ {
1544
+ tabs: [
1545
+ { id: "deposit", label: "Deposit" },
1546
+ { id: "withdraw", label: "Withdraw" }
1547
+ ],
1548
+ activeTab: "deposit",
1549
+ onChange: (d) => {
1550
+ d === "withdraw" && c();
1551
+ },
1552
+ variant: "pill"
1553
+ }
1554
+ ),
1555
+ /* @__PURE__ */ t(
1556
+ "p",
1557
+ {
1558
+ className: "surf-modal-subtitle",
1559
+ style: { marginTop: 14, textAlign: "center" },
1560
+ children: "Your surf is ready! Enter your deposit to activate"
1561
+ }
1562
+ ),
1563
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginBottom: 16 }, children: [
1564
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
1565
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Token" }),
1566
+ /* @__PURE__ */ a("div", { className: "surf-select-box", children: [
1567
+ /* @__PURE__ */ a(
1568
+ "div",
1569
+ {
1570
+ style: {
1571
+ display: "flex",
1572
+ alignItems: "center",
1573
+ gap: 2
1574
+ },
1575
+ children: [
1576
+ /* @__PURE__ */ t(
1577
+ L,
1578
+ {
1579
+ symbol: e.token.symbol,
1580
+ icon: e.token.icon,
1581
+ size: 26
1582
+ }
1583
+ ),
1584
+ /* @__PURE__ */ t("span", { style: { fontSize: 14, fontWeight: 600 }, children: e.token.symbol })
1585
+ ]
1586
+ }
1587
+ ),
1588
+ /* @__PURE__ */ a("span", { className: "surf-select-box--apy", children: [
1589
+ e.apy.toFixed(2),
1590
+ "% APY"
1591
+ ] })
1592
+ ] })
1593
+ ] }),
1594
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
1595
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Blockchain" }),
1596
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
1597
+ /* @__PURE__ */ t(
1598
+ "img",
1599
+ {
1600
+ src: e.chain.id === 137 ? N.POLYGON : N.BASE_CHAIN,
1601
+ alt: e.chain.name,
1602
+ width: 18,
1603
+ height: 18
1604
+ }
1605
+ ),
1606
+ /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 500 }, children: e.chain.name })
1607
+ ] }) })
1608
+ ] })
1609
+ ] }),
1610
+ /* @__PURE__ */ a("div", { className: "surf-amount-box", children: [
1611
+ /* @__PURE__ */ a(
1612
+ "div",
1613
+ {
1614
+ style: {
1615
+ display: "flex",
1616
+ alignItems: "center",
1617
+ justifyContent: "space-between",
1618
+ marginBottom: 8
1619
+ },
1620
+ children: [
1621
+ /* @__PURE__ */ t("span", { className: "surf-label", style: { margin: 0 }, children: "Enter Amount" }),
1622
+ /* @__PURE__ */ t("div", { style: { display: "flex", gap: 10 }, children: Ge.map((d) => /* @__PURE__ */ a(
1623
+ "button",
1624
+ {
1625
+ className: "surf-pct-link",
1626
+ onClick: () => o((f * d / 100).toFixed(2)),
1627
+ children: [
1628
+ d,
1629
+ "%"
1630
+ ]
1631
+ },
1632
+ d
1633
+ )) })
1634
+ ]
1635
+ }
1636
+ ),
1637
+ /* @__PURE__ */ t(
1638
+ "input",
1639
+ {
1640
+ type: "number",
1641
+ value: s,
1642
+ onChange: (d) => o(d.target.value),
1643
+ placeholder: "0",
1644
+ min: "0",
1645
+ step: "any",
1646
+ className: "surf-amount-input"
1647
+ }
1648
+ ),
1649
+ /* @__PURE__ */ a(
1650
+ "div",
1651
+ {
1652
+ style: {
1653
+ display: "flex",
1654
+ alignItems: "center",
1655
+ justifyContent: "space-between",
1656
+ marginTop: 8
1657
+ },
1658
+ children: [
1659
+ /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
1660
+ "Min 100 ",
1661
+ e.token.symbol
1662
+ ] }),
1663
+ /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
1664
+ "Available:",
1665
+ " ",
1666
+ i ? "..." : f.toLocaleString("en-US", { minimumFractionDigits: 2 }),
1667
+ " ",
1668
+ e.token.symbol,
1669
+ /* @__PURE__ */ t(
1670
+ "button",
1671
+ {
1672
+ className: "surf-refresh-btn",
1673
+ onClick: l,
1674
+ title: "Refresh balance",
1675
+ children: /* @__PURE__ */ a(
1676
+ "svg",
1677
+ {
1678
+ width: "12",
1679
+ height: "12",
1680
+ viewBox: "0 0 24 24",
1681
+ fill: "none",
1682
+ stroke: "currentColor",
1683
+ strokeWidth: "2.2",
1684
+ children: [
1685
+ /* @__PURE__ */ t("path", { d: "M1 4v6h6M23 20v-6h-6" }),
1686
+ /* @__PURE__ */ t("path", { d: "M20.49 9A9 9 0 005.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 013.51 15" })
1687
+ ]
1688
+ }
1689
+ )
1690
+ }
1691
+ )
1692
+ ] })
1693
+ ]
1694
+ }
1695
+ )
1696
+ ] }),
1697
+ /* @__PURE__ */ a(
1698
+ v,
1699
+ {
1700
+ variant: "primary",
1701
+ size: "lg",
1702
+ fullWidth: !0,
1703
+ disabled: !u,
1704
+ onClick: r,
1705
+ style: { borderRadius: 50, marginTop: 16 },
1706
+ children: [
1707
+ "Deposit ",
1708
+ e.token.symbol
1709
+ ]
1710
+ }
1711
+ ),
1712
+ /* @__PURE__ */ a("p", { className: "surf-disclaimer", style: { marginTop: 10 }, children: [
1713
+ "You'll need Base-bridged ETH to deposit. After activation, all agent fees are covered. By activating Surf, you agree to the",
1714
+ " ",
1715
+ /* @__PURE__ */ t(
1716
+ "a",
1717
+ {
1718
+ href: "https://surfliquid.com/terms",
1719
+ target: "_blank",
1720
+ rel: "noopener noreferrer",
1721
+ children: "platform terms"
1722
+ }
1723
+ ),
1724
+ " ",
1725
+ "and",
1726
+ " ",
1727
+ /* @__PURE__ */ t(
1728
+ "a",
1729
+ {
1730
+ href: "https://surfliquid.com/privacy",
1731
+ target: "_blank",
1732
+ rel: "noopener noreferrer",
1733
+ children: "privacy policy"
1734
+ }
1735
+ ),
1736
+ ", and acknowledge that returns may vary according to market conditions and selected strategy"
1737
+ ] })
1738
+ ] });
1739
+ }
1740
+ function Xe(e, s) {
1741
+ const n = ["creating_contract", "approving", "depositing"];
1742
+ function i(r) {
1743
+ if (r === "creating_contract" && s) return "completed";
1744
+ const l = n.indexOf(e.id), c = n.indexOf(r);
1745
+ return e.id === "success" ? "completed" : l === -1 ? "pending" : c < l ? "completed" : c === l ? "active" : "pending";
1746
+ }
1747
+ function o(r) {
1748
+ return e.id === r && "txHash" in e ? e.txHash : void 0;
1749
+ }
1750
+ return [
1751
+ {
1752
+ id: "creating_contract",
1753
+ title: "Surf Account Creation",
1754
+ description: "Deploy your self-custodial smart contract",
1755
+ status: i("creating_contract"),
1756
+ txHash: o("creating_contract")
1757
+ },
1758
+ {
1759
+ id: "approving",
1760
+ title: "Approve USDC",
1761
+ description: "Grant access for automated strategies",
1762
+ status: i("approving"),
1763
+ txHash: o("approving")
1764
+ },
1765
+ {
1766
+ id: "depositing",
1767
+ title: "Deposit USDC",
1768
+ description: "Fund your Surf Account by depositing",
1769
+ status: i("depositing"),
1770
+ txHash: o("depositing")
1771
+ }
1772
+ ];
1773
+ }
1774
+ function Qe(e) {
1775
+ switch (e.id) {
1776
+ case "creating_contract":
1777
+ return "Creating contract";
1778
+ case "approving":
1779
+ return "Approve USDC";
1780
+ case "depositing":
1781
+ return "Access Dashboard";
1782
+ default:
1783
+ return "Processing...";
1784
+ }
1785
+ }
1786
+ function Ze(e) {
1787
+ return e.id === "depositing" && "txHash" in e && !!e.txHash;
1788
+ }
1789
+ function et({
1790
+ step: e,
1791
+ tokenSymbol: s,
1792
+ vaultExists: n,
1793
+ onDashboard: i,
1794
+ onSwitchToWithdraw: o
1795
+ }) {
1796
+ const r = Ze(e), l = !r && e.id !== "success" && e.id !== "error" && e.id !== "idle";
1797
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
1798
+ /* @__PURE__ */ t(
1799
+ A,
1800
+ {
1801
+ tabs: [
1802
+ { id: "deposit", label: "Deposit" },
1803
+ { id: "withdraw", label: "Withdraw" }
1804
+ ],
1805
+ activeTab: "deposit",
1806
+ onChange: (c) => {
1807
+ c === "withdraw" && o();
1808
+ },
1809
+ variant: "pill"
1810
+ }
1811
+ ),
1812
+ /* @__PURE__ */ t(
1813
+ "p",
1814
+ {
1815
+ className: "surf-modal-subtitle",
1816
+ style: { marginTop: 14, textAlign: "center" },
1817
+ children: "Confirm wallet requests to finish agent activation"
1818
+ }
1819
+ ),
1820
+ /* @__PURE__ */ t(z, { steps: Xe(e, n) }),
1821
+ /* @__PURE__ */ t("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ t(
1822
+ v,
1823
+ {
1824
+ variant: r ? "primary" : "soft",
1825
+ size: "lg",
1826
+ fullWidth: !0,
1827
+ isLoading: l,
1828
+ disabled: !r && e.id !== "error",
1829
+ onClick: r ? i : void 0,
1830
+ style: { borderRadius: 50 },
1831
+ children: Qe(e)
1832
+ }
1833
+ ) }),
1834
+ e.id === "error" && /* @__PURE__ */ a("div", { className: "surf-error-box", children: [
1835
+ "⚠ ",
1836
+ Ke(e.error)
1837
+ ] })
1838
+ ] });
1839
+ }
1840
+ function tt({
1841
+ txHash: e,
1842
+ amount: s,
1843
+ tokenSymbol: n,
1844
+ walletAddress: i,
1845
+ onExplore: o,
1846
+ onBack: r
1847
+ }) {
1848
+ return /* @__PURE__ */ a("div", { className: "surf-success", children: [
1849
+ /* @__PURE__ */ t("div", { className: "surf-success-icon", children: /* @__PURE__ */ t("div", { className: "surf-success-icon-inner", children: /* @__PURE__ */ t(
1850
+ "svg",
1851
+ {
1852
+ width: "24",
1853
+ height: "24",
1854
+ viewBox: "0 0 24 24",
1855
+ fill: "none",
1856
+ stroke: "white",
1857
+ strokeWidth: "2.5",
1858
+ children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" })
1859
+ }
1860
+ ) }) }),
1861
+ /* @__PURE__ */ t("p", { className: "surf-success-title", children: "You're all done!" }),
1862
+ /* @__PURE__ */ a("p", { className: "surf-success-desc", children: [
1863
+ "Successfully deposited",
1864
+ " ",
1865
+ /* @__PURE__ */ a("strong", { children: [
1866
+ parseFloat(s).toLocaleString("en-US", {
1867
+ minimumFractionDigits: 2
1868
+ }),
1869
+ " ",
1870
+ n
1871
+ ] }),
1872
+ " ",
1873
+ "to your wallet ",
1874
+ /* @__PURE__ */ t("strong", { children: qe(i) })
1875
+ ] }),
1876
+ /* @__PURE__ */ a("div", { className: "surf-success-actions", children: [
1877
+ /* @__PURE__ */ t(
1878
+ v,
1879
+ {
1880
+ variant: "outline",
1881
+ size: "md",
1882
+ style: { flex: 1 },
1883
+ onClick: o,
1884
+ rightIcon: /* @__PURE__ */ t(
1885
+ "svg",
1886
+ {
1887
+ width: "13",
1888
+ height: "13",
1889
+ viewBox: "0 0 24 24",
1890
+ fill: "none",
1891
+ stroke: "currentColor",
1892
+ strokeWidth: "2",
1893
+ children: /* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14 21 3" })
1894
+ }
1895
+ ),
1896
+ children: "Explore"
1897
+ }
1898
+ ),
1899
+ /* @__PURE__ */ t(
1900
+ v,
1901
+ {
1902
+ variant: "primary",
1903
+ size: "md",
1904
+ style: { flex: 1 },
1905
+ onClick: r,
1906
+ children: "Back to dashboard"
1907
+ }
1908
+ )
1909
+ ] })
1910
+ ] });
1911
+ }
1912
+ const nt = {
1913
+ token: { symbol: "USDC", name: "USD Coin", decimals: 6, address: "" },
1914
+ chain: { name: "Base", id: 8453 },
1915
+ balance: "0.00",
1916
+ earnings: "0.00",
1917
+ apy: 0,
1918
+ withdrawalType: "instant",
1919
+ availableBalance: "0.00"
1920
+ };
1921
+ function mt({
1922
+ isOpen: e,
1923
+ onClose: s,
1924
+ vault: n,
1925
+ onSwitchToWithdraw: i
1926
+ }) {
1927
+ const { walletAddress: o } = C(), { step: r, execute: l, reset: c } = se(), [f, h] = m(""), u = n ?? nt, { balance: d, isLoading: p, refetch: y } = oe(u.token.address, u.token.decimals ?? 6), g = r.id === "idle", b = r.id === "success";
1928
+ function k() {
1929
+ c(), h(""), s();
1930
+ }
1931
+ return /* @__PURE__ */ a(P, { isOpen: e, onClose: k, children: [
1932
+ /* @__PURE__ */ t(
1933
+ "button",
1934
+ {
1935
+ className: "surf-modal-close",
1936
+ onClick: k,
1937
+ "aria-label": "Close",
1938
+ children: /* @__PURE__ */ t(
1939
+ "svg",
1940
+ {
1941
+ width: "16",
1942
+ height: "16",
1943
+ viewBox: "0 0 24 24",
1944
+ fill: "none",
1945
+ stroke: "currentColor",
1946
+ strokeWidth: "2.5",
1947
+ children: /* @__PURE__ */ t("path", { d: "M18 6 6 18M6 6l12 12" })
1948
+ }
1949
+ )
1950
+ }
1951
+ ),
1952
+ g && /* @__PURE__ */ t(
1953
+ Je,
1954
+ {
1955
+ vault: u,
1956
+ amount: f,
1957
+ availableBalance: d,
1958
+ isBalanceLoading: p,
1959
+ onAmountChange: h,
1960
+ onSubmit: () => f && l(f, u),
1961
+ onRefreshBalance: y,
1962
+ onSwitchToWithdraw: () => {
1963
+ c(), h(""), i == null || i();
1964
+ }
1965
+ }
1966
+ ),
1967
+ !g && !b && /* @__PURE__ */ t(
1968
+ et,
1969
+ {
1970
+ step: r,
1971
+ tokenSymbol: u.token.symbol,
1972
+ vaultExists: !!u.userVaultAddress,
1973
+ onDashboard: k,
1974
+ onSwitchToWithdraw: () => {
1975
+ c(), h(""), i == null || i();
1976
+ }
1977
+ }
1978
+ ),
1979
+ b && r.id === "success" && /* @__PURE__ */ t(
1980
+ tt,
1981
+ {
1982
+ txHash: r.txHash,
1983
+ amount: r.amount,
1984
+ tokenSymbol: u.token.symbol,
1985
+ walletAddress: o,
1986
+ onExplore: () => window.open(`https://basescan.org/tx/${r.txHash}`, "_blank"),
1987
+ onBack: k
1988
+ }
1989
+ )
1990
+ ] });
1991
+ }
1992
+ const it = [10, 25, 50, 100];
1993
+ function J(e) {
1994
+ return e.length < 10 ? e : `${e.slice(0, 6)}...${e.slice(-4)}`;
1995
+ }
1996
+ function st(e) {
1997
+ return (Math.floor(e * 100) / 100).toFixed(2);
1998
+ }
1999
+ function rt(e) {
2000
+ const s = typeof e == "string" ? e : (e == null ? void 0 : e.message) ?? "";
2001
+ if (!s) return "Transaction failed. Please try again.";
2002
+ const n = s.toLowerCase();
2003
+ if (n.includes("user rejected") || n.includes("user denied")) return "Transaction rejected by wallet.";
2004
+ if (n.includes("insufficient funds")) return "Insufficient funds for transaction.";
2005
+ if (n.includes("execution reverted")) return "Transaction reverted by contract.";
2006
+ if (n.includes("nonce")) return "Nonce error — please reset your wallet and retry.";
2007
+ if (n.includes("network") || n.includes("disconnected")) return "Network error. Check your connection.";
2008
+ const i = s.split(/[.(]/)[0].trim();
2009
+ return i.length > 0 && i.length <= 100 ? i : "Transaction failed. Please try again.";
2010
+ }
2011
+ function at({
2012
+ vault: e,
2013
+ amount: s,
2014
+ walletAddress: n,
2015
+ withdrawableBalance: i,
2016
+ isBalanceLoading: o,
2017
+ onAmountChange: r,
2018
+ onSubmit: l,
2019
+ onRefreshBalance: c,
2020
+ onSwitchToDeposit: f
2021
+ }) {
2022
+ const h = parseFloat(i) > 0 ? parseFloat(i) : parseFloat(e.availableBalance) || parseFloat(e.balance) || 0, u = parseFloat(s) || 0, d = u > 0 && u <= h;
2023
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
2024
+ /* @__PURE__ */ t(
2025
+ A,
2026
+ {
2027
+ tabs: [
2028
+ { id: "deposit", label: "Deposit" },
2029
+ { id: "withdraw", label: "Withdraw" }
2030
+ ],
2031
+ activeTab: "withdraw",
2032
+ onChange: (p) => {
2033
+ p === "deposit" && f();
2034
+ },
2035
+ variant: "pill"
2036
+ }
2037
+ ),
2038
+ /* @__PURE__ */ a(
2039
+ "p",
2040
+ {
2041
+ className: "surf-modal-subtitle",
2042
+ style: { marginTop: 14, textAlign: "center" },
2043
+ children: [
2044
+ "Surf will withdraw to your connected wallet",
2045
+ " ",
2046
+ /* @__PURE__ */ t("span", { style: { fontWeight: 600, color: "#111827" }, children: J(n) })
2047
+ ]
2048
+ }
2049
+ ),
2050
+ /* @__PURE__ */ a("div", { style: { display: "flex", gap: 12, marginBottom: 16 }, children: [
2051
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
2052
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Token" }),
2053
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
2054
+ /* @__PURE__ */ t(
2055
+ L,
2056
+ {
2057
+ symbol: e.token.symbol,
2058
+ icon: e.token.icon,
2059
+ size: 26
2060
+ }
2061
+ ),
2062
+ /* @__PURE__ */ t("span", { style: { fontSize: 14, fontWeight: 600 }, children: e.token.symbol })
2063
+ ] }) })
2064
+ ] }),
2065
+ /* @__PURE__ */ a("div", { className: "surf-field", style: { flex: 1, marginBottom: 0 }, children: [
2066
+ /* @__PURE__ */ t("span", { className: "surf-label", children: "Blockchain" }),
2067
+ /* @__PURE__ */ t("div", { className: "surf-select-box", children: /* @__PURE__ */ a("div", { style: { display: "flex", alignItems: "center", gap: 7 }, children: [
2068
+ /* @__PURE__ */ t(
2069
+ "img",
2070
+ {
2071
+ src: e.chain.id === 137 ? N.POLYGON : N.BASE_CHAIN,
2072
+ alt: e.chain.name,
2073
+ width: 18,
2074
+ height: 18
2075
+ }
2076
+ ),
2077
+ /* @__PURE__ */ t("span", { style: { fontSize: 13, fontWeight: 500 }, children: e.chain.name })
2078
+ ] }) })
2079
+ ] })
2080
+ ] }),
2081
+ /* @__PURE__ */ a("div", { className: "surf-amount-box", children: [
2082
+ /* @__PURE__ */ a(
2083
+ "div",
2084
+ {
2085
+ style: {
2086
+ display: "flex",
2087
+ alignItems: "center",
2088
+ justifyContent: "space-between",
2089
+ marginBottom: 8
2090
+ },
2091
+ children: [
2092
+ /* @__PURE__ */ t("span", { className: "surf-label", style: { margin: 0 }, children: "Enter Amount" }),
2093
+ /* @__PURE__ */ t("div", { style: { display: "flex", gap: 10 }, children: it.map((p) => /* @__PURE__ */ a(
2094
+ "button",
2095
+ {
2096
+ className: "surf-pct-link",
2097
+ onClick: () => r(st(h * p / 100)),
2098
+ children: [
2099
+ p,
2100
+ "%"
2101
+ ]
2102
+ },
2103
+ p
2104
+ )) })
2105
+ ]
2106
+ }
2107
+ ),
2108
+ /* @__PURE__ */ t(
2109
+ "input",
2110
+ {
2111
+ type: "number",
2112
+ value: s,
2113
+ onChange: (p) => r(p.target.value),
2114
+ placeholder: "0",
2115
+ min: "0",
2116
+ step: "any",
2117
+ className: "surf-amount-input"
2118
+ }
2119
+ ),
2120
+ /* @__PURE__ */ t(
2121
+ "div",
2122
+ {
2123
+ style: {
2124
+ display: "flex",
2125
+ alignItems: "flex-end",
2126
+ justifyContent: "flex-end",
2127
+ marginTop: 8
2128
+ },
2129
+ children: /* @__PURE__ */ a("span", { className: "surf-amount-hint", children: [
2130
+ "Available:",
2131
+ " ",
2132
+ o ? "..." : h.toLocaleString("en-US", {
2133
+ minimumFractionDigits: 2
2134
+ }),
2135
+ " ",
2136
+ e.token.symbol,
2137
+ /* @__PURE__ */ t(
2138
+ "button",
2139
+ {
2140
+ className: "surf-refresh-btn",
2141
+ onClick: c,
2142
+ title: "Refresh balance",
2143
+ children: /* @__PURE__ */ a(
2144
+ "svg",
2145
+ {
2146
+ width: "12",
2147
+ height: "12",
2148
+ viewBox: "0 0 24 24",
2149
+ fill: "none",
2150
+ stroke: "currentColor",
2151
+ strokeWidth: "2.2",
2152
+ children: [
2153
+ /* @__PURE__ */ t("path", { d: "M1 4v6h6M23 20v-6h-6" }),
2154
+ /* @__PURE__ */ t("path", { d: "M20.49 9A9 9 0 005.64 5.64L1 10M23 14l-4.64 4.36A9 9 0 013.51 15" })
2155
+ ]
2156
+ }
2157
+ )
2158
+ }
2159
+ )
2160
+ ] })
2161
+ }
2162
+ )
2163
+ ] }),
2164
+ /* @__PURE__ */ t(
2165
+ v,
2166
+ {
2167
+ variant: "primary",
2168
+ size: "lg",
2169
+ fullWidth: !0,
2170
+ disabled: !d,
2171
+ onClick: l,
2172
+ style: { borderRadius: 50, marginTop: 16 },
2173
+ children: "Withdraw funds"
2174
+ }
2175
+ ),
2176
+ /* @__PURE__ */ t("p", { className: "surf-disclaimer", style: { marginTop: 10 }, children: "Rewards will also be withdrawn by default" })
2177
+ ] });
2178
+ }
2179
+ function ot(e, s, n) {
2180
+ const i = ["closing_position", "redeeming_reward"];
2181
+ function o(l) {
2182
+ const c = i.indexOf(e.id), f = i.indexOf(l);
2183
+ return e.id === "success" ? "completed" : c === -1 ? "pending" : f < c ? "completed" : f === c ? "active" : "pending";
2184
+ }
2185
+ function r(l) {
2186
+ return e.id === l && "txHash" in e ? e.txHash : void 0;
2187
+ }
2188
+ return [
2189
+ {
2190
+ id: "closing_position",
2191
+ title: "Close current position",
2192
+ description: `Withdraw ${parseFloat(s || "0").toFixed(2)} ${n} from Vault`,
2193
+ status: o("closing_position"),
2194
+ txHash: r("closing_position")
2195
+ },
2196
+ {
2197
+ id: "redeeming_reward",
2198
+ title: "Redeem Reward",
2199
+ description: "Transferring to your wallet",
2200
+ status: o("redeeming_reward"),
2201
+ txHash: r("redeeming_reward")
2202
+ }
2203
+ ];
2204
+ }
2205
+ function lt(e) {
2206
+ switch (e.id) {
2207
+ case "closing_position":
2208
+ return "Withdrawing Funds...";
2209
+ case "redeeming_reward":
2210
+ return "Redeeming Reward...";
2211
+ default:
2212
+ return "Processing...";
2213
+ }
2214
+ }
2215
+ function ct({
2216
+ step: e,
2217
+ amount: s,
2218
+ tokenSymbol: n,
2219
+ walletAddress: i,
2220
+ onSwitchToDeposit: o
2221
+ }) {
2222
+ const r = e.id !== "success" && e.id !== "error" && e.id !== "idle";
2223
+ return /* @__PURE__ */ a("div", { className: "surf-modal-body", children: [
2224
+ /* @__PURE__ */ t(
2225
+ A,
2226
+ {
2227
+ tabs: [
2228
+ { id: "deposit", label: "Deposit" },
2229
+ { id: "withdraw", label: "Withdraw" }
2230
+ ],
2231
+ activeTab: "withdraw",
2232
+ onChange: (l) => {
2233
+ l === "deposit" && o();
2234
+ },
2235
+ variant: "pill"
2236
+ }
2237
+ ),
2238
+ /* @__PURE__ */ a(
2239
+ "p",
2240
+ {
2241
+ className: "surf-modal-subtitle",
2242
+ style: { marginTop: 14, textAlign: "center" },
2243
+ children: [
2244
+ "Surf is resolving all your positions and withdrawing to your connected wallet ",
2245
+ /* @__PURE__ */ t("strong", { children: J(i) })
2246
+ ]
2247
+ }
2248
+ ),
2249
+ /* @__PURE__ */ t(z, { steps: ot(e, s, n) }),
2250
+ /* @__PURE__ */ t("div", { style: { marginTop: 20 }, children: /* @__PURE__ */ t(
2251
+ v,
2252
+ {
2253
+ variant: "soft",
2254
+ size: "lg",
2255
+ fullWidth: !0,
2256
+ isLoading: r,
2257
+ disabled: e.id !== "error",
2258
+ style: { borderRadius: 50 },
2259
+ children: lt(e)
2260
+ }
2261
+ ) }),
2262
+ e.id === "error" && /* @__PURE__ */ a("div", { className: "surf-error-box", children: [
2263
+ "⚠ ",
2264
+ rt(e.error)
2265
+ ] })
2266
+ ] });
2267
+ }
2268
+ function dt({
2269
+ amount: e,
2270
+ tokenSymbol: s,
2271
+ walletAddress: n,
2272
+ onExplore: i,
2273
+ onBack: o
2274
+ }) {
2275
+ return /* @__PURE__ */ a("div", { className: "surf-success", children: [
2276
+ /* @__PURE__ */ t("div", { className: "surf-success-icon", children: /* @__PURE__ */ t("div", { className: "surf-success-icon-inner", children: /* @__PURE__ */ t(
2277
+ "svg",
2278
+ {
2279
+ width: "24",
2280
+ height: "24",
2281
+ viewBox: "0 0 24 24",
2282
+ fill: "none",
2283
+ stroke: "white",
2284
+ strokeWidth: "2.5",
2285
+ children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" })
2286
+ }
2287
+ ) }) }),
2288
+ /* @__PURE__ */ t("p", { className: "surf-success-title", children: "You're all done!" }),
2289
+ /* @__PURE__ */ a("p", { className: "surf-success-desc", children: [
2290
+ "Successfully withdrew",
2291
+ " ",
2292
+ /* @__PURE__ */ a("strong", { children: [
2293
+ parseFloat(e).toLocaleString("en-US", {
2294
+ minimumFractionDigits: 2
2295
+ }),
2296
+ " ",
2297
+ s
2298
+ ] }),
2299
+ " ",
2300
+ "to your wallet ",
2301
+ /* @__PURE__ */ t("strong", { children: J(n) })
2302
+ ] }),
2303
+ /* @__PURE__ */ a("div", { className: "surf-success-actions", children: [
2304
+ /* @__PURE__ */ t(
2305
+ v,
2306
+ {
2307
+ variant: "outline",
2308
+ size: "md",
2309
+ style: { flex: 1 },
2310
+ onClick: i,
2311
+ rightIcon: /* @__PURE__ */ t(
2312
+ "svg",
2313
+ {
2314
+ width: "13",
2315
+ height: "13",
2316
+ viewBox: "0 0 24 24",
2317
+ fill: "none",
2318
+ stroke: "currentColor",
2319
+ strokeWidth: "2",
2320
+ children: /* @__PURE__ */ t("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14 21 3" })
2321
+ }
2322
+ ),
2323
+ children: "Explore"
2324
+ }
2325
+ ),
2326
+ /* @__PURE__ */ t(
2327
+ v,
2328
+ {
2329
+ variant: "primary",
2330
+ size: "md",
2331
+ style: { flex: 1 },
2332
+ onClick: o,
2333
+ children: "Back to dashboard"
2334
+ }
2335
+ )
2336
+ ] })
2337
+ ] });
2338
+ }
2339
+ function gt({
2340
+ isOpen: e,
2341
+ onClose: s,
2342
+ vault: n,
2343
+ onSwitchToDeposit: i
2344
+ }) {
2345
+ const { walletAddress: o } = C(), { step: r, execute: l, reset: c } = re(), [f, h] = m(""), {
2346
+ balance: u,
2347
+ isLoading: d,
2348
+ refetch: p
2349
+ } = le(
2350
+ (n == null ? void 0 : n.token.address) ?? "",
2351
+ n == null ? void 0 : n.userVaultAddress,
2352
+ (n == null ? void 0 : n.token.decimals) ?? 6
2353
+ ), y = r.id === "idle", g = r.id === "success";
2354
+ function b() {
2355
+ c(), h(""), s();
2356
+ }
2357
+ const k = g && r.id === "success" ? r.amount : f;
2358
+ return /* @__PURE__ */ a(P, { isOpen: e, onClose: b, children: [
2359
+ /* @__PURE__ */ t(
2360
+ "button",
2361
+ {
2362
+ className: "surf-modal-close",
2363
+ onClick: b,
2364
+ "aria-label": "Close",
2365
+ children: /* @__PURE__ */ t(
2366
+ "svg",
2367
+ {
2368
+ width: "16",
2369
+ height: "16",
2370
+ viewBox: "0 0 24 24",
2371
+ fill: "none",
2372
+ stroke: "currentColor",
2373
+ strokeWidth: "2.5",
2374
+ children: /* @__PURE__ */ t("path", { d: "M18 6 6 18M6 6l12 12" })
2375
+ }
2376
+ )
2377
+ }
2378
+ ),
2379
+ n && y && /* @__PURE__ */ t(
2380
+ at,
2381
+ {
2382
+ vault: n,
2383
+ amount: f,
2384
+ walletAddress: o,
2385
+ withdrawableBalance: u,
2386
+ isBalanceLoading: d,
2387
+ onAmountChange: h,
2388
+ onSubmit: () => n && f && l(f, n),
2389
+ onRefreshBalance: p,
2390
+ onSwitchToDeposit: () => {
2391
+ c(), h(""), i == null || i();
2392
+ }
2393
+ }
2394
+ ),
2395
+ !y && !g && n && /* @__PURE__ */ t(
2396
+ ct,
2397
+ {
2398
+ step: r,
2399
+ amount: f,
2400
+ tokenSymbol: n.token.symbol,
2401
+ walletAddress: o,
2402
+ onSwitchToDeposit: () => {
2403
+ c(), h(""), i == null || i();
2404
+ }
2405
+ }
2406
+ ),
2407
+ g && r.id === "success" && /* @__PURE__ */ t(
2408
+ dt,
2409
+ {
2410
+ amount: k,
2411
+ tokenSymbol: (n == null ? void 0 : n.token.symbol) ?? "USDC",
2412
+ walletAddress: o,
2413
+ onExplore: () => window.open(`https://basescan.org/tx/${r.txHash}`, "_blank"),
2414
+ onBack: b
2415
+ }
2416
+ ),
2417
+ !n && /* @__PURE__ */ t("div", { className: "surf-empty", children: "Loading vault information..." })
2418
+ ] });
2419
+ }
2420
+ export {
2421
+ v as Button,
2422
+ mt as DepositModal,
2423
+ xe as ManageDropdown,
2424
+ P as Modal,
2425
+ pt as RegistrationForm,
2426
+ z as StepProgress,
2427
+ ie as SurfContext,
2428
+ ge as SurfProvider,
2429
+ ft as SurfWidget,
2430
+ A as Tabs,
2431
+ L as TokenIcon,
2432
+ Ie as VaultActivityModal,
2433
+ Ne as VaultCard,
2434
+ gt as WithdrawModal,
2435
+ Ce as useAgentMessages,
2436
+ se as useDeposit,
2437
+ oe as useDepositBalance,
2438
+ C as useSurf,
2439
+ ve as useVault,
2440
+ re as useWithdraw,
2441
+ le as useWithdrawableBalance
2442
+ };
2443
+ //# sourceMappingURL=index.esm.js.map