@funkit/connect 9.0.2 → 9.0.3

package/dist/index.js

@@ -1,16 +1,16 @@
 "use client";
-import {
-  darkTheme
-} from "./chunk-WSCXOKCX.js";
 import {
   lightTheme
 } from "./chunk-XCM74QX2.js";
+import {
+  darkTheme
+} from "./chunk-WSCXOKCX.js";
 import {
   systemFontStack
 } from "./chunk-SC53AFEE.js";
 
 // src/components/Dialog/DialogContent.css.ts
-var DIALOG_HEIGHT = 525;
+var DIALOG_HEIGHT_SWAPPED_IFRAME = 580;
 var DIALOG_WIDTH_WIDE = "450px";
 var SCROLL_BAR_WIDTH = 6;
 var bottomPaddingVariable = "--bottom-padding-value";
@@ -2353,7 +2353,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey, version);
 }
 function getCurrentSdkVersion() {
-  return "9.0.2";
+  return "9.0.3";
 }
 function useFingerprint() {
   const fingerprint = useCallback3(() => {
@@ -2576,8 +2576,7 @@ var DEFAULT_UI_CUSTOMIZATIONS = {
   },
   selectAssetScreen: {
     isSecondaryTokenSymbolVisible: true,
-    navigateOnAssetClick: false,
-    showTargetAssetSelection: false
+    navigateOnAssetClick: false
   },
   transferCryptoScreen: {
     showYouSendYouReceive: false
@@ -7280,7 +7279,20 @@ var flagConfig = {
           {
             key: "apiKey",
             type: "isAnyOf",
-            values: [POLYMARKET_API_KEY2, LIGHTERXYZ_API_KEY2]
+            values: [POLYMARKET_API_KEY2]
+          }
+        ],
+        value: JSON.stringify({
+          ...QR_CODE_WITH_TRON,
+          56: [...COMMON_SUPPORT_CHAINS_AND_ASSETS[56], "U"]
+        })
+      },
+      {
+        if_any: [
+          {
+            key: "apiKey",
+            type: "isAnyOf",
+            values: [LIGHTERXYZ_API_KEY2]
           }
         ],
         value: JSON.stringify(QR_CODE_WITH_TRON)
@@ -20607,6 +20619,8 @@ function buildSwappedTheme(theme) {
   const swappedTheme = {
     colors: {
       ...theme.colors,
+      boxBackground: theme.colors.offBackground,
+      buttonPrimaryHover: theme.colors.buttonBackgroundHover,
       buttonDisabled: theme.colors.buttonBackgroundDisabled,
       headerButtonBackground: theme.colors.modalTopbarIconBackground,
       inputBorder: theme.colors.inputBorderBase,
@@ -20657,7 +20671,7 @@ function buildSwappedThemeQueryParams(activeTheme) {
     modalRadii: resolveCssValue(activeTheme.radii.modal),
     skeletonColor: toRawHex(activeTheme.colors.inputBorderHover),
     skeletonSecondaryColor: toRawHex(activeTheme.colors.offBackground),
-    height: String(DIALOG_HEIGHT),
+    height: String(DIALOG_HEIGHT_SWAPPED_IFRAME),
     width: String(Number.parseInt(DIALOG_WIDTH_WIDE))
   };
 }
@@ -34256,13 +34270,9 @@ function MeldRedirect({
 }
 
 // src/modals/CheckoutModal/SelectAsset/SelectAsset.tsx
-import {
-  FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2,
-  etherealChain,
-  hyperEvmChain as hyperEvmChain5
-} from "@funkit/chains";
+import { etherealChain, hyperEvmChain as hyperEvmChain5 } from "@funkit/chains";
 import { isTokenEquivalent as isTokenEquivalent6 } from "@funkit/utils";
-import React214, {
+import React213, {
   useEffect as useEffect52,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo46,
@@ -34271,101 +34281,6 @@ import React214, {
 import { createPortal as createPortal19 } from "react-dom";
 import { mainnet as mainnet9 } from "viem/chains";
 
-// src/components/Dropdown/ReceiveTokenDropdown.tsx
-import React210 from "react";
-var TOKEN_ICON_SIZE2 = "16";
-var aprTag = (badgeText) => /* @__PURE__ */ React210.createElement(
-  FunBadge,
-  {
-    background: "badgeBackgroundSuccess",
-    borderColor: "badgeBorderSuccess",
-    color: "badgeTextSuccess"
-  },
-  badgeText
-);
-var ReceiveTokenDropdown = ({
-  tokens,
-  chainId,
-  selectedToken,
-  onTokenSelected,
-  label,
-  activeItemLabel,
-  activeItemProps,
-  maxDropdownHeight,
-  displayedChainId
-}) => {
-  const allTokens = Array.from(new Set(Object.values(tokens).flat()));
-  const patchedChainId = displayedChainId ?? chainId;
-  const tokenBadgeText = tokens.find(
-    (token) => token.tokenSymbol === selectedToken
-  )?.badgeText;
-  const handleChangeSymbol = (symbol) => {
-    const matchingToken = tokens.find((token) => token.tokenSymbol === symbol);
-    if (matchingToken) {
-      onTokenSelected(matchingToken);
-    }
-  };
-  return /* @__PURE__ */ React210.createElement(
-    BaseDropdown_default,
-    {
-      maxDropdownHeight,
-      horizontalIconGap: "8",
-      label,
-      openToTopOnMobile: false,
-      activeItemProps: {
-        iconComponent: selectedToken && /* @__PURE__ */ React210.createElement(
-          FunAssetAvatar,
-          {
-            assetIconSize: TOKEN_ICON_SIZE2,
-            assetName: selectedToken,
-            assetSrc: getTokenIconUrl(selectedToken, tokens),
-            chainId: patchedChainId,
-            largeChainIcon: true
-          }
-        ),
-        alwaysVisibleLabel: activeItemLabel,
-        tagComponent: tokenBadgeText ? aprTag(tokenBadgeText) : void 0,
-        ...activeItemProps
-      },
-      value: selectedToken ?? "",
-      options: allTokens.map((token) => ({
-        value: token.tokenSymbol,
-        label: token.tokenSymbol
-      })),
-      renderDropdownOption: (option, isSelected) => {
-        const symbol = option.value;
-        const iconUrl = getTokenIconUrl(symbol, tokens);
-        const tokenBadgeText2 = tokens.find(
-          (token) => token.tokenSymbol === symbol
-        )?.badgeText;
-        const tagComponent = tokenBadgeText2 ? aprTag(tokenBadgeText2) : void 0;
-        return /* @__PURE__ */ React210.createElement(
-          BaseDropdownItem_default,
-          {
-            horizontalIconGap: "8",
-            iconComponent: /* @__PURE__ */ React210.createElement(
-              FunAssetAvatar,
-              {
-                assetIconSize: TOKEN_ICON_SIZE2,
-                assetName: "receive-token-asset",
-                assetSrc: iconUrl,
-                chainId: patchedChainId,
-                largeChainIcon: true
-              }
-            ),
-            id: option.value,
-            onClick: handleChangeSymbol,
-            label: option.label,
-            isSelected,
-            tagComponent
-          }
-        );
-      },
-      preloadIconUrls: allTokens.map((token) => getTokenIconUrl(token.tokenSymbol, tokens)).filter((url) => !!url)
-    }
-  );
-};
-
 // src/hooks/useAllowedAssets.ts
 import { getAllowedAssets } from "@funkit/api-base";
 import { useQuery as useQuery21 } from "@tanstack/react-query";
@@ -34444,10 +34359,10 @@ var useDynamicRoutes = (_dynamicRoutingId) => {
 
 // src/modals/CheckoutModal/SelectAsset/SelectAssetInfoSection.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify10 } from "@funkit/utils";
-import React212 from "react";
+import React211 from "react";
 
 // src/components/NewTokenDepositAlert/NewTokenDepositAlert.tsx
-import React211 from "react";
+import React210 from "react";
 import { Trans as Trans14 } from "react-i18next";
 import { FlagKey as FlagKey10 } from "@funkit/utils";
 var FunLinkButtonComponent2 = ({
@@ -34455,7 +34370,7 @@ var FunLinkButtonComponent2 = ({
   onClick,
   weight
 }) => {
-  return /* @__PURE__ */ React211.createElement(
+  return /* @__PURE__ */ React210.createElement(
     FunLinkButton,
     {
       inline: true,
@@ -34475,19 +34390,19 @@ var NewTokenDepositAlert = ({
   if (!alertData || !isTokenTransferEnabled) {
     return null;
   }
-  return /* @__PURE__ */ React211.createElement(
+  return /* @__PURE__ */ React210.createElement(
     FunAlert,
     {
-      icon: /* @__PURE__ */ React211.createElement(NewTokenBadge, { iconSymbol: alertData.symbol }),
+      icon: /* @__PURE__ */ React210.createElement(NewTokenBadge, { iconSymbol: alertData.symbol }),
       paddingX: "8",
-      description: /* @__PURE__ */ React211.createElement(
+      description: /* @__PURE__ */ React210.createElement(
         Trans14,
         {
           t,
           i18nKey: "common.depositsLiveTryNow",
           values: { tokenName: alertData.name },
           components: {
-            TryNowLink: /* @__PURE__ */ React211.createElement(
+            TryNowLink: /* @__PURE__ */ React210.createElement(
               FunLinkButtonComponent2,
               {
                 weight: "regular",
@@ -34516,9 +34431,9 @@ var SelectAssetInfoSection = ({
   const label = usePaymentMethodInfoLabel(paymentMethodInfo, 16);
   const isDefiMode = checkoutItem?.initSettings.config.isDefiMode;
   if (isDefiMode || !isSourceNavWidgetEnabled) {
-    return /* @__PURE__ */ React212.createElement(NewTokenDepositAlert, { onClick: onTokenTransfer });
+    return /* @__PURE__ */ React211.createElement(NewTokenDepositAlert, { onClick: onTokenTransfer });
   }
-  return /* @__PURE__ */ React212.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, /* @__PURE__ */ React212.createElement(
+  return /* @__PURE__ */ React211.createElement(Box, { display: "flex", gap: "8", flexDirection: "column" }, /* @__PURE__ */ React211.createElement(
     SourcePaymentMethodItem,
     {
       type: paymentMethodInfo.paymentMethod,
@@ -34528,12 +34443,12 @@ var SelectAssetInfoSection = ({
       onClick: onSelectSource,
       testId: "checkout-source-wallet-button"
     }
-  ), /* @__PURE__ */ React212.createElement(NewTokenDepositAlert, { onClick: onTokenTransfer }));
+  ), /* @__PURE__ */ React211.createElement(NewTokenDepositAlert, { onClick: onTokenTransfer }));
 };
 
 // src/modals/CheckoutModal/SelectAsset/SelectAssetList.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify11 } from "@funkit/utils";
-import React213 from "react";
+import React212 from "react";
 import { flushSync } from "react-dom";
 var SelectAssetList = ({
   isLoading,
@@ -34565,16 +34480,16 @@ var SelectAssetList = ({
     return void 0;
   }
   if (isLoading) {
-    return /* @__PURE__ */ React213.createElement(FunAssetLoading, { count: 5 });
+    return /* @__PURE__ */ React212.createElement(FunAssetLoading, { count: 5 });
   }
   if (isAssetsEmpty) {
-    return /* @__PURE__ */ React213.createElement(
+    return /* @__PURE__ */ React212.createElement(
       FunNoResults,
       {
         title: t("checkout.noAvailableTokens"),
         text: t("checkout.noAvailableTokensMessage"),
         variant: "actionable",
-        actionButton: onBalanceTopUpSwitch ? /* @__PURE__ */ React213.createElement(
+        actionButton: onBalanceTopUpSwitch ? /* @__PURE__ */ React212.createElement(
           FunButton,
           {
             type: "tertiary",
@@ -34588,7 +34503,7 @@ var SelectAssetList = ({
       }
     );
   }
-  return /* @__PURE__ */ React213.createElement(
+  return /* @__PURE__ */ React212.createElement(
     Box,
     {
       display: "flex",
@@ -34597,7 +34512,7 @@ var SelectAssetList = ({
     },
     assetOptions.map(({ asset, isDisabled, badgeText, minUsdRequired }) => {
       const isAssetItemActive = !navigateOnAssetClick && selectedChainTokenSymbol === asset.chainSymbolKey;
-      return /* @__PURE__ */ React213.createElement(
+      return /* @__PURE__ */ React212.createElement(
         FunAssetItem,
         {
           key: asset.chainSymbolKey,
@@ -34714,16 +34629,13 @@ function useEnrichedAccountHoldings({
 function useAssetOptions({
   enrichedAccountHoldings,
   userSelectedTargetAsset,
-  chainId,
   dynamicTargetAssetCandidates
 }) {
   const { apiKey } = useFunkitConfig();
   const { t } = useFunkitTranslation();
   const { findPath } = useDynamicRoutes();
   const assetOptions = useMemo46(() => {
-    return enrichedAccountHoldings.filter(
-      ({ asset }) => chainId !== void 0 ? asset.pickedChainId === chainId.toString() : true
-    ).map(({ asset, usableForCheckout }) => {
+    return enrichedAccountHoldings.map(({ asset, usableForCheckout }) => {
       const { isUsable, reason } = usableForCheckout;
       const isKnown = isKnownAsset(asset);
       const isDisabled = !isUsable || !isKnown;
@@ -34774,7 +34686,6 @@ function useAssetOptions({
     t,
     apiKey,
     enrichedAccountHoldings,
-    chainId,
     userSelectedTargetAsset,
     dynamicTargetAssetCandidates,
     findPath
@@ -34797,24 +34708,6 @@ function useScrollToSelectedAsset(selectedChainTokenSymbol) {
     });
   }, []);
 }
-function computeDefaultToken(checkoutConfig) {
-  const candidates = checkoutConfig?.dynamicTargetAssetCandidates;
-  if (!candidates?.length) {
-    return {
-      tokenAddress: checkoutConfig?.targetAsset || "0x",
-      tokenChainId: checkoutConfig?.targetChain || "",
-      tokenSymbol: checkoutConfig?.targetAssetTicker || "",
-      iconSrc: checkoutConfig?.iconSrc || "",
-      targetAssetMinAmount: 0
-    };
-  }
-  if (candidates.length === 1) {
-    return candidates[0];
-  }
-  return candidates.find(
-    (token) => token.tokenSymbol === checkoutConfig?.targetAssetTicker
-  ) ?? candidates.find((token) => token.isDefault) ?? candidates[0];
-}
 function AccountSelectAsset({
   paymentMethodInfo,
   onFinish,
@@ -34825,12 +34718,10 @@ function AccountSelectAsset({
 }) {
   const { logMeasuredEvent } = useTrack();
   const { t } = useFunkitTranslation();
-  const [selectedChainId, setSelectedChainId] = useState61();
-  const { textCustomizations, uiCustomizations } = useFunkitConfig();
+  const { uiCustomizations } = useFunkitConfig();
   const {
     checkoutItem,
     updateSourceAsset,
-    updateTargetAsset,
     updateTargetAssetAmount,
     applyDynamicRouting
   } = useCheckoutContext();
@@ -34843,24 +34734,21 @@ function AccountSelectAsset({
   const { setSelectedBrokerageAsset } = useFunkitBrokerageContext();
   const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState61("");
   const checkoutConfig = checkoutItem?.initSettings.config;
-  const candidates = checkoutConfig?.dynamicTargetAssetCandidates;
-  const isTargetAssetSelectable = candidates && candidates.length > 1;
-  const [selectedTargetAsset, setSelectedTargetAsset] = useState61(
-    () => computeDefaultToken(checkoutConfig)
+  const defaultTargetAsset = useMemo46(
+    () => getDefaultDynamicTargetAsset(checkoutConfig),
+    [checkoutConfig]
   );
   const { enrichedAccountHoldings, isLoading: isLoadingEnrichedHoldings } = useEnrichedAccountHoldings({
     accountHoldings,
     paymentMethodInfo,
     checkoutConfig,
-    targetAssetInfo: selectedTargetAsset
+    targetAssetInfo: defaultTargetAsset
   });
   const assetOptions = useAssetOptions({
     enrichedAccountHoldings,
-    userSelectedTargetAsset: selectedTargetAsset,
-    chainId: selectedChainId,
-    dynamicTargetAssetCandidates: candidates || []
+    userSelectedTargetAsset: defaultTargetAsset,
+    dynamicTargetAssetCandidates: checkoutConfig?.dynamicTargetAssetCandidates || []
   });
-  const showTargetAssetSelection = isTargetAssetSelectable && uiCustomizations.selectAssetScreen.showTargetAssetSelection;
   const navigateOnAssetClick = uiCustomizations.selectAssetScreen.navigateOnAssetClick;
   const handleTargetAssetUpdate = (tokenItem) => {
     const dynamicPath = findPath({
@@ -34893,38 +34781,6 @@ function AccountSelectAsset({
         }),
         bridgeOverride: dynamicPath.bridgeOverride
       });
-      return;
-    }
-    if (!isTargetAssetSelectable) {
-      return;
-    }
-    if (showTargetAssetSelection && selectedTargetAsset) {
-      updateTargetAsset({
-        targetAsset: selectedTargetAsset.tokenAddress,
-        targetChain: selectedTargetAsset.tokenChainId,
-        targetAssetTicker: selectedTargetAsset.tokenSymbol,
-        targetAssetMinAmount: selectedTargetAsset.targetAssetMinAmount,
-        iconSrc: selectedTargetAsset.iconSrc
-      });
-      return;
-    }
-    let candidate = candidates.find(
-      (cand) => isTokenEquivalent6({
-        firstTokenChainId: cand.tokenChainId,
-        firstTokenAddress: cand.tokenAddress,
-        secondTokenChainId: tokenItem.pickedChainId,
-        secondTokenAddress: tokenItem.tokenAddress
-      })
-    );
-    candidate = candidate || candidates.find((token) => token.isDefault) || candidates[0];
-    if (candidate) {
-      updateTargetAsset({
-        targetAsset: candidate.tokenAddress,
-        targetChain: candidate.tokenChainId,
-        targetAssetMinAmount: candidate.targetAssetMinAmount,
-        targetAssetTicker: candidate.tokenSymbol,
-        iconSrc: candidate.iconSrc
-      });
     }
   };
   const onContinueWithToken = useEffectEvent(() => {
@@ -35010,7 +34866,7 @@ function AccountSelectAsset({
       });
     }
   }, [checkoutId, isLoading, logMeasuredEvent]);
-  const assetList = /* @__PURE__ */ React214.createElement(
+  const assetList = /* @__PURE__ */ React213.createElement(
     SelectAssetList,
     {
       isLoading,
@@ -35024,7 +34880,7 @@ function AccountSelectAsset({
       onContinueWithToken
     }
   );
-  return /* @__PURE__ */ React214.createElement(React214.Fragment, null, uiCustomizations.selectAssetScreen.customTopComponent?.(), /* @__PURE__ */ React214.createElement(
+  return /* @__PURE__ */ React213.createElement(React213.Fragment, null, uiCustomizations.selectAssetScreen.customTopComponent?.(), /* @__PURE__ */ React213.createElement(
     Box,
     {
       width: "full",
@@ -35035,50 +34891,13 @@ function AccountSelectAsset({
       gap: "4",
       style: { flex: 1 }
     },
-    showTargetAssetSelection ? /* @__PURE__ */ React214.createElement(
-      Box,
-      {
-        display: "flex",
-        flexDirection: "column",
-        gap: "12",
-        style: { flex: 1 }
-      },
-      /* @__PURE__ */ React214.createElement(
-        ReceiveTokenDropdown,
-        {
-          label: textCustomizations.receiveDropdownTitle,
-          activeItemLabel: textCustomizations.receiveDropdownLabel,
-          tokens: candidates,
-          chainId: Number(checkoutConfig.targetChain),
-          selectedToken: selectedTargetAsset?.tokenSymbol,
-          onTokenSelected: setSelectedTargetAsset
-        }
-      ),
-      /* @__PURE__ */ React214.createElement(
-        Box,
-        {
-          display: "flex",
-          flexDirection: "column",
-          gap: "4",
-          style: { flex: 1 }
-        },
-        /* @__PURE__ */ React214.createElement(
-          FilterAssets,
-          {
-            label: textCustomizations.tokensListTitle,
-            value: selectedChainId,
-            onFilterChange: setSelectedChainId
-          }
-        ),
-        assetList
-      )
-    ) : assetList
+    assetList
   ), bottomSectionRef && createPortal19(
-    /* @__PURE__ */ React214.createElement(
+    /* @__PURE__ */ React213.createElement(
       Dialog.BottomBar,
       {
         topSectionVisible: !!fetchHoldingsError,
-        topSection: navigateOnAssetClick && !fetchHoldingsError ? null : /* @__PURE__ */ React214.createElement(
+        topSection: navigateOnAssetClick && !fetchHoldingsError ? null : /* @__PURE__ */ React213.createElement(
           FunNotification,
           {
             isVisible: !!fetchHoldingsError,
@@ -35096,34 +34915,6 @@ function AccountSelectAsset({
     bottomSectionRef
   ));
 }
-var FilterAssets = ({ value, onFilterChange, label }) => {
-  const { t } = useFunkitTranslation();
-  const enabledChainIds = FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2.sort(
-    (a, b) => a.name.localeCompare(b.name)
-  ).map((chain) => chain.id);
-  return /* @__PURE__ */ React214.createElement(
-    Box,
-    {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      color: "secondaryText"
-    },
-    /* @__PURE__ */ React214.createElement(Text, { size: "12", color: "secondaryText" }, label ?? t("selectAsset.yourTokens")),
-    /* @__PURE__ */ React214.createElement(
-      ChainDropdown,
-      {
-        activeItemProps: { color: "secondaryText" },
-        allowUnselect: true,
-        size: "compact",
-        chainIds: enabledChainIds,
-        assets: [],
-        selectedChainId: value,
-        onChainSelected: onFilterChange
-      }
-    )
-  );
-};
 function SelectAsset({
   modalState,
   onNext,
@@ -35145,7 +34936,7 @@ function SelectAsset({
   const handleFinish = useEffectEvent(() => {
     onNext({});
   });
-  return /* @__PURE__ */ React214.createElement(Box, { display: "flex", flexDirection: "column", gap: "12", style: { flex: 1 } }, moreSources.length > 0 && /* @__PURE__ */ React214.createElement(
+  return /* @__PURE__ */ React213.createElement(Box, { display: "flex", flexDirection: "column", gap: "12", style: { flex: 1 } }, moreSources.length > 0 && /* @__PURE__ */ React213.createElement(
     SelectAssetInfoSection,
     {
       paymentMethodInfo,
@@ -35154,7 +34945,7 @@ function SelectAsset({
       onSelectSource: handleSelectSource,
       isSourceNavWidgetEnabled: modalState.startingStep === "select_asset" /* SELECT_ASSET */
     }
-  ), /* @__PURE__ */ React214.createElement(
+  ), /* @__PURE__ */ React213.createElement(
     AccountSelectAsset,
     {
       paymentMethodInfo,
@@ -35226,6 +35017,101 @@ import { noop as noop9 } from "@funkit/utils";
 import React222, { useEffect as useEffect55, useRef as useRef31, useState as useState63 } from "react";
 import { createPortal as createPortal20 } from "react-dom";
 
+// src/components/Dropdown/ReceiveTokenDropdown.tsx
+import React214 from "react";
+var TOKEN_ICON_SIZE2 = "16";
+var aprTag = (badgeText) => /* @__PURE__ */ React214.createElement(
+  FunBadge,
+  {
+    background: "badgeBackgroundSuccess",
+    borderColor: "badgeBorderSuccess",
+    color: "badgeTextSuccess"
+  },
+  badgeText
+);
+var ReceiveTokenDropdown = ({
+  tokens,
+  chainId,
+  selectedToken,
+  onTokenSelected,
+  label,
+  activeItemLabel,
+  activeItemProps,
+  maxDropdownHeight,
+  displayedChainId
+}) => {
+  const allTokens = Array.from(new Set(Object.values(tokens).flat()));
+  const patchedChainId = displayedChainId ?? chainId;
+  const tokenBadgeText = tokens.find(
+    (token) => token.tokenSymbol === selectedToken
+  )?.badgeText;
+  const handleChangeSymbol = (symbol) => {
+    const matchingToken = tokens.find((token) => token.tokenSymbol === symbol);
+    if (matchingToken) {
+      onTokenSelected(matchingToken);
+    }
+  };
+  return /* @__PURE__ */ React214.createElement(
+    BaseDropdown_default,
+    {
+      maxDropdownHeight,
+      horizontalIconGap: "8",
+      label,
+      openToTopOnMobile: false,
+      activeItemProps: {
+        iconComponent: selectedToken && /* @__PURE__ */ React214.createElement(
+          FunAssetAvatar,
+          {
+            assetIconSize: TOKEN_ICON_SIZE2,
+            assetName: selectedToken,
+            assetSrc: getTokenIconUrl(selectedToken, tokens),
+            chainId: patchedChainId,
+            largeChainIcon: true
+          }
+        ),
+        alwaysVisibleLabel: activeItemLabel,
+        tagComponent: tokenBadgeText ? aprTag(tokenBadgeText) : void 0,
+        ...activeItemProps
+      },
+      value: selectedToken ?? "",
+      options: allTokens.map((token) => ({
+        value: token.tokenSymbol,
+        label: token.tokenSymbol
+      })),
+      renderDropdownOption: (option, isSelected) => {
+        const symbol = option.value;
+        const iconUrl = getTokenIconUrl(symbol, tokens);
+        const tokenBadgeText2 = tokens.find(
+          (token) => token.tokenSymbol === symbol
+        )?.badgeText;
+        const tagComponent = tokenBadgeText2 ? aprTag(tokenBadgeText2) : void 0;
+        return /* @__PURE__ */ React214.createElement(
+          BaseDropdownItem_default,
+          {
+            horizontalIconGap: "8",
+            iconComponent: /* @__PURE__ */ React214.createElement(
+              FunAssetAvatar,
+              {
+                assetIconSize: TOKEN_ICON_SIZE2,
+                assetName: "receive-token-asset",
+                assetSrc: iconUrl,
+                chainId: patchedChainId,
+                largeChainIcon: true
+              }
+            ),
+            id: option.value,
+            onClick: handleChangeSymbol,
+            label: option.label,
+            isSelected,
+            tagComponent
+          }
+        );
+      },
+      preloadIconUrls: allTokens.map((token) => getTokenIconUrl(token.tokenSymbol, tokens)).filter((url) => !!url)
+    }
+  );
+};
+
 // src/hooks/queries/useFops.ts
 import {
   getFops
@@ -36756,7 +36642,8 @@ function SwappedIframe({
         paddingX: "20",
         flexDirection: "column",
         alignItems: "center",
-        width: "full"
+        width: "full",
+        id: "swapped-iframe-loading"
       },
       /* @__PURE__ */ React223.createElement(
         Box,
@@ -36847,7 +36734,7 @@ function SwappedIframe({
       )
     );
   }
-  return null;
+  return /* @__PURE__ */ React223.createElement(Box, { id: "swapped-iframe" });
 }
 function trackEventForFormOfPayment(fop, checkoutItem, eventName, extras) {
   return {
@@ -38636,7 +38523,8 @@ var mapHeightToCheckoutStep = {
   ["fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */]: 825,
   ["confirmation" /* CONFIRMATION */]: 825,
   ["checkout_complete" /* CHECKOUT_COMPLETE */]: 825,
-  ["connect_exchange" /* CONNECT_EXCHANGE */]: 825
+  ["connect_exchange" /* CONNECT_EXCHANGE */]: 825,
+  ["swapped_iframe" /* SWAPPED_IFRAME */]: DIALOG_HEIGHT_SWAPPED_IFRAME
 };
 function getPermittedHeight2(checkoutStep) {
   const heightOffset = 2;
@@ -39957,7 +39845,7 @@ function ChainModal({ onClose, open }) {
 }
 
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
-import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3 } from "@funkit/chains";
+import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2 } from "@funkit/chains";
 import { LogLevel as LogLevel2, initializeRelayClient } from "@funkit/fun-relay";
 import React268, { useRef as useRef36 } from "react";
 
@@ -40598,7 +40486,7 @@ var SwappedIframePool_default = React267.memo(SwappedIframePool);
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 initializeRelayClient({
   // For now, enable only the checkout target chains funkit supports. In future, source chains may be added.
-  chains: FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3,
+  chains: FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2,
   logLevel: LogLevel2.Verbose,
   logger
 });