@imtbl/checkout-widgets 2.0.0-alpha.9 → 2.0.0

package/dist/browser/{TokenImage-DU_Cg9yk.js → TokenImage-Bc62Xkzv.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, ap as getDefaultTokenImage, j as jsx } from './index-Bizu61HY.js';
+import { r as reactExports, ai as getDefaultTokenImage, l as jsx } from './index-Skcajiao.js';
 
 function TokenImage({ src, name, environment, theme, defaultImage, ...forwardedProps }) {
     const [error, setError] = reactExports.useState(false);

package/dist/browser/{TopUpView-DbE6wlUQ.js → TopUpView-Q4_Glu5-.js}

@@ -1,4 +1,4 @@
-import { r as reactExports, bT as formatUnits, j as jsx, l as jsxs, dk as isDualVariantIcon, a3 as MenuItem, D as Box, bo as K, u as useTranslation, a9 as ViewContext, b$ as CryptoFiatContext, ac as EventTargetContext, N as useAnalytics, c6 as CryptoFiatActions, dl as DEFAULT_TOKEN_SYMBOLS, cC as st, bJ as HeaderNavigation, H as Heading, aA as Body, a_ as SimpleLayout, m as mo, V as ViewActions, b0 as orchestrationEvents } from './index-Bizu61HY.js';
+import { r as reactExports, bM as formatUnits, l as jsx, n as jsxs, dd as isDualVariantIcon, a3 as MenuItem, B as Box, bh as K, c as useTranslation, a9 as ViewContext, bU as CryptoFiatContext, ac as EventTargetContext, K as useAnalytics, b$ as CryptoFiatActions, de as DEFAULT_TOKEN_SYMBOLS, cv as st, bC as HeaderNavigation, H as Heading, at as Body, aT as SimpleLayout, u as uo, V as ViewActions, aV as orchestrationEvents } from './index-Skcajiao.js';
 
 var BridgeWidgetViews;
 (function (BridgeWidgetViews) {
@@ -216,7 +216,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
         });
     };
     const onClickSwap = () => {
-        if (widgetEvent === mo.IMTBL_SWAP_WIDGET_EVENT) {
+        if (widgetEvent === uo.IMTBL_SWAP_WIDGET_EVENT) {
             const data = {
                 toTokenAddress: '',
                 fromAmount: '',
@@ -243,7 +243,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
         localTrack('Swap', { ...data, widgetEvent });
     };
     const onClickBridge = () => {
-        if (widgetEvent === mo.IMTBL_BRIDGE_WIDGET_EVENT) {
+        if (widgetEvent === uo.IMTBL_BRIDGE_WIDGET_EVENT) {
             const data = {
                 fromTokenAddress: '',
                 fromAmount: '',
@@ -268,7 +268,7 @@ showOnrampOption, showSwapOption, showBridgeOption, tokenAddress, amount, analyt
         localTrack('Bridge', { ...data, widgetEvent });
     };
     const onClickOnRamp = () => {
-        if (widgetEvent === mo.IMTBL_ONRAMP_WIDGET_EVENT) {
+        if (widgetEvent === uo.IMTBL_ONRAMP_WIDGET_EVENT) {
             const data = {
                 tokenAddress: '',
                 amount: '',

package/dist/browser/{WalletApproveHero-BKgdFRbV.js → WalletApproveHero-B6YvvCmA.js}

@@ -1,6 +1,6 @@
-import { j as jsx, ay as TextInput, dg as FormControlWrapper, u as useTranslation, l as jsxs, a3 as MenuItem, F as Drawer, D as Box, aA as Body, r as reactExports, dh as Select, bo as K, d2 as Bo, di as DuoCon, H as Heading, K as Button, cp as retry, cz as NATIVE, as as getTokenImageByAddress, ar as isNativeToken, db as DEFAULT_BALANCE_RETRY_POLICY, a6 as getRemoteImage, ct as getChainNameById, b as getL1ChainId, ck as isWalletConnectProvider, cv as isMetaMaskProvider, bt as CloudImage, ax as ButtCon, bM as FooterLogo, cy as formatZeroAmount, bP as tokenValueFormat, ci as Accordion, cd as ShimmerBox, bh as PriceDisplay, O as Fragment, cK as heroBackGroundStyles, cL as heroImageStyles, dj as heroImageBottomAlign } from './index-Bizu61HY.js';
-import { T as TokenImage } from './TokenImage-DU_Cg9yk.js';
-import { F as FeesBreakdown } from './FeesBreakdown-BgEzlEIT.js';
+import { l as jsx, ar as TextInput, d9 as FormControlWrapper, c as useTranslation, n as jsxs, a3 as MenuItem, r as reactExports, D as Drawer, B as Box, at as Body, M as Fragment, da as Select, bh as K, cX as xo, db as DuoCon, H as Heading, F as Button, ci as retry, cs as NATIVE, al as getTokenImageByAddress, ak as isNativeToken, d4 as DEFAULT_BALANCE_RETRY_POLICY, a6 as getRemoteImage, cm as getChainNameById, b as getL1ChainId, cd as isWalletConnectProvider, co as isMetaMaskProvider, bm as CloudImage, aq as ButtCon, bF as FooterLogo, cr as formatZeroAmount, bI as tokenValueFormat, cb as Accordion, c6 as ShimmerBox, ba as PriceDisplay, cD as heroBackGroundStyles, cE as heroImageStyles, dc as heroImageBottomAlign } from './index-Skcajiao.js';
+import { T as TokenImage } from './TokenImage-Bc62Xkzv.js';
+import { F as FeesBreakdown } from './FeesBreakdown-CVvm1-Ei.js';
 
 function TextInputForm({ testId, value, placeholder, errorMessage, validator, onTextInputChange, onTextInputBlur, onTextInputFocus, onTextInputEnter, textAlign, type, subtext, maxButtonClick, disabled, inputMode, }) {
     const handleOnChange = (event, previousValue) => {
@@ -59,12 +59,32 @@ const selectOptionsLoadingIconStyles = {
     rowGap: 'base.spacing.x2',
 };
 
+const filterOptions = (filterBy, options) => {
+    const filterByLower = filterBy.toLowerCase();
+    return options.filter((option) => option.name.toLowerCase().includes(filterByLower)
+        || option.symbol.toLowerCase().includes(filterByLower)
+        || option.id.toLowerCase().endsWith(filterByLower));
+};
 function CoinSelector({ heading, options, defaultTokenImage, optionsLoading, children, onCloseDrawer, visible, }) {
     const { t } = useTranslation();
-    return (jsxs(Drawer, { headerBarTitle: heading, size: "full", onCloseDrawer: onCloseDrawer, visible: visible, 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 && options.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}`)))] }) })] }));
+    const [searchValue, setSearchValue] = reactExports.useState('');
+    const handleOnChange = (event) => {
+        setSearchValue(event.target.value);
+    };
+    const filteredOptions = reactExports.useMemo(() => {
+        if (!searchValue) {
+            return options;
+        }
+        return filterOptions(searchValue, options);
+    }, [options, searchValue, filterOptions]);
+    const handleCloseDrawer = () => {
+        setSearchValue('');
+        onCloseDrawer?.();
+    };
+    return (jsxs(Drawer, { headerBarTitle: heading, size: "full", onCloseDrawer: handleCloseDrawer, visible: visible, 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] }) })] }));
 }
 
-function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, environment = K.PRODUCTION, theme = Bo.DARK, }) {
+function SelectForm({ testId, options, optionsLoading, subtext, onSelectChange, textAlign, errorMessage, disabled, selectedOption, coinSelectorHeading, defaultTokenImage, environment = K.PRODUCTION, theme = xo.DARK, }) {
     const [coinSelectorOpen, setCoinSelectorOpen] = reactExports.useState(false);
     const coinSelectorOptions = reactExports.useMemo(() => options.map((option) => ({
         ...option,

package/dist/browser/{WalletWidget-D370JeUN.js → WalletWidget-B0Up4Cre.js}

@@ -1,6 +1,6 @@
-import { r as reactExports, aq as ae, u as useTranslation, a9 as ViewContext, l as jsxs, D as Box, j as jsx, aA as Body, ax as ButtCon, V as ViewActions, c0 as ConnectLoaderContext, N as useAnalytics, cy as formatZeroAmount, ac as EventTargetContext, _ as isPassportProvider, a as getL2ChainId, b as getL1ChainId, bo as K, a3 as MenuItem, bP as tokenValueFormat, T as UserJourney, b0 as orchestrationEvents, m as mo, dm as ZERO_BALANCE_STRING, ar as isNativeToken, dn as sendNetworkSwitchEvent, cb as k, e as SharedViews, dp as me, dq as sortNetworksCompareFn, dr as HorizontalMenu, cg as getChainImage, cp as retry, db as DEFAULT_BALANCE_RETRY_POLICY, ds as sortTokensByAmount, as as getTokenImageByAddress, bA as calculateCryptoToFiat, b$ as CryptoFiatContext, c6 as CryptoFiatActions, bJ as HeaderNavigation, cx as ButtonNavigationStyles, dt as sendWalletWidgetCloseEvent, bM as FooterLogo, a_ as SimpleLayout, cw as ge, cu as getWalletProviderNameByProvider, dk as isDualVariantIcon, bS as abbreviateWalletAddress, H as Heading, F as Drawer, cj as useWalletConnect, du as sendDisconnectWalletEvent, K as Button, ck as isWalletConnectProvider, cK as heroBackGroundStyles, cL as heroImageStyles, dj as heroImageBottomAlign, cM as SimpleTextBody, dv as FAQS_LINK, ba as Link, bj as viewReducer, bk as initialViewState, c9 as CryptoFiatProvider, L as LoadingView, n as ErrorView } from './index-Bizu61HY.js';
-import { T as TokenImage } from './TokenImage-DU_Cg9yk.js';
-import { u as useInterval } from './useInterval-D7lTeYwU.js';
+import { r as reactExports, aj as ie, c as useTranslation, a9 as ViewContext, n as jsxs, B as Box, l as jsx, at as Body, aq as ButtCon, V as ViewActions, bV as ConnectLoaderContext, K as useAnalytics, cr as formatZeroAmount, ac as EventTargetContext, _ as isPassportProvider, a as getL2ChainId, b as getL1ChainId, bh as K, a3 as MenuItem, bI as tokenValueFormat, Q as UserJourney, aV as orchestrationEvents, u as uo, df as ZERO_BALANCE_STRING, ak as isNativeToken, dg as sendNetworkSwitchEvent, c4 as k, i as SharedViews, dh as ue, di as sortNetworksCompareFn, dj as HorizontalMenu, c9 as getChainImage, ci as retry, d4 as DEFAULT_BALANCE_RETRY_POLICY, dk as sortTokensByAmount, al as getTokenImageByAddress, bt as calculateCryptoToFiat, bU as CryptoFiatContext, b$ as CryptoFiatActions, bC as HeaderNavigation, cq as ButtonNavigationStyles, dl as sendWalletWidgetCloseEvent, bF as FooterLogo, aT as SimpleLayout, cp as me, cn as getWalletProviderNameByProvider, dd as isDualVariantIcon, bL as abbreviateWalletAddress, H as Heading, D as Drawer, cc as useWalletConnect, dm as sendDisconnectWalletEvent, F as Button, cd as isWalletConnectProvider, cD as heroBackGroundStyles, cE as heroImageStyles, dc as heroImageBottomAlign, cF as SimpleTextBody, dn as FAQS_LINK, b3 as Link, bc as viewReducer, bd as initialViewState, c2 as CryptoFiatProvider, L as LoadingView, o as ErrorView } from './index-Skcajiao.js';
+import { T as TokenImage } from './TokenImage-Bc62Xkzv.js';
+import { u as useInterval } from './useInterval-D2CM0YwW.js';
 
 const initialWalletState = {
     walletProviderName: null,
@@ -61,7 +61,7 @@ const walletReducer = (state, action) => {
 
 const fetchTokenSymbols = async (checkout, chainId) => {
     const tokenAllowList = await checkout.getTokenAllowList({
-        type: ae.ALL,
+        type: ie.ALL,
         chainId,
     });
     const symbolSet = new Set();
@@ -137,11 +137,11 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
             if (!checkout)
                 return;
             const onRampTokens = checkout.getTokenAllowList({
-                type: ae.ONRAMP,
+                type: ie.ONRAMP,
                 chainId: getL2ChainId(checkout.config),
             });
             const swapTokens = checkout.getTokenAllowList({
-                type: ae.SWAP,
+                type: ie.SWAP,
                 chainId: getL2ChainId(checkout.config),
             });
             const [onRampAllowedTokensResult, swapAllowedTokensResult] = await Promise.all([onRampTokens, swapTokens]);
@@ -197,13 +197,13 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
             },
         });
         if (isAddTokensEnabled) {
-            orchestrationEvents.sendRequestAddTokensEvent(eventTarget, mo.IMTBL_WALLET_WIDGET_EVENT, {
+            orchestrationEvents.sendRequestAddTokensEvent(eventTarget, uo.IMTBL_WALLET_WIDGET_EVENT, {
                 toAmount: '',
                 toTokenAddress: balanceInfo.address ?? '',
             });
             return;
         }
-        orchestrationEvents.sendRequestOnrampEvent(eventTarget, mo.IMTBL_WALLET_WIDGET_EVENT, {
+        orchestrationEvents.sendRequestOnrampEvent(eventTarget, uo.IMTBL_WALLET_WIDGET_EVENT, {
             tokenAddress: balanceInfo.address ?? '',
             amount: '',
         });
@@ -230,7 +230,7 @@ function BalanceItem({ balanceInfo, theme, bridgeToL2OnClick, }) {
                                     tokenAddress: balanceInfo.address,
                                 },
                             });
-                            orchestrationEvents.sendRequestSwapEvent(eventTarget, mo.IMTBL_WALLET_WIDGET_EVENT, {
+                            orchestrationEvents.sendRequestSwapEvent(eventTarget, uo.IMTBL_WALLET_WIDGET_EVENT, {
                                 fromTokenAddress: balanceInfo.address ?? '',
                                 toTokenAddress: '',
                                 amount: '',
@@ -341,7 +341,7 @@ function NetworkMenu() {
         (async () => {
             if (checkout) {
                 const allowedNetworksResponse = await checkout.getNetworkAllowList({
-                    type: me.ALL,
+                    type: ue.ALL,
                 });
                 setNetworks(allowedNetworksResponse?.networks ?? []);
             }
@@ -501,10 +501,10 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
             control: 'AddCoins',
             controlType: 'Button',
         });
-        orchestrationEvents.sendRequestAddTokensEvent(eventTarget, mo.IMTBL_WALLET_WIDGET_EVENT, {});
+        orchestrationEvents.sendRequestAddTokensEvent(eventTarget, uo.IMTBL_WALLET_WIDGET_EVENT, {});
     };
     const handleBridgeToL2OnClick = (address) => {
-        orchestrationEvents.sendRequestBridgeEvent(eventTarget, mo.IMTBL_WALLET_WIDGET_EVENT, {
+        orchestrationEvents.sendRequestBridgeEvent(eventTarget, uo.IMTBL_WALLET_WIDGET_EVENT, {
             tokenAddress: address ?? '',
             amount: '',
         });
@@ -527,8 +527,8 @@ function WalletBalances({ balancesLoading, theme, showNetworkMenu, }) {
 
 function getWalletLogoByName(walletProviderName) {
     switch (walletProviderName) {
-        case ge.METAMASK: return 'MetaMaskSymbol';
-        case ge.PASSPORT: return 'PassportSymbolOutlined';
+        case me.METAMASK: return 'MetaMaskSymbol';
+        case me.PASSPORT: return 'PassportSymbolOutlined';
         case 'walletconnect': return 'WalletConnectSymbol';
         default: return 'MetaMaskSymbol';
     }

package/dist/browser/{auto-track-gJcTpwWh.js → auto-track-CaL-84Ic.js}

@@ -1,4 +1,4 @@
-import { d$ as pTimeout } from './index-Bizu61HY.js';
+import { dU as pTimeout } from './index-Skcajiao.js';
 
 // Check if a user is opening the link in a new tab
 function userNewTab(event) {

package/dist/browser/{index-BzdV0KgJ.js → index-BI7vXlHL.js}

@@ -1,4 +1,4 @@
-import { dH as __awaiter, dI as __generator, dS as isServer, dK as getNextIntegrationsURL, dJ as loadScript } from './index-Bizu61HY.js';
+import { dA as __awaiter, dB as __generator, dL as isServer, dD as getNextIntegrationsURL, dC as loadScript } from './index-Skcajiao.js';
 
 function remoteMiddlewares(ctx, settings, obfuscate) {
     var _a;

package/dist/browser/{index-DeP8dLpv.js → index-BVzeDoH7.js}

@@ -1,4 +1,4 @@
-import { dH as __awaiter, dI as __generator, dJ as loadScript, dK as getNextIntegrationsURL, dL as unloadScript, dM as __spreadArray, dN as isOffline, dO as __assign, dP as ContextCancelation, dQ as applyDestinationMiddleware, dR as dist, dS as isServer, dT as mergedOptions, dU as isPlainObject, dV as pWhile, dW as PriorityQueue, dX as PersistedPriorityQueue, dY as attempt, dZ as isOnline, d_ as Context } from './index-Bizu61HY.js';
+import { dA as __awaiter, dB as __generator, dC as loadScript, dD as getNextIntegrationsURL, dE as unloadScript, dF as __spreadArray, dG as isOffline, dH as __assign, dI as ContextCancelation, dJ as applyDestinationMiddleware, dK as dist, dL as isServer, dM as mergedOptions, dN as isPlainObject, dO as pWhile, dP as PriorityQueue, dQ as PersistedPriorityQueue, dR as attempt, dS as isOnline, dT as Context } from './index-Skcajiao.js';
 import { i as isPlanEventEnabled } from './is-plan-event-enabled-mXX0dwl-.js';
 
 function normalizeName(name) {

package/dist/browser/{index-CcF1_qRd.js → index-BtnAkpe9.js}

@@ -1,4 +1,4 @@
-import { e0 as gracefulDecodeURIComponent, dU as isPlainObject } from './index-Bizu61HY.js';
+import { dV as gracefulDecodeURIComponent, dN as isPlainObject } from './index-Skcajiao.js';
 
 /**
  * Returns an object containing only the properties prefixed by the input

package/dist/browser/{index-BB_EeO8_.js → index-CBO9u-8Q.js}

@@ -1,4 +1,4 @@
-import { dx as ne$1, dy as se$1, dz as T$2, dA as oe$1, dB as R$1, dC as a$2, dD as te$1, dE as p$1, dF as y$1 } from './index-Bizu61HY.js';
+import { dq as ne$1, dr as se$1, ds as T$2, dt as oe$1, du as R$1, dv as a$2, dw as te$1, dx as p$1, dy as y$1 } from './index-Skcajiao.js';
 
 /**
  * @license
@@ -398,15 +398,6 @@ class Animation {
     }
 }
 
-var invariant = function () { };
-if (production !== 'production') {
-    invariant = function (check, message) {
-        if (!check) {
-            throw new Error(message);
-        }
-    };
-}
-
 /**
  * The MotionValue tracks the state of a single animatable
  * value. Currently, updatedAt and current are unused. The
@@ -941,8 +932,6 @@ function createAnimate(AnimatePolyfill) {
     return function animate(elements, keyframes, options = {}) {
         elements = resolveElements(elements);
         const numElements = elements.length;
-        invariant(Boolean(numElements), "No valid element provided.");
-        invariant(Boolean(keyframes), "No keyframes defined.");
         /**
          * Create and start new animations
          */

package/dist/browser/{index-C_yzaB0L.js → index-Cl7BUGHV.js}

@@ -1,4 +1,4 @@
-import { dH as __awaiter, dI as __generator } from './index-Bizu61HY.js';
+import { dA as __awaiter, dB as __generator } from './index-Skcajiao.js';
 
 function loadLegacyVideoPlugins(analytics) {
     return __awaiter(this, void 0, void 0, function () {
@@ -7,7 +7,7 @@ function loadLegacyVideoPlugins(analytics) {
             switch (_a.label) {
                 case 0: return [4 /*yield*/, import(
                     // @ts-expect-error
-                    './index.umd-oUBivosK.js').then(function (n) { return n.i; })
+                    './index.umd-C0PZl9Xk.js').then(function (n) { return n.i; })
                     // This is super gross, but we need to support the `window.analytics.plugins` namespace
                     // that is linked in the segment docs in order to be backwards compatible with ajs-classic
                     // @ts-expect-error

package/dist/browser/{index-Q-a_-G_9.js → index-Hh-ME3UA.js}

@@ -1,4 +1,4 @@
-import { dG as getAugmentedNamespace, z as commonjsGlobal } from './index-Bizu61HY.js';
+import { dz as getAugmentedNamespace, v as commonjsGlobal } from './index-Skcajiao.js';
 
 var dist$1 = {};
 

package/dist/browser/{index-CSHKiSiI.js → index-JHffH8Bm.js}

@@ -1,4 +1,4 @@
-import { dO as __assign } from './index-Bizu61HY.js';
+import { dH as __assign } from './index-Skcajiao.js';
 import { i as isPlanEventEnabled } from './is-plan-event-enabled-mXX0dwl-.js';
 
 function disabledActionDestinations(plan, settings) {