@funkit/connect 3.0.0-next.8 → 3.0.0

package/dist/index.js

@@ -116,47 +116,35 @@ import React3 from "react";
 var SpinnerIconClassName = "qe221a1";
 
 // src/components/Icons/Spinner.tsx
-var SpinnerIcon = ({
-  height = 21,
-  width = 21
-}) => {
+var SpinnerIcon = ({ size = 21 }) => {
   return /* @__PURE__ */ React3.createElement(
-    "div",
+    "svg",
     {
-      style: {
-        width: `${width}px`,
-        height: `${height}px`
-      }
+      className: SpinnerIconClassName,
+      xmlns: "http://www.w3.org/2000/svg",
+      height: size,
+      width: size,
+      viewBox: "0 0 14 14",
+      fill: "none"
     },
     /* @__PURE__ */ React3.createElement(
-      "svg",
+      "path",
       {
-        className: SpinnerIconClassName,
-        xmlns: "http://www.w3.org/2000/svg",
-        height,
-        width,
-        viewBox: "0 0 14 14",
-        fill: "none"
-      },
-      /* @__PURE__ */ React3.createElement(
-        "path",
-        {
-          opacity: "0.3",
-          d: "M13.3438 7C13.3438 8.66748 12.7013 10.1834 11.6491 11.3162C11.091 11.917 10.4183 12.4092 9.66627 12.7581C8.85649 13.1337 7.95367 13.3438 7 13.3438C3.49644 13.3438 0.65625 10.5036 0.65625 7C0.65625 3.49644 3.49644 0.65625 7 0.65625C10.5036 0.65625 13.3438 3.49644 13.3438 7Z",
-          stroke: "white",
-          strokeOpacity: "0.5",
-          strokeWidth: "1.3125"
-        }
-      ),
-      /* @__PURE__ */ React3.createElement(
-        "path",
-        {
-          d: "M6.91235 13.2504C10.3968 13.2504 13.2214 10.4257 13.2214 6.94133C13.2214 5.63413 12.8239 4.41978 12.1431 3.4126",
-          stroke: "#333333",
-          strokeLinecap: "round",
-          strokeWidth: "1.3125"
-        }
-      )
+        opacity: "0.3",
+        d: "M13.3438 7C13.3438 8.66748 12.7013 10.1834 11.6491 11.3162C11.091 11.917 10.4183 12.4092 9.66627 12.7581C8.85649 13.1337 7.95367 13.3438 7 13.3438C3.49644 13.3438 0.65625 10.5036 0.65625 7C0.65625 3.49644 3.49644 0.65625 7 0.65625C10.5036 0.65625 13.3438 3.49644 13.3438 7Z",
+        stroke: "white",
+        strokeOpacity: "0.5",
+        strokeWidth: "1.3125"
+      }
+    ),
+    /* @__PURE__ */ React3.createElement(
+      "path",
+      {
+        d: "M6.91235 13.2504C10.3968 13.2504 13.2214 10.4257 13.2214 6.94133C13.2214 5.63413 12.8239 4.41978 12.1431 3.4126",
+        stroke: "#333333",
+        strokeLinecap: "round",
+        strokeWidth: "1.3125"
+      }
     )
   );
 };
@@ -408,13 +396,13 @@ function Avatar({ address, imageUrl, loading, size }) {
         position: "absolute",
         width: "full"
       },
-      /* @__PURE__ */ React7.createElement(SpinnerIcon, { height: "100%", width: "100%" })
+      /* @__PURE__ */ React7.createElement(SpinnerIcon, { size: "100%" })
     )
   );
 }
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React173, { useContext as useContext20, useEffect as useEffect36, useState as useState46 } from "react";
+import React173, { useContext as useContext20, useEffect as useEffect36, useState as useState48 } from "react";
 
 // src/css/touchableStyles.css.ts
 var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -523,7 +511,7 @@ import React170, {
   useContext as useContext18,
   useEffect as useEffect34,
   useMemo as useMemo34,
-  useState as useState43
+  useState as useState45
 } from "react";
 import { useConfig as useConfig5, useConnect as useConnect2, useDisconnect as useDisconnect2 } from "wagmi";
 
@@ -763,7 +751,7 @@ var MeshExchanges = /* @__PURE__ */ ((MeshExchanges5) => {
   MeshExchanges5["Bitstamp"] = "Bitstamp";
   MeshExchanges5["GateIo"] = "GateIo";
   MeshExchanges5["Acorns"] = "Acorns";
-  MeshExchanges5["Okx"] = "Okx";
+  MeshExchanges5["Okx"] = "OKX";
   MeshExchanges5["BitFlyer"] = "BitFlyer";
   MeshExchanges5["Coinlist"] = "Coinlist";
   MeshExchanges5["Huobi"] = "Huobi";
@@ -795,7 +783,7 @@ var EXCHANGE_NAME_TO_TYPE = {
   ["CexIo" /* CexIo */]: "cexIo",
   ["GateIo" /* GateIo */]: "gateIo",
   ["Bitstamp" /* Bitstamp */]: "bitstamp",
-  ["Okx" /* Okx */]: "okx",
+  ["OKX" /* Okx */]: "okx",
   ["Acorns" /* Acorns */]: "acorns",
   ["Coinlist" /* Coinlist */]: "coinlist",
   ["BitFlyer" /* BitFlyer */]: "bitFlyer",
@@ -863,6 +851,7 @@ async function fetchMeshSupportedTokensAndIdByChainIdAndBrokerage({
 
 // src/utils/flags/config.ts
 var flagConfig = {
+  // TODO: Delete this flag after v3-main is merged to main
   ["select_payment_method_text" /* SelectPaymentMethodText */]: {
     type: "string",
     default_value: "Select Payment Method",
@@ -879,6 +868,7 @@ var flagConfig = {
       }
     ]
   },
+  // TODO: Delete this flag after v3-main is merged to main
   ["payment_method_copy_v1" /* PaymentMethodCopyV1 */]: {
     type: "boolean",
     default_value: false,
@@ -912,7 +902,7 @@ var flagConfig = {
     default_value: [
       "Coinbase" /* Coinbase */,
       "Binance" /* Binance */,
-      "Okx" /* Okx */,
+      "OKX" /* Okx */,
       "Bitfinex" /* Bitfinex */
     ].join(",")
   },
@@ -1144,15 +1134,11 @@ var flags = {
 // src/components/FunkitProvider/FunkitConfigContext.tsx
 import { createContext as createContext3, useContext as useContext3, useMemo as useMemo2 } from "react";
 var DEFAULT_TEXT_CUSTOMIZATIONS = {
-  selectPaymentMethod: "Select Method",
   brokerageOrExchange: "Exchange",
   debitOrCredit: "Card",
-  accountBalance: "Cross-Chain Swap",
+  accountBalance: "Wallet",
   transferCrypto: "Transfer Crypto",
-  selectAccount: "Select an exchange",
-  payWith: "Pay With",
-  enterPaymentInfo: "Enter Payment Information",
-  otc: "Over the Counter"
+  selectAccount: "Select an exchange"
 };
 var DEFAULT_FUNKIT_CONFIG = {
   apiKey: "",
@@ -1415,7 +1401,7 @@ import React169, {
   useContext as useContext17,
   useEffect as useEffect33,
   useMemo as useMemo33,
-  useState as useState42
+  useState as useState44
 } from "react";
 import { useAccount as useAccount10, useAccountEffect as useAccountEffect2, useConfig as useConfig4 } from "wagmi";
 
@@ -1523,7 +1509,8 @@ var noop = () => void 0;
 
 // src/components/FunButton/FunButton.css.ts
 var funIconButtonClickableStyle = "_1tyx5nu4";
-var funIconButtonDisabledStyle = "_1tyx5nu5";
+var funIconButtonDisabledStyle = "_1tyx5nu6";
+var funIconButtonNonClickableStyle = "_1tyx5nu5";
 var funLinkButtonStyle = "_1tyx5nu1 _1rsrm2f186";
 var pressedStyles = "_1tyx5nu3";
 var transitionStyles = "_1tyx5nu2";
@@ -1542,7 +1529,6 @@ var FunIconButton = ({
   isDisabled = false,
   borderRadius = "full",
   style,
-  disableHoverStyles = false,
   variant = "quiet",
   ...props
 }) => {
@@ -1557,21 +1543,21 @@ var FunIconButton = ({
       "aria-label": ariaLabel,
       background: {
         base: isDisabled ? "buttonIconBackgroundHover" : "transparent",
-        hover: !disableHoverStyles ? "buttonIconBackgroundHover" : "transparent",
-        active: "buttonIconBackgroundPressed"
+        hover: onClick ? "buttonIconBackgroundHover" : void 0,
+        active: onClick ? "buttonIconBackgroundPressed" : void 0
       },
       borderColor: {
         base: showBorder ? "buttonIconBackgroundHover" : "transparent",
-        active: showBorder ? "buttonIconStroke" : "transparent",
-        focusedVisible: "buttonIconStroke"
+        active: onClick && showBorder ? "buttonIconStroke" : void 0,
+        focusedVisible: onClick ? "buttonIconStroke" : void 0
       },
       borderRadius,
       borderStyle: "solid",
       borderWidth: showBorder ? "1" : "2",
       className: clsx3(
-        isDisabled ? funIconButtonDisabledStyle : funIconButtonClickableStyle,
+        isDisabled ? funIconButtonDisabledStyle : onClick ? funIconButtonClickableStyle : funIconButtonNonClickableStyle,
         transitionStyles,
-        !isDisabled && pressedStyles
+        onClick && !isDisabled && pressedStyles
       ),
       color,
       gap,
@@ -1798,7 +1784,7 @@ function FunButton({
       ...border,
       onKeyDown: () => void 0
     },
-    /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "10" }, isLoading && /* @__PURE__ */ React14.createElement(SpinnerIcon, { width: loaderSize, height: loaderSize }), /* @__PURE__ */ React14.createElement(Text, { size: isSecondary ? "10" : "12", color, weight: "medium" }, title))
+    /* @__PURE__ */ React14.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "10" }, isLoading && /* @__PURE__ */ React14.createElement(SpinnerIcon, { size: loaderSize }), /* @__PURE__ */ React14.createElement(Text, { size: isSecondary ? "10" : "12", color, weight: "medium" }, title))
   );
 }
 
@@ -2037,7 +2023,7 @@ function useInterval(callback, delay) {
 
 // src/components/FunCountdown/FunCountdown.css.ts
 var backgroundRing = "_1rsrm2f13i";
-var counterRing = "_1rsrm2f16i";
+var counterRing = "_1rsrm2f120";
 
 // src/components/FunCountdown/FunCountdown.tsx
 var FunCountdown = ({
@@ -2748,12 +2734,12 @@ import {
 } from "@funkit/core";
 import React61, {
   createContext as createContext10,
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useContext as useContext10,
   useEffect as useEffect20,
   useMemo as useMemo10,
   useRef as useRef8,
-  useState as useState17
+  useState as useState19
 } from "react";
 import { useAccount as useAccount4, useDisconnect, useSwitchChain } from "wagmi";
 
@@ -2856,7 +2842,7 @@ import React60 from "react";
 import { useAccount as useAccount3 } from "wagmi";
 
 // src/components/FunConnectOptions/FunSignInStep.tsx
-import React58, { Fragment, useCallback as useCallback13, useMemo as useMemo9, useState as useState16 } from "react";
+import React58, { Fragment, useCallback as useCallback14, useMemo as useMemo9, useState as useState18 } from "react";
 
 // src/utils/browsers.ts
 function isSafari() {
@@ -3146,10 +3132,10 @@ function clearWalletConnectDeepLink() {
 import React35 from "react";
 
 // src/components/ModalSelection/ModalSelection.tsx
-import React34, { useContext as useContext8, useState as useState11 } from "react";
+import React34, { useContext as useContext8, useState as useState12 } from "react";
 
 // src/components/AsyncImage/AsyncImage.tsx
-import React31, { useMemo as useMemo4, useReducer as useReducer2 } from "react";
+import React31, { useMemo as useMemo4, useReducer as useReducer2, useState as useState10 } from "react";
 
 // src/components/AsyncImage/useAsyncImage.ts
 import { useEffect as useEffect11, useReducer } from "react";
@@ -3213,7 +3199,9 @@ function AsyncImage({
   const src3 = useAsyncImage(srcProp || fallbackSrc);
   const isRemoteImage = src3 !== void 0 && /^http/.test(src3);
   const [isRemoteImageLoaded, setRemoteImageLoaded] = useTriggeredOnce();
-  const [hasError, setHasError] = useTriggeredOnce();
+  const [hasError, setHasError] = useState10(
+    srcProp === void 0 && fallbackSrc === void 0
+  );
   const { asyncStyle, imgProps } = useMemo4(() => {
     const asyncStyle2 = !useAsImage ? getRemoteImageStyles(isRemoteImage, isRemoteImageLoaded, src3) : {};
     if (useAsImage || isRemoteImage) {
@@ -3228,7 +3216,7 @@ function AsyncImage({
           if (fallbackSrc !== void 0) {
             currentTarget.src = fallbackSrc;
           } else {
-            setHasError();
+            setHasError(true);
           }
         },
         onLoad: isRemoteImage ? setRemoteImageLoaded : void 0
@@ -3337,7 +3325,7 @@ import React33, {
   createContext as createContext8,
   useEffect as useEffect12,
   useMemo as useMemo5,
-  useState as useState10
+  useState as useState11
 } from "react";
 
 // src/locales/I18n.ts
@@ -3523,7 +3511,7 @@ var detectedBrowserLocale = () => {
 // src/components/FunkitProvider/I18nContext.tsx
 var I18nContext = createContext8({ i18n });
 var I18nProvider = ({ children, locale }) => {
-  const [updateCount, setUpdateCount] = useState10(0);
+  const [updateCount, setUpdateCount] = useState11(0);
   const browserLocale = useMemo5(
     () => detectedBrowserLocale(),
     []
@@ -3563,7 +3551,7 @@ var ModalSelection = ({
   isFunkitSdkConnector: isFunkitSdkConnector2,
   ...urlProps
 }) => {
-  const [isMouseOver, setIsMouseOver] = useState11(false);
+  const [isMouseOver, setIsMouseOver] = useState12(false);
   const { i18n: i18n2 } = useContext8(I18nContext);
   return /* @__PURE__ */ React34.createElement(
     Box,
@@ -3891,12 +3879,41 @@ var SocialsIcon = () => {
 };
 
 // src/components/FunConnectOptions/FunConnectOptions.tsx
-import React57, { useCallback as useCallback12, useState as useState15 } from "react";
+import React57, { useCallback as useCallback13, useState as useState17 } from "react";
 
 // src/css/modalTransitionStyles.css.ts
 var animateContentInClass = "stgjxl2";
 var animateContentOutClass = "stgjxl3";
 
+// src/hooks/useAnimatedNavigation.ts
+import { useCallback as useCallback6, useState as useState13 } from "react";
+var ANIMATION_DELAY = 150;
+function useAnimatedNavigation(callback) {
+  const [animateOut, setAnimateOut] = useState13(false);
+  const navigateTo = useCallback6(
+    (page) => {
+      setAnimateOut(true);
+      setTimeout(() => {
+        callback?.(page);
+        setAnimateOut(false);
+      }, ANIMATION_DELAY);
+    },
+    [callback]
+  );
+  const animate = useCallback6((callback2) => {
+    setAnimateOut(true);
+    setTimeout(() => {
+      callback2();
+      setAnimateOut(false);
+    }, ANIMATION_DELAY);
+  }, []);
+  return {
+    animateOut,
+    navigateTo,
+    animate
+  };
+}
+
 // src/components/FunConnectOptions/FunConnectResultStep.tsx
 import React41, { useEffect as useEffect13 } from "react";
 
@@ -4131,10 +4148,10 @@ var FunConnectResultStep = ({
 };
 
 // src/components/FunConnectOptions/FunFarcasterConnectingStep.tsx
-import React50, { useCallback as useCallback9, useEffect as useEffect17, useMemo as useMemo8 } from "react";
+import React50, { useCallback as useCallback10, useEffect as useEffect17, useMemo as useMemo8 } from "react";
 
 // src/hooks/useFunListeners.ts
-import { useCallback as useCallback7, useEffect as useEffect15, useRef as useRef6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef6 } from "react";
 
 // src/components/FunkitProvider/FunkitCheckoutContext.tsx
 import {
@@ -4161,12 +4178,12 @@ import {
 import { estimateGas } from "@wagmi/core";
 import React42, {
   createContext as createContext9,
-  useCallback as useCallback6,
+  useCallback as useCallback7,
   useContext as useContext9,
   useEffect as useEffect14,
   useMemo as useMemo7,
   useRef as useRef5,
-  useState as useState12
+  useState as useState14
 } from "react";
 import { flushSync } from "react-dom";
 import { v4 as uuid } from "uuid";
@@ -4589,29 +4606,35 @@ function validateCheckoutConfig(config) {
       message: "Invalid targetChain configuration: Missing value"
     };
   }
-  const parsedTargetAssetAmount = config?.targetAssetAmount ? parseFloat(config?.targetAssetAmount?.toString()) || 0 : 0;
-  if (!parsedTargetAssetAmount && !!config?.actionsParams?.length) {
+  if (!Array.isArray(config.actionsParams)) {
+    return {
+      isValid: false,
+      message: "Invalid actionsParams configuration: Has to be an array. If no actions are required, please specify an empty array ([]) instead."
+    };
+  }
+  const parsedTargetAssetAmount = config.targetAssetAmount ? parseFloat(config.targetAssetAmount?.toString()) || 0 : 0;
+  if (!Number.isFinite(parsedTargetAssetAmount) || parsedTargetAssetAmount < 0) {
     return {
       isValid: false,
       message: "Invalid targetAssetAmount configuration: Has to be a number greater than 0"
     };
   }
-  if (config.disableEditing && !parsedTargetAssetAmount) {
+  if (parsedTargetAssetAmount === 0 && !!config.actionsParams.length) {
     return {
       isValid: false,
-      message: "Invalid disableEditing configuration: Unable to disable editing if targetAssetAmount is not greater than 0"
+      message: "Invalid targetAssetAmount configuration: Has to be a number greater than 0"
     };
   }
-  if (!config.targetAssetTicker) {
+  if (config.disableEditing && !parsedTargetAssetAmount) {
     return {
       isValid: false,
-      message: "Invalid targetAssetTicker configuration: Missing value"
+      message: "Invalid disableEditing configuration: Unable to disable editing if targetAssetAmount is not greater than 0"
     };
   }
-  if (!config.actionsParams) {
+  if (!config.targetAssetTicker) {
     return {
       isValid: false,
-      message: "Invalid actionsParams configuration: Has to be an array. If no actions are required, please specify an empty array ([]) instead."
+      message: "Invalid targetAssetTicker configuration: Missing value"
     };
   }
   if (!FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[config.targetChain]) {
@@ -4678,13 +4701,12 @@ function getFunkitEnvForCheckoutEstimation({
   }
   const checkoutPaymasterAddresses = CONTRACT_ADDRESSES.checkoutPaymasterAddress;
   const sponsorAddress = checkoutPaymasterAddresses[chainId];
-  const existingGlobalEnvOptions = getEnvOptions();
-  const originalEnvOptions = existingGlobalEnvOptions || { gasSponsor: {} };
+  const originalEnvOptions = getEnvOptions();
   const newConfig = {
     ...originalEnvOptions,
     chain: chainId,
     gasSponsor: {
-      ...originalEnvOptions.gasSponsor,
+      ...originalEnvOptions?.gasSponsor,
       // Important: Use the checkout paymaster instead of gasless / token paymaster
       useCheckoutSponsor: true,
       sponsorAddress
@@ -4885,8 +4907,8 @@ function FunkitCheckoutProvider({ children }) {
     userInfo
   } = useGeneralWallet();
   const { switchChainAsync } = useFunkitSwitchChains({});
-  const [activeCheckouts, setActiveCheckouts] = useState12({});
-  const [checkoutHistoryList, setCheckoutHistoryList] = useState12([]);
+  const [activeCheckouts, setActiveCheckouts] = useState14({});
+  const [checkoutHistoryList, setCheckoutHistoryList] = useState14([]);
   const {
     stateMap: checkoutHistoryStateMap,
     depositAddrMap: checkoutHistoryDepositAddrMap,
@@ -4896,11 +4918,11 @@ function FunkitCheckoutProvider({ children }) {
   }, [checkoutHistoryList]);
   const intervalRef = useRef5();
   const [refreshSymbol, triggerRefreshSymbol] = useSymbolRefresh_default();
-  const [historyDepositAddress, setHistoryDepositAddress] = useState12();
-  const [isCheckoutHistoryInited, setIsCheckoutHistoryInited] = useState12(false);
-  const [isRefreshingCheckoutHistory, setIsRefreshingCheckoutHistory] = useState12(true);
+  const [historyDepositAddress, setHistoryDepositAddress] = useState14();
+  const [isCheckoutHistoryInited, setIsCheckoutHistoryInited] = useState14(false);
+  const [isRefreshingCheckoutHistory, setIsRefreshingCheckoutHistory] = useState14(true);
   const isGuestUserOnCheckoutHistory = !isUserLoggedIn && !!historyDepositAddress;
-  const _refreshCheckoutHistory = useCallback6(async () => {
+  const _refreshCheckoutHistory = useCallback7(async () => {
     if (!funkitConfig.apiKey) return;
     if (!isUserLoggedIn && !isGuestUserOnCheckoutHistory) return;
     try {
@@ -4955,7 +4977,7 @@ function FunkitCheckoutProvider({ children }) {
       clearInterval(intervalRef.current);
     }
   }, [logoutSymbol]);
-  const _startCheckoutHistoryListener = useCallback6(
+  const _startCheckoutHistoryListener = useCallback7(
     (singleDepositAddr) => {
       setHistoryDepositAddress(singleDepositAddr);
       clearInterval(intervalRef.current);
@@ -4968,7 +4990,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [triggerRefreshSymbol]
   );
-  const _stopCheckoutHistoryListener = useCallback6(
+  const _stopCheckoutHistoryListener = useCallback7(
     (cancelIntervalId) => {
       clearInterval(cancelIntervalId);
       if (cancelIntervalId === intervalRef.current) {
@@ -4977,7 +4999,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     []
   );
-  const _initNewCheckout = useCallback6(
+  const _initNewCheckout = useCallback7(
     (initSettings, hasSufficientBalance2, sourceSymbol) => {
       const newCheckoutId = uuid();
       const isFastForwarded = false;
@@ -5024,7 +5046,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [accountBalancePaymentDefaultInfo, activeCheckouts]
   );
-  const _getAndValidateCheckoutItemByCheckoutId = useCallback6(
+  const _getAndValidateCheckoutItemByCheckoutId = useCallback7(
     (checkoutId) => {
       if (!activeCheckouts?.[checkoutId]) {
         throw new Error(
@@ -5035,7 +5057,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [activeCheckouts]
   );
-  const _updateSelectedSourceAsset = useCallback6(
+  const _updateSelectedSourceAsset = useCallback7(
     (checkoutId, selectedSourceAssetAddress, selectedSourceAssetSymbol, selectedSourceAssetChainId) => {
       _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       setActiveCheckouts((prev) => {
@@ -5055,7 +5077,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [_getAndValidateCheckoutItemByCheckoutId, activeCheckouts]
   );
-  const _updateTargetAssetAmount = useCallback6(
+  const _updateTargetAssetAmount = useCallback7(
     (checkoutId, newTargetAssetAmount) => {
       flushSync(() => {
         _getAndValidateCheckoutItemByCheckoutId(checkoutId);
@@ -5075,7 +5097,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [_getAndValidateCheckoutItemByCheckoutId, activeCheckouts]
   );
-  const _updateSelectedPaymentMethodInfo = useCallback6(
+  const _updateSelectedPaymentMethodInfo = useCallback7(
     (checkoutId, newPaymentMethodInfo) => {
       _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       setActiveCheckouts((prev) => {
@@ -5095,7 +5117,7 @@ function FunkitCheckoutProvider({ children }) {
     [_getAndValidateCheckoutItemByCheckoutId, activeCheckouts]
   );
   const [reDraftSymbol, triggerReDraftSymbol] = useSymbolRefresh_default();
-  const _calculateAssetUsdValue = useCallback6(
+  const _calculateAssetUsdValue = useCallback7(
     async (chainId, tokenAddress, tokenAmount) => {
       const priceInfo = await getAssetPriceInfo2({
         chainId,
@@ -5112,7 +5134,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [funkitConfig.apiKey]
   );
-  const _getCheckoutDraftDollarValue = useCallback6(
+  const _getCheckoutDraftDollarValue = useCallback7(
     async (checkoutId) => {
       const checkoutItem = _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       const hasPrevDraftValue = !!checkoutItem.draftDollarValue;
@@ -5148,7 +5170,7 @@ function FunkitCheckoutProvider({ children }) {
       triggerReDraftSymbol
     ]
   );
-  const _clearCheckoutQuoteMessages = useCallback6(
+  const _clearCheckoutQuoteMessages = useCallback7(
     (checkoutId) => {
       _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       setActiveCheckouts((prev) => ({
@@ -5162,7 +5184,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [_getAndValidateCheckoutItemByCheckoutId]
   );
-  const _getCheckoutQuote = useCallback6(
+  const _getCheckoutQuote = useCallback7(
     async (checkoutId, sponsorInitialTransferGasLimit, newPaymentMethodInfo) => {
       if (!funkitConfig?.apiKey) {
         throw new Error(
@@ -5447,7 +5469,7 @@ function FunkitCheckoutProvider({ children }) {
       userInfo
     ]
   );
-  const _generateSignedBatchOperation = useCallback6(
+  const _generateSignedBatchOperation = useCallback7(
     async (actionsParams = [], assetChainId, bypassWalletInit, stepMessageSetter) => {
       if (!funWallet || !funWalletAuth) {
         throw new Error("Funwallet or auth not defined");
@@ -5531,7 +5553,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [funWallet, funWalletAuth, isWeb3Login]
   );
-  const _generateClientMetadataForBackend = useCallback6(
+  const _generateClientMetadataForBackend = useCallback7(
     (checkoutId) => {
       const checkoutItem = _getAndValidateCheckoutItemByCheckoutId(checkoutId);
       return {
@@ -5556,7 +5578,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [_getAndValidateCheckoutItemByCheckoutId]
   );
-  const _confirmCheckout = useCallback6(
+  const _confirmCheckout = useCallback7(
     async (checkoutId, shouldbatchOpBypassInit, stepMessageSetter) => {
       if (!funkitConfig?.apiKey) {
         throw new Error(
@@ -5629,7 +5651,7 @@ function FunkitCheckoutProvider({ children }) {
       switchChainAsync
     ]
   );
-  const _cancelCheckout = useCallback6(
+  const _cancelCheckout = useCallback7(
     (depositAddress) => {
       return postApiDeactivateCheckout({
         depositAddress,
@@ -5722,12 +5744,12 @@ var useFunkitPostCheckoutInternal = (depositAddress) => {
     checkoutHistoryDepositAddrMap,
     checkoutHistoryCurrentDepositAddrMap
   } = useContext9(FunkitCheckoutContext);
-  const [checkoutHistoryInfo, setCheckoutHistoryInfo] = useState12();
-  const [isLoading, setIsLoading] = useState12(false);
+  const [checkoutHistoryInfo, setCheckoutHistoryInfo] = useState14();
+  const [isLoading, setIsLoading] = useState14(false);
   if (!depositAddress || !isAddress2(depositAddress)) {
     throw new Error("Invalid depositAddress");
   }
-  const setupCheckoutHistory = useCallback6(async () => {
+  const setupCheckoutHistory = useCallback7(async () => {
     try {
       setIsLoading(true);
       let checkoutHistory;
@@ -5790,22 +5812,22 @@ var useFunkitCheckout = (props) => {
   const { openFunCheckoutModal } = useFunCheckoutModal();
   const { openConnectModal } = useConnectModal();
   const { isUserLoggedIn } = useGeneralWallet();
-  const onErrorWrapper = useCallback6(
+  const onErrorWrapper = useCallback7(
     (payload) => {
       logger.warn(payload.message, payload);
       onError?.(payload);
     },
     [onError]
   );
-  const onOpenWrapper = useCallback6(
+  const onOpenWrapper = useCallback7(
     (newId) => {
       props?.onOpen?.();
       openFunCheckoutModal?.(newId);
     },
     [openFunCheckoutModal, props]
   );
-  const [pendingCheckoutConfig, setPendingCheckoutConfig] = useState12();
-  const beginCheckout = useCallback6(
+  const [pendingCheckoutConfig, setPendingCheckoutConfig] = useState14();
+  const beginCheckout = useCallback7(
     async (inputConfig) => {
       const combinedConfig = {
         ...propsConfig || {},
@@ -5895,21 +5917,21 @@ function useSIWFarcasterListener(channelToken) {
   const { getFcConnectionStatus, handleFunkitWeb2Login } = useFunkitWeb2Login();
   const intervalRef = useRef6();
   const [refreshSymbol, triggerRefreshSymbol] = useSymbolRefresh_default();
-  const startStatusListener = useCallback7(() => {
+  const startStatusListener = useCallback8(() => {
     clearInterval(intervalRef.current);
     triggerRefreshSymbol();
     intervalRef.current = setInterval(() => {
       triggerRefreshSymbol();
     }, FARCASTER_STATUS_INTERVAL);
   }, [triggerRefreshSymbol]);
-  const stopStatusListener = useCallback7(() => {
+  const stopStatusListener = useCallback8(() => {
     clearInterval(intervalRef.current);
   }, []);
   useEffect15(() => {
     startStatusListener();
     return () => stopStatusListener();
   }, []);
-  const check = useCallback7(async () => {
+  const check = useCallback8(async () => {
     if (!channelToken || !initalChainid) return;
     const { isCompleted, fcMeta } = await getFcConnectionStatus(channelToken);
     if (!isCompleted) return;
@@ -5937,7 +5959,7 @@ function useSIWFarcasterListener(channelToken) {
 }
 
 // src/components/CopyAddress/CopyAddress.tsx
-import React46, { useCallback as useCallback8, useEffect as useEffect16, useState as useState13 } from "react";
+import React46, { useCallback as useCallback9, useEffect as useEffect16, useState as useState15 } from "react";
 
 // src/components/FunKeyValue/FunKeyValue.tsx
 import React43 from "react";
@@ -6101,8 +6123,8 @@ function CopyAddress({
   type,
   showAddress = false
 }) {
-  const [copiedAddress, setCopiedAddress] = useState13(false);
-  const copyAddressAction = useCallback8(() => {
+  const [copiedAddress, setCopiedAddress] = useState15(false);
+  const copyAddressAction = useCallback9(() => {
     if (address) {
       navigator.clipboard.writeText(address);
       setCopiedAddress(true);
@@ -6228,7 +6250,7 @@ function FunFarcasterConnectingStep({
     }
   }, [farcasterUri, mobile, safari]);
   useSIWFarcasterListener(farcasterToken);
-  const svgUrl = useCallback9(async () => {
+  const svgUrl = useCallback10(async () => {
     return (await import("./farcaster-O6OCVOGR.js")).default;
   }, []);
   const promptText = useMemo8(() => {
@@ -6281,10 +6303,10 @@ function FunFarcasterConnectingStep({
 }
 
 // src/components/FunConnectOptions/FunWeb2ConnectingStep.tsx
-import React53, { useCallback as useCallback11, useEffect as useEffect18 } from "react";
+import React53, { useCallback as useCallback12, useEffect as useEffect18 } from "react";
 
 // src/components/FunInput/FunTwoFaInput.tsx
-import React51, { useCallback as useCallback10, useRef as useRef7, useState as useState14 } from "react";
+import React51, { useCallback as useCallback11, useRef as useRef7, useState as useState16 } from "react";
 var FunTwoFaInput = ({
   value,
   onChange,
@@ -6299,12 +6321,12 @@ var FunTwoFaInput = ({
   const inputRefs = useRef7(
     Array.from({ length: initialInputLength }, () => null)
   );
-  const [currentLength, setCurrentLength] = useState14(initialInputLength);
-  const [focusIndex, setFocusIndex] = useState14(0);
-  const [isFocused, setIsFocused] = useState14(false);
+  const [currentLength, setCurrentLength] = useState16(initialInputLength);
+  const [focusIndex, setFocusIndex] = useState16(0);
+  const [isFocused, setIsFocused] = useState16(false);
   const onFocus = () => setIsFocused(true);
   const onBlur = () => setIsFocused(false);
-  const handleBackspace = useCallback10(
+  const handleBackspace = useCallback11(
     (index) => {
       if (index === maxInputLength - 1 && value.length == maxInputLength) {
         onChange(value.slice(0, index));
@@ -6328,7 +6350,7 @@ var FunTwoFaInput = ({
     },
     [currentLength, initialInputLength, maxInputLength, onChange, value]
   );
-  const handleChange = useCallback10(
+  const handleChange = useCallback11(
     (changeEvent) => {
       changeEvent.stopPropagation();
       const trimmedInput = changeEvent.nativeEvent.data;
@@ -6489,7 +6511,7 @@ var FunWeb2ConnectingStep = ({
     setOtpInput("");
     clearLoginError();
   }, []);
-  const handleOtpComplete = useCallback11(
+  const handleOtpComplete = useCallback12(
     async (finalOtpInput) => {
       if (isNotNullish(initialChainId)) {
         await handleFunkitWeb2Login({
@@ -6695,21 +6717,19 @@ var FunWeb3ConnectingStep = ({ selectedWallet, qrCodeUri }) => {
 };
 
 // src/components/FunConnectOptions/FunConnectOptions.tsx
-var ANIMATION_DELAY = 150;
 var isSignIn = (step) => step === 0 /* SIGNIN_PRIMARY */ || step === 1 /* SIGNIN_SECONDARY */;
 function FunConnectOptions({ onClose }) {
-  const [step, setStep] = useState15(0 /* SIGNIN_PRIMARY */);
-  const [selectedWallet, setSelectedWallet] = useState15();
-  const [qrCodeUri, setQrCodeUri] = useState15("");
-  const [emailInput, setEmailInput] = useState15("");
-  const [otpInput, setOtpInput] = useState15("");
-  const [farcasterUri, setFarcasterUri] = useState15("");
-  const [farcasterToken, setFarcasterToken] = useState15("");
+  const [step, setStep] = useState17(0 /* SIGNIN_PRIMARY */);
+  const [selectedWallet, setSelectedWallet] = useState17();
+  const [qrCodeUri, setQrCodeUri] = useState17("");
+  const [emailInput, setEmailInput] = useState17("");
+  const [otpInput, setOtpInput] = useState17("");
+  const [farcasterUri, setFarcasterUri] = useState17("");
+  const [farcasterToken, setFarcasterToken] = useState17("");
   const { loginConfig } = useFunkitConfig();
   const prioritizedLoginType = loginConfig.prioritizedLogin;
   const hasSecondarySignIn = prioritizedLoginType !== "none" && loginConfig.web2 && loginConfig.web3;
-  const [backAnimation, setBackAnimation] = useState15(false);
-  const changeStep = useCallback12((newStep) => {
+  const changeStep = useCallback13((newStep) => {
     setStep(newStep);
     if (isSignIn(newStep)) {
       setSelectedWallet(void 0);
@@ -6717,17 +6737,8 @@ function FunConnectOptions({ onClose }) {
       setOtpInput("");
     }
   }, []);
-  const navigateTo = useCallback12(
-    (step2) => {
-      setBackAnimation(true);
-      setTimeout(() => {
-        changeStep(step2);
-        setBackAnimation(false);
-      }, ANIMATION_DELAY);
-    },
-    [changeStep]
-  );
-  const handleBackToSignIn = useCallback12(
+  const { animateOut, navigateTo } = useAnimatedNavigation(changeStep);
+  const handleBackToSignIn = useCallback13(
     (type) => {
       const isPrimary = !hasSecondarySignIn || type === prioritizedLoginType;
       navigateTo(
@@ -6737,7 +6748,7 @@ function FunConnectOptions({ onClose }) {
     [navigateTo, hasSecondarySignIn, prioritizedLoginType]
   );
   const walletConnectors = usePreparedWalletConnectors();
-  const onRegenerateQrCode = useCallback12(
+  const onRegenerateQrCode = useCallback13(
     async (wallet) => {
       const sWallet = walletConnectors.find((w) => wallet.id === w.id);
       const uri = await sWallet?.getQrCodeUri?.();
@@ -6745,7 +6756,7 @@ function FunConnectOptions({ onClose }) {
     },
     [walletConnectors]
   );
-  const connectToWallet = useCallback12(
+  const connectToWallet = useCallback13(
     async (wallet) => {
       if (!wallet.ready) return;
       try {
@@ -6762,7 +6773,7 @@ function FunConnectOptions({ onClose }) {
     },
     [changeStep, onRegenerateQrCode]
   );
-  const handleRetry = useCallback12(() => {
+  const handleRetry = useCallback13(() => {
     if (!selectedWallet || selectedWallet.id === FUNKIT_CONNECT_WALLET_ID) {
       handleBackToSignIn("web2");
     } else {
@@ -6778,7 +6789,7 @@ function FunConnectOptions({ onClose }) {
     },
     [3 /* PENDING_WALLET */]: {
       onBack: () => handleBackToSignIn("web3"),
-      backAnimation
+      backAnimation: animateOut
     },
     [2 /* PENDING_EMAIL */]: {
       onBack: () => handleBackToSignIn("web2"),
@@ -6786,7 +6797,7 @@ function FunConnectOptions({ onClose }) {
     },
     [4 /* PENDING_FARCASTER */]: {
       onBack: () => handleBackToSignIn("web2"),
-      backAnimation
+      backAnimation: animateOut
     },
     [5 /* ERROR_WEB3 */]: {
       onBack: () => handleBackToSignIn("web3")
@@ -6799,7 +6810,7 @@ function FunConnectOptions({ onClose }) {
       flexDirection: "column",
       minWidth: "full",
       width: "full",
-      className: backAnimation ? animateContentOutClass : animateContentInClass,
+      className: animateOut ? animateContentOutClass : animateContentInClass,
       withTopDivider: true
     },
     isSignIn(step) ? /* @__PURE__ */ React57.createElement(
@@ -6903,7 +6914,7 @@ function FunSignInStep({
   const funkitConfig = useFunkitConfig();
   const prioritizedLoginType = funkitConfig.loginConfig.prioritizedLogin;
   const hasSecondarySignIn = prioritizedLoginType !== "none" && funkitConfig.loginConfig.web2 && funkitConfig.loginConfig.web3;
-  const [selectedOptionId, setSelectedOptionId] = useState16();
+  const [selectedOptionId, setSelectedOptionId] = useState18();
   const {
     isSendingOtpEmail,
     handleSendOtpEmail,
@@ -6913,7 +6924,7 @@ function FunSignInStep({
   const isEmailInputValid = useMemo9(() => {
     return validateEmailString(emailInput);
   }, [emailInput]);
-  const [emailError, setEmailError] = useState16();
+  const [emailError, setEmailError] = useState18();
   const wallets = usePreparedWalletConnectors();
   const groupedWallets = groupBy(wallets, (wallet) => wallet.groupName);
   const funkitConnectWallet2 = groupedWallets?.[RESERVED_GROUP_NAME]?.[0];
@@ -6977,7 +6988,7 @@ function FunSignInStep({
       changeStep(3 /* PENDING_WALLET */);
     }
   };
-  const handleEmailSubmit = useCallback13(async () => {
+  const handleEmailSubmit = useCallback14(async () => {
     if (!isEmailInputValid) return;
     try {
       const { success, error } = await handleSendOtpEmail(emailInput);
@@ -7323,10 +7334,10 @@ function GeneralWalletProvider({ children }) {
     }
   }, [apiKey, userInfo]);
   const intervalRef = useRef8();
-  const [isFetchingAssets, setIsFetchingAssets] = useState17(false);
-  const [walletAssets, setWalletAssets] = useState17(null);
+  const [isFetchingAssets, setIsFetchingAssets] = useState19(false);
+  const [walletAssets, setWalletAssets] = useState19(null);
   const [refreshSymbol, triggerRefreshSymbol] = useSymbolRefresh_default();
-  const _fetchAssetsIfPossible = useCallback14(async () => {
+  const _fetchAssetsIfPossible = useCallback15(async () => {
     if (isConnected && address) {
       try {
         setIsFetchingAssets(true);
@@ -7375,18 +7386,18 @@ function GeneralWalletProvider({ children }) {
     }
     return totalWalletAssetsUsd2;
   }, [walletAssets]);
-  const startAssetsListener = useCallback14(() => {
+  const startAssetsListener = useCallback15(() => {
     clearInterval(intervalRef.current);
     triggerRefreshSymbol();
     intervalRef.current = setInterval(() => {
       triggerRefreshSymbol();
     }, FETCH_ASSETS_INTERVAL_MS);
   }, [triggerRefreshSymbol]);
-  const stopAssetsListener = useCallback14(() => {
+  const stopAssetsListener = useCallback15(() => {
     clearInterval(intervalRef.current);
   }, []);
-  const [funWalletAuth, setFunWalletAuth] = useState17(null);
-  const [funWallet, setFunWallet] = useState17(null);
+  const [funWalletAuth, setFunWalletAuth] = useState19(null);
+  const [funWallet, setFunWallet] = useState19(null);
   useEffect20(() => {
     async function setupFunWallet() {
       let newFunWalletAuth;
@@ -7424,7 +7435,7 @@ function GeneralWalletProvider({ children }) {
     );
   }, [connector, isWeb2Login, isWeb3Login, activeChain]);
   const [logoutSymbol, triggerLogoutSymbol] = useSymbolRefresh_default();
-  const handleLogout = useCallback14(async () => {
+  const handleLogout = useCallback15(async () => {
     logger.log("handleLogout_called");
     setWalletAssets(null);
     triggerLogoutSymbol();
@@ -7519,7 +7530,7 @@ var useFunkitSwitchChains = ({
   onSettled
 }) => {
   const { isWeb2Login } = useContext10(GeneralWalletContext);
-  const [pendingChainId, setPendingChainId] = useState17(null);
+  const [pendingChainId, setPendingChainId] = useState19(null);
   const { switchChain, switchChainAsync } = useSwitchChain({
     mutation: {
       onMutate: ({ chainId: _chainId }) => {
@@ -7536,7 +7547,7 @@ var useFunkitSwitchChains = ({
       }
     }
   });
-  const canSwitchChain = useCallback14(
+  const canSwitchChain = useCallback15(
     (params) => {
       if (isWeb2Login && !FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO4[params.chainId].isFunWalletSupported) {
         logger.warn(
@@ -7548,7 +7559,7 @@ var useFunkitSwitchChains = ({
     },
     [isWeb2Login]
   );
-  const switchChainWithGuard = useCallback14(
+  const switchChainWithGuard = useCallback15(
     (params) => {
       if (canSwitchChain(params)) {
         switchChain(params);
@@ -7556,7 +7567,7 @@ var useFunkitSwitchChains = ({
     },
     [canSwitchChain, switchChain]
   );
-  const switchChainAsyncWithGuard = useCallback14(
+  const switchChainAsyncWithGuard = useCallback15(
     async (params) => {
       if (canSwitchChain(params)) {
         await switchChainAsync(params);
@@ -7572,7 +7583,7 @@ var useFunkitSwitchChains = ({
 };
 
 // src/components/ProfileDetails/ActivityTraversalContext.tsx
-import React62, { createContext as createContext11, useCallback as useCallback15, useContext as useContext11, useState as useState18 } from "react";
+import React62, { createContext as createContext11, useCallback as useCallback16, useContext as useContext11, useState as useState20 } from "react";
 var ActivityTraversalContext = createContext11({
   selectedPurchaseId: void 0,
   selectedPurchaseInitView: void 0,
@@ -7582,11 +7593,11 @@ var ActivityTraversalContext = createContext11({
   resetActivityTraversal: () => void 0
 });
 var ActivityTraversalProvider = ({ children }) => {
-  const [selectedPurchaseId, setSelectedPurchaseId] = useState18();
-  const [selectedPurchaseInitView, setSelectedPurchaseInitView] = useState18();
-  const [returnView, setReturnView] = useState18();
-  const [returnViewPresets, setReturnViewPresets] = useState18({});
-  const onSelectActivity = useCallback15(
+  const [selectedPurchaseId, setSelectedPurchaseId] = useState20();
+  const [selectedPurchaseInitView, setSelectedPurchaseInitView] = useState20();
+  const [returnView, setReturnView] = useState20();
+  const [returnViewPresets, setReturnViewPresets] = useState20({});
+  const onSelectActivity = useCallback16(
     ({
       depositAddress,
       initialPage,
@@ -7604,7 +7615,7 @@ var ActivityTraversalProvider = ({ children }) => {
     },
     []
   );
-  const resetActivityTraversal = useCallback15(() => {
+  const resetActivityTraversal = useCallback16(() => {
     setSelectedPurchaseId(void 0);
     setSelectedPurchaseInitView(void 0);
     setReturnView(void 0);
@@ -7624,13 +7635,21 @@ var useActivityTraversal = () => {
 };
 
 // src/components/ProfileDetails/ProfileDetails.tsx
-import React95, { useCallback as useCallback16, useState as useState25 } from "react";
+import React95, { useCallback as useCallback17, useState as useState27 } from "react";
+
+// src/hooks/useCheckoutModalTitle.ts
+function useCheckoutModalTitle(depositAddress, defaultTitle) {
+  const { checkoutHistoryInfo } = useFunkitPostCheckoutInternal(depositAddress);
+  const metadata = checkoutHistoryInfo?.clientMetadata;
+  const modalTitle = metadata?.initSettings.config.modalTitle;
+  return modalTitle ?? defaultTitle;
+}
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryContent.tsx
-import React79 from "react";
+import React80 from "react";
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryDetail.tsx
-import React71 from "react";
+import React72 from "react";
 
 // src/hooks/useCheckoutStateBooleans.ts
 import { CheckoutState as CheckoutState4 } from "@funkit/api-base";
@@ -7712,7 +7731,7 @@ function FunCallToAction({
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryTransaction.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO5 } from "@funkit/core";
 import { useEffect as useEffect21, useRef as useRef9 } from "react";
-import React69, { useMemo as useMemo11, useState as useState19 } from "react";
+import React70, { useMemo as useMemo12, useState as useState21 } from "react";
 
 // src/utils/formatTimestamp.ts
 var fullMonthNames = [
@@ -7983,10 +8002,143 @@ var Chain3 = ({
 };
 var Chain_default = Chain3;
 
+// src/components/FunAssetAvatar/FunAssetAvatar.tsx
+import React68, { useMemo as useMemo11 } from "react";
+
+// src/consts/assets.ts
+var ASSET_LOGO_SRCS = {
+  ETH: "https://www.iconarchive.com/download/i109534/cjdowner/cryptocurrency-flat/Ethereum-ETH.1024.png",
+  MATIC: "https://altcoinsbox.com/wp-content/uploads/2023/03/matic-logo.webp",
+  ARB: "https://cryptologos.cc/logos/arbitrum-arb-logo.png",
+  LDO: "https://cryptologos.cc/logos/lido-dao-ldo-logo.png",
+  AARBUSDCN: "https://assets.coingecko.com/coins/images/14318/large/aUSDC.e260d492.png?1696514006",
+  CRV: "https://cryptologos.cc/logos/curve-dao-token-crv-logo.png",
+  USDC: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png",
+  USDT: "https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/512/Tether-USDT-icon.png",
+  DAI: "https://cryptologos.cc/logos/multi-collateral-dai-dai-logo.png",
+  WBTC: "https://cryptologos.cc/logos/wrapped-bitcoin-wbtc-logo.png",
+  GRT: "https://cryptologos.cc/logos/the-graph-grt-logo.png",
+  SHIB: "https://cryptologos.cc/logos/shiba-inu-shib-logo.png",
+  QNT: "https://cryptologos.cc/logos/quant-qnt-logo.png",
+  AAVE: "https://cryptologos.cc/logos/aave-aave-logo.png",
+  UNI: "https://cryptologos.cc/logos/uniswap-uni-logo.png",
+  SNX: "https://cryptologos.cc/logos/synthetix-snx-logo.png",
+  CRO: "https://cryptologos.cc/logos/cronos-cro-logo.png",
+  RNDR: "https://altcoinsbox.com/wp-content/uploads/2023/03/render-token-logo.webp",
+  SAND: "https://cdn3d.iconscout.com/3d/premium/thumb/the-sandbox-sand-cryptocurrency-5108582-4263919.png?f=webp",
+  APE: "https://cryptologos.cc/logos/apecoin-ape-ape-logo.png",
+  IMX: "https://cryptologos.cc/logos/immutable-x-imx-logo.png",
+  INJ: "https://cryptologos.cc/logos/injective-inj-logo.png",
+  MKR: "https://cryptologos.cc/logos/maker-mkr-logo.png",
+  LINK: "https://cryptologos.cc/logos/chainlink-link-logo.png",
+  PYUSD: "https://www.paypalobjects.com/devdoc/coin-PYUSD%20220x219.png",
+  DEGEN: "https://assets.coingecko.com/coins/images/34515/large/android-chrome-512x512.png?1706198225",
+  AERO: "https://assets.coingecko.com/coins/images/31745/large/token.png?1696530564",
+  APOLWMATIC: "https://polygonscan.com/token/images/aave_wmatic.png",
+  MFER: "https://assets.coingecko.com/coins/images/36550/large/mfercoin-logo.png?1711876821",
+  $MFER: "https://assets.coingecko.com/coins/images/36550/large/mfercoin-logo.png?1711876821",
+  ROOST: "https://assets.coingecko.com/coins/images/36458/large/roost.jpeg?1711493580",
+  BSHIB: "https://assets.coingecko.com/coins/images/36092/large/logocg.png?1710478223",
+  BRETT: "https://assets.coingecko.com/coins/images/35529/large/1000050750.png?1709031995",
+  BLERF: "https://assets.coingecko.com/coins/images/36473/large/BLERF.png?1711527025",
+  BENTO: "https://assets.coingecko.com/coins/images/37138/large/logo-bento-200-200.png?1713419221",
+  CBETH: "https://assets.coingecko.com/coins/images/27008/large/cbeth.png?1709186989",
+  PENDLE: "https://assets.coingecko.com/coins/images/15069/large/Pendle_Logo_Normal-03.png?1696514728",
+  WEETH: "https://assets.coingecko.com/coins/images/33033/large/weETH.png?1701438396",
+  GMX: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xfc5A1A6EB076a2C7aD06eD22C90d7E710E35ad0a/logo.png",
+  TYBG: "https://assets.coingecko.com/coins/images/34563/large/tybg.png?1705400778",
+  LUCK: "https://s3.us-west-2.amazonaws.com/sdk-cdn.fun.xyz/images/luck.jpg",
+  WSTETH: "https://assets.coingecko.com/coins/images/18834/large/wstETH.png?1696518295",
+  WETH: "https://www.cryptocompare.com/media/38553079/weth.png",
+  MNT: "https://img.cryptorank.io/coins/mantle1681720399218.png",
+  USDE: "https://holder.io/wp-content/uploads/coins/3/usde--3-74923.png"
+};
+
+// src/components/FunAssetAvatar/FunAssetAvatar.css.ts
+var assetContainerStyle = "uwrdc21";
+var chainContainerStyle = "uwrdc23 _1rsrm2fju _1rsrm2fu0 _1rsrm2f11 _1rsrm2fi _1rsrm2fx";
+var containerStyle = "uwrdc20";
+
+// src/components/FunAssetAvatar/FunAssetAvatar.tsx
+var fallbackAssetSrc = "https://static1.squarespace.com/static/54735678e4b025d4e207e7b3/t/59605876cd0f689a4a30e51d/1499486328449/Dollar_Circle.png";
+function FunAssetAvatar({
+  assetSrc,
+  assetTicker,
+  assetName,
+  assetIconSize = "20",
+  chainId,
+  prioritizeDefaults = true,
+  hideIfUnknown = false
+}) {
+  const chainMetadata = chainMetadataById[parseInt((chainId || "").toString())] || null;
+  const finalAssetSrc = useMemo11(() => {
+    const normalizedTicker = assetTicker?.toUpperCase() || "";
+    const defaultSrc = ASSET_LOGO_SRCS?.[normalizedTicker];
+    if (prioritizeDefaults) {
+      return defaultSrc || assetSrc;
+    } else {
+      return assetSrc || defaultSrc;
+    }
+  }, [assetSrc, assetTicker, prioritizeDefaults]);
+  const showChainIcon = isNotNullish(chainMetadata);
+  const chainIconSize = parseInt(assetIconSize) / 2;
+  return hideIfUnknown && !finalAssetSrc ? null : /* @__PURE__ */ React68.createElement(Box, { id: "container", alignSelf: "center" }, /* @__PURE__ */ React68.createElement(
+    Box,
+    {
+      width: assetIconSize,
+      height: assetIconSize,
+      className: containerStyle
+    },
+    /* @__PURE__ */ React68.createElement(
+      Box,
+      {
+        width: assetIconSize,
+        height: assetIconSize,
+        className: assetContainerStyle
+      },
+      /* @__PURE__ */ React68.createElement(
+        AsyncImage,
+        {
+          alt: assetName,
+          src: finalAssetSrc,
+          fallbackSrc: fallbackAssetSrc,
+          background: void 0,
+          borderColor: "generalBorderDim",
+          borderRadius: "full",
+          height: assetIconSize,
+          width: assetIconSize,
+          testId: `fun-asset-${assetTicker}-icon`,
+          useAsImage: true
+        }
+      )
+    ),
+    showChainIcon ? /* @__PURE__ */ React68.createElement(
+      Box,
+      {
+        width: "half",
+        height: "half",
+        className: chainContainerStyle
+      },
+      /* @__PURE__ */ React68.createElement(
+        AsyncImage,
+        {
+          alt: chainMetadata.name,
+          src: chainMetadata.iconUrl || "",
+          background: chainMetadata.iconBackground,
+          borderRadius: "1",
+          height: chainIconSize - 2,
+          width: chainIconSize - 2,
+          testId: `fun-asset-chain-${chainId}-icon`
+        }
+      )
+    ) : null
+  ));
+}
+
 // src/components/Icons/StatusIcons.tsx
-import React68 from "react";
+import React69 from "react";
 var CompletedStatusIcon = ({ size = 14 }) => {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     {
       width: size,
@@ -7995,21 +8147,21 @@ var CompletedStatusIcon = ({ size = 14 }) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M3.69434 3.69141H12.3097V12.3068H3.69434V3.69141Z",
         fill: "white"
       }
     ),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M15.6943 7.84615C15.6943 12.1795 12.1814 15.6923 7.84811 15.6923C3.5148 15.6923 0.00195312 12.1795 0.00195312 7.84615C0.00195312 3.51284 3.5148 0 7.84811 0C12.1814 0 15.6943 3.51284 15.6943 7.84615Z",
         fill: "#2AA344"
       }
     ),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8021,7 +8173,7 @@ var CompletedStatusIcon = ({ size = 14 }) => {
   );
 };
 var PendingStatusIcon = ({ size = 14 }) => {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     {
       width: size,
@@ -8030,7 +8182,7 @@ var PendingStatusIcon = ({ size = 14 }) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "rect",
       {
         x: "3.69336",
@@ -8040,8 +8192,8 @@ var PendingStatusIcon = ({ size = 14 }) => {
         fill: "white"
       }
     ),
-    /* @__PURE__ */ React68.createElement("circle", { cx: "7.84713", cy: "7.84615", r: "7.84615", fill: "#F6851B" }),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement("circle", { cx: "7.84713", cy: "7.84615", r: "7.84615", fill: "#F6851B" }),
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M7.68167 5L7.68167 8.27967L9.50491 9.91071",
@@ -8054,7 +8206,7 @@ var PendingStatusIcon = ({ size = 14 }) => {
   );
 };
 var FailedStatusIcon = ({ size = 14 }) => {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     {
       width: size,
@@ -8063,7 +8215,7 @@ var FailedStatusIcon = ({ size = 14 }) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "rect",
       {
         x: "3.69336",
@@ -8073,8 +8225,8 @@ var FailedStatusIcon = ({ size = 14 }) => {
         fill: "white"
       }
     ),
-    /* @__PURE__ */ React68.createElement("circle", { cx: "7.84615", cy: "7.84615", r: "7.84615", fill: "#F34126" }),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement("circle", { cx: "7.84615", cy: "7.84615", r: "7.84615", fill: "#F34126" }),
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M6 6L10 10",
@@ -8083,7 +8235,7 @@ var FailedStatusIcon = ({ size = 14 }) => {
         strokeLinecap: "round"
       }
     ),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M10 6L6 10",
@@ -8101,8 +8253,9 @@ var ContentExpanded = "_8bejan0";
 var Divider = "_8bejan2";
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryTransaction.tsx
+var fallbackAssetSrc2 = "https://static1.squarespace.com/static/54735678e4b025d4e207e7b3/t/59605876cd0f689a4a30e51d/1499486328449/Dollar_Circle.png";
 function FunTxSummaryBox({ children }) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Box,
     {
       background: "offBackground",
@@ -8120,7 +8273,7 @@ function FunTxSummaryBox({ children }) {
   );
 }
 function FunTxSummaryLineItem({ children, ...otherProps }) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Box,
     {
       display: "flex",
@@ -8139,7 +8292,7 @@ function FunTxSummaryCollapsibleBox({
   isExpanded,
   children
 }) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Box,
     {
       display: "flex",
@@ -8151,7 +8304,7 @@ function FunTxSummaryCollapsibleBox({
   );
 }
 function FunTxSummaryLineItemKeyText({ text }) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Text,
     {
       weight: "medium",
@@ -8166,7 +8319,7 @@ function StatusTag({
   type
 }) {
   const color = type === "failed" || type === "expired" ? "error" : type === "processing" ? "standby" : "buttonSuccess";
-  return /* @__PURE__ */ React69.createElement(Box, { display: "flex", alignItems: "center", gap: "4", justifyContent: "flex-end" }, type === "failed" || type === "expired" ? /* @__PURE__ */ React69.createElement(FailedStatusIcon, null) : type === "processing" ? /* @__PURE__ */ React69.createElement(PendingStatusIcon, null) : /* @__PURE__ */ React69.createElement(CompletedStatusIcon, null), /* @__PURE__ */ React69.createElement(Text, { color, size: "12", weight: "medium" }, type.charAt(0).toUpperCase() + type.slice(1)));
+  return /* @__PURE__ */ React70.createElement(Box, { display: "flex", alignItems: "center", gap: "4", justifyContent: "flex-end" }, type === "failed" || type === "expired" ? /* @__PURE__ */ React70.createElement(FailedStatusIcon, null) : type === "processing" ? /* @__PURE__ */ React70.createElement(PendingStatusIcon, null) : /* @__PURE__ */ React70.createElement(CompletedStatusIcon, null), /* @__PURE__ */ React70.createElement(Text, { color, size: "12", weight: "medium" }, type.charAt(0).toUpperCase() + type.slice(1)));
 }
 function FunTxSummaryHistory({
   checkoutHistoryItem
@@ -8176,29 +8329,65 @@ function FunTxSummaryHistory({
   );
   const checkoutItem = checkoutHistoryItem.clientMetadata;
   const checkoutConfig = checkoutItem.initSettings.config;
-  const sourceAmount = checkoutItem.selectedSourceAssetInfo.symbol ? formatCryptoAndStringify(
+  const sourceSymbol = checkoutItem.selectedSourceAssetInfo.symbol;
+  const sourceAmount = sourceSymbol ? formatCryptoAndStringify(
     Number(checkoutItem.latestQuote?.finalPaymentTokenAmount) || 0,
-    checkoutItem.selectedSourceAssetInfo.symbol
+    sourceSymbol
   ) : formatCurrencyAndStringify(
     checkoutItem.finalDollarValue || checkoutItem.draftDollarValue || 0
   );
   const targetAmount = getCheckoutItemDisplay(checkoutConfig, checkoutItem);
-  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Status" }), /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Status" }), /* @__PURE__ */ React70.createElement(
     StatusTag,
     {
       type: isExpired ? "expired" : isError ? "failed" : isCompleted ? "completed" : "processing"
     }
-  )), /* @__PURE__ */ React69.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Pay" }), /* @__PURE__ */ React69.createElement(Text, { size: "12", weight: "medium", color: "primaryText", textAlign: "right" }, sourceAmount)), /* @__PURE__ */ React69.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Receive" }), /* @__PURE__ */ React69.createElement(Text, { size: "12", weight: "medium", color: "primaryText", textAlign: "right" }, targetAmount))));
+  )), /* @__PURE__ */ React70.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Pay" }), /* @__PURE__ */ React70.createElement(Box, { display: "flex", alignItems: "center", gap: "5" }, sourceSymbol && /* @__PURE__ */ React70.createElement(
+    FunAssetAvatar,
+    {
+      assetIconSize: "15",
+      assetTicker: sourceSymbol,
+      assetName: sourceSymbol,
+      hideIfUnknown: true
+    }
+  ), /* @__PURE__ */ React70.createElement(
+    Text,
+    {
+      size: "12",
+      weight: "medium",
+      color: "primaryText",
+      textAlign: "right"
+    },
+    sourceAmount
+  ))), /* @__PURE__ */ React70.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Receive" }), /* @__PURE__ */ React70.createElement(Box, { display: "flex", gap: "5", alignItems: "center" }, /* @__PURE__ */ React70.createElement(
+    AsyncImage,
+    {
+      src: checkoutConfig.iconSrc ?? fallbackAssetSrc2,
+      fallbackSrc: fallbackAssetSrc2,
+      width: 15,
+      height: 15,
+      useAsImage: true
+    }
+  ), /* @__PURE__ */ React70.createElement(
+    Text,
+    {
+      size: "12",
+      weight: "medium",
+      color: "primaryText",
+      textAlign: "right"
+    },
+    targetAmount
+  )))));
 }
 function OrderDetail({
   checkoutHistoryItem
 }) {
-  const [isExpanded, setIsExpanded] = useState19(false);
-  const [hasScrolled, setHasScrolled] = useState19(false);
+  const [isExpanded, setIsExpanded] = useState21(false);
+  const [hasScrolled, setHasScrolled] = useState21(false);
   const contentRef = useRef9(null);
   const { isProcessing, isError, isExpired, isTerminal, isCompleted } = useCheckoutStateBooleans(checkoutHistoryItem.state);
   const checkoutItem = checkoutHistoryItem.clientMetadata;
-  const estimatedEndTimeInfo = useMemo11(() => {
+  const estimatedEndTimeInfo = useMemo12(() => {
     return getEstimateEndTimeInfo(
       checkoutHistoryItem.createdTimeMs,
       checkoutItem
@@ -8215,7 +8404,7 @@ function OrderDetail({
   }, [isExpanded, hasScrolled]);
   const fromExplorerInfo = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO5[checkoutHistoryItem.fromChainId].explorerInfo;
   const toExplorerInfo = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO5[checkoutHistoryItem.toChainId].explorerInfo;
-  return /* @__PURE__ */ React69.createElement(Box, { ref: contentRef }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(Box, { ref: contentRef }, /* @__PURE__ */ React70.createElement(
     Box,
     {
       display: "flex",
@@ -8225,9 +8414,9 @@ function OrderDetail({
       marginBottom: "8",
       alignItems: "center"
     },
-    /* @__PURE__ */ React69.createElement(Text, { size: "12", weight: "medium", color: "tertiaryText" }, "More details"),
-    /* @__PURE__ */ React69.createElement(Text, { color: "tertiaryText" }, /* @__PURE__ */ React69.createElement(ArrowIcon, { size: 10, direction: isExpanded ? "down" : "right" }))
-  ), /* @__PURE__ */ React69.createElement(FunTxSummaryCollapsibleBox, { isExpanded }, /* @__PURE__ */ React69.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Deposit address" }), /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(Text, { size: "12", weight: "medium", color: "tertiaryText" }, "More details"),
+    /* @__PURE__ */ React70.createElement(Text, { color: "tertiaryText" }, /* @__PURE__ */ React70.createElement(ArrowIcon, { size: 10, direction: isExpanded ? "down" : "right" }))
+  ), /* @__PURE__ */ React70.createElement(FunTxSummaryCollapsibleBox, { isExpanded }, /* @__PURE__ */ React70.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Deposit address" }), /* @__PURE__ */ React70.createElement(
     Box,
     {
       display: "flex",
@@ -8235,7 +8424,7 @@ function OrderDetail({
       alignItems: "center",
       gap: "4"
     },
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       Box,
       {
         fontFamily: "body",
@@ -8243,7 +8432,7 @@ function OrderDetail({
         fontWeight: "medium",
         color: "primaryText"
       },
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(
         ChainLineItem,
         {
           chainId: Number(checkoutHistoryItem.fromChainId),
@@ -8253,7 +8442,7 @@ function OrderDetail({
         }
       )
     ),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       Text,
       {
         size: "12",
@@ -8264,13 +8453,13 @@ function OrderDetail({
       " ",
       formatAddress(checkoutHistoryItem.depositAddr)
     ),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       FunRedirectButton,
       {
         to: `${fromExplorerInfo.url}/address/${checkoutHistoryItem.depositAddr}`
       }
     )
-  )), isCompleted ? /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Destination address" }), /* @__PURE__ */ React69.createElement(
+  )), isCompleted ? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Destination address" }), /* @__PURE__ */ React70.createElement(
     Box,
     {
       display: "flex",
@@ -8278,7 +8467,7 @@ function OrderDetail({
       alignItems: "center",
       gap: "4"
     },
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       Box,
       {
         fontFamily: "body",
@@ -8286,7 +8475,7 @@ function OrderDetail({
         fontWeight: "medium",
         color: "primaryText"
       },
-      /* @__PURE__ */ React69.createElement(
+      /* @__PURE__ */ React70.createElement(
         ChainLineItem,
         {
           chainId: Number(checkoutHistoryItem.toChainId),
@@ -8296,7 +8485,7 @@ function OrderDetail({
         }
       )
     ),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       Text,
       {
         size: "12",
@@ -8307,13 +8496,13 @@ function OrderDetail({
       " ",
       formatAddress(checkoutHistoryItem.recipientAddr)
     ),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       FunRedirectButton,
       {
         to: `${toExplorerInfo.url}/address/${checkoutHistoryItem.recipientAddr}`
       }
     )
-  ))) : null), /* @__PURE__ */ React69.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(FunTxSummaryLineItemKeyText, { text: "Order submitted" }), /* @__PURE__ */ React69.createElement(
+  ))) : null), /* @__PURE__ */ React70.createElement(FunTxSummaryBox, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(FunTxSummaryLineItemKeyText, { text: "Order submitted" }), /* @__PURE__ */ React70.createElement(
     Text,
     {
       color: "primaryText",
@@ -8326,12 +8515,12 @@ function OrderDetail({
       year: "none",
       month: "short"
     })
-  )), /* @__PURE__ */ React69.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React69.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React69.createElement(
+  )), /* @__PURE__ */ React70.createElement(Box, { className: Divider, borderColor: "hoverState" }), /* @__PURE__ */ React70.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React70.createElement(
     FunTxSummaryLineItemKeyText,
     {
       text: isError ? "Order failed" : isExpired ? "Order expired" : isProcessing ? "Order delivery" : "Order filled"
     }
-  ), /* @__PURE__ */ React69.createElement(
+  ), /* @__PURE__ */ React70.createElement(
     Text,
     {
       color: "primaryText",
@@ -8358,27 +8547,27 @@ function OrderDetail({
 }
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutStatus.tsx
-import React70, { useMemo as useMemo12 } from "react";
+import React71, { useMemo as useMemo13 } from "react";
 function FunCheckoutStatus({
   checkoutHistoryItem
 }) {
   const { isCompleted, isFailed } = useCheckoutStateBooleans(
     checkoutHistoryItem.state
   );
-  return /* @__PURE__ */ React70.createElement(Box, { display: "flex", justifyContent: "center" }, isCompleted ? /* @__PURE__ */ React70.createElement(CompletedStatusIcon, { size: 74 }) : isFailed ? /* @__PURE__ */ React70.createElement(FailedStatusIcon, { size: 74 }) : /* @__PURE__ */ React70.createElement(PendingStatus, { checkoutHistoryItem }));
+  return /* @__PURE__ */ React71.createElement(Box, { display: "flex", justifyContent: "center" }, isCompleted ? /* @__PURE__ */ React71.createElement(CompletedStatusIcon, { size: 74 }) : isFailed ? /* @__PURE__ */ React71.createElement(FailedStatusIcon, { size: 74 }) : /* @__PURE__ */ React71.createElement(PendingStatus, { checkoutHistoryItem }));
 }
 function PendingStatus({ checkoutHistoryItem }) {
   const checkoutItem = checkoutHistoryItem.clientMetadata;
   const totalSeconds = Math.ceil(
     (checkoutItem?.latestQuote?.finalTimeEstimationMs || 0) / 1e3
   );
-  const estimatedEndTimeInfo = useMemo12(() => {
+  const estimatedEndTimeInfo = useMemo13(() => {
     return getEstimateEndTimeInfo(
       checkoutHistoryItem.createdTimeMs,
       checkoutItem
     );
   }, [checkoutItem, checkoutHistoryItem.createdTimeMs]);
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     FunCountdown,
     {
       strokeWidth: 3,
@@ -8388,7 +8577,7 @@ function PendingStatus({ checkoutHistoryItem }) {
       ),
       countdownSeconds: totalSeconds
     },
-    (remainingSeconds) => /* @__PURE__ */ React70.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ React70.createElement(Text, { size: "10", color: "tertiaryText" }, remainingSeconds > 0 ? "Processing" : "Order delayed"), /* @__PURE__ */ React70.createElement(Text, { size: "13", color: "primaryText" }, formatSecondsToCountdownForm(remainingSeconds)))
+    (remainingSeconds) => /* @__PURE__ */ React71.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "center" }, /* @__PURE__ */ React71.createElement(Text, { size: "10", color: "tertiaryText" }, remainingSeconds > 0 ? "Processing" : "Order delayed"), /* @__PURE__ */ React71.createElement(Text, { size: "13", color: "primaryText" }, formatSecondsToCountdownForm(remainingSeconds)))
   );
 }
 
@@ -8403,7 +8592,7 @@ function FunCheckoutHistoryDetail({
   useCheckoutHistoryListener(isProcessing, checkoutHistoryInfo.depositAddr);
   useWalletAssetsListener(isProcessing || isCompleted);
   const GetHelpButton = ({ text = "Get Help \u{1F449}" }) => {
-    return /* @__PURE__ */ React71.createElement(
+    return /* @__PURE__ */ React72.createElement(
       FunLinkButton,
       {
         hasPadding: false,
@@ -8414,15 +8603,15 @@ function FunCheckoutHistoryDetail({
       }
     );
   };
-  return /* @__PURE__ */ React71.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React71.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React71.createElement(FunCheckoutStatus, { checkoutHistoryItem: checkoutHistoryInfo }), /* @__PURE__ */ React71.createElement(FunTxSummaryHistory, { checkoutHistoryItem: checkoutHistoryInfo })), isFailed ? /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React72.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React72.createElement(FunCheckoutStatus, { checkoutHistoryItem: checkoutHistoryInfo }), /* @__PURE__ */ React72.createElement(FunTxSummaryHistory, { checkoutHistoryItem: checkoutHistoryInfo })), isFailed ? /* @__PURE__ */ React72.createElement(
     FunCallToAction,
     {
       badgeText: "Notice",
       badgeColor: "buttonTextWarning",
       badgeBackground: "standby"
     },
-    /* @__PURE__ */ React71.createElement(Text, { size: "13", weight: "medium", color: "primaryText" }, "A problem occurred processing your purchase. We are actively working to resolve this."),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(Text, { size: "13", weight: "medium", color: "primaryText" }, "A problem occurred processing your purchase. We are actively working to resolve this."),
+    /* @__PURE__ */ React72.createElement(
       FunLinkButton,
       {
         hasPadding: false,
@@ -8434,22 +8623,22 @@ function FunCheckoutHistoryDetail({
         onClick: () => setCurrentPage("help" /* HELP */)
       }
     )
-  ) : null, /* @__PURE__ */ React71.createElement(FunDivider, null), /* @__PURE__ */ React71.createElement(OrderDetail, { checkoutHistoryItem: checkoutHistoryInfo }), !isFailed ? /* @__PURE__ */ React71.createElement(
+  ) : null, /* @__PURE__ */ React72.createElement(FunDivider, null), /* @__PURE__ */ React72.createElement(OrderDetail, { checkoutHistoryItem: checkoutHistoryInfo }), !isFailed ? /* @__PURE__ */ React72.createElement(
     FunAlert,
     {
       icon: null,
-      description: /* @__PURE__ */ React71.createElement(Text, { size: "10", color: "secondaryText" }, "Need help? ", /* @__PURE__ */ React71.createElement(GetHelpButton, { text: "Contact us" }))
+      description: /* @__PURE__ */ React72.createElement(Text, { size: "10", color: "secondaryText" }, "Need help? ", /* @__PURE__ */ React72.createElement(GetHelpButton, { text: "Contact us" }))
     }
   ) : null);
 }
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryHelp.tsx
 import { sendSupportMessage } from "@funkit/api-base";
-import React78, { useEffect as useEffect23, useMemo as useMemo14, useRef as useRef11, useState as useState21 } from "react";
+import React79, { useEffect as useEffect23, useMemo as useMemo15, useRef as useRef11, useState as useState23 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/FunInput/FunTextAreaInput.tsx
-import React72 from "react";
+import React73 from "react";
 function FunTextAreaInput({
   placeholder,
   value,
@@ -8463,9 +8652,10 @@ function FunTextAreaInput({
     type: "text"
   },
   error,
-  overrideBorderWidth
+  overrideBorderWidth,
+  overrideBackground
 }) {
-  const [focused, setFocused] = React72.useState(false);
+  const [focused, setFocused] = React73.useState(false);
   const onFocus = () => setFocused(true);
   const onBlur = () => setFocused(false);
   const getBorderColor = () => {
@@ -8477,7 +8667,7 @@ function FunTextAreaInput({
       hover: "inputBorderHover"
     };
   };
-  return /* @__PURE__ */ React72.createElement(Box, { color: "primaryText", display: "flex", flexDirection: "column", gap: "8" }, label && /* @__PURE__ */ React72.createElement(Text, { color: textColor, size: "10", weight: "medium" }, label), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(Box, { color: "primaryText", display: "flex", flexDirection: "column", gap: "8" }, label && /* @__PURE__ */ React73.createElement(Text, { color: textColor, size: "10", weight: "medium" }, label), /* @__PURE__ */ React73.createElement(
     Box,
     {
       borderRadius: "connectButton",
@@ -8491,9 +8681,10 @@ function FunTextAreaInput({
       borderColor: getBorderColor(),
       borderWidth: overrideBorderWidth ?? "1",
       borderStyle: "solid",
-      padding: "4"
+      padding: "4",
+      background: overrideBackground || "inputBackground"
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "textarea",
       {
         type: inputProps?.type || "text",
@@ -8521,11 +8712,11 @@ function FunTextAreaInput({
         }
       }
     )
-  ), error && typeof error === "string" && /* @__PURE__ */ React72.createElement(Text, { color: "error", size: "14", weight: "medium" }, error));
+  ), error && typeof error === "string" && /* @__PURE__ */ React73.createElement(Text, { color: "error", size: "14", weight: "medium" }, error));
 }
 
 // src/components/FunNotification/FunNotification.tsx
-import React73 from "react";
+import React74 from "react";
 function FunNotification({
   type = "default",
   description,
@@ -8537,7 +8728,7 @@ function FunNotification({
 }) {
   const isVisible = isVisibleProps ?? true;
   const isPermanent = isVisibleProps == void 0;
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     Box,
     {
       display: "flex",
@@ -8547,7 +8738,7 @@ function FunNotification({
       marginBottom: isPermanent ? void 0 : isVisible ? "8" : "0",
       ...containerProps
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement(
       Box,
       {
         display: "flex",
@@ -8556,7 +8747,7 @@ function FunNotification({
         width: "full",
         gap: "2"
       },
-      /* @__PURE__ */ React73.createElement(
+      /* @__PURE__ */ React74.createElement(
         Text,
         {
           size: "10",
@@ -8567,17 +8758,17 @@ function FunNotification({
         },
         description
       ),
-      actionText ? /* @__PURE__ */ React73.createElement(FunButton, { type: "secondary", title: actionText, onClick: onAction }) : null
+      actionText ? /* @__PURE__ */ React74.createElement(FunButton, { type: "secondary", title: actionText, onClick: onAction }) : null
     )
   );
 }
 
 // src/components/FunSelect/FunSelect.tsx
-import React76, { useMemo as useMemo13, useState as useState20 } from "react";
+import React77, { useMemo as useMemo14, useState as useState22 } from "react";
 
 // src/components/Icons/SelectDropdownIcon.tsx
-import React74 from "react";
-var SelectDropdownIcon = () => /* @__PURE__ */ React74.createElement(
+import React75 from "react";
+var SelectDropdownIcon = () => /* @__PURE__ */ React75.createElement(
   "svg",
   {
     width: "7",
@@ -8586,8 +8777,8 @@ var SelectDropdownIcon = () => /* @__PURE__ */ React74.createElement(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React74.createElement("path", { d: "M3.94444 0L6.59063 3.75H1.29825L3.94444 0Z", fill: "currentColor" }),
-  /* @__PURE__ */ React74.createElement(
+  /* @__PURE__ */ React75.createElement("path", { d: "M3.94444 0L6.59063 3.75H1.29825L3.94444 0Z", fill: "currentColor" }),
+  /* @__PURE__ */ React75.createElement(
     "path",
     {
       d: "M3.94444 10L6.59063 6.25H1.29825L3.94444 10Z",
@@ -8597,7 +8788,7 @@ var SelectDropdownIcon = () => /* @__PURE__ */ React74.createElement(
 );
 
 // src/components/FunSelect/FunClickOutside.tsx
-import React75 from "react";
+import React76 from "react";
 import { useEffect as useEffect22, useRef as useRef10 } from "react";
 function FunClickOutside({
   children,
@@ -8624,7 +8815,7 @@ function FunClickOutside({
       onClick?.();
     }
   };
-  return /* @__PURE__ */ React75.createElement("div", { ref: wrapperRef }, children);
+  return /* @__PURE__ */ React76.createElement("div", { ref: wrapperRef }, children);
 }
 
 // src/components/FunSelect/FunSelect.tsx
@@ -8637,9 +8828,9 @@ var FunSelect = ({
   if (hasDuplicateValues(options)) {
     throw new Error("Duplicate values detected in FunSelect options.");
   }
-  const [isDropdownOpen, setIsDropdownOpen] = useState20(false);
-  const [selectedValue, setSelectedValue] = useState20(initValue);
-  const selectedLabel = useMemo13(
+  const [isDropdownOpen, setIsDropdownOpen] = useState22(false);
+  const [selectedValue, setSelectedValue] = useState22(initValue);
+  const selectedLabel = useMemo14(
     () => options.find(({ value }) => value === selectedValue)?.label,
     [options, selectedValue]
   );
@@ -8648,7 +8839,7 @@ var FunSelect = ({
     onChange(newValue);
     setIsDropdownOpen(false);
   };
-  return /* @__PURE__ */ React76.createElement(Box, { position: "relative", fontFamily: "body", width: "full" }, /* @__PURE__ */ React76.createElement(FunClickOutside, { onClick: () => setIsDropdownOpen(false) }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(Box, { position: "relative", fontFamily: "body", width: "full" }, /* @__PURE__ */ React77.createElement(FunClickOutside, { onClick: () => setIsDropdownOpen(false) }, /* @__PURE__ */ React77.createElement(
     Text,
     {
       color: "secondaryText",
@@ -8657,7 +8848,7 @@ var FunSelect = ({
       style: { paddingBottom: 8 }
     },
     label
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     FunSelectEntry,
     {
       activeLabel: selectedLabel,
@@ -8666,7 +8857,7 @@ var FunSelect = ({
         setIsDropdownOpen(!isDropdownOpen);
       }
     }
-  ), /* @__PURE__ */ React76.createElement(Box, { position: "absolute", style: { zIndex: 5, minWidth: 200 } }, /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React77.createElement(Box, { position: "absolute", style: { zIndex: 5, minWidth: 200 } }, /* @__PURE__ */ React77.createElement(
     FunSelectDropdown,
     {
       handleSelect,
@@ -8685,7 +8876,7 @@ var FunSelectEntry = ({
   onClick,
   isDropdownOpen
 }) => {
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     Box,
     {
       display: "flex",
@@ -8706,7 +8897,7 @@ var FunSelectEntry = ({
         hover: isDropdownOpen ? void 0 : "primaryText"
       }
     },
-    activeLabel && /* @__PURE__ */ React76.createElement(
+    activeLabel && /* @__PURE__ */ React77.createElement(
       Text,
       {
         color: "secondaryText",
@@ -8716,7 +8907,7 @@ var FunSelectEntry = ({
       },
       activeLabel
     ),
-    /* @__PURE__ */ React76.createElement(SelectDropdownIcon, null)
+    /* @__PURE__ */ React77.createElement(SelectDropdownIcon, null)
   );
 };
 var FunSelectDropdown = ({
@@ -8728,9 +8919,9 @@ var FunSelectDropdown = ({
 }) => {
   if (!isDropdownOpen) return null;
   if (!options.length) {
-    return /* @__PURE__ */ React76.createElement(Text, { size: "14", color: "secondaryText", weight: "medium" }, "No options found.");
+    return /* @__PURE__ */ React77.createElement(Text, { size: "14", color: "secondaryText", weight: "medium" }, "No options found.");
   }
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     Box,
     {
       borderRadius: "4",
@@ -8744,7 +8935,7 @@ var FunSelectDropdown = ({
       flexDirection: "column",
       gap: "0"
     },
-    options.map((optionItem) => /* @__PURE__ */ React76.createElement(
+    options.map((optionItem) => /* @__PURE__ */ React77.createElement(
       FunSelectOptionItem,
       {
         key: optionItem.value,
@@ -8762,7 +8953,7 @@ var FunSelectOptionItem = ({
   isDisabled = false,
   onClick
 }) => {
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     Box,
     {
       onClick: isDisabled ? () => void 0 : () => onClick(),
@@ -8778,7 +8969,7 @@ var FunSelectOptionItem = ({
       display: "flex",
       paddingY: "8"
     },
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       Box,
       {
         display: "flex",
@@ -8786,15 +8977,15 @@ var FunSelectOptionItem = ({
         alignItems: "center",
         width: "40"
       },
-      isActive && /* @__PURE__ */ React76.createElement(CheckIcon, null)
+      isActive && /* @__PURE__ */ React77.createElement(CheckIcon, null)
     ),
-    /* @__PURE__ */ React76.createElement(Text, { color: "primaryText", weight: "medium", size: "13" }, label)
+    /* @__PURE__ */ React77.createElement(Text, { color: "primaryText", weight: "medium", size: "13" }, label)
   );
 };
 
 // src/components/Icons/SuccessIcon.tsx
-import React77 from "react";
-var SuccessIcon = () => /* @__PURE__ */ React77.createElement(
+import React78 from "react";
+var SuccessIcon = () => /* @__PURE__ */ React78.createElement(
   "svg",
   {
     width: "50",
@@ -8803,7 +8994,7 @@ var SuccessIcon = () => /* @__PURE__ */ React77.createElement(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   },
-  /* @__PURE__ */ React77.createElement(
+  /* @__PURE__ */ React78.createElement(
     "path",
     {
       d: "M24.9766 49.2891C21.6641 49.2891 18.5469 48.6562 15.625 47.3906C12.7031 46.1406 10.125 44.3984 7.89062 42.1641C5.67188 39.9297 3.92969 37.3516 2.66406 34.4297C1.39844 31.5078 0.765625 28.3906 0.765625 25.0781C0.765625 21.7656 1.39844 18.6484 2.66406 15.7266C3.92969 12.8047 5.67188 10.2344 7.89062 8.01562C10.125 5.78125 12.6953 4.03125 15.6016 2.76562C18.5234 1.5 21.6406 0.867188 24.9531 0.867188C28.2812 0.867188 31.4062 1.5 34.3281 2.76562C37.25 4.03125 39.8281 5.78125 42.0625 8.01562C44.2969 10.2344 46.0469 12.8047 47.3125 15.7266C48.5781 18.6484 49.2109 21.7656 49.2109 25.0781C49.2109 28.3906 48.5781 31.5078 47.3125 34.4297C46.0469 37.3516 44.2969 39.9297 42.0625 42.1641C39.8281 44.3984 37.25 46.1406 34.3281 47.3906C31.4062 48.6562 28.2891 49.2891 24.9766 49.2891ZM22.375 36.6328C22.8125 36.6328 23.2109 36.5312 23.5703 36.3281C23.9453 36.125 24.2734 35.8203 24.5547 35.4141L35.5234 18.3047C35.6797 18.0547 35.8203 17.7891 35.9453 17.5078C36.0703 17.2109 36.1328 16.9297 36.1328 16.6641C36.1328 16.0547 35.8984 15.5625 35.4297 15.1875C34.9766 14.8125 34.4609 14.625 33.8828 14.625C33.1172 14.625 32.4844 15.0312 31.9844 15.8438L22.2812 31.3594L17.7812 25.6406C17.4688 25.25 17.1641 24.9766 16.8672 24.8203C16.5703 24.6641 16.2344 24.5859 15.8594 24.5859C15.2656 24.5859 14.7578 24.8047 14.3359 25.2422C13.9297 25.6641 13.7266 26.1719 13.7266 26.7656C13.7266 27.0625 13.7812 27.3516 13.8906 27.6328C14 27.9141 14.1562 28.1875 14.3594 28.4531L20.1016 35.4375C20.4453 35.8594 20.7969 36.1641 21.1562 36.3516C21.5156 36.5391 21.9219 36.6328 22.375 36.6328Z",
@@ -8838,18 +9029,18 @@ function FunCheckoutHistoryHelp({
 }) {
   const { appName, apiKey } = useFunkitConfig();
   const { userInfo } = useGeneralWallet();
-  const [isSubmitting, setIsSubmitting] = useState21(false);
-  const [emailInput, setEmailInput] = useState21("");
-  const [subjectInput, setSubjectInput] = useState21("");
-  const [resolutionInput, setResolutionInput] = useState21(
+  const [isSubmitting, setIsSubmitting] = useState23(false);
+  const [emailInput, setEmailInput] = useState23("");
+  const [subjectInput, setSubjectInput] = useState23("");
+  const [resolutionInput, setResolutionInput] = useState23(
     RESOLUTION_OPTIONS[0].value
   );
-  const [descriptionInput, setDescriptionInput] = useState21("");
-  const [errorMessage, setErrorMessage] = useState21();
-  const isEmailInputValid = useMemo14(() => {
+  const [descriptionInput, setDescriptionInput] = useState23("");
+  const [errorMessage, setErrorMessage] = useState23();
+  const isEmailInputValid = useMemo15(() => {
     return validateEmailString(emailInput);
   }, [emailInput]);
-  const [processStage, setProcessStage] = useState21(
+  const [processStage, setProcessStage] = useState23(
     0 /* INPUT */
   );
   const wrapperRef = useRef11(null);
@@ -8933,17 +9124,17 @@ function FunCheckoutHistoryHelp({
     }
   };
   if (processStage === 1 /* SUCCESS */) {
-    return /* @__PURE__ */ React78.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "16" }, /* @__PURE__ */ React78.createElement(Box, { paddingY: "12", paddingX: "24" }, /* @__PURE__ */ React78.createElement(
+    return /* @__PURE__ */ React79.createElement(Box, { display: "flex", flexDirection: "column", gap: "24", paddingTop: "16" }, /* @__PURE__ */ React79.createElement(Box, { paddingY: "12", paddingX: "24" }, /* @__PURE__ */ React79.createElement(
       FunMessage,
       {
         title: "Request sent",
         description: "Our team has received your request and will be in touch shortly. We appreciate your patience.",
-        icon: /* @__PURE__ */ React78.createElement(SuccessIcon, null)
+        icon: /* @__PURE__ */ React79.createElement(SuccessIcon, null)
       }
-    )), /* @__PURE__ */ React78.createElement(FunButton, { title: "Close", onClick: onBackFromHelpPage }));
+    )), /* @__PURE__ */ React79.createElement(FunButton, { title: "Close", onClick: onBackFromHelpPage }));
   }
   const bottomSectionRef = document.getElementById(HELP_SCREEN_BOTTOM_BAR_ID);
-  return /* @__PURE__ */ React78.createElement(Box, { ref: wrapperRef }, /* @__PURE__ */ React78.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React78.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, /* @__PURE__ */ React78.createElement(Text, { color: "primaryText", size: "20", weight: "medium" }, "Tell us more"), /* @__PURE__ */ React78.createElement(Text, { color: "secondaryText", size: "10" }, "If you're experiencing an issue or have a question, please fill out the form below and our support team will get back to you as soon as possible.")), /* @__PURE__ */ React78.createElement(Box, { display: "flex", flexDirection: "column", gap: "12", position: "relative" }, /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(Box, { ref: wrapperRef }, /* @__PURE__ */ React79.createElement(Box, { display: "flex", flexDirection: "column", gap: "24" }, /* @__PURE__ */ React79.createElement(Box, { display: "flex", flexDirection: "column", gap: "10" }, /* @__PURE__ */ React79.createElement(Text, { color: "primaryText", size: "20", weight: "medium" }, "Tell us more"), /* @__PURE__ */ React79.createElement(Text, { color: "secondaryText", size: "10" }, "If you're experiencing an issue or have a question, please fill out the form below and our support team will get back to you as soon as possible.")), /* @__PURE__ */ React79.createElement(Box, { display: "flex", flexDirection: "column", gap: "12", position: "relative" }, /* @__PURE__ */ React79.createElement(
     FunInput,
     {
       label: "Email*",
@@ -8952,7 +9143,7 @@ function FunCheckoutHistoryHelp({
       value: emailInput,
       onChange: (e) => setEmailInput(e?.target?.value)
     }
-  ), /* @__PURE__ */ React78.createElement(
+  ), /* @__PURE__ */ React79.createElement(
     FunInput,
     {
       label: "Subject*",
@@ -8961,7 +9152,7 @@ function FunCheckoutHistoryHelp({
       value: subjectInput,
       onChange: (e) => setSubjectInput(e?.target?.value)
     }
-  ), /* @__PURE__ */ React78.createElement(
+  ), /* @__PURE__ */ React79.createElement(
     FunTextAreaInput,
     {
       label: "Description*",
@@ -8970,7 +9161,7 @@ function FunCheckoutHistoryHelp({
       value: descriptionInput,
       onChange: (e) => setDescriptionInput(e?.target?.value)
     }
-  ), /* @__PURE__ */ React78.createElement(
+  ), /* @__PURE__ */ React79.createElement(
     FunSelect,
     {
       label: "Resolution preference*",
@@ -8979,7 +9170,7 @@ function FunCheckoutHistoryHelp({
       onChange: setResolutionInput
     }
   ))), bottomSectionRef && createPortal2(
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       Dialog.BottomBar,
       {
         actionButtonProps: {
@@ -8987,7 +9178,7 @@ function FunCheckoutHistoryHelp({
           onClick: onSubmitIssue,
           isDisabled: isSubmitting || !subjectInput || !descriptionInput || !emailInput || !isEmailInputValid || !resolutionInput
         },
-        topSection: /* @__PURE__ */ React78.createElement(
+        topSection: /* @__PURE__ */ React79.createElement(
           FunNotification,
           {
             description: errorMessage,
@@ -9003,6 +9194,7 @@ function FunCheckoutHistoryHelp({
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryContent.tsx
 var HELP_SCREEN_BOTTOM_BAR_ID = "help-screen-bottom-section";
+var DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE = "Your Purchase";
 function FunCheckoutHistoryContent({
   depositAddress,
   currentPage,
@@ -9010,7 +9202,7 @@ function FunCheckoutHistoryContent({
   onBackFromHelpPage
 }) {
   const { checkoutHistoryInfo, isLoading } = useFunkitPostCheckoutInternal(depositAddress);
-  return /* @__PURE__ */ React79.createElement(Box, null, isLoading || !checkoutHistoryInfo ? /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement(Box, null, isLoading || !checkoutHistoryInfo ? /* @__PURE__ */ React80.createElement(
     Box,
     {
       width: "full",
@@ -9021,14 +9213,14 @@ function FunCheckoutHistoryContent({
       justifyContent: "center",
       color: "primaryText"
     },
-    /* @__PURE__ */ React79.createElement(SpinnerIcon, null)
-  ) : checkoutHistoryInfo ? currentPage === "detail" /* DETAIL */ ? /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React80.createElement(SpinnerIcon, null)
+  ) : checkoutHistoryInfo ? currentPage === "detail" /* DETAIL */ ? /* @__PURE__ */ React80.createElement(
     FunCheckoutHistoryDetail,
     {
       checkoutHistoryInfo,
       setCurrentPage
     }
-  ) : currentPage === "help" /* HELP */ ? /* @__PURE__ */ React79.createElement(
+  ) : currentPage === "help" /* HELP */ ? /* @__PURE__ */ React80.createElement(
     FunCheckoutHistoryHelp,
     {
       checkoutHistoryInfo,
@@ -9039,144 +9231,11 @@ function FunCheckoutHistoryContent({
 
 // src/components/ProfileDetails/FunProfileViews/ActivityHistory/ActivityHistory.tsx
 import { CheckoutState as CheckoutState5 } from "@funkit/api-base";
-import React84, { useEffect as useEffect24, useMemo as useMemo17, useState as useState22 } from "react";
+import React84, { useEffect as useEffect24, useMemo as useMemo17, useState as useState24 } from "react";
 
 // src/components/FunNotification/FunCheckoutNotification.tsx
 import React83, { useMemo as useMemo16 } from "react";
 
-// src/components/FunAssetAvatar/FunAssetAvatar.tsx
-import React80, { useMemo as useMemo15 } from "react";
-
-// src/consts/assets.ts
-var ASSET_LOGO_SRCS = {
-  ETH: "https://www.iconarchive.com/download/i109534/cjdowner/cryptocurrency-flat/Ethereum-ETH.1024.png",
-  MATIC: "https://altcoinsbox.com/wp-content/uploads/2023/03/matic-logo.webp",
-  ARB: "https://cryptologos.cc/logos/arbitrum-arb-logo.png",
-  LDO: "https://cryptologos.cc/logos/lido-dao-ldo-logo.png",
-  AARBUSDCN: "https://assets.coingecko.com/coins/images/14318/large/aUSDC.e260d492.png?1696514006",
-  CRV: "https://cryptologos.cc/logos/curve-dao-token-crv-logo.png",
-  USDC: "https://cryptologos.cc/logos/usd-coin-usdc-logo.png",
-  USDT: "https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/512/Tether-USDT-icon.png",
-  DAI: "https://cryptologos.cc/logos/multi-collateral-dai-dai-logo.png",
-  WBTC: "https://cryptologos.cc/logos/wrapped-bitcoin-wbtc-logo.png",
-  GRT: "https://cryptologos.cc/logos/the-graph-grt-logo.png",
-  SHIB: "https://cryptologos.cc/logos/shiba-inu-shib-logo.png",
-  QNT: "https://cryptologos.cc/logos/quant-qnt-logo.png",
-  AAVE: "https://cryptologos.cc/logos/aave-aave-logo.png",
-  UNI: "https://cryptologos.cc/logos/uniswap-uni-logo.png",
-  SNX: "https://cryptologos.cc/logos/synthetix-snx-logo.png",
-  CRO: "https://cryptologos.cc/logos/cronos-cro-logo.png",
-  RNDR: "https://altcoinsbox.com/wp-content/uploads/2023/03/render-token-logo.webp",
-  SAND: "https://cdn3d.iconscout.com/3d/premium/thumb/the-sandbox-sand-cryptocurrency-5108582-4263919.png?f=webp",
-  APE: "https://cryptologos.cc/logos/apecoin-ape-ape-logo.png",
-  IMX: "https://cryptologos.cc/logos/immutable-x-imx-logo.png",
-  INJ: "https://cryptologos.cc/logos/injective-inj-logo.png",
-  MKR: "https://cryptologos.cc/logos/maker-mkr-logo.png",
-  LINK: "https://cryptologos.cc/logos/chainlink-link-logo.png",
-  PYUSD: "https://www.paypalobjects.com/devdoc/coin-PYUSD%20220x219.png",
-  DEGEN: "https://assets.coingecko.com/coins/images/34515/large/android-chrome-512x512.png?1706198225",
-  AERO: "https://assets.coingecko.com/coins/images/31745/large/token.png?1696530564",
-  APOLWMATIC: "https://polygonscan.com/token/images/aave_wmatic.png",
-  MFER: "https://assets.coingecko.com/coins/images/36550/large/mfercoin-logo.png?1711876821",
-  $MFER: "https://assets.coingecko.com/coins/images/36550/large/mfercoin-logo.png?1711876821",
-  ROOST: "https://assets.coingecko.com/coins/images/36458/large/roost.jpeg?1711493580",
-  BSHIB: "https://assets.coingecko.com/coins/images/36092/large/logocg.png?1710478223",
-  BRETT: "https://assets.coingecko.com/coins/images/35529/large/1000050750.png?1709031995",
-  BLERF: "https://assets.coingecko.com/coins/images/36473/large/BLERF.png?1711527025",
-  BENTO: "https://assets.coingecko.com/coins/images/37138/large/logo-bento-200-200.png?1713419221",
-  CBETH: "https://assets.coingecko.com/coins/images/27008/large/cbeth.png?1709186989",
-  PENDLE: "https://assets.coingecko.com/coins/images/15069/large/Pendle_Logo_Normal-03.png?1696514728",
-  WEETH: "https://assets.coingecko.com/coins/images/33033/large/weETH.png?1701438396",
-  GMX: "https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/arbitrum/assets/0xfc5A1A6EB076a2C7aD06eD22C90d7E710E35ad0a/logo.png",
-  TYBG: "https://assets.coingecko.com/coins/images/34563/large/tybg.png?1705400778",
-  LUCK: "https://s3.us-west-2.amazonaws.com/sdk-cdn.fun.xyz/images/luck.jpg",
-  WSTETH: "https://assets.coingecko.com/coins/images/18834/large/wstETH.png?1696518295",
-  WETH: "https://www.cryptocompare.com/media/38553079/weth.png",
-  MNT: "https://img.cryptorank.io/coins/mantle1681720399218.png",
-  USDE: "https://holder.io/wp-content/uploads/coins/3/usde--3-74923.png"
-};
-
-// src/components/FunAssetAvatar/FunAssetAvatar.css.ts
-var assetContainerStyle = "uwrdc21";
-var chainContainerStyle = "uwrdc23 _1rsrm2fju _1rsrm2fu0 _1rsrm2f11 _1rsrm2fi _1rsrm2fx";
-var containerStyle = "uwrdc20";
-
-// src/components/FunAssetAvatar/FunAssetAvatar.tsx
-var fallbackAssetSrc = "https://static1.squarespace.com/static/54735678e4b025d4e207e7b3/t/59605876cd0f689a4a30e51d/1499486328449/Dollar_Circle.png";
-function FunAssetAvatar({
-  assetSrc,
-  assetTicker,
-  assetName,
-  assetIconSize = "20",
-  chainId,
-  prioritizeDefaults = true,
-  hideIfUnknown = false
-}) {
-  const chainMetadata = chainMetadataById[parseInt((chainId || "").toString())] || null;
-  const finalAssetSrc = useMemo15(() => {
-    const normalizedTicker = assetTicker?.toUpperCase() || "";
-    const defaultSrc = ASSET_LOGO_SRCS?.[normalizedTicker];
-    if (prioritizeDefaults) {
-      return defaultSrc || assetSrc;
-    } else {
-      return assetSrc || defaultSrc;
-    }
-  }, [assetSrc, assetTicker, prioritizeDefaults]);
-  const showChainIcon = isNotNullish(chainMetadata);
-  const chainIconSize = parseInt(assetIconSize) / 2;
-  return hideIfUnknown && !finalAssetSrc ? null : /* @__PURE__ */ React80.createElement(Box, { id: "container", alignSelf: "center" }, /* @__PURE__ */ React80.createElement(
-    Box,
-    {
-      width: assetIconSize,
-      height: assetIconSize,
-      className: containerStyle
-    },
-    /* @__PURE__ */ React80.createElement(
-      Box,
-      {
-        width: assetIconSize,
-        height: assetIconSize,
-        className: assetContainerStyle
-      },
-      /* @__PURE__ */ React80.createElement(
-        AsyncImage,
-        {
-          alt: assetName,
-          src: finalAssetSrc,
-          fallbackSrc: fallbackAssetSrc,
-          background: void 0,
-          borderColor: "generalBorderDim",
-          borderRadius: "full",
-          height: assetIconSize,
-          width: assetIconSize,
-          testId: `fun-asset-${assetTicker}-icon`,
-          useAsImage: true
-        }
-      )
-    ),
-    showChainIcon ? /* @__PURE__ */ React80.createElement(
-      Box,
-      {
-        width: "half",
-        height: "half",
-        className: chainContainerStyle
-      },
-      /* @__PURE__ */ React80.createElement(
-        AsyncImage,
-        {
-          alt: chainMetadata.name,
-          src: chainMetadata.iconUrl || "",
-          background: chainMetadata.iconBackground,
-          borderRadius: "1",
-          height: chainIconSize - 2,
-          width: chainIconSize - 2,
-          testId: `fun-asset-chain-${chainId}-icon`
-        }
-      )
-    ) : null
-  ));
-}
-
 // src/components/FunButton/FunViewTxButton.tsx
 import React81 from "react";
 function FunViewTxButton({
@@ -9410,7 +9469,7 @@ function ActivityHistory({
   onSelectActivity
 }) {
   const { returnViewPresets } = useActivityTraversal();
-  const [activeTab, setActiveTab] = useState22(
+  const [activeTab, setActiveTab] = useState24(
     returnViewPresets?.activeTab ?? "All" /* ALL */
   );
   const triggerScrollToTop = (scrollPosition) => {
@@ -9499,7 +9558,7 @@ function ActivityHistory({
 
 // src/components/ProfileDetails/FunProfileViews/Home/index.tsx
 import clsx8 from "clsx";
-import React93, { useMemo as useMemo18, useRef as useRef12, useState as useState24 } from "react";
+import React93, { useMemo as useMemo18, useRef as useRef12, useState as useState26 } from "react";
 import { Virtuoso } from "react-virtuoso";
 import { useAccount as useAccount5 } from "wagmi";
 
@@ -9848,7 +9907,7 @@ var HomeCheckoutDisplayRowSkeleton = () => {
 };
 
 // src/components/ProfileDetails/FunProfileViews/Home/HomeTokenDisplayRow.tsx
-import React92, { useState as useState23 } from "react";
+import React92, { useState as useState25 } from "react";
 
 // src/utils/assets.ts
 import {
@@ -10104,7 +10163,7 @@ var HomeTokenBalanceDisplayRow = ({ asset }) => {
     asset.tokenBalance,
     asset.decimals
   );
-  const [hasHover, setHasHover] = useState23(false);
+  const [hasHover, setHasHover] = useState25(false);
   return /* @__PURE__ */ React92.createElement(
     Box,
     {
@@ -10200,7 +10259,7 @@ var ProfileTitleSection = ({
   onLogout,
   onClose
 }) => {
-  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState24(false);
+  const [isDisconnectExpanded, setIsDisconnectExpanded] = useState26(false);
   return /* @__PURE__ */ React93.createElement(
     Box,
     {
@@ -10295,7 +10354,7 @@ function Home({
   useWalletAssetsListener();
   useCheckoutHistoryListener();
   const { userInfo, handleLogout, walletAssets, totalWalletAssetsUsd } = useGeneralWallet();
-  const [selectedView, setSelectedView] = useState24(defaultHomeTab);
+  const [selectedView, setSelectedView] = useState26(defaultHomeTab);
   const { checkoutHistoryList, isCheckoutHistoryInited } = useFunkitAllPostCheckoutsInternal();
   const { returnViewPresets } = useActivityTraversal();
   const checkoutsListRef = useRef12(null);
@@ -10528,13 +10587,11 @@ function Settings() {
 }
 
 // src/components/ProfileDetails/ProfileDetails.tsx
-var ANIMATION_DELAY2 = 150;
 var PROFILE_SIDE_PADDING = "18";
-function ProfileDetails({ onClose }) {
-  const [animateOut, setAnimateOut] = useState25(false);
-  const [view, setView] = useState25(0 /* HOME */);
-  const [selectedHomeTab, setSelectedHomeTab] = useState25(
-    "assets" /* ASSETS */
+function ProfileDetails({ onClose, defaultTab }) {
+  const [view, setView] = useState27(0 /* HOME */);
+  const [selectedHomeTab, setSelectedHomeTab] = useState27(
+    defaultTab ?? "assets" /* ASSETS */
   );
   const {
     onSelectActivity,
@@ -10543,22 +10600,20 @@ function ProfileDetails({ onClose }) {
     returnView,
     resetActivityTraversal
   } = useActivityTraversal();
-  const [singleActivityPage, setSingleActivityPage] = useState25(
+  const historyDetailTitle = useCheckoutModalTitle(
+    selectedPurchaseId || "0x",
+    DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE
+  );
+  const [singleActivityPage, setSingleActivityPage] = useState27(
     selectedPurchaseInitView ?? "detail" /* DETAIL */
   );
-  const resetView = useCallback16(() => {
+  const resetView = useCallback17(() => {
     setView(returnView ?? 0 /* HOME */);
     setSelectedHomeTab("checkouts" /* CHECKOUTS */);
     resetActivityTraversal();
   }, [resetActivityTraversal, returnView]);
-  const animate = useCallback16((callback) => {
-    setAnimateOut(true);
-    setTimeout(() => {
-      callback();
-      setAnimateOut(false);
-    }, ANIMATION_DELAY2);
-  }, []);
-  const onSelectActivityWrapper = useCallback16(
+  const { animateOut, animate } = useAnimatedNavigation(void 0);
+  const onSelectActivityWrapper = useCallback17(
     (activity) => {
       onSelectActivity({
         ...activity,
@@ -10575,7 +10630,7 @@ function ProfileDetails({ onClose }) {
     },
     ["detail" /* DETAIL */]: {
       onBack: () => animate(resetView),
-      title: "Deposit"
+      title: historyDetailTitle
     }
   };
   const dialogTitleMap = {
@@ -10630,7 +10685,7 @@ function ProfileDetails({ onClose }) {
 
 // src/components/AccountModal/AccountModal.tsx
 var TITLE_ID = "fun_account_modal_title";
-function AccountModal({ onClose, open }) {
+function AccountModal({ onClose, open, defaultTab }) {
   const { walletAddress } = useGeneralWallet();
   if (!walletAddress) return null;
   return /* @__PURE__ */ React96.createElement(
@@ -10641,7 +10696,7 @@ function AccountModal({ onClose, open }) {
       titleId: TITLE_ID,
       isSmartCloseable: true
     },
-    /* @__PURE__ */ React96.createElement(ActivityTraversalProvider, null, /* @__PURE__ */ React96.createElement(ProfileDetails, { onClose }))
+    /* @__PURE__ */ React96.createElement(ActivityTraversalProvider, null, /* @__PURE__ */ React96.createElement(ProfileDetails, { onClose, defaultTab }))
   );
 }
 
@@ -10827,8 +10882,7 @@ function FunDevTestModal({ onClose, open }) {
 }
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryModal.tsx
-import React101, { useCallback as useCallback17, useState as useState26 } from "react";
-var ANIMATION_DELAY3 = 150;
+import React101, { useState as useState28 } from "react";
 function FunCheckoutHistoryModal({
   onClose,
   open,
@@ -10840,15 +10894,12 @@ function FunCheckoutHistoryModal({
       "Unable to open checkout history modal without a depositAddress"
     );
   }
-  const [currentPage, setCurrentPage] = useState26(initialPage);
-  const [animateOut, setAnimateOut] = useState26(false);
-  const navigateTo = useCallback17((page) => {
-    setAnimateOut(true);
-    setTimeout(() => {
-      setCurrentPage(page);
-      setAnimateOut(false);
-    }, ANIMATION_DELAY3);
-  }, []);
+  const [currentPage, setCurrentPage] = useState28(initialPage);
+  const detailTitle = useCheckoutModalTitle(
+    depositAddress,
+    DEFAULT_CHECKOUT_HISTORY_DETAIL_TITLE
+  );
+  const { animateOut, navigateTo } = useAnimatedNavigation(setCurrentPage);
   const historyTitle = {
     ["help" /* HELP */]: {
       onBack: () => navigateTo("detail" /* DETAIL */),
@@ -10856,7 +10907,7 @@ function FunCheckoutHistoryModal({
       onClose
     },
     ["detail" /* DETAIL */]: {
-      title: "Deposit",
+      title: detailTitle,
       onClose
     }
   };
@@ -10886,7 +10937,7 @@ import {
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO8,
   getTokenInfo as getTokenInfo2
 } from "@funkit/core";
-import React168, { useCallback as useCallback29, useEffect as useEffect32, useMemo as useMemo32, useRef as useRef15, useState as useState41 } from "react";
+import React168, { useCallback as useCallback29, useEffect as useEffect32, useMemo as useMemo32, useRef as useRef15, useState as useState43 } from "react";
 import { arbitrum, mainnet as mainnet6, mantle as mantle2, zkSync as zkSync3 } from "viem/chains";
 
 // src/hooks/useCheckoutAccountBalanceTransfer.ts
@@ -10971,14 +11022,14 @@ function useCheckoutQuoteNotification(checkoutId) {
 }
 
 // src/hooks/useMesh.tsx
-import React128, { useCallback as useCallback20, useMemo as useMemo20, useRef as useRef13, useState as useState28 } from "react";
+import React128, { useCallback as useCallback20, useMemo as useMemo20, useRef as useRef13, useState as useState30 } from "react";
 import { useAccount as useAccount8 } from "wagmi";
 
 // src/components/FunkitProvider/FunkitMeshProvider.tsx
 import {
   createLink
 } from "@meshconnect/web-link-sdk";
-import React102, { createContext as createContext12, useCallback as useCallback19, useContext as useContext14, useState as useState27 } from "react";
+import React102, { createContext as createContext12, useCallback as useCallback19, useContext as useContext14, useState as useState29 } from "react";
 var FunkitMeshContext = createContext12({
   meshBrokerDataMap: {},
   setDataMapAndCache: () => void 0
@@ -11004,7 +11055,7 @@ function fetchDataMapFromCache() {
   }
 }
 function FunkitMeshProvider({ children }) {
-  const [meshBrokerDataMap, setMeshBrokerDataMap] = useState27(
+  const [meshBrokerDataMap, setMeshBrokerDataMap] = useState29(
     fetchDataMapFromCache()
   );
   const setDataMapAndCache = useCallback19(
@@ -12029,6 +12080,19 @@ var WeBullIcon = ({ size = 24 }) => {
   );
 };
 
+// src/utils/indexBy.ts
+function indexBy(items, getKey) {
+  const indexedItems = {};
+  for (const item of items) {
+    const key = getKey(item);
+    if (!key) {
+      continue;
+    }
+    indexedItems[key] = item;
+  }
+  return indexedItems;
+}
+
 // src/hooks/useMesh.tsx
 function createFunSelectOption(exchangeName, exchangeIcon, fullInfo = true, hasActiveConnection) {
   return {
@@ -12058,7 +12122,7 @@ var getMeshExchangeIconMap = (size) => ({
   ["OkCoin" /* OkCoin */]: /* @__PURE__ */ React128.createElement(OkcoinIcon, { size }),
   ["Etoro" /* Etoro */]: /* @__PURE__ */ React128.createElement(EtoroIcon, { size }),
   ["CexIo" /* CexIo */]: /* @__PURE__ */ React128.createElement(CexloIcon, { size }),
-  ["Okx" /* Okx */]: /* @__PURE__ */ React128.createElement(OkxIcon, { size }),
+  ["OKX" /* Okx */]: /* @__PURE__ */ React128.createElement(OkxIcon, { size }),
   ["Bitfinex" /* Bitfinex */]: /* @__PURE__ */ React128.createElement(BitfinexIcon, { size }),
   ["BitfinexDirect" /* BitfinexDirect */]: /* @__PURE__ */ React128.createElement(BitfinexIcon, { size }),
   ["ETrade" /* ETrade */]: /* @__PURE__ */ React128.createElement(EtradeIcon, { size }),
@@ -12075,47 +12139,43 @@ var getMeshExchangeIconMap = (size) => ({
   ["Coinlist" /* Coinlist */]: /* @__PURE__ */ React128.createElement(CoinlistIcon, { size }),
   ["BitFlyer" /* BitFlyer */]: /* @__PURE__ */ React128.createElement(BitFlyerIcon, { size })
 });
-var FALLBACK_EXCHANGES_STRING = [
-  "Coinbase" /* Coinbase */,
-  "Binance" /* Binance */
-].join(",");
+var FALLBACK_EXCHANGES = ["Coinbase" /* Coinbase */, "Binance" /* Binance */];
+var FALLBACK_EXCHANGES_STRING = FALLBACK_EXCHANGES.join(",");
+var getSupportedExchanges = () => {
+  if (typeof window !== "undefined") {
+    return flags.getString("supported_exchanges" /* SupportedExchanges */, FALLBACK_EXCHANGES_STRING).split(",").map((exchange) => exchange.trim()).filter(Boolean);
+  }
+  return FALLBACK_EXCHANGES;
+};
+var EXCHANGE_NAMES = {
+  ["OKX" /* Okx */]: "OKX"
+};
 var useMeshExchanges = ({
   fullInfo = true,
   iconSize = 20
 }) => {
   const { hasActiveConnectionCheck } = useFunkitMesh({});
-  const options = useMemo20(() => {
+  const { options, valueToOption } = useMemo20(() => {
     const FUNKIT_MESH_EXCHANGE_DEFAULT_MAP = getMeshExchangeIconMap(iconSize);
-    let supportedExchangesString = FALLBACK_EXCHANGES_STRING;
-    if (typeof window !== "undefined") {
-      supportedExchangesString = flags.getString(
-        "supported_exchanges" /* SupportedExchanges */,
-        FALLBACK_EXCHANGES_STRING
-      );
-    }
-    return supportedExchangesString.split(",").filter(Boolean).map((exchange) => {
-      const normalizedExchange = exchange.trim();
+    const supportedExchanges = getSupportedExchanges();
+    const options2 = supportedExchanges.map((exchange) => {
+      const icon = FUNKIT_MESH_EXCHANGE_DEFAULT_MAP[exchange];
       return createFunSelectOption(
-        normalizedExchange,
-        FUNKIT_MESH_EXCHANGE_DEFAULT_MAP[normalizedExchange],
+        EXCHANGE_NAMES[exchange] || exchange,
+        icon,
         fullInfo,
-        hasActiveConnectionCheck(normalizedExchange)
+        hasActiveConnectionCheck(exchange)
       );
     });
+    const valueToOption2 = indexBy(options2, (item) => item.value);
+    return { options: options2, valueToOption: valueToOption2 };
   }, [fullInfo, hasActiveConnectionCheck, iconSize]);
-  const optionsMap = useMemo20(() => {
-    const obj = {};
-    options.forEach((option) => {
-      obj[`${option.value}`] = option.label;
-    });
-    return obj;
-  }, [options]);
   const preparePaymentInfo = (meshMeta) => {
     const brokerName = meshMeta.accessToken?.brokerName ?? "";
     return {
       paymentMethod: "brokerage" /* BROKERAGE */,
       title: brokerName,
-      titleIcon: optionsMap?.[brokerName],
+      titleIcon: valueToOption[brokerName]?.label,
       description: meshMeta.accessToken?.accountTokens?.[0]?.account?.accountId ?? "",
       meta: meshMeta
     };
@@ -12147,8 +12207,8 @@ var useMeshNetworkInfo = (exchange) => {
 };
 var useMeshActiveNetworkInfo = (exchange) => {
   const { chain: activeChain } = useAccount8();
-  const [meshNetworkId, setMeshNetworkId] = useState28(null);
-  const [meshSupportedTokens, setMeshSupportedTokens] = useState28([]);
+  const [meshNetworkId, setMeshNetworkId] = useState30(null);
+  const [meshSupportedTokens, setMeshSupportedTokens] = useState30([]);
   const networkandExchange = useRef13(`${exchange}${meshNetworkId}`);
   const meshSupportedTokensEqualLength = useEqualMeshNetworkSupportedTokens(
     meshSupportedTokens,
@@ -12310,7 +12370,7 @@ import React131, {
   useContext as useContext16,
   useEffect as useEffect25,
   useMemo as useMemo21,
-  useState as useState29
+  useState as useState31
 } from "react";
 
 // src/components/FunkitProvider/FunkitSandboxContext.tsx
@@ -12320,7 +12380,7 @@ var useIsFunkitSandboxMode = () => useContext15(FunkitSandboxContext);
 
 // src/components/FunkitProvider/FunkitMoonpayProvider.tsx
 var MoonPayOriginalProvider = (props) => {
-  const [MoonPayProviderInner, setMoonPayProviderInner] = useState29(null);
+  const [MoonPayProviderInner, setMoonPayProviderInner] = useState31(null);
   useEffect25(() => {
     const loadMoonPayProviderInner = async () => {
       try {
@@ -12347,7 +12407,7 @@ function FunkitMoonpayProvider({
   return /* @__PURE__ */ React131.createElement(MoonPayOriginalProvider, { apiKey: moonpayApiKey, debug }, /* @__PURE__ */ React131.createElement(FunkitMoonpayContext.Provider, { value: { moonpayApiKey } }, children));
 }
 function useFunkitUserIp() {
-  const [userIpInfo, setUserIpInfo] = useState29(
+  const [userIpInfo, setUserIpInfo] = useState31(
     null
   );
   const { moonpayApiKey } = useContext16(FunkitMoonpayContext);
@@ -12394,7 +12454,7 @@ import React136, {
   useCallback as useCallback22,
   useEffect as useEffect26,
   useMemo as useMemo22,
-  useState as useState30
+  useState as useState32
 } from "react";
 
 // src/components/Icons/DeviceConfirmationIcon.tsx
@@ -12495,12 +12555,12 @@ function FunMeshVerificationStep({
   exchange,
   accessToken
 }) {
-  const [twoFactorCode, setTwoFactorCode] = useState30("");
+  const [twoFactorCode, setTwoFactorCode] = useState32("");
   const funkitConfig = useFunkitConfig();
-  const [screen, setScreen] = useState30(0 /* INITIAL */);
-  const [isExecuting, setIsExecuting] = useState30(false);
-  const [executionError, setExecutionError] = useState30("");
-  const [executionContent, setExecutionContent] = useState30(null);
+  const [screen, setScreen] = useState32(0 /* INITIAL */);
+  const [isExecuting, setIsExecuting] = useState32(false);
+  const [executionError, setExecutionError] = useState32("");
+  const [executionContent, setExecutionContent] = useState32(null);
   const executionStatus = executionContent?.status;
   const isButtonVisible = useMemo22(() => {
     return executionStatus && screen !== 0 /* INITIAL */ && screen !== 5 /* FAILED */;
@@ -12723,7 +12783,7 @@ var VerificationPopup = ({
 import React144 from "react";
 
 // src/components/FunPayments/FunPaymentMeshType.tsx
-import React141, { useMemo as useMemo23, useState as useState31 } from "react";
+import React141, { useMemo as useMemo23, useState as useState33 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/FunNoResults/FunNoResults.tsx
@@ -12790,8 +12850,7 @@ var FunNoResults = ({ children }) => {
       justifyContent: "center",
       alignItems: "center",
       gap: "12",
-      color: "secondaryText",
-      paddingTop: "12"
+      color: "secondaryText"
     },
     /* @__PURE__ */ React138.createElement(SearchSkeletonIcon, null),
     /* @__PURE__ */ React138.createElement(Text, { color: "secondaryText", size: "10" }, children)
@@ -12896,8 +12955,8 @@ function FunPaymentMeshType({
   isParentLoading,
   onContinue
 }) {
-  const [searchInput, setSearchInput] = useState31("");
-  const [exchange, setExchange] = useState31();
+  const [searchInput, setSearchInput] = useState33("");
+  const [exchange, setExchange] = useState33();
   const { options } = useMeshExchanges({ iconSize: 20 });
   const handleSearch = (event) => {
     setExchange(void 0);
@@ -12918,7 +12977,7 @@ function FunPaymentMeshType({
       onChange: handleSearch,
       prefixIcon: "SearchIcon"
     }
-  ), /* @__PURE__ */ React141.createElement(Box, { style: { minHeight: 200 } }, filteredOptions?.length === 0 ? /* @__PURE__ */ React141.createElement(FunNoResults, null, "No results found") : /* @__PURE__ */ React141.createElement(
+  ), /* @__PURE__ */ React141.createElement(Box, { display: "flex", justifyContent: "center", style: { minHeight: 200 } }, filteredOptions?.length === 0 ? /* @__PURE__ */ React141.createElement(FunNoResults, null, "No results found") : /* @__PURE__ */ React141.createElement(
     FunSelectBrokerage,
     {
       handleSelect: (selectedExchange) => {
@@ -12947,7 +13006,7 @@ function FunPaymentMeshType({
 
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/api-base";
-import React142, { memo, useEffect as useEffect27, useMemo as useMemo24, useState as useState32 } from "react";
+import React142, { memo, useEffect as useEffect27, useMemo as useMemo24, useState as useState34 } from "react";
 
 // src/utils/colors.ts
 function colorToHex(color) {
@@ -12976,7 +13035,7 @@ var stretchStyle = "_1kmpeyf1";
 
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 var MoonPayBuyWidget = memo(function Widget(props) {
-  const [MoonPayBuyWidgetInner, setMoonPayBuyWidgetInner] = useState32(null);
+  const [MoonPayBuyWidgetInner, setMoonPayBuyWidgetInner] = useState34(null);
   useEffect27(() => {
     const loadMoonPayBuyWidgetInner = async () => {
       try {
@@ -13001,7 +13060,7 @@ function FunPaymentMoonpayType({
 }) {
   const { active: active2 } = useActiveTheme();
   const isSandboxMode = useIsFunkitSandboxMode();
-  const [isSupportedRegion, setIsSupportedRegion] = useState32(true);
+  const [isSupportedRegion, setIsSupportedRegion] = useState34(true);
   const funkitConfig = useFunkitConfig();
   const { userInfo } = useGeneralWallet();
   const currencyCode = useMemo24(() => {
@@ -13218,7 +13277,7 @@ import {
   meshPreviewTransfer as meshPreviewTransfer2
 } from "@funkit/api-base";
 import { ERC20_ABI, isAddress as isAddress3, USDT_ABI } from "@funkit/core";
-import React155, { useCallback as useCallback24, useMemo as useMemo29, useState as useState36 } from "react";
+import React155, { useCallback as useCallback24, useMemo as useMemo29, useState as useState38 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { useAccount as useAccount9, useSendTransaction, useWriteContract } from "wagmi";
 
@@ -13242,7 +13301,7 @@ function isMainnetUsdt(chainId, address) {
 
 // src/components/FunPayments/FunPaymentMethods.tsx
 import { getAssetPriceInfo as getAssetPriceInfo3 } from "@funkit/api-base";
-import React149, { useCallback as useCallback23, useMemo as useMemo26, useState as useState33 } from "react";
+import React149, { useCallback as useCallback23, useMemo as useMemo26, useState as useState35 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // src/hooks/useUsableWalletAssetsForCheckout.ts
@@ -13384,51 +13443,38 @@ var LightningIcon = ({ color }) => {
 };
 
 // src/components/FunPayments/FunPaymentMethods.tsx
+var getBrokerageConditionalIcons = () => {
+  const supportedExchanges = getSupportedExchanges();
+  const iconMap = getMeshExchangeIconMap(12);
+  return supportedExchanges.filter((exchange) => iconMap[exchange]).slice(0, 5).map((exchange) => iconMap[exchange]);
+};
 var PAYMENT_METHOD_CONFIG = {
   ["balance" /* ACCOUNT_BALANCE */]: {
     label: DEFAULT_TEXT_CUSTOMIZATIONS.accountBalance,
     labelDynamic: (textCustomizations, walletAddress) => {
       const walletSuffix = walletAddress ? ` (${walletAddress})` : "";
-      if (textCustomizations.accountBalance !== DEFAULT_TEXT_CUSTOMIZATIONS.accountBalance) {
-        return `${textCustomizations.accountBalance}${walletSuffix}`;
-      }
-      return flags.getBool("payment_method_copy_v1" /* PaymentMethodCopyV1 */, false) ? `Wallet${walletSuffix}` : `${textCustomizations.accountBalance}${walletSuffix}`;
+      return `${textCustomizations.accountBalance}${walletSuffix}`;
     },
     timeIconDynamic: (color) => /* @__PURE__ */ React149.createElement(LightningIcon, { color }),
     timeRange: "Instant",
     conditionalIcon: null,
-    isEnabledForOnramp: false,
-    // TODO: Deprecate
     isEnabledForCheckout: true,
     disclaimerTextFn: (dynamicLimit) => `${dynamicLimit} \u2022 Instant`
   },
   ["card" /* CARD */]: {
     label: DEFAULT_TEXT_CUSTOMIZATIONS.debitOrCredit,
-    labelDynamic: (textCustomizations) => {
-      if (textCustomizations.debitOrCredit !== DEFAULT_TEXT_CUSTOMIZATIONS.debitOrCredit) {
-        return textCustomizations.debitOrCredit;
-      }
-      return flags.getBool("payment_method_copy_v1" /* PaymentMethodCopyV1 */, false) ? "Card" : textCustomizations.debitOrCredit;
-    },
+    labelDynamic: (textCustomizations) => textCustomizations.debitOrCredit,
     timeIconDynamic: (color) => /* @__PURE__ */ React149.createElement(ClockIcon, { color }),
-    conditionalIcon: /* @__PURE__ */ React149.createElement(CombinedCreditCardOptionsIcon, null),
-    isEnabledForOnramp: true,
-    // TODO: Deprecate
+    conditionalIcon: () => /* @__PURE__ */ React149.createElement(CombinedCreditCardOptionsIcon, null),
     isEnabledForCheckout: true,
     disclaimerTextFn: () => "$10,000 limit \u2022 2min"
   },
   ["brokerage" /* BROKERAGE */]: {
     label: DEFAULT_TEXT_CUSTOMIZATIONS.brokerageOrExchange,
-    labelDynamic: (textCustomizations) => {
-      if (textCustomizations.brokerageOrExchange !== DEFAULT_TEXT_CUSTOMIZATIONS.brokerageOrExchange) {
-        return textCustomizations.brokerageOrExchange;
-      }
-      return flags.getBool("payment_method_copy_v1" /* PaymentMethodCopyV1 */, false) ? "Exchange" : textCustomizations.brokerageOrExchange;
-    },
+    labelDynamic: (textCustomizations) => textCustomizations.brokerageOrExchange,
     timeIconDynamic: (color) => /* @__PURE__ */ React149.createElement(ClockIcon, { color }),
-    conditionalIcon: /* @__PURE__ */ React149.createElement(Box, { display: "flex", gap: "2", alignItems: "center" }, /* @__PURE__ */ React149.createElement(CoinbaseIcon, { size: 12 }), /* @__PURE__ */ React149.createElement(BinanceIcon, { size: 12 }), /* @__PURE__ */ React149.createElement(RobinhoodIcon, { size: 12 })),
-    isEnabledForOnramp: true,
-    // TODO: Deprecate
+    // Note: This needs to be a function fetch fresh supported exchanges instead of using the default from the server
+    conditionalIcon: () => /* @__PURE__ */ React149.createElement(Box, { display: "flex", gap: "2", alignItems: "center" }, getBrokerageConditionalIcons()),
     isEnabledForCheckout: true,
     disclaimerTextFn: () => "No limit \u2022 3 mins"
   },
@@ -13437,8 +13483,6 @@ var PAYMENT_METHOD_CONFIG = {
     labelDynamic: (textCustomizations) => textCustomizations.transferCrypto,
     timeIconDynamic: (color) => /* @__PURE__ */ React149.createElement(ClockIcon, { color }),
     conditionalIcon: null,
-    isEnabledForOnramp: true,
-    // TODO: Deprecate
     isEnabledForCheckout: false,
     disclaimerTextFn: () => void 0
   }
@@ -13472,7 +13516,7 @@ function AddPaymentMethodItem({
   }
   const getDynamicValueIconComponent = () => {
     if (paymentMethod !== "balance" /* ACCOUNT_BALANCE */ || !checkoutItem || !usableWalletAssets) {
-      return config.conditionalIcon;
+      return config.conditionalIcon?.();
     }
     const uniqueChainIds = Array.from(
       new Set(Object.values(usableWalletAssets).map((asset) => asset.chainId))
@@ -13503,7 +13547,7 @@ function AddPaymentMethodItem({
     FunPaymentMethodItem,
     {
       isActive,
-      keyIcon: isWalletBalanceAndAssetStillLoading ? /* @__PURE__ */ React149.createElement(SpinnerIcon, { width: 24, height: 24 }) : /* @__PURE__ */ React149.createElement(
+      keyIcon: isWalletBalanceAndAssetStillLoading ? /* @__PURE__ */ React149.createElement(SpinnerIcon, { size: 24 }) : /* @__PURE__ */ React149.createElement(
         Box,
         {
           display: "flex",
@@ -13571,13 +13615,14 @@ function FunPaymentMethods({
   const { isUserLoggedIn } = useGeneralWallet();
   const { checkoutItem, updateTargetAssetAmount, getCheckoutDraftDollarValue } = useFunkitPreCheckoutInternal(checkoutId);
   const defaultPaymentMethod = checkoutItem?.initSettings.config.defaultPaymentMethod;
-  const [selectedOption, setSelectedOption] = useState33(
+  const [selectedOption, setSelectedOption] = useState35(
     defaultPaymentMethod || null
   );
   const usableWalletAssets = useUsableWalletAssetsForCheckout(checkoutId);
   const totalUsableWalletAssetsUsd = Object.values(
     usableWalletAssets ?? {}
   ).reduce((total, asset) => total + (asset.totalUsdValue || 0), 0);
+  const isEmptyWallet = totalUsableWalletAssetsUsd < 0.01;
   const maxUsdUsableAsset = useMemo26(() => {
     if (!depositAmount || !usableWalletAssets) {
       return null;
@@ -13677,7 +13722,17 @@ function FunPaymentMethods({
       return !disabled;
     });
   }, [isUserLoggedIn]);
-  const [isContinuing, setIsContinuing] = useState33(false);
+  const selectablePaymentMethods = useMemo26(() => {
+    return enabledPaymentMethods.filter((paymentMethod) => {
+      switch (paymentMethod) {
+        case "balance" /* ACCOUNT_BALANCE */:
+          return !isEmptyWallet;
+        default:
+          return true;
+      }
+    });
+  }, [isEmptyWallet, enabledPaymentMethods]);
+  const [isContinuing, setIsContinuing] = useState35(false);
   const canContinue = useMemo26(() => {
     return isNotNullish(selectedOption) && Object.values(PaymentMethod).includes(selectedOption) && !isContinuing && !checkoutItem?.isDrafting && enabledPaymentMethods.includes(selectedOption);
   }, [
@@ -13702,36 +13757,45 @@ function FunPaymentMethods({
   const isLoading = notificationConfig.notificationType === "default" && isContinuing;
   const bottomSectionRef = document.getElementById(CHECKOUT_MODAL_BOTTOM_BAR_ID);
   function paymentMethodList() {
-    const expressOption = enabledPaymentMethods.includes("balance" /* ACCOUNT_BALANCE */) && hasSufficientBalance2 ? "balance" /* ACCOUNT_BALANCE */ : "card" /* CARD */;
-    return /* @__PURE__ */ React149.createElement(React149.Fragment, null, /* @__PURE__ */ React149.createElement(Text, { size: "13", weight: "medium", color: "secondaryText" }, "Express checkout"), /* @__PURE__ */ React149.createElement(
-      AddPaymentMethodItem,
-      {
-        key: expressOption,
-        checkoutId,
-        paymentMethod: expressOption,
-        isActive: expressOption === selectedOption,
-        isClickable: !isContinuing,
-        onClick: () => setSelectedOption(expressOption),
-        disclaimerText: PAYMENT_METHOD_CONFIG[expressOption].disclaimerTextFn(
-          formatCurrencyAndStringify(totalUsableWalletAssetsUsd)
-        )
-      }
-    ), /* @__PURE__ */ React149.createElement(Text, { size: "13", weight: "medium", color: "secondaryText" }, "More options"), enabledPaymentMethods.filter((pm) => pm !== expressOption).map((paymentMethod) => {
-      return /* @__PURE__ */ React149.createElement(
+    const expressOption = selectablePaymentMethods.includes("balance" /* ACCOUNT_BALANCE */) && hasSufficientBalance2 ? "balance" /* ACCOUNT_BALANCE */ : selectablePaymentMethods.includes("card" /* CARD */) ? "card" /* CARD */ : void 0;
+    const unselectablePaymentMethods = enabledPaymentMethods.filter(
+      (paymentMethod) => !selectablePaymentMethods.includes(paymentMethod)
+    );
+    return /* @__PURE__ */ React149.createElement(
+      React149.Fragment,
+      null,
+      expressOption && /* @__PURE__ */ React149.createElement(React149.Fragment, null, /* @__PURE__ */ React149.createElement(Text, { size: "13", weight: "medium", color: "secondaryText" }, "Express checkout"), /* @__PURE__ */ React149.createElement(
         AddPaymentMethodItem,
         {
-          key: paymentMethod,
+          key: expressOption,
           checkoutId,
-          paymentMethod,
-          isActive: paymentMethod === selectedOption,
+          paymentMethod: expressOption,
+          isActive: expressOption === selectedOption,
           isClickable: !isContinuing,
-          onClick: () => setSelectedOption(paymentMethod),
-          disclaimerText: PAYMENT_METHOD_CONFIG[paymentMethod].disclaimerTextFn(
+          onClick: () => setSelectedOption(expressOption),
+          disclaimerText: PAYMENT_METHOD_CONFIG[expressOption].disclaimerTextFn(
             formatCurrencyAndStringify(totalUsableWalletAssetsUsd)
           )
         }
-      );
-    }));
+      ), /* @__PURE__ */ React149.createElement(Text, { size: "13", weight: "medium", color: "secondaryText" }, "More options")),
+      // Moving unselectable payment methods to the end/bottom
+      [...selectablePaymentMethods, ...unselectablePaymentMethods].filter((paymentMethod) => paymentMethod !== expressOption).map((paymentMethod) => {
+        return /* @__PURE__ */ React149.createElement(
+          AddPaymentMethodItem,
+          {
+            key: paymentMethod,
+            checkoutId,
+            paymentMethod,
+            isActive: paymentMethod === selectedOption,
+            isClickable: selectablePaymentMethods.includes(paymentMethod) && !isContinuing,
+            onClick: () => setSelectedOption(paymentMethod),
+            disclaimerText: PAYMENT_METHOD_CONFIG[paymentMethod].disclaimerTextFn(
+              formatCurrencyAndStringify(totalUsableWalletAssetsUsd)
+            )
+          }
+        );
+      })
+    );
   }
   return /* @__PURE__ */ React149.createElement(Box, null, /* @__PURE__ */ React149.createElement(Box, { display: "flex", flexDirection: "column", gap: "18" }, primaryInfo, /* @__PURE__ */ React149.createElement(
     Box,
@@ -13770,7 +13834,7 @@ function FunPaymentMethods({
 }
 
 // src/components/FunTransactionSummary/FunTransactionSummary.tsx
-import React152, { useMemo as useMemo27, useState as useState34 } from "react";
+import React152, { useMemo as useMemo27, useState as useState36 } from "react";
 
 // src/components/Icons/CaretDownIcon.tsx
 import React150 from "react";
@@ -13883,7 +13947,7 @@ function FeesLineItem({
   isLoading,
   paymentMethod
 }) {
-  const [isExpanded, setIsExpanded] = useState34(false);
+  const [isExpanded, setIsExpanded] = useState36(false);
   const toggle = () => setIsExpanded(!isExpanded);
   const hasPlatformFees = feesItem?.platformFeesUsd && Number(feesItem.platformFeesUsd) > 0;
   return /* @__PURE__ */ React152.createElement(Box, { width: "full" }, /* @__PURE__ */ React152.createElement(
@@ -13940,7 +14004,7 @@ function PaymentRouteLineItem({
   destinationChainId
 }) {
   const isSameChain = destinationChainId === sourceChainId;
-  const [isExpanded, setIsExpanded] = useState34(false);
+  const [isExpanded, setIsExpanded] = useState36(false);
   const toggle = () => setIsExpanded(!isExpanded);
   return /* @__PURE__ */ React152.createElement(Box, { width: "full" }, /* @__PURE__ */ React152.createElement(
     FunTxSummaryLineItemCollapsibleTrigger,
@@ -14133,7 +14197,7 @@ var FunInfoIcon = ({ size = 14 }) => /* @__PURE__ */ React153.createElement(
 );
 
 // src/components/FunCheckoutModal/FunCheckoutPrimaryInfo.tsx
-import React154, { useEffect as useEffect28, useMemo as useMemo28, useState as useState35 } from "react";
+import React154, { useEffect as useEffect28, useMemo as useMemo28, useState as useState37 } from "react";
 function CheckoutPrimaryInfoSnapshot({
   checkoutItem,
   isLoading,
@@ -14181,7 +14245,7 @@ function CheckoutPrimaryInfo({
   preserveMinHeight = true
 }) {
   const { checkoutItem, getCheckoutDraftDollarValue } = useFunkitPreCheckoutInternal(checkoutId);
-  const [isForceRefresh, setIsForceRefresh] = useState35(false);
+  const [isForceRefresh, setIsForceRefresh] = useState37(false);
   useEffect28(() => {
     if (isForceRefresh || !isNotNullish(checkoutItem?.draftDollarValue)) {
       setIsForceRefresh(false);
@@ -14392,13 +14456,13 @@ function FunCheckoutConfirmationStep({
   const hasDraftValueAndMethodError = checkoutItem?.selectedPaymentMethodInfo?.paymentMethod === "card" /* CARD */ && isAmountInvalidForMoonpay({
     amountUsd: (checkoutItem?.draftDollarValue || 0).toString()
   });
-  const [isConfirming, setIsConfirming] = useState36(false);
-  const [checkoutStepMessage, setCheckoutStepMessage] = useState36("");
-  const [confirmationError, setConfirmationError] = useState36("");
+  const [isConfirming, setIsConfirming] = useState38(false);
+  const [checkoutStepMessage, setCheckoutStepMessage] = useState38("");
+  const [confirmationError, setConfirmationError] = useState38("");
   const hasCheckoutConfirmationError = confirmationError !== "";
-  const [isPostCheckoutLoading, setIsPostCheckoutLoading] = useState36(false);
-  const [postCheckoutStepMessage, setPostCheckoutStepMessage] = useState36("");
-  const [postCheckoutError, setPostCheckoutError] = useState36("");
+  const [isPostCheckoutLoading, setIsPostCheckoutLoading] = useState38(false);
+  const [postCheckoutStepMessage, setPostCheckoutStepMessage] = useState38("");
+  const [postCheckoutError, setPostCheckoutError] = useState38("");
   const hasPostCheckoutError = postCheckoutError !== "";
   const handleMeshPostCheckout = useCallback24(
     async (depositAddress) => {
@@ -14476,9 +14540,14 @@ function FunCheckoutConfirmationStep({
         onFinish?.(depositAddress);
       } catch (err) {
         logger.error("postCheckoutFundingError", err);
-        setPostCheckoutError(
-          "An error occurred trying to fund the checkout. Please try again or contact support for help."
-        );
+        const userRejectedRegExp = /user\s?rejected/gi;
+        if (err instanceof Error && (userRejectedRegExp.test(err.name) || userRejectedRegExp.test(err.message))) {
+          setPostCheckoutError("Signature denied");
+        } else {
+          setPostCheckoutError(
+            "An error occurred trying to fund the checkout. Please try again or contact support for help."
+          );
+        }
         setPostCheckoutStepMessage("");
       } finally {
         setIsPostCheckoutLoading(false);
@@ -14637,7 +14706,7 @@ function FunCheckoutConfirmationStep({
 }
 
 // src/components/FunCheckoutModal/FunCheckoutConnectExchangeStep.tsx
-import React161, { useCallback as useCallback25, useState as useState37 } from "react";
+import React161, { useCallback as useCallback25, useState as useState39 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 
 // src/components/FunGuarantees/FunGuarantees.tsx
@@ -14768,8 +14837,8 @@ var FunCheckoutConnectExchangeStep = ({
 }) => {
   const { preparePaymentInfo } = useMeshExchanges({ fullInfo: false });
   const { appName } = useFunkitConfig();
-  const [meshPreError, setMeshPreError] = useState37("");
-  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState37(false);
+  const [meshPreError, setMeshPreError] = useState39("");
+  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState39(false);
   const icon = getMeshExchangeIconMap(48)[exchange];
   const handleFinish = useCallback25(
     (meshMeta) => {
@@ -14809,7 +14878,7 @@ var FunCheckoutConnectExchangeStep = ({
     FunMessage,
     {
       icon,
-      title: `${appName} uses Mesh to connect your ${exchange} account.`,
+      title: `${appName} uses a 3rd party to connect your ${exchange} account.`,
       gap: "18"
     }
   ), /* @__PURE__ */ React161.createElement(FunGuarantees, { exchange }), /* @__PURE__ */ React161.createElement(
@@ -14831,7 +14900,7 @@ var FunCheckoutConnectExchangeStep = ({
           }
         ),
         actionButtonProps: {
-          title: "Continue to Mesh",
+          title: "Continue to 3rd Party",
           onClick: onClickContinue,
           isLoading: isLoadingMeshModal,
           isDisabled: isLoadingMeshModal || meshPreError !== ""
@@ -14844,15 +14913,15 @@ var FunCheckoutConnectExchangeStep = ({
 
 // src/components/FunCheckoutModal/FunCheckoutInputAmountStep.tsx
 import { getAssetPriceInfo as getAssetPriceInfo4 } from "@funkit/api-base";
-import React163, { useCallback as useCallback27, useEffect as useEffect30, useMemo as useMemo30, useState as useState39 } from "react";
+import React163, { useCallback as useCallback27, useEffect as useEffect30, useMemo as useMemo30, useState as useState41 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/hooks/useDynamicFont.ts
-import { useCallback as useCallback26, useEffect as useEffect29, useRef as useRef14, useState as useState38 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect29, useRef as useRef14, useState as useState40 } from "react";
 var SIZE_STEP = 1;
 var ALLOWANCE = 20;
 var useDynamicFont = (inputValue, max, min = 16) => {
-  const [fontSize, setFontSize] = useState38(max);
+  const [fontSize, setFontSize] = useState40(max);
   const inputRef = useRef14(null);
   const canvasRef = useRef14(document.createElement("canvas"));
   useEffect29(() => {
@@ -14863,14 +14932,14 @@ var useDynamicFont = (inputValue, max, min = 16) => {
       const fontSize2 = inputRef.current.style.fontSize;
       const fontFamily = window.getComputedStyle(inputRef.current).fontFamily;
       context.font = `${fontSize2} ${fontFamily}`;
-      return Math.round(context.measureText(text).width);
+      return Math.ceil(context.measureText(" " + text).width);
     };
     const resizeText = () => {
       if (!inputRef.current) return;
       const textWidth = measureTextWidth(inputValue);
       if (textWidth === void 0) return;
       const maxWidth = inputRef.current.getBoundingClientRect().width;
-      if (fontSize > min && textWidth > maxWidth) {
+      if (fontSize > min && textWidth >= maxWidth) {
         setFontSize((prevSize) => prevSize - SIZE_STEP);
       } else if (fontSize < max && textWidth < maxWidth - ALLOWANCE) {
         setFontSize((prevSize) => prevSize + SIZE_STEP);
@@ -14931,12 +15000,12 @@ var FunCheckoutInputAmountStep = ({
   const { isCheckoutPostActionRequired, isCheckoutCrFlow } = useCheckoutType(checkoutItem);
   const isArbitraryOrTransferFlow = isCheckoutPostActionRequired || isCheckoutCrFlow;
   const { walletAssets } = useGeneralWallet();
-  const [isAmountInAbsolute, setIsAmountInAbsolute] = useState39(false);
-  const [isInited, setIsInited] = useState39(false);
+  const [isAmountInAbsolute, setIsAmountInAbsolute] = useState41(false);
+  const [isInited, setIsInited] = useState41(false);
   const initialAssetAmount = checkoutItem?.initSettings.config.targetAssetAmount || 0;
-  const [amountInput, setAmountInput] = useState39("");
-  const [unitPrice, setUnitPrice] = useState39(null);
-  const [errorMessage, setErrorMessage] = useState39("");
+  const [amountInput, setAmountInput] = useState41("");
+  const [unitPrice, setUnitPrice] = useState41(null);
+  const [errorMessage, setErrorMessage] = useState41("");
   const config = checkoutItem?.initSettings?.config;
   useEffect30(() => {
     const fetchPrice = async () => {
@@ -14988,7 +15057,7 @@ var FunCheckoutInputAmountStep = ({
   const { error: inputLimitError } = useAmountRestriction(
     finalAmounts.usdEquivalent
   );
-  const [isContinuing, setIsContinuing] = useState39(false);
+  const [isContinuing, setIsContinuing] = useState41(false);
   const onClickContinue = useCallback27(async () => {
     setIsContinuing(true);
     updateTargetAssetAmount(finalAmounts.absoluteEquivalent);
@@ -15076,7 +15145,8 @@ var FunCheckoutInputAmountStep = ({
           display: "flex",
           gap: "3",
           justifyContent: "center",
-          alignItems: "flex-end"
+          alignItems: "flex-end",
+          width: "full"
         },
         /* @__PURE__ */ React163.createElement(
           FunInput,
@@ -15119,9 +15189,8 @@ var FunCheckoutInputAmountStep = ({
             paddingX: "6",
             color: {
               base: "actionColor",
-              hover: isLoading ? "actionColor" : "actionColorHover"
+              hover: isLoading ? void 0 : "actionColorHover"
             },
-            disableHoverStyles: isLoading,
             onClick: isLoading ? void 0 : handleIsAmountInAbsoluteToggle
           },
           isLoading && !convertedAmount ? /* @__PURE__ */ React163.createElement(Box, { alignItems: "center", display: "flex", gap: "8" }, /* @__PURE__ */ React163.createElement(FunSkeletonBlock, { height: "14", width: "60" }), isAmountInAbsolute || /* @__PURE__ */ React163.createElement(Text, { color: "actionColorDisabled", size: "14" }, ticker)) : /* @__PURE__ */ React163.createElement(Text, { color: "actionColorDisabled", size: "14" }, convertedAmount)
@@ -15186,7 +15255,7 @@ import {
   FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS as FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS3,
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO7
 } from "@funkit/core";
-import React166, { useCallback as useCallback28, useEffect as useEffect31, useMemo as useMemo31, useState as useState40 } from "react";
+import React166, { useCallback as useCallback28, useEffect as useEffect31, useMemo as useMemo31, useState as useState42 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/FunAsset/FunAssetItem.tsx
@@ -15361,11 +15430,11 @@ function MeshOrAccountSelectAsset({
   onBack,
   isOnFinishLoading
 }) {
-  const [accountHoldingsMap, setAccountHoldingsMap] = useState40({});
-  const [isLoadingAssets, setIsLoadingAssets] = useState40(true);
-  const [fetchAssetsError, setFetchAssetsError] = useState40("");
+  const [accountHoldingsMap, setAccountHoldingsMap] = useState42({});
+  const [isLoadingAssets, setIsLoadingAssets] = useState42(true);
+  const [fetchAssetsError, setFetchAssetsError] = useState42("");
   const hasFetchAssetsError = !!fetchAssetsError;
-  const [selectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState40("");
+  const [selectedChainTokenSymbol, setSelectedChainTokenSymbol] = useState42("");
   const { checkoutItem, updateSourceAsset } = useFunkitPreCheckoutInternal(checkoutId);
   const { isCheckoutCrFlow } = useCheckoutType(checkoutItem);
   const draftDollarValueNormalized = checkoutItem?.draftDollarValue || 0;
@@ -15608,7 +15677,7 @@ function MeshOrAccountSelectAsset({
     onFinish
   ]);
   const { quoteNotification, clearCheckoutQuoteMessages } = useCheckoutQuoteNotification(checkoutId || "");
-  const [insufficientAssetError, setInsufficientAssetError] = useState40("");
+  const [insufficientAssetError, setInsufficientAssetError] = useState42("");
   const hasInsufficientAssetError = !!insufficientAssetError;
   const { messageType, quoteMessage } = quoteNotification;
   const hasError = hasFetchAssetsError || hasInsufficientAssetError || messageType === "error";
@@ -15781,7 +15850,6 @@ function FunCheckoutVerifyDetailsStep({
 
 // src/components/FunCheckoutModal/FunCheckoutModal.tsx
 var CHECKOUT_MODAL_BOTTOM_BAR_ID = "checkout-modal-bottom-bar";
-var ANIMATION_DELAY4 = 150;
 function useSourceAssetConfirm(checkoutId, setCheckoutStep) {
   const { checkoutItem, getCheckoutQuote } = useFunkitPreCheckoutInternal(
     checkoutId || ""
@@ -15792,7 +15860,7 @@ function useSourceAssetConfirm(checkoutId, setCheckoutStep) {
     checkoutItem?.selectedPaymentMethodInfo?.meta?.accessToken?.brokerName
   );
   const { accountBalancePaymentDefaultInfo, isWeb2Login } = useGeneralWallet();
-  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState41(false);
+  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState43(false);
   const onSourceAssetConfirmed = useCallback29(
     async (onStartCallback, onEndCallback) => {
       try {
@@ -15944,9 +16012,9 @@ function usePickSourceAssetForCard(checkoutItem) {
 var ESTIMATE_REFRESH_INTERVAL_SEC = 60;
 function useRefreshAsset(checkoutStep, onSourceAssetConfirmed) {
   const intervalRef = useRef15(void 0);
-  const [isRegeneratingQuote, setIsRegeneratingQuote] = useState41(false);
-  const [countdown, setCountdownSeconds] = useState41(0);
-  const [countdownKey, setCountdownKey] = useState41(1);
+  const [isRegeneratingQuote, setIsRegeneratingQuote] = useState43(false);
+  const [countdown, setCountdownSeconds] = useState43(0);
+  const [countdownKey, setCountdownKey] = useState43(1);
   useEffect32(() => {
     if (checkoutStep !== "confirmation" /* CONFIRMATION */) return;
     intervalRef.current = setInterval(() => {
@@ -16015,29 +16083,22 @@ function FunCheckoutModal({
   const mobile = isMobile();
   const { textCustomizations } = useFunkitConfig();
   const { updateSourceAsset, updateSelectedPaymentMethodInfo, reDraftSymbol } = useFunkitPreCheckoutInternal(checkoutId);
-  const [isSoftHidden, setIsSoftHidden] = useState41(false);
-  const [animateOut, setAnimateOut] = useState41(false);
+  const [isSoftHidden, setIsSoftHidden] = useState43(false);
   const { checkoutItem } = useFunkitPreCheckoutInternal(checkoutId || "");
   const { isCheckoutPostActionRequired, isCheckoutCrFlow } = useCheckoutType(checkoutItem);
-  const [checkoutStep, setCheckoutStep] = useState41(
+  const [checkoutStep, setCheckoutStep] = useState43(
     checkoutItem?.isFastForwarded ? (
       // Direct execution flow: go directly to confirmation page
       "confirmation" /* CONFIRMATION */
     ) : checkoutItem?.initSettings.config.disableEditing || isCheckoutPostActionRequired ? "select_payment" /* SELECT_PAYMENT_METHOD */ : "input_amount" /* INPUT_AMOUNT */
   );
+  const { animateOut, navigateTo } = useAnimatedNavigation(setCheckoutStep);
   const { clearCheckoutQuoteMessages } = useCheckoutQuoteNotification(
     checkoutId || ""
   );
   useEffect32(() => {
     clearCheckoutQuoteMessages();
   }, [checkoutStep]);
-  const navigateTo = (step) => {
-    setAnimateOut(true);
-    setTimeout(() => {
-      setCheckoutStep(step);
-      setAnimateOut(false);
-    }, ANIMATION_DELAY4);
-  };
   const titleConfig = useMemo32(() => {
     const baseTitle = checkoutItem?.initSettings?.config?.modalTitle || "Checkout";
     const selectedPaymentMethod2 = checkoutItem?.selectedPaymentMethodInfo?.paymentMethod;
@@ -16100,7 +16161,8 @@ function FunCheckoutModal({
     checkoutItem?.isFastForwarded,
     checkoutItem?.selectedPaymentMethodInfo?.paymentMethod,
     checkoutStep,
-    isCheckoutPostActionRequired
+    isCheckoutPostActionRequired,
+    navigateTo
   ]);
   const onCloseWrapper = useCallback29(() => {
     checkoutItem?.initSettings?.onClose?.();
@@ -16153,7 +16215,8 @@ function FunCheckoutModal({
       pickSourceAssetForCard,
       triggerSourceAssetConfirmedFn,
       updateSelectedPaymentMethodInfo,
-      updateSourceAsset
+      updateSourceAsset,
+      navigateTo
     ]
   );
   const {
@@ -16168,7 +16231,7 @@ function FunCheckoutModal({
       updateSelectedPaymentMethodInfo(finalizedPaymentMethodInfo);
       navigateTo("select_asset" /* SELECT_ASSET */);
     },
-    [updateSelectedPaymentMethodInfo]
+    [updateSelectedPaymentMethodInfo, navigateTo]
   );
   const handleExchangeConfirm = (brokerage) => {
     if (hasActiveConnectionCheck(brokerage)) {
@@ -16316,27 +16379,27 @@ function FunCheckoutModal({
 
 // src/components/FunkitProvider/ModalContext.tsx
 function useModalStateValue() {
-  const [isModalOpen, setModalOpen] = useState42(false);
+  const [isModalOpen, setModalOpen] = useState44(false);
   return {
     closeModal: useCallback30(() => setModalOpen(false), []),
     isModalOpen,
     openModal: useCallback30(() => setModalOpen(true), [])
   };
 }
-function useModalStateValueWithId() {
-  const [isModalOpen, setModalOpen] = useState42(false);
-  const [modalId, setModalId] = useState42(null);
+function useModalStateValueWithProp() {
+  const [isModalOpen, setModalOpen] = useState44(false);
+  const [prop, setProp] = useState44(null);
   return {
     closeModal: useCallback30(() => {
       setTimeout(() => {
-        setModalId(null);
+        setProp(null);
       }, DialogAnimationTimeOut);
       setModalOpen(false);
     }, []),
     isModalOpen,
-    modalId,
-    openModal: useCallback30((id) => {
-      setModalId(id);
+    prop,
+    openModal: useCallback30((prop2) => {
+      if (prop2 !== null) setProp(prop2);
       setModalOpen(true);
     }, [])
   };
@@ -16360,26 +16423,27 @@ function ModalProvider({ children }) {
   const {
     closeModal: closeAccountModal,
     isModalOpen: accountModalOpen,
-    openModal: openAccountModal
-  } = useModalStateValue();
+    openModal: openAccountModal,
+    prop: accountModalTab
+  } = useModalStateValueWithProp();
   const {
     closeModal: closeChainModal,
     isModalOpen: chainModalOpen,
     openModal: openChainModal
   } = useModalStateValue();
-  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState42(false);
+  const [isWalletConnectModalOpen, setIsWalletConnectModalOpen] = useState44(false);
   const {
     closeModal: closeFunCheckoutModal,
     isModalOpen: funCheckoutModalOpen,
     openModal: openFunCheckoutModal,
-    modalId: funCheckoutModalId
-  } = useModalStateValueWithId();
+    prop: funCheckoutModalId
+  } = useModalStateValueWithProp();
   const {
     closeModal: closeFunCheckoutHistoryModal,
     isModalOpen: funCheckoutHistoryModalOpen,
     openModal: openFunCheckoutHistoryModal,
-    modalId: depositAddressInitialPageCombined
-  } = useModalStateValueWithId();
+    prop: depositAddressInitialPageCombined
+  } = useModalStateValueWithProp();
   const {
     closeModal: closeFunDevTestModal,
     isModalOpen: funDevTestModalOpen,
@@ -16412,6 +16476,7 @@ function ModalProvider({ children }) {
       value: useMemo33(
         () => ({
           accountModalOpen,
+          accountModalTab,
           chainModalOpen,
           connectModalOpen,
           isWalletConnectModalOpen,
@@ -16430,6 +16495,7 @@ function ModalProvider({ children }) {
         }),
         [
           accountModalOpen,
+          accountModalTab,
           chainModalOpen,
           connectModalOpen,
           isWalletConnectModalOpen,
@@ -16451,7 +16517,14 @@ function ModalProvider({ children }) {
     },
     children,
     /* @__PURE__ */ React169.createElement(ConnectModal, { onClose: closeConnectModal, open: connectModalOpen }),
-    /* @__PURE__ */ React169.createElement(AccountModal, { onClose: closeAccountModal, open: accountModalOpen }),
+    /* @__PURE__ */ React169.createElement(
+      AccountModal,
+      {
+        onClose: closeAccountModal,
+        open: accountModalOpen,
+        defaultTab: accountModalTab
+      }
+    ),
     /* @__PURE__ */ React169.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
     /* @__PURE__ */ React169.createElement(
       FunCheckoutModal,
@@ -16521,19 +16594,6 @@ function useFunCheckoutHistoryModal() {
   return { funCheckoutHistoryModalOpen, openFunCheckoutHistoryModal };
 }
 
-// src/utils/indexBy.ts
-function indexBy(items, getKey) {
-  const indexedItems = {};
-  for (const item of items) {
-    const key = getKey(item);
-    if (!key) {
-      continue;
-    }
-    indexedItems[key] = item;
-  }
-  return indexedItems;
-}
-
 // src/wallets/downloadUrls.ts
 var getExtensionDownloadUrl = (wallet) => {
   const browser = getBrowser();
@@ -16810,15 +16870,15 @@ var FunkitWeb2Provider = ({
   const { connectAsync } = useConnect2();
   const { chains } = useConfig5();
   const { connectors, disconnectAsync } = useDisconnect2();
-  const [privy, setPrivy] = useState43(null);
-  const [privyIframeUrl, setPrivyIframeUrl] = useState43();
-  const [loginMethod, setLoginMethod] = useState43(
+  const [privy, setPrivy] = useState45(null);
+  const [privyIframeUrl, setPrivyIframeUrl] = useState45();
+  const [loginMethod, setLoginMethod] = useState45(
     getLoginMethodFromCache() || null
   );
   const wallets = useWalletConnectors();
-  const [isLoggingIn, setIsLoggingIn] = useState43(false);
-  const [loginErrorMessage, setLoginErrorMessage] = useState43("");
-  const [loggedInUser, setLoggedInUser] = useState43(null);
+  const [isLoggingIn, setIsLoggingIn] = useState45(false);
+  const [loginErrorMessage, setLoginErrorMessage] = useState45("");
+  const [loggedInUser, setLoggedInUser] = useState45(null);
   const setLoginMethodAndCache = useCallback31(
     (method) => {
       try {
@@ -17079,7 +17139,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState43(false);
+  const [isSendingOtpEmail, setIsSendingOtpEmail] = useState45(false);
   const handleSendOtpEmail = useCallback31(
     async (emailAddress) => {
       try {
@@ -17106,7 +17166,7 @@ var FunkitWeb2Provider = ({
     },
     [privy, setLoginMethodAndCache]
   );
-  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState43(false);
+  const [isGeneratingFcUri, setIsGeneratingFcUri] = useState45(false);
   const handleGenerateFcUri = useCallback31(async () => {
     try {
       if (!privy) throw new Error(ERROR_MESSAGES.PRIVY_NOT_INITIALIZED);
@@ -17250,13 +17310,13 @@ function useConnectionStatus() {
 }
 
 // src/components/FunkitProvider/ShowBalanceContext.tsx
-import React171, { createContext as createContext17, useContext as useContext19, useState as useState44 } from "react";
+import React171, { createContext as createContext17, useContext as useContext19, useState as useState46 } from "react";
 var ShowBalanceContext = createContext17({
   showBalance: void 0,
   setShowBalance: () => void 0
 });
 function ShowBalanceProvider({ children }) {
-  const [showBalance, setShowBalance] = useState44();
+  const [showBalance, setShowBalance] = useState46();
   return /* @__PURE__ */ React171.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
 }
 var useShowBalance = () => useContext19(ShowBalanceContext);
@@ -17266,9 +17326,9 @@ import React172 from "react";
 import { useAccount as useAccount12, useBalance, useConfig as useConfig6 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
-import { useCallback as useCallback32, useEffect as useEffect35, useState as useState45 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect35, useState as useState47 } from "react";
 function useIsMounted() {
-  const [isMounted, setIsMounted] = useState45(false);
+  const [isMounted, setIsMounted] = useState47(false);
   useEffect35(() => {
     setIsMounted(true);
     return () => {
@@ -17373,7 +17433,7 @@ function ConnectButtonRenderer({
     chainModalOpen,
     connectModalOpen,
     mounted: isMounted(),
-    openAccountModal: openAccountModal ?? noop2,
+    openAccountModal: () => openAccountModal?.(null),
     openChainModal: openChainModal ?? noop2,
     openConnectModal: openConnectModal ?? noop2
   }));
@@ -17546,7 +17606,7 @@ function ConnectButton({
   const chains = useFunkitConnectChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
-  const [ready, setReady] = useState46(false);
+  const [ready, setReady] = useState48(false);
   const { i18n: i18n2 } = useContext20(I18nContext);
   useEffect36(() => {
     setShowBalance(showBalance);
@@ -18428,7 +18488,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "3.0.0-next.8";
+  return "3.0.0";
 }
 function useFingerprint() {
   const fingerprint = useCallback33(() => {