@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,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { T as TokenImage } from './TokenImage-
|
|
3
|
-
import { f as fetchRiskAssessmentV2, r as resultHasSanctionedWallets, F as FeesBreakdown } from './FeesBreakdown-
|
|
1
|
+
import { r as reactExports, ac as hFlex, ad as _defineProperty, ae as _objectWithoutProperties, af as useForwardLocalDomRef, ag as _slicedToArray, ah as useResizeObserver, Q as useTheme, ai as usePrevious, aj as useGetMotionProfile, ak as useBrowserEffect, al as merge, am as getHeadingTextStyles, an as getMotionProfileSx, ao as useConvertSxToEmotionStyles, ap as DUMMY_WIDTH_PUSHER_TEXT, v as jsxs, q as jsx, x as Box, aq as useGetSubcomponentChild, ar as flattenChildren, as as vFlex, at as centerFlexChildren, au as SmartClone, av as FormControlLabel, aw as FormControlValidation, ax as FormControlCaption, w, d as de, ay as getDefaultExportFromCjs, az as commonjsGlobal, h as useTranslation, aA as Drawer, aB as Divider, H as Heading, y as Button, aC as useProvidersContext, F as useAnalytics, aD as WalletDrawer, aE as UnableToConnectDrawer, aF as Fragment, aG as Ue, U as UserJourney, aH as removeSpace, aI as getProviderSlugFromRdns, aJ as L, aK as isPassportProvider, aL as connectEIP6963Provider, aM as identifyUser, aN as ConnectEIP6963ProviderError, aO as ProvidersContextActions, aP as MenuItem, aQ as Ce, aR as SQUID_NATIVE_TOKEN, aS as commonjsRequire, W as getRemoteImage, aT as OnboardingPagination, aU as ViewContext, aV as useHandover, G as EventTargetContext, aW as HandoverTarget, V as ViewActions, k as getRemoteRive, aX as APPROVE_TXN_ANIMATION, aY as RiveStateMachineInput, aZ as HandoverContent, a_ as keyframes, B as Be, a$ as isNativeToken, b0 as getTokenImageByAddress, b1 as FramedImage, b2 as FramedIcon, b3 as ButtCon, b4 as TextInput, b5 as VerticalMenu, K as getDefaultTokenImage, b6 as TOKEN_PRIORITY_ORDER, A as Body, b7 as EllipsizedText, b8 as Tooltip, b9 as Sticker, ba as getDurationFormatted, bb as getTotalRouteFees, bc as getRouteAndTokenBalances, S as Stack, bd as Icon, be as Badge, bf as getFormattedAmounts, bg as getRemoteVideo, bh as FramedVideo, bi as listVariants, bj as motion, bk as listItemVariants, bl as Banner, bm as useRoutes, bn as useInjectedProviders, bo as X, bp as RouteError, z as SimpleLayout, bq as dist, O as orchestrationEvents, b as parseUnits, a5 as SharedViews, br as SquidFooter, bs as TOOLKIT_SQUID_URL, bt as merge$1, bu as SvgIcon, bv as WalletWarningHero, bw as getFormattedNumber, bx as FIXED_HANDOVER_DURATION, by as EXECUTE_TXN_ANIMATION, L as Link, bz as Trans, bA as useExecute, bB as getRouteChains, bC as t, bD as convertToNetworkChangeableProvider, bE as verifyAndSwitchChain, bF as PriceDisplay, a0 as LoadingView, bG as getFromAmountData, bH as viewReducer, bI as initialViewState, bJ as useSquid, bK as useTokens, bL as v4, bM as r, bN as isValidAddress, P as amountInputValidation, bO as fetchChains, bP as fetchBalances, R as CloudImage, a6 as ErrorView, bQ as ServiceUnavailableErrorView } from './index-BDE66Im8.js';
|
|
2
|
+
import { T as TokenImage } from './TokenImage-DiRHQD1a.js';
|
|
3
|
+
import { f as fetchRiskAssessmentV2, r as resultHasSanctionedWallets, F as FeesBreakdown } from './FeesBreakdown-CIuOWa2U.js';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* The function `useInterval` sets up an interval that repeatedly calls a given callback function with
|
|
@@ -292,9 +292,9 @@ HeroFormControl.inputs = SUPPORTED_INPUT_COMPONENTS_MAP;
|
|
|
292
292
|
|
|
293
293
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
294
294
|
function sendAddTokensCloseEvent(eventTarget) {
|
|
295
|
-
const closeWidgetEvent = new CustomEvent(
|
|
295
|
+
const closeWidgetEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
|
|
296
296
|
detail: {
|
|
297
|
-
type:
|
|
297
|
+
type: de.CLOSE_WIDGET,
|
|
298
298
|
data: {},
|
|
299
299
|
},
|
|
300
300
|
});
|
|
@@ -305,9 +305,9 @@ function sendAddTokensCloseEvent(eventTarget) {
|
|
|
305
305
|
eventTarget.dispatchEvent(closeWidgetEvent);
|
|
306
306
|
}
|
|
307
307
|
function sendConnectProviderSuccessEvent(eventTarget, providerType, provider, providerInfo) {
|
|
308
|
-
const successEvent = new CustomEvent(
|
|
308
|
+
const successEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
|
|
309
309
|
detail: {
|
|
310
|
-
type:
|
|
310
|
+
type: de.CONNECT_SUCCESS,
|
|
311
311
|
data: {
|
|
312
312
|
provider,
|
|
313
313
|
providerType,
|
|
@@ -321,9 +321,9 @@ function sendConnectProviderSuccessEvent(eventTarget, providerType, provider, pr
|
|
|
321
321
|
eventTarget.dispatchEvent(successEvent);
|
|
322
322
|
}
|
|
323
323
|
const sendAddTokensSuccessEvent = (eventTarget, transactionHash) => {
|
|
324
|
-
const successEvent = new CustomEvent(
|
|
324
|
+
const successEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
|
|
325
325
|
detail: {
|
|
326
|
-
type:
|
|
326
|
+
type: de.SUCCESS,
|
|
327
327
|
data: {
|
|
328
328
|
transactionHash,
|
|
329
329
|
},
|
|
@@ -335,9 +335,9 @@ const sendAddTokensSuccessEvent = (eventTarget, transactionHash) => {
|
|
|
335
335
|
eventTarget.dispatchEvent(successEvent);
|
|
336
336
|
};
|
|
337
337
|
const sendAddTokensFailedEvent = (eventTarget, reason) => {
|
|
338
|
-
const failedEvent = new CustomEvent(
|
|
338
|
+
const failedEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
|
|
339
339
|
detail: {
|
|
340
|
-
type:
|
|
340
|
+
type: de.FAILURE,
|
|
341
341
|
data: {
|
|
342
342
|
reason,
|
|
343
343
|
timestamp: new Date().getTime(),
|
|
@@ -929,9 +929,9 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
|
|
|
929
929
|
walletRdns: info.rdns,
|
|
930
930
|
},
|
|
931
931
|
});
|
|
932
|
-
if (info.rdns ===
|
|
932
|
+
if (info.rdns === Ue.PASSPORT) {
|
|
933
933
|
const { isConnected } = await checkout.checkIsWalletConnected({
|
|
934
|
-
provider: new
|
|
934
|
+
provider: new L(providerDetail.provider),
|
|
935
935
|
});
|
|
936
936
|
if (isConnected) {
|
|
937
937
|
if ((providerType === 'from' && !lockedToProvider)
|
|
@@ -975,7 +975,7 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
|
|
|
975
975
|
// Keep prev wallet change event
|
|
976
976
|
prevWalletChangeEvent.current = event;
|
|
977
977
|
const { info } = event.providerDetail;
|
|
978
|
-
if (providerType === 'to' && info.rdns !==
|
|
978
|
+
if (providerType === 'to' && info.rdns !== Ue.PASSPORT) {
|
|
979
979
|
setShowEOAWarningDrawer(true);
|
|
980
980
|
return;
|
|
981
981
|
}
|
|
@@ -1046,7 +1046,7 @@ function convertToUsd(tokens, amount, token) {
|
|
|
1046
1046
|
}
|
|
1047
1047
|
const address = token.address === 'native' ? SQUID_NATIVE_TOKEN : token.address;
|
|
1048
1048
|
const toToken = tokens.find((value) => value.address.toLowerCase() === address.toLowerCase()
|
|
1049
|
-
&& value.chainId ===
|
|
1049
|
+
&& value.chainId === Ce.IMTBL_ZKEVM_MAINNET.toString());
|
|
1050
1050
|
if (!toToken) {
|
|
1051
1051
|
return 0;
|
|
1052
1052
|
}
|
|
@@ -4154,7 +4154,7 @@ function TokenDrawerMenu({ checkout, config, toTokenAddress, addTokensState, add
|
|
|
4154
4154
|
(async () => {
|
|
4155
4155
|
try {
|
|
4156
4156
|
const tokenResponse = await checkout.getTokenAllowList({
|
|
4157
|
-
type:
|
|
4157
|
+
type: Be.SWAP,
|
|
4158
4158
|
chainId: checkout.config.l2ChainId,
|
|
4159
4159
|
});
|
|
4160
4160
|
if (tokenResponse?.tokens.length > 0) {
|
|
@@ -4553,7 +4553,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4553
4553
|
const walletOptions = reactExports.useMemo(() => providers
|
|
4554
4554
|
// TODO: Check if must filter passport on L1
|
|
4555
4555
|
.map((detail) => {
|
|
4556
|
-
if (detail.info.rdns ===
|
|
4556
|
+
if (detail.info.rdns === Ue.PASSPORT) {
|
|
4557
4557
|
return {
|
|
4558
4558
|
...detail,
|
|
4559
4559
|
info: {
|
|
@@ -4574,7 +4574,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4574
4574
|
await identifyUser(identify, toProvider, { anonymousId });
|
|
4575
4575
|
})();
|
|
4576
4576
|
}, [toProvider, lockedToProvider]);
|
|
4577
|
-
const toChain = reactExports.useMemo(() => chains?.find((chain) => chain.id ===
|
|
4577
|
+
const toChain = reactExports.useMemo(() => chains?.find((chain) => chain.id === Ce.IMTBL_ZKEVM_MAINNET.toString()), [chains]);
|
|
4578
4578
|
reactExports.useEffect(() => {
|
|
4579
4579
|
if (!id || isSwapAvailable === undefined) {
|
|
4580
4580
|
return;
|
|
@@ -4589,7 +4589,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4589
4589
|
geoBlocked: !isSwapAvailable,
|
|
4590
4590
|
},
|
|
4591
4591
|
}).then((ctx) => {
|
|
4592
|
-
|
|
4592
|
+
X('commerce', `addTokensLoaded_${ctx.event.messageId}`);
|
|
4593
4593
|
});
|
|
4594
4594
|
}, [id, isSwapAvailable]);
|
|
4595
4595
|
reactExports.useEffect(() => {
|
|
@@ -4615,7 +4615,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4615
4615
|
&& isValidAmount) {
|
|
4616
4616
|
setFetchingRoutes(true);
|
|
4617
4617
|
try {
|
|
4618
|
-
const availableRoutes = await fetchRoutes(squid, tokens, balances,
|
|
4618
|
+
const availableRoutes = await fetchRoutes(squid, tokens, balances, Ce.IMTBL_ZKEVM_MAINNET.toString(), selectedToken.address === 'native'
|
|
4619
4619
|
? SQUID_NATIVE_TOKEN
|
|
4620
4620
|
: selectedToken.address, selectedAmount, 5, 1000, isSwapAvailable);
|
|
4621
4621
|
addTokensDispatch({
|
|
@@ -4669,7 +4669,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4669
4669
|
const fetchOnRampTokens = async () => {
|
|
4670
4670
|
try {
|
|
4671
4671
|
const tokenResponse = await checkout.getTokenAllowList({
|
|
4672
|
-
type:
|
|
4672
|
+
type: Be.ONRAMP,
|
|
4673
4673
|
chainId: checkout.config.l2ChainId,
|
|
4674
4674
|
});
|
|
4675
4675
|
if (tokenResponse?.tokens.length > 0) {
|
|
@@ -4700,7 +4700,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4700
4700
|
showBackButton: true,
|
|
4701
4701
|
provider: toProvider,
|
|
4702
4702
|
};
|
|
4703
|
-
orchestrationEvents.sendRequestOnrampEvent(eventTarget,
|
|
4703
|
+
orchestrationEvents.sendRequestOnrampEvent(eventTarget, w.IMTBL_ADD_TOKENS_WIDGET_EVENT, data);
|
|
4704
4704
|
};
|
|
4705
4705
|
const handleCardClick = () => {
|
|
4706
4706
|
setPayWithCardClicked(true);
|
|
@@ -4766,7 +4766,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
|
|
|
4766
4766
|
type: AddTokensWidgetViews.REVIEW,
|
|
4767
4767
|
data: {
|
|
4768
4768
|
balance: selectedRouteData.amountData.balance,
|
|
4769
|
-
toChainId:
|
|
4769
|
+
toChainId: Ce.IMTBL_ZKEVM_MAINNET.toString(),
|
|
4770
4770
|
toTokenAddress: selectedToken.address,
|
|
4771
4771
|
toAmount: selectedAmount,
|
|
4772
4772
|
additionalBuffer: selectedRouteData.amountData.additionalBuffer,
|
|
@@ -5294,9 +5294,9 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
|
|
|
5294
5294
|
action: 'Succeeded',
|
|
5295
5295
|
extras: {
|
|
5296
5296
|
contextId: id,
|
|
5297
|
-
...(route.route.params.fromChain !==
|
|
5297
|
+
...(route.route.params.fromChain !== Ce.IMTBL_ZKEVM_MAINNET.toString()
|
|
5298
5298
|
&& { txHash: executeTxnReceipt.hash }),
|
|
5299
|
-
...(route.route.params.fromChain ===
|
|
5299
|
+
...(route.route.params.fromChain === Ce.IMTBL_ZKEVM_MAINNET.toString()
|
|
5300
5300
|
&& { immutableZkEVMTxHash: executeTxnReceipt.hash }),
|
|
5301
5301
|
toTokenAddress: route.route.params.toToken,
|
|
5302
5302
|
toTokenChainId: route.route.params.toChain,
|
|
@@ -5310,7 +5310,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
|
|
|
5310
5310
|
toTokenSymbol: amountData?.toToken.symbol,
|
|
5311
5311
|
},
|
|
5312
5312
|
}).then((ctx) => {
|
|
5313
|
-
|
|
5313
|
+
X('commerce', `addTokensFundsAdded_${ctx.event.messageId}`);
|
|
5314
5314
|
});
|
|
5315
5315
|
sendAddTokensSuccessEvent(eventTarget, executeTxnReceipt.hash);
|
|
5316
5316
|
if (toChain === fromChain) {
|
|
@@ -5461,7 +5461,7 @@ function AddTokensWidget({ showOnrampOption = true, showSwapOption = true, showB
|
|
|
5461
5461
|
return undefined;
|
|
5462
5462
|
}, [experiments, toTokenAddressParameter]);
|
|
5463
5463
|
reactExports.useEffect(() => {
|
|
5464
|
-
if (config.environment !==
|
|
5464
|
+
if (config.environment !== r.PRODUCTION) {
|
|
5465
5465
|
showErrorHandover(AddTokensErrorTypes.ENVIRONMENT_ERROR, { contextId: id });
|
|
5466
5466
|
}
|
|
5467
5467
|
}, [config, id]);
|
|
@@ -5549,7 +5549,7 @@ function AddTokensWidget({ showOnrampOption = true, showSwapOption = true, showB
|
|
|
5549
5549
|
objectFit: 'cover',
|
|
5550
5550
|
objectPosition: 'center',
|
|
5551
5551
|
} }), viewState.view.type === AddTokensWidgetViews.ADD_TOKENS && (jsx(AddTokens, { config: config, checkout: checkout, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddTokensCloseEvent(eventTarget), onBackButtonClick: () => {
|
|
5552
|
-
orchestrationEvents.sendRequestGoBackEvent(eventTarget,
|
|
5552
|
+
orchestrationEvents.sendRequestGoBackEvent(eventTarget, w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {});
|
|
5553
5553
|
} })), viewState.view.type === AddTokensWidgetViews.REVIEW && (jsx(Review, { data: viewState.view.data, onCloseButtonClick: () => sendAddTokensCloseEvent(eventTarget), onBackButtonClick: () => {
|
|
5554
5554
|
viewDispatch({
|
|
5555
5555
|
payload: {
|