@imtbl/checkout-widgets 2.23.0 → 2.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/{AddTokensWidget-yWyq7OLQ.js → AddTokensWidget-A8qPX24o.js} +28 -28
- package/dist/browser/{BridgeWidget-CATmDIO_.js → BridgeWidget-DqnYCczC.js} +66 -63
- package/dist/browser/{CommerceWidget-DhrvW3LY.js → CommerceWidget-BLVkxF1K.js} +183 -183
- package/dist/browser/{FeesBreakdown-CJ1iZSqV.js → FeesBreakdown-DUJ0v_u-.js} +2 -2
- package/dist/browser/{OnRampWidget-DFpK6y9G.js → OnRampWidget-kBGeaK29.js} +6 -6
- package/dist/browser/{SaleWidget-FaVFeB7_.js → SaleWidget-Cw-IV2SN.js} +69 -69
- package/dist/browser/{SpendingCapHero-CErYZasR.js → SpendingCapHero-cGWTAKp3.js} +1 -1
- package/dist/browser/{SwapWidget-DVtmop3u.js → SwapWidget-beF0gT5f.js} +26 -28
- package/dist/browser/{TokenImage-DNBDOW77.js → TokenImage-z1aQ8ORH.js} +1 -1
- package/dist/browser/{TopUpView-DS2PTxnU.js → TopUpView-BPhi1qH7.js} +8 -8
- package/dist/browser/{WalletApproveHero-DwnhJ2cp.js → WalletApproveHero-F0FFDVaw.js} +5 -5
- package/dist/browser/{WalletWidget-DRTyXwQk.js → WalletWidget-CSUY6YWu.js} +16 -16
- package/dist/browser/{auto-track-Cx4zl4N2.js → auto-track-DDY3EqOr.js} +1 -1
- package/dist/browser/{index-DAvMt4qD.js → index-B6w36rZU.js} +1 -1
- package/dist/browser/{index-CR9tSk3R.js → index-BJ5j0XHC.js} +39448 -19104
- package/dist/browser/{index-80_acPIx.js → index-CSR-_hTG.js} +1 -1
- package/dist/browser/{index-H--siPp4.js → index-CU_ZjjLe.js} +2 -2
- package/dist/browser/{index-rDLgblFR.js → index-CZvWIkbM.js} +1 -1
- package/dist/browser/{index-CRB5iVV1.js → index-DN_nlZpW.js} +1 -1
- package/dist/browser/{index-DtgRZYzr.js → index-NMzUpVld.js} +1 -1
- package/dist/browser/{index-Bl6qZLgE.js → index-UNDKy4kF.js} +1 -1
- package/dist/browser/index.js +1 -1
- package/dist/browser/{index.umd-qJTJsmTH.js → index.umd-_ntE43Kb.js} +1 -1
- package/dist/browser/{useInterval-WIsmLx1z.js → useInterval-D4mF_TNa.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,13 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { S as SelectForm, T as TextInputForm, A as Accordion, b as gasAmountAccordionStyles, a as TransactionRejected, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './WalletApproveHero-
|
|
3
|
-
import { u as useInterval } from './useInterval-
|
|
4
|
-
import { S as SwapWidgetViews, T as TopUpView } from './TopUpView-
|
|
5
|
-
import { F as FeesBreakdown, f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-
|
|
6
|
-
import { S as SpendingCapHero } from './SpendingCapHero-
|
|
1
|
+
import { h as useTranslation, v as jsxs, de as quickswapFooterStyles, x as Box, df as quickswapFooterLogoStyles, q as jsx, A as Body, dg as quickswapFooterDisclaimerTextStyles, dh as ve, W as getRemoteImage, r as reactExports, y as Button, aA as Drawer, R as CloudImage, H as Heading, cE as Logo, di as getImxTokenImage, cb as formatUnits, g as calculateCryptoToFiat, J as tokenValueFormat, ci as isGasFree, b as parseUnits, e as formatZeroAmount, cz as ShimmerBox, bF as PriceDisplay, aF as Fragment, dj as getCryptoToUSDConversion, Y as ConnectLoaderContext, a$ as isNativeToken, cR as NATIVE, aU as ViewContext, F as useAnalytics, dk as calculateFeesFiat, U as UserJourney, cU as DEFAULT_QUOTE_REFRESH_INTERVAL, aK as isPassportProvider, dl as parseEther, P as amountInputValidation, b3 as ButtCon, bj as motion, b8 as Tooltip, bd as Icon, bM as r, V as ViewActions, a5 as SharedViews, K as getDefaultTokenImage, dm as ESTIMATE_DEBOUNCE, dn as DEFAULT_TOKEN_VALIDATION_DECIMALS, cZ as DEFAULT_TOKEN_DECIMALS, G as EventTargetContext, a0 as LoadingView, z as SimpleLayout, dp as sendSwapWidgetCloseEvent, O as orchestrationEvents, w, M as HeaderNavigation, cY as IMX_TOKEN_SYMBOL, cy as Se, d1 as SimpleTextBody, d2 as FooterButton, dq as O, c$ as heroBackGroundStyles, d0 as heroImageStyles, bz as Trans, L as Link, aV as useHandover, bH as viewReducer, bI as initialViewState, dr as DEFAULT_BALANCE_RETRY_POLICY, ds as ge, d7 as StatusView, dt as sendSwapSuccessEvent, c6 as StatusType, du as sendSwapFailedEvent, dv as sendSwapRejectedEvent, a6 as ErrorView, bQ as ServiceUnavailableErrorView, B as Be, cP as He } from './index-BJ5j0XHC.js';
|
|
2
|
+
import { S as SelectForm, T as TextInputForm, A as Accordion, b as gasAmountAccordionStyles, a as TransactionRejected, N as NetworkSwitchDrawer, W as WalletApproveHero, g as getAllowedBalances } from './WalletApproveHero-F0FFDVaw.js';
|
|
3
|
+
import { u as useInterval } from './useInterval-D4mF_TNa.js';
|
|
4
|
+
import { S as SwapWidgetViews, T as TopUpView } from './TopUpView-BPhi1qH7.js';
|
|
5
|
+
import { F as FeesBreakdown, f as fetchRiskAssessmentV2, i as isSingleAddressSanctioned } from './FeesBreakdown-DUJ0v_u-.js';
|
|
6
|
+
import { S as SpendingCapHero } from './SpendingCapHero-cGWTAKp3.js';
|
|
7
7
|
|
|
8
8
|
function QuickswapFooter({ theme, environment }) {
|
|
9
9
|
const { t } = useTranslation();
|
|
10
|
-
const logo = theme ===
|
|
10
|
+
const logo = theme === ve.DARK
|
|
11
11
|
? getRemoteImage(environment, '/quickswapdark.webp')
|
|
12
12
|
: getRemoteImage(environment, '/quickswaplight.webp');
|
|
13
13
|
return (jsxs(Box, { testId: "quickswap-footer-container", sx: quickswapFooterStyles, children: [jsxs(Box, { testId: "quickswap-logo", sx: quickswapFooterLogoStyles, children: [jsx(Body, { size: "xSmall", sx: { paddingRight: 'base.spacing.x1' }, children: "By" }), jsx("img", { style: { height: '26px' }, alt: "Quickswap logo", src: logo })] }), jsx(Body, { testId: "quickswap-footer-disclaimer-text", size: "xSmall", sx: quickswapFooterDisclaimerTextStyles, children: t('footers.quickswapFooter.disclaimerText') })] }));
|
|
@@ -1283,7 +1283,7 @@ function SwapForm({ data, theme, themeOverrides, cancelAutoProceed, subTitle, })
|
|
|
1283
1283
|
: 'This token pairing is not available to swap right now. Try another selection.' })] })), !autoProceed && (jsx(SwapButton, { validator: SwapFormValidator, loading: loading, sendTransaction: sendTransaction })), jsx(TransactionRejected, { visible: showTxnRejectedState, showHeaderBar: false, onCloseDrawer: () => setShowTxnRejectedState(false), onRetry: () => {
|
|
1284
1284
|
sendTransaction();
|
|
1285
1285
|
setShowTxnRejectedState(false);
|
|
1286
|
-
} }), jsx(NotEnoughImx, { environment: checkout?.config.environment ??
|
|
1286
|
+
} }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? r.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: fromToken?.address === NATIVE, hasZeroImx: false, onAddCoinsClick: () => {
|
|
1287
1287
|
viewDispatch({
|
|
1288
1288
|
payload: {
|
|
1289
1289
|
type: ViewActions.UPDATE_VIEW,
|
|
@@ -1339,7 +1339,7 @@ function SwapCoins({ theme, themeOverrides, cancelAutoProceed, fromAmount, toAmo
|
|
|
1339
1339
|
}
|
|
1340
1340
|
}, [tokenBalances]);
|
|
1341
1341
|
return (jsxs(SimpleLayout, { header: !autoProceed && showHeader ? (jsx(HeaderNavigation, { title: title, onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget), showBack: showBackButton, onBackButtonClick: () => {
|
|
1342
|
-
orchestrationEvents.sendRequestGoBackEvent(eventTarget,
|
|
1342
|
+
orchestrationEvents.sendRequestGoBackEvent(eventTarget, w.IMTBL_SWAP_WIDGET_EVENT, {});
|
|
1343
1343
|
} })) : undefined, footer: jsx(QuickswapFooter, { environment: checkout?.config.environment, theme: theme }), children: [jsxs(Box, { sx: {
|
|
1344
1344
|
height: '100%',
|
|
1345
1345
|
display: 'flex',
|
|
@@ -1350,7 +1350,7 @@ function SwapCoins({ theme, themeOverrides, cancelAutoProceed, fromAmount, toAmo
|
|
|
1350
1350
|
toAmount,
|
|
1351
1351
|
fromTokenAddress,
|
|
1352
1352
|
toTokenAddress,
|
|
1353
|
-
}, theme: theme, themeOverrides: themeOverrides, subTitle: subTitle }), jsx(NotEnoughImx, { environment: checkout?.config.environment ??
|
|
1353
|
+
}, theme: theme, themeOverrides: themeOverrides, subTitle: subTitle }), jsx(NotEnoughImx, { environment: checkout?.config.environment ?? r.PRODUCTION, visible: showNotEnoughImxDrawer, showAdjustAmount: false, hasZeroImx: true, onAddCoinsClick: () => {
|
|
1354
1354
|
viewDispatch({
|
|
1355
1355
|
payload: {
|
|
1356
1356
|
type: ViewActions.UPDATE_VIEW,
|
|
@@ -1482,8 +1482,8 @@ function ApproveERC20Onboarding({ data }) {
|
|
|
1482
1482
|
});
|
|
1483
1483
|
}, [viewDispatch]);
|
|
1484
1484
|
const handleExceptions = (err, swapFormData) => {
|
|
1485
|
-
if (err instanceof
|
|
1486
|
-
&& err.type ===
|
|
1485
|
+
if (err instanceof O
|
|
1486
|
+
&& err.type === Se.TRANSACTION_FAILED
|
|
1487
1487
|
&& err.message.startsWith('execution reverted: "STF"')) {
|
|
1488
1488
|
viewDispatch({
|
|
1489
1489
|
payload: {
|
|
@@ -1496,8 +1496,8 @@ function ApproveERC20Onboarding({ data }) {
|
|
|
1496
1496
|
});
|
|
1497
1497
|
return;
|
|
1498
1498
|
}
|
|
1499
|
-
if (err.type ===
|
|
1500
|
-
|| err.type ===
|
|
1499
|
+
if (err.type === Se.TRANSACTION_FAILED
|
|
1500
|
+
|| err.type === Se.INSUFFICIENT_FUNDS
|
|
1501
1501
|
|| (err.receipt && err.receipt.status === 0)) {
|
|
1502
1502
|
viewDispatch({
|
|
1503
1503
|
payload: {
|
|
@@ -1576,7 +1576,7 @@ function ApproveERC20Onboarding({ data }) {
|
|
|
1576
1576
|
catch (err) {
|
|
1577
1577
|
setApprovalTxnLoading(false);
|
|
1578
1578
|
setActionDisabled(false);
|
|
1579
|
-
if (err.type ===
|
|
1579
|
+
if (err.type === Se.USER_REJECTED_REQUEST_ERROR) {
|
|
1580
1580
|
setRejectedSpending(true);
|
|
1581
1581
|
return;
|
|
1582
1582
|
}
|
|
@@ -1649,7 +1649,7 @@ function ApproveERC20Onboarding({ data }) {
|
|
|
1649
1649
|
}
|
|
1650
1650
|
catch (err) {
|
|
1651
1651
|
setActionDisabled(false);
|
|
1652
|
-
if (err.type ===
|
|
1652
|
+
if (err.type === Se.USER_REJECTED_REQUEST_ERROR) {
|
|
1653
1653
|
setRejectedSwap(true);
|
|
1654
1654
|
return;
|
|
1655
1655
|
}
|
|
@@ -1714,7 +1714,7 @@ const topUpBridgeOption = (isBridgeEnabled, isNotPassport) => {
|
|
|
1714
1714
|
return {
|
|
1715
1715
|
textKey: 'views.TOP_UP_VIEW.topUpOptions.bridge.heading',
|
|
1716
1716
|
action: () => {
|
|
1717
|
-
orchestrationEvents.sendRequestBridgeEvent(window,
|
|
1717
|
+
orchestrationEvents.sendRequestBridgeEvent(window, w.IMTBL_BRIDGE_WIDGET_EVENT, {
|
|
1718
1718
|
tokenAddress: '',
|
|
1719
1719
|
amount: '',
|
|
1720
1720
|
});
|
|
@@ -1728,7 +1728,7 @@ const topUpOnRampOption = (isOnRampEnabled) => {
|
|
|
1728
1728
|
return {
|
|
1729
1729
|
textKey: 'views.TOP_UP_VIEW.topUpOptions.onramp.heading',
|
|
1730
1730
|
action: () => {
|
|
1731
|
-
orchestrationEvents.sendRequestOnrampEvent(window,
|
|
1731
|
+
orchestrationEvents.sendRequestOnrampEvent(window, w.IMTBL_ONRAMP_WIDGET_EVENT, {
|
|
1732
1732
|
tokenAddress: '',
|
|
1733
1733
|
amount: '',
|
|
1734
1734
|
});
|
|
@@ -1759,9 +1759,7 @@ function GeoblockLoader({ widget, serviceUnavailableView, checkout, }) {
|
|
|
1759
1759
|
}
|
|
1760
1760
|
})();
|
|
1761
1761
|
}, [checkout]);
|
|
1762
|
-
return (
|
|
1763
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
1764
|
-
jsx(Fragment, { children: requested && !isLoading && (available
|
|
1762
|
+
return (jsx(Fragment, { children: requested && !isLoading && (available
|
|
1765
1763
|
? widget
|
|
1766
1764
|
: serviceUnavailableView) }));
|
|
1767
1765
|
}
|
|
@@ -1809,7 +1807,7 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
|
|
|
1809
1807
|
const tokensAndBalances = await getAllowedBalances({
|
|
1810
1808
|
checkout,
|
|
1811
1809
|
provider,
|
|
1812
|
-
allowTokenListType:
|
|
1810
|
+
allowTokenListType: Be.SWAP,
|
|
1813
1811
|
});
|
|
1814
1812
|
// Why? Check getAllowedBalances
|
|
1815
1813
|
if (tokensAndBalances === undefined)
|
|
@@ -1862,7 +1860,7 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
|
|
|
1862
1860
|
payload: {
|
|
1863
1861
|
type: SwapActions.SET_AUTO_PROCEED,
|
|
1864
1862
|
autoProceed: autoProceed ?? false,
|
|
1865
|
-
direction: direction ??
|
|
1863
|
+
direction: direction ?? ge.FROM,
|
|
1866
1864
|
},
|
|
1867
1865
|
});
|
|
1868
1866
|
}, [autoProceed, direction]);
|
|
@@ -1872,17 +1870,17 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
|
|
|
1872
1870
|
payload: {
|
|
1873
1871
|
type: SwapActions.SET_AUTO_PROCEED,
|
|
1874
1872
|
autoProceed: false,
|
|
1875
|
-
direction:
|
|
1873
|
+
direction: ge.FROM,
|
|
1876
1874
|
},
|
|
1877
1875
|
});
|
|
1878
1876
|
}
|
|
1879
1877
|
}, [autoProceed, swapDispatch]);
|
|
1880
|
-
const fromAmount = direction ===
|
|
1881
|
-
const toAmount = direction ===
|
|
1878
|
+
const fromAmount = direction === ge.FROM || direction == null ? amount : undefined;
|
|
1879
|
+
const toAmount = direction === ge.TO ? amount : undefined;
|
|
1882
1880
|
const topUpOptions = reactExports.useMemo(() => {
|
|
1883
1881
|
const optionsArray = [];
|
|
1884
1882
|
const isNotPassport = !isPassportProvider(provider)
|
|
1885
|
-
|| walletProviderName !==
|
|
1883
|
+
|| walletProviderName !== He.PASSPORT;
|
|
1886
1884
|
const isOnramp = topUpOnRampOption(isOnRampEnabled);
|
|
1887
1885
|
if (isOnramp) {
|
|
1888
1886
|
optionsArray.push({ ...isOnramp });
|
|
@@ -1957,7 +1955,7 @@ function SwapWidget({ amount, fromTokenAddress, toTokenAddress, config, autoProc
|
|
|
1957
1955
|
viewDispatch({
|
|
1958
1956
|
payload: { type: ViewActions.UPDATE_VIEW, view: { type: SwapWidgetViews.SWAP } },
|
|
1959
1957
|
});
|
|
1960
|
-
} })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.SWAP }, checkout: checkout, provider: provider, widgetEvent:
|
|
1958
|
+
} })), viewState.view.type === SharedViews.TOP_UP_VIEW && (jsx(TopUpView, { analytics: { userJourney: UserJourney.SWAP }, checkout: checkout, provider: provider, widgetEvent: w.IMTBL_SWAP_WIDGET_EVENT, showOnrampOption: isOnRampEnabled, showSwapOption: isSwapEnabled, showBridgeOption: isBridgeEnabled, onCloseButtonClick: () => sendSwapWidgetCloseEvent(eventTarget) }))] }) })), serviceUnavailableView: (jsx(ServiceUnavailableToRegionErrorView, { service: ServiceType.SWAP, onCloseClick: () => sendSwapWidgetCloseEvent(window), showHeader: showHeader, primaryActionText: topUpOptions && topUpOptions?.length > 0
|
|
1961
1959
|
? t(topUpOptions[0].textKey)
|
|
1962
1960
|
: undefined, onPrimaryButtonClick: topUpOptions && topUpOptions?.length > 0
|
|
1963
1961
|
? topUpOptions[0].action
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as reactExports, K as getDefaultTokenImage, q as jsx } from './index-BJ5j0XHC.js';
|
|
2
2
|
|
|
3
3
|
function TokenImage({ src, name, environment, theme, defaultImage, ...forwardedProps }) {
|
|
4
4
|
const [error, setError] = reactExports.useState(false);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as reactExports, cb as formatUnits, q as jsx, v as jsxs, dH as isDualVariantIcon, aP as MenuItem, x as Box, h as useTranslation, aU as ViewContext, I as CryptoFiatContext, G as EventTargetContext, F as useAnalytics, a1 as CryptoFiatActions, dI as DEFAULT_TOKEN_SYMBOLS, cT as Re, M as HeaderNavigation, H as Heading, A as Body, z as SimpleLayout, w, V as ViewActions, O as orchestrationEvents, bM as r } from './index-BJ5j0XHC.js';
|
|
2
2
|
|
|
3
3
|
var BridgeWidgetViews;
|
|
4
4
|
(function (BridgeWidgetViews) {
|
|
@@ -141,8 +141,8 @@ const useAsyncMemo = (asyncFn, dependencies) => {
|
|
|
141
141
|
};
|
|
142
142
|
|
|
143
143
|
const TOOLKIT_BASE_URL = {
|
|
144
|
-
[
|
|
145
|
-
[
|
|
144
|
+
[r.SANDBOX]: 'https://checkout-playground.sandbox.immutable.com',
|
|
145
|
+
[r.PRODUCTION]: 'https://toolkit.immutable.com',
|
|
146
146
|
};
|
|
147
147
|
function TopUpView({ widgetEvent, checkout,
|
|
148
148
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
@@ -153,7 +153,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
|
|
|
153
153
|
const { viewDispatch } = reactExports.useContext(ViewContext);
|
|
154
154
|
const { cryptoFiatState, cryptoFiatDispatch } = reactExports.useContext(CryptoFiatContext);
|
|
155
155
|
const { conversions, fiatSymbol } = cryptoFiatState;
|
|
156
|
-
const environment = checkout?.config.environment ??
|
|
156
|
+
const environment = checkout?.config.environment ?? r.SANDBOX;
|
|
157
157
|
const { eventTargetState: { eventTarget }, } = reactExports.useContext(EventTargetContext);
|
|
158
158
|
const [onRampFeesPercentage, setOnRampFeesPercentage] = reactExports.useState('-.--');
|
|
159
159
|
const swapFeesInFiat = '0.05';
|
|
@@ -190,7 +190,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
|
|
|
190
190
|
return;
|
|
191
191
|
(async () => {
|
|
192
192
|
const bridgeEstimate = await checkout.gasEstimate({
|
|
193
|
-
gasEstimateType:
|
|
193
|
+
gasEstimateType: Re.BRIDGE_TO_L2,
|
|
194
194
|
});
|
|
195
195
|
const est = await getBridgeFeeEstimation(bridgeEstimate, conversions);
|
|
196
196
|
setBridgeFeesInFiat(est);
|
|
@@ -216,7 +216,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
|
|
|
216
216
|
});
|
|
217
217
|
};
|
|
218
218
|
const onClickSwap = () => {
|
|
219
|
-
if (widgetEvent ===
|
|
219
|
+
if (widgetEvent === w.IMTBL_SWAP_WIDGET_EVENT) {
|
|
220
220
|
const data = {
|
|
221
221
|
toTokenAddress: '',
|
|
222
222
|
fromAmount: '',
|
|
@@ -243,7 +243,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
|
|
|
243
243
|
localTrack('Swap', { ...data, widgetEvent });
|
|
244
244
|
};
|
|
245
245
|
const onClickBridge = () => {
|
|
246
|
-
if (widgetEvent ===
|
|
246
|
+
if (widgetEvent === w.IMTBL_BRIDGE_WIDGET_EVENT) {
|
|
247
247
|
const data = {
|
|
248
248
|
fromTokenAddress: '',
|
|
249
249
|
fromAmount: '',
|
|
@@ -268,7 +268,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
|
|
|
268
268
|
localTrack('Bridge', { ...data, widgetEvent });
|
|
269
269
|
};
|
|
270
270
|
const onClickOnRamp = () => {
|
|
271
|
-
if (widgetEvent ===
|
|
271
|
+
if (widgetEvent === w.IMTBL_ONRAMP_WIDGET_EVENT) {
|
|
272
272
|
const data = {
|
|
273
273
|
tokenAddress: '',
|
|
274
274
|
amount: '',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ac as hFlex,
|
|
2
|
-
import { T as TokenImage } from './TokenImage-
|
|
1
|
+
import { ac as hFlex, q as jsx, dw as motion, ae as _objectWithoutProperties, Q as useTheme, r as reactExports, ag as _slicedToArray, aq as useGetSubcomponentChild, al as merge, v as jsxs, dx as BaseClickable, b3 as ButtCon, au as SmartClone, dy as AnimatePresence, x as Box, S as Stack, dz as ClassNames, ad as _defineProperty, dA as getTertiaryButtonStyles, ar as flattenChildren, dB as isChildSubcomponent, aB as Divider, b4 as TextInput, dC as FormControlWrapper, h as useTranslation, aP as MenuItem, aA as Drawer, A as Body, aF as Fragment, F as useAnalytics, dD as Select, bM as r, dE as DuoCon, H as Heading, y as Button, cJ as retry, cR as NATIVE, b0 as getTokenImageByAddress, a$ as isNativeToken, dr as DEFAULT_BALANCE_RETRY_POLICY, cO as isMetaMaskProvider, R as CloudImage, c5 as FooterLogo, W as getRemoteImage, cM as getChainNameById, cG as isWalletConnectProvider, c$ as heroBackGroundStyles, d0 as heroImageStyles, dF as heroImageBottomAlign } from './index-BJ5j0XHC.js';
|
|
2
|
+
import { T as TokenImage } from './TokenImage-z1aQ8ORH.js';
|
|
3
3
|
|
|
4
4
|
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
5
|
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -371,7 +371,7 @@ function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, chi
|
|
|
371
371
|
return (jsxs(Drawer, { headerBarTitle: heading, size: "full", onCloseDrawer: handleCloseDrawer, visible: visible, bgOverlaySx: drawerBackground ? { background: drawerBackground } : undefined, children: [jsx(Drawer.Target, { children: children }), jsx(Drawer.Content, { children: jsxs(Box, { sx: selectOptionsContainerStyles, children: [optionsLoading && options.length === 0 && (jsxs(Box, { sx: selectOptionsLoadingIconStyles, children: [jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--1" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--2" }), jsx(MenuItem, { shimmer: true, emphasized: true, testId: "balance-item-shimmer--3" })] })), !optionsLoading && options.length === 0 && (jsx(Body, { sx: { padding: 'base.spacing.x4' }, children: t('drawers.coinSelector.noCoins') })), !optionsLoading ? (jsxs(Fragment, { children: [jsx(TextInput, { sx: { marginBottom: 'base.spacing.x4', minWidth: '100%' }, testId: "search-text", onChange: (event) => handleOnChange(event), sizeVariant: "large", value: searchValue, inputMode: "search", placeholder: "name/symbol/contract address", onClearValue: () => setSearchValue(''), hideClearValueButton: false, autoFocus: true, children: jsx(TextInput.Icon, { icon: "Search" }) }), filteredOptions.map(({ onClick, icon, name, symbol, balance, id, testId, }) => (jsx(CoinSelectorOption, { id: id, testId: testId, onClick: onClick, icon: icon, name: name, symbol: symbol, balance: balance, defaultTokenImage: defaultTokenImage }, `${symbol}-${name}`)))] })) : null] }) })] }));
|
|
372
372
|
}
|
|
373
373
|
|
|
374
|
-
function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment =
|
|
374
|
+
function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, userJourney, screen, control, environment = r.PRODUCTION, theme, themeOverrides, }) {
|
|
375
375
|
const { track } = useAnalytics();
|
|
376
376
|
const [coinSelectorOpen, setCoinSelectorOpen] = reactExports.useState(false);
|
|
377
377
|
const coinSelectorOptions = reactExports.useMemo(() => options.map((option) => ({
|
|
@@ -490,8 +490,8 @@ const getAllowedBalances = async ({ checkout, provider, allowTokenListType, chai
|
|
|
490
490
|
|
|
491
491
|
function NetworkSwitchDrawer({ visible, targetChainId, provider, checkout, onCloseDrawer, onNetworkSwitch, }) {
|
|
492
492
|
const { t } = useTranslation();
|
|
493
|
-
const ethImageUrl = getRemoteImage(checkout.config.environment ??
|
|
494
|
-
const zkevmImageUrl = getRemoteImage(checkout.config.environment ??
|
|
493
|
+
const ethImageUrl = getRemoteImage(checkout.config.environment ?? r.PRODUCTION, '/switchnetworkethereum.svg');
|
|
494
|
+
const zkevmImageUrl = getRemoteImage(checkout.config.environment ?? r.PRODUCTION, '/switchnetworkzkevm.svg');
|
|
495
495
|
const targetChainName = getChainNameById(targetChainId);
|
|
496
496
|
const showEthImage = targetChainId === checkout.config.l1ChainId;
|
|
497
497
|
const handleSwitchNetwork = reactExports.useCallback(async () => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ae as _objectWithoutProperties, Q as useTheme, dJ as getStartingSize, dK as DEFAULT_BUTTON_SIZE, al as merge,
|
|
2
|
-
import { T as TokenImage } from './TokenImage-
|
|
3
|
-
import { u as useInterval } from './useInterval-
|
|
1
|
+
import { ae as _objectWithoutProperties, Q as useTheme, dJ as getStartingSize, dK as DEFAULT_BUTTON_SIZE, al as merge, r as reactExports, ar as flattenChildren, q as jsx, dB as isChildSubcomponent, au as SmartClone, x as Box, dL as getResponsiveSx, dM as BUTTON_SIZES, dN as setDefaultSxBackgroundColor, b3 as ButtCon, dz as ClassNames, y as Button, ad as _defineProperty, B as Be, h as useTranslation, aU as ViewContext, v as jsxs, A as Body, V as ViewActions, Y as ConnectLoaderContext, F as useAnalytics, G as EventTargetContext, bM as r, aP as MenuItem, J as tokenValueFormat, U as UserJourney, O as orchestrationEvents, w, e as formatZeroAmount, aK as isPassportProvider, dO as ZERO_BALANCE_STRING, a$ as isNativeToken, dP as sendNetworkSwitchEvent, cy as Se, a5 as SharedViews, dQ as ze, dR as sortNetworksCompareFn, cB as getChainImage, cJ as retry, dr as DEFAULT_BALANCE_RETRY_POLICY, dS as sortTokensByAmount, b0 as getTokenImageByAddress, g as calculateCryptoToFiat, I as CryptoFiatContext, a1 as CryptoFiatActions, M as HeaderNavigation, cQ as ButtonNavigationStyles, dT as sendWalletWidgetCloseEvent, c5 as FooterLogo, z as SimpleLayout, cP as He, cN as getWalletProviderNameByProvider, dH as isDualVariantIcon, ca as abbreviateWalletAddress, H as Heading, aA as Drawer, cD as useWalletConnect, dU as sendDisconnectWalletEvent, cG as isWalletConnectProvider, c$ as heroBackGroundStyles, d0 as heroImageStyles, dF as heroImageBottomAlign, d1 as SimpleTextBody, dV as FAQS_LINK, L as Link, bH as viewReducer, bI as initialViewState, X as CryptoFiatProvider, a0 as LoadingView, a6 as ErrorView } from './index-BJ5j0XHC.js';
|
|
2
|
+
import { T as TokenImage } from './TokenImage-z1aQ8ORH.js';
|
|
3
|
+
import { u as useInterval } from './useInterval-D4mF_TNa.js';
|
|
4
4
|
|
|
5
5
|
var horizontalMenuSxProps = {
|
|
6
6
|
justifyContent: "stretch",
|
|
@@ -263,7 +263,7 @@ const walletReducer = (state, action) => {
|
|
|
263
263
|
|
|
264
264
|
const fetchTokenSymbols = async (checkout, chainId) => {
|
|
265
265
|
const tokenAllowList = await checkout.getTokenAllowList({
|
|
266
|
-
type:
|
|
266
|
+
type: Be.ALL,
|
|
267
267
|
chainId,
|
|
268
268
|
});
|
|
269
269
|
const symbolSet = new Set();
|
|
@@ -339,11 +339,11 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
|
|
|
339
339
|
if (!checkout)
|
|
340
340
|
return;
|
|
341
341
|
const onRampTokens = checkout.getTokenAllowList({
|
|
342
|
-
type:
|
|
342
|
+
type: Be.ONRAMP,
|
|
343
343
|
chainId: checkout.config.l2ChainId,
|
|
344
344
|
});
|
|
345
345
|
const swapTokens = checkout.getTokenAllowList({
|
|
346
|
-
type:
|
|
346
|
+
type: Be.SWAP,
|
|
347
347
|
chainId: checkout.config.l2ChainId,
|
|
348
348
|
});
|
|
349
349
|
const [onRampAllowedTokensResult, swapAllowedTokensResult] = await Promise.all([onRampTokens, swapTokens]);
|
|
@@ -399,18 +399,18 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
|
|
|
399
399
|
},
|
|
400
400
|
});
|
|
401
401
|
if (isAddTokensEnabled) {
|
|
402
|
-
orchestrationEvents.sendRequestAddTokensEvent(eventTarget,
|
|
402
|
+
orchestrationEvents.sendRequestAddTokensEvent(eventTarget, w.IMTBL_WALLET_WIDGET_EVENT, {
|
|
403
403
|
toAmount: '',
|
|
404
404
|
toTokenAddress: balanceInfo.address ?? '',
|
|
405
405
|
});
|
|
406
406
|
return;
|
|
407
407
|
}
|
|
408
|
-
orchestrationEvents.sendRequestOnrampEvent(eventTarget,
|
|
408
|
+
orchestrationEvents.sendRequestOnrampEvent(eventTarget, w.IMTBL_WALLET_WIDGET_EVENT, {
|
|
409
409
|
tokenAddress: balanceInfo.address ?? '',
|
|
410
410
|
amount: '',
|
|
411
411
|
});
|
|
412
412
|
};
|
|
413
|
-
return (jsxs(MenuItem, { testId: `balance-item-${balanceInfo.symbol}`, emphasized: true, children: [jsx(MenuItem.FramedImage, { use: (jsx(TokenImage, { theme: theme, src: balanceInfo.icon, name: balanceInfo.symbol, environment: checkout?.config.environment ??
|
|
413
|
+
return (jsxs(MenuItem, { testId: `balance-item-${balanceInfo.symbol}`, emphasized: true, children: [jsx(MenuItem.FramedImage, { use: (jsx(TokenImage, { theme: theme, src: balanceInfo.icon, name: balanceInfo.symbol, environment: checkout?.config.environment ?? r.PRODUCTION })), circularFrame: true }), jsx(MenuItem.Label, { children: balanceInfo.symbol }), jsx(MenuItem.Caption, { children: balanceInfo.description }), jsx(MenuItem.PriceDisplay, { testId: `balance-item-${balanceInfo.symbol}`, price: tokenValueFormat(balanceInfo.balance), fiatAmount: fiatAmount }), (isOnRampEnabled || isSwapEnabled || isBridgeEnabled || isAddTokensEnabled) && (jsxs(MenuItem.OverflowPopoverMenu, { size: "small", testId: "token-menu", onClick: () => {
|
|
414
414
|
track({
|
|
415
415
|
userJourney: UserJourney.WALLET,
|
|
416
416
|
screen: 'WalletBalances',
|
|
@@ -432,7 +432,7 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
|
|
|
432
432
|
tokenAddress: balanceInfo.address,
|
|
433
433
|
},
|
|
434
434
|
});
|
|
435
|
-
orchestrationEvents.sendRequestSwapEvent(eventTarget,
|
|
435
|
+
orchestrationEvents.sendRequestSwapEvent(eventTarget, w.IMTBL_WALLET_WIDGET_EVENT, {
|
|
436
436
|
fromTokenAddress: balanceInfo.address ?? '',
|
|
437
437
|
toTokenAddress: '',
|
|
438
438
|
amount: '',
|
|
@@ -528,7 +528,7 @@ function NetworkMenu() {
|
|
|
528
528
|
sendNetworkSwitchEvent(eventTarget, switchNetworkResult.provider, switchNetworkResult.network);
|
|
529
529
|
}
|
|
530
530
|
catch (err) {
|
|
531
|
-
if (err.type ===
|
|
531
|
+
if (err.type === Se.USER_REJECTED_REQUEST_ERROR) ;
|
|
532
532
|
else {
|
|
533
533
|
viewDispatch({
|
|
534
534
|
payload: {
|
|
@@ -543,7 +543,7 @@ function NetworkMenu() {
|
|
|
543
543
|
(async () => {
|
|
544
544
|
if (checkout) {
|
|
545
545
|
const allowedNetworksResponse = await checkout.getNetworkAllowList({
|
|
546
|
-
type:
|
|
546
|
+
type: ze.ALL,
|
|
547
547
|
});
|
|
548
548
|
setNetworks(allowedNetworksResponse?.networks ?? []);
|
|
549
549
|
}
|
|
@@ -703,10 +703,10 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
|
|
|
703
703
|
control: 'AddCoins',
|
|
704
704
|
controlType: 'Button',
|
|
705
705
|
});
|
|
706
|
-
orchestrationEvents.sendRequestAddTokensEvent(eventTarget,
|
|
706
|
+
orchestrationEvents.sendRequestAddTokensEvent(eventTarget, w.IMTBL_WALLET_WIDGET_EVENT, {});
|
|
707
707
|
};
|
|
708
708
|
const handleBridgeToL2OnClick = (address) => {
|
|
709
|
-
orchestrationEvents.sendRequestBridgeEvent(eventTarget,
|
|
709
|
+
orchestrationEvents.sendRequestBridgeEvent(eventTarget, w.IMTBL_WALLET_WIDGET_EVENT, {
|
|
710
710
|
tokenAddress: address ?? '',
|
|
711
711
|
amount: '',
|
|
712
712
|
});
|
|
@@ -729,8 +729,8 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
|
|
|
729
729
|
|
|
730
730
|
function getWalletLogoByName(walletProviderName) {
|
|
731
731
|
switch (walletProviderName) {
|
|
732
|
-
case
|
|
733
|
-
case
|
|
732
|
+
case He.METAMASK: return 'MetaMaskSymbol';
|
|
733
|
+
case He.PASSPORT: return 'PassportSymbolOutlined';
|
|
734
734
|
case 'walletconnect': return 'WalletConnectSymbol';
|
|
735
735
|
default: return 'MetaMaskSymbol';
|
|
736
736
|
}
|