@funkit/connect 5.5.5 → 5.5.7

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
-import {
-  darkTheme
-} from "./chunk-ICCAQZHZ.js";
 import {
   lightTheme
 } from "./chunk-RN4I4Y57.js";
+import {
+  darkTheme
+} from "./chunk-ICCAQZHZ.js";
 import {
   systemFontStack
 } from "./chunk-R2UFCJL7.js";
@@ -509,7 +509,7 @@ import React256, {
   useCallback as useCallback47,
   useContext as useContext18,
   useEffect as useEffect48,
-  useMemo as useMemo46,
+  useMemo as useMemo45,
   useState as useState67
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
@@ -1031,7 +1031,7 @@ import React255, {
   useCallback as useCallback46,
   useContext as useContext17,
   useEffect as useEffect47,
-  useMemo as useMemo45,
+  useMemo as useMemo44,
   useState as useState66
 } from "react";
 import { useAccount as useAccount9, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
@@ -3603,8 +3603,10 @@ var flagConfig = {
               "0x2A8Bd916E85d98d8175258De99fc0ddbcC102eF6",
               "0xda6b07Eb94f699F511a943e9bFC12B64B7fe3486",
               "0x0D6e43CA32545B3dc2FE6f93AafBD7e640F548d4",
-              "0x236c60C57a8B9ca563Fb0dA5199FDdCB686d91E8"
+              "0x236c60C57a8B9ca563Fb0dA5199FDdCB686d91E8",
               // greg
+              "0x4a1457fa2845bAfE8D3909cA3C5ac6107be312Dd"
+              // william PM
             ]
           }
         ],
@@ -3623,7 +3625,13 @@ var flagConfig = {
             values: [POLYMARKET_API_KEY2]
           }
         ],
-        if_any: [],
+        if_any: [
+          {
+            key: "userId",
+            type: "pctRollout",
+            pct: 0
+          }
+        ],
         value: true
       },
       {
@@ -7022,7 +7030,7 @@ function getCheckoutCompletionTime(checkout) {
 }
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryDetail.tsx
-import React221, { useCallback as useCallback40, useMemo as useMemo39, useState as useState57 } from "react";
+import React221, { useCallback as useCallback40, useMemo as useMemo38, useState as useState57 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 
 // src/components/HelpAlert/HelpAlert.tsx
@@ -8513,6 +8521,8 @@ var isCountryBlocked = (blockedList, userIpInfo) => {
 function useFunkitUserIp() {
   const { moonpayApiKey } = useContext14(FunkitMoonpayContext);
   const { getFlag, isLoading: isLoadingFlags } = useFlags();
+  const { apiKey } = useFunkitConfig();
+  const isPolymarket = isPolymarketCustomer(apiKey);
   const { data: userIpInfo, isLoading: isLoadingGeoCheck } = useQuery6({
     queryKey: ["getUserIpInfo"],
     queryFn: async () => {
@@ -8535,7 +8545,7 @@ function useFunkitUserIp() {
     refetchOnWindowFocus: false
   });
   const isUserGeoblocked = useMemo9(() => {
-    if (isLoadingFlags || isLoadingGeoCheck) {
+    if (isLoadingFlags || isLoadingGeoCheck || isPolymarket) {
       return false;
     }
     if (!userIpInfo) {
@@ -8543,7 +8553,7 @@ function useFunkitUserIp() {
     }
     const blockedList = getFlag(FlagKey7.BlockedCountries, ALL_MATCH).split(",");
     return isCountryBlocked(blockedList, userIpInfo);
-  }, [getFlag, isLoadingFlags, isLoadingGeoCheck, userIpInfo]);
+  }, [getFlag, isLoadingFlags, isLoadingGeoCheck, userIpInfo, isPolymarket]);
   return {
     isLoadingGeoCheck: isLoadingFlags || isLoadingGeoCheck,
     isUserGeoblocked,
@@ -10695,7 +10705,7 @@ var BankIconActive = ({ size = 20 }) => {
 
 // src/components/FunConnectOptions/FunSignInStep.tsx
 import { groupBy, isMobile as isMobile8, isSafari as isSafari3, redirectInMobile as redirectInMobile2 } from "@funkit/utils";
-import React214, { Fragment as Fragment3, useCallback as useCallback39, useMemo as useMemo37, useState as useState55 } from "react";
+import React214, { Fragment as Fragment3, useCallback as useCallback39, useMemo as useMemo36, useState as useState55 } from "react";
 
 // src/providers/walletConnectDeepLink.ts
 var storageKey2 = "WALLETCONNECT_DEEPLINK_CHOICE";
@@ -11292,7 +11302,7 @@ var SocialsIcon = () => {
 };
 
 // src/components/FunConnectOptions/FunConnectOptions.tsx
-import React213, { useCallback as useCallback38, useMemo as useMemo36, useState as useState54 } from "react";
+import React213, { useCallback as useCallback38, useMemo as useMemo35, useState as useState54 } from "react";
 
 // src/hooks/useAnimatedNavigation.ts
 import { useCallback as useCallback16, useState as useState17 } from "react";
@@ -11537,6 +11547,7 @@ async function evaluateAccountWalletFees({
   loginType,
   apiKey
 }) {
+  const relayQuote = baseQuote.metadata?.relayQuote;
   const nativeCurrencySymbol = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO13[selectedSourceAssetInfo.chainId]?.nativeCurrency.symbol || "";
   const walletCheckoutFees = {
     paymentMethod: "balance" /* ACCOUNT_BALANCE */,
@@ -11545,7 +11556,8 @@ async function evaluateAccountWalletFees({
     eoaWalletFeeUsd: 0,
     totalFeesUsd: baseQuote.estFeesUsd,
     totalFeesTokenWithoutGas: Number(baseQuote.estFeesFromAmount),
-    nativeCurrencySymbol
+    nativeCurrencySymbol,
+    relayQuote
   };
   if (loginType !== "web3" /* Web3 */ || selectedSourceAssetInfo.chainId === zkSync.id.toString()) {
     return { fees: walletCheckoutFees };
@@ -13613,7 +13625,7 @@ function CheckoutHelp({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/ConfirmationStep.tsx
-import React132, { useEffect as useEffect25, useMemo as useMemo22, useState as useState32 } from "react";
+import React132, { useEffect as useEffect25, useMemo as useMemo21, useState as useState32 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/providers/UserPresenceContext.tsx
@@ -13650,7 +13662,7 @@ var UserPresenceProvider = ({ children }) => {
 var useUserPresence = () => useContext16(UserPresenceContext);
 
 // src/modals/CheckoutModal/ConfirmationStep/ConfirmationStep.tsx
-import { DirectExecutionType as DirectExecutionType3 } from "@funkit/api-base";
+import { DirectExecutionType as DirectExecutionType2 } from "@funkit/api-base";
 import { FlagKey as FlagKey17 } from "@funkit/utils";
 
 // src/components/FunInfoBanner/FunInfoBanner.tsx
@@ -13945,7 +13957,7 @@ import {
 } from "@funkit/utils";
 import NumberFlow from "@number-flow/react";
 import { motion as motion3 } from "motion/react";
-import React122, { useMemo as useMemo17 } from "react";
+import React122, { useMemo as useMemo16 } from "react";
 
 // src/consts/design.ts
 var mapFontLineHeightToNumberFlowHeight = {
@@ -13955,23 +13967,15 @@ var mapFontLineHeightToNumberFlowHeight = {
 };
 
 // src/hooks/useReceiveAmountLabel.ts
-import { DirectExecutionType as DirectExecutionType2 } from "@funkit/api-base";
-import { useMemo as useMemo15 } from "react";
-function useReceiveAmountLabel({
-  directExecutionType,
-  isSameToken
-}) {
+function useReceiveAmountLabel(_) {
   const { textCustomizations } = useFunkitConfig();
-  return useMemo15(() => {
-    const showAtLeast = directExecutionType === DirectExecutionType2.RELAY && !isSameToken;
-    return `${textCustomizations.confirmationScreen.receiveAmountLabel}${showAtLeast ? " at least" : ""}`;
-  }, [textCustomizations, directExecutionType, isSameToken]);
+  return textCustomizations.confirmationScreen.receiveAmountLabel;
 }
 
 // src/components/FunAssetAvatar/FunAssetAvatar.tsx
 import { isNotNullish as isNotNullish7 } from "@funkit/utils";
 import clsx12 from "clsx";
-import React121, { useMemo as useMemo16 } from "react";
+import React121, { useMemo as useMemo15 } from "react";
 
 // src/components/FunAssetAvatar/FunAssetAvatar.css.ts
 var chainContainerStyle = "uwrdc22 _1rsrm2f18 _1rsrm2fa _1rsrm2f4 _1rsrm2f41";
@@ -13991,7 +13995,7 @@ function FunAssetAvatar({
   largeChainIcon = false
 }) {
   const chainMetadata = chainMetadataById[Number.parseInt((chainId || "").toString())] || null;
-  const finalAssetSrc = useMemo16(() => {
+  const finalAssetSrc = useMemo15(() => {
     const normalizedTicker = assetTicker?.toUpperCase() || "";
     const defaultSrc = ASSET_LOGO_SRCS[normalizedTicker];
     if (prioritizeDefaults) {
@@ -14089,13 +14093,13 @@ function PaymentAmountSummary({
     })
   });
   const sourceTokenAmount = quote?.finalPaymentTokenAmount ? Number.parseFloat(quote.finalPaymentTokenAmount) : void 0;
-  const paymentTokenUsdAmount = useMemo17(() => {
+  const paymentTokenUsdAmount = useMemo16(() => {
     if (!quote) return void 0;
     return formatCurrencyAndStringify3(
       quote.baseQuote.estSubtotalUsd + Number.parseFloat(quote.finalPaymentFeeUsd) - Number.parseFloat(quote.finalSpreadUsd)
     );
   }, [quote]);
-  const receiveTokenUsdAmount = useMemo17(() => {
+  const receiveTokenUsdAmount = useMemo16(() => {
     if (!quote) return void 0;
     return formatCurrencyAndStringify3(
       Number.parseFloat(quote.finalTotalUsd) - Number.parseFloat(quote.finalPaymentFeeUsd) - Number.parseFloat(quote.finalSpreadUsd)
@@ -14215,9 +14219,10 @@ function PaymentAmountSummaryItem({
 import {
   formatCurrencyAndStringify as formatCurrencyAndStringify4,
   formatDynamicFeeUsd,
+  formatPercent,
   noop as noop4
 } from "@funkit/utils";
-import React124, { useMemo as useMemo18, useState as useState23 } from "react";
+import React124, { useMemo as useMemo17, useState as useState23 } from "react";
 import clsx13 from "clsx";
 import { motion as motion4, useAnimationControls } from "motion/react";
 
@@ -14254,6 +14259,106 @@ var NO_DATA = {
   collapsed: null,
   expanded: []
 };
+function renderRelayFee(relayQuote) {
+  const { details, fees } = relayQuote;
+  const gasUsd = Number.parseFloat(fees?.gas?.amountUsd || "0");
+  const totalImpactStr = (details?.totalImpact?.percent || "0").replace("-", "");
+  const totalImpact = Number.parseFloat(totalImpactStr);
+  const swapImpactStr = (details?.swapImpact?.percent || "0").replace("-", "");
+  const swapImpact = Number.parseFloat(swapImpactStr);
+  const relayGas = Number.parseFloat(fees?.relayer?.amountUsd || "0");
+  const totalUsd = Number.parseFloat(details?.currencyIn?.amountUsd || "0");
+  const appFeePercent = Number.parseFloat(fees?.app?.amountUsd || "0") / totalUsd * 100;
+  const maxSlippage = Number.parseFloat(
+    details?.slippageTolerance?.destination?.percent || "0"
+  );
+  return {
+    collapsed: {
+      value: formatCurrencyAndStringify4(gasUsd),
+      valueIcon: /* @__PURE__ */ React124.createElement(GasIcon, null)
+    },
+    expanded: [
+      // {
+      //   label: 'Rate',
+      //   value: `1.000 ${details?.currencyIn?.currency?.symbol} = ${ratePretty} ${details?.currencyOut?.currency?.symbol}`,
+      //   tooltipText:
+      //     'The conversion rate between ETH on Arbitrum and USDCe on Polygon.',
+      // },
+      {
+        label: "Network cost",
+        valueIcon: /* @__PURE__ */ React124.createElement(GasIcon, null),
+        value: formatCurrencyAndStringify4(gasUsd),
+        tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Estimated gas cost for completing your transaction, including the network fee and routing gas fees. The final cost may vary based on network conditions.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement(
+          FunLinkButton,
+          {
+            href: "https://docs.polymarket.com/docs/price-impact",
+            text: "Learn more"
+          }
+        ))
+      },
+      {
+        label: "Price impact",
+        value: formatPercent(totalImpact),
+        tooltipText: /* @__PURE__ */ React124.createElement(Box, { display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React124.createElement(Box, { display: "flex", flexDirection: "column", gap: "2" }, /* @__PURE__ */ React124.createElement(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          /* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, "Total impact"),
+          /* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatPercent(totalImpact))
+        ), /* @__PURE__ */ React124.createElement(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          /* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Swap impact"),
+          /* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatPercent(swapImpact))
+        ), /* @__PURE__ */ React124.createElement(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          /* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Fill gas (Ethereum)"),
+          /* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatCurrencyAndStringify4(relayGas))
+        ), /* @__PURE__ */ React124.createElement(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          /* @__PURE__ */ React124.createElement(Text, { size: "10" }, "Fun.xyz fee"),
+          /* @__PURE__ */ React124.createElement(Text, { size: "10", weight: "medium" }, formatPercent(appFeePercent))
+        )), /* @__PURE__ */ React124.createElement(FunDivider, null), /* @__PURE__ */ React124.createElement(Box, null, "Price impact is the difference between the expected and executed price.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "Final cost may vary based on network conditions.", " ", /* @__PURE__ */ React124.createElement(
+          FunLinkButton,
+          {
+            inline: true,
+            href: "https://docs.polymarket.com/docs/price-impact",
+            text: "Learn more"
+          }
+        )))
+      },
+      {
+        label: "Max slippage",
+        value: formatPercent(maxSlippage),
+        tooltipText: /* @__PURE__ */ React124.createElement(React124.Fragment, null, "Slippage occurs due to price changes during trade execution. Slippage limits are adjusted based on your asset to ensure a reliable, timely execution.", /* @__PURE__ */ React124.createElement("br", null), /* @__PURE__ */ React124.createElement("br", null), "The slippage is set as low as possible. If it is required to be higher than 1.50% during execution, Fun.xyz will cover the difference.", " ", /* @__PURE__ */ React124.createElement(
+          FunLinkButton,
+          {
+            inline: true,
+            href: "https://docs.polymarket.com/docs/price-impact",
+            text: "Learn more"
+          }
+        ))
+      }
+    ]
+  };
+}
 var extractFeeItems = (fees, totalUsd, isDydx) => {
   const marketMakerFee = {
     label: "Market maker gas costs",
@@ -14268,6 +14373,9 @@ var extractFeeItems = (fees, totalUsd, isDydx) => {
     }),
     tooltipText: "Charged to cover the costs of providing on-chain liquidity."
   };
+  if (fees.paymentMethod === "balance" /* ACCOUNT_BALANCE */ && fees.relayQuote) {
+    return renderRelayFee(fees.relayQuote);
+  }
   if (fees.paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
     const { eoaWalletFeeUsd, marketMakerFeeUsd } = fees;
     const fillGasCost = formatDynamicFeeUsd(eoaWalletFeeUsd, totalUsd, {
@@ -14352,7 +14460,7 @@ function PaymentFeesSummary({
     }
   };
   const isDydx = isDydxCustomer(apiKey);
-  const { collapsed: collapsedItem, expanded: expandedItems } = useMemo18(() => {
+  const { collapsed: collapsedItem, expanded: expandedItems } = useMemo17(() => {
     if (!quote) return NO_DATA;
     const fees = quote.finalFeesBreakdown;
     const totalUsd = Number(quote.finalTotalUsd);
@@ -14570,7 +14678,7 @@ function CheckoutPrimaryInfo({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/DisclaimerText.tsx
-import React128, { useMemo as useMemo19 } from "react";
+import React128, { useMemo as useMemo18 } from "react";
 
 // src/utils/customer.ts
 function isKatanaEarnFlow({
@@ -14611,21 +14719,21 @@ var DisclaimerText = ({
   ), ".") : isKatana && isKatanaEarn ? /* @__PURE__ */ React128.createElement(React128.Fragment, null, showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to ", FUN_ORG_NAME, "'s", " ", /* @__PURE__ */ React128.createElement(FunLinkButton, { href: FUN_TERMS_URL, inline: true, text: "terms" }), ", Katana's ", /* @__PURE__ */ React128.createElement(
     FunLinkButton,
     {
-      href: "https://katana.network/legal/terms-and-conditions",
+      href: "https://app.katana.network/legal/terms-and-conditions",
       inline: true,
       text: "terms"
     }
   ), ", and the ", /* @__PURE__ */ React128.createElement(FunLinkButton, { href: "https://yearn.fi/", inline: true, text: "terms" }), " applicable to third-party Yearn vaults", ".") : isKatana && !isKatanaEarn ? /* @__PURE__ */ React128.createElement(React128.Fragment, null, showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to ", FUN_ORG_NAME, "'s", " ", /* @__PURE__ */ React128.createElement(FunLinkButton, { href: FUN_TERMS_URL, inline: true, text: "terms" }), ", Katana's and Vaultbridge's ", /* @__PURE__ */ React128.createElement(
     FunLinkButton,
     {
-      href: "https://katana.network/legal/terms-and-conditions",
+      href: "https://app.katana.network/legal/terms-and-conditions",
       inline: true,
       text: "terms"
     }
   ), ", and the ", /* @__PURE__ */ React128.createElement(FunLinkButton, { href: "https://morpho.org/", inline: true, text: "terms" }), " applicable to third-party Morpho vaults", ".") : /* @__PURE__ */ React128.createElement(React128.Fragment, null, isVertex && vertexText ? `${vertexText} ` : showCardDisclaimer && `${cardDisclaimer} `, "By clicking on ", continueText, ", you agree to our", " ", /* @__PURE__ */ React128.createElement(FunLinkButton, { href: FUN_TERMS_URL, inline: true, text: "terms" }), ".");
 };
 function useCardDisclaimer(checkoutItem, finalConvertedAssetName) {
-  const cardDisclaimer = useMemo19(() => {
+  const cardDisclaimer = useMemo18(() => {
     if (!checkoutItem || !finalConvertedAssetName) {
       return null;
     }
@@ -14707,10 +14815,10 @@ function useAutoClearState(initialValue = null) {
 
 // src/hooks/useIsBlacklisted.ts
 import { FlagKey as FlagKey15 } from "@funkit/utils";
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo19 } from "react";
 var useIsBlacklisted = (walletAddress, customRecipient) => {
   const flagStr = useFlag(FlagKey15.AddressBlacklist);
-  const blacklist = useMemo20(
+  const blacklist = useMemo19(
     () => safeJSONParse(flagStr)?.map((addr) => addr.toLowerCase()) || [],
     [flagStr]
   );
@@ -15530,7 +15638,7 @@ function usePostCheckout({
 }
 
 // src/modals/CheckoutModal/ConfirmationStep/useQuoteRefresh.ts
-import { useCallback as useCallback25, useEffect as useEffect24, useMemo as useMemo21, useRef as useRef10, useState as useState31 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect24, useMemo as useMemo20, useRef as useRef10, useState as useState31 } from "react";
 
 // src/hooks/useCountdown.tsx
 import React131 from "react";
@@ -15799,7 +15907,7 @@ function useQuoteRefresh({
     },
     [isOnHold, restartCountdown, setCheckoutQuote, triggerAssetConfirm]
   );
-  const quoteError = useMemo21(() => {
+  const quoteError = useMemo20(() => {
     if (quoteErrorMessage && !isQuoting) {
       return {
         message: quoteErrorMessage,
@@ -15932,10 +16040,10 @@ function ConfirmationStep({
     // Block updates to the current quote during confirmation, post-checkout, and if its a direct execution
     useQuoteRefresh({
       isOnHold: isInitialQuoting || isContinuing || isAway,
-      refreshIntervalSeconds: directExecutionType === DirectExecutionType3.RELAY ? RELAY_ESTIMATE_REFRESH_INTERVAL_SEC : DEFAULT_ESTIMATE_REFRESH_INTERVAL_SEC
+      refreshIntervalSeconds: directExecutionType === DirectExecutionType2.RELAY ? RELAY_ESTIMATE_REFRESH_INTERVAL_SEC : DEFAULT_ESTIMATE_REFRESH_INTERVAL_SEC
     })
   );
-  const error = useMemo22(() => {
+  const error = useMemo21(() => {
     if (!isInitialQuoting && moonpayAmountCheck?.isInvalid) {
       return {
         message: moonpayAmountCheck.message,
@@ -15950,7 +16058,7 @@ function ConfirmationStep({
     quoteError,
     isInitialQuoting
   ]);
-  const stepMessage = useMemo22(() => {
+  const stepMessage = useMemo21(() => {
     if (initialQuoteStep) return initialQuoteStep;
     if (postCheckoutStepMessage) return postCheckoutStepMessage;
     if (confirmationStepMessage) return confirmationStepMessage;
@@ -16388,13 +16496,13 @@ var useMeldDefaultCurrency = (paymentMethod) => {
 
 // src/modals/CheckoutModal/InputAmount/InputAmountLoaded.tsx
 import {
-  FlagKey as FlagKey20,
+  FlagKey as FlagKey21,
   formatCryptoAndStringify as formatCryptoAndStringify4,
   formatCurrencyAndStringify as formatCurrencyAndStringify9,
   isTokenEquivalent as isTokenEquivalent6,
   round as round3
 } from "@funkit/utils";
-import React150, { useMemo as useMemo25 } from "react";
+import React150, { useMemo as useMemo24 } from "react";
 
 // src/components/CurrencySelector/CurrencySelector.tsx
 import React139 from "react";
@@ -16647,6 +16755,7 @@ var MeldProviderLabel = ({
 };
 
 // src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.tsx
+import { FlagKey as FlagKey19 } from "@funkit/utils";
 import clsx14 from "clsx";
 import { useAnimate } from "motion/react";
 import React144 from "react";
@@ -17225,6 +17334,40 @@ var SourcePaymentMethodItem = ({
     );
   };
   const backdropColor = themeVars.colors.offBackground;
+  const icons = [
+    {
+      paymentMethod: "balance" /* ACCOUNT_BALANCE */,
+      icon: /* @__PURE__ */ React144.createElement(MetamaskPillIcon, { key: "metamask", backdropColor })
+    },
+    {
+      paymentMethod: "brokerage" /* BROKERAGE */,
+      icon: /* @__PURE__ */ React144.createElement(BinancePillIcon, { key: "binance", backdropColor })
+    },
+    {
+      paymentMethod: "card" /* CARD */,
+      icon: /* @__PURE__ */ React144.createElement(VisaPillIcon, { key: "visa", backdropColor })
+    },
+    {
+      paymentMethod: "brokerage" /* BROKERAGE */,
+      icon: /* @__PURE__ */ React144.createElement(CoinbasePillIcon, { key: "coinbase", backdropColor })
+    },
+    {
+      paymentMethod: "balance" /* ACCOUNT_BALANCE */,
+      icon: /* @__PURE__ */ React144.createElement(RainbowPillIcon, { key: "rainbow", backdropColor })
+    },
+    {
+      paymentMethod: "card" /* CARD */,
+      icon: /* @__PURE__ */ React144.createElement(MasterCardPillIcon, { key: "mastercard", backdropColor })
+    }
+  ];
+  const isCardEnabled = useFlag(FlagKey19.EnableCard);
+  const isBrokerageEnabled = useFlag(FlagKey19.EnableBrokerage);
+  const usableAlternativeIcons = icons.filter(({ paymentMethod }) => {
+    if (paymentMethod === type || paymentMethod === "card" /* CARD */ && !isCardEnabled || paymentMethod === "brokerage" /* BROKERAGE */ && !isBrokerageEnabled) {
+      return false;
+    }
+    return true;
+  });
   return /* @__PURE__ */ React144.createElement(
     Box,
     {
@@ -17279,7 +17422,7 @@ var SourcePaymentMethodItem = ({
             className: "framer-spmi-animated-logos",
             color: "primaryText"
           },
-          type === "balance" /* ACCOUNT_BALANCE */ ? /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(CoinbasePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(BinancePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(VisaPillIcon, { backdropColor })) : type === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(MetamaskPillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(RainbowPillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(VisaPillIcon, { backdropColor })) : type === "virtual_bank" /* VIRTUAL_BANK */ ? /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(CoinbasePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(BinancePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(MetamaskPillIcon, { backdropColor })) : /* @__PURE__ */ React144.createElement(React144.Fragment, null, /* @__PURE__ */ React144.createElement(BinancePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(CoinbasePillIcon, { backdropColor }), /* @__PURE__ */ React144.createElement(MasterCardPillIcon, { backdropColor }))
+          usableAlternativeIcons.slice(0, 3).map(({ icon }) => icon)
         )
       ), /* @__PURE__ */ React144.createElement(ArrowIcon, { direction: "right", size: 20 }))
     )
@@ -17411,7 +17554,7 @@ var YouPayYouReceiveBottomBarLayoutWrapper = ({
 import { getMeldFiatLimits } from "@funkit/api-base";
 import { formatCurrencyAndStringify as formatCurrencyAndStringify6 } from "@funkit/utils";
 import { useQuery as useQuery13 } from "@tanstack/react-query";
-import { useMemo as useMemo23 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // src/hooks/queries/useMeldCryptoCurrencyCode.ts
 function useMeldCryptoCurrencyCode() {
@@ -17453,7 +17596,7 @@ var useMeldLimits = (fiatCurrency) => {
 };
 var useMeldLimitError = (amount, fiatCurrency) => {
   const { data } = useMeldLimits(fiatCurrency);
-  const meldLimit = useMemo23(
+  const meldLimit = useMemo22(
     () => data?.find((lim) => lim.currencyCode === fiatCurrency),
     [data, fiatCurrency]
   );
@@ -17742,20 +17885,20 @@ function InputAmountLayout({
 }
 
 // src/modals/CheckoutModal/InputAmount/QuickOptions.tsx
-import { FlagKey as FlagKey19, clamp, formatCurrencyAndStringify as formatCurrencyAndStringify7 } from "@funkit/utils";
-import React149, { useMemo as useMemo24 } from "react";
+import { FlagKey as FlagKey20, clamp, formatCurrencyAndStringify as formatCurrencyAndStringify7 } from "@funkit/utils";
+import React149, { useMemo as useMemo23 } from "react";
 var USD_AMOUNT_OPTIONS_PCT = [25, 50, 75, 100];
 var USD_AMOUNT_OPTIONS = [100, 500, 1e3];
 function deduplicateArray(arr) {
   return Array.from(new Set(arr));
 }
 function useFiatAmountOptions(percentMode, currency) {
-  const currencyQuickOptionStr = useFlag(FlagKey19.MeldQuickOptions);
+  const currencyQuickOptionStr = useFlag(FlagKey20.MeldQuickOptions);
   const currencyQuickOption = safeJSONParse(
     currencyQuickOptionStr
   );
   const { data: limits, isPending } = useMeldLimits(currency);
-  const meldLimit = useMemo24(
+  const meldLimit = useMemo23(
     () => limits?.find((lim) => lim.currencyCode === currency),
     [limits, currency]
   );
@@ -18083,12 +18226,12 @@ function InputAmountLoaded({
   defaultFiatCurrency,
   textCustomizations
 }) {
-  const maxCheckoutUsdString = useFlag(FlagKey20.MaxCheckoutUsd);
+  const maxCheckoutUsdString = useFlag(FlagKey21.MaxCheckoutUsd);
   const { apiKey } = useFunkitConfig();
   const { paymentMethod } = modalState.paymentMethodInfo;
   const { quote: manuallySelectedQuote } = modalState;
   const isCardCheckout = paymentMethod === "card" /* CARD */;
-  const meldEnabled = useFlag(FlagKey20.EnableMeldPayment) && isCardCheckout;
+  const meldEnabled = useFlag(FlagKey21.EnableMeldPayment) && isCardCheckout;
   const { targetAssetTicker, targetAssetMinAmount } = checkoutConfig;
   const { updateTargetAssetAmount } = useCheckoutContext();
   const minUsd = targetAssetMinAmount && unitPrice ? Math.ceil(targetAssetMinAmount * unitPrice * 100) / 100 : void 0;
@@ -18126,7 +18269,7 @@ function InputAmountLoaded({
     selectedQuote,
     isSelectedQuoteUnavailable
   } = useMeld(manuallySelectedQuote, usdAmount, fiatCurrency);
-  const error = useMemo25(() => {
+  const error = useMemo24(() => {
     if (isCardCheckout) {
       if (isSelectedQuoteUnavailable) {
         return {
@@ -18369,8 +18512,8 @@ function YouPayYouReceiveWrapper({
 }
 
 // src/modals/CheckoutModal/InputAmount/InputAmountLoading.tsx
-import { FlagKey as FlagKey21, formatCryptoAndStringify as formatCryptoAndStringify5 } from "@funkit/utils";
-import React151, { useMemo as useMemo26 } from "react";
+import { FlagKey as FlagKey22, formatCryptoAndStringify as formatCryptoAndStringify5 } from "@funkit/utils";
+import React151, { useMemo as useMemo25 } from "react";
 function InputAmountLoading({
   modalState,
   onBack,
@@ -18380,10 +18523,10 @@ function InputAmountLoading({
   const { paymentMethodInfo } = modalState;
   const { checkoutItem } = useCheckoutContext();
   const { unlinkBrokerage } = useFunkitMesh();
-  const meldEnabled = useFlag(FlagKey21.EnableMeldPayment);
+  const meldEnabled = useFlag(FlagKey22.EnableMeldPayment);
   const targetAssetAmount = checkoutItem?.initSettings.config.targetAssetAmount;
   const targetAssetTicker = checkoutItem?.initSettings.config.targetAssetTicker;
-  const error = useMemo26(() => {
+  const error = useMemo25(() => {
     if (sourceHoldingError) {
       return {
         message: /* @__PURE__ */ React151.createElement("div", null, "Unable to retrieve your account balance. Please try re-linking your account.", " ", paymentMethodInfo.paymentMethod === "brokerage" /* BROKERAGE */ && /* @__PURE__ */ React151.createElement(
@@ -18551,7 +18694,7 @@ function useAssetPrice({
 }
 
 // src/modals/CheckoutModal/InputAmount/useAvailableBalanceForCheckout.ts
-import { useMemo as useMemo27 } from "react";
+import { useMemo as useMemo26 } from "react";
 function useAvailableBalanceForCheckout(paymentMethodInfo, targetChainId, assetChainId, assetSymbol) {
   const {
     data: meshAssetHoldings,
@@ -18569,7 +18712,7 @@ function useAvailableBalanceForCheckout(paymentMethodInfo, targetChainId, assetC
     ["token_transfer" /* TOKEN_TRANSFER */]: null,
     ["virtual_bank" /* VIRTUAL_BANK */]: null
   }[paymentMethodInfo.paymentMethod];
-  const holdingItem = useMemo27(() => {
+  const holdingItem = useMemo26(() => {
     if (!assetSymbol || !holdings) {
       return;
     }
@@ -18679,7 +18822,7 @@ function InputAmount(props) {
 import React155, { useEffect as useEffect29 } from "react";
 
 // src/hooks/usePaymentSources.ts
-import { FlagKey as FlagKey22, isNotNullish as isNotNullish8 } from "@funkit/utils";
+import { FlagKey as FlagKey23, isNotNullish as isNotNullish8 } from "@funkit/utils";
 function useRemainingMeshExchangeConnections(selected) {
   const { getActiveConnection } = useFunkitMesh();
   const supportedExchanges = useSupportedExchanges();
@@ -18708,10 +18851,10 @@ function usePaymentMethodEnablement({
   checkoutConfig
 }) {
   const { apiKey, uiCustomizations } = useFunkitConfig();
-  const isTokenTransferFlagEnabled = useFlag(FlagKey22.EnableTokenTransfer);
+  const isTokenTransferFlagEnabled = useFlag(FlagKey23.EnableTokenTransfer);
   const isFiatFlagEnabled = useFiatEnabled();
-  const isCardFlagEnabled = useFlag(FlagKey22.EnableCard);
-  const isBrokerageFlagEnabled = useFlag(FlagKey22.EnableBrokerage);
+  const isCardFlagEnabled = useFlag(FlagKey23.EnableCard);
+  const isBrokerageFlagEnabled = useFlag(FlagKey23.EnableBrokerage);
   const isKatanaEarnFlowAction = isKatanaEarnFlow({ apiKey, checkoutConfig });
   const isUsKatanaUser = useIsUsKatanaUser();
   const isFiatEnabled = isFiatFlagEnabled && !isKatanaEarnFlowAction;
@@ -19070,7 +19213,7 @@ function LoadingAccount({
 // src/modals/CheckoutModal/MeldCurrencySelect/MeldCurrencySelect.tsx
 import { clamp as clamp2 } from "@funkit/utils";
 import clsx15 from "clsx";
-import React159, { useMemo as useMemo28, useState as useState35 } from "react";
+import React159, { useMemo as useMemo27, useState as useState35 } from "react";
 
 // src/components/FunNoResults/FunNoResults.tsx
 import React158 from "react";
@@ -19260,7 +19403,7 @@ function MeldCurrencySelect({
   const [selectedCurrency, setSelectedCurrency] = useState35(
     defaultCurrency
   );
-  const filteredOptions = useMemo28(() => {
+  const filteredOptions = useMemo27(() => {
     const newOptions = data?.filter(
       ({ name, currencyCode }) => currencyCode.toLowerCase().includes(query.toLowerCase()) || name.toLowerCase().includes(query.toLowerCase())
     ) ?? [];
@@ -19380,8 +19523,8 @@ import {
   meshExecuteTransfer,
   meshExecuteTransferProxy
 } from "@funkit/api-base";
-import { ClientError as ClientError4, FlagKey as FlagKey23, formatAddress as formatAddress4 } from "@funkit/utils";
-import React172, { useMemo as useMemo29, useState as useState38 } from "react";
+import { ClientError as ClientError4, FlagKey as FlagKey24, formatAddress as formatAddress4 } from "@funkit/utils";
+import React172, { useMemo as useMemo28, useState as useState38 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
 
 // src/components/CopyAddress/CopyAddressButton.tsx
@@ -19878,7 +20021,7 @@ function MeshVerification({
   const executionStatus = executionContent?.status;
   const { checkoutItem } = useCheckoutContext();
   const bottomSectionRef = useBottomSectionRef();
-  const enableFrogProxyServer = useFlag(FlagKey23.EnableFrogProxyServer);
+  const enableFrogProxyServer = useFlag(FlagKey24.EnableFrogProxyServer);
   const handleCompletion = useEffectEvent(async (finalOtpInput) => {
     try {
       setIsExecuting(true);
@@ -19961,7 +20104,7 @@ function MeshVerification({
     return () => setScreen(0 /* INITIAL */);
   });
   const brokerName = getExchangeName(brokerType);
-  const verificationTitle = useMemo29(() => {
+  const verificationTitle = useMemo28(() => {
     switch (executionStatus) {
       case MeshExecuteTransferStatus.secondMfaRequired:
         return `Additional ${brokerName} 2FA required`;
@@ -19988,7 +20131,7 @@ function MeshVerification({
     executionContent?.verificationSteps?.length,
     isSecond2fa
   ]);
-  const verificationDescription = useMemo29(() => {
+  const verificationDescription = useMemo28(() => {
     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.`;
@@ -20133,7 +20276,7 @@ var VerificationPopup = ({
 };
 
 // src/modals/CheckoutModal/MoonpaySetup.tsx
-import React174, { useCallback as useCallback31, useMemo as useMemo31, useState as useState40 } from "react";
+import React174, { useCallback as useCallback31, useMemo as useMemo30, useState as useState40 } from "react";
 
 // src/components/FunPayments/FunPaymentMoonpayType.css.ts
 var mpClass = "_1kmpeyf0";
@@ -20142,7 +20285,7 @@ var stretchStyle = "_1kmpeyf1";
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/api-base";
 import { colorToHex } from "@funkit/utils";
-import React173, { Fragment as Fragment2, useEffect as useEffect33, useMemo as useMemo30, useState as useState39 } from "react";
+import React173, { Fragment as Fragment2, useEffect as useEffect33, useMemo as useMemo29, useState as useState39 } from "react";
 var LazyMoonPayBuyWidget = (props) => {
   const [MoonPayBuyWidget, setMoonPayBuyWidget] = useState39(null);
   useEffect33(() => {
@@ -20173,7 +20316,7 @@ function FunPaymentMoonpayType({
   const isSandboxMode = useIsFunkitSandboxMode();
   const funkitConfig = useFunkitConfig();
   const { userInfo } = useGeneralWallet();
-  const currencyCode = useMemo30(() => {
+  const currencyCode = useMemo29(() => {
     return generateMoonpayCurrencyCode(depositToken, depositTokenChainId);
   }, [depositToken, depositTokenChainId]);
   const depositTokenAmountStringFormatted = formatTokenAmountForMoonpay(
@@ -20196,7 +20339,7 @@ function FunPaymentMoonpayType({
     });
     return signature || "";
   };
-  const moonpayButtonColor = useMemo30(() => {
+  const moonpayButtonColor = useMemo29(() => {
     const primaryButtonHex = colorToHex(activeTheme.colors.buttonPrimary);
     if (["#FFF", "#FFFF", "#FFFFFF", "#FFFFFFFF"].includes(primaryButtonHex)) {
       return void 0;
@@ -20251,7 +20394,7 @@ function MoonpaySetup({
       depositAddress: paymentAddress
     });
   }, [onNext, paymentAddress]);
-  const MoonpayWidget = useMemo31(() => {
+  const MoonpayWidget = useMemo30(() => {
     return /* @__PURE__ */ React174.createElement(
       FunPaymentMoonpayType,
       {
@@ -20282,7 +20425,7 @@ function MoonpaySetup({
 // src/modals/CheckoutModal/SelectAsset.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST2 } from "@funkit/chains";
 import { formatCurrencyAndStringify as formatCurrencyAndStringify11, isTokenEquivalent as isTokenEquivalent7 } from "@funkit/utils";
-import React183, { useEffect as useEffect35, useMemo as useMemo33, useState as useState42 } from "react";
+import React183, { useEffect as useEffect35, useMemo as useMemo32, useState as useState42 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/components/Dropdown/ChainDropdown.tsx
@@ -20291,7 +20434,7 @@ import React180 from "react";
 // src/components/Dropdown/BaseDropdown.tsx
 import { isMobile as isMobile6, noop as noop6 } from "@funkit/utils";
 import { AnimatePresence as AnimatePresence4, motion as motion6 } from "motion/react";
-import React178, { useCallback as useCallback32, useMemo as useMemo32, useState as useState41 } from "react";
+import React178, { useCallback as useCallback32, useMemo as useMemo31, useState as useState41 } from "react";
 
 // src/components/FunSelect/FunClickOutside.tsx
 import React175 from "react";
@@ -20497,7 +20640,7 @@ function BaseDropdown({
   const handleSearch = (event) => {
     setSearchInput(event.target.value);
   };
-  const filteredOptions = useMemo32(
+  const filteredOptions = useMemo31(
     () => options.filter(
       (singleOption) => singleOption.label.toLowerCase().includes(searchInput?.toLowerCase())
     ),
@@ -20906,13 +21049,13 @@ var ReceiveTokenDropdown = ({
 
 // src/components/NewTokenDepositAlert/NewTokenDepositAlert.tsx
 import React182 from "react";
-import { FlagKey as FlagKey24, safeParseJson as safeParseJson4 } from "@funkit/utils";
+import { FlagKey as FlagKey25, safeParseJson as safeParseJson4 } from "@funkit/utils";
 var NewTokenDepositAlert = ({
   onClick
 }) => {
-  const alertJson = useFlag(FlagKey24.NewTokenAssetSelectionBanner);
+  const alertJson = useFlag(FlagKey25.NewTokenAssetSelectionBanner);
   const alertData = safeParseJson4(alertJson);
-  const isTokenTransferEnabled = useFlag(FlagKey24.EnableTokenTransfer);
+  const isTokenTransferEnabled = useFlag(FlagKey25.EnableTokenTransfer);
   if (!alertData || !isTokenTransferEnabled) return null;
   return /* @__PURE__ */ React182.createElement(
     FunAlert,
@@ -20980,7 +21123,7 @@ function useEnrichedAccountHoldings({
   const { apiKey } = useFunkitConfig();
   const { isAllowed, isLoading } = useAllowedAssets();
   const { loginType, walletAddress } = useGeneralWallet();
-  const enrichedAccountHoldings = useMemo33(() => {
+  const enrichedAccountHoldings = useMemo32(() => {
     if (!checkoutConfig) return [];
     return Object.values(accountHoldings).map((asset) => {
       const usableForCheckout = isAssetUsableToPayForCheckout({
@@ -21022,7 +21165,7 @@ function useAssetOptions({
   userSelectedTargetAsset,
   chainId
 }) {
-  const assetOptions = useMemo33(() => {
+  const assetOptions = useMemo32(() => {
     return enrichedAccountHoldings.filter(
       ({ asset }) => chainId !== void 0 ? asset.pickedChainId === chainId.toString() : true
     ).map(({ asset, usableForCheckout }) => {
@@ -21093,7 +21236,7 @@ function MeshOrAccountSelectAsset({
     targetAssetMinAmount: 0
   };
   const [selectedTargetAsset, setSelectedTargetAsset] = useState42(defaultTargetAsset);
-  const defaultTokenSymbols = useMemo33(() => {
+  const defaultTokenSymbols = useMemo32(() => {
     if (!checkoutConfig) {
       return [];
     }
@@ -21157,7 +21300,7 @@ function MeshOrAccountSelectAsset({
     handleTargetAssetUpdate(tokenItem);
     onFinish();
   });
-  const selectedChainTokenSymbol = useMemo33(() => {
+  const selectedChainTokenSymbol = useMemo32(() => {
     if (explicitlySelectedChainTokenSymbol) {
       const assetExists = assetOptions.find(
         ({ asset }) => asset.chainSymbolKey === explicitlySelectedChainTokenSymbol
@@ -21569,7 +21712,7 @@ function SelectBrokerage({
 
 // src/modals/CheckoutModal/SourceChange/SourceChange.tsx
 import { BridgeCustomerStatus as BridgeCustomerStatus6 } from "@funkit/api-base";
-import { FlagKey as FlagKey25 } from "@funkit/utils";
+import { FlagKey as FlagKey26 } from "@funkit/utils";
 import React186, { useEffect as useEffect36, useState as useState45 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 
@@ -21786,7 +21929,7 @@ function SourceChange({
   const { data: fiatAccounts } = useVirtualFiatAccounts();
   const matchingFiatAccount = useMatchingVirtualFiatAccount(fiatAccounts);
   const { apiKey, textCustomizations } = useFunkitConfig();
-  const enableMeldPayment = useFlag(FlagKey25.EnableMeldPayment);
+  const enableMeldPayment = useFlag(FlagKey26.EnableMeldPayment);
   const hasAutoContinue = !isOstiumCustomer(apiKey);
   useEffect36(() => {
     if (!paymentMethodInfo) return;
@@ -21957,7 +22100,7 @@ function SourceChange({
 }
 
 // src/modals/CheckoutModal/TransferToken/TransferToken.tsx
-import { FlagKey as FlagKey28 } from "@funkit/utils";
+import { FlagKey as FlagKey29 } from "@funkit/utils";
 import { motion as motion8, useAnimationControls as useAnimationControls3 } from "motion/react";
 import React200, { useEffect as useEffect37, useRef as useRef15, useState as useState48 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
@@ -22019,13 +22162,13 @@ function CopyInputDisplayedAddress({
 }
 
 // src/components/Dropdown/TokenDropdown.tsx
-import { FlagKey as FlagKey26, safeParseJson as safeParseJson5 } from "@funkit/utils";
+import { FlagKey as FlagKey27, safeParseJson as safeParseJson5 } from "@funkit/utils";
 import React189, { useState as useState46 } from "react";
 var TOKEN_ICON_SIZE2 = 16;
 var useNewTokens = () => {
-  const bannerJson = useFlag(FlagKey26.NewTokenAssetSelectionBanner);
+  const bannerJson = useFlag(FlagKey27.NewTokenAssetSelectionBanner);
   const bannerData = safeParseJson5(bannerJson);
-  const newBadgeTokensJson = useFlag(FlagKey26.TokenTransferNewTokens);
+  const newBadgeTokensJson = useFlag(FlagKey27.TokenTransferNewTokens);
   const newBadgeData = safeParseJson5(newBadgeTokensJson);
   const newTokens = newBadgeData && Object.values(newBadgeData).flat();
   const newUniqueTokens = new Set(newTokens);
@@ -22141,7 +22284,7 @@ var LightningBoltIcon = ({ size = 16 }) => /* @__PURE__ */ React190.createElemen
 
 // src/components/QRCode/QRCode.tsx
 import QRCodeUtil from "qrcode";
-import React191, { useMemo as useMemo34 } from "react";
+import React191, { useMemo as useMemo33 } from "react";
 var generateMatrix = (value, errorCorrectionLevel) => {
   const { data } = QRCodeUtil.create(value, { errorCorrectionLevel }).modules;
   const sqrt = Math.sqrt(data.length);
@@ -22169,7 +22312,7 @@ function QRCode({
 }) {
   const { activeTheme } = useActiveTheme();
   const size = sizeProp - Number.parseInt(outsidePadding, 10) * 2;
-  const dots = useMemo34(() => {
+  const dots = useMemo33(() => {
     const dots2 = [];
     const matrix = generateMatrix(uri, ecl);
     const cellSize = size / matrix.length;
@@ -22716,12 +22859,12 @@ var TransferTokenDetails = ({
 
 // src/hooks/useTokenTransfer.ts
 import { solanaChain as solanaChain2 } from "@funkit/chains";
-import { FlagKey as FlagKey27 } from "@funkit/utils";
+import { FlagKey as FlagKey28 } from "@funkit/utils";
 import { mainnet as mainnet8, polygon as polygon5 } from "viem/chains";
 var useTokenTransfer = (selectedChainId, selectedToken) => {
   const { checkoutItem } = useCheckoutContext();
   const enableUniversal = useFlag(
-    FlagKey27.EnableTokenTransferUniversalDepositAddress,
+    FlagKey28.EnableTokenTransferUniversalDepositAddress,
     false
   );
   const estPriceImpact = usePriceImpactEstimation(selectedToken);
@@ -22807,7 +22950,7 @@ function TransferToken({
   const filteredAssets = useEnabledTokenTransferChainTokens(
     transferInit ?? null
   );
-  const defaultChainIdFlag = useFlag(FlagKey28.TokenTransferDefaultChainId);
+  const defaultChainIdFlag = useFlag(FlagKey29.TokenTransferDefaultChainId);
   const defaultChainId = defaultValues?.chainId ?? Number(defaultChainIdFlag);
   const validDefaultChainId = filteredAssets[defaultChainId] !== void 0 ? defaultChainId : polygon6.id;
   const [selectedChainId, setSelectedChainId] = useState48(validDefaultChainId);
@@ -23340,7 +23483,7 @@ var FiatAccountDetail = {
 
 // src/modals/CheckoutModal/VirtualFiatAccount/KycIframe.tsx
 import { BridgeCustomerStatus as BridgeCustomerStatus7 } from "@funkit/api-base";
-import React205, { useCallback as useCallback34, useEffect as useEffect38, useMemo as useMemo35, useState as useState50 } from "react";
+import React205, { useCallback as useCallback34, useEffect as useEffect38, useMemo as useMemo34, useState as useState50 } from "react";
 function useIframeListener(listeners) {
   const handleMessage = useCallback34(
     (event) => {
@@ -23393,7 +23536,7 @@ function KycIframe({
   const { clearVirtualFiatAccounts } = useClearFrogAccountsCache();
   const { data: kycLink, isLoading: isLinkLoading } = useLoadKycLink(modalState);
   const [iframeLoading, setIframeLoading] = useState50(true);
-  const listeners = useMemo35(
+  const listeners = useMemo34(
     () => ({
       load: () => {
         logger.info("KYC iframe loaded");
@@ -24113,7 +24256,7 @@ function FunConnectOptions({
       }
     }
   };
-  const stepComponent = useMemo36(() => {
+  const stepComponent = useMemo35(() => {
     switch (step) {
       case 0 /* SIGNIN_PRIMARY */:
       case 1 /* SIGNIN_SECONDARY */:
@@ -24222,7 +24365,7 @@ var FULL_SOCIAL_LOGIN_OPTIONS = [
 function useEnabledSocialLogins() {
   const funkitConfig = useFunkitConfig();
   const { web2SocialLogins } = funkitConfig.loginConfig;
-  const enabledSocialItems = useMemo37(() => {
+  const enabledSocialItems = useMemo36(() => {
     return FULL_SOCIAL_LOGIN_OPTIONS.filter(
       (oAuthItem) => !!web2SocialLogins[oAuthItem.funkitKey]
     );
@@ -24251,7 +24394,7 @@ function FunSignInStep({
     handleOauthRedirect,
     handleGenerateFcUri
   } = useFunkitWeb2Login();
-  const isEmailInputValid = useMemo37(() => {
+  const isEmailInputValid = useMemo36(() => {
     return validateEmailString(emailInput);
   }, [emailInput]);
   const [emailError, setEmailError] = useState55();
@@ -24790,7 +24933,7 @@ var getTimestamp = (timestampMs) => formatTimestamp(new Date(timestampMs), {
 // src/components/FunCheckoutHistory/FunCheckoutStatus.tsx
 import { formatSecondsToCountdownForm } from "@funkit/utils";
 import { motion as motion11 } from "motion/react";
-import React220, { useMemo as useMemo38 } from "react";
+import React220, { useMemo as useMemo37 } from "react";
 
 // src/components/FunCheckoutHistory/FunCheckoutStatus.css.ts
 var GradientLoadingBox = "_101aujm0";
@@ -24851,7 +24994,7 @@ function PendingCheckoutStatus({
     checkoutItem.latestQuote?.finalTimeEstimationMs,
     checkoutItem.selectedPaymentMethodInfo?.paymentMethod
   );
-  const estimatedRemainingSeconds = useMemo38(() => {
+  const estimatedRemainingSeconds = useMemo37(() => {
     const startTimeMs = extractStartTimeMs(
       checkoutItem.id,
       activeCheckoutItem,
@@ -24977,7 +25120,7 @@ function FunCheckoutHistoryDetail({
       includeGenerateActionsParams
     ]
   );
-  const buttonProps = useMemo39(() => {
+  const buttonProps = useMemo38(() => {
     if (!isCheckoutLoaded) {
       return { title: "", isDisabled: true, isLoading: true };
     }
@@ -25059,7 +25202,7 @@ var CheckoutAlert = ({ state, refundState, onHelp }) => {
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryHelp.tsx
 import { sendSupportMessage } from "@funkit/api-base";
-import React224, { useEffect as useEffect43, useMemo as useMemo40, useRef as useRef19, useState as useState58 } from "react";
+import React224, { useEffect as useEffect43, useMemo as useMemo39, useRef as useRef19, useState as useState58 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/components/FunInput/FunTextAreaInput.tsx
@@ -25206,7 +25349,7 @@ function FunCheckoutHistoryHelp({
   );
   const [descriptionInput, setDescriptionInput] = useState58("");
   const [errorMessage, setErrorMessage] = useState58();
-  const isEmailInputValid = useMemo40(() => {
+  const isEmailInputValid = useMemo39(() => {
     return validateEmailString(emailInput);
   }, [emailInput]);
   const [processStage, setProcessStage] = useState58(
@@ -25395,11 +25538,11 @@ import {
   formatTimestamp as formatTimestamp2,
   isTokenEquivalent as isTokenEquivalent8
 } from "@funkit/utils";
-import React226, { useCallback as useCallback41, useMemo as useMemo42, useRef as useRef20, useState as useState59 } from "react";
+import React226, { useCallback as useCallback41, useMemo as useMemo41, useRef as useRef20, useState as useState59 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
 
 // src/components/FunCheckoutHistory/FunDirectExecutionStatus.tsx
-import React225, { useMemo as useMemo41 } from "react";
+import React225, { useMemo as useMemo40 } from "react";
 function FunDirectExecutionStatus({
   directExecution
 }) {
@@ -25421,11 +25564,11 @@ function FunDirectExecutionStatus({
 function PendingDirectExecutionStatus({
   directExecution
 }) {
-  const totalSeconds = useMemo41(() => {
+  const totalSeconds = useMemo40(() => {
     const timeEstimation = directExecution.clientMetadata.latestQuote?.finalTimeEstimationMs || 0;
     return Math.ceil(timeEstimation / 1e3);
   }, [directExecution]);
-  const estimatedRemainingSeconds = useMemo41(() => {
+  const estimatedRemainingSeconds = useMemo40(() => {
     const startTimeMs = directExecution.createdTimeMs;
     return getTimeFromNowSeconds(startTimeMs, totalSeconds * 1e3);
   }, [totalSeconds, directExecution]);
@@ -25477,7 +25620,7 @@ function FunDirectExecutionHistoryDetail({
       includeGenerateActionsParams
     ]
   );
-  const buttonProps = useMemo42(() => {
+  const buttonProps = useMemo41(() => {
     if (!isLoaded) {
       return void 0;
     }
@@ -25773,7 +25916,7 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
 import { IN_PROGRESS_CHECKOUT_STATES as IN_PROGRESS_CHECKOUT_STATES2 } from "@funkit/api-base";
 import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
 import clsx20 from "clsx";
-import React237, { useEffect as useEffect44, useMemo as useMemo43, useRef as useRef22, useState as useState62 } from "react";
+import React237, { useEffect as useEffect44, useMemo as useMemo42, useRef as useRef22, useState as useState62 } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { useAccount as useAccount6 } from "wagmi";
 
@@ -26321,7 +26464,7 @@ function Home({
     const virtuosoDiv = virtuosoParentRef.current?.firstChild;
     virtuosoDiv?.classList.add(animateVirtuosoInClass);
   }, []);
-  const AssetsList = useMemo43(() => {
+  const AssetsList = useMemo42(() => {
     if (walletAssets && !Object.keys(walletAssets).length) {
       return /* @__PURE__ */ React237.createElement(EmptyTabAlert, null);
     }
@@ -26348,7 +26491,7 @@ function Home({
       }
     ));
   }, [walletAssets]);
-  const CheckoutsList = useMemo43(() => {
+  const CheckoutsList = useMemo42(() => {
     if (checkoutHistoryList.length === 0 && isCheckoutHistoryInited) {
       return /* @__PURE__ */ React237.createElement(EmptyTabAlert, null);
     }
@@ -26952,16 +27095,16 @@ function ChainModal({ onClose, open }) {
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3 } from "@funkit/chains";
 import { LogLevel, initializeRelayClient } from "@funkit/fun-relay";
-import { FlagKey as FlagKey31 } from "@funkit/utils";
+import { FlagKey as FlagKey32 } from "@funkit/utils";
 import React253, { useRef as useRef24 } from "react";
 
 // src/components/DydxSwitchModalTab/DydxSwitchModalTab.tsx
 import React245, { useCallback as useCallback44 } from "react";
 
 // src/hooks/useFunkitMaxCheckoutUsdInfo.ts
-import { FlagKey as FlagKey29, formatCurrencyAndStringify as formatCurrencyAndStringify15 } from "@funkit/utils";
+import { FlagKey as FlagKey30, formatCurrencyAndStringify as formatCurrencyAndStringify15 } from "@funkit/utils";
 var useFunkitMaxCheckoutUsdInfo = () => {
-  const maxCheckoutUsd = Number(useFlag(FlagKey29.MaxCheckoutUsd));
+  const maxCheckoutUsd = Number(useFlag(FlagKey30.MaxCheckoutUsd));
   const limitText = maxCheckoutUsd === Number.MAX_VALUE ? "no" : formatCurrencyAndStringify15(maxCheckoutUsd, {
     decimalPrecisionForSuffix: 0,
     minimumSignificantDigits: 0,
@@ -27101,7 +27244,7 @@ var FunCheckoutBlocked = ({ reason }) => {
 
 // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
 import clsx23 from "clsx";
-import React252, { useEffect as useEffect46, useMemo as useMemo44, useState as useState65 } from "react";
+import React252, { useEffect as useEffect46, useMemo as useMemo43, useState as useState65 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
 import React247 from "react";
@@ -27149,13 +27292,13 @@ var FunNotificationShowMoreButton = ({
 import {
   getCheckoutsByUserId as getCheckoutsByUserId2
 } from "@funkit/api-base";
-import { FlagKey as FlagKey30 } from "@funkit/utils";
+import { FlagKey as FlagKey31 } from "@funkit/utils";
 import { useQuery as useQuery16 } from "@tanstack/react-query";
 var hasCorrectPaymentMethod = (checkout, paymentMethod) => !paymentMethod || checkout.clientMetadata.selectedPaymentMethodInfo?.paymentMethod === paymentMethod;
 var isRecent = (checkout, timestampCutoff) => checkout.createdTimeMs > timestampCutoff;
 var DEFAULT_NOTIF_CUTOFF = 7 * 24 * 60 * 60 * 1e3;
 function useCheckoutRefreshInterval() {
-  const str = useFlag(FlagKey30.CheckoutNotificationsRefreshInterval);
+  const str = useFlag(FlagKey31.CheckoutNotificationsRefreshInterval);
   return safeJSONParse(str) || { listRefresh: 50 * 1e3, itemRefresh: 5 * 1e3 };
 }
 var useRecentCheckouts = ({
@@ -28142,15 +28285,15 @@ var CheckoutNotifications = ({
     if (initialDirectExecutions || !directExecutions) return;
     setInitialDirectExecutions(directExecutions);
   }, [initialDirectExecutions, directExecutions]);
-  const displayedDirectExecutions = useMemo44(() => {
+  const displayedDirectExecutions = useMemo43(() => {
     if (!directExecutions) return [];
     return getUpdatedDirectExecutions(directExecutions, initialDirectExecutions).filter(({ txHash }) => !closedNotifications.includes(txHash)).slice(0, MAX_COUNT);
   }, [initialDirectExecutions, directExecutions, closedNotifications]);
-  const displayedCheckouts = useMemo44(() => {
+  const displayedCheckouts = useMemo43(() => {
     if (!checkouts) return [];
     return getUpdatedCheckouts(checkouts, initialCheckouts).filter(({ depositAddr }) => !closedNotifications.includes(depositAddr)).slice(0, MAX_COUNT);
   }, [initialCheckouts, checkouts, closedNotifications]);
-  const combinedNotifications = useMemo44(() => {
+  const combinedNotifications = useMemo43(() => {
     return [
       ...displayedDirectExecutions.map(
         (item) => ({ ...item, isDirectExecution: true })
@@ -28160,7 +28303,7 @@ var CheckoutNotifications = ({
       )
     ].sort((a, b) => b.createdTimeMs - a.createdTimeMs);
   }, [displayedDirectExecutions, displayedCheckouts]);
-  const displayedNotifications = useMemo44(() => {
+  const displayedNotifications = useMemo43(() => {
     return isExpanded ? combinedNotifications : combinedNotifications.slice(0, COLLAPSED_COUNT);
   }, [isExpanded, combinedNotifications]);
   const handleNotificationClose = (id) => setClosedNotifications((prev) => [...prev, id]);
@@ -28286,7 +28429,7 @@ function FunCheckoutModalInner({
   const hasBack = hasHistoryEntry && !disableBack;
   const checkoutConfig = checkoutItem.initSettings.config;
   const showDydxSwitch = !hasBack && modalState.step !== "checkout_complete" /* CHECKOUT_COMPLETE */;
-  const helpButtonUrl = useFlag(FlagKey31.HelpTutorialUrl);
+  const helpButtonUrl = useFlag(FlagKey32.HelpTutorialUrl);
   const { onScroll, topbar, withTopDivider } = useCustomStatusAnimationAboveTopbar({
     depositAddress: checkoutItem.depositAddress ?? void 0,
     isCheckoutDetailView: modalState.step === "checkout_complete" /* CHECKOUT_COMPLETE */,
@@ -28485,7 +28628,7 @@ function ModalProvider({ children }) {
   return /* @__PURE__ */ React255.createElement(
     ModalContext.Provider,
     {
-      value: useMemo45(
+      value: useMemo44(
         () => ({
           accountModalOpen,
           accountModalTab,
@@ -29211,7 +29354,7 @@ var FunkitWeb2Provider = ({
     },
     [privy]
   );
-  const web2UserInfo = useMemo46(() => {
+  const web2UserInfo = useMemo45(() => {
     if (!loggedInUser || !loggedInUser?.linked_accounts || !loggedInUser?.linked_accounts?.length) {
       return PLACEHOLDER_FUNKIT_USER_INFO;
     }
@@ -30119,9 +30262,9 @@ function cssStringFromTheme(theme, options = {}) {
 }
 
 // src/hooks/useIsFunkitCheckoutActivated.ts
-import { FlagKey as FlagKey32 } from "@funkit/utils";
+import { FlagKey as FlagKey33 } from "@funkit/utils";
 var useIsFunkitCheckoutActivated = () => {
-  const isCheckoutActivated = useFlag(FlagKey32.IsCheckoutActivated);
+  const isCheckoutActivated = useFlag(FlagKey33.IsCheckoutActivated);
   return {
     isActivated: isCheckoutActivated
   };
@@ -30226,7 +30369,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.5.5";
+  return "5.5.7";
 }
 function useFingerprint() {
   const fingerprint = useCallback49(() => {