@funkit/connect 9.21.1-next.0 → 9.22.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 (68) hide show
  1. package/CHANGELOG.md +10 -21
  2. package/dist/clients/aave.d.ts +2 -0
  3. package/dist/clients/aave.js +3 -0
  4. package/dist/clients/{chunk-7HNGV6JU.js → chunk-KSSSSWR6.js} +1 -1
  5. package/dist/clients/{chunk-4HCOSF4M.js → chunk-NCCAYPLO.js} +1 -1
  6. package/dist/clients/{chunk-NCUPPJ2Z.js → chunk-OWXKWC7I.js} +8 -8
  7. package/dist/clients/{chunk-NUJ6ZM5F.js → chunk-ZMVXBMON.js} +1 -1
  8. package/dist/clients/fanatics.css +1 -1
  9. package/dist/clients/fanatics.js +3 -3
  10. package/dist/clients/lighter.css +1 -1
  11. package/dist/clients/lighter.js +3 -3
  12. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.css +11 -11
  13. package/dist/clients/polymarket/PolymarketDepositAccountDropdown.js +5 -5
  14. package/dist/clients/polymarket/index.css +11 -11
  15. package/dist/clients/polymarket/index.js +5 -5
  16. package/dist/hooks/useTokenTransferConfig.d.ts +0 -7
  17. package/dist/index.css +11 -11
  18. package/dist/index.js +270 -76
  19. package/dist/modals/CheckoutModal/InputAmount/InputAmountLayout.d.ts +6 -1
  20. package/dist/utils/checkout.d.ts +16 -0
  21. package/dist/utils/tokenTransfer/disabledList.d.ts +14 -1
  22. package/dist/utils/tokenTransfer/types.d.ts +30 -5
  23. package/dist/wallets/walletConnectors/index.js +46 -46
  24. package/package.json +2 -2
  25. package/dist/__generated__/default_configs.d.ts +0 -901
  26. package/dist/__generated__/default_feature_gates.d.ts +0 -20
  27. package/dist/chunk-6K4U3Z4Z.js +0 -375
  28. package/dist/chunk-NBECXHBY.js +0 -249
  29. package/dist/chunk-PFIXC5YK.js +0 -249
  30. package/dist/clients/chunk-25ICASD7.js +0 -2371
  31. package/dist/clients/chunk-7GWX2ZS4.js +0 -69
  32. package/dist/clients/chunk-EGMA6ATZ.js +0 -2371
  33. package/dist/clients/chunk-GGXTLJ7J.js +0 -290
  34. package/dist/clients/chunk-HRWCNZJA.js +0 -230
  35. package/dist/clients/chunk-JTGKAPID.js +0 -2382
  36. package/dist/clients/chunk-L7PABCF2.js +0 -54
  37. package/dist/clients/chunk-OJLDTEKB.js +0 -54
  38. package/dist/clients/chunk-SSSQQ32F.js +0 -186
  39. package/dist/clients/chunk-UVWNEQMD.js +0 -186
  40. package/dist/clients/chunk-YLZ7COFH.js +0 -230
  41. package/dist/clients/chunk-ZEFHAWRH.js +0 -69
  42. package/dist/clients/polymarket.d.ts +0 -161
  43. package/dist/clients/polymarket.js +0 -688
  44. package/dist/interfaces/logTransport.d.ts +0 -51
  45. package/dist/interfaces/swapped-transport.d.ts +0 -78
  46. package/dist/modals/CheckoutModal/SourceChange/EmptyFormOfPaymentsMessage.d.ts +0 -4
  47. package/dist/modals/CheckoutModal/SourceChange/useUpdateSourceAssetForCard.d.ts +0 -4
  48. package/dist/modals/CheckoutModal/SwappedIframe/SwappedErrorMessage.d.ts +0 -6
  49. package/dist/utils/flags/resolver.d.ts +0 -34
  50. package/dist/wallets/walletConnectors/chunk-2VP2F6EK.js +0 -70
  51. package/dist/wallets/walletConnectors/chunk-4T6ZSRJF.js +0 -69
  52. package/dist/wallets/walletConnectors/chunk-6BW3HLBG.js +0 -96
  53. package/dist/wallets/walletConnectors/chunk-CCQV2ZET.js +0 -218
  54. package/dist/wallets/walletConnectors/chunk-CPI4TD43.js +0 -99
  55. package/dist/wallets/walletConnectors/chunk-F5XEEVG6.js +0 -98
  56. package/dist/wallets/walletConnectors/chunk-HNRB7KJU.js +0 -92
  57. package/dist/wallets/walletConnectors/chunk-HTHAK6XB.js +0 -93
  58. package/dist/wallets/walletConnectors/chunk-MIQTHJ6X.js +0 -66
  59. package/dist/wallets/walletConnectors/chunk-RB3HR4R2.js +0 -95
  60. package/dist/wallets/walletConnectors/chunk-RVOY537T.js +0 -100
  61. package/dist/wallets/walletConnectors/chunk-STVVP43G.js +0 -94
  62. package/dist/wallets/walletConnectors/chunk-UK7C2JXW.js +0 -87
  63. package/dist/wallets/walletConnectors/chunk-VAPGUPHO.js +0 -92
  64. package/dist/wallets/walletConnectors/chunk-VTM6EECM.js +0 -110
  65. package/dist/wallets/walletConnectors/chunk-X6CGV36L.js +0 -103
  66. package/dist/wallets/walletConnectors/chunk-YEZM4CK4.js +0 -96
  67. package/dist/wallets/walletConnectors/chunk-ZNX4EMPB.js +0 -106
  68. /package/dist/clients/{chunk-JD3FIVZ7.js → chunk-52NKHZS2.js} +0 -0
@@ -1,54 +0,0 @@
1
- "use client";
2
- import {
3
- Box
4
- } from "./chunk-7GWX2ZS4.js";
5
-
6
- // src/components/Text/Text.tsx
7
- import React from "react";
8
- var Text = React.forwardRef(
9
- ({
10
- as = "div",
11
- children,
12
- className,
13
- color = "primaryText",
14
- display,
15
- font = "body",
16
- id,
17
- size = "16",
18
- style,
19
- tabIndex,
20
- title,
21
- textAlign = "inherit",
22
- textTransform = "none",
23
- weight = "regular",
24
- testId
25
- }, ref) => {
26
- return /* @__PURE__ */ React.createElement(
27
- Box,
28
- {
29
- as,
30
- className,
31
- color: color === "inherit" ? void 0 : color,
32
- display,
33
- fontFamily: font,
34
- fontSize: size,
35
- fontWeight: weight,
36
- id,
37
- title,
38
- ref,
39
- style,
40
- tabIndex,
41
- textAlign,
42
- textTransform,
43
- testId,
44
- background: { selection: "textSelection" }
45
- },
46
- children
47
- );
48
- }
49
- );
50
- Text.displayName = "Text";
51
-
52
- export {
53
- Text
54
- };
@@ -1,54 +0,0 @@
1
- "use client";
2
- import {
3
- Box
4
- } from "./chunk-ZEFHAWRH.js";
5
-
6
- // src/components/Text/Text.tsx
7
- import React from "react";
8
- var Text = React.forwardRef(
9
- ({
10
- as = "div",
11
- children,
12
- className,
13
- color = "primaryText",
14
- display,
15
- font = "body",
16
- id,
17
- size = "16",
18
- style,
19
- tabIndex,
20
- title,
21
- textAlign = "inherit",
22
- textTransform = "none",
23
- weight = "regular",
24
- testId
25
- }, ref) => {
26
- return /* @__PURE__ */ React.createElement(
27
- Box,
28
- {
29
- as,
30
- className,
31
- color: color === "inherit" ? void 0 : color,
32
- display,
33
- fontFamily: font,
34
- fontSize: size,
35
- fontWeight: weight,
36
- id,
37
- title,
38
- ref,
39
- style,
40
- tabIndex,
41
- textAlign,
42
- textTransform,
43
- testId,
44
- background: { selection: "textSelection" }
45
- },
46
- children
47
- );
48
- }
49
- );
50
- Text.displayName = "Text";
51
-
52
- export {
53
- Text
54
- };
@@ -1,186 +0,0 @@
1
- "use client";
2
- import {
3
- useFunkitTranslation
4
- } from "./chunk-ZEFHAWRH.js";
5
-
6
- // src/providers/FunkitConfigContext.tsx
7
- import {
8
- createContext,
9
- useContext,
10
- useMemo
11
- } from "react";
12
- var DEFAULT_TEXT_CUSTOMIZATIONS = {
13
- virtualFiat: "Deposit with SEPA",
14
- brokerageOrExchange: "Connect Exchange",
15
- debitOrCredit: "Deposit with Card",
16
- accountBalance: "Wallet",
17
- selectAccount: "Select an exchange",
18
- perpsTransferTitle: "Transfer",
19
- sourceMethodTitle: "Your source",
20
- tokensListTitle: "Your tokens",
21
- transferTokens: "Transfer Crypto",
22
- bitcoinLightning: "Bitcoin on Cash App",
23
- receiveDropdownTitle: "",
24
- // Default to empty
25
- receiveDropdownLabel: "Asset to Receive",
26
- confirmationScreen: {
27
- payAmountLabel: "You send",
28
- receiveAmountLabel: "You receive"
29
- },
30
- paymentMethodSubtitles: {}
31
- };
32
- var DEFAULT_UI_CUSTOMIZATIONS = {
33
- alignTitle: "center",
34
- alwaysShowTopDivider: false,
35
- showModalTitle: true,
36
- callToActionsUppercase: false,
37
- enableCompactList: false,
38
- checkoutHistory: {
39
- showGetHelpAsAlert: true,
40
- simplifiedUi: false
41
- },
42
- confirmationScreen: {
43
- preferDestinationWhenSame: false,
44
- showAmountSummaryAbovePaymentMethod: false,
45
- showDisclaimerAsAlert: true,
46
- showInstantTimeEstimate: false,
47
- showLeftAlignedDollarValueWithLabel: false,
48
- showPaymentAmountUsd: false,
49
- showReceiveAmountUsd: false,
50
- showSelectedRoute: false,
51
- stepIndicatorType: "spinner",
52
- showTokenAmount: true,
53
- showTransactionDigest: "none"
54
- },
55
- sourceChangeScreen: {
56
- bottomBarCloseButton: {
57
- enabled: false,
58
- labelKey: "common.close"
59
- },
60
- showTargetAssetSelection: false,
61
- showWalletOnInsufficientBalance: false,
62
- showWalletConnect: true,
63
- showCustomTopComponentDivider: false,
64
- paymentMethodIcons: {}
65
- },
66
- inputAmountScreen: {
67
- allowTokenAmountInput: true
68
- },
69
- selectAssetScreen: {
70
- isSecondaryTokenSymbolVisible: true,
71
- navigateOnAssetClick: false
72
- },
73
- transferCryptoScreen: {
74
- showYouSendYouReceive: false
75
- },
76
- withdrawalScreen: {},
77
- selectBrokerageScreen: {},
78
- connectExchangeScreen: {},
79
- customIcons: {},
80
- customFontFamily: {
81
- primary: "",
82
- secondary: "",
83
- tertiary: ""
84
- }
85
- };
86
- var DEFAULT_FUNKIT_CONFIG = {
87
- apiKey: "",
88
- appName: "",
89
- textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
90
- uiCustomizations: DEFAULT_UI_CUSTOMIZATIONS
91
- };
92
- var FunkitConfigContext = createContext(
93
- DEFAULT_FUNKIT_CONFIG
94
- );
95
- function useFunkitConfig() {
96
- const originalFunkitConfig = useContext(FunkitConfigContext);
97
- const { t } = useFunkitTranslation();
98
- const translatedDefaults = useMemo(() => {
99
- return {
100
- virtualFiat: t("textCustomizations.virtualFiat"),
101
- brokerageOrExchange: t("textCustomizations.brokerageOrExchange"),
102
- debitOrCredit: t("textCustomizations.debitOrCredit"),
103
- accountBalance: t("textCustomizations.accountBalance"),
104
- selectAccount: t("textCustomizations.selectAccount"),
105
- perpsTransferTitle: t("perpsTransfer.title"),
106
- sourceMethodTitle: t("textCustomizations.sourceMethodTitle"),
107
- tokensListTitle: t("textCustomizations.tokensListTitle"),
108
- transferTokens: t("textCustomizations.transferTokens"),
109
- bitcoinLightning: t("textCustomizations.bitcoinLightning"),
110
- receiveDropdownTitle: t("textCustomizations.receiveDropdownTitle"),
111
- receiveDropdownLabel: t("textCustomizations.receiveDropdownLabel"),
112
- confirmationScreen: {
113
- payAmountLabel: t("textCustomizations.payAmountLabel"),
114
- receiveAmountLabel: t("textCustomizations.receiveAmountLabel")
115
- },
116
- paymentMethodSubtitles: {}
117
- };
118
- }, [t]);
119
- const finalFunkitConfig = useMemo(() => {
120
- return {
121
- ...DEFAULT_FUNKIT_CONFIG,
122
- ...originalFunkitConfig,
123
- textCustomizations: {
124
- ...translatedDefaults,
125
- ...originalFunkitConfig.textCustomizations,
126
- confirmationScreen: {
127
- ...translatedDefaults.confirmationScreen,
128
- ...originalFunkitConfig.textCustomizations?.confirmationScreen
129
- },
130
- paymentMethodSubtitles: {
131
- ...translatedDefaults.paymentMethodSubtitles,
132
- ...originalFunkitConfig.textCustomizations?.paymentMethodSubtitles
133
- }
134
- },
135
- uiCustomizations: {
136
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations,
137
- ...originalFunkitConfig.uiCustomizations,
138
- checkoutHistory: {
139
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.checkoutHistory,
140
- ...originalFunkitConfig.uiCustomizations?.checkoutHistory
141
- },
142
- confirmationScreen: {
143
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.confirmationScreen,
144
- ...originalFunkitConfig.uiCustomizations?.confirmationScreen
145
- },
146
- connectExchangeScreen: {
147
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.connectExchangeScreen,
148
- ...originalFunkitConfig.uiCustomizations?.connectExchangeScreen
149
- },
150
- inputAmountScreen: {
151
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.inputAmountScreen,
152
- ...originalFunkitConfig.uiCustomizations?.inputAmountScreen
153
- },
154
- selectAssetScreen: {
155
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectAssetScreen,
156
- ...originalFunkitConfig.uiCustomizations?.selectAssetScreen
157
- },
158
- selectBrokerageScreen: {
159
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectBrokerageScreen,
160
- ...originalFunkitConfig.uiCustomizations?.selectBrokerageScreen
161
- },
162
- sourceChangeScreen: {
163
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen,
164
- ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen,
165
- bottomBarCloseButton: {
166
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen.bottomBarCloseButton,
167
- ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen?.bottomBarCloseButton
168
- }
169
- },
170
- transferCryptoScreen: {
171
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.transferCryptoScreen,
172
- ...originalFunkitConfig.uiCustomizations?.transferCryptoScreen
173
- },
174
- withdrawalScreen: {
175
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.withdrawalScreen,
176
- ...originalFunkitConfig.uiCustomizations?.withdrawalScreen
177
- }
178
- }
179
- };
180
- }, [originalFunkitConfig, translatedDefaults]);
181
- return finalFunkitConfig;
182
- }
183
-
184
- export {
185
- useFunkitConfig
186
- };
@@ -1,186 +0,0 @@
1
- "use client";
2
- import {
3
- useFunkitTranslation
4
- } from "./chunk-JD3FIVZ7.js";
5
-
6
- // src/providers/FunkitConfigContext.tsx
7
- import {
8
- createContext,
9
- useContext,
10
- useMemo
11
- } from "react";
12
- var DEFAULT_TEXT_CUSTOMIZATIONS = {
13
- virtualFiat: "Deposit with SEPA",
14
- brokerageOrExchange: "Connect Exchange",
15
- debitOrCredit: "Deposit with Card",
16
- accountBalance: "Wallet",
17
- selectAccount: "Select an exchange",
18
- perpsTransferTitle: "Transfer",
19
- sourceMethodTitle: "Your source",
20
- tokensListTitle: "Your tokens",
21
- transferTokens: "Transfer Crypto",
22
- bitcoinLightning: "Bitcoin on Cash App",
23
- receiveDropdownTitle: "",
24
- // Default to empty
25
- receiveDropdownLabel: "Asset to Receive",
26
- confirmationScreen: {
27
- payAmountLabel: "You send",
28
- receiveAmountLabel: "You receive"
29
- },
30
- paymentMethodSubtitles: {}
31
- };
32
- var DEFAULT_UI_CUSTOMIZATIONS = {
33
- alignTitle: "center",
34
- alwaysShowTopDivider: false,
35
- showModalTitle: true,
36
- callToActionsUppercase: false,
37
- enableCompactList: false,
38
- checkoutHistory: {
39
- showGetHelpAsAlert: true,
40
- simplifiedUi: false
41
- },
42
- confirmationScreen: {
43
- preferDestinationWhenSame: false,
44
- showAmountSummaryAbovePaymentMethod: false,
45
- showDisclaimerAsAlert: true,
46
- showInstantTimeEstimate: false,
47
- showLeftAlignedDollarValueWithLabel: false,
48
- showPaymentAmountUsd: false,
49
- showReceiveAmountUsd: false,
50
- showSelectedRoute: false,
51
- stepIndicatorType: "spinner",
52
- showTokenAmount: true,
53
- showTransactionDigest: "none"
54
- },
55
- sourceChangeScreen: {
56
- bottomBarCloseButton: {
57
- enabled: false,
58
- labelKey: "common.close"
59
- },
60
- showTargetAssetSelection: false,
61
- showWalletOnInsufficientBalance: false,
62
- showWalletConnect: true,
63
- showCustomTopComponentDivider: false,
64
- paymentMethodIcons: {}
65
- },
66
- inputAmountScreen: {
67
- allowTokenAmountInput: true
68
- },
69
- selectAssetScreen: {
70
- isSecondaryTokenSymbolVisible: true,
71
- navigateOnAssetClick: false
72
- },
73
- transferCryptoScreen: {
74
- showYouSendYouReceive: false
75
- },
76
- withdrawalScreen: {},
77
- selectBrokerageScreen: {},
78
- connectExchangeScreen: {},
79
- customIcons: {},
80
- customFontFamily: {
81
- primary: "",
82
- secondary: "",
83
- tertiary: ""
84
- }
85
- };
86
- var DEFAULT_FUNKIT_CONFIG = {
87
- apiKey: "",
88
- appName: "",
89
- textCustomizations: DEFAULT_TEXT_CUSTOMIZATIONS,
90
- uiCustomizations: DEFAULT_UI_CUSTOMIZATIONS
91
- };
92
- var FunkitConfigContext = createContext(
93
- DEFAULT_FUNKIT_CONFIG
94
- );
95
- function useFunkitConfig() {
96
- const originalFunkitConfig = useContext(FunkitConfigContext);
97
- const { t } = useFunkitTranslation();
98
- const translatedDefaults = useMemo(() => {
99
- return {
100
- virtualFiat: t("textCustomizations.virtualFiat"),
101
- brokerageOrExchange: t("textCustomizations.brokerageOrExchange"),
102
- debitOrCredit: t("textCustomizations.debitOrCredit"),
103
- accountBalance: t("textCustomizations.accountBalance"),
104
- selectAccount: t("textCustomizations.selectAccount"),
105
- perpsTransferTitle: t("perpsTransfer.title"),
106
- sourceMethodTitle: t("textCustomizations.sourceMethodTitle"),
107
- tokensListTitle: t("textCustomizations.tokensListTitle"),
108
- transferTokens: t("textCustomizations.transferTokens"),
109
- bitcoinLightning: t("textCustomizations.bitcoinLightning"),
110
- receiveDropdownTitle: t("textCustomizations.receiveDropdownTitle"),
111
- receiveDropdownLabel: t("textCustomizations.receiveDropdownLabel"),
112
- confirmationScreen: {
113
- payAmountLabel: t("textCustomizations.payAmountLabel"),
114
- receiveAmountLabel: t("textCustomizations.receiveAmountLabel")
115
- },
116
- paymentMethodSubtitles: {}
117
- };
118
- }, [t]);
119
- const finalFunkitConfig = useMemo(() => {
120
- return {
121
- ...DEFAULT_FUNKIT_CONFIG,
122
- ...originalFunkitConfig,
123
- textCustomizations: {
124
- ...translatedDefaults,
125
- ...originalFunkitConfig.textCustomizations,
126
- confirmationScreen: {
127
- ...translatedDefaults.confirmationScreen,
128
- ...originalFunkitConfig.textCustomizations?.confirmationScreen
129
- },
130
- paymentMethodSubtitles: {
131
- ...translatedDefaults.paymentMethodSubtitles,
132
- ...originalFunkitConfig.textCustomizations?.paymentMethodSubtitles
133
- }
134
- },
135
- uiCustomizations: {
136
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations,
137
- ...originalFunkitConfig.uiCustomizations,
138
- checkoutHistory: {
139
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.checkoutHistory,
140
- ...originalFunkitConfig.uiCustomizations?.checkoutHistory
141
- },
142
- confirmationScreen: {
143
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.confirmationScreen,
144
- ...originalFunkitConfig.uiCustomizations?.confirmationScreen
145
- },
146
- connectExchangeScreen: {
147
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.connectExchangeScreen,
148
- ...originalFunkitConfig.uiCustomizations?.connectExchangeScreen
149
- },
150
- inputAmountScreen: {
151
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.inputAmountScreen,
152
- ...originalFunkitConfig.uiCustomizations?.inputAmountScreen
153
- },
154
- selectAssetScreen: {
155
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectAssetScreen,
156
- ...originalFunkitConfig.uiCustomizations?.selectAssetScreen
157
- },
158
- selectBrokerageScreen: {
159
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.selectBrokerageScreen,
160
- ...originalFunkitConfig.uiCustomizations?.selectBrokerageScreen
161
- },
162
- sourceChangeScreen: {
163
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen,
164
- ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen,
165
- bottomBarCloseButton: {
166
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.sourceChangeScreen.bottomBarCloseButton,
167
- ...originalFunkitConfig.uiCustomizations?.sourceChangeScreen?.bottomBarCloseButton
168
- }
169
- },
170
- transferCryptoScreen: {
171
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.transferCryptoScreen,
172
- ...originalFunkitConfig.uiCustomizations?.transferCryptoScreen
173
- },
174
- withdrawalScreen: {
175
- ...DEFAULT_FUNKIT_CONFIG.uiCustomizations.withdrawalScreen,
176
- ...originalFunkitConfig.uiCustomizations?.withdrawalScreen
177
- }
178
- }
179
- };
180
- }, [originalFunkitConfig, translatedDefaults]);
181
- return finalFunkitConfig;
182
- }
183
-
184
- export {
185
- useFunkitConfig
186
- };
@@ -1,230 +0,0 @@
1
- "use client";
2
- import {
3
- Box
4
- } from "./chunk-ZEFHAWRH.js";
5
- import {
6
- logger
7
- } from "./chunk-UUHGOBKZ.js";
8
-
9
- // src/components/AsyncImage/useAsyncImage.ts
10
- import { useEffect, useReducer } from "react";
11
- var cachedUrls = /* @__PURE__ */ new Map();
12
- var cachedRequestPromises = /* @__PURE__ */ new Map();
13
- async function loadAsyncImage(asyncImage) {
14
- const cachedRequestPromise = cachedRequestPromises.get(asyncImage);
15
- if (cachedRequestPromise) {
16
- return cachedRequestPromise;
17
- }
18
- const load = async () => asyncImage().then(async (url) => {
19
- cachedUrls.set(asyncImage, url);
20
- return url;
21
- });
22
- const requestPromise = load().catch(async () => {
23
- return load().catch(() => {
24
- cachedRequestPromises.delete(asyncImage);
25
- return void 0;
26
- });
27
- });
28
- cachedRequestPromises.set(asyncImage, requestPromise);
29
- return requestPromise;
30
- }
31
- function useForceUpdate() {
32
- const [, forceUpdate] = useReducer((x) => x + 1, 0);
33
- return forceUpdate;
34
- }
35
- function useAsyncImage(url) {
36
- const cachedUrl = typeof url === "function" ? cachedUrls.get(url) : void 0;
37
- const forceUpdate = useForceUpdate();
38
- useEffect(() => {
39
- if (typeof url === "function" && !cachedUrl) {
40
- loadAsyncImage(url).then(forceUpdate);
41
- }
42
- }, [url, cachedUrl, forceUpdate]);
43
- return typeof url === "function" ? cachedUrl : url;
44
- }
45
- var REMOTE_IMG_CACHE = /* @__PURE__ */ new Set();
46
- function preloadRemoteImages(...imageUrls) {
47
- for (const imageUrl of imageUrls) {
48
- try {
49
- const { protocol } = new URL(imageUrl);
50
- if (protocol !== "https:" && protocol !== "http:") {
51
- logger.warn("preloadRemoteImages:invalidUrl", {
52
- message: "Invalid protocol",
53
- imageUrl
54
- });
55
- continue;
56
- }
57
- if (!REMOTE_IMG_CACHE.has(imageUrl)) {
58
- REMOTE_IMG_CACHE.add(imageUrl);
59
- const preloadImage = new Image();
60
- preloadImage.src = imageUrl;
61
- }
62
- } catch (error) {
63
- logger.warn("preloadRemoteImages:error", {
64
- message: "Unable to preload image",
65
- imageUrl,
66
- error
67
- });
68
- }
69
- }
70
- }
71
-
72
- // src/components/AsyncImage/AsyncImage.tsx
73
- import React, { useMemo, useReducer as useReducer2, useState } from "react";
74
-
75
- // src/utils/sanitizeUrl.ts
76
- var SAFE_URL_PROTOCOLS = /* @__PURE__ */ new Set(["https:", "http:"]);
77
- function sanitizeUrl(url) {
78
- if (!url) {
79
- return void 0;
80
- }
81
- try {
82
- const parsed = new URL(url);
83
- if (SAFE_URL_PROTOCOLS.has(parsed.protocol)) {
84
- return parsed.href;
85
- }
86
- return void 0;
87
- } catch {
88
- return void 0;
89
- }
90
- }
91
- function sanitizeCssUrl(url) {
92
- const safeUrl = sanitizeUrl(url);
93
- if (!safeUrl) {
94
- return void 0;
95
- }
96
- return safeUrl.replace(/['()\\]/g, (char) => {
97
- return `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`;
98
- });
99
- }
100
-
101
- // src/components/AsyncImage/AsyncImage.tsx
102
- function useTriggeredOnce() {
103
- return useReducer2(() => true, false);
104
- }
105
- function AsyncImage({
106
- alt,
107
- background,
108
- borderColor,
109
- borderRadius,
110
- boxShadow,
111
- height,
112
- useAsImage,
113
- src: srcProp,
114
- fallbackSrc,
115
- fallbackElement,
116
- width,
117
- testId
118
- }) {
119
- const src = useAsyncImage(srcProp || fallbackSrc);
120
- const isRemoteImage = src !== void 0 && /^(https?|data):/.test(src);
121
- const [isRemoteImageLoaded, setRemoteImageLoaded] = useTriggeredOnce();
122
- const [hasError, setHasError] = useState(
123
- srcProp === void 0 && fallbackSrc === void 0
124
- );
125
- const { asyncStyle, imgProps } = useMemo(() => {
126
- const asyncStyle2 = !useAsImage ? getRemoteImageStyles(isRemoteImage, isRemoteImageLoaded, src) : {};
127
- if (useAsImage || isRemoteImage) {
128
- const imgProps2 = {
129
- as: "img",
130
- src,
131
- "aria-hidden": true,
132
- onError: ({
133
- currentTarget
134
- }) => {
135
- currentTarget.onerror = null;
136
- if (fallbackSrc !== void 0) {
137
- currentTarget.src = fallbackSrc;
138
- } else {
139
- setHasError(true);
140
- }
141
- },
142
- onLoad: isRemoteImage ? setRemoteImageLoaded : void 0
143
- };
144
- return { imgProps: imgProps2, asyncStyle: asyncStyle2 };
145
- }
146
- return {
147
- imgProps: {
148
- backgroundSize: "cover"
149
- },
150
- asyncStyle: {
151
- ...asyncStyle2,
152
- // has to be added as a inline style because vanilla-extract doesn't recognize this as a valid style
153
- backgroundPosition: "center"
154
- }
155
- };
156
- }, [
157
- fallbackSrc,
158
- isRemoteImage,
159
- isRemoteImageLoaded,
160
- src,
161
- useAsImage,
162
- setRemoteImageLoaded
163
- ]);
164
- const mainElement = hasError && fallbackElement || /* @__PURE__ */ React.createElement(
165
- Box,
166
- {
167
- ...imgProps,
168
- height: "full",
169
- position: "absolute",
170
- style: {
171
- WebkitTouchCallout: "none",
172
- transition: "opacity .15s linear",
173
- userSelect: "none",
174
- ...asyncStyle
175
- },
176
- width: "full"
177
- }
178
- );
179
- return /* @__PURE__ */ React.createElement(
180
- Box,
181
- {
182
- "aria-label": alt,
183
- borderRadius,
184
- boxShadow,
185
- height: typeof height === "string" ? height : void 0,
186
- overflow: "hidden",
187
- position: "relative",
188
- role: "img",
189
- style: {
190
- background,
191
- height: typeof height === "number" ? height : void 0,
192
- width: typeof width === "number" ? width : void 0
193
- },
194
- width: typeof width === "string" ? width : void 0,
195
- testId
196
- },
197
- mainElement,
198
- borderColor ? /* @__PURE__ */ React.createElement(
199
- Box,
200
- {
201
- ...typeof borderColor === "object" && "custom" in borderColor ? { style: { borderColor: borderColor.custom } } : { borderColor },
202
- borderRadius,
203
- borderStyle: "solid",
204
- borderWidth: "1",
205
- height: "full",
206
- position: "relative",
207
- width: "full"
208
- }
209
- ) : null
210
- );
211
- }
212
- var getRemoteImageStyles = (isRemoteImage, isRemoteImageLoaded, src) => {
213
- if (isRemoteImage) {
214
- return {
215
- opacity: isRemoteImageLoaded ? 1 : 0
216
- };
217
- }
218
- const safeSrc = sanitizeCssUrl(src);
219
- return {
220
- // note the url must have quotation, see https://github.com/evanw/esbuild/issues/1843#issuecomment-1370108070
221
- backgroundImage: safeSrc ? `url('${safeSrc}')` : void 0,
222
- backgroundRepeat: "no-repeat",
223
- opacity: src ? 1 : 0
224
- };
225
- };
226
-
227
- export {
228
- preloadRemoteImages,
229
- AsyncImage
230
- };