@funkit/connect 9.24.0-next.0 → 9.24.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 (109) hide show
  1. package/CHANGELOG.md +24 -4
  2. package/dist/clients/aave.d.ts +9 -0
  3. package/dist/clients/aave.js +4 -1
  4. package/dist/clients/{chunk-4HCOSF4M.js → chunk-7G3QEQFB.js} +2 -2
  5. package/dist/clients/{chunk-7FIVHWNC.js → chunk-7UIDHSYG.js} +47 -0
  6. package/dist/clients/{chunk-UUHGOBKZ.js → chunk-AHYOV7AV.js} +2 -1
  7. package/dist/clients/chunk-JN6WUYT2.js +1110 -0
  8. package/dist/clients/{chunk-S7FRYR55.js → chunk-ME4OAQIY.js} +1 -1
  9. package/dist/clients/{chunk-CEBG7XQ5.js → chunk-MXPZTW2H.js} +212 -1126
  10. package/dist/clients/{chunk-KWIR3HO4.js → chunk-VJZW3MA3.js} +1 -1
  11. package/dist/clients/{chunk-MRBN4XCA.js → chunk-ZEXZQOAO.js} +1 -1
  12. package/dist/clients/fanatics.css +1 -1
  13. package/dist/clients/fanatics.js +4 -6
  14. package/dist/clients/lighter.css +2821 -1
  15. package/dist/clients/lighter.js +44 -28
  16. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.css +217 -217
  17. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.js +7 -8
  18. package/dist/clients/polymarket/createPolymarketDepositConfig.js +3 -3
  19. package/dist/clients/polymarket/index.css +217 -217
  20. package/dist/clients/polymarket/index.js +7 -8
  21. package/dist/clients/polymarket/polymarket.js +2 -2
  22. package/dist/clients/polymarket/usePolymarketAccountBalances.js +2 -2
  23. package/dist/clients/rolly.js +1 -1
  24. package/dist/components/FunTooltip/FunTooltip.d.ts +10 -5
  25. package/dist/components/FunTransactionSummary/DestinationHealthFactorRow.d.ts +15 -0
  26. package/dist/components/FunTransactionSummary/DestinationYieldRows.d.ts +1 -0
  27. package/dist/components/FunTransactionSummary/PaymentMethodSummary.d.ts +8 -1
  28. package/dist/domains/aave.d.ts +14 -9
  29. package/dist/hooks/track/WithdrawModalEvent.d.ts +9 -1
  30. package/dist/index.css +11 -11
  31. package/dist/index.js +4369 -3884
  32. package/dist/modals/WithdrawalModal/LighterWithdrawal.d.ts +25 -4
  33. package/dist/modals/WithdrawalModal/WithdrawAmountInput.d.ts +10 -1
  34. package/dist/modals/WithdrawalModal/WithdrawalContent.d.ts +8 -1
  35. package/dist/modals/WithdrawalModal/WithdrawalSwappedIframeController.d.ts +11 -0
  36. package/dist/modals/WithdrawalModal/types.d.ts +1 -0
  37. package/dist/providers/FunkitCheckoutContext/types.d.ts +26 -12
  38. package/dist/utils/customer.d.ts +6 -0
  39. package/dist/wallets/walletConnectors/bifrostWallet/bifrostWallet.js +2 -2
  40. package/dist/wallets/walletConnectors/bitgetWallet/bitgetWallet.js +2 -2
  41. package/dist/wallets/walletConnectors/bybitWallet/bybitWallet.js +2 -2
  42. package/dist/wallets/walletConnectors/clvWallet/clvWallet.js +2 -2
  43. package/dist/wallets/walletConnectors/coin98Wallet/coin98Wallet.js +2 -2
  44. package/dist/wallets/walletConnectors/coreWallet/coreWallet.js +2 -2
  45. package/dist/wallets/walletConnectors/foxWallet/foxWallet.js +2 -2
  46. package/dist/wallets/walletConnectors/frontierWallet/frontierWallet.js +2 -2
  47. package/dist/wallets/walletConnectors/gateWallet/gateWallet.js +2 -2
  48. package/dist/wallets/walletConnectors/index.js +48 -48
  49. package/dist/wallets/walletConnectors/metaMaskWallet/metaMaskWallet.js +2 -2
  50. package/dist/wallets/walletConnectors/okxWallet/okxWallet.js +2 -2
  51. package/dist/wallets/walletConnectors/rainbowWallet/rainbowWallet.js +2 -2
  52. package/dist/wallets/walletConnectors/roninWallet/roninWallet.js +2 -2
  53. package/dist/wallets/walletConnectors/safepalWallet/safepalWallet.js +2 -2
  54. package/dist/wallets/walletConnectors/subWallet/subWallet.js +2 -2
  55. package/dist/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.js +2 -2
  56. package/dist/wallets/walletConnectors/trustWallet/trustWallet.js +2 -2
  57. package/dist/wallets/walletConnectors/zerionWallet/zerionWallet.js +2 -2
  58. package/package.json +4 -4
  59. package/dist/__generated__/default_configs.d.ts +0 -901
  60. package/dist/__generated__/default_feature_gates.d.ts +0 -20
  61. package/dist/clients/chunk-25ICASD7.js +0 -2371
  62. package/dist/clients/chunk-3GO74QTP.js +0 -2382
  63. package/dist/clients/chunk-7GWX2ZS4.js +0 -69
  64. package/dist/clients/chunk-7HNGV6JU.js +0 -54
  65. package/dist/clients/chunk-A32VN2DX.js +0 -2382
  66. package/dist/clients/chunk-ELLXM7RO.js +0 -186
  67. package/dist/clients/chunk-GGXTLJ7J.js +0 -290
  68. package/dist/clients/chunk-GUWXVR5S.js +0 -186
  69. package/dist/clients/chunk-HRWCNZJA.js +0 -230
  70. package/dist/clients/chunk-JBWB54MX.js +0 -69
  71. package/dist/clients/chunk-JD3FIVZ7.js +0 -69
  72. package/dist/clients/chunk-JTGKAPID.js +0 -2382
  73. package/dist/clients/chunk-L7PABCF2.js +0 -54
  74. package/dist/clients/chunk-LII3SVUH.js +0 -230
  75. package/dist/clients/chunk-NCUPPJ2Z.js +0 -2382
  76. package/dist/clients/chunk-NPPIETHZ.js +0 -54
  77. package/dist/clients/chunk-NUJ6ZM5F.js +0 -186
  78. package/dist/clients/chunk-UVWNEQMD.js +0 -186
  79. package/dist/clients/chunk-VVTNR7YH.js +0 -2382
  80. package/dist/clients/chunk-YYMIRDCQ.js +0 -230
  81. package/dist/clients/chunk-ZNVFASTH.js +0 -54
  82. package/dist/clients/nado.d.ts +0 -78
  83. package/dist/clients/nado.js +0 -107
  84. package/dist/clients/polymarket.d.ts +0 -161
  85. package/dist/clients/polymarket.js +0 -688
  86. package/dist/interfaces/logTransport.d.ts +0 -51
  87. package/dist/interfaces/swapped-transport.d.ts +0 -78
  88. package/dist/modals/CheckoutModal/SourceChange/EmptyFormOfPaymentsMessage.d.ts +0 -4
  89. package/dist/modals/CheckoutModal/SourceChange/useUpdateSourceAssetForCard.d.ts +0 -4
  90. package/dist/modals/CheckoutModal/SwappedIframe/SwappedErrorMessage.d.ts +0 -6
  91. package/dist/utils/flags/resolver.d.ts +0 -34
  92. package/dist/wallets/walletConnectors/chunk-2VP2F6EK.js +0 -70
  93. package/dist/wallets/walletConnectors/chunk-4T6ZSRJF.js +0 -69
  94. package/dist/wallets/walletConnectors/chunk-6BW3HLBG.js +0 -96
  95. package/dist/wallets/walletConnectors/chunk-CCQV2ZET.js +0 -218
  96. package/dist/wallets/walletConnectors/chunk-CPI4TD43.js +0 -99
  97. package/dist/wallets/walletConnectors/chunk-F5XEEVG6.js +0 -98
  98. package/dist/wallets/walletConnectors/chunk-HNRB7KJU.js +0 -92
  99. package/dist/wallets/walletConnectors/chunk-HTHAK6XB.js +0 -93
  100. package/dist/wallets/walletConnectors/chunk-MIQTHJ6X.js +0 -66
  101. package/dist/wallets/walletConnectors/chunk-RB3HR4R2.js +0 -95
  102. package/dist/wallets/walletConnectors/chunk-RVOY537T.js +0 -100
  103. package/dist/wallets/walletConnectors/chunk-STVVP43G.js +0 -94
  104. package/dist/wallets/walletConnectors/chunk-UK7C2JXW.js +0 -87
  105. package/dist/wallets/walletConnectors/chunk-VAPGUPHO.js +0 -92
  106. package/dist/wallets/walletConnectors/chunk-VTM6EECM.js +0 -110
  107. package/dist/wallets/walletConnectors/chunk-X6CGV36L.js +0 -103
  108. package/dist/wallets/walletConnectors/chunk-YEZM4CK4.js +0 -96
  109. package/dist/wallets/walletConnectors/chunk-ZNX4EMPB.js +0 -106
@@ -1,121 +1,208 @@
1
1
  "use client";
2
- import {
3
- usePolymarketAccountBalances
4
- } from "./chunk-MRBN4XCA.js";
5
- import {
6
- Text
7
- } from "./chunk-ZNVFASTH.js";
8
2
  import {
9
3
  Box,
4
+ Text,
10
5
  themeVars,
11
6
  useFunkitTranslation
12
- } from "./chunk-7FIVHWNC.js";
13
- import {
14
- POLYMARKET_PERPS_ROUTING_ID,
15
- POLYMARKET_PREDICTIONS_ROUTING_ID
16
- } from "./chunk-KWIR3HO4.js";
17
- import {
18
- POLYGON_USDCE,
19
- PUSD_TOKEN
20
- } from "./chunk-S7FRYR55.js";
21
- import {
22
- logger
23
- } from "./chunk-UUHGOBKZ.js";
7
+ } from "./chunk-7UIDHSYG.js";
24
8
 
25
- // src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
26
- import React17 from "react";
27
- import { polygon } from "viem/chains";
28
-
29
- // src/components/Dropdown/AccountSelectDropdown.tsx
30
- import React16, { useEffect as useEffect6 } from "react";
31
-
32
- // src/components/Dropdown/BaseDropdown.tsx
33
- import { isMobile } from "@funkit/utils";
34
- import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
35
- import React15, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2, useState as useState5 } from "react";
36
-
37
- // src/hooks/useScrollDivider.ts
38
- import { useCallback, useEffect, useState } from "react";
39
- var useScrollDivider = () => {
40
- const [refElement, setRefElement] = useState(null);
41
- const ref = useCallback((node) => setRefElement(node), []);
42
- const [isTop, setIsTop] = useState(true);
43
- const [isAtBottom, setIsAtBottom] = useState(false);
44
- const [isScrollable, setIsScrollable] = useState(false);
45
- const [isScrolling, setIsScrolling] = useState(false);
46
- useEffect(() => {
47
- const content = refElement;
48
- if (!content || !window.ResizeObserver) {
49
- return;
50
- }
51
- const handleScrollPositionChange = () => {
52
- const { scrollTop, scrollHeight, clientHeight } = content;
53
- setIsTop(scrollTop === 0);
54
- setIsAtBottom(scrollTop + clientHeight >= scrollHeight - 1);
55
- setIsScrollable(scrollHeight > clientHeight + 2);
56
- };
57
- const handleContentChange = () => {
58
- handleScrollPositionChange();
59
- setTimeout(handleScrollPositionChange, 500);
60
- };
61
- const onScrollChange = () => {
62
- handleScrollPositionChange();
63
- setIsScrolling(true);
9
+ // src/providers/FunkitConfigContext.tsx
10
+ import {
11
+ createContext,
12
+ useContext,
13
+ useMemo
14
+ } from "react";
15
+ var DEFAULT_TEXT_CUSTOMIZATIONS = {
16
+ virtualFiat: "Deposit with SEPA",
17
+ brokerageOrExchange: "Connect Exchange",
18
+ debitOrCredit: "Deposit with Card",
19
+ accountBalance: "Wallet",
20
+ selectAccount: "Select an exchange",
21
+ perpsTransferTitle: "Transfer",
22
+ sourceMethodTitle: "Your source",
23
+ tokensListTitle: "Your tokens",
24
+ transferTokens: "Transfer Crypto",
25
+ bitcoinLightning: "Bitcoin on Cash App",
26
+ receiveDropdownTitle: "",
27
+ // Default to empty
28
+ receiveDropdownLabel: "Asset to Receive",
29
+ confirmationScreen: {
30
+ payAmountLabel: "You send",
31
+ receiveAmountLabel: "You receive"
32
+ },
33
+ paymentMethodSubtitles: {}
34
+ };
35
+ var DEFAULT_UI_CUSTOMIZATIONS = {
36
+ alignTitle: "center",
37
+ alwaysShowTopDivider: false,
38
+ showModalTitle: true,
39
+ callToActionsUppercase: false,
40
+ enableCompactList: false,
41
+ checkoutHistory: {
42
+ showGetHelpAsAlert: true,
43
+ simplifiedUi: false
44
+ },
45
+ confirmationScreen: {
46
+ preferDestinationWhenSame: false,
47
+ showAmountSummaryAbovePaymentMethod: false,
48
+ showDisclaimerAsAlert: true,
49
+ showInstantTimeEstimate: false,
50
+ showLeftAlignedDollarValueWithLabel: false,
51
+ showPaymentAmountUsd: false,
52
+ showReceiveAmountUsd: false,
53
+ showSelectedRoute: false,
54
+ stepIndicatorType: "spinner",
55
+ showTokenAmount: true,
56
+ showTransactionDigest: "none"
57
+ },
58
+ sourceChangeScreen: {
59
+ bottomBarCloseButton: {
60
+ enabled: false,
61
+ labelKey: "common.close"
62
+ },
63
+ showTargetAssetSelection: false,
64
+ showWalletOnInsufficientBalance: false,
65
+ showWalletConnect: true,
66
+ showCustomTopComponentDivider: false,
67
+ paymentMethodIcons: {}
68
+ },
69
+ inputAmountScreen: {
70
+ allowTokenAmountInput: true
71
+ },
72
+ selectAssetScreen: {
73
+ isSecondaryTokenSymbolVisible: true,
74
+ navigateOnAssetClick: false
75
+ },
76
+ transferCryptoScreen: {
77
+ showYouSendYouReceive: false
78
+ },
79
+ withdrawalScreen: {},
80
+ selectBrokerageScreen: {},
81
+ connectExchangeScreen: {},
82
+ customIcons: {},
83
+ customFontFamily: {
84
+ primary: "",
85
+ secondary: "",
86
+ tertiary: ""
87
+ }
88
+ };
89
+ var DEFAULT_FUNKIT_CONFIG = {
90
+ apiKey: "",
91
+ appName: "",
92
+ textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
93
+ uiCustomizations: DEFAULT_UI_CUSTOMIZATIONS
94
+ };
95
+ var FunkitConfigContext = createContext(
96
+ DEFAULT_FUNKIT_CONFIG
97
+ );
98
+ function useFunkitConfig() {
99
+ const originalFunkitConfig = useContext(FunkitConfigContext);
100
+ const { t } = useFunkitTranslation();
101
+ const translatedDefaults = useMemo(() => {
102
+ return {
103
+ virtualFiat: t("textCustomizations.virtualFiat"),
104
+ brokerageOrExchange: t("textCustomizations.brokerageOrExchange"),
105
+ debitOrCredit: t("textCustomizations.debitOrCredit"),
106
+ accountBalance: t("textCustomizations.accountBalance"),
107
+ selectAccount: t("textCustomizations.selectAccount"),
108
+ perpsTransferTitle: t("perpsTransfer.title"),
109
+ sourceMethodTitle: t("textCustomizations.sourceMethodTitle"),
110
+ tokensListTitle: t("textCustomizations.tokensListTitle"),
111
+ transferTokens: t("textCustomizations.transferTokens"),
112
+ bitcoinLightning: t("textCustomizations.bitcoinLightning"),
113
+ receiveDropdownTitle: t("textCustomizations.receiveDropdownTitle"),
114
+ receiveDropdownLabel: t("textCustomizations.receiveDropdownLabel"),
115
+ confirmationScreen: {
116
+ payAmountLabel: t("textCustomizations.payAmountLabel"),
117
+ receiveAmountLabel: t("textCustomizations.receiveAmountLabel")
118
+ },
119
+ paymentMethodSubtitles: {}
64
120
  };
65
- const onScrollEnd = () => setIsScrolling(false);
66
- content.addEventListener("scrollend", onScrollEnd);
67
- content.addEventListener("scroll", onScrollChange);
68
- const resizeObserver = new window.ResizeObserver(handleContentChange);
69
- resizeObserver.observe(content);
70
- const mutationObserver = new MutationObserver(handleContentChange);
71
- mutationObserver.observe(content, {
72
- childList: true,
73
- subtree: true,
74
- attributes: true,
75
- attributeFilter: ["style", "class"]
76
- });
77
- handleScrollPositionChange();
78
- return () => {
79
- content.removeEventListener("scroll", onScrollChange);
80
- content.removeEventListener("scrollend", onScrollEnd);
81
- resizeObserver.unobserve(content);
82
- mutationObserver.disconnect();
121
+ }, [t]);
122
+ const finalFunkitConfig = useMemo(() => {
123
+ return {
124
+ ...DEFAULT_FUNKIT_CONFIG,
125
+ ...originalFunkitConfig,
126
+ textCustomizations: {
127
+ ...translatedDefaults,
128
+ ...originalFunkitConfig.textCustomizations,
129
+ confirmationScreen: {
130
+ ...translatedDefaults.confirmationScreen,
131
+ ...originalFunkitConfig.textCustomizations?.confirmationScreen
132
+ },
133
+ paymentMethodSubtitles: {
134
+ ...translatedDefaults.paymentMethodSubtitles,
135
+ ...originalFunkitConfig.textCustomizations?.paymentMethodSubtitles
136
+ }
137
+ },
138
+ uiCustomizations: {
139
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations,
140
+ ...originalFunkitConfig.uiCustomizations,
141
+ checkoutHistory: {
142
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.checkoutHistory,
143
+ ...originalFunkitConfig.uiCustomizations?.checkoutHistory
144
+ },
145
+ confirmationScreen: {
146
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.confirmationScreen,
147
+ ...originalFunkitConfig.uiCustomizations?.confirmationScreen
148
+ },
149
+ connectExchangeScreen: {
150
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.connectExchangeScreen,
151
+ ...originalFunkitConfig.uiCustomizations?.connectExchangeScreen
152
+ },
153
+ inputAmountScreen: {
154
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.inputAmountScreen,
155
+ ...originalFunkitConfig.uiCustomizations?.inputAmountScreen
156
+ },
157
+ selectAssetScreen: {
158
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectAssetScreen,
159
+ ...originalFunkitConfig.uiCustomizations?.selectAssetScreen
160
+ },
161
+ selectBrokerageScreen: {
162
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectBrokerageScreen,
163
+ ...originalFunkitConfig.uiCustomizations?.selectBrokerageScreen
164
+ },
165
+ sourceChangeScreen: {
166
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen,
167
+ ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen,
168
+ bottomBarCloseButton: {
169
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen.bottomBarCloseButton,
170
+ ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen?.bottomBarCloseButton
171
+ }
172
+ },
173
+ transferCryptoScreen: {
174
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.transferCryptoScreen,
175
+ ...originalFunkitConfig.uiCustomizations?.transferCryptoScreen
176
+ },
177
+ withdrawalScreen: {
178
+ ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.withdrawalScreen,
179
+ ...originalFunkitConfig.uiCustomizations?.withdrawalScreen
180
+ }
181
+ }
83
182
  };
84
- }, [refElement]);
85
- return {
86
- ref,
87
- hasTopDivider: !isTop,
88
- hasBottomDivider: isScrollable,
89
- isAtBottom,
90
- isScrolling,
91
- isScrollable
92
- };
93
- };
94
-
95
- // src/providers/FunkitProvider.tsx
96
- import { QueryClientProvider } from "@tanstack/react-query";
97
- import React13, {
98
- createContext as createContext3,
99
- useContext as useContext3,
100
- useEffect as useEffect4,
101
- useMemo,
102
- useRef
103
- } from "react";
183
+ }, [originalFunkitConfig, translatedDefaults]);
184
+ return finalFunkitConfig;
185
+ }
104
186
 
105
187
  // src/components/FunTooltip/FunTooltip.tsx
106
188
  import * as Tooltip from "@radix-ui/react-tooltip";
107
189
  import React, {
108
- createContext,
109
- useContext,
110
- useState as useState2
190
+ createContext as createContext2,
191
+ useContext as useContext2,
192
+ useState
111
193
  } from "react";
112
- var TooltipAnchorRefContext = createContext(null);
194
+ var TooltipAnchorRefContext = createContext2(null);
113
195
 
114
- // src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
115
- import React3 from "react";
196
+ // src/components/FunInput/FunInput.tsx
197
+ import React5, {
198
+ forwardRef,
199
+ useEffect as useEffect2,
200
+ useState as useState3
201
+ } from "react";
202
+ import clsx from "clsx";
116
203
 
117
204
  // src/providers/FunkitThemeProvider.tsx
118
- import React2, { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useState as useState3 } from "react";
205
+ import React2, { createContext as createContext3, useContext as useContext3, useEffect, useState as useState2 } from "react";
119
206
 
120
207
  // src/themes/baseTheme.ts
121
208
  var systemFontStack = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
@@ -985,8 +1072,8 @@ var DEFAULT_THEME_SET = {
985
1072
  darkTheme: darkTheme()
986
1073
  };
987
1074
  var DEFAULT_THEME = DEFAULT_THEME_SET.darkTheme;
988
- var ThemeIdContext = createContext2(void 0);
989
- var ThemeContext = createContext2({
1075
+ var ThemeIdContext = createContext3(void 0);
1076
+ var ThemeContext = createContext3({
990
1077
  activeTheme: DEFAULT_THEME,
991
1078
  lightTheme: void 0,
992
1079
  darkTheme: void 0,
@@ -1006,7 +1093,7 @@ var useActiveTheme = () => {
1006
1093
  darkTheme: darkTheme2,
1007
1094
  toggleTheme,
1008
1095
  themeColorScheme
1009
- } = useContext2(ThemeContext);
1096
+ } = useContext3(ThemeContext);
1010
1097
  return {
1011
1098
  activeTheme,
1012
1099
  /** Overrides the currently active `theme` with disregard to the `theme` provided to the `FunkitProvider`, ie. `toggleTheme` will switch to the `theme` provided to the `FunkitProvider`, not the theme set by `setTheme` */
@@ -1022,6 +1109,9 @@ var useActiveTheme = () => {
1022
1109
  };
1023
1110
  };
1024
1111
 
1112
+ // src/components/FunSkeletonLoader/FunSkeletonBlock.tsx
1113
+ import React3 from "react";
1114
+
1025
1115
  // src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts
1026
1116
  var animateSkeletonClass = "dj0x602 _1rsrm2f15a";
1027
1117
 
@@ -1047,25 +1137,6 @@ function FunSkeletonBlock({
1047
1137
  );
1048
1138
  }
1049
1139
 
1050
- // src/components/FunInput/FunInput.css.ts
1051
- var baseWrapperStyles = "zue0i60";
1052
- var baseWrapperStylesNoTransition = "zue0i61";
1053
- var inputClass = "zue0i64 _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1054
- var inputClassDisabled = "zue0i68 _1rsrm2f2ua _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1055
- var inputClassDisabledNoTransition = "zue0i6a _1rsrm2f2ua _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1056
- var inputClassError = "zue0i6c _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1057
- var inputClassErrorNoTransition = "zue0i6f _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1058
- var inputClassNoTransition = "zue0i66 _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1059
- var numberInputResetStyle = "zue0i62";
1060
-
1061
- // src/components/FunInput/FunInput.tsx
1062
- import React5, {
1063
- forwardRef,
1064
- useEffect as useEffect3,
1065
- useState as useState4
1066
- } from "react";
1067
- import clsx from "clsx";
1068
-
1069
1140
  // src/components/Icons/SearchIcon.tsx
1070
1141
  import React4 from "react";
1071
1142
  var SearchIcon = () => {
@@ -1095,6 +1166,17 @@ var SearchIcon = () => {
1095
1166
  );
1096
1167
  };
1097
1168
 
1169
+ // src/components/FunInput/FunInput.css.ts
1170
+ var baseWrapperStyles = "zue0i60";
1171
+ var baseWrapperStylesNoTransition = "zue0i61";
1172
+ var inputClass = "zue0i64 _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1173
+ var inputClassDisabled = "zue0i68 _1rsrm2f2ua _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1174
+ var inputClassDisabledNoTransition = "zue0i6a _1rsrm2f2ua _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1175
+ var inputClassError = "zue0i6c _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1176
+ var inputClassErrorNoTransition = "zue0i6f _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1177
+ var inputClassNoTransition = "zue0i66 _1rsrm2f2qy _1rsrm2fri _1rsrm2ftj _1rsrm2fvl _1rsrm2fpi";
1178
+ var numberInputResetStyle = "zue0i62";
1179
+
1098
1180
  // src/components/FunInput/FunInput.tsx
1099
1181
  var DEFAULT_ICON_FONT_SIZE = "57px";
1100
1182
  var FunInput = forwardRef(function FunInputWithRef({
@@ -1130,7 +1212,7 @@ var FunInput = forwardRef(function FunInputWithRef({
1130
1212
  testId
1131
1213
  }, ref) {
1132
1214
  const { activeTheme } = useActiveTheme();
1133
- const [focused, setFocused] = useState4(false);
1215
+ const [focused, setFocused] = useState3(false);
1134
1216
  const onFocus = () => {
1135
1217
  setFocused(true);
1136
1218
  userOnFocus?.();
@@ -1157,7 +1239,7 @@ var FunInput = forwardRef(function FunInputWithRef({
1157
1239
  };
1158
1240
  };
1159
1241
  const textareaRef = React5.useRef(null);
1160
- useEffect3(() => {
1242
+ useEffect2(() => {
1161
1243
  if (allowMultiline) {
1162
1244
  adjustTextareaHeight(textareaRef.current);
1163
1245
  }
@@ -1378,1005 +1460,9 @@ var DecimalSpan = ({
1378
1460
  children
1379
1461
  );
1380
1462
 
1381
- // src/utils/tokenMath.ts
1382
- import { formatCurrencyAndStringify } from "@funkit/utils";
1383
- import * as dnum from "dnum";
1384
- import { formatUnits } from "viem";
1385
- function floorToDecimals(value, decimals) {
1386
- const d = dnum.from(value, decimals);
1387
- return dnum.toNumber(d, decimals);
1388
- }
1389
- function formatUsdFlooredToCent(balanceUsd) {
1390
- return formatCurrencyAndStringify(floorToDecimals(balanceUsd, 2));
1391
- }
1392
-
1393
- // src/components/Icons/CheckIcon.tsx
1394
- import React6 from "react";
1395
- var CheckIcon = ({
1396
- size = 16,
1397
- className
1398
- }) => /* @__PURE__ */ React6.createElement(
1399
- "svg",
1400
- {
1401
- width: size,
1402
- height: size,
1403
- viewBox: "0 0 16 16",
1404
- fill: "none",
1405
- xmlns: "http://www.w3.org/2000/svg",
1406
- className
1407
- },
1408
- /* @__PURE__ */ React6.createElement(
1409
- "path",
1410
- {
1411
- d: "M12.4919 4.88281L6.25757 11.1172L3.50781 8",
1412
- stroke: "currentColor",
1413
- strokeWidth: "1.5",
1414
- strokeLinecap: "round",
1415
- strokeLinejoin: "round",
1416
- pathLength: "100"
1417
- }
1418
- )
1419
- );
1420
-
1421
- // src/components/Dropdown/BaseDropdownItem.tsx
1422
- import { noop } from "@funkit/utils";
1423
- import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
1424
- import React7 from "react";
1425
- import clsx2 from "clsx";
1426
-
1427
- // src/components/Dropdown/BaseDropdownItem.css.ts
1428
- var disabledDropdownItemStyles = "_18hhw3k3 _18hhw3k2";
1429
- var enabledDropdownItemStyles = "_18hhw3k1 _18hhw3k0";
1430
-
1431
- // src/components/Dropdown/BaseDropdownItem.tsx
1432
- function BaseDropdownItem({
1433
- iconComponent,
1434
- label,
1435
- description,
1436
- id,
1437
- onClick = noop,
1438
- isSelected = false,
1439
- isDisabled = false,
1440
- borderRadius = "connectButton",
1441
- horizontalIconGap = "dropdownItemIconGap",
1442
- tagComponent,
1443
- horizontalPadding = "dropdownItemPaddingX",
1444
- verticalPadding = "dropdownItemPaddingY"
1445
- }) {
1446
- return /* @__PURE__ */ React7.createElement(
1447
- DropdownMenu.Item,
1448
- {
1449
- disabled: isDisabled,
1450
- onSelect: () => onClick(id),
1451
- asChild: true
1452
- },
1453
- /* @__PURE__ */ React7.createElement(
1454
- Box,
1455
- {
1456
- width: "full",
1457
- display: "flex",
1458
- alignItems: "center",
1459
- justifyContent: "space-between",
1460
- gap: "24",
1461
- paddingY: verticalPadding,
1462
- paddingX: horizontalPadding,
1463
- className: clsx2(
1464
- isDisabled ? disabledDropdownItemStyles : enabledDropdownItemStyles
1465
- ),
1466
- boxShadow: isSelected ? "selectedDropdownItem" : void 0,
1467
- borderRadius
1468
- },
1469
- /* @__PURE__ */ React7.createElement(
1470
- Box,
1471
- {
1472
- display: "flex",
1473
- alignItems: "center",
1474
- justifyContent: "flex-start",
1475
- gap: horizontalIconGap
1476
- },
1477
- iconComponent && /* @__PURE__ */ React7.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
1478
- /* @__PURE__ */ React7.createElement(Box, { display: "flex", flexDirection: "column", justifyContent: "center" }, /* @__PURE__ */ React7.createElement(
1479
- Text,
1480
- {
1481
- size: "dropdownItemFontSize",
1482
- weight: "medium",
1483
- color: isSelected ? "selectedDropdownItemText" : void 0
1484
- },
1485
- label
1486
- ), description != null && /* @__PURE__ */ React7.createElement(Text, { size: "12", color: "secondaryText" }, description))
1487
- ),
1488
- /* @__PURE__ */ React7.createElement(
1489
- Box,
1490
- {
1491
- display: "flex",
1492
- alignItems: "center",
1493
- justifyContent: "center",
1494
- gap: "16"
1495
- },
1496
- tagComponent,
1497
- /* @__PURE__ */ React7.createElement(
1498
- Box,
1499
- {
1500
- width: "16",
1501
- height: "16",
1502
- alignItems: "center",
1503
- justifyContent: "center",
1504
- color: isSelected ? "selectedDropdownItemText" : "transparent"
1505
- },
1506
- /* @__PURE__ */ React7.createElement(CheckIcon, null)
1507
- )
1508
- )
1509
- )
1510
- );
1511
- }
1512
- var BaseDropdownItem_default = BaseDropdownItem;
1513
-
1514
- // src/components/Icons/CaretDownIcon.tsx
1515
- import clsx3 from "clsx";
1516
- import React8 from "react";
1517
-
1518
- // src/components/Icons/CaretDownIcon.css.ts
1519
- var caretClosed = "_1gjdf1i3";
1520
- var caretOpened = "_1gjdf1i2";
1521
-
1522
- // src/components/Icons/CaretDownIcon.tsx
1523
- var CaretDownIcon = () => {
1524
- return /* @__PURE__ */ React8.createElement(
1525
- "svg",
1526
- {
1527
- width: "8",
1528
- height: "5",
1529
- viewBox: "0 0 8 5",
1530
- fill: "none",
1531
- xmlns: "http://www.w3.org/2000/svg"
1532
- },
1533
- /* @__PURE__ */ React8.createElement(
1534
- "path",
1535
- {
1536
- 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",
1537
- fill: "currentColor"
1538
- }
1539
- )
1540
- );
1541
- };
1542
- var AnimatedCaretDownIcon = ({
1543
- expanded,
1544
- color = "primaryText",
1545
- compact = false
1546
- }) => {
1547
- const animationClassName = clsx3(
1548
- expanded !== void 0 && (expanded ? caretOpened : caretClosed)
1549
- );
1550
- if (compact) {
1551
- return /* @__PURE__ */ React8.createElement(
1552
- Box,
1553
- {
1554
- color,
1555
- width: "8",
1556
- height: "8",
1557
- display: "flex",
1558
- alignItems: "center",
1559
- justifyContent: "center",
1560
- className: animationClassName
1561
- },
1562
- /* @__PURE__ */ React8.createElement(CaretDownIcon, null)
1563
- );
1564
- }
1565
- return /* @__PURE__ */ React8.createElement(
1566
- Box,
1567
- {
1568
- color,
1569
- width: "16",
1570
- height: "16",
1571
- display: "flex",
1572
- alignItems: "center",
1573
- justifyContent: "center",
1574
- className: animationClassName
1575
- },
1576
- /* @__PURE__ */ React8.createElement(
1577
- Box,
1578
- {
1579
- width: "8",
1580
- height: "8",
1581
- display: "flex",
1582
- alignItems: "center",
1583
- justifyContent: "center"
1584
- },
1585
- /* @__PURE__ */ React8.createElement(CaretDownIcon, null)
1586
- )
1587
- );
1588
- };
1589
-
1590
- // src/components/FunNoResults/FunNoResults.tsx
1591
- import React11 from "react";
1592
-
1593
- // src/components/Icons/CoinsIcon.tsx
1594
- import React9 from "react";
1595
- var CoinsIcon = ({
1596
- size = 48,
1597
- bgColor = "#141C41",
1598
- iconColor = "#878A98"
1599
- }) => {
1600
- return /* @__PURE__ */ React9.createElement(
1601
- "svg",
1602
- {
1603
- width: size,
1604
- height: size,
1605
- viewBox: "0 0 48 49",
1606
- fill: "none",
1607
- xmlns: "http://www.w3.org/2000/svg"
1608
- },
1609
- /* @__PURE__ */ React9.createElement("g", { clipPath: "url(#clip0_30657_22302)" }, /* @__PURE__ */ React9.createElement(
1610
- "path",
1611
- {
1612
- 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",
1613
- fill: bgColor,
1614
- stroke: bgColor
1615
- }
1616
- ), /* @__PURE__ */ React9.createElement("g", { clipPath: "url(#clip1_30657_22302)" }, /* @__PURE__ */ React9.createElement(
1617
- "path",
1618
- {
1619
- 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",
1620
- stroke: iconColor,
1621
- strokeWidth: "1.5",
1622
- strokeLinecap: "round",
1623
- strokeLinejoin: "round"
1624
- }
1625
- ))),
1626
- /* @__PURE__ */ React9.createElement("defs", null, /* @__PURE__ */ React9.createElement("clipPath", { id: "clip0_30657_22302" }, /* @__PURE__ */ React9.createElement(
1627
- "rect",
1628
- {
1629
- width: "48",
1630
- height: "48",
1631
- fill: "white",
1632
- transform: "translate(0 0.5)"
1633
- }
1634
- )), /* @__PURE__ */ React9.createElement("clipPath", { id: "clip1_30657_22302" }, /* @__PURE__ */ React9.createElement(
1635
- "rect",
1636
- {
1637
- width: "24",
1638
- height: "24",
1639
- fill: "white",
1640
- transform: "translate(12 12)"
1641
- }
1642
- )))
1643
- );
1644
- };
1645
-
1646
- // src/components/Icons/SearchSkeletonIcon.tsx
1647
- import React10 from "react";
1648
- var SearchSkeletonIcon = () => {
1649
- return /* @__PURE__ */ React10.createElement(
1650
- "svg",
1651
- {
1652
- width: "122",
1653
- height: "81",
1654
- viewBox: "0 0 122 81",
1655
- fill: "none",
1656
- xmlns: "http://www.w3.org/2000/svg"
1657
- },
1658
- /* @__PURE__ */ React10.createElement("g", { clipPath: "url(#clip0_7590_15835)" }, /* @__PURE__ */ React10.createElement(
1659
- "path",
1660
- {
1661
- fillRule: "evenodd",
1662
- clipRule: "evenodd",
1663
- 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",
1664
- fill: "currentColor"
1665
- }
1666
- ), /* @__PURE__ */ React10.createElement(
1667
- "path",
1668
- {
1669
- 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",
1670
- fill: "currentColor"
1671
- }
1672
- ), /* @__PURE__ */ React10.createElement(
1673
- "path",
1674
- {
1675
- 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",
1676
- fill: "currentColor"
1677
- }
1678
- ), /* @__PURE__ */ React10.createElement(
1679
- "path",
1680
- {
1681
- 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",
1682
- fill: "currentColor"
1683
- }
1684
- )),
1685
- /* @__PURE__ */ React10.createElement("defs", null, /* @__PURE__ */ React10.createElement("clipPath", { id: "clip0_7590_15835" }, /* @__PURE__ */ React10.createElement(
1686
- "rect",
1687
- {
1688
- width: "121",
1689
- height: "81",
1690
- fill: "white",
1691
- transform: "translate(0.5)"
1692
- }
1693
- )))
1694
- );
1695
- };
1696
-
1697
- // src/components/FunNoResults/FunNoResults.tsx
1698
- var FunNoResults = ({
1699
- text,
1700
- title,
1701
- variant = "default",
1702
- actionButton
1703
- }) => {
1704
- return /* @__PURE__ */ React11.createElement(
1705
- Box,
1706
- {
1707
- display: "flex",
1708
- flexDirection: "column",
1709
- justifyContent: "center",
1710
- alignItems: "center",
1711
- gap: variant === "default" ? "12" : "16",
1712
- color: "secondaryText",
1713
- style: { flex: 1 }
1714
- },
1715
- variant === "default" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(SearchSkeletonIcon, null), /* @__PURE__ */ React11.createElement(Text, { color: "secondaryText", size: "10" }, text)),
1716
- variant === "actionable" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
1717
- CoinsIcon,
1718
- {
1719
- bgColor: themeVars.colors.offBackground,
1720
- iconColor: themeVars.colors.actionColor
1721
- }
1722
- ), /* @__PURE__ */ React11.createElement(
1723
- Box,
1724
- {
1725
- display: "flex",
1726
- flexDirection: "column",
1727
- alignItems: "center",
1728
- gap: "12"
1729
- },
1730
- /* @__PURE__ */ React11.createElement(
1731
- Box,
1732
- {
1733
- display: "flex",
1734
- flexDirection: "column",
1735
- alignItems: "center",
1736
- textAlign: "center",
1737
- gap: "8"
1738
- },
1739
- title && /* @__PURE__ */ React11.createElement(Text, { size: "14", color: "primaryText" }, title),
1740
- /* @__PURE__ */ React11.createElement(Text, { color: "secondaryText", size: "12" }, text)
1741
- ),
1742
- actionButton && /* @__PURE__ */ React11.createElement(Box, null, actionButton)
1743
- ))
1744
- );
1745
- };
1746
-
1747
- // src/components/Icons/SwitchIcon.tsx
1748
- import React12 from "react";
1749
- var SwitchIcon = () => {
1750
- return /* @__PURE__ */ React12.createElement(
1751
- "svg",
1752
- {
1753
- width: "15",
1754
- height: "14",
1755
- viewBox: "0 0 15 14",
1756
- fill: "none",
1757
- xmlns: "http://www.w3.org/2000/svg"
1758
- },
1759
- /* @__PURE__ */ React12.createElement(
1760
- "path",
1761
- {
1762
- fillRule: "evenodd",
1763
- clipRule: "evenodd",
1764
- 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",
1765
- fill: "currentColor"
1766
- }
1767
- )
1768
- );
1769
- };
1770
-
1771
- // src/providers/FunkitProvider.tsx
1772
- var ThemeIdContext2 = createContext3(void 0);
1773
- var attr = "data-rk";
1774
- var createThemeRootProps = (id) => ({ [attr]: id || "" });
1775
- var useThemeRootProps = () => {
1776
- const id = useContext3(ThemeIdContext2);
1777
- return createThemeRootProps(id);
1778
- };
1779
-
1780
- // src/components/Dropdown/BaseActiveDropdownItem.tsx
1781
- import React14 from "react";
1782
-
1783
- // src/components/Dropdown/BaseActiveDropdownItem.css.ts
1784
- var baseStyles = "_1dewiqw0";
1785
-
1786
- // src/components/Dropdown/BaseDropdown.css.ts
1787
- var BORDER_RADIUS = "dropdown";
1788
- var baseDropdownItemWrapperStyles = "_1nns6ys3 _1rsrm2f17";
1789
- var scrollGradientWrapperStyles = "_1nns6ys1";
1790
- var scrollableDropdownStyles = "_1nns6ys0";
1791
-
1792
- // src/components/Dropdown/BaseActiveDropdownItem.tsx
1793
- function BaseActiveDropdownItem({
1794
- iconComponent,
1795
- label,
1796
- isOpened,
1797
- onClick,
1798
- horizontalIconGap = "dropdownItemIconGap",
1799
- alwaysVisibleLabel,
1800
- tagComponent,
1801
- tagPosition = "start",
1802
- size = "regular",
1803
- color = "primaryText",
1804
- arrowColor = "secondaryText",
1805
- background,
1806
- labelStyle,
1807
- compactIcon = false
1808
- }) {
1809
- return /* @__PURE__ */ React14.createElement(
1810
- Box,
1811
- {
1812
- display: "flex",
1813
- alignItems: "center",
1814
- justifyContent: "space-between",
1815
- gap: "6",
1816
- cursor: "pointer",
1817
- onClick,
1818
- background: background ?? {
1819
- base: "dropdownActiveItemBackgroundBase",
1820
- hover: "dropdownActiveItemBackgroundHover"
1821
- },
1822
- borderColor: {
1823
- base: "dropdownActiveItemBorderBase",
1824
- hover: "dropdownActiveItemBorderHover"
1825
- },
1826
- borderWidth: size === "compact" ? "0" : "1",
1827
- borderRadius: BORDER_RADIUS,
1828
- borderStyle: "solid",
1829
- paddingY: size === "compact" ? "2" : size === "large" ? "10" : "dropdownActiveItemRegularSizePaddingY",
1830
- paddingX: size === "compact" ? "4" : size === "large" ? "8" : "dropdownPaddingX",
1831
- className: baseStyles
1832
- },
1833
- /* @__PURE__ */ React14.createElement(
1834
- Box,
1835
- {
1836
- display: "flex",
1837
- alignItems: "center",
1838
- justifyContent: "space-between",
1839
- gap: horizontalIconGap,
1840
- style: size === "compact" ? void 0 : { flex: "1 0 auto" }
1841
- },
1842
- alwaysVisibleLabel && /* @__PURE__ */ React14.createElement(Box, { style: { flex: 1 } }, /* @__PURE__ */ React14.createElement(Text, { color: "secondaryText", size: "12" }, alwaysVisibleLabel)),
1843
- /* @__PURE__ */ React14.createElement(
1844
- Box,
1845
- {
1846
- display: "flex",
1847
- alignItems: "center",
1848
- justifyContent: "space-between",
1849
- gap: horizontalIconGap,
1850
- background: {
1851
- base: "transparent",
1852
- hover: "alwaysVisibleLabelBackgroundHover"
1853
- },
1854
- ...alwaysVisibleLabel ? {} : { style: { flex: 1 } }
1855
- },
1856
- /* @__PURE__ */ React14.createElement(
1857
- Box,
1858
- {
1859
- display: "flex",
1860
- alignItems: "center",
1861
- justifyContent: "center",
1862
- gap: horizontalIconGap,
1863
- ...alwaysVisibleLabel ? { style: { flexDirection: "row-reverse" } } : {}
1864
- },
1865
- tagPosition === "start" && tagComponent,
1866
- /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", gap: horizontalIconGap }, iconComponent && /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent), /* @__PURE__ */ React14.createElement(
1867
- Text,
1868
- {
1869
- color,
1870
- size: "dropdownItemFontSize",
1871
- weight: "medium",
1872
- style: labelStyle
1873
- },
1874
- label
1875
- ))
1876
- ),
1877
- /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, tagPosition === "end" && tagComponent, /* @__PURE__ */ React14.createElement(
1878
- AnimatedCaretDownIcon,
1879
- {
1880
- expanded: isOpened,
1881
- color: arrowColor,
1882
- compact: compactIcon
1883
- }
1884
- ))
1885
- )
1886
- )
1887
- );
1888
- }
1889
- var BaseActiveDropdownItem_default = BaseActiveDropdownItem;
1890
-
1891
- // src/components/Dropdown/BaseDropdown.utils.ts
1892
- var NO_SELECTION_VALUE = "";
1893
- var ADDITIONAL_GROUP_KEY = "__additional__";
1894
- function buildAllOptions(options, allowUnselect, unselectLabel) {
1895
- if (allowUnselect) {
1896
- return [
1897
- {
1898
- label: unselectLabel ?? "",
1899
- value: NO_SELECTION_VALUE
1900
- },
1901
- ...options
1902
- ];
1903
- }
1904
- return options;
1905
- }
1906
- function filterOptions(allOptions, searchInput) {
1907
- const search = searchInput?.trim().toLowerCase() ?? "";
1908
- return allOptions.filter(
1909
- (option) => option.label.toLowerCase().includes(search)
1910
- );
1911
- }
1912
- function organizeDropdownGroups(filteredOptions, groups, additionalGroup, additionalGroupLabel) {
1913
- const organizedGroups = [];
1914
- if (!groups) {
1915
- organizedGroups.push({
1916
- key: ADDITIONAL_GROUP_KEY,
1917
- label: void 0,
1918
- options: filteredOptions
1919
- });
1920
- return {
1921
- organizedGroups,
1922
- organizedOptions: filteredOptions
1923
- };
1924
- }
1925
- const unselectOption = filteredOptions.find(
1926
- (option) => option.value === NO_SELECTION_VALUE
1927
- );
1928
- if (unselectOption) {
1929
- organizedGroups.push({
1930
- key: NO_SELECTION_VALUE,
1931
- label: void 0,
1932
- options: [unselectOption]
1933
- });
1934
- }
1935
- const optionsByValue = new Map(
1936
- filteredOptions.filter((option) => option.value !== NO_SELECTION_VALUE).map((option) => [option.value, option])
1937
- );
1938
- const inflatedGroups = groups.map((group) => ({
1939
- ...group,
1940
- // Only take the options that actually exist
1941
- // Note that this preserves the ordering of `group.values`
1942
- options: group.values.map((value) => optionsByValue.get(value)).filter((option) => !!option)
1943
- })).filter((group) => group.options.length > 0);
1944
- const hasNonEmptyGroup = inflatedGroups.length > 0;
1945
- for (const group of inflatedGroups) {
1946
- organizedGroups.push({
1947
- key: group.key,
1948
- label: group.label,
1949
- options: group.options
1950
- });
1951
- if (additionalGroup === "others") {
1952
- for (const option of group.options) {
1953
- optionsByValue.delete(option.value);
1954
- }
1955
- }
1956
- }
1957
- if (optionsByValue.size > 0) {
1958
- organizedGroups.push({
1959
- key: ADDITIONAL_GROUP_KEY,
1960
- // Only show additional group label if there actually are other groups
1961
- label: hasNonEmptyGroup ? additionalGroupLabel : void 0,
1962
- options: [...optionsByValue.values()]
1963
- });
1964
- }
1965
- const organizedOptions = organizedGroups.flatMap((group) => group.options);
1966
- return { organizedGroups, organizedOptions };
1967
- }
1968
-
1969
- // src/components/Dropdown/BaseDropdown.tsx
1970
- var HORIZONTAL_ICON_GAP = "4";
1971
- var activeDropdownItemSize = {
1972
- compact: "18",
1973
- regular: "36",
1974
- large: "40"
1975
- };
1976
- function BaseDropdown({
1977
- activeItemProps,
1978
- value,
1979
- options,
1980
- groups,
1981
- additionalGroup = "others",
1982
- additionalGroupLabel,
1983
- allowUnselect = false,
1984
- unselectLabel,
1985
- onOptionSelected,
1986
- onOpen,
1987
- renderDropdownOption,
1988
- searchableOptions = false,
1989
- searchPlaceholder,
1990
- placeholder,
1991
- resetSearchOnClose = true,
1992
- openToTopOnMobile = true,
1993
- alwaysOpenToTop = false,
1994
- openDropdownFullWidth = true,
1995
- isLoading = false,
1996
- preloadIconUrls,
1997
- horizontalIconGap = HORIZONTAL_ICON_GAP,
1998
- openDropdownBackgroundColor = "openDropdownBackgroundColor",
1999
- size = "regular",
2000
- label,
2001
- maxDropdownHeight,
2002
- dropdownWidth,
2003
- dropdownAlign = "end",
2004
- testId
2005
- }) {
2006
- const { t } = useFunkitTranslation();
2007
- const themeRootProps = useThemeRootProps();
2008
- const isMobileDevice = isMobile();
2009
- const [isOpened, setIsOpened] = useState5(false);
2010
- const [searchInput, setSearchInput] = useState5("");
2011
- const { ref: scrollRef, hasTopDivider, isAtBottom } = useScrollDivider();
2012
- const allOptions = useMemo2(
2013
- () => buildAllOptions(options, allowUnselect, unselectLabel),
2014
- [options, allowUnselect, unselectLabel]
2015
- );
2016
- const selectedOption = allOptions.find((option) => option.value === value);
2017
- const prevIsOpenedRef = useRef2(false);
2018
- const portalThemeRef = useRef2(null);
2019
- const handleSearch = (event) => {
2020
- setSearchInput(event.target.value);
2021
- };
2022
- const filteredOptions = useMemo2(
2023
- () => filterOptions(allOptions, searchInput),
2024
- [allOptions, searchInput]
2025
- );
2026
- const { organizedGroups, organizedOptions } = useMemo2(
2027
- () => organizeDropdownGroups(
2028
- filteredOptions,
2029
- groups,
2030
- additionalGroup,
2031
- additionalGroupLabel
2032
- ),
2033
- [additionalGroup, additionalGroupLabel, filteredOptions, groups]
2034
- );
2035
- const handleOpenChange = useCallback2(
2036
- (open) => {
2037
- setIsOpened(open);
2038
- if (open) {
2039
- onOpen?.();
2040
- } else {
2041
- resetSearchOnClose && setSearchInput("");
2042
- }
2043
- },
2044
- [onOpen, resetSearchOnClose]
2045
- );
2046
- useEffect5(() => {
2047
- if (isOpened && !prevIsOpenedRef.current) {
2048
- prevIsOpenedRef.current = true;
2049
- if (selectedOption) {
2050
- const selectedOptionIndex = organizedOptions.findIndex(
2051
- (option) => option.value === selectedOption.value
2052
- );
2053
- if (selectedOptionIndex !== -1) {
2054
- requestAnimationFrame(() => {
2055
- const selectedOptionElement = document.getElementById(
2056
- `${selectedOption.value}-dropdown-item`
2057
- );
2058
- selectedOptionElement?.scrollIntoView({
2059
- behavior: "instant",
2060
- block: "center"
2061
- });
2062
- });
2063
- }
2064
- }
2065
- } else if (!isOpened) {
2066
- prevIsOpenedRef.current = false;
2067
- }
2068
- }, [isOpened, selectedOption, organizedOptions]);
2069
- const dropdownSide = alwaysOpenToTop || openToTopOnMobile && isMobileDevice ? "top" : "bottom";
2070
- return /* @__PURE__ */ React15.createElement(Box, { display: "flex", flexDirection: "column", gap: "4", testId }, label && /* @__PURE__ */ React15.createElement(Text, { size: "12", color: "secondaryText" }, label), /* @__PURE__ */ React15.createElement(
2071
- DropdownMenu2.Root,
2072
- {
2073
- open: isOpened,
2074
- onOpenChange: handleOpenChange,
2075
- modal: false
2076
- },
2077
- /* @__PURE__ */ React15.createElement(
2078
- Box,
2079
- {
2080
- position: "relative",
2081
- display: size === "compact" ? "flex" : void 0
2082
- },
2083
- isLoading ? /* @__PURE__ */ React15.createElement(FunSkeletonBlock, { height: activeDropdownItemSize[size] }) : /* @__PURE__ */ React15.createElement(DropdownMenu2.Trigger, { asChild: true }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
2084
- BaseActiveDropdownItem_default,
2085
- {
2086
- ...activeItemProps,
2087
- size,
2088
- horizontalIconGap,
2089
- isOpened,
2090
- label: activeItemProps?.label ?? selectedOption?.label ?? placeholder ?? ""
2091
- }
2092
- ))),
2093
- /* @__PURE__ */ React15.createElement(DropdownMenu2.Portal, null, /* @__PURE__ */ React15.createElement(
2094
- DropdownMenu2.Content,
2095
- {
2096
- ...themeRootProps,
2097
- ref: portalThemeRef,
2098
- side: dropdownSide,
2099
- sideOffset: dropdownSide === "top" ? 8 : 6,
2100
- align: dropdownAlign,
2101
- className: "funkit-dropdown-content",
2102
- style: {
2103
- zIndex: `calc(${themeVars.modalZIndex} + 1)`,
2104
- width: dropdownWidth ? `${dropdownWidth}px` : openDropdownFullWidth ? "var(--radix-dropdown-menu-trigger-width)" : void 0,
2105
- transformOrigin: "var(--radix-dropdown-menu-content-transform-origin)"
2106
- },
2107
- onCloseAutoFocus: (e) => e.preventDefault()
2108
- },
2109
- /* @__PURE__ */ React15.createElement(TooltipAnchorRefContext.Provider, { value: portalThemeRef }, /* @__PURE__ */ React15.createElement(
2110
- Box,
2111
- {
2112
- background: openDropdownBackgroundColor,
2113
- borderColor: "transparent",
2114
- borderWidth: "1",
2115
- borderRadius: "dropdownList",
2116
- borderStyle: "solid",
2117
- boxShadow: "dropdown",
2118
- className: maxDropdownHeight ? scrollGradientWrapperStyles : void 0,
2119
- "data-fade-top": maxDropdownHeight && hasTopDivider ? "true" : "false",
2120
- "data-fade-bottom": maxDropdownHeight && !isAtBottom ? "true" : "false"
2121
- },
2122
- /* @__PURE__ */ React15.createElement(
2123
- Box,
2124
- {
2125
- className: maxDropdownHeight ? scrollableDropdownStyles : void 0,
2126
- ref: maxDropdownHeight ? scrollRef : void 0,
2127
- style: { maxHeight: maxDropdownHeight }
2128
- },
2129
- /* @__PURE__ */ React15.createElement(Box, { display: "flex", flexDirection: "column" }, searchableOptions && /* @__PURE__ */ React15.createElement(Box, { paddingTop: "8", paddingX: "8" }, /* @__PURE__ */ React15.createElement(
2130
- FunInput,
2131
- {
2132
- placeholder: searchPlaceholder ?? t("common.searchTokens"),
2133
- value: searchInput,
2134
- onChange: handleSearch,
2135
- prefixIcon: "SearchIcon"
2136
- }
2137
- )), organizedOptions.length === 0 ? /* @__PURE__ */ React15.createElement(FunNoResults, { text: t("common.noResultsFound") }) : /* @__PURE__ */ React15.createElement(
2138
- Box,
2139
- {
2140
- as: "ul",
2141
- display: "flex",
2142
- flexDirection: "column",
2143
- paddingY: size === "compact" ? "dropdownCompactPaddingY" : "dropdownPaddingY"
2144
- },
2145
- organizedGroups.map(
2146
- ({
2147
- key: groupKey,
2148
- label: groupLabel,
2149
- options: optionsInGroup
2150
- }, groupIndex) => /* @__PURE__ */ React15.createElement(React15.Fragment, { key: groupKey }, groupIndex > 0 && /* @__PURE__ */ React15.createElement(
2151
- Box,
2152
- {
2153
- height: "1",
2154
- background: "lightStroke",
2155
- marginY: "dropdownGroupDividerMarginY"
2156
- }
2157
- ), groupLabel && /* @__PURE__ */ React15.createElement(
2158
- Box,
2159
- {
2160
- paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
2161
- },
2162
- /* @__PURE__ */ React15.createElement(
2163
- Box,
2164
- {
2165
- paddingX: "dropdownItemPaddingX",
2166
- paddingY: "dropdownItemPaddingY"
2167
- },
2168
- /* @__PURE__ */ React15.createElement(
2169
- Text,
2170
- {
2171
- color: "dropdownGroupHeader",
2172
- font: "dropdownGroupHeader",
2173
- size: "dropdownGroupHeader",
2174
- weight: "dropdownGroupHeader"
2175
- },
2176
- groupLabel
2177
- )
2178
- )
2179
- ), optionsInGroup.map((singleOption) => {
2180
- const isSelected = singleOption.value === selectedOption?.value;
2181
- return /* @__PURE__ */ React15.createElement(
2182
- Box,
2183
- {
2184
- key: singleOption.value,
2185
- paddingX: size === "compact" ? "dropdownCompactPaddingX" : "dropdownPaddingX"
2186
- },
2187
- /* @__PURE__ */ React15.createElement(
2188
- Box,
2189
- {
2190
- id: `${singleOption.value}-dropdown-item`,
2191
- as: "li",
2192
- background: {
2193
- base: isSelected ? "selectedDropdownItemBackground" : "transparent",
2194
- hover: "offBackground"
2195
- },
2196
- className: baseDropdownItemWrapperStyles,
2197
- onClick: () => {
2198
- onOptionSelected?.(singleOption);
2199
- }
2200
- },
2201
- renderDropdownOption(
2202
- singleOption,
2203
- isSelected
2204
- )
2205
- )
2206
- );
2207
- }))
2208
- )
2209
- ))
2210
- )
2211
- ))
2212
- )),
2213
- preloadIconUrls && /* @__PURE__ */ React15.createElement(
2214
- Box,
2215
- {
2216
- display: "none",
2217
- "aria-hidden": true,
2218
- style: { position: "absolute", top: "-100%", left: "-100%" }
2219
- },
2220
- preloadIconUrls.map((url, index) => /* @__PURE__ */ React15.createElement("img", { key: `${url}-${index}`, src: url, alt: "" }))
2221
- )
2222
- )
2223
- ));
2224
- }
2225
- var BaseDropdown_default = BaseDropdown;
2226
-
2227
- // src/components/Dropdown/AccountSelectDropdown.tsx
2228
- var ACCOUNTS_GROUP = "accounts";
2229
- var ACTION_GROUP = "action";
2230
- function AccountSelectDropdown({
2231
- accounts,
2232
- selectedValue,
2233
- onSelect,
2234
- action,
2235
- prefixLabel,
2236
- label,
2237
- size,
2238
- dropdownWidth,
2239
- testId
2240
- }) {
2241
- const actionIdCollidesWithAccount = !!action && accounts.some((account) => account.value === action.id);
2242
- const actionId = action?.id;
2243
- useEffect6(() => {
2244
- if (actionIdCollidesWithAccount) {
2245
- logger.warn("accountSelectDropdown:actionIdCollidesWithAccountValue", {
2246
- actionId
2247
- });
2248
- }
2249
- }, [actionIdCollidesWithAccount, actionId]);
2250
- const options = [
2251
- ...accounts.map((account) => ({
2252
- value: account.value,
2253
- label: account.label
2254
- })),
2255
- ...action ? [{ value: action.id, label: action.label }] : []
2256
- ];
2257
- const groups = action ? [
2258
- {
2259
- key: ACCOUNTS_GROUP,
2260
- label: "",
2261
- values: accounts.map((account) => account.value)
2262
- },
2263
- { key: ACTION_GROUP, label: "", values: [action.id] }
2264
- ] : void 0;
2265
- return /* @__PURE__ */ React16.createElement(
2266
- BaseDropdown_default,
2267
- {
2268
- testId,
2269
- label,
2270
- size,
2271
- dropdownWidth,
2272
- value: selectedValue,
2273
- options,
2274
- groups,
2275
- activeItemProps: { alwaysVisibleLabel: prefixLabel },
2276
- renderDropdownOption: (option, isSelected) => {
2277
- if (action && option.value === action.id) {
2278
- return /* @__PURE__ */ React16.createElement(
2279
- BaseDropdownItem_default,
2280
- {
2281
- id: option.value,
2282
- label: option.label,
2283
- iconComponent: action.icon && // Render the icon in the theme's primary text colour
2284
- // (the icon uses `currentColor`), matching the label.
2285
- /* @__PURE__ */ React16.createElement(Box, { display: "flex", color: "primaryText" }, action.icon),
2286
- horizontalIconGap: "8",
2287
- onClick: action.onSelect
2288
- }
2289
- );
2290
- }
2291
- const account = accounts.find((item) => item.value === option.value);
2292
- return /* @__PURE__ */ React16.createElement(
2293
- BaseDropdownItem_default,
2294
- {
2295
- id: option.value,
2296
- label: option.label,
2297
- description: account?.description,
2298
- isSelected,
2299
- onClick: onSelect
2300
- }
2301
- );
2302
- }
2303
- }
2304
- );
2305
- }
2306
-
2307
- // src/clients/polymarket/PolymarketDepositAccountDropdown.tsx
2308
- var ACCOUNT_DROPDOWN_OPTIONS_WIDTH = 264;
2309
- var BALANCE_PLACEHOLDER = "\u2014";
2310
- function formatBalance(balanceUsd) {
2311
- return balanceUsd === void 0 ? BALANCE_PLACEHOLDER : formatUsdFlooredToCent(balanceUsd);
2312
- }
2313
- function PolymarketDepositAccountDropdown({
2314
- onStepChange,
2315
- modalState,
2316
- dynamicRoutingId,
2317
- applyDynamicTargetAssetCandidate,
2318
- predictions,
2319
- perps
2320
- }) {
2321
- const { t } = useFunkitTranslation();
2322
- const balances = usePolymarketAccountBalances({ predictions, perps });
2323
- const selectedRoutingId = dynamicRoutingId === POLYMARKET_PERPS_ROUTING_ID ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID;
2324
- const accountCandidate = (routingId, recipient) => ({
2325
- tokenAddress: POLYGON_USDCE,
2326
- tokenChainId: polygon.id.toString(),
2327
- tokenSymbol: PUSD_TOKEN.symbol,
2328
- iconSrc: PUSD_TOKEN.iconSrc,
2329
- dynamicRoutingId: routingId,
2330
- customRecipient: recipient
2331
- });
2332
- const handleSelectAccount = (routingId) => {
2333
- const isPerps = routingId === POLYMARKET_PERPS_ROUTING_ID;
2334
- applyDynamicTargetAssetCandidate?.(
2335
- accountCandidate(
2336
- isPerps ? POLYMARKET_PERPS_ROUTING_ID : POLYMARKET_PREDICTIONS_ROUTING_ID,
2337
- isPerps ? perps.address : predictions.address
2338
- )
2339
- );
2340
- };
2341
- return /* @__PURE__ */ React17.createElement(
2342
- AccountSelectDropdown,
2343
- {
2344
- prefixLabel: t("perpsTransfer.depositTo"),
2345
- dropdownWidth: ACCOUNT_DROPDOWN_OPTIONS_WIDTH,
2346
- accounts: [
2347
- {
2348
- value: POLYMARKET_PREDICTIONS_ROUTING_ID,
2349
- label: t("perpsTransfer.predictions"),
2350
- description: formatBalance(balances.predictions.balanceUsd)
2351
- },
2352
- {
2353
- value: POLYMARKET_PERPS_ROUTING_ID,
2354
- label: t("perpsTransfer.perps"),
2355
- description: formatBalance(balances.perps.balanceUsd)
2356
- }
2357
- ],
2358
- selectedValue: selectedRoutingId,
2359
- onSelect: handleSelectAccount,
2360
- action: {
2361
- id: "transfer-between-accounts",
2362
- label: t("perpsTransfer.transferBetweenAccounts"),
2363
- icon: /* @__PURE__ */ React17.createElement(SwitchIcon, null),
2364
- // Navigation is absent on the loading skeleton; the action only fires
2365
- // on the interactive screen. The transfer step reads balances from the
2366
- // same shared cache, so none need to be threaded through here.
2367
- onSelect: () => {
2368
- if (onStepChange && modalState) {
2369
- onStepChange({
2370
- ...modalState,
2371
- step: "perps_transfer" /* PERPS_TRANSFER */
2372
- });
2373
- }
2374
- }
2375
- }
2376
- }
2377
- );
2378
- }
2379
-
2380
1463
  export {
2381
- PolymarketDepositAccountDropdown
1464
+ useFunkitConfig,
1465
+ TooltipAnchorRefContext,
1466
+ FunSkeletonBlock,
1467
+ FunInput
2382
1468
  };