@funkit/connect 10.1.0-next.0 → 10.1.0

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 (55) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/dist/clients/{chunk-ETB2YYFT.js → chunk-2NBYHUIW.js} +1 -1
  3. package/dist/clients/{chunk-JNZY3GAA.js → chunk-E3USJY7A.js} +1 -1
  4. package/dist/clients/{chunk-HD4Y4NKC.js → chunk-ZAXSDMDU.js} +2 -2
  5. package/dist/clients/fanatics.css +1 -1
  6. package/dist/clients/fanatics.js +2 -2
  7. package/dist/clients/lighter.css +11 -11
  8. package/dist/clients/lighter.js +3 -3
  9. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.css +11 -11
  10. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.js +3 -3
  11. package/dist/clients/polymarket/index.css +11 -11
  12. package/dist/clients/polymarket/index.js +3 -3
  13. package/dist/index.css +11 -11
  14. package/dist/index.js +73 -86
  15. package/dist/utils/checkout.d.ts +1 -1
  16. package/dist/wallets/walletConnectors/index.js +46 -46
  17. package/package.json +4 -4
  18. package/dist/clients/chunk-42XZD2Y3.js +0 -1112
  19. package/dist/clients/chunk-5UIZBNLC.js +0 -1175
  20. package/dist/clients/chunk-BO7AZVPG.js +0 -1112
  21. package/dist/clients/chunk-BUCJRBW7.js +0 -1472
  22. package/dist/clients/chunk-ME4OAQIY.js +0 -696
  23. package/dist/clients/chunk-PEVDOGEA.js +0 -109
  24. package/dist/clients/chunk-QIWGVVAW.js +0 -1113
  25. package/dist/clients/chunk-VJZW3MA3.js +0 -94
  26. package/dist/clients/chunk-WEETVC7U.js +0 -1113
  27. package/dist/clients/chunk-Y2KXVS36.js +0 -230
  28. package/dist/clients/polymarket/usePolymarketAccountBalances.d.ts +0 -66
  29. package/dist/hooks/useIsTokenWhitelisted.d.ts +0 -30
  30. package/dist/modals/CheckoutModal/buildRelayChains.d.ts +0 -12
  31. package/dist/providers/FunkitFlagsProvider.d.ts +0 -26
  32. package/dist/utils/flags/config.d.ts +0 -333
  33. package/dist/utils/flags/endpoint.d.ts +0 -22
  34. package/dist/utils/flags/hash.d.ts +0 -13
  35. package/dist/utils/flags/impl.d.ts +0 -10
  36. package/dist/utils/flags/types.d.ts +0 -49
  37. package/dist/wallets/walletConnectors/chunk-2VP2F6EK.js +0 -70
  38. package/dist/wallets/walletConnectors/chunk-4T6ZSRJF.js +0 -69
  39. package/dist/wallets/walletConnectors/chunk-6BW3HLBG.js +0 -96
  40. package/dist/wallets/walletConnectors/chunk-CCQV2ZET.js +0 -218
  41. package/dist/wallets/walletConnectors/chunk-CPI4TD43.js +0 -99
  42. package/dist/wallets/walletConnectors/chunk-F5XEEVG6.js +0 -98
  43. package/dist/wallets/walletConnectors/chunk-HNRB7KJU.js +0 -92
  44. package/dist/wallets/walletConnectors/chunk-HTHAK6XB.js +0 -93
  45. package/dist/wallets/walletConnectors/chunk-MIQTHJ6X.js +0 -66
  46. package/dist/wallets/walletConnectors/chunk-RB3HR4R2.js +0 -95
  47. package/dist/wallets/walletConnectors/chunk-RVOY537T.js +0 -100
  48. package/dist/wallets/walletConnectors/chunk-STVVP43G.js +0 -94
  49. package/dist/wallets/walletConnectors/chunk-UK7C2JXW.js +0 -87
  50. package/dist/wallets/walletConnectors/chunk-VAPGUPHO.js +0 -92
  51. package/dist/wallets/walletConnectors/chunk-VTM6EECM.js +0 -110
  52. package/dist/wallets/walletConnectors/chunk-X6CGV36L.js +0 -103
  53. package/dist/wallets/walletConnectors/chunk-YEZM4CK4.js +0 -96
  54. package/dist/wallets/walletConnectors/chunk-ZNX4EMPB.js +0 -106
  55. /package/dist/clients/{chunk-HMP3LHMW.js → chunk-LUHEVXPD.js} +0 -0
@@ -1,1112 +0,0 @@
1
- "use client";
2
- import {
3
- POLYMARKET_PERPS_ROUTING_ID,
4
- POLYMARKET_PREDICTIONS_ROUTING_ID
5
- } from "./chunk-VJZW3MA3.js";
6
- import {
7
- usePolymarketAccountBalances
8
- } from "./chunk-ZEXZQOAO.js";
9
- import {
10
- FunInput,
11
- FunSkeletonBlock,
12
- TooltipAnchorRefContext
13
- } from "./chunk-AIYBOVHV.js";
14
- import {
15
- Box,
16
- Text,
17
- themeVars
18
- } from "./chunk-PEVDOGEA.js";
19
- import {
20
- useFunkitTranslation
21
- } from "./chunk-STLOQEN7.js";
22
- import {
23
- POLYGON_USDCE,
24
- PUSD_TOKEN
25
- } from "./chunk-ME4OAQIY.js";
26
- import {
27
- logger
28
- } from "./chunk-AHYOV7AV.js";
29
-
30
- // src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
31
- import React12 from "react";
32
- import { polygon } from "viem/chains";
33
-
34
- // src/components/Dropdown/AccountSelectDropdown.tsx
35
- import React11, { useEffect as useEffect4 } from "react";
36
-
37
- // src/components/Dropdown/BaseDropdown.tsx
38
- import { isMobile } from "@funkit/utils";
39
- import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
40
- import React10, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
41
-
42
- // src/hooks/useScrollDivider.ts
43
- import { useCallback, useEffect, useState } from "react";
44
- var useScrollDivider = () => {
45
- const [refElement, setRefElement] = useState(null);
46
- const ref = useCallback((node) => setRefElement(node), []);
47
- const [isTop, setIsTop] = useState(true);
48
- const [isAtBottom, setIsAtBottom] = useState(false);
49
- const [isScrollable, setIsScrollable] = useState(false);
50
- const [isScrolling, setIsScrolling] = useState(false);
51
- useEffect(() => {
52
- const content = refElement;
53
- if (!content || !window.ResizeObserver) {
54
- return;
55
- }
56
- const handleScrollPositionChange = () => {
57
- const { scrollTop, scrollHeight, clientHeight } = content;
58
- setIsTop(scrollTop === 0);
59
- setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 1);
60
- setIsScrollable(scrollHeight > clientHeight + 2);
61
- };
62
- const handleContentChange = () => {
63
- handleScrollPositionChange();
64
- setTimeout(handleScrollPositionChange, 500);
65
- };
66
- const onScrollChange = () => {
67
- handleScrollPositionChange();
68
- setIsScrolling(true);
69
- };
70
- const onScrollEnd = () => setIsScrolling(false);
71
- content.addEventListener("scrollend", onScrollEnd);
72
- content.addEventListener("scroll", onScrollChange);
73
- const resizeObserver = new window.ResizeObserver(handleContentChange);
74
- resizeObserver.observe(content);
75
- const mutationObserver = new MutationObserver(handleContentChange);
76
- mutationObserver.observe(content, {
77
- childList: true,
78
- subtree: true,
79
- attributes: true,
80
- attributeFilter: ["style", "class"]
81
- });
82
- handleScrollPositionChange();
83
- return () => {
84
- content.removeEventListener("scroll", onScrollChange);
85
- content.removeEventListener("scrollend", onScrollEnd);
86
- resizeObserver.unobserve(content);
87
- mutationObserver.disconnect();
88
- };
89
- }, [refElement]);
90
- return {
91
- ref,
92
- hasTopDivider: !isTop,
93
- hasBottomDivider: isScrollable,
94
- isAtBottom,
95
- isScrolling,
96
- isScrollable
97
- };
98
- };
99
-
100
- // src/providers/FunkitProvider.tsx
101
- import { QueryClientProvider } from "@tanstack/react-query";
102
- import React8, {
103
- createContext,
104
- useContext,
105
- useEffect as useEffect2,
106
- useMemo,
107
- useRef
108
- } from "react";
109
-
110
- // src/utils/tokenMath.ts
111
- import { formatCurrencyAndStringify } from "@funkit/utils";
112
- import * as dnum from "dnum";
113
- import { formatUnits } from "viem";
114
- function floorToDecimals(value, decimals) {
115
- const d = dnum.from(value, decimals);
116
- return dnum.toNumber(d, decimals);
117
- }
118
- function formatUsdFlooredToCent(balanceUsd) {
119
- return formatCurrencyAndStringify(floorToDecimals(balanceUsd, 2));
120
- }
121
-
122
- // src/components/Icons/CheckIcon.tsx
123
- import React from "react";
124
- var CheckIcon = ({
125
- size = 16,
126
- className
127
- }) => /* @__PURE__ */ React.createElement(
128
- "svg",
129
- {
130
- width: size,
131
- height: size,
132
- viewBox: "0 0 16 16",
133
- fill: "none",
134
- xmlns: "http://www.w3.org/2000/svg",
135
- className
136
- },
137
- /* @__PURE__ */ React.createElement(
138
- "path",
139
- {
140
- d: "M12.4919 4.88281L6.25757 11.1172L3.50781 8",
141
- stroke: "currentColor",
142
- strokeWidth: "1.5",
143
- strokeLinecap: "round",
144
- strokeLinejoin: "round",
145
- pathLength: "100"
146
- }
147
- )
148
- );
149
-
150
- // src/components/Dropdown/BaseDropdownItem.tsx
151
- import { noop } from "@funkit/utils";
152
- import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
153
- import React2 from "react";
154
- import clsx from "clsx";
155
-
156
- // src/components/Dropdown/BaseDropdownItem.css.ts
157
- var disabledDropdownItemStyles = "BaseDropdownItem_disabledDropdownItemStyles__18hhw3k3 BaseDropdownItem__18hhw3k2";
158
- var enabledDropdownItemStyles = "BaseDropdownItem_enabledDropdownItemStyles__18hhw3k1 BaseDropdownItem__18hhw3k0";
159
-
160
- // src/components/Dropdown/BaseDropdownItem.tsx
161
- function BaseDropdownItem({
162
- iconComponent,
163
- label,
164
- description,
165
- id,
166
- onClick = noop,
167
- isSelected = false,
168
- isDisabled = false,
169
- borderRadius = "connectButton",
170
- horizontalIconGap = "dropdownItemIconGap",
171
- tagComponent,
172
- horizontalPadding = "dropdownItemPaddingX",
173
- verticalPadding = "dropdownItemPaddingY"
174
- }) {
175
- return /* @__PURE__ */ React2.createElement(
176
- DropdownMenu.Item,
177
- {
178
- disabled: isDisabled,
179
- onSelect: () => onClick(id),
180
- asChild: true
181
- },
182
- /* @__PURE__ */ React2.createElement(
183
- Box,
184
- {
185
- width: "full",
186
- display: "flex",
187
- alignItems: "center",
188
- justifyContent: "space-between",
189
- gap: "24",
190
- paddingY: verticalPadding,
191
- paddingX: horizontalPadding,
192
- className: clsx(
193
- isDisabled ? disabledDropdownItemStyles : enabledDropdownItemStyles
194
- ),
195
- boxShadow: isSelected ? "selectedDropdownItem" : void 0,
196
- borderRadius
197
- },
198
- /* @__PURE__ */ React2.createElement(
199
- Box,
200
- {
201
- display: "flex",
202
- alignItems: "center",
203
- justifyContent: "flex-start",
204
- gap: horizontalIconGap
205
- },
206
- iconComponent && /* @__PURE__ */ React2.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
207
- /* @__PURE__ */ React2.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React2.createElement(
208
- Text,
209
- {
210
- size: "dropdownItemFontSize",
211
- weight: "medium",
212
- color: isSelected ? "selectedDropdownItemText" : void 0
213
- },
214
- label
215
- ), description != null && /* @__PURE__ */ React2.createElement(Text, { size: "12", color: "secondaryText" }, description))
216
- ),
217
- /* @__PURE__ */ React2.createElement(
218
- Box,
219
- {
220
- display: "flex",
221
- alignItems: "center",
222
- justifyContent: "center",
223
- gap: "16"
224
- },
225
- tagComponent,
226
- /* @__PURE__ */ React2.createElement(
227
- Box,
228
- {
229
- width: "16",
230
- height: "16",
231
- alignItems: "center",
232
- justifyContent: "center",
233
- color: isSelected ? "selectedDropdownItemText" : "transparent"
234
- },
235
- /* @__PURE__ */ React2.createElement(CheckIcon, null)
236
- )
237
- )
238
- )
239
- );
240
- }
241
- var BaseDropdownItem_default = BaseDropdownItem;
242
-
243
- // src/components/Icons/CaretDownIcon.tsx
244
- import clsx2 from "clsx";
245
- import React3 from "react";
246
-
247
- // src/components/Icons/CaretDownIcon.css.ts
248
- var caretClosed = "CaretDownIcon_caretClosed__1gjdf1i3";
249
- var caretOpened = "CaretDownIcon_caretOpened__1gjdf1i2";
250
-
251
- // src/components/Icons/CaretDownIcon.tsx
252
- var CaretDownIcon = () => {
253
- return /* @__PURE__ */ React3.createElement(
254
- "svg",
255
- {
256
- width: "8",
257
- height: "5",
258
- viewBox: "0 0 8 5",
259
- fill: "none",
260
- xmlns: "http://www.w3.org/2000/svg"
261
- },
262
- /* @__PURE__ */ React3.createElement(
263
- "path",
264
- {
265
- d: "M3.45163 2.92973L0.879121 0.393174C0.654314 0.188182 0.317464 0.217886 0.126753 0.459527C-0.0639587 0.701168 -0.036324 1.06324 0.188483 1.26824L3.60944 4.64138C3.65478 4.68988 3.70789 4.72919 3.76623 4.7574C3.83874 4.79249 3.91764 4.80968 3.99714 4.80771C4.07647 4.80576 4.15489 4.78486 4.22578 4.74655C4.23264 4.74283 4.23943 4.73894 4.24614 4.7349C4.28505 4.71152 4.32107 4.68295 4.35332 4.64987L7.82907 1.18704C8.04528 0.97163 8.0581 0.608604 7.8577 0.376205C7.6573 0.143806 7.31956 0.130027 7.10335 0.345432L4.51922 2.91996C4.51922 2.94623 4 3.43025 4 3.43025L3.45163 2.92973Z",
266
- fill: "currentColor"
267
- }
268
- )
269
- );
270
- };
271
- var AnimatedCaretDownIcon = ({
272
- expanded,
273
- color = "primaryText",
274
- compact = false
275
- }) => {
276
- const animationClassName = clsx2(
277
- expanded !== void 0 && (expanded ? caretOpened : caretClosed)
278
- );
279
- if (compact) {
280
- return /* @__PURE__ */ React3.createElement(
281
- Box,
282
- {
283
- color,
284
- width: "8",
285
- height: "8",
286
- display: "flex",
287
- alignItems: "center",
288
- justifyContent: "center",
289
- className: animationClassName
290
- },
291
- /* @__PURE__ */ React3.createElement(CaretDownIcon, null)
292
- );
293
- }
294
- return /* @__PURE__ */ React3.createElement(
295
- Box,
296
- {
297
- color,
298
- width: "16",
299
- height: "16",
300
- display: "flex",
301
- alignItems: "center",
302
- justifyContent: "center",
303
- className: animationClassName
304
- },
305
- /* @__PURE__ */ React3.createElement(
306
- Box,
307
- {
308
- width: "8",
309
- height: "8",
310
- display: "flex",
311
- alignItems: "center",
312
- justifyContent: "center"
313
- },
314
- /* @__PURE__ */ React3.createElement(CaretDownIcon, null)
315
- )
316
- );
317
- };
318
-
319
- // src/components/FunNoResults/FunNoResults.tsx
320
- import React6 from "react";
321
-
322
- // src/components/Icons/CoinsIcon.tsx
323
- import React4 from "react";
324
- var CoinsIcon = ({
325
- size = 48,
326
- bgColor = "#141C41",
327
- iconColor = "#878A98"
328
- }) => {
329
- return /* @__PURE__ */ React4.createElement(
330
- "svg",
331
- {
332
- width: size,
333
- height: size,
334
- viewBox: "0 0 48 49",
335
- fill: "none",
336
- xmlns: "http://www.w3.org/2000/svg"
337
- },
338
- /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip0_30657_22302)" }, /* @__PURE__ */ React4.createElement(
339
- "path",
340
- {
341
- d: "M24 1C36.9787 1 47.5 11.5213 47.5 24.5C47.5 37.4787 36.9787 48 24 48C11.0213 48 0.5 37.4787 0.5 24.5C0.5 11.5213 11.0213 1 24 1Z",
342
- fill: bgColor,
343
- stroke: bgColor
344
- }
345
- ), /* @__PURE__ */ React4.createElement("g", { clipPath: "url(#clip1_30657_22302)" }, /* @__PURE__ */ React4.createElement(
346
- "path",
347
- {
348
- d: "M25 17C25 18.1046 22.5376 19 19.5 19C16.4624 19 14 18.1046 14 17M25 17C25 15.8954 22.5376 15 19.5 15C16.4624 15 14 15.8954 14 17M25 17V18.5M14 17V29C14 30.1046 16.4624 31 19.5 31M19.5 23C19.3315 23 19.1647 22.9972 19 22.9918C16.1967 22.9 14 22.0433 14 21M19.5 27C16.4624 27 14 26.1046 14 25M34 23.5C34 24.6046 31.5376 25.5 28.5 25.5C25.4624 25.5 23 24.6046 23 23.5M34 23.5C34 22.3954 31.5376 21.5 28.5 21.5C25.4624 21.5 23 22.3954 23 23.5M34 23.5V31C34 32.1046 31.5376 33 28.5 33C25.4624 33 23 32.1046 23 31V23.5M34 27.25C34 28.3546 31.5376 29.25 28.5 29.25C25.4624 29.25 23 28.3546 23 27.25",
349
- stroke: iconColor,
350
- strokeWidth: "1.5",
351
- strokeLinecap: "round",
352
- strokeLinejoin: "round"
353
- }
354
- ))),
355
- /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("clipPath", { id: "clip0_30657_22302" }, /* @__PURE__ */ React4.createElement(
356
- "rect",
357
- {
358
- width: "48",
359
- height: "48",
360
- fill: "white",
361
- transform: "translate(0 0.5)"
362
- }
363
- )), /* @__PURE__ */ React4.createElement("clipPath", { id: "clip1_30657_22302" }, /* @__PURE__ */ React4.createElement(
364
- "rect",
365
- {
366
- width: "24",
367
- height: "24",
368
- fill: "white",
369
- transform: "translate(12 12)"
370
- }
371
- )))
372
- );
373
- };
374
-
375
- // src/components/Icons/SearchSkeletonIcon.tsx
376
- import React5 from "react";
377
- var SearchSkeletonIcon = () => {
378
- return /* @__PURE__ */ React5.createElement(
379
- "svg",
380
- {
381
- width: "122",
382
- height: "81",
383
- viewBox: "0 0 122 81",
384
- fill: "none",
385
- xmlns: "http://www.w3.org/2000/svg"
386
- },
387
- /* @__PURE__ */ React5.createElement("g", { clipPath: "url(#clip0_7590_15835)" }, /* @__PURE__ */ React5.createElement(
388
- "path",
389
- {
390
- fillRule: "evenodd",
391
- clipRule: "evenodd",
392
- d: "M99.5636 34.0159C92.9099 34.0159 87.5159 39.4099 87.5159 46.0636C87.5159 52.7174 92.9099 58.1114 99.5636 58.1114C106.217 58.1114 111.611 52.7174 111.611 46.0636C111.611 39.4099 106.217 34.0159 99.5636 34.0159ZM83.5 46.0636C83.5 37.1919 90.6919 30 99.5636 30C108.435 30 115.627 37.1919 115.627 46.0636C115.627 49.7758 114.368 53.1938 112.254 55.9139L120.912 64.5722C121.696 65.3564 121.696 66.6277 120.912 67.4119C120.128 68.196 118.856 68.196 118.072 67.4119L109.414 58.7536C106.694 60.8681 103.276 62.1273 99.5636 62.1273C90.6919 62.1273 83.5 54.9353 83.5 46.0636Z",
393
- fill: "currentColor"
394
- }
395
- ), /* @__PURE__ */ React5.createElement(
396
- "path",
397
- {
398
- d: "M117.5 8H4.5C2.29086 8 0.5 9.79086 0.5 12V20C0.5 22.2091 2.29086 24 4.5 24H117.5C119.709 24 121.5 22.2091 121.5 20V12C121.5 9.79086 119.709 8 117.5 8Z",
399
- fill: "currentColor"
400
- }
401
- ), /* @__PURE__ */ React5.createElement(
402
- "path",
403
- {
404
- d: "M71.5 30H4.5C2.29086 30 0.5 31.7909 0.5 34V42C0.5 44.2091 2.29086 46 4.5 46H71.5C73.7091 46 75.5 44.2091 75.5 42V34C75.5 31.7909 73.7091 30 71.5 30Z",
405
- fill: "currentColor"
406
- }
407
- ), /* @__PURE__ */ React5.createElement(
408
- "path",
409
- {
410
- d: "M71.5 52H4.5C2.29086 52 0.5 53.7909 0.5 56V64C0.5 66.2091 2.29086 68 4.5 68H71.5C73.7091 68 75.5 66.2091 75.5 64V56C75.5 53.7909 73.7091 52 71.5 52Z",
411
- fill: "currentColor"
412
- }
413
- )),
414
- /* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement("clipPath", { id: "clip0_7590_15835" }, /* @__PURE__ */ React5.createElement(
415
- "rect",
416
- {
417
- width: "121",
418
- height: "81",
419
- fill: "white",
420
- transform: "translate(0.5)"
421
- }
422
- )))
423
- );
424
- };
425
-
426
- // src/components/FunNoResults/FunNoResults.tsx
427
- var FunNoResults = ({
428
- text,
429
- title,
430
- variant = "default",
431
- actionButton
432
- }) => {
433
- return /* @__PURE__ */ React6.createElement(
434
- Box,
435
- {
436
- display: "flex",
437
- flexDirection: "column",
438
- justifyContent: "center",
439
- alignItems: "center",
440
- gap: variant === "default" ? "12" : "16",
441
- color: "secondaryText",
442
- style: { flex: 1 }
443
- },
444
- variant === "default" && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(SearchSkeletonIcon, null), /* @__PURE__ */ React6.createElement(Text, { color: "secondaryText", size: "10" }, text)),
445
- variant === "actionable" && /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
446
- CoinsIcon,
447
- {
448
- bgColor: themeVars.colors.offBackground,
449
- iconColor: themeVars.colors.actionColor
450
- }
451
- ), /* @__PURE__ */ React6.createElement(
452
- Box,
453
- {
454
- display: "flex",
455
- flexDirection: "column",
456
- alignItems: "center",
457
- gap: "12"
458
- },
459
- /* @__PURE__ */ React6.createElement(
460
- Box,
461
- {
462
- display: "flex",
463
- flexDirection: "column",
464
- alignItems: "center",
465
- textAlign: "center",
466
- gap: "8"
467
- },
468
- title && /* @__PURE__ */ React6.createElement(Text, { size: "14", color: "primaryText" }, title),
469
- /* @__PURE__ */ React6.createElement(Text, { color: "secondaryText", size: "12" }, text)
470
- ),
471
- actionButton && /* @__PURE__ */ React6.createElement(Box, null, actionButton)
472
- ))
473
- );
474
- };
475
-
476
- // src/components/Icons/SwitchIcon.tsx
477
- import React7 from "react";
478
- var SwitchIcon = () => {
479
- return /* @__PURE__ */ React7.createElement(
480
- "svg",
481
- {
482
- width: "15",
483
- height: "14",
484
- viewBox: "0 0 15 14",
485
- fill: "none",
486
- xmlns: "http://www.w3.org/2000/svg"
487
- },
488
- /* @__PURE__ */ React7.createElement(
489
- "path",
490
- {
491
- fillRule: "evenodd",
492
- clipRule: "evenodd",
493
- d: "M0.96967 4.86358C0.676777 4.57069 0.676777 4.09582 0.96967 3.80292L3.63634 1.13626C3.92923 0.843363 4.4041 0.843363 4.697 1.13626L7.36366 3.80292C7.65656 4.09582 7.65656 4.57069 7.36366 4.86358C7.07077 5.15648 6.5959 5.15648 6.303 4.86358L4.91667 3.47725L4.91667 12.3333C4.91667 12.7475 4.58088 13.0833 4.16667 13.0833C3.75245 13.0833 3.41667 12.7475 3.41667 12.3333L3.41667 3.47725L2.03033 4.86358C1.73744 5.15648 1.26256 5.15648 0.96967 4.86358ZM7.63634 9.13626C7.92923 8.84336 8.4041 8.84336 8.697 9.13626L10.0833 10.5226V1.66659C10.0833 1.25237 10.4191 0.916586 10.8333 0.916586C11.2475 0.916586 11.5833 1.25237 11.5833 1.66659V10.5226L12.9697 9.13626C13.2626 8.84336 13.7374 8.84336 14.0303 9.13626C14.3232 9.42915 14.3232 9.90402 14.0303 10.1969L11.3637 12.8636C11.0708 13.1565 10.5959 13.1565 10.303 12.8636L7.63634 10.1969C7.34344 9.90402 7.34344 9.42915 7.63634 9.13626Z",
494
- fill: "currentColor"
495
- }
496
- )
497
- );
498
- };
499
-
500
- // src/providers/FunkitProvider.tsx
501
- var ThemeIdContext = createContext(void 0);
502
- var attr = "data-rk";
503
- var createThemeRootProps = (id) => ({ [attr]: id || "" });
504
- var useThemeRootProps = () => {
505
- const id = useContext(ThemeIdContext);
506
- return createThemeRootProps(id);
507
- };
508
-
509
- // src/components/Dropdown/BaseActiveDropdownItem.tsx
510
- import React9 from "react";
511
-
512
- // src/components/Dropdown/BaseActiveDropdownItem.css.ts
513
- var baseStyles = "BaseActiveDropdownItem_baseStyles__1dewiqw0";
514
-
515
- // src/components/Dropdown/BaseDropdown.css.ts
516
- var BORDER_RADIUS = "dropdown";
517
- var baseDropdownItemWrapperStyles = "BaseDropdown_baseDropdownItemWrapperStyles__1nns6ys3 sprinkles_borderRadius_dropdownItem__1rsrm2f17";
518
- var scrollGradientWrapperStyles = "BaseDropdown_scrollGradientWrapperStyles__1nns6ys1";
519
- var scrollableDropdownStyles = "BaseDropdown_scrollableDropdownStyles__1nns6ys0";
520
-
521
- // src/components/Dropdown/BaseActiveDropdownItem.tsx
522
- function BaseActiveDropdownItem({
523
- iconComponent,
524
- label,
525
- isOpened,
526
- onClick,
527
- horizontalIconGap = "dropdownItemIconGap",
528
- alwaysVisibleLabel,
529
- tagComponent,
530
- tagPosition = "start",
531
- size = "regular",
532
- color = "primaryText",
533
- arrowColor = "secondaryText",
534
- background,
535
- labelStyle,
536
- compactIcon = false
537
- }) {
538
- return /* @__PURE__ */ React9.createElement(
539
- Box,
540
- {
541
- display: "flex",
542
- alignItems: "center",
543
- justifyContent: "space-between",
544
- gap: "6",
545
- cursor: "pointer",
546
- onClick,
547
- background: background ?? {
548
- base: "dropdownActiveItemBackgroundBase",
549
- hover: "dropdownActiveItemBackgroundHover"
550
- },
551
- borderColor: {
552
- base: "dropdownActiveItemBorderBase",
553
- hover: "dropdownActiveItemBorderHover"
554
- },
555
- borderWidth: size === "compact" ? "0" : "1",
556
- borderRadius: BORDER_RADIUS,
557
- borderStyle: "solid",
558
- paddingY: size === "compact" ? "2" : size === "large" ? "10" : "dropdownActiveItemRegularSizePaddingY",
559
- paddingX: size === "compact" ? "4" : size === "large" ? "8" : "dropdownPaddingX",
560
- className: baseStyles
561
- },
562
- /* @__PURE__ */ React9.createElement(
563
- Box,
564
- {
565
- display: "flex",
566
- alignItems: "center",
567
- justifyContent: "space-between",
568
- gap: horizontalIconGap,
569
- style: size === "compact" ? void 0 : { flex: "1 0 auto" }
570
- },
571
- alwaysVisibleLabel && /* @__PURE__ */ React9.createElement(Box, { style: { flex: 1 } }, /* @__PURE__ */ React9.createElement(Text, { color: "secondaryText", size: "12" }, alwaysVisibleLabel)),
572
- /* @__PURE__ */ React9.createElement(
573
- Box,
574
- {
575
- display: "flex",
576
- alignItems: "center",
577
- justifyContent: "space-between",
578
- gap: horizontalIconGap,
579
- background: {
580
- base: "transparent",
581
- hover: "alwaysVisibleLabelBackgroundHover"
582
- },
583
- ...alwaysVisibleLabel ? {} : { style: { flex: 1 } }
584
- },
585
- /* @__PURE__ */ React9.createElement(
586
- Box,
587
- {
588
- display: "flex",
589
- alignItems: "center",
590
- justifyContent: "center",
591
- gap: horizontalIconGap,
592
- ...alwaysVisibleLabel ? { style: { flexDirection: "row-reverse" } } : {}
593
- },
594
- tagPosition === "start" && tagComponent,
595
- /* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", gap: horizontalIconGap }, iconComponent && /* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent), /* @__PURE__ */ React9.createElement(
596
- Text,
597
- {
598
- color,
599
- size: "dropdownItemFontSize",
600
- weight: "medium",
601
- style: labelStyle
602
- },
603
- label
604
- ))
605
- ),
606
- /* @__PURE__ */ React9.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, tagPosition === "end" && tagComponent, /* @__PURE__ */ React9.createElement(
607
- AnimatedCaretDownIcon,
608
- {
609
- expanded: isOpened,
610
- color: arrowColor,
611
- compact: compactIcon
612
- }
613
- ))
614
- )
615
- )
616
- );
617
- }
618
- var BaseActiveDropdownItem_default = BaseActiveDropdownItem;
619
-
620
- // src/components/Dropdown/BaseDropdown.utils.ts
621
- var NO_SELECTION_VALUE = "";
622
- var ADDITIONAL_GROUP_KEY = "__additional__";
623
- function buildAllOptions(options, allowUnselect, unselectLabel) {
624
- if (allowUnselect) {
625
- return [
626
- {
627
- label: unselectLabel ?? "",
628
- value: NO_SELECTION_VALUE
629
- },
630
- ...options
631
- ];
632
- }
633
- return options;
634
- }
635
- function filterOptions(allOptions, searchInput) {
636
- const search = searchInput?.trim().toLowerCase() ?? "";
637
- return allOptions.filter(
638
- (option) => option.label.toLowerCase().includes(search)
639
- );
640
- }
641
- function organizeDropdownGroups(filteredOptions, groups, additionalGroup, additionalGroupLabel) {
642
- const organizedGroups = [];
643
- if (!groups) {
644
- organizedGroups.push({
645
- key: ADDITIONAL_GROUP_KEY,
646
- label: void 0,
647
- options: filteredOptions
648
- });
649
- return {
650
- organizedGroups,
651
- organizedOptions: filteredOptions
652
- };
653
- }
654
- const unselectOption = filteredOptions.find(
655
- (option) => option.value === NO_SELECTION_VALUE
656
- );
657
- if (unselectOption) {
658
- organizedGroups.push({
659
- key: NO_SELECTION_VALUE,
660
- label: void 0,
661
- options: [unselectOption]
662
- });
663
- }
664
- const optionsByValue = new Map(
665
- filteredOptions.filter((option) => option.value !== NO_SELECTION_VALUE).map((option) => [option.value, option])
666
- );
667
- const inflatedGroups = groups.map((group) => ({
668
- ...group,
669
- // Only take the options that actually exist
670
- // Note that this preserves the ordering of `group.values`
671
- options: group.values.map((value) => optionsByValue.get(value)).filter((option) => !!option)
672
- })).filter((group) => group.options.length > 0);
673
- const hasNonEmptyGroup = inflatedGroups.length > 0;
674
- for (const group of inflatedGroups) {
675
- organizedGroups.push({
676
- key: group.key,
677
- label: group.label,
678
- options: group.options
679
- });
680
- if (additionalGroup === "others") {
681
- for (const option of group.options) {
682
- optionsByValue.delete(option.value);
683
- }
684
- }
685
- }
686
- if (optionsByValue.size > 0) {
687
- organizedGroups.push({
688
- key: ADDITIONAL_GROUP_KEY,
689
- // Only show additional group label if there actually are other groups
690
- label: hasNonEmptyGroup ? additionalGroupLabel : void 0,
691
- options: [...optionsByValue.values()]
692
- });
693
- }
694
- const organizedOptions = organizedGroups.flatMap((group) => group.options);
695
- return { organizedGroups, organizedOptions };
696
- }
697
-
698
- // src/components/Dropdown/BaseDropdown.tsx
699
- var HORIZONTAL_ICON_GAP = "4";
700
- var activeDropdownItemSize = {
701
- compact: "18",
702
- regular: "36",
703
- large: "40"
704
- };
705
- function BaseDropdown({
706
- activeItemProps,
707
- value,
708
- options,
709
- groups,
710
- additionalGroup = "others",
711
- additionalGroupLabel,
712
- allowUnselect = false,
713
- unselectLabel,
714
- onOptionSelected,
715
- onOpen,
716
- renderDropdownOption,
717
- searchableOptions = false,
718
- searchPlaceholder,
719
- placeholder,
720
- resetSearchOnClose = true,
721
- openToTopOnMobile = true,
722
- alwaysOpenToTop = false,
723
- openDropdownFullWidth = true,
724
- isLoading = false,
725
- preloadIconUrls,
726
- horizontalIconGap = HORIZONTAL_ICON_GAP,
727
- openDropdownBackgroundColor = "openDropdownBackgroundColor",
728
- size = "regular",
729
- label,
730
- maxDropdownHeight,
731
- dropdownWidth,
732
- dropdownAlign = "end",
733
- testId
734
- }) {
735
- const { t } = useFunkitTranslation();
736
- const themeRootProps = useThemeRootProps();
737
- const isMobileDevice = isMobile();
738
- const [isOpened, setIsOpened] = useState2(false);
739
- const [searchInput, setSearchInput] = useState2("");
740
- const { ref: scrollRef, hasTopDivider, isAtBottom } = useScrollDivider();
741
- const allOptions = useMemo2(
742
- () => buildAllOptions(options, allowUnselect, unselectLabel),
743
- [options, allowUnselect, unselectLabel]
744
- );
745
- const selectedOption = allOptions.find((option) => option.value === value);
746
- const prevIsOpenedRef = useRef2(false);
747
- const portalThemeRef = useRef2(null);
748
- const handleSearch = (event) => {
749
- setSearchInput(event.target.value);
750
- };
751
- const filteredOptions = useMemo2(
752
- () => filterOptions(allOptions, searchInput),
753
- [allOptions, searchInput]
754
- );
755
- const { organizedGroups, organizedOptions } = useMemo2(
756
- () => organizeDropdownGroups(
757
- filteredOptions,
758
- groups,
759
- additionalGroup,
760
- additionalGroupLabel
761
- ),
762
- [additionalGroup, additionalGroupLabel, filteredOptions, groups]
763
- );
764
- const handleOpenChange = useCallback2(
765
- (open) => {
766
- setIsOpened(open);
767
- if (open) {
768
- onOpen?.();
769
- } else {
770
- resetSearchOnClose && setSearchInput("");
771
- }
772
- },
773
- [onOpen, resetSearchOnClose]
774
- );
775
- useEffect3(() => {
776
- if (isOpened && !prevIsOpenedRef.current) {
777
- prevIsOpenedRef.current = true;
778
- if (selectedOption) {
779
- const selectedOptionIndex = organizedOptions.findIndex(
780
- (option) => option.value === selectedOption.value
781
- );
782
- if (selectedOptionIndex !== -1) {
783
- requestAnimationFrame(() => {
784
- const selectedOptionElement = document.getElementById(
785
- `${selectedOption.value}-dropdown-item`
786
- );
787
- selectedOptionElement?.scrollIntoView({
788
- behavior: "instant",
789
- block: "center"
790
- });
791
- });
792
- }
793
- }
794
- } else if (!isOpened) {
795
- prevIsOpenedRef.current = false;
796
- }
797
- }, [isOpened, selectedOption, organizedOptions]);
798
- const dropdownSide = alwaysOpenToTop || openToTopOnMobile && isMobileDevice ? "top" : "bottom";
799
- return /* @__PURE__ */ React10.createElement(Box, { display: "flex", flexDirection: "column", gap: "4", testId }, label && /* @__PURE__ */ React10.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React10.createElement(
800
- DropdownMenu2.Root,
801
- {
802
- open: isOpened,
803
- onOpenChange: handleOpenChange,
804
- modal: false
805
- },
806
- /* @__PURE__ */ React10.createElement(
807
- Box,
808
- {
809
- position: "relative",
810
- display: size === "compact" ? "flex" : void 0
811
- },
812
- isLoading ? /* @__PURE__ */ React10.createElement(FunSkeletonBlock, { height: activeDropdownItemSize[size] }) : /* @__PURE__ */ React10.createElement(DropdownMenu2.Trigger, { asChild: true }, /* @__PURE__ */ React10.createElement("div", null, /* @__PURE__ */ React10.createElement(
813
- BaseActiveDropdownItem_default,
814
- {
815
- color: !selectedOption && !activeItemProps?.label && !!placeholder ? "secondaryText" : "primaryText",
816
- ...activeItemProps,
817
- size,
818
- horizontalIconGap,
819
- isOpened,
820
- label: activeItemProps?.label ?? selectedOption?.label ?? placeholder ?? ""
821
- }
822
- ))),
823
- /* @__PURE__ */ React10.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React10.createElement(
824
- DropdownMenu2.Content,
825
- {
826
- ...themeRootProps,
827
- ref: portalThemeRef,
828
- side: dropdownSide,
829
- sideOffset: dropdownSide === "top" ? 8 : 6,
830
- align: dropdownAlign,
831
- className: "funkit-dropdown-content",
832
- style: {
833
- zIndex: `calc(${themeVars.modalZIndex} + 1)`,
834
- width: dropdownWidth ? `${dropdownWidth}px` : openDropdownFullWidth ? "var(--radix-dropdown-menu-trigger-width)" : void 0,
835
- transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
836
- },
837
- onCloseAutoFocus: (e) => e.preventDefault()
838
- },
839
- /* @__PURE__ */ React10.createElement(TooltipAnchorRefContext.Provider, { value: portalThemeRef }, /* @__PURE__ */ React10.createElement(
840
- Box,
841
- {
842
- background: openDropdownBackgroundColor,
843
- borderColor: "transparent",
844
- borderWidth: "1",
845
- borderRadius: "dropdownList",
846
- borderStyle: "solid",
847
- boxShadow: "dropdown",
848
- className: maxDropdownHeight ? scrollGradientWrapperStyles : void 0,
849
- "data-fade-top": maxDropdownHeight && hasTopDivider ? "true" : "false",
850
- "data-fade-bottom": maxDropdownHeight && !isAtBottom ? "true" : "false"
851
- },
852
- /* @__PURE__ */ React10.createElement(
853
- Box,
854
- {
855
- className: maxDropdownHeight ? scrollableDropdownStyles : void 0,
856
- ref: maxDropdownHeight ? scrollRef : void 0,
857
- style: { maxHeight: maxDropdownHeight }
858
- },
859
- /* @__PURE__ */ React10.createElement(Box, { display: "flex", flexDirection: "column" }, searchableOptions && /* @__PURE__ */ React10.createElement(Box, { paddingTop: "8", paddingX: "8" }, /* @__PURE__ */ React10.createElement(
860
- FunInput,
861
- {
862
- placeholder: searchPlaceholder ?? t("common.searchTokens"),
863
- value: searchInput,
864
- onChange: handleSearch,
865
- prefixIcon: "SearchIcon"
866
- }
867
- )), organizedOptions.length === 0 ? /* @__PURE__ */ React10.createElement(FunNoResults, { text: t("common.noResultsFound") }) : /* @__PURE__ */ React10.createElement(
868
- Box,
869
- {
870
- as: "ul",
871
- display: "flex",
872
- flexDirection: "column",
873
- paddingY: size === "compact" ? "dropdownCompactPaddingY" : "dropdownPaddingY"
874
- },
875
- organizedGroups.map(
876
- ({
877
- key: groupKey,
878
- label: groupLabel,
879
- options: optionsInGroup
880
- }, groupIndex) => /* @__PURE__ */ React10.createElement(React10.Fragment, { key: groupKey }, groupIndex > 0 && /* @__PURE__ */ React10.createElement(
881
- Box,
882
- {
883
- height: "1",
884
- background: "lightStroke",
885
- marginY: "dropdownGroupDividerMarginY"
886
- }
887
- ), groupLabel && /* @__PURE__ */ React10.createElement(
888
- Box,
889
- {
890
- paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
891
- },
892
- /* @__PURE__ */ React10.createElement(
893
- Box,
894
- {
895
- paddingX: "dropdownItemPaddingX",
896
- paddingY: "dropdownItemPaddingY"
897
- },
898
- /* @__PURE__ */ React10.createElement(
899
- Text,
900
- {
901
- color: "dropdownGroupHeader",
902
- font: "dropdownGroupHeader",
903
- size: "dropdownGroupHeader",
904
- weight: "dropdownGroupHeader"
905
- },
906
- groupLabel
907
- )
908
- )
909
- ), optionsInGroup.map((singleOption) => {
910
- const isSelected = singleOption.value === selectedOption?.value;
911
- return /* @__PURE__ */ React10.createElement(
912
- Box,
913
- {
914
- key: singleOption.value,
915
- paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
916
- },
917
- /* @__PURE__ */ React10.createElement(
918
- Box,
919
- {
920
- id: `${singleOption.value}-dropdown-item`,
921
- as: "li",
922
- background: {
923
- base: isSelected ? "selectedDropdownItemBackground" : "transparent",
924
- hover: "offBackground"
925
- },
926
- className: baseDropdownItemWrapperStyles,
927
- onClick: () => {
928
- onOptionSelected?.(singleOption);
929
- }
930
- },
931
- renderDropdownOption(
932
- singleOption,
933
- isSelected
934
- )
935
- )
936
- );
937
- }))
938
- )
939
- ))
940
- )
941
- ))
942
- )),
943
- preloadIconUrls && /* @__PURE__ */ React10.createElement(
944
- Box,
945
- {
946
- display: "none",
947
- "aria-hidden": true,
948
- style: { position: "absolute", top: "-100%", left: "-100%" }
949
- },
950
- preloadIconUrls.map((url, index) => /* @__PURE__ */ React10.createElement("img", { key: `${url}-${index}`, src: url, alt: "" }))
951
- )
952
- )
953
- ));
954
- }
955
- var BaseDropdown_default = BaseDropdown;
956
-
957
- // src/components/Dropdown/AccountSelectDropdown.tsx
958
- var ACCOUNTS_GROUP = "accounts";
959
- var ACTION_GROUP = "action";
960
- function AccountSelectDropdown({
961
- accounts,
962
- selectedValue,
963
- onSelect,
964
- action,
965
- prefixLabel,
966
- label,
967
- size,
968
- dropdownWidth,
969
- testId
970
- }) {
971
- const actionIdCollidesWithAccount = !!action && accounts.some((account) => account.value === action.id);
972
- const actionId = action?.id;
973
- useEffect4(() => {
974
- if (actionIdCollidesWithAccount) {
975
- logger.warn("accountSelectDropdown:actionIdCollidesWithAccountValue", {
976
- actionId
977
- });
978
- }
979
- }, [actionIdCollidesWithAccount, actionId]);
980
- const options = [
981
- ...accounts.map((account) => ({
982
- value: account.value,
983
- label: account.label
984
- })),
985
- ...action ? [{ value: action.id, label: action.label }] : []
986
- ];
987
- const groups = action ? [
988
- {
989
- key: ACCOUNTS_GROUP,
990
- label: "",
991
- values: accounts.map((account) => account.value)
992
- },
993
- { key: ACTION_GROUP, label: "", values: [action.id] }
994
- ] : void 0;
995
- return /* @__PURE__ */ React11.createElement(
996
- BaseDropdown_default,
997
- {
998
- testId,
999
- label,
1000
- size,
1001
- dropdownWidth,
1002
- value: selectedValue,
1003
- options,
1004
- groups,
1005
- activeItemProps: { alwaysVisibleLabel: prefixLabel },
1006
- renderDropdownOption: (option, isSelected) => {
1007
- if (action && option.value === action.id) {
1008
- return /* @__PURE__ */ React11.createElement(
1009
- BaseDropdownItem_default,
1010
- {
1011
- id: option.value,
1012
- label: option.label,
1013
- iconComponent: action.icon && // Render the icon in the theme's primary text colour
1014
- // (the icon uses `currentColor`), matching the label.
1015
- /* @__PURE__ */ React11.createElement(Box, { display: "flex", color: "primaryText" }, action.icon),
1016
- horizontalIconGap: "8",
1017
- onClick: action.onSelect
1018
- }
1019
- );
1020
- }
1021
- const account = accounts.find((item) => item.value === option.value);
1022
- return /* @__PURE__ */ React11.createElement(
1023
- BaseDropdownItem_default,
1024
- {
1025
- id: option.value,
1026
- label: option.label,
1027
- description: account?.description,
1028
- isSelected,
1029
- onClick: onSelect
1030
- }
1031
- );
1032
- }
1033
- }
1034
- );
1035
- }
1036
-
1037
- // src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
1038
- var ACCOUNT_DROPDOWN_OPTIONS_WIDTH = 264;
1039
- var BALANCE_PLACEHOLDER = "\u2014";
1040
- function formatBalance(balanceUsd) {
1041
- return balanceUsd === void 0 ? BALANCE_PLACEHOLDER : formatUsdFlooredToCent(balanceUsd);
1042
- }
1043
- function PolymarketDepositAccountDropdown({
1044
- onStepChange,
1045
- modalState,
1046
- dynamicRoutingId,
1047
- applyDynamicTargetAssetCandidate,
1048
- predictions,
1049
- perps
1050
- }) {
1051
- const { t } = useFunkitTranslation();
1052
- const balances = usePolymarketAccountBalances({ predictions, perps });
1053
- const selectedRoutingId = dynamicRoutingId === POLYMARKET_PERPS_ROUTING_ID ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID;
1054
- const accountCandidate = (routingId, recipient) => ({
1055
- tokenAddress: POLYGON_USDCE,
1056
- tokenChainId: polygon.id.toString(),
1057
- tokenSymbol: PUSD_TOKEN.symbol,
1058
- iconSrc: PUSD_TOKEN.iconSrc,
1059
- dynamicRoutingId: routingId,
1060
- customRecipient: recipient
1061
- });
1062
- const handleSelectAccount = (routingId) => {
1063
- const isPerps = routingId === POLYMARKET_PERPS_ROUTING_ID;
1064
- applyDynamicTargetAssetCandidate?.(
1065
- accountCandidate(
1066
- isPerps ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID,
1067
- isPerps ? perps.address : predictions.address
1068
- )
1069
- );
1070
- };
1071
- return /* @__PURE__ */ React12.createElement(
1072
- AccountSelectDropdown,
1073
- {
1074
- prefixLabel: t("perpsTransfer.depositTo"),
1075
- dropdownWidth: ACCOUNT_DROPDOWN_OPTIONS_WIDTH,
1076
- accounts: [
1077
- {
1078
- value: POLYMARKET_PREDICTIONS_ROUTING_ID,
1079
- label: t("perpsTransfer.predictions"),
1080
- description: formatBalance(balances.predictions.balanceUsd)
1081
- },
1082
- {
1083
- value: POLYMARKET_PERPS_ROUTING_ID,
1084
- label: t("perpsTransfer.perps"),
1085
- description: formatBalance(balances.perps.balanceUsd)
1086
- }
1087
- ],
1088
- selectedValue: selectedRoutingId,
1089
- onSelect: handleSelectAccount,
1090
- action: {
1091
- id: "transfer-between-accounts",
1092
- label: t("perpsTransfer.transferBetweenAccounts"),
1093
- icon: /* @__PURE__ */ React12.createElement(SwitchIcon, null),
1094
- // Navigation is absent on the loading skeleton; the action only fires
1095
- // on the interactive screen. The transfer step reads balances from the
1096
- // same shared cache, so none need to be threaded through here.
1097
- onSelect: () => {
1098
- if (onStepChange && modalState) {
1099
- onStepChange({
1100
- ...modalState,
1101
- step: "perps_transfer" /* PERPS_TRANSFER */
1102
- });
1103
- }
1104
- }
1105
- }
1106
- }
1107
- );
1108
- }
1109
-
1110
- export {
1111
- PolymarketDepositAccountDropdown
1112
- };