@funkit/connect 5.0.4 → 5.0.5

package/dist/index.js

@@ -183,7 +183,7 @@ var PLACEHOLDER_FUNKIT_USER_INFO = {
 // src/providers/FunkitConfigContext.tsx
 var DEFAULT_TEXT_CUSTOMIZATIONS = {
   brokerageOrExchange: "Connect Exchange",
-  debitOrCredit: "Card",
+  debitOrCredit: "Use card",
   accountBalance: "Wallet",
   selectAccount: "Select an exchange",
   sourceMethodTitle: "Your source",
@@ -527,7 +527,7 @@ function Avatar({ address, imageUrl, loading, size }) {
 }
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React208, { useEffect as useEffect47, useState as useState66 } from "react";
+import React210, { useEffect as useEffect46, useState as useState66 } from "react";
 
 // src/css/touchableStyles.css.ts
 var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -631,12 +631,12 @@ import PrivyJS, {
   getUserEmbeddedWallet,
   LocalStorage
 } from "@privy-io/js-sdk-core";
-import React205, {
+import React207, {
   createContext as createContext18,
   useCallback as useCallback42,
   useContext as useContext18,
-  useEffect as useEffect45,
-  useMemo as useMemo38,
+  useEffect as useEffect44,
+  useMemo as useMemo39,
   useState as useState63
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
@@ -1049,12 +1049,12 @@ var useFunkitConnectChainsById = () => groupChainsById(useFunkitConnectChains())
 var useInitialChainId = () => useContext4(FunkitConnectChainContext).initialChainId;
 
 // src/providers/ModalContext.tsx
-import React204, {
+import React206, {
   createContext as createContext17,
   useCallback as useCallback41,
   useContext as useContext17,
-  useEffect as useEffect44,
-  useMemo as useMemo37,
+  useEffect as useEffect43,
+  useMemo as useMemo38,
   useState as useState62
 } from "react";
 import { useAccount as useAccount10, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
@@ -3148,19 +3148,27 @@ var flagConfig = {
   [FlagKey.TokenTransferSourceChainsAndAssets]: {
     type: "string",
     default_value: JSON.stringify({
+      // // mainnet
+      // 1: ['USDC', 'DAI', 'ETH'],
+      // // base
+      // 8453: ['ETH', 'USDC', 'USDT', 'DAI', 'WETH'],
+      // // arbitrum
+      // 42161: ['USDC', 'USDT', 'DAI', 'ETH', 'WETH'],
+      // // polygon
+      // 137: ['USDC', 'USDC.e', 'USDT', 'POL', 'DAI', 'WETH'],
       // mainnet
-      1: ["USDC", "DAI", "ETH"],
+      1: [],
       // base
-      8453: ["ETH", "USDC", "USDT", "DAI", "WETH"],
+      8453: [],
       // arbitrum
-      42161: ["USDC", "USDT", "DAI", "ETH", "WETH"],
+      42161: [],
       // polygon
-      137: ["USDC", "USDC.e", "USDT", "POL", "DAI", "WETH"]
+      137: ["USDC", "USDC.e"]
     })
   },
   [FlagKey.EnableTokenTransferUniversalDepositAddress]: {
     type: "boolean",
-    default_value: true
+    default_value: false
   },
   [FlagKey.MaxCheckoutUsd]: {
     type: "string",
@@ -5749,8 +5757,38 @@ var HOME_TOKEN_BALANCE_DISPLAY_ROW_HEIGHT = 52;
 var DEFAULT_ICON_SIZE = "24";
 var OVERLAY_Z_INDEX = 100;
 
-// src/domains/checkoutState.ts
+// src/domains/checkout.ts
+import {
+  getRiskAssessmentForAddress
+} from "@funkit/api-base";
 import { CheckoutState as CheckoutState3 } from "@funkit/api-base";
+var BLOCKED_RISK_LEVELS = ["Severe", "High"];
+var hasRisk = async (apiKey, walletAddress, customRecipient) => {
+  const getUserWalletRisk = walletAddress ? getRiskAssessmentForAddress({
+    address: walletAddress,
+    apiKey,
+    logger
+  }).then((assessment) => assessment?.risk) : null;
+  const getRecipientWalletRisk = customRecipient ? getRiskAssessmentForAddress({
+    address: customRecipient,
+    apiKey,
+    logger
+  }).then((assessment) => assessment?.risk) : null;
+  const addressRisks = await Promise.all([
+    getUserWalletRisk,
+    getRecipientWalletRisk
+  ]);
+  const isCheckoutRisky = addressRisks.some(
+    (risk) => risk ? BLOCKED_RISK_LEVELS.includes(risk) : false
+  );
+  logger.log("riskAssessment_isCheckoutRisky", {
+    isCheckoutRisky,
+    addressRisks,
+    walletAddress,
+    customRecipient
+  });
+  return isCheckoutRisky;
+};
 function getCheckoutStateBooleans(checkoutState, refundState) {
   const isProcessing = IN_PROGRESS_CHECKOUT_STATES.includes(checkoutState);
   const isCompleted = checkoutState === CheckoutState3.COMPLETED;
@@ -6418,7 +6456,7 @@ var MAXIMUM_MOONPAY_DEPOSIT_AMOUNT_USD = 1e4;
 var generateMoonpayCurrencyCode = (tokenSymbol, chainId) => {
   let moonpayChainName = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO4[chainId]?.moonpayChainName;
   if (moonpayChainName == null) {
-    throw new Error("Moonpay not supported on testnets");
+    throw new Error("MoonPay not supported on testnets");
   }
   if (moonpayChainName !== "") {
     moonpayChainName = `_${moonpayChainName}`;
@@ -6675,6 +6713,7 @@ var circleSkeletonClass = "dj0x603";
 function FunSkeletonBlock({
   width = "full",
   borderRadius = "4",
+  height,
   ...props
 }) {
   return /* @__PURE__ */ React63.createElement(
@@ -6683,7 +6722,11 @@ function FunSkeletonBlock({
       borderRadius,
       className: animateSkeletonClass,
       width,
-      ...props
+      ...props,
+      style: {
+        // when height is passed as a theme value, it will already contain 'px' suffix, if passed as BoxProps['height'], it will missing the suffix
+        height: height.endsWith("px") ? height : `${height}px`
+      }
     }
   );
 }
@@ -10463,12 +10506,12 @@ import clsx9 from "clsx";
 import React113, { useMemo as useMemo15 } from "react";
 
 // src/components/FunAssetAvatar/FunAssetAvatar.css.ts
-var borderedChainContainerStyle = "_1rsrm2fir _1rsrm2ftr _1rsrm2f13 _1rsrm2fi _1rsrm2fz";
-var chainContainerStyle = "uwrdc21";
+var chainContainerStyle = "uwrdc22 _1rsrm2fy _1rsrm2fa _1rsrm2f4 _1rsrm2f3p";
 var containerStyle = "uwrdc20";
-var largeChainContainerStyle = "uwrdc22";
 
 // src/components/FunAssetAvatar/FunAssetAvatar.tsx
+var smallClipPath = "polygon( 99.725% 55.276%,99.725% 55.276%,99.777% 54.755%,99.823% 54.233%,99.865% 53.709%,99.9% 53.183%,99.931% 52.656%,99.956% 52.128%,99.975% 51.598%,99.989% 51.067%,99.997% 50.534%,100% 50%,100% 50%,99.346% 41.89%,97.451% 34.196%,94.419% 27.022%,90.353% 20.471%,85.355% 14.645%,79.529% 9.647%,72.978% 5.581%,65.804% 2.549%,58.11% 0.654%,50% 0%,50% 0%,41.89% 0.654%,34.196% 2.549%,27.022% 5.581%,20.471% 9.647%,14.645% 14.645%,9.647% 20.471%,5.581% 27.022%,2.549% 34.196%,0.654% 41.89%,0% 50%,0% 50%,0.654% 58.11%,2.549% 65.804%,5.581% 72.978%,9.647% 79.529%,14.645% 85.355%,20.471% 90.353%,27.022% 94.419%,34.196% 97.451%,41.89% 99.346%,50% 100%,50% 100%,50.534% 99.997%,51.067% 99.989%,51.598% 99.975%,52.128% 99.956%,52.656% 99.931%,53.183% 99.9%,53.709% 99.865%,54.233% 99.823%,54.755% 99.777%,55.276% 99.725%,55.276% 99.725%,55.224% 99.259%,55.177% 98.792%,55.136% 98.323%,55.1% 97.853%,55.07% 97.381%,55.045% 96.907%,55.025% 96.433%,55.011% 95.956%,55.003% 95.479%,55% 95%,55% 95%,55.524% 88.512%,57.039% 82.357%,59.465% 76.618%,62.718% 71.376%,66.716% 66.716%,71.376% 62.718%,76.618% 59.465%,82.357% 57.039%,88.512% 55.524%,95% 55%,95% 55%,95.479% 55.003%,95.956% 55.011%,96.433% 55.025%,96.907% 55.045%,97.381% 55.07%,97.853% 55.1%,98.323% 55.136%,98.792% 55.177%,99.259% 55.224%,99.725% 55.276% )";
+var largeClipPath = "polygon( 100% 47.911%,100% 47.911%,98.601% 47.377%,97.177% 46.894%,95.729% 46.464%,94.26% 46.088%,92.769% 45.766%,91.258% 45.5%,89.728% 45.292%,88.181% 45.141%,86.617% 45.05%,85.037% 45.02%,85.037% 45.02%,78.546% 45.543%,72.388% 47.06%,66.647% 49.486%,61.403% 52.741%,56.74% 56.74%,52.741% 61.403%,49.486% 66.647%,47.06% 72.388%,45.543% 78.546%,45.02% 85.037%,45.02% 85.037%,45.05% 86.617%,45.141% 88.181%,45.292% 89.728%,45.5% 91.258%,45.766% 92.769%,46.088% 94.26%,46.464% 95.729%,46.894% 97.177%,47.377% 98.601%,47.911% 100%,47.911% 100%,40.094% 99.059%,32.696% 96.962%,25.811% 93.804%,19.535% 89.682%,13.963% 84.691%,9.19% 78.925%,5.312% 72.479%,2.425% 65.45%,0.622% 57.933%,0% 50.022%,0% 50.022%,0.655% 41.908%,2.55% 34.211%,5.583% 27.034%,9.651% 20.48%,14.651% 14.651%,20.48% 9.651%,27.034% 5.583%,34.211% 2.55%,41.908% 0.655%,50.022% 0%,50.022% 0%,57.933% 0.622%,65.45% 2.425%,72.479% 5.312%,78.925% 9.19%,84.691% 13.963%,89.682% 19.535%,93.804% 25.811%,96.962% 32.696%,99.059% 40.094%,100% 47.911% )";
 function FunAssetAvatar({
   assetSrc,
   assetTicker,
@@ -10477,7 +10520,6 @@ function FunAssetAvatar({
   chainId,
   prioritizeDefaults = true,
   hideIfUnknown = false,
-  borderedChainIcon = true,
   largeChainIcon = false
 }) {
   const chainMetadata = chainMetadataById[Number.parseInt((chainId || "").toString())] || null;
@@ -10490,7 +10532,8 @@ function FunAssetAvatar({
     return assetSrc || defaultSrc;
   }, [assetSrc, assetTicker, prioritizeDefaults]);
   const showChainIcon = isNotNullish6(chainMetadata);
-  const chainIconSize = Number.parseInt(assetIconSize) / 2;
+  const chainIconSize = Number.parseInt(assetIconSize) / 2 + 2;
+  const chainContainerSize = chainIconSize + 4;
   return hideIfUnknown && !finalAssetSrc ? null : /* @__PURE__ */ React113.createElement(Box, { id: "container", alignSelf: "center" }, /* @__PURE__ */ React113.createElement(
     Box,
     {
@@ -10498,36 +10541,52 @@ function FunAssetAvatar({
       height: assetIconSize,
       className: containerStyle
     },
-    /* @__PURE__ */ React113.createElement(Box, { width: assetIconSize, height: assetIconSize }, /* @__PURE__ */ React113.createElement(
-      AsyncImage,
+    /* @__PURE__ */ React113.createElement(
+      Box,
       {
-        alt: assetName,
-        src: finalAssetSrc,
-        fallbackSrc: FALLBACK_ASSET,
-        background: void 0,
-        borderColor: "generalBorderDim",
-        borderRadius: "full",
-        height: assetIconSize,
         width: assetIconSize,
-        testId: `fun-asset-${assetTicker}-icon`,
-        useAsImage: true
-      }
-    )),
+        height: assetIconSize,
+        style: {
+          // apply clip-paths only if we're showing the chain icon
+          ...showChainIcon && {
+            clipPath: chainIconSize <= 10 ? largeClipPath : smallClipPath
+          }
+        }
+      },
+      /* @__PURE__ */ React113.createElement(
+        AsyncImage,
+        {
+          alt: assetName,
+          src: finalAssetSrc,
+          fallbackSrc: FALLBACK_ASSET,
+          background: void 0,
+          borderColor: "generalBorderDim",
+          borderRadius: "full",
+          height: assetIconSize,
+          width: assetIconSize,
+          testId: `fun-asset-${assetTicker}-icon`,
+          useAsImage: true
+        }
+      )
+    ),
     showChainIcon ? /* @__PURE__ */ React113.createElement(
       Box,
       {
-        className: clsx9(
-          largeChainIcon ? largeChainContainerStyle : chainContainerStyle,
-          borderedChainIcon && borderedChainContainerStyle
-        )
+        style: {
+          width: chainContainerSize,
+          height: chainContainerSize,
+          bottom: `-${chainIconSize / 2}px`,
+          right: `-${chainIconSize / 2}px`,
+          backgroundColor: "transparent"
+        },
+        className: clsx9(chainContainerStyle)
       },
       /* @__PURE__ */ React113.createElement(
         AsyncImage,
         {
           alt: chainMetadata.name,
           src: chainMetadata.iconUrl || "",
-          background: borderedChainIcon ? chainMetadata.iconBackground : void 0,
-          borderRadius: "1",
+          borderRadius: "full",
           height: largeChainIcon ? chainIconSize : chainIconSize - 2,
           width: largeChainIcon ? chainIconSize : chainIconSize - 2,
           testId: `fun-asset-chain-${chainId}-icon`
@@ -11718,86 +11777,15 @@ function ChainModal({ onClose, open }) {
 }
 
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
-import React202 from "react";
-
-// src/hooks/useIsCheckoutRisky.ts
-import { getRiskAssessmentForAddress } from "@funkit/api-base";
-import { FlagKey as FlagKey7 } from "@funkit/utils";
-import { useQuery as useQuery3 } from "@tanstack/react-query";
-import { useEffect as useEffect25 } from "react";
-var BLOCKED_RISK_LEVELS = ["Severe", "High"];
-var hasRisk = async (apiKey, walletAddress, customRecipient) => {
-  const getUserWalletRisk = walletAddress ? getRiskAssessmentForAddress({
-    address: walletAddress,
-    apiKey,
-    logger
-  }).then((assessment) => assessment?.risk) : null;
-  const getRecipientWalletRisk = customRecipient ? getRiskAssessmentForAddress({
-    address: customRecipient,
-    apiKey,
-    logger
-  }).then((assessment) => assessment?.risk) : null;
-  const addressRisks = await Promise.all([
-    getUserWalletRisk,
-    getRecipientWalletRisk
-  ]);
-  const isCheckoutRisky = addressRisks.some(
-    (risk) => BLOCKED_RISK_LEVELS.includes(risk || "")
-  );
-  logger.log("riskAssessment_isCheckoutRisky", {
-    isCheckoutRisky,
-    addressRisks,
-    walletAddress,
-    customRecipient
-  });
-  return isCheckoutRisky;
-};
-function useIsBlacklisted(walletAddress, customRecipient) {
-  const flagStr = useFlag(FlagKey7.AddressBlacklist);
-  const blacklist = safeJSONParse(flagStr)?.map((addr) => addr.toLowerCase()) || [];
-  const isWalletBlacklisted = walletAddress ? blacklist.includes(walletAddress.toLowerCase()) : false;
-  const isRecipientBlacklisted = customRecipient ? blacklist.includes(customRecipient.toLowerCase()) : false;
-  useEffect25(() => {
-    logger.log("riskAssessment_isBlacklisted", {
-      isWalletBlacklisted,
-      isRecipientBlacklisted,
-      walletAddress,
-      customRecipient
-    });
-  }, [
-    isWalletBlacklisted,
-    isRecipientBlacklisted,
-    walletAddress,
-    customRecipient
-  ]);
-  return isWalletBlacklisted || isRecipientBlacklisted;
-}
-var useIsCheckoutRisky = (checkoutItem) => {
-  const { walletAddress } = useGeneralWallet();
-  const { apiKey } = useFunkitConfig();
-  const customRecipient = checkoutItem.initSettings.config.customRecipient;
-  const isBlacklisted = useIsBlacklisted(
-    walletAddress || void 0,
-    customRecipient
-  );
-  const { data: isRisky } = useQuery3({
-    queryKey: ["isCheckoutBlocked", walletAddress, customRecipient],
-    queryFn: ({ queryKey: [_, walletAddress2, customRecipient2] }) => hasRisk(apiKey, walletAddress2 || void 0, customRecipient2),
-    refetchOnWindowFocus: false,
-    refetchOnMount: false,
-    staleTime: 5 * 60 * 1e3,
-    gcTime: Number.POSITIVE_INFINITY
-  });
-  return { isCheckoutRisky: isBlacklisted || isRisky };
-};
+import React204 from "react";
 
 // src/components/DydxSwitchModalTab/DydxSwitchModalTab.tsx
 import React130, { useCallback as useCallback23 } from "react";
 
 // src/hooks/useFunkitMaxCheckoutUsdInfo.ts
-import { FlagKey as FlagKey8, formatCurrencyAndStringify as formatCurrencyAndStringify4 } from "@funkit/utils";
+import { FlagKey as FlagKey7, formatCurrencyAndStringify as formatCurrencyAndStringify4 } from "@funkit/utils";
 var useFunkitMaxCheckoutUsdInfo = () => {
-  const maxCheckoutUsd = Number(useFlag(FlagKey8.MaxCheckoutUsd));
+  const maxCheckoutUsd = Number(useFlag(FlagKey7.MaxCheckoutUsd));
   const limitText = maxCheckoutUsd === Number.MAX_VALUE ? "no" : formatCurrencyAndStringify4(maxCheckoutUsd, {
     decimalPrecisionForSuffix: 0,
     minimumSignificantDigits: 0,
@@ -11931,15 +11919,15 @@ var FunCheckoutBlocked = ({ reason }) => {
 };
 
 // src/providers/FunkitMoonpayProvider.tsx
-import { useQuery as useQuery4 } from "@tanstack/react-query";
+import { useQuery as useQuery3 } from "@tanstack/react-query";
 import React132, {
   createContext as createContext14,
   useContext as useContext14,
-  useEffect as useEffect26,
+  useEffect as useEffect25,
   useMemo as useMemo17,
   useState as useState32
 } from "react";
-import { FlagKey as FlagKey9 } from "@funkit/utils";
+import { FlagKey as FlagKey8 } from "@funkit/utils";
 
 // src/providers/FunkitSandboxContext.tsx
 import { createContext as createContext13, useContext as useContext13 } from "react";
@@ -11949,7 +11937,7 @@ var useIsFunkitSandboxMode = () => useContext13(FunkitSandboxContext);
 // src/providers/FunkitMoonpayProvider.tsx
 var LazyMoonPayProvider = (props) => {
   const [MoonPayProvider, setMoonPayProvider] = useState32(null);
-  useEffect26(() => {
+  useEffect25(() => {
     const loadMoonPayProvider = async () => {
       const module = await import("@moonpay/moonpay-react");
       setMoonPayProvider(() => module.MoonPayProvider);
@@ -11993,7 +11981,7 @@ var isCountryBlocked = (blockedList, userIpInfo) => {
 function useFunkitUserIp() {
   const { moonpayApiKey } = useContext14(FunkitMoonpayContext);
   const { getFlag, isLoading: isLoadingFlags } = useFlags();
-  const { data: userIpInfo, isLoading: isLoadingGeoCheck } = useQuery4({
+  const { data: userIpInfo, isLoading: isLoadingGeoCheck } = useQuery3({
     queryKey: ["getUserIpInfo"],
     queryFn: async () => {
       try {
@@ -12021,7 +12009,7 @@ function useFunkitUserIp() {
     if (!userIpInfo) {
       return true;
     }
-    const blockedList = getFlag(FlagKey9.BlockedCountries, ALL_MATCH).split(",");
+    const blockedList = getFlag(FlagKey8.BlockedCountries, ALL_MATCH).split(",");
     return isCountryBlocked(blockedList, userIpInfo);
   }, [getFlag, isLoadingFlags, isLoadingGeoCheck, userIpInfo]);
   return {
@@ -12033,7 +12021,7 @@ function useFunkitUserIp() {
 
 // src/modals/CheckoutModal/CheckoutNotifications.tsx
 import clsx14 from "clsx";
-import React139, { useEffect as useEffect28, useMemo as useMemo18, useState as useState34 } from "react";
+import React139, { useEffect as useEffect27, useMemo as useMemo18, useState as useState34 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
 import React134 from "react";
@@ -12105,8 +12093,8 @@ var FunNotificationShowMoreButton = ({
 import {
   getCheckoutsByUserId as getCheckoutsByUserId2
 } from "@funkit/api-base";
-import { FlagKey as FlagKey10 } from "@funkit/utils";
-import { useQuery as useQuery5 } from "@tanstack/react-query";
+import { FlagKey as FlagKey9 } from "@funkit/utils";
+import { useQuery as useQuery4 } from "@tanstack/react-query";
 var hasCorrectPaymentMethod = (checkout, paymentMethod) => {
   if (!paymentMethod) return true;
   return checkout.clientMetadata.selectedPaymentMethodInfo?.paymentMethod === paymentMethod;
@@ -12114,7 +12102,7 @@ var hasCorrectPaymentMethod = (checkout, paymentMethod) => {
 var isRecent = (checkout, timestampCutoff) => checkout.createdTimeMs > timestampCutoff;
 var DEFAULT_CUTOFF = 7 * 24 * 60 * 60 * 1e3;
 function useCheckoutRefreshInterval() {
-  const str = useFlag(FlagKey10.CheckoutNotificationsRefreshInterval);
+  const str = useFlag(FlagKey9.CheckoutNotificationsRefreshInterval);
   return safeJSONParse(str) || { listRefresh: 50 * 1e3, itemRefresh: 5 * 1e3 };
 }
 var useRecentCheckouts = ({
@@ -12127,7 +12115,7 @@ var useRecentCheckouts = ({
   const { listRefresh } = useCheckoutRefreshInterval();
   const defaultTimestampCutoff = Date.now() - DEFAULT_CUTOFF;
   const timestampCutoff = newerThanMs ?? defaultTimestampCutoff;
-  const query = useQuery5({
+  const query = useQuery4({
     queryKey: ["checkouts", userInfo.id],
     queryFn: async () => {
       const checkouts = await getCheckoutsByUserId2({
@@ -12159,7 +12147,7 @@ var showMoreButtonStyle = "_4yitd93 _1rsrm2fsl _1rsrm2f12 _1rsrm2fz _1rsrm2fj3 _
 // src/components/FunNotificationBanner/FunNotificationBannerIcon.tsx
 import clsx12 from "clsx";
 import { motion, useAnimate } from "motion/react";
-import React135, { useCallback as useCallback24, useEffect as useEffect27, useRef as useRef12 } from "react";
+import React135, { useCallback as useCallback24, useEffect as useEffect26, useRef as useRef12 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationBannerIcon.css.ts
 var STATUS_SPINNER_BOTTOM_POSITION = -5;
@@ -12609,7 +12597,7 @@ var FunNotificationBannerIcon = ({
     ]);
   }, [animate]);
   const statusRef = useRef12(status);
-  useEffect27(() => {
+  useEffect26(() => {
     if (statusRef.current !== status) {
       if (statusRef.current === "processing" && status === "completed") {
         triggerAnimationProcessingToCompleted();
@@ -12853,11 +12841,11 @@ var FunNotificationBannerSummary = ({
 import {
   getCheckoutByDepositAddress as getCheckoutByDepositAddress2
 } from "@funkit/api-base";
-import { useQuery as useQuery6 } from "@tanstack/react-query";
+import { useQuery as useQuery5 } from "@tanstack/react-query";
 var useCheckout = (depositAddress, initial) => {
   const { apiKey } = useFunkitConfig();
   const { itemRefresh } = useCheckoutRefreshInterval();
-  const query = useQuery6({
+  const query = useQuery5({
     queryKey: ["checkouts", "checkout", depositAddress],
     queryFn: () => (
       // biome-ignore lint/style/noNonNullAssertion: already checked for null
@@ -12963,7 +12951,7 @@ var CheckoutNotifications = ({
   const [initialCheckouts, setInitialCheckouts] = useState34();
   const [closedNotifications, setClosedNotifications] = useState34([]);
   const { data: checkouts } = useRecentCheckouts({ isVisible });
-  useEffect28(() => {
+  useEffect27(() => {
     if (initialCheckouts || !checkouts) return;
     setInitialCheckouts(checkouts);
   }, [initialCheckouts, checkouts]);
@@ -13024,12 +13012,12 @@ import {
 import { useMemo as useMemo19 } from "react";
 
 // src/providers/FunkitQuoteContext.tsx
-import { FlagKey as FlagKey11, isNotNullish as isNotNullish8 } from "@funkit/utils";
+import { FlagKey as FlagKey10, isNotNullish as isNotNullish8 } from "@funkit/utils";
 import React140, {
   createContext as createContext15,
   useCallback as useCallback25,
   useContext as useContext15,
-  useEffect as useEffect29,
+  useEffect as useEffect28,
   useState as useState35
 } from "react";
 import { useConfig as useConfig3 } from "wagmi";
@@ -13104,7 +13092,7 @@ import {
   getCheckoutQuote as getApiCheckoutQuote
 } from "@funkit/api-base";
 
-// src/domains/checkoutFees.ts
+// src/domains/fees.ts
 import {
   getAssetPriceInfo as getAssetPriceInfo2,
   getMoonpayBuyQuoteForCreditCard,
@@ -13214,7 +13202,7 @@ async function evaluateCardFees({
     logger
   });
   if (moonpayEstimation.errors) {
-    throw new Error("Moonpay estimation error");
+    throw new Error("MoonPay estimation error");
   }
   const cardProcessingFeeUsd = moonpayEstimation.feeAmount;
   const moonpayCostUsd = moonpayEstimation.totalAmount - cardProcessingFeeUsd - baseQuote.estTotalUsd;
@@ -13434,12 +13422,12 @@ function FunkitQuoteProvider({ children }) {
   const funkitConfig = useFunkitConfig();
   const wagmiConfig = useConfig3();
   const { walletAddress, logoutSymbol, loginType, userInfo } = useGeneralWallet();
-  const enableFrogProxyServer = useFlag(FlagKey11.EnableFrogProxyServer);
+  const enableFrogProxyServer = useFlag(FlagKey10.EnableFrogProxyServer);
   const [latestQuote, setLatestQuote] = useState35(null);
   const [isQuoting, setIsQuoting] = useState35(false);
   const [quoteStepMessage, setQuoteStepMessage] = useState35("");
   const [quoteErrorMessage, setQuoteErrorMessage] = useState35("");
-  useEffect29(() => {
+  useEffect28(() => {
     if (isNotNullish8(logoutSymbol)) {
       setLatestQuote(null);
       setQuoteProgress({
@@ -13735,11 +13723,11 @@ function CheckoutHelp({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/ConfirmationStep.tsx
-import React157, { useEffect as useEffect35, useMemo as useMemo25, useState as useState47 } from "react";
+import React157, { useEffect as useEffect34, useMemo as useMemo26, useState as useState47 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/providers/UserPresenceContext.tsx
-import React143, { useEffect as useEffect30 } from "react";
+import React143, { useEffect as useEffect29 } from "react";
 import {
   createContext as createContext16,
   useContext as useContext16,
@@ -13751,7 +13739,7 @@ var UserPresenceContext = createContext16({
 });
 var UserPresenceProvider = ({ children }) => {
   const [isAway, setIsAway] = useState36(false);
-  useEffect30(() => {
+  useEffect29(() => {
     let timeoutId;
     const handleVisibilityChange = () => {
       if (document.visibilityState === "visible") {
@@ -13776,7 +13764,7 @@ import { FlagKey as FlagKey15 } from "@funkit/utils";
 
 // src/components/FunInfoBanner/FunInfoBanner.tsx
 import React146 from "react";
-import { FlagKey as FlagKey12, safeParseJson as safeParseJson2 } from "@funkit/utils";
+import { FlagKey as FlagKey11, safeParseJson as safeParseJson2 } from "@funkit/utils";
 
 // src/components/FunInfoBanner/EphemeralInfoBanner.tsx
 import React145, { useState as useState37 } from "react";
@@ -13976,7 +13964,7 @@ var EphemeralInfoBanner = ({
 
 // src/components/FunInfoBanner/FunInfoBanner.tsx
 var FunInfoBanner = () => {
-  const bannerJson = useFlag(FlagKey12.ShowInfoBanner);
+  const bannerJson = useFlag(FlagKey11.ShowInfoBanner);
   const bannerData = safeParseJson2(bannerJson);
   if (!bannerData || !bannerData.message) return null;
   const { expireAtMs, ...bannerProps } = bannerData;
@@ -14000,7 +13988,7 @@ import { motion as motion4, useAnimationControls } from "motion/react";
 // src/components/FunTooltip/FunTooltip.tsx
 import React147, {
   useCallback as useCallback27,
-  useEffect as useEffect31,
+  useEffect as useEffect30,
   useRef as useRef13,
   useState as useState38
 } from "react";
@@ -14041,10 +14029,10 @@ var FunTooltip = ({
       setIsDisplayed(false);
     }, HIDE_DELAY);
   }, []);
-  useEffect31(() => {
+  useEffect30(() => {
     return () => clearTimeout(delayRef.current);
   }, []);
-  useEffect31(() => {
+  useEffect30(() => {
     if (!wrapperElementRef?.current || !tooltipRef.current || !enableDynamicPositioning) {
       return;
     }
@@ -14202,7 +14190,7 @@ var extractFeeItems = (fees, totalUsd, isDydx) => {
           tooltipPosition: "center"
         },
         {
-          label: "Moonpay cost",
+          label: "MoonPay cost",
           value: formatCurrencyAndStringify5(moonpayCostUsd),
           tooltipText: "Fee charged by MoonPay for processing your transaction."
         }
@@ -14368,6 +14356,15 @@ import {
 import NumberFlow from "@number-flow/react";
 import { motion as motion5 } from "motion/react";
 import React150, { useMemo as useMemo21 } from "react";
+
+// src/consts/animations.ts
+var mapFontLineHeightToNumberFlowHeight = {
+  "14px": "18px",
+  "20px": "21px",
+  "48px": "60px"
+};
+
+// src/components/FunTransactionSummary/PaymentMethodSummary.tsx
 function PaymentMethodSummary({
   paymentMethodInfo,
   walletAddress,
@@ -14384,6 +14381,7 @@ function PaymentMethodSummary({
   const destinationIcon = customDestinationConfig?.icon ?? walletIcon;
   const destinationText = customDestinationConfig?.text ?? formatAddress5(customRecipient ?? walletAddress ?? "");
   const { apiKey } = useFunkitConfig();
+  const { activeTheme } = useActiveTheme();
   return /* @__PURE__ */ React150.createElement(
     FunTxSummaryBox,
     {
@@ -14412,7 +14410,16 @@ function PaymentMethodSummary({
       /* @__PURE__ */ React150.createElement(Box, { width: "15", height: "15", display: "flex", alignItems: "center" }, destinationIcon),
       /* @__PURE__ */ React150.createElement(Text, { weight: "medium", color: "primaryText", size: "12" }, destinationText)
     )), /* @__PURE__ */ React150.createElement(FunTxSummaryDivider, null)),
-    /* @__PURE__ */ React150.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React150.createElement(FunTxSummaryLineItemKeyText, { text: "Estimated time" }), isLoading ? /* @__PURE__ */ React150.createElement(FunSkeletonBlock, { height: "10", width: "54" }) : /* @__PURE__ */ React150.createElement(Text, { weight: "medium", size: "12", textAlign: "right" }, estimatedTime === 0 ? "-" : formatSecondsToReadableForm2(estimatedTime, true)))
+    /* @__PURE__ */ React150.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React150.createElement(FunTxSummaryLineItemKeyText, { text: "Estimated time" }), isLoading ? (
+      // height has to match the lineHeight of the text, keep these in sync to prevent layout shifts
+      /* @__PURE__ */ React150.createElement(
+        FunSkeletonBlock,
+        {
+          height: activeTheme.fontSize["12"].lineHeight,
+          width: "54"
+        }
+      )
+    ) : /* @__PURE__ */ React150.createElement(Text, { weight: "medium", size: "12", textAlign: "right" }, estimatedTime === 0 ? "-" : formatSecondsToReadableForm2(estimatedTime, true)))
   );
 }
 function PaymentAmountSummary({
@@ -14461,8 +14468,7 @@ function PaymentAmountSummary({
             assetTicker: sourceSymbol,
             assetName: sourceSymbol,
             assetSrc: sourceIcon,
-            chainId: areSameChains ? void 0 : sourceChainId,
-            hideIfUnknown: true
+            chainId: areSameChains ? void 0 : sourceChainId
           }
         ),
         isLoading
@@ -14497,7 +14503,21 @@ function PaymentAmountSummaryItem({
   icon,
   valueSymbol
 }) {
-  return /* @__PURE__ */ React150.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React150.createElement(FunTxSummaryLineItemKeyText, { text: label }), isLoading ? /* @__PURE__ */ React150.createElement(Box, { alignItems: "center", display: "flex", gap: "8" }, /* @__PURE__ */ React150.createElement(FunSkeletonCircle, { size: "15" }), /* @__PURE__ */ React150.createElement(FunSkeletonBlock, { height: "10", width: "93" })) : /* @__PURE__ */ React150.createElement(Box, { display: "flex", justifyContent: "flex-end", flexDirection: "column" }, paymentTokenAmount === void 0 || Number.isNaN(paymentTokenAmount) ? "-" : /* @__PURE__ */ React150.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, /* @__PURE__ */ React150.createElement(motion5.div, { layout: true }, /* @__PURE__ */ React150.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, icon, /* @__PURE__ */ React150.createElement(
+  const { activeTheme } = useActiveTheme();
+  return /* @__PURE__ */ React150.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React150.createElement(FunTxSummaryLineItemKeyText, { text: label }), isLoading ? /* @__PURE__ */ React150.createElement(
+    Box,
+    {
+      alignItems: "center",
+      display: "flex",
+      gap: "8",
+      style: {
+        // match the height of the final rendered height of the number component rendered by NumberFlow, keep in sync in case the `fontSize` changes
+        height: mapFontLineHeightToNumberFlowHeight[activeTheme.fontSize["12"].lineHeight] ?? activeTheme.fontSize["12"].lineHeight
+      }
+    },
+    /* @__PURE__ */ React150.createElement(FunSkeletonCircle, { size: "15" }),
+    /* @__PURE__ */ React150.createElement(FunSkeletonBlock, { height: "10", width: "93" })
+  ) : /* @__PURE__ */ React150.createElement(Box, { display: "flex", justifyContent: "flex-end", flexDirection: "column" }, paymentTokenAmount === void 0 || Number.isNaN(paymentTokenAmount) ? "-" : /* @__PURE__ */ React150.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, /* @__PURE__ */ React150.createElement(motion5.div, { layout: true }, /* @__PURE__ */ React150.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, icon, /* @__PURE__ */ React150.createElement(
     Box,
     {
       fontWeight: "medium",
@@ -14553,6 +14573,7 @@ function CheckoutPrimaryInfo({
   config,
   isLoading = false
 }) {
+  const { activeTheme } = useActiveTheme();
   const checkoutItemDisplay = useCheckoutItemDisplay({ checkoutConfig: config });
   return /* @__PURE__ */ React152.createElement(
     Box,
@@ -14563,7 +14584,16 @@ function CheckoutPrimaryInfo({
       justifyContent: "center",
       gap: "4"
     },
-    isLoading ? /* @__PURE__ */ React152.createElement(FunSkeletonBlock, { height: "48", width: "120" }) : quote ? /* @__PURE__ */ React152.createElement(
+    isLoading ? (
+      // match the height of the final rendered height of the AnimatedDollarValue component, keep in sync in case the `fontSize` changes
+      /* @__PURE__ */ React152.createElement(
+        FunSkeletonBlock,
+        {
+          height: mapFontLineHeightToNumberFlowHeight[activeTheme.fontSize["40"].lineHeight] ?? activeTheme.fontSize["40"].lineHeight,
+          width: "120"
+        }
+      )
+    ) : quote ? /* @__PURE__ */ React152.createElement(
       Box,
       {
         fontSize: "40",
@@ -14666,11 +14696,11 @@ import { ClientError as ClientError2 } from "@funkit/utils";
 import { useState as useState41 } from "react";
 
 // src/hooks/useAutoClearState.ts
-import { useCallback as useCallback28, useEffect as useEffect32, useRef as useRef14, useState as useState40 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect31, useRef as useRef14, useState as useState40 } from "react";
 function useAutoClearState(initialValue = null) {
   const [state, setState] = useState40(initialValue);
   const timeoutRef = useRef14();
-  useEffect32(() => {
+  useEffect31(() => {
     return () => {
       if (timeoutRef.current !== void 0) {
         clearTimeout(timeoutRef.current);
@@ -14692,16 +14722,38 @@ function useAutoClearState(initialValue = null) {
   ];
 }
 
+// src/hooks/useIsBlacklisted.ts
+import { FlagKey as FlagKey12 } from "@funkit/utils";
+import { useMemo as useMemo23 } from "react";
+var useIsBlacklisted = (walletAddress, customRecipient) => {
+  const flagStr = useFlag(FlagKey12.AddressBlacklist);
+  const blacklist = useMemo23(
+    () => safeJSONParse(flagStr)?.map((addr) => addr.toLowerCase()) || [],
+    [flagStr]
+  );
+  return {
+    isWalletBlacklisted: walletAddress ? blacklist.includes(walletAddress.toLowerCase()) : false,
+    isCustomRecipientBlacklisted: customRecipient ? blacklist.includes(customRecipient.toLowerCase()) : false
+  };
+};
+
 // src/modals/CheckoutModal/ConfirmationStep/useCheckoutConfirmation.ts
 var CHECKOUT_CONFIRMATION_UI_ERRORS = {
   QUOTE_EXPIRED: {
     durationMs: 5e3,
     message: "Quote expired. Please re-confirm the new checkout quote.",
-    type: "error"
+    type: "error",
+    code: "QUOTE_EXPIRED" /* QUOTE_EXPIRED */
   },
   GENERIC_ERROR: {
     message: "An error occurred during checkout. Please try again.",
-    type: "error"
+    type: "error",
+    code: "GENERIC_ERROR" /* GENERIC_ERROR */
+  },
+  RISK_ERROR: {
+    message: `Sorry, ${FUN_ORG_NAME} Checkout is unable to proceed for security reasons.`,
+    type: "warning",
+    code: "RISK_ERROR" /* RISK_ERROR */
   }
 };
 function isQuoteExpiredError(error) {
@@ -14711,10 +14763,15 @@ function toCheckoutConfirmationError(error) {
   if (error instanceof Error && isQuoteExpiredError(error)) {
     return CHECKOUT_CONFIRMATION_UI_ERRORS.QUOTE_EXPIRED;
   }
+  if (error instanceof Error) {
+    const confirmationError = CHECKOUT_CONFIRMATION_UI_ERRORS[error.message];
+    if (confirmationError) return confirmationError;
+  }
   if (error instanceof ClientError2) {
     return {
       message: error.rawMessage,
-      type: "error"
+      type: "error",
+      code: "GENERIC_ERROR" /* GENERIC_ERROR */
     };
   }
   return CHECKOUT_CONFIRMATION_UI_ERRORS.GENERIC_ERROR;
@@ -14724,8 +14781,11 @@ function useCheckoutConfirmation({
   onSuccess
 }) {
   const { checkoutItem, confirmCheckout } = useCheckoutContext();
+  const customRecipient = checkoutItem?.initSettings.config.customRecipient;
+  const { apiKey } = useFunkitConfig();
   const { latestQuote } = useQuoteContext();
-  const { loginType, funWallet } = useGeneralWallet();
+  const { loginType, funWallet, walletAddress } = useGeneralWallet();
+  const { isCustomRecipientBlacklisted, isWalletBlacklisted } = useIsBlacklisted(walletAddress, customRecipient);
   const [error, setError] = useAutoClearState();
   const [isLoading, setIsLoading] = useState41(false);
   const [step, setStep] = useState41(null);
@@ -14735,6 +14795,17 @@ function useCheckoutConfirmation({
         return;
       }
       setIsLoading(true);
+      logger.log("riskAssessment_isBlacklisted", {
+        isWalletBlacklisted,
+        isCustomRecipientBlacklisted,
+        walletAddress,
+        customRecipient
+      });
+      const isRisky = await hasRisk(apiKey, walletAddress, customRecipient);
+      const isCheckoutRisky = isRisky || isWalletBlacklisted || isCustomRecipientBlacklisted;
+      if (isCheckoutRisky) {
+        throw new Error("RISK_ERROR" /* RISK_ERROR */);
+      }
       let shouldBatchOpBypassInit = false;
       if (!isCheckoutCrFlow(checkoutItem) && loginType !== "web3" /* Web3 */) {
         const targetChainId = checkoutItem.initSettings.config.targetChain;
@@ -14778,7 +14849,7 @@ function useCheckoutConfirmation({
 import { useState as useState43 } from "react";
 
 // src/modals/CheckoutModal/useSourceAssetConfirm.tsx
-import { useEffect as useEffect33, useState as useState42 } from "react";
+import { useEffect as useEffect32, useState as useState42 } from "react";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
 import { useCallback as useCallback29 } from "react";
@@ -14834,8 +14905,8 @@ function useCheckoutAccountBalanceTransfer() {
 }
 
 // src/hooks/useMesh.tsx
-import { useQuery as useQuery7 } from "@tanstack/react-query";
-import React155, { useMemo as useMemo23 } from "react";
+import { useQuery as useQuery6 } from "@tanstack/react-query";
+import React155, { useMemo as useMemo24 } from "react";
 import { FlagKey as FlagKey13 } from "@funkit/utils";
 
 // src/components/FunSelectBrokerage/FunBrokerageItem.tsx
@@ -14892,7 +14963,7 @@ var useSupportedExchanges = () => {
     FlagKey13.SupportedExchangesV2,
     FALLBACK_EXCHANGES_STRING
   );
-  return useMemo23(() => {
+  return useMemo24(() => {
     return supportedExchangesFlag.split(",").flatMap((value) => {
       const brokerNameOrType = value.trim();
       if (!brokerNameOrType) {
@@ -14916,7 +14987,7 @@ var useMeshExchanges = ({
 }) => {
   const { getActiveConnection } = useFunkitMesh();
   const supportedExchanges = useSupportedExchanges();
-  const options = useMemo23(() => {
+  const options = useMemo24(() => {
     return supportedExchanges.map((brokerType) => {
       const hasActiveConnection = !!getActiveConnection(brokerType);
       return createFunSelectOption(
@@ -14944,7 +15015,7 @@ var useMeshActiveNetworkInfo = (chainId, brokerType) => {
 };
 function useMeshIntegrations() {
   const { apiKey } = useFunkitConfig();
-  const { data, isLoading } = useQuery7({
+  const { data, isLoading } = useQuery6({
     queryKey: ["funkit-mesh-integrations", apiKey],
     queryFn: async () => {
       return await fetchMeshTransferIntegrations(apiKey);
@@ -14986,7 +15057,7 @@ function useMeshAccountHoldings(targetChain, connection) {
   const { integrations } = useMeshIntegrations();
   const meshDeviceId = getMeshDeviceIdFromLocalStorage();
   const enableFrogProxyServer = useFlag(FlagKey13.EnableFrogProxyServer);
-  const query = useQuery7({
+  const query = useQuery6({
     queryKey: [
       {
         apiKey,
@@ -15106,7 +15177,7 @@ function useHackyTriggerWorkaroundReactDevBrainExplode() {
 function useTriggerQuoteAndOtherStuffsWithExtremeCaution(onResult, setPreloadedQuoteData) {
   const [assetRefresh, triggerAssetConfirm] = useHackyTriggerWorkaroundReactDevBrainExplode();
   const { isSourceAssetConfirming, onSourceAssetConfirmed } = useSourceAssetConfirm(setPreloadedQuoteData);
-  useEffect33(() => {
+  useEffect32(() => {
     if (assetRefresh === 0) {
       return;
     }
@@ -15505,7 +15576,7 @@ function usePostCheckout({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useQuoteRefresh.ts
-import { useCallback as useCallback32, useEffect as useEffect34, useMemo as useMemo24, useRef as useRef15, useState as useState46 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect33, useMemo as useMemo25, useRef as useRef15, useState as useState46 } from "react";
 
 // src/hooks/useCountdown.tsx
 import React156 from "react";
@@ -15614,7 +15685,7 @@ function useQuoteRefresh({
     },
     [isOnHold, restartCountdown, setCheckoutQuote, triggerAssetConfirm]
   );
-  const quoteError = useMemo24(() => {
+  const quoteError = useMemo25(() => {
     if (quoteErrorMessage && !isQuoting) {
       return {
         message: quoteErrorMessage,
@@ -15623,7 +15694,7 @@ function useQuoteRefresh({
     }
     return null;
   }, [isQuoting, quoteErrorMessage]);
-  useEffect34(() => {
+  useEffect33(() => {
     if (isPendingRefresh && !isOnHold) {
       setIsPendingRefresh(false);
       refreshQuote();
@@ -15685,16 +15756,16 @@ var ConfirmationStepInfo = {
 var DEFAULT_CONTINUE_TEXT = "Confirm Order";
 function ConfirmationStep({
   modalState,
-  onNext
+  onNext,
+  setModalState
 }) {
-  const { targetChainId } = modalState;
-  const { paymentMethod } = modalState.paymentMethodInfo;
   const { checkoutItem, updateTargetAssetAmount } = useCheckoutContext();
   const { latestQuote } = useQuoteContext();
   const funkitConfig = useFunkitConfig();
   const { walletAddress } = useGeneralWallet();
   const showTagline = useFlag(FlagKey15.ShowPoweredTagline, false);
-  const moonpayAmountCheck = paymentMethod === "card" /* CARD */ ? checkAmountForMoonpay(checkoutItem?.finalDollarValue || 0) : void 0;
+  const { paymentMethodInfo } = modalState;
+  const moonpayAmountCheck = paymentMethodInfo.paymentMethod === "card" /* CARD */ ? checkAmountForMoonpay(checkoutItem?.finalDollarValue || 0) : void 0;
   const {
     handlePostCheckout,
     isPostCheckoutLoading,
@@ -15710,9 +15781,13 @@ function ConfirmationStep({
     handleCheckoutConfirmation,
     isConfirming
   } = useCheckoutConfirmation({
-    // If confirmation fails, do a *hard* refresh of the quote
-    onError: () => refreshQuote(true),
-    // If confirmation succeeds, move on to post-checkout
+    onError: (error2) => {
+      if (error2.code === "RISK_ERROR" /* RISK_ERROR */) {
+        setModalState((state) => ({ ...state, isBlocked: true }));
+      } else {
+        refreshQuote(true);
+      }
+    },
     onSuccess: handlePostCheckout
   });
   const { unlinkBrokerage } = useFunkitMesh();
@@ -15731,7 +15806,7 @@ function ConfirmationStep({
       setSuggestedAssetAmount(maxTargetAssetAmount);
     }
   });
-  useEffect35(() => {
+  useEffect34(() => {
     triggerNewQuote({ maxRetries: 1 });
   }, []);
   const isContinuing = isConfirming || isPostCheckoutLoading;
@@ -15740,7 +15815,7 @@ function ConfirmationStep({
     // Block updates to the current quote during confirmation and post-checkout
     useQuoteRefresh({ isOnHold: isInitialQuoting || isContinuing || isAway })
   );
-  const error = useMemo25(() => {
+  const error = useMemo26(() => {
     if (!isInitialQuoting && moonpayAmountCheck?.isInvalid) {
       return {
         message: moonpayAmountCheck.message,
@@ -15755,7 +15830,7 @@ function ConfirmationStep({
     quoteError,
     isInitialQuoting
   ]);
-  const stepMessage = useMemo25(() => {
+  const stepMessage = useMemo26(() => {
     if (initialQuoteStep) return initialQuoteStep;
     if (postCheckoutStepMessage) return postCheckoutStepMessage;
     if (confirmationStepMessage) return confirmationStepMessage;
@@ -15773,13 +15848,10 @@ function ConfirmationStep({
     checkoutConfig: checkoutItem?.initSettings.config,
     hideAmount: true
   });
-  const textCustomizations = funkitConfig.textCustomizations.confirmationScreen;
-  const uiCustomizations = funkitConfig.uiCustomizations?.confirmationScreen;
   const estimatedTime = useCheckoutTimeEstimate(
     latestQuote?.finalTimeEstimationMs,
-    paymentMethod
+    paymentMethodInfo.paymentMethod
   );
-  const customRecipient = checkoutItem?.initSettings.config.customRecipient;
   const continueConfig = () => {
     if (!quoteError) {
       return {
@@ -15802,8 +15874,11 @@ function ConfirmationStep({
       handleContinue: () => refreshQuote(true)
     };
   };
+  const isQuoteLoading = isInitialQuoting || isQuoting;
   const isStepLoading = isInitialQuoting || isContinuing || isRefreshing;
-  const paymentMethodInfo = modalState.paymentMethodInfo;
+  const textCustomizations = funkitConfig.textCustomizations.confirmationScreen;
+  const uiCustomizations = funkitConfig.uiCustomizations?.confirmationScreen;
+  const customRecipient = checkoutItem?.initSettings.config.customRecipient;
   return /* @__PURE__ */ React157.createElement(Box, null, /* @__PURE__ */ React157.createElement(
     Box,
     {
@@ -15818,16 +15893,16 @@ function ConfirmationStep({
         showTokenAmount: uiCustomizations?.showTokenAmount,
         config: checkoutItem.initSettings.config,
         quote: latestQuote,
-        isLoading: isInitialQuoting || isQuoting
+        isLoading: isQuoteLoading
       }
     ),
     /* @__PURE__ */ React157.createElement(
       PaymentMethodSummary,
       {
-        paymentMethodInfo: modalState.paymentMethodInfo,
+        paymentMethodInfo,
         walletAddress,
         customRecipient,
-        isLoading: isInitialQuoting || isQuoting,
+        isLoading: isQuoteLoading,
         estimatedTime,
         customDestinationConfig: uiCustomizations?.destinationConfig
       }
@@ -15835,21 +15910,15 @@ function ConfirmationStep({
     /* @__PURE__ */ React157.createElement(
       PaymentAmountSummary,
       {
-        isLoading: isInitialQuoting || isQuoting,
-        targetChainId,
+        isLoading: isQuoteLoading,
+        targetChainId: modalState.targetChainId,
         checkoutItem,
         quote: latestQuote,
         textCustomizations,
         uiCustomizations
       }
     ),
-    /* @__PURE__ */ React157.createElement(
-      PaymentFeesSummary,
-      {
-        isLoading: isInitialQuoting || isQuoting,
-        quote: latestQuote
-      }
-    ),
+    /* @__PURE__ */ React157.createElement(PaymentFeesSummary, { isLoading: isQuoteLoading, quote: latestQuote }),
     /* @__PURE__ */ React157.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React157.createElement(FunInfoBanner, null), /* @__PURE__ */ React157.createElement(
       FunAlert,
       {
@@ -15859,7 +15928,7 @@ function ConfirmationStep({
             showDydxDisclaimer: showTagline,
             checkoutItem,
             continueText: DEFAULT_CONTINUE_TEXT,
-            isCardPayment: paymentMethod === "card" /* CARD */,
+            isCardPayment: paymentMethodInfo.paymentMethod === "card" /* CARD */,
             finalConvertedAssetName
           }
         ))
@@ -16132,7 +16201,7 @@ function ConnectExchange({
 
 // src/modals/CheckoutModal/InputAmount/InputAmount.tsx
 import { isMobile as isMobile12 } from "@funkit/utils";
-import React170, { useEffect as useEffect37 } from "react";
+import React170, { useEffect as useEffect36 } from "react";
 
 // src/modals/CheckoutModal/InputAmount/InputAmountLoaded.tsx
 import {
@@ -16140,7 +16209,7 @@ import {
   formatCryptoAndStringify as formatCryptoAndStringify3,
   formatCurrencyAndStringify as formatCurrencyAndStringify8
 } from "@funkit/utils";
-import React168, { useMemo as useMemo26 } from "react";
+import React168, { useMemo as useMemo27 } from "react";
 
 // src/components/Icons/SwitchIcon.tsx
 import React164 from "react";
@@ -16167,14 +16236,14 @@ var SwitchIcon = () => {
 };
 
 // src/hooks/useDynamicFont.ts
-import { useCallback as useCallback34, useEffect as useEffect36, useRef as useRef16, useState as useState49 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect35, useRef as useRef16, useState as useState49 } from "react";
 var SIZE_STEP = 1;
 var ALLOWANCE = 20;
 var useDynamicFont = (inputValue, max, min = 16) => {
   const [fontSize, setFontSize] = useState49(max);
   const inputRef = useRef16(null);
   const canvasRef = useRef16(document.createElement("canvas"));
-  useEffect36(() => {
+  useEffect35(() => {
     const measureTextWidth = (text) => {
       if (!inputRef.current) return void 0;
       const context = canvasRef.current.getContext("2d");
@@ -16624,7 +16693,7 @@ function InputAmountLoaded({
     maxUsd: Number.parseFloat(maxCheckoutUsdString),
     minUsd
   });
-  const error = useMemo26(() => {
+  const error = useMemo27(() => {
     if (usdAvailableAmount === 0) {
       return {
         message: "Insufficient balance, please select another asset instead.",
@@ -16659,7 +16728,7 @@ function InputAmountLoaded({
       }
     }
   }, [checkoutItemTitle, inputError, usdAmount, usdAvailableAmount]);
-  const suggestion = useMemo26(() => {
+  const suggestion = useMemo27(() => {
     if (!inputError) return void 0;
     switch (inputError.type) {
       case "aboveAvailable": {
@@ -16797,7 +16866,7 @@ function InputAmountLoaded({
 
 // src/modals/CheckoutModal/InputAmount/InputAmountLoading.tsx
 import { formatCryptoAndStringify as formatCryptoAndStringify4 } from "@funkit/utils";
-import React169, { useMemo as useMemo27 } from "react";
+import React169, { useMemo as useMemo28 } from "react";
 function InputAmountLoading({
   isCardCheckout,
   modalState,
@@ -16810,7 +16879,7 @@ function InputAmountLoading({
   const { unlinkBrokerage } = useFunkitMesh();
   const targetAssetAmount = checkoutItem?.initSettings.config.targetAssetAmount;
   const targetAssetTicker = checkoutItem?.initSettings.config.targetAssetTicker;
-  const error = useMemo27(() => {
+  const error = useMemo28(() => {
     if (sourceHoldingError) {
       return {
         message: /* @__PURE__ */ React169.createElement("div", null, "Unable to retrieve your account balance. Please try re-linking your account.", " ", paymentMethodInfo.paymentMethod === "brokerage" /* BROKERAGE */ && /* @__PURE__ */ React169.createElement(
@@ -16889,13 +16958,13 @@ function InputAmountLoading({
 
 // src/modals/CheckoutModal/InputAmount/useAssetPrice.ts
 import { getAssetPriceInfo as getAssetPriceInfo3 } from "@funkit/api-base";
-import { skipToken, useQuery as useQuery8 } from "@tanstack/react-query";
+import { skipToken, useQuery as useQuery7 } from "@tanstack/react-query";
 function useAssetPrice({
   chainId,
   assetTokenAddress
 }) {
   const { apiKey } = useFunkitConfig();
-  const { data, error, isLoading } = useQuery8({
+  const { data, error, isLoading } = useQuery7({
     queryKey: ["getAssetPriceInfo", chainId, assetTokenAddress],
     queryFn: chainId && assetTokenAddress ? async () => {
       try {
@@ -16920,14 +16989,14 @@ function useAssetPrice({
 }
 
 // src/modals/CheckoutModal/InputAmount/useAvailableBalanceForCheckout.ts
-import { useMemo as useMemo29 } from "react";
+import { useMemo as useMemo30 } from "react";
 
 // src/modals/CheckoutModal/useWalletAssetHoldings.ts
 import {
   FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS as FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS3,
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO9
 } from "@funkit/chains";
-import { useMemo as useMemo28 } from "react";
+import { useMemo as useMemo29 } from "react";
 
 // src/domains/wallet.ts
 import { polygon as polygon4 } from "viem/chains";
@@ -16988,11 +17057,11 @@ var processWalletAssets = (walletAssets, targetChain) => {
 };
 function useWalletAssetHoldings(targetChain) {
   const { walletAssets, isLoading } = useWalletAssets();
-  const processedAssets = useMemo28(
+  const processedAssets = useMemo29(
     () => processWalletAssets(walletAssets, targetChain),
     [targetChain, walletAssets]
   );
-  const totalBalance = useMemo28(
+  const totalBalance = useMemo29(
     () => processedAssets ? getTotalAssetBalance(processedAssets) : 0,
     [processedAssets]
   );
@@ -17021,7 +17090,7 @@ function useAvailableBalanceForCheckout(paymentMethodInfo, targetChainId, assetC
     ["card" /* CARD */]: null,
     ["token_transfer" /* TOKEN_TRANSFER */]: null
   }[paymentMethodInfo.paymentMethod];
-  const holdingItem = useMemo29(() => {
+  const holdingItem = useMemo30(() => {
     if (!assetSymbol || !holdings) {
       return;
     }
@@ -17071,7 +17140,7 @@ function InputAmount(props) {
   });
   const isCardCheckout = props.modalState.paymentMethodInfo.paymentMethod === "card" /* CARD */;
   const isLoaded = checkoutItem && unitPrice && !sourceHoldingError && !isLoadingSourceHolding;
-  useEffect37(() => setCheckoutQuote(null), []);
+  useEffect36(() => setCheckoutQuote(null), []);
   if (isLoaded) {
     return /* @__PURE__ */ React170.createElement(
       InputAmountLoaded,
@@ -17096,7 +17165,7 @@ function InputAmount(props) {
 }
 
 // src/modals/CheckoutModal/LoadingAccount.tsx
-import React175, { useEffect as useEffect38 } from "react";
+import React175, { useEffect as useEffect37 } from "react";
 import { POLYMARKET_API_KEY as POLYMARKET_API_KEY3 } from "@funkit/api-base";
 import { FlagKey as FlagKey17 } from "@funkit/utils";
 
@@ -17430,7 +17499,7 @@ function LoadingAccount({
   const { updateSelectedPaymentMethodInfo } = useCheckoutContext();
   const { isLoading: isLoadingFlag, getFlag } = useFlags();
   const isTokenTransferEnabled = getFlag(FlagKey17.EnableTokenTransfer);
-  useEffect38(() => {
+  useEffect37(() => {
     if (hasSufficientAsset(walletAssets, targetChainId)) {
       const paymentMethodInfo = createPaymentMethodInfo({
         paymentMethod: "balance" /* ACCOUNT_BALANCE */,
@@ -17493,7 +17562,7 @@ import {
   meshExecuteTransferProxy
 } from "@funkit/api-base";
 import { ClientError as ClientError4, FlagKey as FlagKey18, formatAddress as formatAddress6 } from "@funkit/utils";
-import React183, { useMemo as useMemo30, useState as useState50 } from "react";
+import React183, { useMemo as useMemo31, useState as useState50 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/components/CopyAddress/CopyAddressButton.tsx
@@ -17568,10 +17637,10 @@ function CopyAddressButton({
 }
 
 // src/hooks/useMountEffect.ts
-import { useEffect as useEffect39, useRef as useRef18 } from "react";
+import { useEffect as useEffect38, useRef as useRef18 } from "react";
 function useMountEffect(effect) {
   const isMounted = useRef18(false);
-  useEffect39(() => {
+  useEffect38(() => {
     if (isMounted.current) {
       return;
     }
@@ -17798,7 +17867,7 @@ function MeshVerification({
     return () => setScreen(0 /* INITIAL */);
   });
   const brokerName = getExchangeName(brokerType);
-  const verificationTitle = useMemo30(() => {
+  const verificationTitle = useMemo31(() => {
     switch (executionStatus) {
       case MeshExecuteTransferStatus.secondMfaRequired:
         return `Additional ${brokerName} 2FA required`;
@@ -17825,7 +17894,7 @@ function MeshVerification({
     executionContent?.verificationSteps?.length,
     isSecond2fa
   ]);
-  const verificationDescription = useMemo30(() => {
+  const verificationDescription = useMemo31(() => {
     switch (executionStatus) {
       case MeshExecuteTransferStatus.secondMfaRequired:
         return `Please enable at least two 2FA methods on your ${brokerName} account. Once enabled, you will have to reconnect your account.`;
@@ -17971,7 +18040,7 @@ var VerificationPopup = ({
 };
 
 // src/modals/CheckoutModal/MoonpaySetup.tsx
-import React185, { useCallback as useCallback36, useMemo as useMemo32, useState as useState52 } from "react";
+import React185, { useCallback as useCallback36, useMemo as useMemo33, useState as useState52 } from "react";
 
 // src/components/FunPayments/FunPaymentMoonpayType.css.ts
 var mpClass = "_1kmpeyf0";
@@ -17980,10 +18049,10 @@ var stretchStyle = "_1kmpeyf1";
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/api-base";
 import { colorToHex } from "@funkit/utils";
-import React184, { Fragment as Fragment3, useEffect as useEffect40, useMemo as useMemo31, useState as useState51 } from "react";
+import React184, { Fragment as Fragment3, useEffect as useEffect39, useMemo as useMemo32, useState as useState51 } from "react";
 var LazyMoonPayBuyWidget = (props) => {
   const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState51(null);
-  useEffect40(() => {
+  useEffect39(() => {
     const loadMoonPayBuyWidget = async () => {
       const module = await import("@moonpay/moonpay-react");
       setMoonPayBuyWidget(() => module.MoonPayBuyWidget);
@@ -18011,7 +18080,7 @@ function FunPaymentMoonpayType({
   const isSandboxMode = useIsFunkitSandboxMode();
   const funkitConfig = useFunkitConfig();
   const { userInfo } = useGeneralWallet();
-  const currencyCode = useMemo31(() => {
+  const currencyCode = useMemo32(() => {
     return generateMoonpayCurrencyCode(depositToken, depositTokenChainId);
   }, [depositToken, depositTokenChainId]);
   const depositTokenAmountStringFormatted = formatTokenAmountForMoonpay(
@@ -18034,7 +18103,7 @@ function FunPaymentMoonpayType({
     });
     return signature || "";
   };
-  const moonpayButtonColor = useMemo31(() => {
+  const moonpayButtonColor = useMemo32(() => {
     const primaryButtonHex = colorToHex(activeTheme.colors.buttonPrimary);
     if (["#FFF", "#FFFF", "#FFFFFF", "#FFFFFFFF"].includes(primaryButtonHex)) {
       return void 0;
@@ -18089,7 +18158,7 @@ function MoonpaySetup({
       depositAddress: paymentAddress
     });
   }, [onNext, paymentAddress]);
-  const MoonpayWidget = useMemo32(() => {
+  const MoonpayWidget = useMemo33(() => {
     return /* @__PURE__ */ React185.createElement(
       FunPaymentMoonpayType,
       {
@@ -18119,7 +18188,7 @@ function MoonpaySetup({
 
 // src/modals/CheckoutModal/SelectAsset.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify10 } from "@funkit/utils";
-import React193, { useEffect as useEffect41, useMemo as useMemo35, useState as useState55 } from "react";
+import React194, { useEffect as useEffect40, useMemo as useMemo36, useState as useState55 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Dropdown/ReceiveTokenDropdown.tsx
@@ -18128,7 +18197,7 @@ import React191, { useState as useState54 } from "react";
 // src/components/Dropdown/BaseDropdown.tsx
 import { isMobile as isMobile13 } from "@funkit/utils";
 import { AnimatePresence as AnimatePresence3, motion as motion6 } from "motion/react";
-import React189, { useCallback as useCallback37, useMemo as useMemo33, useState as useState53 } from "react";
+import React189, { useCallback as useCallback37, useMemo as useMemo34, useState as useState53 } from "react";
 
 // src/components/FunNoResults/FunNoResults.tsx
 import React187 from "react";
@@ -18343,7 +18412,7 @@ function BaseDropdown({
   const handleSearch = (event) => {
     setSearchInput(event.target.value);
   };
-  const filteredOptions = useMemo33(
+  const filteredOptions = useMemo34(
     () => options.filter(
       (singleOption) => singleOption.label.toLowerCase().includes(searchInput?.toLowerCase())
     ),
@@ -18522,18 +18591,16 @@ function BaseDropdownItem({
         gap: horizontalIconGap
       },
       iconComponent && /* @__PURE__ */ React190.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center" }, iconComponent),
-      /* @__PURE__ */ React190.createElement(Text, { color: "primaryText", size: "13", weight: "medium" }, label),
-      tagComponent
+      /* @__PURE__ */ React190.createElement(Text, { size: "13", weight: "medium" }, label)
     ),
-    /* @__PURE__ */ React190.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "16" }, isSelected && /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React190.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "16" }, tagComponent, /* @__PURE__ */ React190.createElement(
       Box,
       {
         width: "16",
         height: "16",
-        display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        color: "primaryText"
+        color: isSelected ? "primaryText" : "transparent"
       },
       /* @__PURE__ */ React190.createElement(CheckIcon, null)
     ))
@@ -18623,7 +18690,6 @@ var ReceiveTokenDropdown = ({
                 assetName: "receive-token-asset",
                 assetSrc: iconUrl,
                 chainId,
-                borderedChainIcon: false,
                 largeChainIcon: true
               }
             ),
@@ -18643,13 +18709,104 @@ var ReceiveTokenDropdown = ({
 };
 var ReceiveTokenDropdown_default = ReceiveTokenDropdown;
 
+// src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.tsx
+import React193 from "react";
+
+// src/components/FunPaymentMethodItem/FunPaymentMethodItem.tsx
+import React192 from "react";
+var ValueIcon = ({ valueIcon }) => {
+  if (!valueIcon) return null;
+  return /* @__PURE__ */ React192.createElement(
+    Box,
+    {
+      height: "max",
+      flexDirection: "row",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "flex-end"
+    },
+    valueIcon
+  );
+};
+var PaymentMethodWrapper = ({
+  paddingY,
+  isActive,
+  isDisabled,
+  onClick,
+  children
+}) => {
+  return /* @__PURE__ */ React192.createElement(
+    FunOptionBox,
+    {
+      type: "bordered",
+      isActive,
+      disabled: isDisabled,
+      onClick,
+      paddingY,
+      paddingRight: "11",
+      paddingLeft: "11"
+    },
+    children
+  );
+};
+var FunPaymentMethodItem = ({
+  keyIcon,
+  keyText,
+  valueIcon,
+  disclaimerText,
+  onClick,
+  isError = false,
+  isDisabled = false,
+  isActive = false
+}) => {
+  return /* @__PURE__ */ React192.createElement(
+    PaymentMethodWrapper,
+    {
+      isActive,
+      isDisabled,
+      onClick,
+      paddingY: "11"
+    },
+    /* @__PURE__ */ React192.createElement(Box, { display: "flex", alignItems: "center", gap: "12" }, keyIcon ? /* @__PURE__ */ React192.createElement(Box, { flexDirection: "row", display: "flex", alignItems: "center" }, keyIcon) : null, /* @__PURE__ */ React192.createElement(Box, { display: "flex", gap: "4", flexDirection: "column" }, /* @__PURE__ */ React192.createElement(Text, { color: "primaryText", weight: "medium", size: "12" }, keyText), disclaimerText ? /* @__PURE__ */ React192.createElement(Text, { size: "12", color: isError ? "error" : "secondaryText" }, disclaimerText) : null)),
+    /* @__PURE__ */ React192.createElement(ValueIcon, { valueIcon })
+  );
+};
+
+// src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.css.ts
+var badgeStyle = "_1yofefl0";
+
+// src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.tsx
+var SourcePaymentMethodItem = ({
+  keyIcon,
+  keyText,
+  disclaimerText,
+  onClick,
+  otherSourcesCount,
+  isError = false,
+  isDisabled = false,
+  isActive = false
+}) => {
+  const { textCustomizations } = useFunkitConfig();
+  return /* @__PURE__ */ React193.createElement(
+    PaymentMethodWrapper,
+    {
+      isActive,
+      isDisabled,
+      onClick,
+      paddingY: "7"
+    },
+    /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React193.createElement(Text, { color: "secondaryText", size: "10" }, textCustomizations.sourceMethodTitle), /* @__PURE__ */ React193.createElement(Box, { display: "flex", gap: "6", alignItems: "center" }, keyIcon ? /* @__PURE__ */ React193.createElement(Box, { flexDirection: "row", display: "flex", alignItems: "center" }, keyIcon) : null, /* @__PURE__ */ React193.createElement(Text, { color: "primaryText", weight: "medium", size: "12" }, keyText), disclaimerText ? /* @__PURE__ */ React193.createElement(Text, { size: "12", color: isError ? "error" : "secondaryText" }, disclaimerText) : null)),
+    /* @__PURE__ */ React193.createElement(Box, { color: "tertiaryText", display: "flex", alignItems: "center", gap: "6" }, otherSourcesCount > 0 && /* @__PURE__ */ React193.createElement(FunBadge, { borderRadius: "full" }, /* @__PURE__ */ React193.createElement(Box, { className: badgeStyle }, otherSourcesCount)), /* @__PURE__ */ React193.createElement(ArrowIcon, { direction: "right", size: 20 }))
+  );
+};
+
 // src/hooks/useAllowedAssets.ts
 import { getAllowedAssets } from "@funkit/api-base";
-import { useQuery as useQuery9 } from "@tanstack/react-query";
-import { useCallback as useCallback38, useMemo as useMemo34 } from "react";
+import { useQuery as useQuery8 } from "@tanstack/react-query";
+import { useCallback as useCallback38, useMemo as useMemo35 } from "react";
 function useAllowedAssets() {
   const { apiKey } = useFunkitConfig();
-  const { data, isLoading } = useQuery9({
+  const { data, isLoading } = useQuery8({
     queryKey: ["getAllowedAssets", apiKey],
     queryFn: () => getAllowedAssets({ apiKey, logger }),
     refetchOnMount: false,
@@ -18658,7 +18815,7 @@ function useAllowedAssets() {
     staleTime: 5 * 60 * 1e3,
     gcTime: Number.POSITIVE_INFINITY
   });
-  const tokens = useMemo34(() => {
+  const tokens = useMemo35(() => {
     const ret = {};
     if (!data) {
       return ret;
@@ -18745,94 +18902,6 @@ var useRemainingPaymentSourcesCount = (targetChainId) => {
   return Math.max(moreSources.length + preferred.length - 1, 0);
 };
 
-// src/components/FunPaymentMethodItem/FunPaymentMethodItem.tsx
-import React192 from "react";
-
-// src/components/FunPaymentMethodItem/FunPaymentMethodItem.css.ts
-var badgeStyle = "_74u6re0";
-
-// src/components/FunPaymentMethodItem/FunPaymentMethodItem.tsx
-var ValueIcon = ({ valueIcon }) => {
-  if (!valueIcon) return null;
-  return /* @__PURE__ */ React192.createElement(
-    Box,
-    {
-      height: "max",
-      flexDirection: "row",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end"
-    },
-    valueIcon
-  );
-};
-var PaymentMethodWrapper = ({
-  paddingY,
-  isActive,
-  isDisabled,
-  onClick,
-  children
-}) => {
-  return /* @__PURE__ */ React192.createElement(
-    FunOptionBox,
-    {
-      type: "bordered",
-      isActive,
-      disabled: isDisabled,
-      onClick,
-      paddingY,
-      paddingRight: "11",
-      paddingLeft: "11"
-    },
-    children
-  );
-};
-var FunPaymentMethodItem = ({
-  keyIcon,
-  keyText,
-  valueIcon,
-  disclaimerText,
-  onClick,
-  isError = false,
-  isDisabled = false,
-  isActive = false
-}) => {
-  return /* @__PURE__ */ React192.createElement(
-    PaymentMethodWrapper,
-    {
-      isActive,
-      isDisabled,
-      onClick,
-      paddingY: "11"
-    },
-    /* @__PURE__ */ React192.createElement(Box, { display: "flex", alignItems: "center", gap: "12" }, keyIcon ? /* @__PURE__ */ React192.createElement(Box, { flexDirection: "row", display: "flex", alignItems: "center" }, keyIcon) : null, /* @__PURE__ */ React192.createElement(Box, { display: "flex", gap: "4", flexDirection: "column" }, /* @__PURE__ */ React192.createElement(Text, { color: "primaryText", weight: "medium", size: "12" }, keyText), disclaimerText ? /* @__PURE__ */ React192.createElement(Text, { size: "12", color: isError ? "error" : "secondaryText" }, disclaimerText) : null)),
-    /* @__PURE__ */ React192.createElement(ValueIcon, { valueIcon })
-  );
-};
-var SourcePaymentMethodItem = ({
-  keyIcon,
-  keyText,
-  disclaimerText,
-  onClick,
-  otherSourcesCount,
-  isError = false,
-  isDisabled = false,
-  isActive = false
-}) => {
-  const { textCustomizations } = useFunkitConfig();
-  return /* @__PURE__ */ React192.createElement(
-    PaymentMethodWrapper,
-    {
-      isActive,
-      isDisabled,
-      onClick,
-      paddingY: "7"
-    },
-    /* @__PURE__ */ React192.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React192.createElement(Text, { color: "secondaryText", size: "10" }, textCustomizations.sourceMethodTitle), /* @__PURE__ */ React192.createElement(Box, { display: "flex", gap: "6", alignItems: "center" }, keyIcon ? /* @__PURE__ */ React192.createElement(Box, { flexDirection: "row", display: "flex", alignItems: "center" }, keyIcon) : null, /* @__PURE__ */ React192.createElement(Text, { color: "primaryText", weight: "medium", size: "12" }, keyText), disclaimerText ? /* @__PURE__ */ React192.createElement(Text, { size: "12", color: isError ? "error" : "secondaryText" }, disclaimerText) : null)),
-    /* @__PURE__ */ React192.createElement(Box, { color: "tertiaryText", display: "flex", alignItems: "center", gap: "6" }, otherSourcesCount > 0 && /* @__PURE__ */ React192.createElement(FunBadge, { borderRadius: "full" }, /* @__PURE__ */ React192.createElement(Box, { className: badgeStyle }, otherSourcesCount)), /* @__PURE__ */ React192.createElement(ArrowIcon, { direction: "right", size: 20 }))
-  );
-};
-
 // src/modals/CheckoutModal/SelectAsset.tsx
 var SelectAssetInfo = {
   Component: SelectAsset,
@@ -18868,7 +18937,7 @@ function useEnrichedAccountHoldings({
   const { isAllowed, isLoading: isLoadingAllowed } = useAllowedAssets();
   const { flags, isLoading: isLoadingFlags } = useFlags();
   const { loginType } = useGeneralWallet();
-  const enrichedAccountHoldings = useMemo35(() => {
+  const enrichedAccountHoldings = useMemo36(() => {
     if (!checkoutItem) return [];
     return Object.values(accountHoldings).map((asset) => {
       const usableForCheckout = isAssetUsableToPayForCheckout(
@@ -18902,7 +18971,7 @@ function useAssetOptions({
   isLoadingFlags,
   defaultTokenSymbols
 }) {
-  const assetOptions = useMemo35(() => {
+  const assetOptions = useMemo36(() => {
     if (!checkoutItem || isLoadingFlags) {
       return [];
     }
@@ -18951,7 +19020,7 @@ function MeshOrAccountSelectAsset({
   const [explicitlySelectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState55("");
   const candidates = checkoutItem?.initSettings.config.dynamicTargetAssetCandidates;
   const [userSelectedTargetAssetVertex, setUserSelectedTargetAssetVertex] = useState55(isVertexCustomer(apiKey) && candidates ? candidates[0] : null);
-  const defaultTokenSymbols = useMemo35(() => {
+  const defaultTokenSymbols = useMemo36(() => {
     if (!checkoutItem) {
       return [];
     }
@@ -19022,7 +19091,7 @@ function MeshOrAccountSelectAsset({
     updateTargetAssetForVertex(tokenItem);
     onFinish();
   });
-  const selectedChainTokenSymbol = useMemo35(() => {
+  const selectedChainTokenSymbol = useMemo36(() => {
     if (explicitlySelectedChainTokenSymbol) {
       return explicitlySelectedChainTokenSymbol;
     }
@@ -19045,7 +19114,7 @@ function MeshOrAccountSelectAsset({
     checkoutItem?.selectedSourceAssetInfo,
     explicitlySelectedChainTokenSymbol
   ]);
-  useEffect41(() => {
+  useEffect40(() => {
     const optionEl = document.getElementById(
       `option-${selectedChainTokenSymbol}`
     );
@@ -19059,9 +19128,9 @@ function MeshOrAccountSelectAsset({
   const isAssetsEmpty = assetOptions.length === 0;
   const isDisabled = isAssetsEmpty || !selectedChainTokenSymbol;
   if (isLoadingFlags || isLoadingAllowed) {
-    return /* @__PURE__ */ React193.createElement(FunAssetLoading, { count: 5 });
+    return /* @__PURE__ */ React194.createElement(FunAssetLoading, { count: 5 });
   }
-  return /* @__PURE__ */ React193.createElement(Box, null, /* @__PURE__ */ React193.createElement(
+  return /* @__PURE__ */ React194.createElement(Box, null, /* @__PURE__ */ React194.createElement(
     Box,
     {
       width: "full",
@@ -19071,7 +19140,7 @@ function MeshOrAccountSelectAsset({
       flexDirection: "column",
       gap: "4"
     },
-    isAssetsEmpty ? /* @__PURE__ */ React193.createElement(FunNoResults, null, "No assets found") : isVertexCustomer(apiKey) && candidates ? /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React193.createElement(
+    isAssetsEmpty ? /* @__PURE__ */ React194.createElement(FunNoResults, null, "No assets found") : isVertexCustomer(apiKey) && candidates ? /* @__PURE__ */ React194.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React194.createElement(
       ReceiveTokenDropdown_default,
       {
         tokens: candidates,
@@ -19081,8 +19150,8 @@ function MeshOrAccountSelectAsset({
           setUserSelectedTargetAssetVertex(token);
         }
       }
-    ), /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column" }, assetOptions.map(
-      ({ asset, isDisabled: isDisabled2, badgeColors, badgeText }) => /* @__PURE__ */ React193.createElement(
+    ), /* @__PURE__ */ React194.createElement(Box, { display: "flex", flexDirection: "column" }, assetOptions.map(
+      ({ asset, isDisabled: isDisabled2, badgeColors, badgeText }) => /* @__PURE__ */ React194.createElement(
         FunAssetItem,
         {
           key: asset.chainSymbolKey,
@@ -19094,8 +19163,8 @@ function MeshOrAccountSelectAsset({
           onClick: () => setSelectedChainTokenSymbol(asset.chainSymbolKey)
         }
       )
-    ))) : /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column" }, assetOptions.map(
-      ({ asset, isDisabled: isDisabled2, badgeColors, badgeText }) => /* @__PURE__ */ React193.createElement(
+    ))) : /* @__PURE__ */ React194.createElement(Box, { display: "flex", flexDirection: "column" }, assetOptions.map(
+      ({ asset, isDisabled: isDisabled2, badgeColors, badgeText }) => /* @__PURE__ */ React194.createElement(
         FunAssetItem,
         {
           key: asset.chainSymbolKey,
@@ -19109,10 +19178,10 @@ function MeshOrAccountSelectAsset({
       )
     ))
   ), bottomSectionRef && createPortal8(
-    /* @__PURE__ */ React193.createElement(
+    /* @__PURE__ */ React194.createElement(
       Dialog.BottomBar,
       {
-        topSection: /* @__PURE__ */ React193.createElement(
+        topSection: /* @__PURE__ */ React194.createElement(
           FunNotification,
           {
             isVisible: !!fetchHoldingsError,
@@ -19141,7 +19210,7 @@ function SelectWalletAsset({
   const { walletAddress } = useGeneralWallet();
   const otherSourcesCount = useRemainingPaymentSourcesCount(targetChainId);
   const { data, isLoading, totalBalance } = useWalletAssetHoldings(targetChainId);
-  return /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React193.createElement(
+  return /* @__PURE__ */ React194.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React194.createElement(
     SourcePaymentMethodItem,
     {
       otherSourcesCount,
@@ -19150,7 +19219,7 @@ function SelectWalletAsset({
       keyIcon: label.icon,
       onClick: onSelectSource
     }
-  ), isLoading ? /* @__PURE__ */ React193.createElement(FunAssetLoading, { count: 5 }) : /* @__PURE__ */ React193.createElement(
+  ), isLoading ? /* @__PURE__ */ React194.createElement(FunAssetLoading, { count: 5 }) : /* @__PURE__ */ React194.createElement(
     MeshOrAccountSelectAsset,
     {
       paymentMethodInfo,
@@ -19175,7 +19244,7 @@ function SelectMeshAsset({
   );
   const accountHoldings = data ?? {};
   const { unlinkBrokerage } = useFunkitMesh();
-  const fetchHoldingsError = isError ? /* @__PURE__ */ React193.createElement("div", null, "Unable to retrieve your account balance. Please retry.", " ", /* @__PURE__ */ React193.createElement(
+  const fetchHoldingsError = isError ? /* @__PURE__ */ React194.createElement("div", null, "Unable to retrieve your account balance. Please retry.", " ", /* @__PURE__ */ React194.createElement(
     FunLinkButton,
     {
       text: "Unlink.",
@@ -19189,7 +19258,7 @@ function SelectMeshAsset({
     }
   )) : null;
   const totalBalance = getTotalAssetBalance(accountHoldings);
-  return /* @__PURE__ */ React193.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React193.createElement(
+  return /* @__PURE__ */ React194.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React194.createElement(
     SourcePaymentMethodItem,
     {
       otherSourcesCount,
@@ -19198,7 +19267,7 @@ function SelectMeshAsset({
       keyIcon: label.icon,
       onClick: onSelectSource
     }
-  ), isLoading ? /* @__PURE__ */ React193.createElement(FunAssetLoading, { count: 5 }) : /* @__PURE__ */ React193.createElement(
+  ), isLoading ? /* @__PURE__ */ React194.createElement(FunAssetLoading, { count: 5 }) : /* @__PURE__ */ React194.createElement(
     MeshOrAccountSelectAsset,
     {
       paymentMethodInfo,
@@ -19223,7 +19292,7 @@ function SelectAsset({
   const handleBrokerageDisconnected = () => {
     onNext({ disconnectedBrokerage: true });
   };
-  return paymentMethodInfo.paymentMethod === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React193.createElement(
+  return paymentMethodInfo.paymentMethod === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React194.createElement(
     SelectMeshAsset,
     {
       paymentMethodInfo,
@@ -19232,7 +19301,7 @@ function SelectAsset({
       onSelectSource: handleSelectSource,
       onBrokerageDisconnected: handleBrokerageDisconnected
     }
-  ) : /* @__PURE__ */ React193.createElement(
+  ) : /* @__PURE__ */ React194.createElement(
     SelectWalletAsset,
     {
       paymentMethodInfo,
@@ -19244,11 +19313,11 @@ function SelectAsset({
 }
 
 // src/modals/CheckoutModal/SelectBrokerage.tsx
-import React195, { useState as useState56 } from "react";
+import React196, { useState as useState56 } from "react";
 
 // src/components/FunSelectBrokerage/FunSelectBrokerage.tsx
 import clsx19 from "clsx";
-import React194 from "react";
+import React195 from "react";
 
 // src/components/FunSelectBrokerage/FunSelectBrokerage.css.ts
 var selectBrokerageStyle = "_1whuldv0";
@@ -19259,7 +19328,7 @@ function FunSelectBrokerage({
   options,
   selectedValue
 }) {
-  return /* @__PURE__ */ React194.createElement(
+  return /* @__PURE__ */ React195.createElement(
     Box,
     {
       className: clsx19(hideScrollBar, selectBrokerageStyle),
@@ -19269,7 +19338,7 @@ function FunSelectBrokerage({
     },
     options.map((optionItem) => {
       const isActive = selectedValue === optionItem.value;
-      return /* @__PURE__ */ React194.createElement(
+      return /* @__PURE__ */ React195.createElement(
         FunOptionBox,
         {
           key: optionItem.value,
@@ -19344,7 +19413,7 @@ function SelectBrokerage({
       });
     }
   };
-  return /* @__PURE__ */ React195.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React195.createElement(
+  return /* @__PURE__ */ React196.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React196.createElement(
     FunInput,
     {
       placeholder: "Search exchanges",
@@ -19352,7 +19421,7 @@ function SelectBrokerage({
       onChange: handleSearch,
       prefixIcon: "SearchIcon"
     }
-  ), /* @__PURE__ */ React195.createElement(Box, { display: "flex", justifyContent: "center", style: { minHeight: 200 } }, filteredOptions.length === 0 ? /* @__PURE__ */ React195.createElement(FunNoResults, null, "No results found") : /* @__PURE__ */ React195.createElement(
+  ), /* @__PURE__ */ React196.createElement(Box, { display: "flex", justifyContent: "center", style: { minHeight: 200 } }, filteredOptions.length === 0 ? /* @__PURE__ */ React196.createElement(FunNoResults, null, "No results found") : /* @__PURE__ */ React196.createElement(
     FunSelectBrokerage,
     {
       onSelect: handleSelect,
@@ -19363,7 +19432,7 @@ function SelectBrokerage({
 }
 
 // src/modals/CheckoutModal/SourceChange/SourceChange.tsx
-import React197, { useEffect as useEffect43, useState as useState58 } from "react";
+import React198, { useEffect as useEffect42, useState as useState58 } from "react";
 import { POLYMARKET_API_KEY as POLYMARKET_API_KEY4 } from "@funkit/api-base";
 
 // src/components/FunPayments/FunPaymentMethods.tsx
@@ -19371,7 +19440,7 @@ import {
   formatCurrencyAndStringify as formatCurrencyAndStringify11,
   formatSecondsToReadableForm as formatSecondsToReadableForm3
 } from "@funkit/utils";
-import React196, { Fragment as Fragment4, useEffect as useEffect42 } from "react";
+import React197, { Fragment as Fragment4, useEffect as useEffect41 } from "react";
 
 // src/hooks/useEnabledTokenTransferChainTokens.ts
 import { FlagKey as FlagKey20 } from "@funkit/utils";
@@ -20079,14 +20148,14 @@ var getDefaultTransports = () => {
 };
 
 // src/hooks/useUsableWalletAssetsForCheckout.ts
-import { useMemo as useMemo36 } from "react";
+import { useMemo as useMemo37 } from "react";
 function useUsableWalletAssetsForCheckout() {
   const { checkoutItem } = useCheckoutContext();
   const { flags } = useFlags();
   const { loginType } = useGeneralWallet();
   const { walletAssets } = useWalletAssets({ enableRefetchInterval: false });
   const { isAllowed } = useAllowedAssets();
-  return useMemo36(() => {
+  return useMemo37(() => {
     if (!walletAssets || !checkoutItem) return;
     const usableAssets = {};
     for (const [assetKey, asset] of Object.entries(walletAssets)) {
@@ -20114,37 +20183,37 @@ var BrokerageConditionalIcons = () => {
   const { getActiveConnection } = useFunkitMesh();
   return supportedExchanges.filter((brokerType) => !getActiveConnection(brokerType)).map((brokerType) => {
     const icon = getExchangeIcon(brokerType, 12);
-    return icon ? /* @__PURE__ */ React196.createElement(Fragment4, { key: brokerType }, icon) : null;
+    return icon ? /* @__PURE__ */ React197.createElement(Fragment4, { key: brokerType }, icon) : null;
   }).filter((icon) => icon !== null).slice(0, 5);
 };
+var getDynamicValueIconComponent = () => {
+  const defaultChains = getDefaultChains();
+  return /* @__PURE__ */ React197.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, defaultChains.map(({ id: chainId }, index) => {
+    const metadata = chainMetadataById[chainId];
+    return /* @__PURE__ */ React197.createElement(
+      Box,
+      {
+        key: chainId,
+        position: "relative",
+        style: { right: `${(defaultChains.length - index - 1) * -2}px` }
+      },
+      /* @__PURE__ */ React197.createElement(
+        AsyncImage,
+        {
+          alt: metadata.name,
+          borderRadius: "full",
+          src: metadata.iconUrl,
+          height: 12,
+          width: 12
+        }
+      )
+    );
+  }));
+};
 function ConnectWalletItem({ isClickable = true }) {
   const { openConnectModal } = useConnectModal();
   const { checkoutItem } = useCheckoutContext();
   const { textCustomizations } = useFunkitConfig();
-  const getDynamicValueIconComponent = () => {
-    const defaultChains = getDefaultChains();
-    return /* @__PURE__ */ React196.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, defaultChains.map(({ id: chainId }, index) => {
-      const metadata = chainMetadataById[chainId];
-      return /* @__PURE__ */ React196.createElement(
-        Box,
-        {
-          key: chainId,
-          position: "relative",
-          style: { right: `${(defaultChains.length - index - 1) * -2}px` }
-        },
-        /* @__PURE__ */ React196.createElement(
-          AsyncImage,
-          {
-            alt: metadata.name,
-            borderRadius: "full",
-            src: metadata.iconUrl,
-            height: 12,
-            width: 12
-          }
-        )
-      );
-    }));
-  };
   const handleWalletConnection = () => {
     if (checkoutItem?.initSettings.onLoginRequired) {
       checkoutItem.initSettings.onLoginRequired();
@@ -20153,10 +20222,10 @@ function ConnectWalletItem({ isClickable = true }) {
     }
   };
   const walletLabel = getWalletLabel(textCustomizations);
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
-      keyIcon: /* @__PURE__ */ React196.createElement(
+      keyIcon: /* @__PURE__ */ React197.createElement(
         Box,
         {
           height: "20",
@@ -20165,7 +20234,7 @@ function ConnectWalletItem({ isClickable = true }) {
           alignItems: "center",
           justifyContent: "center"
         },
-        /* @__PURE__ */ React196.createElement(EvmWallet, null)
+        /* @__PURE__ */ React197.createElement(EvmWallet, null)
       ),
       keyText: walletLabel,
       valueIcon: getDynamicValueIconComponent(),
@@ -20176,16 +20245,16 @@ function ConnectWalletItem({ isClickable = true }) {
   );
 }
 function SupportedChainList({ chainIdList }) {
-  return /* @__PURE__ */ React196.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, chainIdList.map((chainId, index) => {
+  return /* @__PURE__ */ React197.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end" }, chainIdList.map((chainId, index) => {
     const metadata = chainMetadataById[chainId];
-    return /* @__PURE__ */ React196.createElement(
+    return /* @__PURE__ */ React197.createElement(
       Box,
       {
         key: chainId,
         position: "relative",
         style: { right: `${(chainIdList.length - index - 1) * -2}px` }
       },
-      /* @__PURE__ */ React196.createElement(
+      /* @__PURE__ */ React197.createElement(
         AsyncImage,
         {
           alt: metadata.name,
@@ -20202,7 +20271,7 @@ function PaymentMethodIcon({
   paymentIcon,
   keyIconSize
 }) {
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     Box,
     {
       display: "flex",
@@ -20235,7 +20304,7 @@ var ConnectedMeshPaymentMethodItem = ({
   const timeEstimate = useCheckoutTimeEstimate(3 * 60, "brokerage" /* BROKERAGE */);
   const disclaimerText = isPending ? "Fetching balance..." : balanceError ? "Couldn't fetch balance" : `${formatCurrencyAndStringify11(sourceBalance)} \u2022 ${formatSecondsToReadableForm3(timeEstimate, true)}`;
   const isDisabled = !!balanceError || sourceBalance < MIN_CHECKOUT_AMOUNT_USD;
-  useEffect42(() => {
+  useEffect41(() => {
     if (isPending || isLoading || isFetching) {
       return;
     }
@@ -20249,7 +20318,7 @@ var ConnectedMeshPaymentMethodItem = ({
     isFetching,
     paymentMethodInfo.meta.brokerType
   ]);
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
       isDisabled,
@@ -20257,7 +20326,7 @@ var ConnectedMeshPaymentMethodItem = ({
       isActive: isSelected,
       keyIcon: label.icon,
       keyText: label.text,
-      valueIcon: isSelected ? /* @__PURE__ */ React196.createElement(CheckIcon, null) : null,
+      valueIcon: isSelected ? /* @__PURE__ */ React197.createElement(CheckIcon, null) : null,
       onClick: onSelect,
       disclaimerText
     }
@@ -20279,17 +20348,17 @@ var AccountBalancePaymentMethodItem = ({
     const uniqueChainIds = Array.from(
       new Set(Object.values(usableWalletAssets).map((asset) => asset.chainId))
     );
-    return /* @__PURE__ */ React196.createElement(SupportedChainList, { chainIdList: uniqueChainIds });
+    return /* @__PURE__ */ React197.createElement(SupportedChainList, { chainIdList: uniqueChainIds });
   };
   const dynamicLimit = formatCurrencyAndStringify11(totalBalance);
   const disclaimerText = `${dynamicLimit ?? "No limit"} \u2022 Instant`;
   const walletLabel = getWalletLabel(textCustomizations, walletAddress);
   const keyIconSize = "20";
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
       isActive,
-      keyIcon: isLoadingAssets ? /* @__PURE__ */ React196.createElement(SpinnerIcon, { size: keyIconSize }) : /* @__PURE__ */ React196.createElement(
+      keyIcon: isLoadingAssets ? /* @__PURE__ */ React197.createElement(SpinnerIcon, { size: keyIconSize }) : /* @__PURE__ */ React197.createElement(
         PaymentMethodIcon,
         {
           keyIconSize,
@@ -20314,11 +20383,11 @@ var CardPaymentMethodItem = ({
   textCustomizations
 }) => {
   const timeEstimate = useCheckoutTimeEstimate(2 * 60, "card" /* CARD */);
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
       isActive,
-      keyIcon: /* @__PURE__ */ React196.createElement(
+      keyIcon: /* @__PURE__ */ React197.createElement(
         PaymentMethodIcon,
         {
           keyIconSize,
@@ -20326,7 +20395,7 @@ var CardPaymentMethodItem = ({
         }
       ),
       keyText: textCustomizations.debitOrCredit,
-      valueIcon: customValueIcon !== void 0 ? customValueIcon : /* @__PURE__ */ React196.createElement(CombinedCreditCardOptionsIcon, null),
+      valueIcon: customValueIcon !== void 0 ? customValueIcon : /* @__PURE__ */ React197.createElement(CombinedCreditCardOptionsIcon, null),
       onClick,
       isDisabled: !isClickable,
       disclaimerText: `$10,000 limit \u2022 ${formatSecondsToReadableForm3(timeEstimate, true)}`
@@ -20345,13 +20414,13 @@ var TransferPaymentMethodItem = ({
   const enabledChainTokens = useEnabledTokenTransferChainTokens();
   const getTokenTransferIcon = () => {
     const uniqueChainIds = Array.from(new Set(Object.keys(enabledChainTokens)));
-    return /* @__PURE__ */ React196.createElement(SupportedChainList, { chainIdList: uniqueChainIds });
+    return /* @__PURE__ */ React197.createElement(SupportedChainList, { chainIdList: uniqueChainIds });
   };
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
       isActive,
-      keyIcon: /* @__PURE__ */ React196.createElement(
+      keyIcon: /* @__PURE__ */ React197.createElement(
         PaymentMethodIcon,
         {
           keyIconSize,
@@ -20376,11 +20445,11 @@ var BrokeragePaymentMethodItem = ({
   textCustomizations
 }) => {
   const timeEstimate = useCheckoutTimeEstimate(3 * 60, "brokerage" /* BROKERAGE */);
-  return /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React197.createElement(
     FunPaymentMethodItem,
     {
       isActive,
-      keyIcon: /* @__PURE__ */ React196.createElement(
+      keyIcon: /* @__PURE__ */ React197.createElement(
         PaymentMethodIcon,
         {
           keyIconSize,
@@ -20388,7 +20457,7 @@ var BrokeragePaymentMethodItem = ({
         }
       ),
       keyText: textCustomizations.brokerageOrExchange,
-      valueIcon: customValueIcon ?? /* @__PURE__ */ React196.createElement(Box, { display: "flex", gap: "2", alignItems: "center" }, /* @__PURE__ */ React196.createElement(BrokerageConditionalIcons, null)),
+      valueIcon: customValueIcon ?? /* @__PURE__ */ React197.createElement(Box, { display: "flex", gap: "2", alignItems: "center" }, /* @__PURE__ */ React197.createElement(BrokerageConditionalIcons, null)),
       onClick,
       isDisabled: !isClickable,
       disclaimerText: `No limit \u2022 ${formatSecondsToReadableForm3(timeEstimate, true)}`
@@ -20414,16 +20483,16 @@ function AddPaymentMethodItem({
     keyIconSize: "20"
   };
   if (paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
-    return /* @__PURE__ */ React196.createElement(ConnectWalletItem, { isClickable });
+    return /* @__PURE__ */ React197.createElement(ConnectWalletItem, { isClickable });
   }
   if (paymentMethod === "card" /* CARD */) {
-    return /* @__PURE__ */ React196.createElement(CardPaymentMethodItem, { ...commonProps });
+    return /* @__PURE__ */ React197.createElement(CardPaymentMethodItem, { ...commonProps });
   }
   if (paymentMethod === "token_transfer" /* TOKEN_TRANSFER */) {
-    return /* @__PURE__ */ React196.createElement(TransferPaymentMethodItem, { ...commonProps });
+    return /* @__PURE__ */ React197.createElement(TransferPaymentMethodItem, { ...commonProps });
   }
   if (paymentMethod === "brokerage" /* BROKERAGE */) {
-    return /* @__PURE__ */ React196.createElement(BrokeragePaymentMethodItem, { ...commonProps });
+    return /* @__PURE__ */ React197.createElement(BrokeragePaymentMethodItem, { ...commonProps });
   }
 }
 
@@ -20558,18 +20627,18 @@ var ConnectedSource = ({
 }) => {
   if (paymentInfo.paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
     const isSelected2 = selectedPaymentInfo?.paymentMethod === "balance" /* ACCOUNT_BALANCE */;
-    return /* @__PURE__ */ React197.createElement(
+    return /* @__PURE__ */ React198.createElement(
       AccountBalancePaymentMethodItem,
       {
         isActive: isSelected2,
         onClick: onSelect,
-        customValueIcon: isSelected2 ? /* @__PURE__ */ React197.createElement(CheckIcon, null) : null,
+        customValueIcon: isSelected2 ? /* @__PURE__ */ React198.createElement(CheckIcon, null) : null,
         targetChainId
       }
     );
   }
   const isSelected = selectedPaymentInfo?.paymentMethod === "brokerage" /* BROKERAGE */ && selectedPaymentInfo.meta.brokerType === paymentInfo.meta.brokerType;
-  return /* @__PURE__ */ React197.createElement(
+  return /* @__PURE__ */ React198.createElement(
     ConnectedMeshPaymentMethodItem,
     {
       paymentMethodInfo: paymentInfo,
@@ -20589,7 +20658,7 @@ function SourceChange({
   const { updateSelectedPaymentMethodInfo, checkoutItem } = useCheckoutContext();
   const [connectedSource, setConnectedSource] = useState58(paymentMethodInfo);
   const [newSource, setNewSource] = useState58();
-  useEffect43(() => {
+  useEffect42(() => {
     if (!paymentMethodInfo) return;
     updateSelectedPaymentMethodInfo(paymentMethodInfo);
   }, [paymentMethodInfo, updateSelectedPaymentMethodInfo]);
@@ -20659,7 +20728,7 @@ function SourceChange({
   );
   function renderSource(source) {
     if (typeof source === "object") {
-      return /* @__PURE__ */ React197.createElement(
+      return /* @__PURE__ */ React198.createElement(
         ConnectedSource,
         {
           key: source.title,
@@ -20671,7 +20740,7 @@ function SourceChange({
         }
       );
     }
-    return /* @__PURE__ */ React197.createElement(
+    return /* @__PURE__ */ React198.createElement(
       AddPaymentMethodItem,
       {
         key: source,
@@ -20681,16 +20750,16 @@ function SourceChange({
       }
     );
   }
-  return /* @__PURE__ */ React197.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, preferred.map(renderSource), preferred.length > 0 && /* @__PURE__ */ React197.createElement(FunDivider, { label: "more", marginTop: "8", marginBottom: "8" }), moreSources.map(renderSource));
+  return /* @__PURE__ */ React198.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, preferred.map(renderSource), preferred.length > 0 && /* @__PURE__ */ React198.createElement(FunDivider, { label: "more", marginTop: "8", marginBottom: "8" }), moreSources.map(renderSource));
 }
 
 // src/modals/CheckoutModal/TransferToken.tsx
 import { FlagKey as FlagKey21, formatCurrencyAndStringify as formatCurrencyAndStringify12 } from "@funkit/utils";
-import React201, { useRef as useRef19, useState as useState60 } from "react";
+import React203, { useRef as useRef19, useState as useState60 } from "react";
 import { mainnet as mainnet8, polygon as polygon5 } from "viem/chains";
 
 // src/components/CopyAddress/CopyInputDisplayedAddress.tsx
-import React198 from "react";
+import React199 from "react";
 import { truncateMiddleOfAddress as truncateMiddleOfAddressFn } from "@funkit/utils";
 function CopyInputDisplayedAddress({
   address,
@@ -20698,7 +20767,7 @@ function CopyInputDisplayedAddress({
 }) {
   const { copied: copiedAddress, copy: copyAddressAction } = useCopyToClipboard(address);
   const truncatedAddress = truncateMiddleOfAddress ? truncateMiddleOfAddressFn(address, 40, 24, 8) : address;
-  return /* @__PURE__ */ React198.createElement(
+  return /* @__PURE__ */ React199.createElement(
     Box,
     {
       display: "flex",
@@ -20718,8 +20787,8 @@ function CopyInputDisplayedAddress({
       borderRadius: BORDER_RADIUS,
       borderStyle: "solid"
     },
-    /* @__PURE__ */ React198.createElement(Text, { size: "10", color: "primaryText" }, truncatedAddress),
-    /* @__PURE__ */ React198.createElement(
+    /* @__PURE__ */ React199.createElement(Text, { size: "10", color: "primaryText" }, truncatedAddress),
+    /* @__PURE__ */ React199.createElement(
       CopyIconButton,
       {
         isAddressCopied: copiedAddress,
@@ -20730,7 +20799,7 @@ function CopyInputDisplayedAddress({
 }
 
 // src/components/Dropdown/TokenDropdown.tsx
-import React199, { useState as useState59 } from "react";
+import React200, { useState as useState59 } from "react";
 var TOKEN_ICON_SIZE2 = 16;
 var getTokenIconUrl2 = (symbol) => {
   return ASSET_LOGO_SRCS[symbol.toUpperCase()];
@@ -20763,12 +20832,12 @@ var TokenDropdown = ({
       handleChangeSymbol(enabledTokens[0]);
     }
   }, [selectedSymbol, enabledTokens]);
-  return /* @__PURE__ */ React199.createElement(
+  return /* @__PURE__ */ React200.createElement(
     BaseDropdown_default,
     {
       openToTopOnMobile: false,
       activeItemProps: {
-        iconComponent: /* @__PURE__ */ React199.createElement(
+        iconComponent: /* @__PURE__ */ React200.createElement(
           AsyncImage,
           {
             alt: selectedSymbol,
@@ -20788,10 +20857,10 @@ var TokenDropdown = ({
       renderDropdownOption: (option, isSelected) => {
         const symbol = option.value;
         const iconUrl = getTokenIconUrl2(symbol);
-        return /* @__PURE__ */ React199.createElement(
+        return /* @__PURE__ */ React200.createElement(
           BaseDropdownItem_default,
           {
-            iconComponent: /* @__PURE__ */ React199.createElement(
+            iconComponent: /* @__PURE__ */ React200.createElement(
               AsyncImage,
               {
                 alt: option.label,
@@ -20815,8 +20884,43 @@ var TokenDropdown = ({
 };
 var TokenDropdown_default = TokenDropdown;
 
+// src/components/QRCode/QRCodeSkeletonLoader.tsx
+import React201 from "react";
+var QRCodeSkeletonLoader = ({
+  diagonalDimension = 12
+}) => {
+  const gapBetweenDots = "4";
+  const size = diagonalDimension * 8 + (diagonalDimension - 1) * Number(gapBetweenDots);
+  return /* @__PURE__ */ React201.createElement(
+    Box,
+    {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "4",
+      style: { width: `${size}px`, height: `${size}px` }
+    },
+    Array.from({ length: diagonalDimension }, (_, index) => /* @__PURE__ */ React201.createElement(
+      Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: gapBetweenDots,
+        key: index
+      },
+      Array.from({ length: diagonalDimension }, (_2, index2) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: no better key
+        /* @__PURE__ */ React201.createElement(FunSkeletonCircle, { size: "8", key: index2 })
+      ))
+    ))
+  );
+};
+var QRCodeSkeletonLoader_default = QRCodeSkeletonLoader;
+
 // src/components/Dropdown/ChainDropdown.tsx
-import React200 from "react";
+import React202 from "react";
 var CHAIN_ICON_SIZE = 16;
 var ChainDropdown = ({
   assets,
@@ -20829,12 +20933,12 @@ var ChainDropdown = ({
     (chainId) => assets[chainId].includes(selectedToken)
   );
   const selectedChain = chainMetadataById[selectedChainId];
-  return /* @__PURE__ */ React200.createElement(
+  return /* @__PURE__ */ React202.createElement(
     BaseDropdown_default,
     {
       openToTopOnMobile: false,
       activeItemProps: {
-        iconComponent: /* @__PURE__ */ React200.createElement(
+        iconComponent: /* @__PURE__ */ React202.createElement(
           AsyncImage,
           {
             alt: selectedChain.name,
@@ -20853,10 +20957,10 @@ var ChainDropdown = ({
       })),
       renderDropdownOption: (option, isSelected) => {
         const metadata = chainMetadataById[option.value];
-        return /* @__PURE__ */ React200.createElement(
+        return /* @__PURE__ */ React202.createElement(
           BaseDropdownItem_default,
           {
-            iconComponent: /* @__PURE__ */ React200.createElement(
+            iconComponent: /* @__PURE__ */ React202.createElement(
               AsyncImage,
               {
                 alt: metadata.name,
@@ -20889,7 +20993,7 @@ var ChainDropdown_default = ChainDropdown;
 import {
   initializeCheckoutTokenTransferAddress
 } from "@funkit/api-base";
-import { useQuery as useQuery10 } from "@tanstack/react-query";
+import { useQuery as useQuery9 } from "@tanstack/react-query";
 var useCheckoutTransferDepositAddress = (checkoutItem, userId, recipientAddr) => {
   const { apiKey } = useFunkitConfig();
   const queryKey = {
@@ -20901,7 +21005,7 @@ var useCheckoutTransferDepositAddress = (checkoutItem, userId, recipientAddr) =>
     logger,
     clientMetadata: generateClientMetadataForTokenTransfer()
   };
-  const { data, isFetching } = useQuery10({
+  const { data, isFetching } = useQuery9({
     queryKey: ["initializeCheckoutTokenTransferAddress", queryKey],
     queryFn: ({ queryKey: [_, params] }) => initializeCheckoutTokenTransferAddress(params),
     refetchOnWindowFocus: false
@@ -20985,7 +21089,7 @@ function TransferToken({
     selectedChainId.toString()
   );
   const isLoadingDepositAddress = depositAddress === void 0;
-  return /* @__PURE__ */ React201.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React201.createElement(
+  return /* @__PURE__ */ React203.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React203.createElement(
     Box,
     {
       display: "flex",
@@ -20994,17 +21098,17 @@ function TransferToken({
       justifyContent: "center",
       gap: "14"
     },
-    /* @__PURE__ */ React201.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React201.createElement(
+    /* @__PURE__ */ React203.createElement(Box, { display: "flex", flexDirection: "column", width: "full" }, /* @__PURE__ */ React203.createElement(
       SourcePaymentMethodItem,
       {
         otherSourcesCount,
         keyText: textCustomizations.transferTokens,
         disclaimerText: "No limit",
-        keyIcon: /* @__PURE__ */ React201.createElement(LightningBoltIcon, null),
+        keyIcon: /* @__PURE__ */ React203.createElement(LightningBoltIcon, null),
         onClick: () => onNext({})
       }
     )),
-    /* @__PURE__ */ React201.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React201.createElement(
+    /* @__PURE__ */ React203.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React203.createElement(
       Text,
       {
         size: "12",
@@ -21013,7 +21117,7 @@ function TransferToken({
         style: { textTransform: "uppercase" }
       },
       "Token"
-    ), /* @__PURE__ */ React201.createElement(
+    ), /* @__PURE__ */ React203.createElement(
       TokenDropdown_default,
       {
         defaultSelectedToken,
@@ -21038,7 +21142,7 @@ function TransferToken({
         }
       }
     )),
-    /* @__PURE__ */ React201.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React201.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React201.createElement(
+    /* @__PURE__ */ React203.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React203.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React203.createElement(
       Text,
       {
         size: "12",
@@ -21047,7 +21151,7 @@ function TransferToken({
         style: { textTransform: "uppercase" }
       },
       "Chain"
-    ), /* @__PURE__ */ React201.createElement(
+    ), /* @__PURE__ */ React203.createElement(
       ChainDropdown_default,
       {
         selectedToken,
@@ -21063,7 +21167,7 @@ function TransferToken({
           setSelectedChainId(chainId);
         }
       }
-    )), /* @__PURE__ */ React201.createElement(
+    )), /* @__PURE__ */ React203.createElement(
       Box,
       {
         display: "flex",
@@ -21071,10 +21175,10 @@ function TransferToken({
         alignItems: "center",
         width: "full"
       },
-      /* @__PURE__ */ React201.createElement(Text, { size: "12", color: "primaryText" }, "Minimum deposit"),
-      /* @__PURE__ */ React201.createElement(Text, { size: "12", color: "primaryText" }, minTransferUsd === 0 ? "No minimum" : formatCurrencyAndStringify12(minTransferUsd))
+      /* @__PURE__ */ React203.createElement(Text, { size: "12", color: "primaryText" }, "Minimum deposit"),
+      /* @__PURE__ */ React203.createElement(Text, { size: "12", color: "primaryText" }, minTransferUsd === 0 ? "No minimum" : formatCurrencyAndStringify12(minTransferUsd))
     )),
-    /* @__PURE__ */ React201.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React201.createElement(
+    /* @__PURE__ */ React203.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React203.createElement(
       Text,
       {
         size: "12",
@@ -21083,15 +21187,8 @@ function TransferToken({
         style: { textTransform: "uppercase" }
       },
       "Your deposit address"
-    ), isLoadingDepositAddress ? /* @__PURE__ */ React201.createElement(
-      FunSkeletonBlock,
-      {
-        height: "24",
-        style: { height: "33px" },
-        width: "full"
-      }
-    ) : /* @__PURE__ */ React201.createElement(CopyInputDisplayedAddress, { address: depositAddress })),
-    /* @__PURE__ */ React201.createElement(
+    ), isLoadingDepositAddress ? /* @__PURE__ */ React203.createElement(FunSkeletonBlock, { height: "33", width: "full" }) : /* @__PURE__ */ React203.createElement(CopyInputDisplayedAddress, { address: depositAddress })),
+    /* @__PURE__ */ React203.createElement(
       Box,
       {
         display: "flex",
@@ -21099,31 +21196,7 @@ function TransferToken({
         justifyContent: "center",
         paddingY: "4"
       },
-      isLoadingDepositAddress ? /* @__PURE__ */ React201.createElement(
-        Box,
-        {
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "4",
-          style: { width: "140px" }
-        },
-        Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ React201.createElement(
-          Box,
-          {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "4",
-            key: index
-          },
-          Array.from({ length: 12 }, (_2, index2) => (
-            // biome-ignore lint/suspicious/noArrayIndexKey: no better key
-            /* @__PURE__ */ React201.createElement(FunSkeletonCircle, { size: "8", key: index2 })
-          ))
-        ))
-      ) : /* @__PURE__ */ React201.createElement(
+      isLoadingDepositAddress ? /* @__PURE__ */ React203.createElement(QRCodeSkeletonLoader_default, { diagonalDimension: 12 }) : /* @__PURE__ */ React203.createElement(
         QRCode,
         {
           logoSize: 24,
@@ -21137,7 +21210,7 @@ function TransferToken({
         }
       )
     ),
-    /* @__PURE__ */ React201.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React201.createElement(FunInfoBanner, null), /* @__PURE__ */ React201.createElement(
+    /* @__PURE__ */ React203.createElement(Box, { display: "flex", flexDirection: "column", gap: "8" }, /* @__PURE__ */ React203.createElement(FunInfoBanner, null), /* @__PURE__ */ React203.createElement(
       Box,
       {
         display: "flex",
@@ -21146,21 +21219,21 @@ function TransferToken({
         width: "full",
         ref: disclaimerTextWrapperRef
       },
-      /* @__PURE__ */ React201.createElement(Text, { size: "10", color: "secondaryText", weight: "medium" }, "Send in the accepted token to the address above and it will auto swap to ", targetAssetTicker, " in your ", appNameWalletDisplayText, ", minus", " ", /* @__PURE__ */ React201.createElement(
+      /* @__PURE__ */ React203.createElement(Text, { size: "10", color: "secondaryText", weight: "medium" }, "Send in the accepted token to the address above and it will auto swap to ", targetAssetTicker, " in your ", appNameWalletDisplayText, ", minus", " ", /* @__PURE__ */ React203.createElement(
         FunLinkButton,
         {
           href: "https://intercom.help/funxyz/en/articles/10073209-fun-xyz-s-fee-breakdown",
           inline: true,
           text: "fees"
         }
-      ), ".", " ", /* @__PURE__ */ React201.createElement(
+      ), ".", " ", /* @__PURE__ */ React203.createElement(
         FunLinkButton,
         {
           href: "https://fun.xyz/terms",
           inline: true,
           text: "Terms & conditions"
         }
-      ), " ", "apply. Experiencing problems?", " ", /* @__PURE__ */ React201.createElement(
+      ), " ", "apply. Experiencing problems?", " ", /* @__PURE__ */ React203.createElement(
         FunLinkButton,
         {
           href: "https://intercom.help/funxyz/en/articles/10003876-direct-deposit-guide-faqs",
@@ -21304,7 +21377,7 @@ function useTitleConfig(checkoutItem, state) {
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 function FunCheckoutModalStepComponent(props) {
   const { Component: Component2 } = CheckoutModalSteps[props.modalState.step];
-  return /* @__PURE__ */ React202.createElement(Component2, { ...props });
+  return /* @__PURE__ */ React204.createElement(Component2, { ...props });
 }
 function FunCheckoutModalInner({
   checkoutItem,
@@ -21312,7 +21385,6 @@ function FunCheckoutModalInner({
   open
 }) {
   const { isUserGeoblocked } = useFunkitUserIp();
-  const { isCheckoutRisky } = useIsCheckoutRisky(checkoutItem);
   const {
     animation,
     modalState,
@@ -21342,7 +21414,7 @@ function FunCheckoutModalInner({
     setModalState
   };
   const isInitialStep = modalState.step === "loading_account" /* LOADING_ACCOUNT */;
-  const isBlocked = isUserGeoblocked || isCheckoutRisky;
+  const isBlocked = isUserGeoblocked || modalState.isBlocked;
   const hasBack = hasHistoryEntry && !disableBack;
   const checkoutConfig = checkoutItem.initSettings.config;
   const showDydxSwitch = !hasBack && modalState.step !== "checkout_complete" /* CHECKOUT_COMPLETE */;
@@ -21350,7 +21422,7 @@ function FunCheckoutModalInner({
     depositAddress: checkoutItem.depositAddress ?? void 0,
     isCheckoutDetailView: modalState.step === "checkout_complete" /* CHECKOUT_COMPLETE */,
     paddingTop: 0,
-    topbar: /* @__PURE__ */ React202.createElement(
+    topbar: /* @__PURE__ */ React204.createElement(
       Dialog.Title,
       {
         hasBackButton: hasBack && !isBlocked,
@@ -21364,7 +21436,7 @@ function FunCheckoutModalInner({
     ),
     withTopDivider: checkoutConfig.modalTitleMeta ? "always" : "scroll"
   });
-  return /* @__PURE__ */ React202.createElement(
+  return /* @__PURE__ */ React204.createElement(
     Dialog,
     {
       open,
@@ -21373,7 +21445,7 @@ function FunCheckoutModalInner({
       isHidden: modalState.isSoftHidden
     },
     topbar,
-    /* @__PURE__ */ React202.createElement(
+    /* @__PURE__ */ React204.createElement(
       Dialog.Content,
       {
         fullHeight: showFullHeight,
@@ -21383,22 +21455,22 @@ function FunCheckoutModalInner({
         withTopDivider,
         withBottomDivider: modalState.step === "transfer_token" /* TRANSFER_TOKEN */ ? "never" : "scroll"
       },
-      isBlocked ? /* @__PURE__ */ React202.createElement(
+      isBlocked ? /* @__PURE__ */ React204.createElement(
         FunCheckoutBlocked,
         {
           reason: isUserGeoblocked ? "geoblock" : "security"
         }
-      ) : /* @__PURE__ */ React202.createElement(React202.Fragment, null, /* @__PURE__ */ React202.createElement(
+      ) : /* @__PURE__ */ React204.createElement(React204.Fragment, null, /* @__PURE__ */ React204.createElement(
         DydxSwitchTab,
         {
           checkoutItem,
           showSwitch: showDydxSwitch,
           onClose: onCloseWrapper
         }
-      ), /* @__PURE__ */ React202.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
+      ), /* @__PURE__ */ React204.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
     ),
-    /* @__PURE__ */ React202.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }),
-    !isBlocked && /* @__PURE__ */ React202.createElement(
+    /* @__PURE__ */ React204.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }),
+    !isBlocked && /* @__PURE__ */ React204.createElement(
       CheckoutNotifications,
       {
         onHelp: handleCheckoutHelp,
@@ -21412,7 +21484,7 @@ function FunCheckoutModal({ onClose, open }) {
   if (!checkoutItem) {
     return null;
   }
-  return /* @__PURE__ */ React202.createElement(
+  return /* @__PURE__ */ React204.createElement(
     FunCheckoutModalInner,
     {
       checkoutItem,
@@ -21423,7 +21495,7 @@ function FunCheckoutModal({ onClose, open }) {
 }
 
 // src/modals/ConnectModal/ConnectModal.tsx
-import React203 from "react";
+import React205 from "react";
 import { useAccount as useAccount9 } from "wagmi";
 var TITLE_ID2 = "rk_connect_title";
 function ConnectModal({
@@ -21434,12 +21506,12 @@ function ConnectModal({
   const connectionStatus = useConnectionStatus();
   const { disconnect } = useFunkitDisconnect();
   const { isConnecting } = useAccount9();
-  const onConnectModalCancel = React203.useCallback(() => {
+  const onConnectModalCancel = React205.useCallback(() => {
     if (isConnecting) disconnect();
     onClose();
   }, [onClose, disconnect, isConnecting]);
   if (connectionStatus === "disconnected" || connectionStatus === "loading") {
-    return /* @__PURE__ */ React203.createElement(
+    return /* @__PURE__ */ React205.createElement(
       Dialog,
       {
         onClose: onConnectModalCancel,
@@ -21447,7 +21519,7 @@ function ConnectModal({
         titleId: TITLE_ID2,
         isSmartCloseable: true
       },
-      /* @__PURE__ */ React203.createElement(
+      /* @__PURE__ */ React205.createElement(
         FunConnectOptions,
         {
           onClose: onConnectModalCancel,
@@ -21535,13 +21607,13 @@ function ModalProvider({ children }) {
     onConnect: () => closeModals(isUnauthenticated),
     onDisconnect: closeModals
   });
-  useEffect44(() => {
+  useEffect43(() => {
     if (isUnauthenticated) closeModals();
   }, [isUnauthenticated]);
-  return /* @__PURE__ */ React204.createElement(
+  return /* @__PURE__ */ React206.createElement(
     ModalContext.Provider,
     {
-      value: useMemo37(
+      value: useMemo38(
         () => ({
           accountModalOpen,
           accountModalTab,
@@ -21576,7 +21648,7 @@ function ModalProvider({ children }) {
       )
     },
     children,
-    /* @__PURE__ */ React204.createElement(
+    /* @__PURE__ */ React206.createElement(
       ConnectModal,
       {
         onClose: closeConnectModal,
@@ -21584,7 +21656,7 @@ function ModalProvider({ children }) {
         walletsOnly: !!walletsOnly
       }
     ),
-    /* @__PURE__ */ React204.createElement(
+    /* @__PURE__ */ React206.createElement(
       AccountModal,
       {
         onClose: closeAccountModal,
@@ -21592,8 +21664,8 @@ function ModalProvider({ children }) {
         defaultTab: accountModalTab
       }
     ),
-    /* @__PURE__ */ React204.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
-    /* @__PURE__ */ React204.createElement(
+    /* @__PURE__ */ React206.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
+    /* @__PURE__ */ React206.createElement(
       FunCheckoutModal,
       {
         onClose: closeFunCheckoutModal,
@@ -21939,7 +22011,7 @@ var FunkitWeb2Provider = ({
     },
     []
   );
-  useEffect45(() => {
+  useEffect44(() => {
     const newPrivy = new PrivyJS({
       appId: DEFAULT_PRIVY_APP_ID,
       storage: new LocalStorage(),
@@ -22146,7 +22218,7 @@ var FunkitWeb2Provider = ({
       }
     }
   }, [handleFunkitWeb2Login, initChainId, loginMethod]);
-  useEffect45(() => {
+  useEffect44(() => {
     if (privy && privyIframeUrl && isNotNullish13(initChainId)) {
       const iframe = document.getElementById(
         PRIVY_IFRAME_ID
@@ -22261,7 +22333,7 @@ var FunkitWeb2Provider = ({
     },
     [privy]
   );
-  const web2UserInfo = useMemo38(() => {
+  const web2UserInfo = useMemo39(() => {
     if (!loggedInUser || !loggedInUser?.linked_accounts || !loggedInUser?.linked_accounts?.length) {
       return PLACEHOLDER_FUNKIT_USER_INFO;
     }
@@ -22328,7 +22400,7 @@ var FunkitWeb2Provider = ({
     handleFunkitWeb2Logout,
     web2UserInfo
   };
-  return /* @__PURE__ */ React205.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React205.createElement(
+  return /* @__PURE__ */ React207.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React207.createElement(
     "iframe",
     {
       id: PRIVY_IFRAME_ID,
@@ -22361,7 +22433,7 @@ function useConnectionStatus() {
 }
 
 // src/providers/ShowBalanceContext.tsx
-import React206, {
+import React208, {
   createContext as createContext19,
   useContext as useContext19,
   useState as useState64
@@ -22372,20 +22444,20 @@ var ShowBalanceContext = createContext19({
 });
 function ShowBalanceProvider({ children }) {
   const [showBalance, setShowBalance] = useState64();
-  return /* @__PURE__ */ React206.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
+  return /* @__PURE__ */ React208.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
 }
 var useShowBalance = () => useContext19(ShowBalanceContext);
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify13, isMobile as isMobile14, noop as noop8 } from "@funkit/utils";
-import React207 from "react";
+import React209 from "react";
 import { useAccount as useAccount12, useBalance, useConfig as useConfig6 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
-import { useCallback as useCallback43, useEffect as useEffect46, useState as useState65 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect45, useState as useState65 } from "react";
 function useIsMounted() {
   const [isMounted, setIsMounted] = useState65(false);
-  useEffect46(() => {
+  useEffect45(() => {
     setIsMounted(true);
     return () => {
       setIsMounted(false);
@@ -22469,7 +22541,7 @@ function ConnectButtonRenderer({
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
   const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
-  return /* @__PURE__ */ React207.createElement(React207.Fragment, null, children({
+  return /* @__PURE__ */ React209.createElement(React209.Fragment, null, children({
     account: address ? {
       address,
       balanceDecimals: balanceData?.decimals,
@@ -22525,7 +22597,7 @@ function ChainSelectorButton({
   openChainModal,
   chain
 }) {
-  return /* @__PURE__ */ React208.createElement(
+  return /* @__PURE__ */ React210.createElement(
     Box,
     {
       alignItems: "center",
@@ -22553,7 +22625,7 @@ function ChainSelectorButton({
       type: "button",
       ...connectButtonStyles
     },
-    unsupportedChain ? /* @__PURE__ */ React208.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React208.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React208.createElement(
+    unsupportedChain ? /* @__PURE__ */ React210.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React210.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -22563,7 +22635,7 @@ function ChainSelectorButton({
         height: "12",
         width: "12"
       },
-      /* @__PURE__ */ React208.createElement(
+      /* @__PURE__ */ React210.createElement(
         AsyncImage,
         {
           alt: chain.name ?? "Chain icon",
@@ -22574,7 +22646,7 @@ function ChainSelectorButton({
           src: chain.iconUrl
         }
       )
-    ) : null, /* @__PURE__ */ React208.createElement(
+    ) : null, /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: mapResponsiveValue(chainStatus, (value) => {
@@ -22594,7 +22666,7 @@ function AccountButton({
   showBalance,
   accountStatus
 }) {
-  return /* @__PURE__ */ React208.createElement(
+  return /* @__PURE__ */ React210.createElement(
     Box,
     {
       alignItems: "center",
@@ -22614,7 +22686,7 @@ function AccountButton({
       gap: "16",
       ...connectButtonStyles
     },
-    account.displayBalance && /* @__PURE__ */ React208.createElement(
+    account.displayBalance && /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -22624,7 +22696,7 @@ function AccountButton({
       },
       account.displayBalance
     ),
-    /* @__PURE__ */ React208.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React208.createElement(
+    /* @__PURE__ */ React210.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -22632,7 +22704,7 @@ function AccountButton({
           (value) => value === "full" || value === "avatar" ? "block" : "none"
         )
       },
-      /* @__PURE__ */ React208.createElement(
+      /* @__PURE__ */ React210.createElement(
         Avatar,
         {
           address: account.address,
@@ -22641,7 +22713,7 @@ function AccountButton({
           size: 12
         }
       )
-    ), /* @__PURE__ */ React208.createElement(
+    ), /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -22668,11 +22740,11 @@ function ConnectButton({
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
   const [ready, setReady] = useState66(false);
-  useEffect47(() => {
+  useEffect46(() => {
     setShowBalance(showBalance);
     if (!ready) setReady(true);
   }, [showBalance, setShowBalance, ready]);
-  return ready ? /* @__PURE__ */ React208.createElement(ConnectButtonRenderer, null, ({
+  return ready ? /* @__PURE__ */ React210.createElement(ConnectButtonRenderer, null, ({
     account,
     chain,
     mounted,
@@ -22682,7 +22754,7 @@ function ConnectButton({
   }) => {
     const ready2 = mounted && connectionStatus !== "loading";
     const unsupportedChain = chain?.unsupported ?? false;
-    return /* @__PURE__ */ React208.createElement(
+    return /* @__PURE__ */ React210.createElement(
       Box,
       {
         display: "flex",
@@ -22698,7 +22770,7 @@ function ConnectButton({
       },
       ready2 && account && connectionStatus === "connected" ? (
         // Logged in: Chain Button & Account Button
-        /* @__PURE__ */ React208.createElement(React208.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React208.createElement(
+        /* @__PURE__ */ React210.createElement(React210.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React210.createElement(
           ChainSelectorButton,
           {
             unsupportedChain,
@@ -22706,7 +22778,7 @@ function ConnectButton({
             openChainModal,
             chain
           }
-        ), !unsupportedChain && /* @__PURE__ */ React208.createElement(
+        ), !unsupportedChain && /* @__PURE__ */ React210.createElement(
           AccountButton,
           {
             openAccountModal,
@@ -22717,7 +22789,7 @@ function ConnectButton({
         ))
       ) : (
         // Not logged in: Connect Button
-        /* @__PURE__ */ React208.createElement(
+        /* @__PURE__ */ React210.createElement(
           Box,
           {
             as: "button",
@@ -22735,19 +22807,19 @@ function ConnectButton({
             type: "button",
             ...connectButtonStyles
           },
-          /* @__PURE__ */ React208.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
+          /* @__PURE__ */ React210.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
         )
       )
     );
-  }) : /* @__PURE__ */ React208.createElement(React208.Fragment, null);
+  }) : /* @__PURE__ */ React210.createElement(React210.Fragment, null);
 }
 ConnectButton.__defaultProps = defaultProps;
 ConnectButton.Custom = ConnectButtonRenderer;
 
 // src/components/Icons/FunkitPaymentsIconLine.tsx
-import React209 from "react";
+import React211 from "react";
 function MetaMaskPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React209.createElement(
+  return /* @__PURE__ */ React211.createElement(
     "svg",
     {
       width: size,
@@ -22756,7 +22828,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z",
@@ -22767,7 +22839,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z",
@@ -22778,7 +22850,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z",
@@ -22789,7 +22861,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z",
@@ -22800,7 +22872,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z",
@@ -22811,7 +22883,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z",
@@ -22822,7 +22894,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z",
@@ -22833,7 +22905,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z",
@@ -22844,7 +22916,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z",
@@ -22855,7 +22927,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z",
@@ -22866,7 +22938,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z",
@@ -22877,7 +22949,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z",
@@ -22888,7 +22960,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z",
@@ -22899,7 +22971,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z",
@@ -22910,7 +22982,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z",
@@ -22921,7 +22993,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z",
@@ -22932,7 +23004,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z",
@@ -22943,7 +23015,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z",
@@ -22954,7 +23026,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z",
@@ -22965,7 +23037,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z",
@@ -22976,7 +23048,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z",
@@ -22987,7 +23059,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z",
@@ -22998,7 +23070,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z",
@@ -23009,7 +23081,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z",
@@ -23020,7 +23092,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z",
@@ -23031,7 +23103,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z",
@@ -23042,7 +23114,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z",
@@ -23053,7 +23125,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z",
@@ -23064,7 +23136,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z",
@@ -23078,14 +23150,14 @@ function MetaMaskPaymentIcon({ size = 16 }) {
   );
 }
 function MastercardPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React209.createElement(
+  return /* @__PURE__ */ React211.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
       viewBox: "0 0 152.407 108"
     },
-    /* @__PURE__ */ React209.createElement("g", null, /* @__PURE__ */ React209.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React209.createElement("g", null, /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React211.createElement("g", null, /* @__PURE__ */ React211.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React211.createElement("g", null, /* @__PURE__ */ React211.createElement(
       "rect",
       {
         x: "60.4117",
@@ -23094,21 +23166,21 @@ function MastercardPaymentIcon({ size = 16 }) {
         height: "56.6064",
         fill: "#ff5f00"
       }
-    ), /* @__PURE__ */ React209.createElement(
+    ), /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#eb001b"
       }
-    ), /* @__PURE__ */ React209.createElement(
+    ), /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#f79e1b"
       }
-    ), /* @__PURE__ */ React209.createElement(
+    ), /* @__PURE__ */ React211.createElement(
       "path",
       {
         d: "M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z",
@@ -23122,7 +23194,7 @@ function FunkitPaymentsIconLine({
   size = 16,
   gap = "2"
 }) {
-  return /* @__PURE__ */ React209.createElement(
+  return /* @__PURE__ */ React211.createElement(
     Box,
     {
       display: "flex",
@@ -23131,9 +23203,9 @@ function FunkitPaymentsIconLine({
       alignItems: "center",
       justifyContent: "center"
     },
-    /* @__PURE__ */ React209.createElement(MetaMaskPaymentIcon, { size }),
-    /* @__PURE__ */ React209.createElement(MastercardPaymentIcon, { size }),
-    /* @__PURE__ */ React209.createElement(CoinbaseIcon, { size })
+    /* @__PURE__ */ React211.createElement(MetaMaskPaymentIcon, { size }),
+    /* @__PURE__ */ React211.createElement(MastercardPaymentIcon, { size }),
+    /* @__PURE__ */ React211.createElement(CoinbaseIcon, { size })
   );
 }
 
@@ -23192,7 +23264,7 @@ var useUpdateActiveFunkitCheckout = () => {
 
 // src/providers/FunkitProvider.tsx
 import { QueryClientProvider } from "@tanstack/react-query";
-import React210, { createContext as createContext20, useContext as useContext20 } from "react";
+import React212, { createContext as createContext20, useContext as useContext20 } from "react";
 import { WagmiProvider, useAccountEffect as useAccountEffect3 } from "wagmi";
 
 // src/utils/funkitProvider.ts
@@ -23270,26 +23342,26 @@ function validateFunkitProviderProps(props) {
 }
 
 // src/providers/useFingerprint.ts
-import { useCallback as useCallback44, useEffect as useEffect48 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect47 } from "react";
 var storageKey5 = "funkit-connect-version";
 function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.0.4";
+  return "5.0.5";
 }
 function useFingerprint() {
   const fingerprint = useCallback44(() => {
     setFunkitConnectVersion({ version: getCurrentSdkVersion() });
   }, []);
-  useEffect48(() => {
+  useEffect47(() => {
     fingerprint();
   }, [fingerprint]);
 }
 
 // src/providers/usePreloadImages.ts
 import { isNotNullish as isNotNullish14 } from "@funkit/utils";
-import { useCallback as useCallback45, useEffect as useEffect49 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect48 } from "react";
 function usePreloadImages() {
   const funkitConnectChains = useFunkitConnectChains();
   const walletConnectors = useWalletConnectors();
@@ -23299,7 +23371,7 @@ function usePreloadImages() {
       ...funkitConnectChains.map((chain) => chain.iconUrl).filter(isNotNullish14)
     );
   }, [walletConnectors, funkitConnectChains]);
-  useEffect49(() => {
+  useEffect48(() => {
     preloadImages();
   }, [preloadImages]);
 }
@@ -23327,7 +23399,7 @@ function FunkitProvider(props) {
     !!props.debug,
     getCurrentSdkVersion()
   );
-  const MainChild = /* @__PURE__ */ React210.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React210.createElement(
+  const MainChild = /* @__PURE__ */ React212.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React212.createElement(
     FunkitProviderInner,
     {
       avatar: props.avatar,
@@ -23340,7 +23412,7 @@ function FunkitProvider(props) {
     },
     props.children
   ));
-  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React210.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React210.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
+  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React212.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React212.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
 }
 function FunkitProviderInner({
   avatar,
@@ -23360,7 +23432,7 @@ function FunkitProviderInner({
   const avatarContext = avatar ?? defaultAvatar;
   const isSandboxMode = !!sandbox;
   const modalSizeFinal = modalSize || ModalSizeOptions.COMPACT;
-  return /* @__PURE__ */ React210.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React210.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React210.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React210.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React210.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React210.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React210.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React210.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React210.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React210.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React210.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React210.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React210.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React210.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React210.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React210.createElement(UserPresenceProvider, null, /* @__PURE__ */ React210.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React210.createElement(
+  return /* @__PURE__ */ React212.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React212.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React212.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React212.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React212.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React212.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React212.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React212.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React212.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React212.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React212.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React212.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React212.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React212.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React212.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React212.createElement(UserPresenceProvider, null, /* @__PURE__ */ React212.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React212.createElement(
     "div",
     {
       ...createThemeRootProps2(id),
@@ -23369,7 +23441,7 @@ function FunkitProviderInner({
         height: "100%"
       }
     },
-    /* @__PURE__ */ React210.createElement(
+    /* @__PURE__ */ React212.createElement(
       "style",
       {
         dangerouslySetInnerHTML: {