@imtbl/checkout-widgets 2.22.1-alpha.0 → 2.23.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.
- package/dist/browser/{AddTokensWidget-Cf4C0hZj.js → AddTokensWidget-tcHNMJP7.js} +28 -28
- package/dist/browser/{BridgeWidget-B19ueu1h.js → BridgeWidget-C1hLvZ5m.js} +66 -63
- package/dist/browser/{CommerceWidget-rf4XjDiJ.js → CommerceWidget-BTBtsjTM.js} +183 -183
- package/dist/browser/{FeesBreakdown-Dwqe_nxl.js → FeesBreakdown-CIuOWa2U.js} +2 -2
- package/dist/browser/{OnRampWidget-CC6Xrigx.js → OnRampWidget-CGf2WgVI.js} +6 -6
- package/dist/browser/{SaleWidget-iITczQWp.js → SaleWidget-BufxWLju.js} +69 -69
- package/dist/browser/{SpendingCapHero-D1uS4qh5.js → SpendingCapHero-w-h2TkZQ.js} +1 -1
- package/dist/browser/{SwapWidget-D0KUO-VU.js → SwapWidget-BANOn9nl.js} +26 -28
- package/dist/browser/{TokenImage-_Qe7kkzS.js → TokenImage-DiRHQD1a.js} +1 -1
- package/dist/browser/{TopUpView-D15fyfG-.js → TopUpView-Ds0YUOWC.js} +8 -8
- package/dist/browser/{WalletApproveHero-Cwv7L_bn.js → WalletApproveHero-Dp4iuc4e.js} +5 -5
- package/dist/browser/{WalletWidget-DyiWaSwm.js → WalletWidget-CNJ3wq2K.js} +16 -16
- package/dist/browser/{auto-track-DbZaRYzJ.js → auto-track-Czzb_8aV.js} +1 -1
- package/dist/browser/{index-BCj_F4N5.js → index--LhCh8bH.js} +1 -1
- package/dist/browser/{index-BH3M5w3K.js → index-BDE66Im8.js} +39448 -19104
- package/dist/browser/{index-DA2LhN2H.js → index-BV45HG4m.js} +2 -2
- package/dist/browser/{index-D1K4g3zX.js → index-BqfzuXYY.js} +1 -1
- package/dist/browser/{index-7GBD2TGk.js → index-C6GZHO2x.js} +1 -1
- package/dist/browser/{index-D9SO3VpU.js → index-C7IyH910.js} +1 -1
- package/dist/browser/{index-RJOLDd8o.js → index-DkbMrE9I.js} +1 -1
- package/dist/browser/{index-DIMD3G3p.js → index-aCZSkeUi.js} +1 -1
- package/dist/browser/index.js +1 -1
- package/dist/browser/{index.umd-BQX9rJ7N.js → index.umd-BdWIFOPJ.js} +1 -1
- package/dist/browser/{useInterval-TNyi_xTA.js → useInterval-BihI5iZ3.js} +1 -1
- package/dist/types/components/NotEnoughGas/NotEnoughGasStyles.d.ts +1 -1
- package/dist/types/context/analytics-provider/SegmentAnalyticsProvider.d.ts +7 -8
- package/dist/types/lib/clients/checkoutApiType.d.ts +2 -2
- package/dist/types/lib/constants.d.ts +4 -4
- package/dist/types/lib/logoUtils.d.ts +2 -2
- package/dist/types/lib/squid/functions/execute.d.ts +2 -2
- package/dist/types/lib/utils.d.ts +1 -1
- package/dist/types/widgets/add-tokens/utils/animation.d.ts +6 -1
- package/dist/types/widgets/immutable-commerce/CommerceWidgetRoot.d.ts +11 -11
- package/dist/types/widgets/swap/functions/FetchQuote.d.ts +5 -2
- package/jest.config.cjs +11 -0
- package/package.json +29 -33
- package/src/context/analytics-provider/SegmentAnalyticsProvider.ts +12 -8
- package/src/widgets/bridge/components/BridgeReviewSummary.tsx +9 -4
- package/tsconfig.json +19 -8
- package/.eslintrc.cjs +0 -75
- package/jest.config.ts +0 -27
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { cv as axios, dG as
|
|
1
|
+
import { cv as axios, dG as M, v as jsxs, q as jsx, A as Body, bF as PriceDisplay, x as Box, h as useTranslation, aA as Drawer, aP as MenuItem, aF as Fragment, aB as Divider, J as tokenValueFormat, e as formatZeroAmount, c5 as FooterLogo } from './index-BDE66Im8.js';
|
|
2
2
|
|
|
3
3
|
const fetchRiskAssessmentV2 = async (assessmentData, config) => {
|
|
4
4
|
const result = Object.fromEntries(assessmentData.map((data) => [data.address.toLowerCase(), { sanctioned: false }]));
|
|
@@ -15,7 +15,7 @@ const fetchRiskAssessmentV2 = async (assessmentData, config) => {
|
|
|
15
15
|
token_addr: data.tokenAddr,
|
|
16
16
|
amount: data.amount.toString(),
|
|
17
17
|
}));
|
|
18
|
-
const response = await axios.post(`${
|
|
18
|
+
const response = await axios.post(`${M[config.environment]}/v2/sanctions/check`, requestPayload);
|
|
19
19
|
for (const assessment of response.data) {
|
|
20
20
|
result[assessment.address.toLowerCase()].sanctioned = riskLevels.includes(assessment.risk.toLowerCase());
|
|
21
21
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { O as OnRampWidgetViews, T as TopUpView } from './TopUpView-
|
|
3
|
-
import { S as SpendingCapHero } from './SpendingCapHero-
|
|
1
|
+
import { r as reactExports, Y as ConnectLoaderContext, G as EventTargetContext, h as useTranslation, aU as ViewContext, a5 as SharedViews, F as useAnalytics, U as UserJourney, V as ViewActions, q as jsx, z as SimpleLayout, M as HeaderNavigation, d8 as sendOnRampWidgetCloseEvent, O as orchestrationEvents, w, x as Box, aK as isPassportProvider, d9 as url, da as TRANSAK_ORIGIN, db as Qe, c5 as FooterLogo, v as jsxs, d1 as SimpleTextBody, bH as viewReducer, bI as initialViewState, cR as NATIVE, a0 as LoadingView, dc as sendOnRampSuccessEvent, c6 as StatusType, d7 as StatusView, dd as sendOnRampFailedEvent, bQ as ServiceUnavailableErrorView } from './index-BDE66Im8.js';
|
|
2
|
+
import { O as OnRampWidgetViews, T as TopUpView } from './TopUpView-Ds0YUOWC.js';
|
|
3
|
+
import { S as SpendingCapHero } from './SpendingCapHero-w-h2TkZQ.js';
|
|
4
4
|
|
|
5
5
|
const containerStyle = (showIframe) => ({
|
|
6
6
|
position: 'relative',
|
|
@@ -38,7 +38,7 @@ function useWidgetUrl(checkout, provider, tokenAddress, tokenAmount, passport, s
|
|
|
38
38
|
if (!checkout || !provider)
|
|
39
39
|
return;
|
|
40
40
|
const params = {
|
|
41
|
-
exchangeType:
|
|
41
|
+
exchangeType: Qe.ONRAMP,
|
|
42
42
|
browserProvider: provider,
|
|
43
43
|
tokenAddress,
|
|
44
44
|
tokenAmount,
|
|
@@ -230,7 +230,7 @@ function OnRampMain({ passport, showIframe, tokenAmount, tokenAddress, showBackB
|
|
|
230
230
|
};
|
|
231
231
|
}, [trackSegmentEvents, transakEventHandler, userWalletAddress]);
|
|
232
232
|
return (jsx(Box, { sx: boxMainStyle(showIframe), children: jsx(SimpleLayout, { header: showHeader ? (jsx(HeaderNavigation, { title: customTitle ?? t('views.ONRAMP.header.title'), onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget), showBack: showBack, onBackButtonClick: () => {
|
|
233
|
-
orchestrationEvents.sendRequestGoBackEvent(eventTarget,
|
|
233
|
+
orchestrationEvents.sendRequestGoBackEvent(eventTarget, w.IMTBL_ONRAMP_WIDGET_EVENT, {});
|
|
234
234
|
} })) : undefined, footerBackgroundColor: "base.color.translucent.emphasis.200", children: jsx(Box, { sx: containerStyle(showIframe), children: jsx("iframe", { title: "Transak", id: transakIframeId, src: widgetUrl, allow: "camera;microphone;fullscreen;payment", referrerPolicy: "strict-origin-when-cross-origin", style: {
|
|
235
235
|
height: '100%',
|
|
236
236
|
width: '100%',
|
|
@@ -288,7 +288,7 @@ function OnRampWidget({ amount, tokenAddress, config, showBackButton, onrampConf
|
|
|
288
288
|
},
|
|
289
289
|
});
|
|
290
290
|
}, statusType: StatusType.FAILURE, onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget), testId: "fail-view" })), (viewState.view.type !== OnRampWidgetViews.SUCCESS
|
|
291
|
-
&& viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress, showBackButton: showBackButton, showMenu: onrampConfig?.showMenu, customTitle: onrampConfig?.customTitle, customSubTitle: onrampConfig?.customSubTitle, showHeader: onrampConfig?.showHeader })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent:
|
|
291
|
+
&& viewState.view.type !== OnRampWidgetViews.FAIL) && (jsx(OnRampMain, { passport: checkout?.passport, showIframe: showIframe, tokenAmount: amount ?? viewState.view.data?.amount, tokenAddress: tknAddr ?? viewState.view.data?.tokenAddress, showBackButton: showBackButton, showMenu: onrampConfig?.showMenu, customTitle: onrampConfig?.customTitle, customSubTitle: onrampConfig?.customSubTitle, showHeader: onrampConfig?.showHeader })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.ON_RAMP }, widgetEvent: w.IMTBL_ONRAMP_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendOnRampWidgetCloseEvent(eventTarget) })), viewState.view.type
|
|
292
292
|
=== SharedViews.SERVICE_UNAVAILABLE_ERROR_VIEW && (jsx(ServiceUnavailableErrorView, { onCloseClick: () => sendOnRampWidgetCloseEvent(eventTarget) }))] }));
|
|
293
293
|
}
|
|
294
294
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { bM as
|
|
2
|
-
import { u as useMount, T as TopUpView } from './TopUpView-
|
|
3
|
-
import { T as TokenImage } from './TokenImage-
|
|
4
|
-
import { F as Fees, B as BridgeWidget } from './BridgeWidget-
|
|
5
|
-
import OnRampWidget from './OnRampWidget-
|
|
6
|
-
import { a as SwapWidget } from './SwapWidget-
|
|
7
|
-
import { f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-
|
|
8
|
-
import './WalletApproveHero-
|
|
9
|
-
import './useInterval-
|
|
10
|
-
import './SpendingCapHero-
|
|
1
|
+
import { bM as r, C as Contract, r as reactExports, bR as errorToString, bS as hexToText, bT as compareStr, aU as ViewContext, V as ViewActions, bU as Z, q as jsx, bV as re, h as useTranslation, bW as TransakIframe, g as calculateCryptoToFiat, F as useAnalytics, G as EventTargetContext, bX as toPascalCase, bY as sendSaleWidgetCloseEvent, bZ as toStringifyTransactions, b_ as sendSaleSuccessEvent, b$ as sendSaleFailedEvent, c0 as sendSaleTransactionSuccessEvent, c1 as sendSalePaymentMethodEvent, c2 as sendSalePaymentTokenEvent, U as UserJourney, M as HeaderNavigation, v as jsxs, c3 as LoadingOverlay, x as Box, aF as Fragment, z as SimpleLayout, aV as useHandover, aW as HandoverTarget, k as getRemoteRive, H as Heading, c4 as HandoverDuration, aK as isPassportProvider, aZ as HandoverContent, aP as MenuItem, bj as motion, bi as listVariants, bk as listItemVariants, a5 as SharedViews, c5 as FooterLogo, c6 as StatusType, c7 as prettyFormatNumber, J as tokenValueFormat, c8 as ShimmerCircle, y as Button, S as Stack, c9 as Ze, ca as abbreviateWalletAddress, cb as formatUnits, aA as Drawer, cc as Caption, aB as Divider, cd as tokenSymbolNameOverrides, ce as qe, cf as Je, cg as Ke, ch as Ye, a$ as isNativeToken, b0 as getTokenImageByAddress, ci as isGasFree, I as CryptoFiatContext, Y as ConnectLoaderContext, cj as eventTargetReducer, ck as initialEventTargetState, w, cl as EventTargetActions, a0 as LoadingView, aQ as Ce, cm as ConnectWidgetViews, a7 as ConnectWidget, o as oe, t as te, i as ie, E, cn as ConnectLoaderActions, b as parseUnits, a1 as CryptoFiatActions, b3 as ButtCon, A as Body, co as widgetTheme, bH as viewReducer, bI as initialViewState, m as gi, bQ as ServiceUnavailableErrorView, X as CryptoFiatProvider } from './index-BDE66Im8.js';
|
|
2
|
+
import { u as useMount, T as TopUpView } from './TopUpView-Ds0YUOWC.js';
|
|
3
|
+
import { T as TokenImage } from './TokenImage-DiRHQD1a.js';
|
|
4
|
+
import { F as Fees, B as BridgeWidget } from './BridgeWidget-C1hLvZ5m.js';
|
|
5
|
+
import OnRampWidget from './OnRampWidget-CGf2WgVI.js';
|
|
6
|
+
import { a as SwapWidget } from './SwapWidget-BANOn9nl.js';
|
|
7
|
+
import { f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-CIuOWa2U.js';
|
|
8
|
+
import './WalletApproveHero-Dp4iuc4e.js';
|
|
9
|
+
import './useInterval-BihI5iZ3.js';
|
|
10
|
+
import './SpendingCapHero-w-h2TkZQ.js';
|
|
11
11
|
|
|
12
12
|
var SaleWidgetViews;
|
|
13
13
|
(function (SaleWidgetViews) {
|
|
@@ -58,8 +58,8 @@ var ExecuteTransactionStep;
|
|
|
58
58
|
})(ExecuteTransactionStep || (ExecuteTransactionStep = {}));
|
|
59
59
|
|
|
60
60
|
const PRIMARY_SALES_API_BASE_URL = {
|
|
61
|
-
[
|
|
62
|
-
[
|
|
61
|
+
[r.SANDBOX]: 'https://api.sandbox.immutable.com/v1/primary-sales',
|
|
62
|
+
[r.PRODUCTION]: 'https://api.immutable.com/v1/primary-sales',
|
|
63
63
|
};
|
|
64
64
|
|
|
65
65
|
const filterAllowedTransactions = async (transactions, provider) => {
|
|
@@ -543,7 +543,7 @@ const SaleContext = reactExports.createContext({
|
|
|
543
543
|
provider: undefined,
|
|
544
544
|
checkout: undefined,
|
|
545
545
|
environmentId: '',
|
|
546
|
-
environment:
|
|
546
|
+
environment: r.SANDBOX,
|
|
547
547
|
recipientAddress: '',
|
|
548
548
|
recipientEmail: '',
|
|
549
549
|
sign: () => Promise.resolve(undefined),
|
|
@@ -591,7 +591,7 @@ function SaleContextProvider(props) {
|
|
|
591
591
|
const [showCreditCardWarning, setShowCreditCardWarning] = reactExports.useState(false);
|
|
592
592
|
const [paymentMethod, setPaymentMethodState] = reactExports.useState(undefined);
|
|
593
593
|
const setPaymentMethod = (type) => {
|
|
594
|
-
if (type ===
|
|
594
|
+
if (type === re.CREDIT && !showCreditCardWarning) {
|
|
595
595
|
setPaymentMethodState(undefined);
|
|
596
596
|
setShowCreditCardWarning(true);
|
|
597
597
|
return;
|
|
@@ -661,7 +661,7 @@ function SaleContextProvider(props) {
|
|
|
661
661
|
setPaymentMethod(undefined);
|
|
662
662
|
}
|
|
663
663
|
const { vendorError, ...errorData } = data;
|
|
664
|
-
|
|
664
|
+
Z('commerce', 'saleError', new Error(errorType), {
|
|
665
665
|
...errorData,
|
|
666
666
|
...(vendorError ? { vendorCode: vendorError.code, vendorMessage: vendorError.message || '' } : {}),
|
|
667
667
|
});
|
|
@@ -1316,9 +1316,9 @@ function PayWithCoins() {
|
|
|
1316
1316
|
function PaymentOption({ type, onClick, disabled = false, caption, size, rc = jsx("span", {}), }) {
|
|
1317
1317
|
const { t } = useTranslation();
|
|
1318
1318
|
const icon = {
|
|
1319
|
-
[
|
|
1320
|
-
[
|
|
1321
|
-
[
|
|
1319
|
+
[re.CRYPTO]: 'Coins',
|
|
1320
|
+
[re.DEBIT]: 'BankCard',
|
|
1321
|
+
[re.CREDIT]: 'BankCard',
|
|
1322
1322
|
};
|
|
1323
1323
|
const handleClick = () => onClick(type);
|
|
1324
1324
|
const menuItemProps = {
|
|
@@ -1337,9 +1337,9 @@ function PaymentOption({ type, onClick, disabled = false, caption, size, rc = js
|
|
|
1337
1337
|
}
|
|
1338
1338
|
|
|
1339
1339
|
const defaultPaymentOptions = [
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1340
|
+
re.CRYPTO,
|
|
1341
|
+
re.DEBIT,
|
|
1342
|
+
re.CREDIT,
|
|
1343
1343
|
];
|
|
1344
1344
|
function PaymentOptions(props) {
|
|
1345
1345
|
const { disabledOptions = [], paymentOptions, onClick, captions, size, hideDisabledOptions, } = props;
|
|
@@ -1366,7 +1366,7 @@ function PaymentMethods() {
|
|
|
1366
1366
|
sendSelectedPaymentMethod(paymentMethod, SaleWidgetViews.PAYMENT_METHODS); // checkoutPrimarySalePaymentMethods_SelectMenuItem
|
|
1367
1367
|
}
|
|
1368
1368
|
if (paymentMethod
|
|
1369
|
-
&& [
|
|
1369
|
+
&& [re.DEBIT, re.CREDIT].includes(paymentMethod)) {
|
|
1370
1370
|
sign(SignPaymentTypes.FIAT, undefined, () => {
|
|
1371
1371
|
viewDispatch({
|
|
1372
1372
|
payload: {
|
|
@@ -1387,7 +1387,7 @@ function PaymentMethods() {
|
|
|
1387
1387
|
},
|
|
1388
1388
|
});
|
|
1389
1389
|
}
|
|
1390
|
-
if (paymentMethod && paymentMethod ===
|
|
1390
|
+
if (paymentMethod && paymentMethod === re.CRYPTO) {
|
|
1391
1391
|
viewDispatch({
|
|
1392
1392
|
payload: {
|
|
1393
1393
|
type: ViewActions.UPDATE_VIEW,
|
|
@@ -1679,7 +1679,7 @@ const getTotalFeesBySymbol = (fees, tokenInfo) => fees
|
|
|
1679
1679
|
return acc;
|
|
1680
1680
|
}, {});
|
|
1681
1681
|
const getFundingBalanceTotalFees = (balance) => {
|
|
1682
|
-
if (balance.type !==
|
|
1682
|
+
if (balance.type !== Ze.SWAP) {
|
|
1683
1683
|
return {};
|
|
1684
1684
|
}
|
|
1685
1685
|
const fees = [
|
|
@@ -1692,7 +1692,7 @@ const getFundingBalanceTotalFees = (balance) => {
|
|
|
1692
1692
|
};
|
|
1693
1693
|
const getFundingBalanceFeeBreakDown = (balance, conversions, t) => {
|
|
1694
1694
|
const feesBreakdown = [];
|
|
1695
|
-
if (balance.type !==
|
|
1695
|
+
if (balance.type !== Ze.SWAP) {
|
|
1696
1696
|
return [];
|
|
1697
1697
|
}
|
|
1698
1698
|
const addFee = (fee, label, prefix = '~ ') => {
|
|
@@ -1750,7 +1750,7 @@ function CoinsDrawer({ conversions, balances, selectedIndex, visible, loading, t
|
|
|
1750
1750
|
if (balances.length > 3) {
|
|
1751
1751
|
size = 'small';
|
|
1752
1752
|
}
|
|
1753
|
-
const otherPaymentOptions = [
|
|
1753
|
+
const otherPaymentOptions = [re.DEBIT, re.CREDIT];
|
|
1754
1754
|
const withOtherOptions = !otherPaymentOptions.every((type) => disabledPaymentTypes?.includes(type));
|
|
1755
1755
|
return (jsx(Drawer, { size: "full", visible: visible, showHeaderBar: true, onCloseDrawer: onClose, headerBarTitle: t('views.ORDER_SUMMARY.coinsDrawer.header'), children: jsx(Drawer.Content, { rc: jsx(motion.div, { variants: listVariants, initial: "hidden", animate: "show" }), children: jsxs(Box, { sx: {
|
|
1756
1756
|
height: '100%',
|
|
@@ -1763,8 +1763,8 @@ function CoinsDrawer({ conversions, balances, selectedIndex, visible, loading, t
|
|
|
1763
1763
|
justifyContent: 'space-between',
|
|
1764
1764
|
mb: 'base.spacing.x2',
|
|
1765
1765
|
}, children: [jsx(Caption, { size: "small", children: t('views.ORDER_SUMMARY.coinsDrawer.caption1') }), jsx(Caption, { size: "small", children: t('views.ORDER_SUMMARY.coinsDrawer.caption2') })] }), balances?.map((balance, idx) => (jsx(CoinsDrawerItem, { onClick: handleOnclick(idx), balance: balance, selected: selectedIndex === idx, conversions: conversions, transactionRequirement: transactionRequirement, size: size, theme: theme, environment: environment, rc: jsx(motion.div, { variants: listItemVariants, custom: idx }) }, `${balance.fundingItem.token.symbol}-${balance.type}`))), loading && (jsx(motion.div, { variants: listItemVariants, custom: balances.length, children: jsx(MenuItem, { shimmer: true, emphasized: true, size: size, testId: "funding-balance-item-shimmer" }) }, "funding-balance-item-shimmer"))] }), onPayWithCard && (jsxs(Box, { sx: { pb: 'base.spacing.x4' }, rc: (jsx(motion.div, { variants: listItemVariants, custom: balances.length + (loading ? 1 : 0) })), children: [withOtherOptions && (jsx(Divider, { size: "small", rc: jsx(Caption, {}), sx: { my: 'base.spacing.x4' }, children: t('views.ORDER_SUMMARY.coinsDrawer.divider') })), jsx(PaymentOptions, { onClick: onPayWithCard, size: size, hideDisabledOptions: true, paymentOptions: otherPaymentOptions, disabledOptions: disabledPaymentTypes, captions: {
|
|
1766
|
-
[
|
|
1767
|
-
[
|
|
1766
|
+
[re.DEBIT]: t('views.PAYMENT_METHODS.options.debit.caption'),
|
|
1767
|
+
[re.CREDIT]: t('views.PAYMENT_METHODS.options.credit.caption'),
|
|
1768
1768
|
} })] }))] }) }) }));
|
|
1769
1769
|
}
|
|
1770
1770
|
|
|
@@ -1851,7 +1851,7 @@ function OrderReview({ fundingBalances, conversions, collectionName, loadingBala
|
|
|
1851
1851
|
if (!conversions?.size || !provider) {
|
|
1852
1852
|
return;
|
|
1853
1853
|
}
|
|
1854
|
-
if (fundingBalance.type !==
|
|
1854
|
+
if (fundingBalance.type !== Ze.SWAP) {
|
|
1855
1855
|
return;
|
|
1856
1856
|
}
|
|
1857
1857
|
const totalFees = getFundingBalanceTotalFees(fundingBalance);
|
|
@@ -1874,7 +1874,7 @@ function OrderReview({ fundingBalances, conversions, collectionName, loadingBala
|
|
|
1874
1874
|
});
|
|
1875
1875
|
}, [fundingBalance, conversions, provider]);
|
|
1876
1876
|
reactExports.useEffect(() => {
|
|
1877
|
-
if (fundingBalance.type ===
|
|
1877
|
+
if (fundingBalance.type === Ze.SWAP) {
|
|
1878
1878
|
return;
|
|
1879
1879
|
}
|
|
1880
1880
|
if (!gasFees || gasFees.balance <= 0) {
|
|
@@ -1950,16 +1950,16 @@ function OrderReview({ fundingBalances, conversions, collectionName, loadingBala
|
|
|
1950
1950
|
const MAX_GAS_LIMIT = '30000000';
|
|
1951
1951
|
const getERC20ItemRequirement = (amount, spenderAddress, tokenAddress) => [
|
|
1952
1952
|
{
|
|
1953
|
-
type:
|
|
1953
|
+
type: Ke.ERC20,
|
|
1954
1954
|
tokenAddress,
|
|
1955
1955
|
spenderAddress,
|
|
1956
1956
|
amount,
|
|
1957
1957
|
},
|
|
1958
1958
|
];
|
|
1959
1959
|
const getGasEstimate = () => ({
|
|
1960
|
-
type:
|
|
1960
|
+
type: qe.GAS,
|
|
1961
1961
|
gasToken: {
|
|
1962
|
-
type:
|
|
1962
|
+
type: Je.NATIVE,
|
|
1963
1963
|
limit: BigInt(MAX_GAS_LIMIT),
|
|
1964
1964
|
},
|
|
1965
1965
|
});
|
|
@@ -1971,7 +1971,7 @@ const wrapPromisesWithOnResolve = async (awaitedFns, onResolve) => {
|
|
|
1971
1971
|
});
|
|
1972
1972
|
return await Promise.all(promises);
|
|
1973
1973
|
};
|
|
1974
|
-
const getTokenInfoFromRequirement = (req) => (req.current.type !==
|
|
1974
|
+
const getTokenInfoFromRequirement = (req) => (req.current.type !== Ke.ERC721 && req.current.token); // eslint-disable-line
|
|
1975
1975
|
const getTokenInfo = (tokenInfo, environment) => {
|
|
1976
1976
|
const address = isNativeToken(tokenInfo.address)
|
|
1977
1977
|
? tokenInfo.symbol
|
|
@@ -1984,7 +1984,7 @@ const getTokenInfo = (tokenInfo, environment) => {
|
|
|
1984
1984
|
const getSufficientFundingStep = (requirement, environment) => ({
|
|
1985
1985
|
type: FundingBalanceType.SUFFICIENT,
|
|
1986
1986
|
fundingItem: {
|
|
1987
|
-
type:
|
|
1987
|
+
type: Ke.ERC20,
|
|
1988
1988
|
token: getTokenInfo(getTokenInfoFromRequirement(requirement), environment),
|
|
1989
1989
|
fundsRequired: {
|
|
1990
1990
|
amount: requirement.required.balance,
|
|
@@ -2001,7 +2001,7 @@ const getAlternativeFundingSteps = (fundingRoutes, environment) => {
|
|
|
2001
2001
|
return [];
|
|
2002
2002
|
}
|
|
2003
2003
|
const routes = fundingRoutes.filter((route) => route.steps.length === 1);
|
|
2004
|
-
const tokens = [
|
|
2004
|
+
const tokens = [Ke.ERC20, Ke.NATIVE];
|
|
2005
2005
|
const steps = routes.flatMap((route) => route.steps.filter((step) => tokens.includes(step.fundingItem.type)));
|
|
2006
2006
|
return steps.map((step) => ({
|
|
2007
2007
|
...step,
|
|
@@ -2013,14 +2013,14 @@ const getAlternativeFundingSteps = (fundingRoutes, environment) => {
|
|
|
2013
2013
|
};
|
|
2014
2014
|
const getFundingBalances = (smartCheckoutResult, environment) => {
|
|
2015
2015
|
if (smartCheckoutResult.sufficient === true) {
|
|
2016
|
-
const erc20Req = smartCheckoutResult.transactionRequirements.find((req) => req.type ===
|
|
2017
|
-
if (erc20Req && erc20Req.type ===
|
|
2016
|
+
const erc20Req = smartCheckoutResult.transactionRequirements.find((req) => req.type === Ke.ERC20);
|
|
2017
|
+
if (erc20Req && erc20Req.type === Ke.ERC20) {
|
|
2018
2018
|
return [getSufficientFundingStep(erc20Req, environment)];
|
|
2019
2019
|
}
|
|
2020
2020
|
}
|
|
2021
2021
|
if (smartCheckoutResult.sufficient === false
|
|
2022
2022
|
&& smartCheckoutResult?.router?.routingOutcome.type
|
|
2023
|
-
===
|
|
2023
|
+
=== Ye.ROUTES_FOUND) {
|
|
2024
2024
|
return getAlternativeFundingSteps(smartCheckoutResult.router.routingOutcome.fundingRoutes, environment);
|
|
2025
2025
|
}
|
|
2026
2026
|
return null;
|
|
@@ -2068,7 +2068,7 @@ const getZeroFee = (fee) => ({
|
|
|
2068
2068
|
formattedAmount: '0',
|
|
2069
2069
|
});
|
|
2070
2070
|
const getGasFreeBalanceAdjustment = (balance, provider) => {
|
|
2071
|
-
if (balance.type !==
|
|
2071
|
+
if (balance.type !== Ze.SWAP) {
|
|
2072
2072
|
return balance;
|
|
2073
2073
|
}
|
|
2074
2074
|
if (!isGasFree(provider)) {
|
|
@@ -2208,14 +2208,14 @@ const useFundingBalances = () => {
|
|
|
2208
2208
|
};
|
|
2209
2209
|
|
|
2210
2210
|
const tokenInfo = (req) => {
|
|
2211
|
-
if (req && req.current.type !==
|
|
2211
|
+
if (req && req.current.type !== Ke.ERC721) {
|
|
2212
2212
|
return req.current.token;
|
|
2213
2213
|
}
|
|
2214
2214
|
return undefined;
|
|
2215
2215
|
};
|
|
2216
2216
|
const getTopUpViewData = (transactionRequirements) => {
|
|
2217
|
-
const native = transactionRequirements.find(({ type }) => type ===
|
|
2218
|
-
const erc20 = transactionRequirements.find(({ type }) => type ===
|
|
2217
|
+
const native = transactionRequirements.find(({ type }) => type === Ke.NATIVE);
|
|
2218
|
+
const erc20 = transactionRequirements.find(({ type }) => type === Ke.ERC20);
|
|
2219
2219
|
const balances = {
|
|
2220
2220
|
erc20: {
|
|
2221
2221
|
value: erc20?.delta.formattedBalance,
|
|
@@ -2294,7 +2294,7 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2294
2294
|
const network = await checkout.getNetworkInfo({
|
|
2295
2295
|
provider,
|
|
2296
2296
|
});
|
|
2297
|
-
if (step.type ===
|
|
2297
|
+
if (step.type === Ze.BRIDGE) {
|
|
2298
2298
|
setBridgeParams({
|
|
2299
2299
|
tokenAddress: step.fundingItem.token.address,
|
|
2300
2300
|
amount: step.fundingItem.fundsRequired.formattedAmount,
|
|
@@ -2306,7 +2306,7 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2306
2306
|
nextView.current = FundingRouteExecuteViews.EXECUTE_BRIDGE;
|
|
2307
2307
|
setView(FundingRouteExecuteViews.SWITCH_NETWORK_ETH);
|
|
2308
2308
|
}
|
|
2309
|
-
if (step.type ===
|
|
2309
|
+
if (step.type === Ze.SWAP) {
|
|
2310
2310
|
setSwapParams({
|
|
2311
2311
|
amount: step.fundingItem.fundsRequired.formattedAmount,
|
|
2312
2312
|
fromTokenAddress: step.fundingItem.token.address,
|
|
@@ -2320,7 +2320,7 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2320
2320
|
nextView.current = FundingRouteExecuteViews.EXECUTE_SWAP;
|
|
2321
2321
|
setView(FundingRouteExecuteViews.SWITCH_NETWORK_ZKEVM);
|
|
2322
2322
|
}
|
|
2323
|
-
if (step.type ===
|
|
2323
|
+
if (step.type === Ze.ONRAMP) {
|
|
2324
2324
|
setOnRampParams({
|
|
2325
2325
|
amount: step.fundingItem.fundsRequired.formattedAmount,
|
|
2326
2326
|
tokenAddress: step.fundingItem.token.address,
|
|
@@ -2352,30 +2352,30 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2352
2352
|
};
|
|
2353
2353
|
const handleCustomEvent = (event) => {
|
|
2354
2354
|
switch (event.detail.type) {
|
|
2355
|
-
case
|
|
2355
|
+
case te.SUCCESS: {
|
|
2356
2356
|
const successEvent = event.detail.data;
|
|
2357
2357
|
stepSuccess.current = successEvent;
|
|
2358
2358
|
onCloseWidget();
|
|
2359
2359
|
break;
|
|
2360
2360
|
}
|
|
2361
|
-
case
|
|
2362
|
-
case
|
|
2361
|
+
case ie.TRANSACTION_SENT:
|
|
2362
|
+
case oe.SUCCESS: {
|
|
2363
2363
|
const successEvent = event.detail.data;
|
|
2364
2364
|
stepSuccess.current = successEvent;
|
|
2365
2365
|
break;
|
|
2366
2366
|
}
|
|
2367
|
-
case
|
|
2368
|
-
case
|
|
2369
|
-
case
|
|
2367
|
+
case ie.FAILURE:
|
|
2368
|
+
case te.FAILURE:
|
|
2369
|
+
case oe.FAILURE: {
|
|
2370
2370
|
// On FAILURE, widget will prompt user to try again.
|
|
2371
2371
|
// We need to know if it failed though when they close the widget
|
|
2372
2372
|
const failureEvent = event.detail.data;
|
|
2373
2373
|
stepFailed.current = failureEvent;
|
|
2374
2374
|
break;
|
|
2375
2375
|
}
|
|
2376
|
-
case
|
|
2377
|
-
case
|
|
2378
|
-
case
|
|
2376
|
+
case ie.CLOSE_WIDGET:
|
|
2377
|
+
case te.CLOSE_WIDGET:
|
|
2378
|
+
case oe.CLOSE_WIDGET: {
|
|
2379
2379
|
onCloseWidget();
|
|
2380
2380
|
break;
|
|
2381
2381
|
}
|
|
@@ -2383,7 +2383,7 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2383
2383
|
};
|
|
2384
2384
|
const handleConnectEvent = (event) => {
|
|
2385
2385
|
switch (event.detail.type) {
|
|
2386
|
-
case
|
|
2386
|
+
case E.SUCCESS: {
|
|
2387
2387
|
const eventData = event.detail.data;
|
|
2388
2388
|
connectLoaderDispatch({
|
|
2389
2389
|
payload: {
|
|
@@ -2397,8 +2397,8 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2397
2397
|
}
|
|
2398
2398
|
break;
|
|
2399
2399
|
}
|
|
2400
|
-
case
|
|
2401
|
-
case
|
|
2400
|
+
case E.FAILURE:
|
|
2401
|
+
case E.CLOSE_WIDGET:
|
|
2402
2402
|
default:
|
|
2403
2403
|
onCloseWidget();
|
|
2404
2404
|
break;
|
|
@@ -2406,15 +2406,15 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2406
2406
|
};
|
|
2407
2407
|
reactExports.useEffect(() => {
|
|
2408
2408
|
// Handle the connect event when switching networks
|
|
2409
|
-
eventTarget.addEventListener(
|
|
2409
|
+
eventTarget.addEventListener(w.IMTBL_CONNECT_WIDGET_EVENT, handleConnectEvent);
|
|
2410
2410
|
// Handle the other widget events
|
|
2411
|
-
eventTarget.addEventListener(
|
|
2412
|
-
eventTarget.addEventListener(
|
|
2411
|
+
eventTarget.addEventListener(w.IMTBL_BRIDGE_WIDGET_EVENT, handleCustomEvent);
|
|
2412
|
+
eventTarget.addEventListener(w.IMTBL_SWAP_WIDGET_EVENT, handleCustomEvent);
|
|
2413
2413
|
// Remove the custom event listener when the component unmounts
|
|
2414
2414
|
return () => {
|
|
2415
|
-
eventTarget.removeEventListener(
|
|
2416
|
-
eventTarget.removeEventListener(
|
|
2417
|
-
eventTarget.removeEventListener(
|
|
2415
|
+
eventTarget.removeEventListener(w.IMTBL_CONNECT_WIDGET_EVENT, handleConnectEvent);
|
|
2416
|
+
eventTarget.removeEventListener(w.IMTBL_BRIDGE_WIDGET_EVENT, handleCustomEvent);
|
|
2417
|
+
eventTarget.removeEventListener(w.IMTBL_SWAP_WIDGET_EVENT, handleCustomEvent);
|
|
2418
2418
|
};
|
|
2419
2419
|
}, []);
|
|
2420
2420
|
reactExports.useEffect(() => {
|
|
@@ -2425,9 +2425,9 @@ function FundingRouteExecute({ fundingRouteStep, onFundingRouteExecuted, }) {
|
|
|
2425
2425
|
},
|
|
2426
2426
|
});
|
|
2427
2427
|
}, [checkout]);
|
|
2428
|
-
return (jsxs(EventTargetContext.Provider, { value: eventTargetReducerValues, children: [view === FundingRouteExecuteViews.LOADING && (jsx(LoadingView, { loadingText: t('views.ORDER_SUMMARY.loading.balances') })), view === FundingRouteExecuteViews.EXECUTE_BRIDGE && (jsx(BridgeWidget, { ...bridgeParams, config: config, checkout: checkout })), view === FundingRouteExecuteViews.EXECUTE_SWAP && (jsx(SwapWidget, { ...swapParams, config: config, swapConfig: {} })), view === FundingRouteExecuteViews.EXECUTE_ON_RAMP && (jsx(OnRampWidget, { config: config, ...onRampParams })), view === FundingRouteExecuteViews.SWITCH_NETWORK_ETH && (jsx(ConnectWidget, { config: config, targetChainId: checkout.config.isProduction ?
|
|
2429
|
-
?
|
|
2430
|
-
:
|
|
2428
|
+
return (jsxs(EventTargetContext.Provider, { value: eventTargetReducerValues, children: [view === FundingRouteExecuteViews.LOADING && (jsx(LoadingView, { loadingText: t('views.ORDER_SUMMARY.loading.balances') })), view === FundingRouteExecuteViews.EXECUTE_BRIDGE && (jsx(BridgeWidget, { ...bridgeParams, config: config, checkout: checkout })), view === FundingRouteExecuteViews.EXECUTE_SWAP && (jsx(SwapWidget, { ...swapParams, config: config, swapConfig: {} })), view === FundingRouteExecuteViews.EXECUTE_ON_RAMP && (jsx(OnRampWidget, { config: config, ...onRampParams })), view === FundingRouteExecuteViews.SWITCH_NETWORK_ETH && (jsx(ConnectWidget, { config: config, targetChainId: checkout.config.isProduction ? Ce.ETHEREUM : Ce.SEPOLIA, browserProvider: provider, checkout: checkout, deepLink: ConnectWidgetViews.SWITCH_NETWORK })), view === FundingRouteExecuteViews.SWITCH_NETWORK_ZKEVM && (jsx(ConnectWidget, { config: config, targetChainId: checkout.config.isProduction
|
|
2429
|
+
? Ce.IMTBL_ZKEVM_MAINNET
|
|
2430
|
+
: Ce.IMTBL_ZKEVM_TESTNET, browserProvider: provider, checkout: checkout, deepLink: ConnectWidgetViews.SWITCH_NETWORK }))] }));
|
|
2431
2431
|
}
|
|
2432
2432
|
|
|
2433
2433
|
function LoadingHandover({ text, duration, animationUrl, inputValue = 0, }) {
|
|
@@ -2623,7 +2623,7 @@ function CreditCardWarningDrawer() {
|
|
|
2623
2623
|
const { t } = useTranslation();
|
|
2624
2624
|
const { showCreditCardWarning, setShowCreditCardWarning, setPaymentMethod } = useSaleContext();
|
|
2625
2625
|
const handleCtaButtonClick = () => {
|
|
2626
|
-
setPaymentMethod(
|
|
2626
|
+
setPaymentMethod(re.CREDIT);
|
|
2627
2627
|
};
|
|
2628
2628
|
return (jsx(Drawer, { size: "threeQuarter", visible: showCreditCardWarning, showHeaderBar: false, children: jsxs(Drawer.Content, { children: [jsx(ButtCon, { icon: "Close", variant: "tertiary", sx: {
|
|
2629
2629
|
pos: 'absolute',
|
|
@@ -2696,7 +2696,7 @@ function SaleWidget(props) {
|
|
|
2696
2696
|
customOrderData,
|
|
2697
2697
|
waitFulfillmentSettlements,
|
|
2698
2698
|
hideExcludedPaymentTypes,
|
|
2699
|
-
}, children: jsxs(CryptoFiatProvider, { environment: config.environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: loadingText })), viewState.view.type === SaleWidgetViews.PAYMENT_METHODS && (jsx(PaymentMethods, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_CARD && (jsx(PayWithCard, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_COINS && (jsx(PayWithCoins, {})), viewState.view.type === SaleWidgetViews.SALE_FAIL && (jsx(SaleErrorView, { biomeTheme: biomeTheme, errorType: viewState.view.data?.errorType, transactionHash: viewState.view.data?.transactionHash, vendorMessage: viewState.view.data?.vendorError?.message, blockExplorerLink:
|
|
2699
|
+
}, children: jsxs(CryptoFiatProvider, { environment: config.environment, children: [viewState.view.type === SharedViews.LOADING_VIEW && (jsx(LoadingView, { loadingText: loadingText })), viewState.view.type === SaleWidgetViews.PAYMENT_METHODS && (jsx(PaymentMethods, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_CARD && (jsx(PayWithCard, {})), viewState.view.type === SaleWidgetViews.PAY_WITH_COINS && (jsx(PayWithCoins, {})), viewState.view.type === SaleWidgetViews.SALE_FAIL && (jsx(SaleErrorView, { biomeTheme: biomeTheme, errorType: viewState.view.data?.errorType, transactionHash: viewState.view.data?.transactionHash, vendorMessage: viewState.view.data?.vendorError?.message, blockExplorerLink: gi.getTransactionLink(chainId.current, viewState.view.data?.transactionHash) })), viewState.view.type === SaleWidgetViews.ORDER_SUMMARY && (jsx(OrderSummary, { subView: viewState.view.subView })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.SALE }, widgetEvent: w.IMTBL_SALE_WIDGET_EVENT, checkout: checkout, provider: provider, showOnrampOption: config.isOnRampEnabled, showSwapOption: false, showBridgeOption: config.isBridgeEnabled, onCloseButtonClick: () => sendSaleWidgetCloseEvent(eventTarget), onBackButtonClick: () => {
|
|
2700
2700
|
viewDispatch({
|
|
2701
2701
|
payload: {
|
|
2702
2702
|
type: ViewActions.UPDATE_VIEW,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { q as jsx, c$ as heroBackGroundStyles, x as Box, d0 as heroImageStyles, dF as heroImageBottomAlign, v as jsxs } from './index-BDE66Im8.js';
|
|
2
2
|
|
|
3
3
|
function SpendingCapHero() {
|
|
4
4
|
return (jsx(Box, { sx: { ...heroBackGroundStyles, background: 'base.color.translucent.emphasis.100' }, children: jsx(Box, { sx: { ...heroImageStyles, ...heroImageBottomAlign }, children: jsxs("svg", { width: "430", height: "305", viewBox: "0 0 430 305", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M94.0614 105.632L93.6321 104L92 104.429L92.4292 106.061L94.0614 105.632Z", fill: "white" }), jsx("path", { d: "M63.6531 193.101L63.1006 191L60.9996 191.553L61.5521 193.654L63.6531 193.101Z", fill: "white" }), jsx("path", { d: "M344.489 224.345L342.345 224L342 226.145L344.144 226.49L344.489 224.345Z", fill: "white" }), jsx("path", { d: "M372.286 139.905L372.905 138.619L371.619 138L371 139.286L372.286 139.905Z", fill: "white" }), jsx("path", { d: "M341.653 78.101L341.101 76L339 76.5525L339.552 78.6535L341.653 78.101Z", fill: "white" }), jsx("path", { d: "M359.286 242.905L359.905 241.619L358.619 241L358 242.286L359.286 242.905Z", fill: "white" }), jsx("path", { d: "M87.0123 112.087L86.0869 111L85.0002 111.925L85.9256 113.012L87.0123 112.087Z", fill: "white" }), jsx("path", { d: "M84.2862 248.905L84.9053 247.619L83.6192 247L83.0001 248.286L84.2862 248.905Z", fill: "white" }), jsx("path", { d: "M215.496 262.992C268.237 262.992 310.993 220.237 310.993 167.496C310.993 114.755 268.237 72 215.496 72C162.755 72 120 114.755 120 167.496C120 220.237 162.755 262.992 215.496 262.992Z", fill: "white", fillOpacity: "0.24", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M159.82 95.1695C179.975 79.6536 204.651 73.1506 227.89 77.0665C261.089 82.6606 253.281 101.028 199.197 121.314C151.934 139.037 123.49 136.348 143.823 110.95C148.422 105.208 153.721 99.8623 159.82 95.1695Z", fill: "white", fillOpacity: "0.08" }), jsx("path", { d: "M215.497 227.183C171.451 227.183 135.159 219.871 130.194 210.462H130.187C145.912 241.626 178.21 263.001 215.497 263.001C252.705 263.001 284.942 241.719 300.706 210.664C295.33 219.98 259.232 227.183 215.505 227.183H215.497Z", fill: "#36E0F8", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M284.219 219.607L283.978 219.84C281.275 222.482 256.583 215.986 253.172 218.418C222.389 240.36 182.779 269.061 146.099 219.397C146.099 219.397 140.761 217.641 138.609 216.686C139.425 217.96 140.279 219.226 141.165 220.469C170.425 261.516 227.423 271.073 268.47 241.813C276.97 235.752 284.118 228.503 289.852 220.454L292.424 216.841L288.252 218.302C287.086 218.713 285.851 219.11 284.553 219.498L284.227 219.599L284.219 219.607Z", fill: "black" }), jsx("path", { d: "M215.496 241.4C262.183 241.4 300.03 226.557 300.03 208.248C300.03 189.938 262.183 175.095 215.496 175.095C168.81 175.095 130.963 189.938 130.963 208.248C130.963 226.557 168.81 241.4 215.496 241.4Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M300.705 210.659C300.705 210.659 300.705 210.65 300.705 210.641C300.705 210.641 300.705 210.65 300.705 210.659Z", fill: "#EBE9E9", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 204.511C208.952 204.511 221.377 199.638 221.377 193.626C221.377 187.614 208.952 182.741 193.624 182.741C178.297 182.741 165.871 187.614 165.871 193.626C165.871 199.638 178.297 204.511 193.624 204.511Z", fill: "#D0F500", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 204.511C208.954 204.511 221.377 199.64 221.377 193.626V201.349C221.377 207.363 208.954 212.234 193.624 212.234C178.295 212.234 165.871 207.363 165.871 201.349V193.626C165.871 199.64 178.295 204.511 193.624 204.511Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M197.33 204.41C199.49 204.294 201.573 204.084 203.546 203.789V211.512C201.573 211.807 199.49 212.017 197.33 212.133V204.41Z", fill: "#D0F500" }), jsx("path", { d: "M206.398 203.291C211.246 202.304 215.255 200.774 217.905 198.901V206.624C215.255 208.497 211.246 210.027 206.398 211.014V203.291Z", fill: "black" }), jsx("path", { d: "M193.624 204.511C208.954 204.511 221.377 199.64 221.377 193.626V201.349C221.377 207.363 208.954 212.234 193.624 212.234C178.295 212.234 165.871 207.363 165.871 201.349V193.626C165.871 199.64 178.295 204.511 193.624 204.511Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M206.398 211.015C211.246 210.028 215.255 208.497 217.905 206.625", stroke: "#A66CFF", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 196.788C208.952 196.788 221.377 191.914 221.377 185.903C221.377 179.891 208.952 175.017 193.624 175.017C178.297 175.017 165.871 179.891 165.871 185.903C165.871 191.914 178.297 196.788 193.624 196.788Z", fill: "#D0F500", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 196.788C208.954 196.788 221.377 191.917 221.377 185.903V193.626C221.377 199.639 208.954 204.511 193.624 204.511C178.295 204.511 165.871 199.639 165.871 193.626V185.903C165.871 191.917 178.295 196.788 193.624 196.788Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M197.33 196.687C199.49 196.57 201.573 196.361 203.546 196.065V203.788C201.573 204.084 199.49 204.293 197.33 204.41V196.687Z", fill: "#36E0F8" }), jsx("path", { d: "M206.398 195.568C211.246 194.581 215.255 193.051 217.905 191.178V198.901C215.255 200.774 211.246 202.304 206.398 203.291V195.568Z", fill: "black" }), jsx("path", { d: "M193.624 196.788C208.954 196.788 221.377 191.917 221.377 185.903V193.626C221.377 199.639 208.954 204.511 193.624 204.511C178.295 204.511 165.871 199.639 165.871 193.626V185.903C165.871 191.917 178.295 196.788 193.624 196.788Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M206.398 203.291C211.246 202.304 215.255 200.774 217.905 198.901", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 189.065C208.952 189.065 221.377 184.192 221.377 178.18C221.377 172.168 208.952 167.294 193.624 167.294C178.297 167.294 165.871 172.168 165.871 178.18C165.871 184.192 178.297 189.065 193.624 189.065Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.624 189.065C208.954 189.065 221.377 184.194 221.377 178.18V185.903C221.377 191.917 208.954 196.788 193.624 196.788C178.295 196.788 165.871 191.917 165.871 185.903V178.18C165.871 184.194 178.295 189.065 193.624 189.065Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M197.33 188.965C199.49 188.849 201.573 188.639 203.546 188.343V196.067C201.573 196.362 199.49 196.571 197.33 196.688V188.965Z", fill: "#F191FA" }), jsx("path", { d: "M206.398 187.845C211.246 186.858 215.255 185.327 217.905 183.455V191.178C215.255 193.05 211.246 194.581 206.398 195.568V187.845Z", fill: "black" }), jsx("path", { d: "M193.624 189.065C208.954 189.065 221.377 184.194 221.377 178.18V185.903C221.377 191.917 208.954 196.788 193.624 196.788C178.295 196.788 165.871 191.917 165.871 185.903V178.18C165.871 184.194 178.295 189.065 193.624 189.065Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M206.398 195.569C211.246 194.582 215.255 193.052 217.905 191.179", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 212.934C253.929 212.934 266.354 208.06 266.354 202.049C266.354 196.037 253.929 191.164 238.601 191.164C223.274 191.164 210.848 196.037 210.848 202.049C210.848 208.06 223.274 212.934 238.601 212.934Z", fill: "#D0F500", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 212.935C253.931 212.935 266.354 208.063 266.354 202.049V209.772C266.354 215.786 253.931 220.658 238.601 220.658C223.272 220.658 210.848 215.786 210.848 209.772V202.049C210.848 208.063 223.272 212.935 238.601 212.935Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M242.307 212.833C244.467 212.717 246.55 212.507 248.523 212.212V219.935C246.55 220.23 244.467 220.44 242.307 220.556V212.833Z", fill: "#F191FA" }), jsx("path", { d: "M251.375 211.713C256.223 210.727 260.232 209.196 262.882 207.324V215.047C260.232 216.919 256.223 218.45 251.375 219.436V211.713Z", fill: "black" }), jsx("path", { d: "M238.601 212.935C253.931 212.935 266.354 208.063 266.354 202.049V209.772C266.354 215.786 253.931 220.658 238.601 220.658C223.272 220.658 210.848 215.786 210.848 209.772V202.049C210.848 208.063 223.272 212.935 238.601 212.935Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M251.375 219.437C256.223 218.45 260.232 216.919 262.882 215.047", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 205.21C253.929 205.21 266.354 200.336 266.354 194.324C266.354 188.313 253.929 183.439 238.601 183.439C223.274 183.439 210.848 188.313 210.848 194.324C210.848 200.336 223.274 205.21 238.601 205.21Z", fill: "#D0F500", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 205.21C253.931 205.21 266.354 200.339 266.354 194.325V202.048C266.354 208.062 253.931 212.934 238.601 212.934C223.272 212.934 210.848 208.062 210.848 202.048V194.325C210.848 200.339 223.272 205.21 238.601 205.21Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M242.307 205.109C244.467 204.993 246.55 204.783 248.523 204.488V212.211C246.55 212.506 244.467 212.716 242.307 212.832V205.109Z", fill: "#36E0F8" }), jsx("path", { d: "M251.375 203.989C256.223 203.003 260.232 201.472 262.882 199.6V207.323C260.232 209.195 256.223 210.726 251.375 211.712V203.989Z", fill: "black" }), jsx("path", { d: "M238.601 205.21C253.931 205.21 266.354 200.339 266.354 194.325V202.048C266.354 208.062 253.931 212.934 238.601 212.934C223.272 212.934 210.848 208.062 210.848 202.048V194.325C210.848 200.339 223.272 205.21 238.601 205.21Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M251.375 211.713C256.223 210.726 260.232 209.195 262.882 207.323", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 197.487C253.929 197.487 266.354 192.613 266.354 186.602C266.354 180.59 253.929 175.716 238.601 175.716C223.274 175.716 210.848 180.59 210.848 186.602C210.848 192.613 223.274 197.487 238.601 197.487Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M238.601 197.487C253.931 197.487 266.354 192.616 266.354 186.602V194.325C266.354 200.339 253.931 205.21 238.601 205.21C223.272 205.21 210.848 200.339 210.848 194.325V186.602C210.848 192.616 223.272 197.487 238.601 197.487Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M242.307 197.386C244.467 197.27 246.55 197.06 248.523 196.765V204.488C246.55 204.783 244.467 204.992 242.307 205.109V197.386Z", fill: "#F191FA" }), jsx("path", { d: "M251.375 196.267C256.223 195.28 260.232 193.75 262.882 191.877V199.6C260.232 201.473 256.223 203.003 251.375 203.99V196.267Z", fill: "#9AEFFB" }), jsx("path", { d: "M238.601 197.487C253.931 197.487 266.354 192.616 266.354 186.602V194.325C266.354 200.339 253.931 205.21 238.601 205.21C223.272 205.21 210.848 200.339 210.848 194.325V186.602C210.848 192.616 223.272 197.487 238.601 197.487Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M251.375 203.99C256.223 203.004 260.232 201.473 262.882 199.601", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M232.652 189.678C247.979 189.678 260.405 184.804 260.405 178.793C260.405 172.781 247.979 167.908 232.652 167.908C217.324 167.908 204.899 172.781 204.899 178.793C204.899 184.804 217.324 189.678 232.652 189.678Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M232.652 189.678C247.981 189.678 260.405 184.807 260.405 178.793V186.516C260.405 192.53 247.981 197.401 232.652 197.401C217.323 197.401 204.899 192.53 204.899 186.516V178.793C204.899 184.807 217.323 189.678 232.652 189.678Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M236.358 189.578C238.518 189.461 240.6 189.251 242.574 188.956V196.679C240.6 196.974 238.518 197.184 236.358 197.301V189.578Z", fill: "#F191FA" }), jsx("path", { d: "M245.426 188.458C250.274 187.471 254.283 185.94 256.932 184.067V191.791C254.283 193.663 250.274 195.194 245.426 196.18V188.458Z", fill: "black" }), jsx("path", { d: "M232.652 189.678C247.981 189.678 260.405 184.807 260.405 178.793V186.516C260.405 192.53 247.981 197.401 232.652 197.401C217.323 197.401 204.899 192.53 204.899 186.516V178.793C204.899 184.807 217.323 189.678 232.652 189.678Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M245.426 196.182C250.274 195.195 254.283 193.664 256.932 191.792", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M240.99 180.021C256.317 180.021 268.743 175.148 268.743 169.136C268.743 163.124 256.317 158.25 240.99 158.25C225.662 158.25 213.237 163.124 213.237 169.136C213.237 175.148 225.662 180.021 240.99 180.021Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M240.99 180.021C256.319 180.021 268.743 175.15 268.743 169.136V176.859C268.743 182.873 256.319 187.744 240.99 187.744C225.66 187.744 213.237 182.873 213.237 176.859V169.136C213.237 175.15 225.66 180.021 240.99 180.021Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M244.696 179.92C246.856 179.804 248.938 179.594 250.911 179.299V187.022C248.938 187.317 246.856 187.527 244.696 187.643V179.92Z", fill: "#9AEFFB" }), jsx("path", { d: "M253.763 178.801C258.612 177.815 262.621 176.284 265.27 174.412V182.135C262.621 184.007 258.612 185.538 253.763 186.524V178.801Z", fill: "black" }), jsx("path", { d: "M240.99 180.021C256.319 180.021 268.743 175.15 268.743 169.136V176.859C268.743 182.873 256.319 187.744 240.99 187.744C225.66 187.744 213.237 182.873 213.237 176.859V169.136C213.237 175.15 225.66 180.021 240.99 180.021Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M253.763 186.525C258.612 185.538 262.621 184.007 265.27 182.135", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M189.911 223.803C205.238 223.803 217.664 218.929 217.664 212.918C217.664 206.906 205.238 202.032 189.911 202.032C174.583 202.032 162.158 206.906 162.158 212.918C162.158 218.929 174.583 223.803 189.911 223.803Z", fill: "#F191FA", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M189.911 223.803C205.24 223.803 217.664 218.932 217.664 212.918V220.641C217.664 226.655 205.24 231.526 189.911 231.526C174.581 231.526 162.158 226.655 162.158 220.641V212.918C162.158 218.932 174.581 223.803 189.911 223.803Z", fill: "#E4F4F7", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M193.625 223.71C195.785 223.593 197.867 223.384 199.84 223.088V230.811C197.867 231.107 195.785 231.316 193.625 231.433V223.71Z", fill: "#F191FA" }), jsx("path", { d: "M202.685 222.583C207.533 221.596 211.542 220.066 214.191 218.193V225.916C211.542 227.789 207.533 229.319 202.685 230.306V222.583Z", fill: "#9AEFFB" }), jsx("path", { d: "M189.911 223.803C205.24 223.803 217.664 218.932 217.664 212.918V220.641C217.664 226.655 205.24 231.526 189.911 231.526C174.581 231.526 162.158 226.655 162.158 220.641V212.918C162.158 218.932 174.581 223.803 189.911 223.803Z", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M202.685 230.306C207.533 229.32 211.542 227.789 214.191 225.917", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M300.705 210.658C300.705 210.658 300.705 210.649 300.705 210.641C300.705 210.641 300.705 210.649 300.705 210.658Z", fill: "#A66CFF", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round" })] }) }) }));
|