@funkit/connect 0.1.3 → 0.1.4

package/dist/{chunk-YPT63F4L.js → chunk-P6ZB76ND.js}

@@ -13103,6 +13103,7 @@ var zkSyncIcon = {
 var chainMetadataByName = {
   arbitrum: { chainId: 42161, name: "Arbitrum", ...arbitrumIcon },
   arbitrumGoerli: { chainId: 421613, ...arbitrumIcon },
+  arbitrumSepolia: { chainId: 421614, ...arbitrumIcon },
   avalanche: { chainId: 43114, ...avalancheIcon },
   avalancheFuji: { chainId: 43113, ...avalancheIcon },
   base: { chainId: 8453, name: "Base", ...baseIcon },
@@ -13718,7 +13719,7 @@ var DropdownIcon = () => /* @__PURE__ */ React12.createElement("svg", {
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
 import React128, { useContext as useContext21 } from "react";
-import { useAccount as useAccount14, useBalance as useBalance2, useNetwork as useNetwork12 } from "wagmi";
+import { useAccount as useAccount14, useBalance as useBalance2, useNetwork as useNetwork11 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
 import { useEffect as useEffect6, useReducer as useReducer3 } from "react";
@@ -13962,20 +13963,20 @@ function useRecentTransactions() {
 // src/components/FunkitProvider/ModalContext.tsx
 import React127, {
   createContext as createContext16,
-  useCallback as useCallback23,
+  useCallback as useCallback24,
   useContext as useContext20,
   useMemo as useMemo27,
   useState as useState35
 } from "react";
-import { useAccount as useAccount13, useDisconnect as useDisconnect5, useNetwork as useNetwork11 } from "wagmi";
+import { useAccount as useAccount13, useDisconnect as useDisconnect5, useNetwork as useNetwork10 } from "wagmi";
 
 // src/components/AccountModal/AccountModal.tsx
 import React104, { useState as useState28 } from "react";
 import { useAccount as useAccount12, useBalance, useDisconnect as useDisconnect2 } from "wagmi";
 
 // src/components/Dialog/Dialog.tsx
-import React83, {
-  useCallback as useCallback17,
+import React85, {
+  useCallback as useCallback18,
   useEffect as useEffect25,
   useState as useState21
 } from "react";
@@ -13984,7 +13985,7 @@ import { RemoveScroll } from "react-remove-scroll";
 
 // src/components/FunkitProvider/FunkitProvider.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHAINS_ID_LIST } from "@funkit/core";
-import React81, {
+import React83, {
   createContext as createContext15,
   useContext as useContext12,
   useEffect as useEffect23
@@ -14203,17 +14204,17 @@ import {
   isAddress as isAddress2
 } from "@funkit/core";
 import { prepareWriteContract, writeContract } from "@wagmi/core";
-import React75, {
-  createContext as createContext11,
-  useCallback as useCallback11,
-  useContext as useContext9,
+import React78, {
+  createContext as createContext12,
+  useCallback as useCallback13,
+  useContext as useContext10,
   useEffect as useEffect20,
-  useMemo as useMemo16,
+  useMemo as useMemo17,
   useRef as useRef7,
-  useState as useState19
+  useState as useState20
 } from "react";
 import { v4 as uuid } from "uuid";
-import { useAccount as useAccount8, useNetwork as useNetwork6 } from "wagmi";
+import { useAccount as useAccount8, useNetwork as useNetwork5 } from "wagmi";
 
 // src/utils/checkout.ts
 import {
@@ -14224,6 +14225,7 @@ import {
   FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS,
   FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO,
   getAssetPriceInfoForCheckout,
+  getEnvOptions,
   Token
 } from "@funkit/core";
 import { fetchBalance } from "@wagmi/core";
@@ -14260,6 +14262,12 @@ function validateCheckoutConfig(config) {
       message: `Invalid targetChain configuration: Unsupported chain id ${config.targetChain} for checkout.`
     };
   }
+  if (!FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO[config.targetChain].isCheckoutSupported) {
+    return {
+      isValid: false,
+      message: `Invalid targetChain configuration: Unsupported testnet chain id ${config.targetChain} for checkout.`
+    };
+  }
   return { isValid: true, message: "" };
 }
 async function getPureCheckoutTokenAddress(tokenAddress, chainId) {
@@ -14307,7 +14315,8 @@ function getFunkitEnvForCheckoutEstimation({
   }
   const checkoutPaymasterAddresses = CONTRACT_ADDRESSES.checkoutPaymasterAddress;
   const sponsorAddress = checkoutPaymasterAddresses[chainId];
-  const originalEnvOptions = window.globalEnvOptions || { gasSponsor: {} };
+  const existingGlobalEnvOptions = getEnvOptions();
+  const originalEnvOptions = existingGlobalEnvOptions || { gasSponsor: {} };
   const newConfig = {
     ...originalEnvOptions,
     chain: chainId,
@@ -14383,7 +14392,7 @@ function getCheckoutStateStepNumber(state) {
 }
 
 // src/components/FunPayments/FunPaymentMethods.tsx
-import React74, { useCallback as useCallback10, useMemo as useMemo15, useState as useState18 } from "react";
+import React77, { useCallback as useCallback12, useMemo as useMemo16, useState as useState19 } from "react";
 
 // src/hooks/useFunListeners.ts
 import { useEffect as useEffect10 } from "react";
@@ -14835,8 +14844,8 @@ var WalletDecoratedIcon = () => {
 
 // src/components/ProfileDetails/FunWalletProfileViews/FWDeposit.tsx
 import { meshPreviewTransfer as meshPreviewTransfer2 } from "@funkit/core";
-import React73, { useCallback as useCallback9, useMemo as useMemo14, useState as useState17 } from "react";
-import { useAccount as useAccount7, useNetwork as useNetwork5 } from "wagmi";
+import React76, { useCallback as useCallback11, useMemo as useMemo15, useState as useState18 } from "react";
+import { useAccount as useAccount7, useNetwork as useNetwork4 } from "wagmi";
 
 // src/hooks/useMesh.tsx
 import React35, { useCallback as useCallback3, useMemo as useMemo5, useRef as useRef3, useState as useState8 } from "react";
@@ -15478,8 +15487,63 @@ var useMeshActiveNetworkInfo = (exchange) => {
 };
 
 // src/components/FunCheckoutModal/FunCheckoutConfirmationStep.tsx
-import { isAddress } from "@funkit/core";
-import React43, { useCallback as useCallback4, useMemo as useMemo7, useState as useState10 } from "react";
+import {
+  getPaymasterDataForCheckoutSponsoredTransfer,
+  isAddress
+} from "@funkit/core";
+import React43, { useCallback as useCallback5, useMemo as useMemo7, useState as useState10 } from "react";
+
+// src/hooks/useCheckoutAccountBalanceTransfer.ts
+import { useCallback as useCallback4 } from "react";
+function useCheckoutAccountBalanceTransfer(checkoutId) {
+  const { checkoutItem } = useFunkitPreCheckoutInternal(checkoutId);
+  const { funWallet, auth: funWalletAuth } = useFunkitWallet();
+  const generateCheckoutTransferOpItems = useCallback4(
+    async (toAddress, tokenAmount) => {
+      if (checkoutItem?.selectedSourceAssetInfo?.chainId) {
+        const newConfig = getFunkitEnvForCheckoutEstimation({
+          chainId: checkoutItem.selectedSourceAssetInfo.chainId,
+          bypassWalletInit: false
+        });
+        const userId = await funWalletAuth?.getUserId();
+        if (funWallet && funWalletAuth && userId && checkoutItem?.selectedSourceAssetInfo?.symbol && tokenAmount) {
+          const transferParams = {
+            to: toAddress,
+            token: checkoutItem?.selectedSourceAssetInfo?.symbol,
+            amount: tokenAmount
+          };
+          console.log("funWallet", funWallet);
+          console.log("funWalletAuth", funWalletAuth);
+          console.log("newConfig", newConfig);
+          console.log("userId", userId);
+          console.log("transferParams", transferParams);
+          const transferOp = await funWallet.transfer(
+            funWalletAuth,
+            userId,
+            transferParams,
+            newConfig
+          );
+          console.log("transferOp", transferOp);
+          return {
+            rFunWallet: funWallet,
+            rFunWalletAuth: funWalletAuth,
+            transferOp
+          };
+        }
+      }
+      return { rFunWallet: null, rFunWalletAuth: null, transferOp: null };
+    },
+    [
+      checkoutItem?.selectedSourceAssetInfo.chainId,
+      checkoutItem?.selectedSourceAssetInfo?.symbol,
+      funWallet,
+      funWalletAuth
+    ]
+  );
+  return {
+    generateCheckoutTransferOpItems
+  };
+}
 
 // src/utils/formatNumber.ts
 var FORMAT_NUMBER_DEFAULT = {
@@ -15640,12 +15704,14 @@ var funLinkButtonStyle = "FunButton_funLinkButtonStyle__1tyx5nu0";
 function FunLinkButton({
   onClick,
   text,
-  textProps
+  textProps,
+  hasPadding = true
 }) {
   return /* @__PURE__ */ React36.createElement(Box, {
     as: "button",
     onClick,
-    className: funLinkButtonStyle
+    className: funLinkButtonStyle,
+    paddingLeft: hasPadding ? "4" : "0"
   }, /* @__PURE__ */ React36.createElement(Text, {
     color: "modalText",
     size: "12",
@@ -15897,11 +15963,15 @@ var animateContentOutClass = "FunCheckoutConfirmation_animateContentOutClass__1c
 
 // src/components/FunCheckoutModal/FunCheckoutPrimaryInfo.tsx
 import React42, { useEffect as useEffect11, useState as useState9 } from "react";
+var FALLBACK_CHECKOUT_ITEM_DESCRIPTION = "";
+var FALLBACK_CHECKOUT_ITEM_AMOUNT = "";
 function CheckoutPrimaryInfoSnapshot({
   checkoutItem,
   isLoading
 }) {
   const checkoutConfig = checkoutItem.initSettings.config;
+  const showCheckoutItemDescription = !!checkoutConfig?.checkoutItemDescription;
+  const showCheckoutItemAmount = isNotNullish(checkoutConfig?.checkoutItemAmount) && checkoutConfig.checkoutItemAmount > 0;
   return /* @__PURE__ */ React42.createElement(Box, {
     display: "flex",
     gap: "12",
@@ -15938,20 +16008,20 @@ function CheckoutPrimaryInfoSnapshot({
     hasBorder: false,
     paddingY: "0",
     paddingX: "0"
-  }), /* @__PURE__ */ React42.createElement(FunKeyValue, {
-    keyText: checkoutConfig?.checkoutItemDescription || "Amount",
-    keyTextSize: "18",
+  }), showCheckoutItemDescription || showCheckoutItemAmount ? /* @__PURE__ */ React42.createElement(FunKeyValue, {
+    keyText: checkoutConfig?.checkoutItemDescription || FALLBACK_CHECKOUT_ITEM_DESCRIPTION,
+    keyTextSize: "14",
     keyTextColor: "modalTextDim",
-    valueText: formatCryptoAndStringify(
-      checkoutConfig?.targetAssetAmount
-    ),
-    valueTextSize: "18",
+    keyTextWeight: "medium",
+    valueText: showCheckoutItemAmount ? formatCryptoAndStringify(checkoutConfig?.checkoutItemAmount) : FALLBACK_CHECKOUT_ITEM_AMOUNT,
+    valueTextSize: "14",
     valueTextColor: "modalTextDim",
+    valueTextWeight: "medium",
     backgroundBaseColor: void 0,
     hasBorder: false,
     paddingY: "0",
     paddingX: "0"
-  })));
+  }) : null));
 }
 function CheckoutPrimaryInfo({
   checkoutId
@@ -15991,6 +16061,7 @@ function FunCheckoutConfirmationStep({
     () => checkoutItem?.quoteErrorMessage !== "",
     [checkoutItem?.quoteErrorMessage]
   );
+  const { generateCheckoutTransferOpItems } = useCheckoutAccountBalanceTransfer(checkoutId);
   const [isConfirming, setIsConfirming] = useState10(false);
   const [confirmationError, setConfirmationError] = useState10("");
   const hasCheckoutConfirmationError = useMemo7(
@@ -16003,7 +16074,7 @@ function FunCheckoutConfirmationStep({
     () => postCheckoutError !== "",
     [postCheckoutError]
   );
-  const handleMeshPostCheckout = useCallback4(
+  const handleMeshPostCheckout = useCallback5(
     async (depositAddress) => {
       if (!funkitConfig?.apiKey) {
         throw new Error("Invalid funkit apiKey");
@@ -16037,34 +16108,41 @@ function FunCheckoutConfirmationStep({
       selectedPaymentMethodInfo?.meta?.accessToken?.brokerName
     ]
   );
-  const handleAccountBalancePostCheckout = useCallback4(
+  const handleAccountBalancePostCheckout = useCallback5(
     async (depositAddress) => {
-      const userId = await funWalletAuth?.getUserId();
-      if (funWallet && funWalletAuth && userId && checkoutItem?.selectedSourceAssetInfo?.symbol && checkoutItem?.latestQuote?.estTotalFromAmount) {
-        const transferParams = {
-          to: depositAddress,
-          token: checkoutItem?.selectedSourceAssetInfo?.symbol,
-          amount: checkoutItem?.latestQuote?.estTotalFromAmount
-        };
-        const transferOp = await funWallet.transfer(
-          funWalletAuth,
-          userId,
-          transferParams
+      const { rFunWallet, rFunWalletAuth, transferOp } = await generateCheckoutTransferOpItems(
+        depositAddress,
+        checkoutItem?.latestQuote?.estTotalFromAmount || 0
+      );
+      if (transferOp && rFunWallet && rFunWalletAuth && funkitConfig?.apiKey) {
+        const res = await getPaymasterDataForCheckoutSponsoredTransfer({
+          depositAddress,
+          transferUserOp: transferOp.userOp,
+          apiKey: funkitConfig.apiKey
+        });
+        console.log(">res", res);
+        transferOp.userOp.paymasterAndData = res.paymasterAndData;
+        console.log(">transferOp.userOp", transferOp.userOp);
+        const signedOp = await rFunWallet.signOperation(
+          rFunWalletAuth,
+          transferOp
         );
-        if (transferOp) {
-          await funWallet.executeOperation(funWalletAuth, transferOp);
-        } else {
-        }
+        const executionRes = await rFunWallet.executeOperation(
+          rFunWalletAuth,
+          signedOp
+        );
+        console.log("Execution result", executionRes);
+      } else {
+        throw new Error("Did not initiate transfer due to missing fields");
       }
     },
     [
       checkoutItem?.latestQuote?.estTotalFromAmount,
-      checkoutItem?.selectedSourceAssetInfo?.symbol,
-      funWallet,
-      funWalletAuth
+      funkitConfig?.apiKey,
+      generateCheckoutTransferOpItems
     ]
   );
-  const handlePostCheckout = useCallback4(
+  const handlePostCheckout = useCallback5(
     async (depositAddress, confirmedPaymentMethod) => {
       try {
         setIsPostCheckoutLoading(true);
@@ -16074,7 +16152,7 @@ function FunCheckoutConfirmationStep({
           case "brokerage" /* BROKERAGE */: {
             const { previewId, previewExpiresIn } = await handleMeshPostCheckout(depositAddress);
             meshPreviewId = previewId;
-            meshPreviewExpirationTimestamp = previewExpiresIn + Date.now() / 1e3;
+            meshPreviewExpirationTimestamp = previewExpiresIn + Math.floor(Date.now() / 1e3);
             break;
           }
           case "balance" /* ACCOUNT_BALANCE */:
@@ -16101,7 +16179,7 @@ function FunCheckoutConfirmationStep({
     },
     [handleAccountBalancePostCheckout, handleMeshPostCheckout, onFinish]
   );
-  const onClickConfirm = useCallback4(async () => {
+  const onClickConfirm = useCallback5(async () => {
     if (!selectedPaymentMethodInfo) {
       return;
     }
@@ -16182,19 +16260,56 @@ function roundUpTo5DecimalPlaces(inputNumber) {
   return roundedNumber.toString();
 }
 
+// src/components/FunkitProvider/FunToastContext.tsx
+import React44, { createContext as createContext11, useCallback as useCallback6, useContext as useContext9, useState as useState11 } from "react";
+var FunToastContext = createContext11({
+  toastContent: null,
+  showToast: () => void 0,
+  hideToast: () => void 0,
+  closing: false
+});
+function useFunToast() {
+  return useContext9(FunToastContext);
+}
+function FunToastProvider({ children }) {
+  const [toastContent, setToastContent] = useState11(null);
+  const [closing, setClosing] = useState11(false);
+  const showToast = useCallback6(
+    (newToastContent, displayTimeMs = 0) => {
+      setClosing(false);
+      setToastContent({ ...newToastContent });
+      if (displayTimeMs) {
+        setTimeout(() => {
+          setClosing(true);
+          setTimeout(() => {
+            setToastContent(null);
+          }, 150);
+        }, displayTimeMs);
+      }
+    },
+    []
+  );
+  const hideToast = useCallback6(() => {
+    setToastContent(null);
+  }, []);
+  return /* @__PURE__ */ React44.createElement(FunToastContext.Provider, {
+    value: { toastContent, showToast, hideToast, closing }
+  }, children);
+}
+
 // src/components/FunMeshTwoFactorStep/FunMeshTwoFactorStep.tsx
-import React46, { useCallback as useCallback6, useEffect as useEffect13, useState as useState11 } from "react";
+import React47, { useCallback as useCallback8, useEffect as useEffect13, useState as useState12 } from "react";
 
 // src/components/TwoFaInputField/FunTwoFaInput.tsx
-import React45, {
+import React46, {
   Fragment as Fragment2,
-  useCallback as useCallback5,
+  useCallback as useCallback7,
   useEffect as useEffect12,
   useRef as useRef4
 } from "react";
 
 // src/components/FunInput/FunInput.tsx
-import React44, { forwardRef as forwardRef2 } from "react";
+import React45, { forwardRef as forwardRef2 } from "react";
 function FunInputDefault({
   prefix,
   placeholder,
@@ -16215,16 +16330,16 @@ function FunInputDefault({
   focused,
   inputClass = "inputClass"
 }) {
-  return /* @__PURE__ */ React44.createElement(Box, {
+  return /* @__PURE__ */ React45.createElement(Box, {
     color: "modalText",
     display: "flex",
     flexDirection: "column",
     gap: "8"
-  }, label && /* @__PURE__ */ React44.createElement(Text, {
+  }, label && /* @__PURE__ */ React45.createElement(Text, {
     color: textColor,
     size: "14",
     weight: "medium"
-  }, label), /* @__PURE__ */ React44.createElement(Box, {
+  }, label), /* @__PURE__ */ React45.createElement(Box, {
     background: hasBackground ? "actionButtonSecondaryBackground" : void 0,
     borderRadius: "menuButton",
     fontFamily: "body",
@@ -16235,10 +16350,10 @@ function FunInputDefault({
     borderColor: error ? "error" : focused ? "accentColor" : void 0,
     borderWidth: error && focused ? "2" : error ? "1" : focused ? "1" : "0",
     borderStyle: "solid"
-  }, prefix ? /* @__PURE__ */ React44.createElement(Box, {
+  }, prefix ? /* @__PURE__ */ React45.createElement(Box, {
     paddingLeft: "10",
     height: "max"
-  }, prefix) : null, /* @__PURE__ */ React44.createElement("input", {
+  }, prefix) : null, /* @__PURE__ */ React45.createElement("input", {
     type: inputProps?.type || "text",
     value,
     placeholder,
@@ -16286,16 +16401,16 @@ var FunInputWithRef = forwardRef2(
     focused,
     inputClass = "inputClass"
   }, ref) {
-    return /* @__PURE__ */ React44.createElement(Box, {
+    return /* @__PURE__ */ React45.createElement(Box, {
       color: "modalText",
       display: "flex",
       flexDirection: "column",
       gap: "8"
-    }, label && /* @__PURE__ */ React44.createElement(Text, {
+    }, label && /* @__PURE__ */ React45.createElement(Text, {
       color: textColor,
       size: "14",
       weight: "medium"
-    }, label), /* @__PURE__ */ React44.createElement(Box, {
+    }, label), /* @__PURE__ */ React45.createElement(Box, {
       background: hasBackground ? "actionButtonSecondaryBackground" : void 0,
       borderRadius: "menuButton",
       fontFamily: "body",
@@ -16305,10 +16420,10 @@ var FunInputWithRef = forwardRef2(
       borderColor: error ? "error" : focused ? "accentColor" : void 0,
       borderWidth: error && focused ? "2" : error ? "1" : focused ? "1" : "0",
       borderStyle: "solid"
-    }, prefix ? /* @__PURE__ */ React44.createElement(Box, {
+    }, prefix ? /* @__PURE__ */ React45.createElement(Box, {
       paddingLeft: "10",
       height: "max"
-    }, prefix) : null, /* @__PURE__ */ React44.createElement("input", {
+    }, prefix) : null, /* @__PURE__ */ React45.createElement("input", {
       ref,
       type: inputProps?.type || "text",
       value,
@@ -16338,9 +16453,9 @@ var FunInputWithRef = forwardRef2(
   }
 );
 function FunInput(props) {
-  return props.ref ? /* @__PURE__ */ React44.createElement(FunInputWithRef, {
+  return props.ref ? /* @__PURE__ */ React45.createElement(FunInputWithRef, {
     ...props
-  }) : /* @__PURE__ */ React44.createElement(FunInputDefault, {
+  }) : /* @__PURE__ */ React45.createElement(FunInputDefault, {
     ...props
   });
 }
@@ -16356,8 +16471,8 @@ var FunTwoFaInput = ({
   const inputLength = 6;
   const inputRefs = useRef4([]);
   inputRefs.current = Array(inputLength).fill(null);
-  const [focusIndex, setFocusIndex] = React45.useState(0);
-  const handleBackspace = useCallback5(
+  const [focusIndex, setFocusIndex] = React46.useState(0);
+  const handleBackspace = useCallback7(
     (index) => {
       const newValue = value.slice(0, index) + value.slice(index + 1);
       if (index > 0 && inputRefs.current[index - 1]) {
@@ -16370,7 +16485,7 @@ var FunTwoFaInput = ({
     },
     [onChange, value]
   );
-  const handleChange = useCallback5(
+  const handleChange = useCallback7(
     (changeEvent, index) => {
       const trimmedInput = changeEvent.nativeEvent.data;
       if (!/^\d*$/.test(trimmedInput) && trimmedInput !== "")
@@ -16412,21 +16527,21 @@ var FunTwoFaInput = ({
   useEffect12(() => {
     inputRefs.current[0]?.focus();
   }, []);
-  return /* @__PURE__ */ React45.createElement(Fragment2, null, /* @__PURE__ */ React45.createElement(Box, null, /* @__PURE__ */ React45.createElement(Box, {
+  return /* @__PURE__ */ React46.createElement(Fragment2, null, /* @__PURE__ */ React46.createElement(Box, null, /* @__PURE__ */ React46.createElement(Box, {
     marginBottom: "10"
-  }, /* @__PURE__ */ React45.createElement(Text, {
+  }, /* @__PURE__ */ React46.createElement(Text, {
     size: "14",
     color: "modalText"
-  }, "Code")), /* @__PURE__ */ React45.createElement(Box, {
+  }, "Code")), /* @__PURE__ */ React46.createElement(Box, {
     display: "flex",
     wrap: "nowrap",
     width: "full",
     gap: "8"
   }, Array.from({ length: inputLength }).map((_, i) => {
-    return /* @__PURE__ */ React45.createElement(Box, {
+    return /* @__PURE__ */ React46.createElement(Box, {
       key: i,
       style: { display: "flex", flex: 1 }
-    }, /* @__PURE__ */ React45.createElement(FunInputWithRef, {
+    }, /* @__PURE__ */ React46.createElement(FunInputWithRef, {
       ref: (el) => inputRefs.current[i] = el,
       inputStyle: {
         textAlign: "center"
@@ -16451,10 +16566,10 @@ var FunTwoFaInput = ({
       error: hasError,
       focused: i === focusIndex
     }));
-  })), /* @__PURE__ */ React45.createElement(Box, {
+  })), /* @__PURE__ */ React46.createElement(Box, {
     marginTop: "6",
     height: "20"
-  }, hasError && /* @__PURE__ */ React45.createElement(Text, {
+  }, hasError && /* @__PURE__ */ React46.createElement(Text, {
     size: "14",
     color: "error",
     weight: "medium"
@@ -16468,13 +16583,13 @@ function FunMeshTwoFactorStep({
   onSuccess,
   paymentMethodInfo
 }) {
-  const [twoFactorCode, setTwoFactorCode] = useState11("");
-  const [twoFactorError, setTwoFactorError] = useState11("");
-  const [isVerifying, setIsVerifying] = useState11(false);
+  const [twoFactorCode, setTwoFactorCode] = useState12("");
+  const [twoFactorError, setTwoFactorError] = useState12("");
+  const [isVerifying, setIsVerifying] = useState12(false);
   const funkitConfig = useFunkitConfig();
   const exchange = paymentMethodInfo?.meta?.accessToken?.brokerName;
   const accessToken = paymentMethodInfo?.meta?.accessToken?.accountTokens?.[0].accessToken;
-  const handleCompletion = useCallback6(async () => {
+  const handleCompletion = useCallback8(async () => {
     try {
       setIsVerifying(true);
       if (twoFactorError)
@@ -16529,19 +16644,19 @@ function FunMeshTwoFactorStep({
       handleCompletion();
     }
   }, [twoFactorCode, twoFactorError, handleCompletion]);
-  return /* @__PURE__ */ React46.createElement(Box, null, /* @__PURE__ */ React46.createElement(Box, {
+  return /* @__PURE__ */ React47.createElement(Box, null, /* @__PURE__ */ React47.createElement(Box, {
     marginY: "24"
-  }, /* @__PURE__ */ React46.createElement(Box, {
+  }, /* @__PURE__ */ React47.createElement(Box, {
     marginBottom: "10"
-  }, /* @__PURE__ */ React46.createElement(Text, {
+  }, /* @__PURE__ */ React47.createElement(Text, {
     size: "16",
     color: "modalText",
     weight: "heavy"
-  }, "Two factor required")), /* @__PURE__ */ React46.createElement(Text, {
+  }, "Two factor required")), /* @__PURE__ */ React47.createElement(Text, {
     size: "14",
     color: "modalText",
     font: "body"
-  }, "You should have received a two factor code from your ", exchange, " app. Please enter the code to confirm your transaction.")), /* @__PURE__ */ React46.createElement(FunTwoFaInput, {
+  }, "You should have received a two factor code from your ", exchange, " app. Please enter the code to confirm your transaction.")), /* @__PURE__ */ React47.createElement(FunTwoFaInput, {
     value: twoFactorCode,
     onChange: (value) => {
       setTwoFactorError("");
@@ -16550,16 +16665,16 @@ function FunMeshTwoFactorStep({
     onCompleted: handleCompletion,
     hasError: !!twoFactorError,
     errorMessage: twoFactorError
-  }), /* @__PURE__ */ React46.createElement(Box, {
+  }), /* @__PURE__ */ React47.createElement(Box, {
     width: "full",
     paddingY: "24"
-  }, /* @__PURE__ */ React46.createElement(FunButton, {
+  }, /* @__PURE__ */ React47.createElement(FunButton, {
     isDisabled: isVerifying || !!twoFactorError || twoFactorCode.length < 6,
-    titleSuffix: isVerifying ? /* @__PURE__ */ React46.createElement(Box, {
+    titleSuffix: isVerifying ? /* @__PURE__ */ React47.createElement(Box, {
       display: "flex",
       alignItems: "center",
       color: "modalText"
-    }, /* @__PURE__ */ React46.createElement(SpinnerIcon, {
+    }, /* @__PURE__ */ React47.createElement(SpinnerIcon, {
       height: 16,
       width: 16
     })) : null,
@@ -16569,21 +16684,21 @@ function FunMeshTwoFactorStep({
 }
 
 // src/components/FunModalTitleSection/FunModalTitleSection.tsx
-import React51, { useMemo as useMemo8 } from "react";
+import React52, { useMemo as useMemo8 } from "react";
 
 // src/components/CloseButton/CloseButton.tsx
-import React48 from "react";
+import React49 from "react";
 
 // src/components/Icons/Close.tsx
-import React47 from "react";
+import React48 from "react";
 var CloseIcon = () => {
-  return /* @__PURE__ */ React47.createElement("svg", {
+  return /* @__PURE__ */ React48.createElement("svg", {
     width: "16",
     height: "15",
     viewBox: "0 0 16 15",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React47.createElement("path", {
+  }, /* @__PURE__ */ React48.createElement("path", {
     d: "M3.30542 12.1036C3.72144 12.5137 4.44214 12.4962 4.823 12.1153L7.95777 8.98053L11.0808 12.1094C11.4851 12.5137 12.1824 12.5137 12.5925 12.0977C13.0085 11.6817 13.0144 10.9844 12.6101 10.5801L9.48706 7.45123L12.6101 4.32819C13.0144 3.92389 13.0085 3.22663 12.5925 2.81647C12.1765 2.40045 11.4851 2.39459 11.0808 2.79889L7.95777 5.92194L4.823 2.79303C4.44214 2.41217 3.72144 2.39459 3.30542 2.81061C2.89527 3.22663 2.90699 3.94147 3.29371 4.32233L6.42847 7.45123L3.29371 10.586C2.90699 10.9669 2.88941 11.6876 3.30542 12.1036Z",
     fill: "currentColor"
   }));
@@ -16595,7 +16710,7 @@ var CloseButton = ({
   onClose
 }) => {
   const mobile = isMobile();
-  return /* @__PURE__ */ React48.createElement(Box, {
+  return /* @__PURE__ */ React49.createElement(Box, {
     alignItems: "center",
     "aria-label": ariaLabel,
     as: "button",
@@ -16617,29 +16732,29 @@ var CloseButton = ({
     style: { willChange: "transform" },
     transition: "default",
     type: "button"
-  }, /* @__PURE__ */ React48.createElement(CloseIcon, null));
+  }, /* @__PURE__ */ React49.createElement(CloseIcon, null));
 };
 
 // src/components/FunButton/FunBackButton.tsx
-import React50 from "react";
+import React51 from "react";
 
 // src/components/Icons/FunBackIcon.tsx
-import React49 from "react";
+import React50 from "react";
 var FunBackIcon = () => {
-  return /* @__PURE__ */ React49.createElement("svg", {
+  return /* @__PURE__ */ React50.createElement("svg", {
     width: "11",
     height: "11",
     viewBox: "0 0 11 11",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React49.createElement("g", {
+  }, /* @__PURE__ */ React50.createElement("g", {
     clipPath: "url(#clip0_1147_6600)"
-  }, /* @__PURE__ */ React49.createElement("path", {
+  }, /* @__PURE__ */ React50.createElement("path", {
     d: "M2.97379 6.16578L5.91982 9.37734C6.1579 9.65799 6.1234 10.0785 5.84275 10.3166C5.56211 10.5547 5.14158 10.5202 4.9035 10.2395L0.985839 5.96877C0.929505 5.91217 0.883855 5.84586 0.851087 5.77304C0.810339 5.68251 0.790374 5.58401 0.792656 5.48476L0.792666 5.48415C0.794934 5.38512 0.819194 5.28783 0.863688 5.19933C0.868015 5.19076 0.872526 5.18229 0.877218 5.17391C0.904371 5.12533 0.937553 5.08037 0.975975 5.04011L4.9978 0.700942C5.24798 0.431015 5.66961 0.415021 5.93953 0.6652C6.20944 0.91538 6.22544 1.33702 5.97527 1.60694L2.98514 4.833H10.1261C10.4941 4.833 10.7925 5.13136 10.7925 5.4994C10.7925 5.86744 10.4941 6.16579 10.1261 6.16579H2.97379V6.16578Z",
     fill: "currentColor"
-  })), /* @__PURE__ */ React49.createElement("defs", null, /* @__PURE__ */ React49.createElement("clipPath", {
+  })), /* @__PURE__ */ React50.createElement("defs", null, /* @__PURE__ */ React50.createElement("clipPath", {
     id: "clip0_1147_6600"
-  }, /* @__PURE__ */ React49.createElement("rect", {
+  }, /* @__PURE__ */ React50.createElement("rect", {
     width: "10",
     height: "10",
     fill: "currentColor",
@@ -16650,7 +16765,7 @@ var FunBackIcon = () => {
 // src/components/FunButton/FunBackButton.tsx
 var FunBackButton = ({ onBack }) => {
   const mobile = isMobile();
-  return /* @__PURE__ */ React50.createElement(Box, {
+  return /* @__PURE__ */ React51.createElement(Box, {
     alignItems: "center",
     as: "button",
     background: "modalBackground",
@@ -16671,7 +16786,7 @@ var FunBackButton = ({ onBack }) => {
     style: { willChange: "transform" },
     transition: "default",
     type: "button"
-  }, /* @__PURE__ */ React50.createElement(FunBackIcon, null));
+  }, /* @__PURE__ */ React51.createElement(FunBackIcon, null));
 };
 
 // src/components/FunModalTitleSection/FunModalTitleSection.css.ts
@@ -16689,7 +16804,7 @@ function FunModalTitleSection({
   skipBackDelay = false,
   customJustifyContentStyle = void 0
 }) {
-  const [animateOut, setAnimateOut] = React51.useState(false);
+  const [animateOut, setAnimateOut] = React52.useState(false);
   const justifyContentStyle = useMemo8(() => {
     let contentStyle = "space-between";
     let addFakeBackButtonSpacer = false;
@@ -16710,12 +16825,12 @@ function FunModalTitleSection({
         return { contentStyle, addFakeBackButtonSpacer };
     }
   }, [customJustifyContentStyle, title, hasCloseButton, hasBackButton]);
-  return /* @__PURE__ */ React51.createElement(Box, {
+  return /* @__PURE__ */ React52.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: justifyContentStyle?.contentStyle,
     width: "full"
-  }, hasBackButton ? /* @__PURE__ */ React51.createElement(Box, null, /* @__PURE__ */ React51.createElement(FunBackButton, {
+  }, hasBackButton ? /* @__PURE__ */ React52.createElement(Box, null, /* @__PURE__ */ React52.createElement(FunBackButton, {
     onBack: () => {
       if (backAnimation) {
         setAnimateOut(true);
@@ -16730,75 +16845,75 @@ function FunModalTitleSection({
       onBack();
       setAnimateOut(false);
     }
-  })) : null, justifyContentStyle?.addFakeBackButtonSpacer && /* @__PURE__ */ React51.createElement(Box, {
+  })) : null, justifyContentStyle?.addFakeBackButtonSpacer && /* @__PURE__ */ React52.createElement(Box, {
     width: "20",
     height: "20"
-  }), /* @__PURE__ */ React51.createElement(Text, {
+  }), /* @__PURE__ */ React52.createElement(Text, {
     as: "h1",
     color: "modalText",
     size: "18",
     weight: "bold",
     testId: "fun-modal-title-section",
     className: animateOut ? animateTitleOutClass : animateTitleInClass
-  }, title), hasCloseButton ? /* @__PURE__ */ React51.createElement(Box, null, /* @__PURE__ */ React51.createElement(CloseButton, {
+  }, title), hasCloseButton ? /* @__PURE__ */ React52.createElement(Box, null, /* @__PURE__ */ React52.createElement(CloseButton, {
     onClose
   })) : null);
 }
 
 // src/components/FunOnramp/FunOnrampConfirmationStep.tsx
-import React54, { useEffect as useEffect14, useMemo as useMemo9 } from "react";
+import React55, { useEffect as useEffect14, useMemo as useMemo9 } from "react";
 
 // src/components/FunOnramp/FunOnrampPrimaryItem.tsx
-import React53 from "react";
+import React54 from "react";
 
 // src/components/Icons/EthereumIcon.tsx
-import React52 from "react";
+import React53 from "react";
 var EthereumIcon = () => {
-  return /* @__PURE__ */ React52.createElement("svg", {
+  return /* @__PURE__ */ React53.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "28",
     height: "28",
     fill: "none"
-  }, /* @__PURE__ */ React52.createElement("path", {
+  }, /* @__PURE__ */ React53.createElement("path", {
     fill: "#25292E",
     fillRule: "evenodd",
     d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z",
     clipRule: "evenodd"
-  }), /* @__PURE__ */ React52.createElement("path", {
+  }), /* @__PURE__ */ React53.createElement("path", {
     fill: "url(#a)",
     fillOpacity: ".3",
     fillRule: "evenodd",
     d: "M14 28a14 14 0 1 0 0-28 14 14 0 0 0 0 28Z",
     clipRule: "evenodd"
-  }), /* @__PURE__ */ React52.createElement("path", {
+  }), /* @__PURE__ */ React53.createElement("path", {
     fill: "url(#b)",
     d: "M8.19 14.77 14 18.21l5.8-3.44-5.8 8.19-5.81-8.19Z"
-  }), /* @__PURE__ */ React52.createElement("path", {
+  }), /* @__PURE__ */ React53.createElement("path", {
     fill: "#fff",
     d: "m14 16.93-5.81-3.44L14 4.34l5.81 9.15L14 16.93Z"
-  }), /* @__PURE__ */ React52.createElement("defs", null, /* @__PURE__ */ React52.createElement("linearGradient", {
+  }), /* @__PURE__ */ React53.createElement("defs", null, /* @__PURE__ */ React53.createElement("linearGradient", {
     id: "a",
     x1: "0",
     x2: "14",
     y1: "0",
     y2: "28",
     gradientUnits: "userSpaceOnUse"
-  }, /* @__PURE__ */ React52.createElement("stop", {
+  }, /* @__PURE__ */ React53.createElement("stop", {
     stopColor: "#fff"
-  }), /* @__PURE__ */ React52.createElement("stop", {
+  }), /* @__PURE__ */ React53.createElement("stop", {
     offset: "1",
     stopColor: "#fff",
     stopOpacity: "0"
-  })), /* @__PURE__ */ React52.createElement("linearGradient", {
+  })), /* @__PURE__ */ React53.createElement("linearGradient", {
     id: "b",
     x1: "14",
     x2: "14",
     y1: "14.77",
     y2: "22.96",
     gradientUnits: "userSpaceOnUse"
-  }, /* @__PURE__ */ React52.createElement("stop", {
+  }, /* @__PURE__ */ React53.createElement("stop", {
     stopColor: "#fff"
-  }), /* @__PURE__ */ React52.createElement("stop", {
+  }), /* @__PURE__ */ React53.createElement("stop", {
     offset: "1",
     stopColor: "#fff",
     stopOpacity: ".9"
@@ -16808,11 +16923,11 @@ var EthereumIcon = () => {
 // src/components/FunOnramp/FunOnrampPrimaryItem.tsx
 var TOKEN_MAP = {
   usdc: {
-    icon: /* @__PURE__ */ React53.createElement(USDCIcon, null),
+    icon: /* @__PURE__ */ React54.createElement(USDCIcon, null),
     name: "USDC"
   },
   eth: {
-    icon: /* @__PURE__ */ React53.createElement(EthereumIcon, null),
+    icon: /* @__PURE__ */ React54.createElement(EthereumIcon, null),
     name: "ETH"
   }
 };
@@ -16820,11 +16935,11 @@ function FunOnrampPrimaryItem({
   token,
   tokenAmountUsd
 }) {
-  return /* @__PURE__ */ React53.createElement(Box, {
+  return /* @__PURE__ */ React54.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center"
-  }, /* @__PURE__ */ React53.createElement(Box, {
+  }, /* @__PURE__ */ React54.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -16832,22 +16947,22 @@ function FunOnrampPrimaryItem({
     borderRadius: "16",
     paddingX: "12",
     paddingY: "10"
-  }, /* @__PURE__ */ React53.createElement(Box, {
+  }, /* @__PURE__ */ React54.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     gap: "10"
-  }, /* @__PURE__ */ React53.createElement(Box, {
+  }, /* @__PURE__ */ React54.createElement(Box, {
     display: "flex",
     alignItems: "center"
-  }, TOKEN_MAP[token.toLowerCase()]?.icon), /* @__PURE__ */ React53.createElement(Box, null, /* @__PURE__ */ React53.createElement(Text, {
+  }, TOKEN_MAP[token.toLowerCase()]?.icon), /* @__PURE__ */ React54.createElement(Box, null, /* @__PURE__ */ React54.createElement(Text, {
     color: "modalText",
     size: "14",
     weight: "medium"
-  }, TOKEN_MAP[token.toLowerCase()]?.name)))), /* @__PURE__ */ React53.createElement(Box, {
+  }, TOKEN_MAP[token.toLowerCase()]?.name)))), /* @__PURE__ */ React54.createElement(Box, {
     display: "flex",
     paddingY: "8"
-  }, /* @__PURE__ */ React53.createElement(Text, {
+  }, /* @__PURE__ */ React54.createElement(Text, {
     as: "h1",
     weight: "heavy",
     color: "modalText",
@@ -16874,48 +16989,48 @@ function FunOnrampConfirmationStep({
     onInitialization();
   }, []);
   const hasError = useMemo9(() => estimationError !== "", [estimationError]);
-  return /* @__PURE__ */ React54.createElement(Box, null, /* @__PURE__ */ React54.createElement(Box, {
+  return /* @__PURE__ */ React55.createElement(Box, null, /* @__PURE__ */ React55.createElement(Box, {
     paddingBottom: "30"
-  }, /* @__PURE__ */ React54.createElement(FunOnrampPrimaryItem, {
+  }, /* @__PURE__ */ React55.createElement(FunOnrampPrimaryItem, {
     token,
     tokenAmountUsd
-  })), /* @__PURE__ */ React54.createElement(Box, {
+  })), /* @__PURE__ */ React55.createElement(Box, {
     paddingBottom: "24"
-  }, /* @__PURE__ */ React54.createElement(ExistingPaymentMethodItem, {
+  }, /* @__PURE__ */ React55.createElement(ExistingPaymentMethodItem, {
     isClickable: false,
     paymentMethodInfo
-  })), /* @__PURE__ */ React54.createElement(Box, {
+  })), /* @__PURE__ */ React55.createElement(Box, {
     paddingBottom: "24"
-  }, /* @__PURE__ */ React54.createElement(FunTransactionSummary, {
+  }, /* @__PURE__ */ React55.createElement(FunTransactionSummary, {
     estFees: estimatedFees,
     estTime: estimatedProcessingTime,
     hasTotal: true,
     total: totalAmountUsd,
     isLoading: isFetchingEstimatedFees,
     errorMessage: estimationError
-  })), /* @__PURE__ */ React54.createElement(Box, {
+  })), /* @__PURE__ */ React55.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "4"
-  }, /* @__PURE__ */ React54.createElement(FunButton, {
+  }, /* @__PURE__ */ React55.createElement(FunButton, {
     title: "Confirm Order",
     type: "primary",
     titleWeight: "semibold",
     onClick: onConfirm,
     isDisabled: isFetchingEstimatedFees || isConfirming || hasError,
-    titleSuffix: isConfirming ? /* @__PURE__ */ React54.createElement(Box, {
+    titleSuffix: isConfirming ? /* @__PURE__ */ React55.createElement(Box, {
       display: "flex",
       alignItems: "center",
       color: "modalText"
-    }, /* @__PURE__ */ React54.createElement(SpinnerIcon, {
+    }, /* @__PURE__ */ React55.createElement(SpinnerIcon, {
       height: 16,
       width: 16
     })) : null
-  }), /* @__PURE__ */ React54.createElement(FunTermsAndConditionsTextButton, null)));
+  }), /* @__PURE__ */ React55.createElement(FunTermsAndConditionsTextButton, null)));
 }
 
 // src/components/FunOnramp/FunOnrampInputStep.tsx
-import React55 from "react";
+import React56 from "react";
 
 // src/components/FunOnramp/FunOnramp.css.ts
 var animateContentInClass2 = "FunOnramp_animateContentInClass__ryaofh2";
@@ -16931,18 +17046,18 @@ function FunOnrampInputStep({
   backAnimation = false
 }) {
   const theme = funTheme();
-  return /* @__PURE__ */ React55.createElement(Box, {
+  return /* @__PURE__ */ React56.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "space-between",
     className: backAnimation ? animateContentOutClass2 : animateContentInClass2
-  }, /* @__PURE__ */ React55.createElement(Box, {
+  }, /* @__PURE__ */ React56.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: "8"
-  }, /* @__PURE__ */ React55.createElement(Box, {
+  }, /* @__PURE__ */ React56.createElement(Box, {
     display: "flex",
     alignItems: "center",
     gap: "8",
@@ -16950,24 +17065,24 @@ function FunOnrampInputStep({
     paddingX: "12",
     paddingY: "8",
     borderRadius: "16"
-  }, /* @__PURE__ */ React55.createElement(USDCIcon, null), /* @__PURE__ */ React55.createElement(Text, {
+  }, /* @__PURE__ */ React56.createElement(USDCIcon, null), /* @__PURE__ */ React56.createElement(Text, {
     size: "14",
     color: "modalText"
-  }, tokenTicker)), /* @__PURE__ */ React55.createElement(Box, {
+  }, tokenTicker)), /* @__PURE__ */ React56.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
     gap: "8",
     width: "full"
-  }, /* @__PURE__ */ React55.createElement(FunInput, {
+  }, /* @__PURE__ */ React56.createElement(FunInput, {
     value: amount,
     placeholder: "0.00",
     onChange: (newAmount) => onChangeAmount(newAmount.target.value),
-    prefix: /* @__PURE__ */ React55.createElement(Box, {
+    prefix: /* @__PURE__ */ React56.createElement(Box, {
       display: "flex",
       alignItems: "center",
       paddingLeft: "32"
-    }, /* @__PURE__ */ React55.createElement(Text, {
+    }, /* @__PURE__ */ React56.createElement(Text, {
       color: "modalText",
       style: {
         paddingBottom: 2,
@@ -16989,7 +17104,7 @@ function FunOnrampInputStep({
     hasBackground: false,
     textColor: "modalText",
     inputClass: "inputClassWhite"
-  }))), /* @__PURE__ */ React55.createElement(FunButton, {
+  }))), /* @__PURE__ */ React56.createElement(FunButton, {
     title: "Continue",
     isDisabled: (parseFloat(amount) || 0) <= 0,
     onClick: onClickContinue
@@ -16997,7 +17112,7 @@ function FunOnrampInputStep({
 }
 
 // src/components/FunOnramp/FunOnrampProcessingStep.tsx
-import React58, { useEffect as useEffect15, useState as useState12 } from "react";
+import React59, { useEffect as useEffect15, useState as useState13 } from "react";
 
 // src/utils/formatTimestamp.ts
 var fullMonthNames = [
@@ -17059,18 +17174,18 @@ function formatTimestamp(date, shortened = false) {
 }
 
 // src/components/FunProgressBar/FunVerticalProgressBar.tsx
-import React57 from "react";
+import React58, { Fragment as Fragment3 } from "react";
 
 // src/components/Icons/WhiteDotIcon.tsx
-import React56 from "react";
+import React57 from "react";
 var WhiteDotIcon = () => {
-  return /* @__PURE__ */ React56.createElement("svg", {
+  return /* @__PURE__ */ React57.createElement("svg", {
     width: "15",
     height: "15",
     viewBox: "0 0 15 15",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React56.createElement("rect", {
+  }, /* @__PURE__ */ React57.createElement("rect", {
     width: "15",
     height: "15",
     rx: "4",
@@ -17079,7 +17194,7 @@ var WhiteDotIcon = () => {
 };
 
 // src/components/FunProgressBar/FunVerticalProgressBar.tsx
-var ColoredLine = () => /* @__PURE__ */ React57.createElement(Box, {
+var ColoredLine = () => /* @__PURE__ */ React58.createElement(Box, {
   borderStyle: "dotted",
   borderColor: "solidLine",
   borderWidth: "2",
@@ -17088,6 +17203,22 @@ var ColoredLine = () => /* @__PURE__ */ React57.createElement(Box, {
   style: { borderLeft: "none" },
   flexDirection: "column"
 });
+var LabelContent = ({ labelItem }) => /* @__PURE__ */ React58.createElement(Fragment3, null, /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Text, {
+  as: "h1",
+  weight: "semibold",
+  color: "modalText",
+  size: "12"
+}, labelItem.text)), /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(Text, {
+  as: "h1",
+  color: "modalText",
+  weight: "regular",
+  size: "10"
+}, labelItem.description)), labelItem.linkText && labelItem.linkUrl ? /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(FunLinkButton, {
+  text: labelItem.linkText,
+  onClick: () => window.open(labelItem.linkUrl, "_blank"),
+  hasPadding: false,
+  textProps: { size: "10", weight: "regular" }
+})) : null);
 function FunVerticalProgressBar({
   step,
   totalSteps,
@@ -17100,73 +17231,53 @@ function FunVerticalProgressBar({
     throw new Error("There must be a label for each step");
   }
   const steps = Array.from({ length: totalSteps - 1 }, (_, index) => index + 1);
-  const firstBlock = /* @__PURE__ */ React57.createElement(Box, {
+  const firstBlock = /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     justifyContent: "flex-start",
     gap: "10"
-  }, /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     alignItems: "center",
     color: "modalText",
     flexDirection: "column"
-  }, /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(WhiteDotIcon, null)), /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(WhiteDotIcon, null)), /* @__PURE__ */ React58.createElement(Box, {
     height: "full"
-  }, /* @__PURE__ */ React57.createElement(ColoredLine, null))), labels && labels[0] ? /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(ColoredLine, null))), labels && labels[0] ? /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     justifyContent: "flex-start",
     marginBottom: "18"
-  }, /* @__PURE__ */ React57.createElement(Box, {
-    gap: "5"
-  }, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    weight: "semibold",
-    color: "modalText",
-    size: "12"
-  }, labels[0].text)), /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    color: "modalText",
-    weight: "regular",
-    size: "10"
-  }, labels[0].description))) : null);
-  const lastBlock = /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(LabelContent, {
+    labelItem: labels[0]
+  })) : null);
+  const lastBlock = /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     justifyContent: "flex-start",
     gap: "10",
     style: {
       opacity: step === totalSteps ? "100%" : "50%"
     }
-  }, /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     alignItems: "center",
     color: "modalText",
     flexDirection: "column"
-  }, /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(Box, {
     height: "full"
-  }, /* @__PURE__ */ React57.createElement(ColoredLine, null)), /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(WhiteDotIcon, null))), labels && labels.slice(-1)[0] ? /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(ColoredLine, null)), /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(WhiteDotIcon, null))), labels && labels.slice(-1)[0] ? /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     justifyContent: "flex-end",
     marginTop: "18"
-  }, /* @__PURE__ */ React57.createElement(Box, {
-    gap: "5"
-  }, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    weight: "semibold",
-    color: "modalText",
-    size: "12"
-  }, labels.slice(-1)[0].text)), /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    color: "modalText",
-    weight: "regular",
-    size: "10"
-  }, labels.slice(-1)[0].description))) : null);
-  return /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(LabelContent, {
+    labelItem: labels.slice(-1)[0]
+  })) : null);
+  return /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     height: "full",
     alignItems: "flex-start",
     flexDirection: "column"
-  }, firstBlock, steps.slice(1, steps.length).map((_, index) => /* @__PURE__ */ React57.createElement(Box, {
+  }, firstBlock, steps.slice(1, steps.length).map((_, index) => /* @__PURE__ */ React58.createElement(Box, {
     id: "step-right",
     display: "flex",
     height: "full",
@@ -17175,39 +17286,27 @@ function FunVerticalProgressBar({
     gap: "10",
     style: { opacity: index + 1 <= step - 1 ? "100%" : "50%", flex: 1 },
     key: index
-  }, /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "space-between",
     color: "modalText",
-    style: { height: 68 }
-  }, /* @__PURE__ */ React57.createElement(Box, {
+    style: { height: 90 }
+  }, /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     style: { flex: 1 }
-  }, /* @__PURE__ */ React57.createElement(ColoredLine, null)), /* @__PURE__ */ React57.createElement(Box, null, /* @__PURE__ */ React57.createElement(WhiteDotIcon, null)), /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(ColoredLine, null)), /* @__PURE__ */ React58.createElement(Box, null, /* @__PURE__ */ React58.createElement(WhiteDotIcon, null)), /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     style: { flex: 1 }
-  }, /* @__PURE__ */ React57.createElement(ColoredLine, null))), labels && labels[index + 1] ? /* @__PURE__ */ React57.createElement(Box, {
+  }, /* @__PURE__ */ React58.createElement(ColoredLine, null))), labels && labels[index + 1] ? /* @__PURE__ */ React58.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
     paddingY: "18"
-  }, /* @__PURE__ */ React57.createElement(Box, {
-    color: "modalText"
-  }, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    weight: "semibold",
-    color: "modalText",
-    size: "12"
-  }, labels[index + 1].text)), /* @__PURE__ */ React57.createElement(Box, {
-    color: "modalText"
-  }, /* @__PURE__ */ React57.createElement(Text, {
-    as: "h1",
-    color: "modalText",
-    weight: "regular",
-    size: "10"
-  }, labels[index + 1].description))) : null)), lastBlock);
+  }, /* @__PURE__ */ React58.createElement(LabelContent, {
+    labelItem: labels[index + 1]
+  })) : null)), lastBlock);
 }
 
 // src/components/FunOnramp/FunOnrampProcessingStep.tsx
@@ -17216,7 +17315,7 @@ function FunOnrampProcessingStep({
   tokenAmountUsd,
   isDepositing
 }) {
-  const [labels, setLabels] = useState12([
+  const [labels, setLabels] = useState13([
     {
       text: "Order Submitted",
       description: formatTimestamp(new Date())
@@ -17237,64 +17336,64 @@ function FunOnrampProcessingStep({
       setLabels(newLabels);
     }
   }, [isDepositing]);
-  return /* @__PURE__ */ React58.createElement(Box, {
+  return /* @__PURE__ */ React59.createElement(Box, {
     display: "flex",
     flexDirection: "column"
-  }, /* @__PURE__ */ React58.createElement(Box, {
+  }, /* @__PURE__ */ React59.createElement(Box, {
     paddingBottom: "30"
-  }, /* @__PURE__ */ React58.createElement(FunOnrampPrimaryItem, {
+  }, /* @__PURE__ */ React59.createElement(FunOnrampPrimaryItem, {
     token,
     tokenAmountUsd
-  })), /* @__PURE__ */ React58.createElement(Box, {
+  })), /* @__PURE__ */ React59.createElement(Box, {
     paddingBottom: "24"
-  }, /* @__PURE__ */ React58.createElement(FunNotification, {
+  }, /* @__PURE__ */ React59.createElement(FunNotification, {
     description: "We are currently processing your order."
-  })), /* @__PURE__ */ React58.createElement(Box, {
+  })), /* @__PURE__ */ React59.createElement(Box, {
     paddingBottom: "24"
-  }, /* @__PURE__ */ React58.createElement(Box, {
+  }, /* @__PURE__ */ React59.createElement(Box, {
     borderRadius: "menuButton",
     background: "menuItemBackground",
     display: "flex",
     alignItems: "center",
     padding: "14"
-  }, /* @__PURE__ */ React58.createElement(FunVerticalProgressBar, {
+  }, /* @__PURE__ */ React59.createElement(FunVerticalProgressBar, {
     step: isDepositing ? 2 : 3,
     totalSteps: 3,
     labels
-  }))), isDepositing ? /* @__PURE__ */ React58.createElement(Box, {
+  }))), isDepositing ? /* @__PURE__ */ React59.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center"
-  }, /* @__PURE__ */ React58.createElement(Text, {
+  }, /* @__PURE__ */ React59.createElement(Text, {
     size: "12",
     color: "modalTextDim"
-  }, "You will receive a notification when your order has finished.")) : /* @__PURE__ */ React58.createElement(React58.Fragment, null));
+  }, "You will receive a notification when your order has finished.")) : /* @__PURE__ */ React59.createElement(React59.Fragment, null));
 }
 
 // src/components/FunPayments/FunPaymentSetup.tsx
-import React72 from "react";
+import React73 from "react";
 
 // src/components/FunPayments/FunPaymentMeshType.tsx
 import {
   createFrontConnection
 } from "@front-finance/link";
-import React63, { useCallback as useCallback7, useEffect as useEffect17, useMemo as useMemo11, useState as useState14 } from "react";
+import React64, { useCallback as useCallback9, useEffect as useEffect17, useMemo as useMemo11, useState as useState15 } from "react";
 
 // src/components/FunSelect/FunSelect.tsx
-import React61, { useMemo as useMemo10, useRef as useRef6 } from "react";
-import { useState as useState13 } from "react";
+import React62, { useMemo as useMemo10, useRef as useRef6 } from "react";
+import { useState as useState14 } from "react";
 
 // src/components/Icons/FunArrows.tsx
-import React59 from "react";
+import React60 from "react";
 var FunDownArrow = () => {
-  return /* @__PURE__ */ React59.createElement("svg", {
+  return /* @__PURE__ */ React60.createElement("svg", {
     width: "24",
     height: "25",
     viewBox: "0 0 24 25",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React59.createElement("path", {
+  }, /* @__PURE__ */ React60.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M14.3787 9.5C15.715 9.5 16.3843 11.1157 15.4393 12.0607L13.0607 14.4393C12.4749 15.0251 11.5251 15.0251 10.9393 14.4393L8.56066 12.0607C7.61571 11.1157 8.28496 9.5 9.62132 9.5H14.3787Z",
@@ -17302,13 +17401,13 @@ var FunDownArrow = () => {
   }));
 };
 var FunUpArrow = () => {
-  return /* @__PURE__ */ React59.createElement("svg", {
+  return /* @__PURE__ */ React60.createElement("svg", {
     width: "24",
     height: "25",
     viewBox: "0 0 24 25",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React59.createElement("path", {
+  }, /* @__PURE__ */ React60.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M9.62132 15C8.28496 15 7.61571 13.3843 8.56066 12.4393L10.9393 10.0607C11.5251 9.47487 12.4749 9.47487 13.0607 10.0607L15.4393 12.4393C16.3843 13.3843 15.715 15 14.3787 15L9.62132 15Z",
@@ -17316,13 +17415,13 @@ var FunUpArrow = () => {
   }));
 };
 var FunNarrowRightArrow = () => {
-  return /* @__PURE__ */ React59.createElement("svg", {
+  return /* @__PURE__ */ React60.createElement("svg", {
     width: "19",
     height: "19",
     viewBox: "0 0 19 19",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React59.createElement("path", {
+  }, /* @__PURE__ */ React60.createElement("path", {
     d: "M15.5 9.5L3.5 9.5M15.5 9.5L12.5 6.5M15.5 9.5L12.5 12.5",
     stroke: "currentColor",
     strokeWidth: "1.5",
@@ -17331,13 +17430,13 @@ var FunNarrowRightArrow = () => {
   }));
 };
 var FunNarrowDownArrow = () => {
-  return /* @__PURE__ */ React59.createElement("svg", {
+  return /* @__PURE__ */ React60.createElement("svg", {
     width: "19",
     height: "19",
     viewBox: "0 0 19 19",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React59.createElement("path", {
+  }, /* @__PURE__ */ React60.createElement("path", {
     d: "M9.5 15.5L9.5 3.5M9.5 15.5L12.5 12.5M9.5 15.5L6.5 12.5",
     stroke: "currentColor",
     strokeWidth: "1.5",
@@ -17347,7 +17446,7 @@ var FunNarrowDownArrow = () => {
 };
 
 // src/components/FunSelect/FunClickOutside.tsx
-import React60 from "react";
+import React61 from "react";
 import { useEffect as useEffect16, useRef as useRef5 } from "react";
 function FunClickOutside({
   children,
@@ -17374,7 +17473,7 @@ function FunClickOutside({
       onClick();
     }
   };
-  return /* @__PURE__ */ React60.createElement("div", {
+  return /* @__PURE__ */ React61.createElement("div", {
     ref: wrapperRef
   }, children);
 }
@@ -17392,7 +17491,7 @@ function FunSelectOptionItem({
   onClick,
   padding
 }) {
-  return /* @__PURE__ */ React61.createElement(Box, {
+  return /* @__PURE__ */ React62.createElement(Box, {
     onClick,
     borderRadius: "menuButton",
     background: {
@@ -17411,7 +17510,7 @@ function FunSelectDropdown({
   selectedValue,
   optionItemPadding = "8"
 }) {
-  return isDropdownOpen ? options?.length ? /* @__PURE__ */ React61.createElement(Box, {
+  return isDropdownOpen ? options?.length ? /* @__PURE__ */ React62.createElement(Box, {
     width: "full",
     borderRadius: "menuButton",
     boxShadow: "dialog",
@@ -17423,13 +17522,13 @@ function FunSelectDropdown({
     borderStyle: "solid",
     borderWidth: "1",
     style: { maxHeight: 200, overflowY: "auto", overflowX: "hidden" }
-  }, options.map((optionItem) => /* @__PURE__ */ React61.createElement(FunSelectOptionItem, {
+  }, options.map((optionItem) => /* @__PURE__ */ React62.createElement(FunSelectOptionItem, {
     label: optionItem.label,
     key: optionItem.value,
     isActive: selectedValue === optionItem.value,
     onClick: () => handleSelect(optionItem.value),
     padding: optionItemPadding
-  }))) : /* @__PURE__ */ React61.createElement(Text, {
+  }))) : /* @__PURE__ */ React62.createElement(Text, {
     size: "14",
     color: "modalTextSecondary",
     weight: "medium"
@@ -17443,7 +17542,7 @@ function FunSelectEntry({
   showBorder = true,
   isDisabled = false
 }) {
-  return /* @__PURE__ */ React61.createElement(Box, {
+  return /* @__PURE__ */ React62.createElement(Box, {
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
@@ -17462,16 +17561,16 @@ function FunSelectEntry({
     paddingY: "6",
     paddingLeft: "8",
     onClick
-  }, /* @__PURE__ */ React61.createElement(Box, {
+  }, /* @__PURE__ */ React62.createElement(Box, {
     color: "accentColor"
-  }, activeLabel ? activeLabel : /* @__PURE__ */ React61.createElement(Text, {
+  }, activeLabel ? activeLabel : /* @__PURE__ */ React62.createElement(Text, {
     size: "14",
     color: "modalTextSecondary"
-  }, placeholder)), /* @__PURE__ */ React61.createElement(Box, {
+  }, placeholder)), /* @__PURE__ */ React62.createElement(Box, {
     color: "accentColor",
     display: "flex",
     alignItems: "center"
-  }, isDropdownOpen ? /* @__PURE__ */ React61.createElement(FunUpArrow, null) : /* @__PURE__ */ React61.createElement(FunDownArrow, null)));
+  }, isDropdownOpen ? /* @__PURE__ */ React62.createElement(FunUpArrow, null) : /* @__PURE__ */ React62.createElement(FunDownArrow, null)));
 }
 function FunSelect({
   initValue = "",
@@ -17485,11 +17584,11 @@ function FunSelect({
     throw new Error("Duplicate values detected in FunSelect options.");
   }
   const selectRef = useRef6(null);
-  const [isDropdownOpen, setIsDropdownOpen] = useState13(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState14(false);
   const optionsMap = useMemo10(() => {
     return indexBy(options, (option) => option.value);
   }, [options]);
-  const [selectedValue, setSelectedValue] = useState13(initValue);
+  const [selectedValue, setSelectedValue] = useState14(initValue);
   const selectedLabel = useMemo10(() => {
     return optionsMap?.[selectedValue]?.label || null;
   }, [optionsMap, selectedValue]);
@@ -17503,13 +17602,13 @@ function FunSelect({
   const computedWidth = useMemo10(() => {
     return selectRef?.current?.clientWidth;
   }, [selectRef?.current]);
-  return /* @__PURE__ */ React61.createElement(Box, {
+  return /* @__PURE__ */ React62.createElement(Box, {
     fontFamily: "body",
     width: "full",
     ref: selectRef
-  }, /* @__PURE__ */ React61.createElement(FunClickOutside, {
+  }, /* @__PURE__ */ React62.createElement(FunClickOutside, {
     onClick: () => setIsDropdownOpen(false)
-  }, /* @__PURE__ */ React61.createElement(FunSelectEntry, {
+  }, /* @__PURE__ */ React62.createElement(FunSelectEntry, {
     placeholder,
     activeLabel: selectedLabel,
     isDropdownOpen,
@@ -17518,10 +17617,10 @@ function FunSelect({
     onClick: () => {
       setIsDropdownOpen(!isDropdownOpen);
     }
-  }), /* @__PURE__ */ React61.createElement(Box, {
+  }), /* @__PURE__ */ React62.createElement(Box, {
     position: "fixed",
     style: { width: computedWidth, zIndex: 5 }
-  }, /* @__PURE__ */ React61.createElement(FunSelectDropdown, {
+  }, /* @__PURE__ */ React62.createElement(FunSelectDropdown, {
     handleSelect,
     isDropdownOpen,
     options,
@@ -17530,18 +17629,18 @@ function FunSelect({
 }
 
 // src/components/Icons/SearchIcon.tsx
-import React62 from "react";
+import React63 from "react";
 var SearchIcon = () => {
-  return /* @__PURE__ */ React62.createElement("svg", {
+  return /* @__PURE__ */ React63.createElement("svg", {
     width: "24",
     height: "24",
     viewBox: "0 0 24 24",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React62.createElement("path", {
+  }, /* @__PURE__ */ React63.createElement("path", {
     d: "M10.7702 18.3002C9.28095 18.3002 7.8251 17.8586 6.5868 17.0312C5.3485 16.2038 4.38336 15.0277 3.81343 13.6518C3.2435 12.2759 3.09438 10.7618 3.38493 9.30121C3.67548 7.84054 4.39264 6.49882 5.44573 5.44573C6.49882 4.39264 7.84054 3.67548 9.30121 3.38493C10.7618 3.09438 12.2759 3.2435 13.6518 3.81343C15.0277 4.38336 16.2038 5.3485 17.0312 6.5868C17.8586 7.8251 18.3002 9.28095 18.3002 10.7702C18.3002 11.759 18.1054 12.7382 17.727 13.6518C17.3486 14.5654 16.7939 15.3955 16.0947 16.0947C15.3955 16.7939 14.5654 17.3486 13.6518 17.727C12.7382 18.1054 11.759 18.3002 10.7702 18.3002ZM10.7702 4.75024C9.58356 4.75024 8.42352 5.10214 7.43682 5.76143C6.45013 6.42071 5.68109 7.35779 5.22697 8.45414C4.77284 9.5505 4.65402 10.7568 4.88553 11.9207C5.11704 13.0846 5.68849 14.1537 6.5276 14.9928C7.36672 15.8319 8.43581 16.4034 9.5997 16.6349C10.7635 16.8664 11.9699 16.7476 13.0663 16.2935C14.1626 15.8393 15.0997 15.0703 15.759 14.0836C16.4183 13.0969 16.7702 11.9369 16.7702 10.7502C16.7702 9.15894 16.1381 7.63282 15.0128 6.5076C13.8876 5.38238 12.3615 4.75024 10.7702 4.75024Z",
     fill: "#9CA4AB"
-  }), /* @__PURE__ */ React62.createElement("path", {
+  }), /* @__PURE__ */ React63.createElement("path", {
     d: "M20 20.75C19.9015 20.7504 19.8038 20.7312 19.7128 20.6934C19.6218 20.6557 19.5392 20.6001 19.47 20.53L15.34 16.4C15.2075 16.2578 15.1354 16.0697 15.1388 15.8754C15.1422 15.6811 15.221 15.4958 15.3584 15.3583C15.4958 15.2209 15.6812 15.1422 15.8755 15.1388C16.0698 15.1354 16.2578 15.2075 16.4 15.34L20.53 19.47C20.6704 19.6106 20.7493 19.8012 20.7493 20C20.7493 20.1987 20.6704 20.3893 20.53 20.53C20.4608 20.6001 20.3782 20.6557 20.2872 20.6934C20.1962 20.7312 20.0985 20.7504 20 20.75Z",
     fill: "#9CA4AB"
   }));
@@ -17557,13 +17656,13 @@ function FunPaymentMeshType({
   onSoftHide,
   backAnimation = false
 }) {
-  const [searchInput, setSearchInput] = useState14("");
-  const [exchange, setExchange] = useState14();
-  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState14(false);
-  const [meshPreError, setMeshPreError] = useState14("");
+  const [searchInput, setSearchInput] = useState15("");
+  const [exchange, setExchange] = useState15();
+  const [isLoadingMeshModal, setIsLoadingMeshModal] = useState15(false);
+  const [meshPreError, setMeshPreError] = useState15("");
   const funkitConfig = useFunkitConfig();
   const { options } = useMeshExchanges({ fullInfo: true });
-  const [frontConnection, setFrontConnection] = useState14(null);
+  const [frontConnection, setFrontConnection] = useState15(null);
   useEffect17(() => {
     const frontConnect = createFrontConnection({
       clientId: "e1880c6d-5af8-4634-3182-08dba58a99a5",
@@ -17588,7 +17687,7 @@ function FunPaymentMeshType({
     });
     setFrontConnection({ ...frontConnect });
   }, [onFinish, onSoftHide]);
-  const onClickContinue = useCallback7(async () => {
+  const onClickContinue = useCallback9(async () => {
     try {
       setMeshPreError("");
       setIsLoadingMeshModal(true);
@@ -17616,23 +17715,23 @@ function FunPaymentMeshType({
   }, [exchange, frontConnection, funkitConfig?.apiKey, onSoftHide]);
   const canContinue = useMemo11(() => isNotNullish(exchange), [exchange]);
   const hasMeshPreError = useMemo11(() => meshPreError !== "", [meshPreError]);
-  return /* @__PURE__ */ React63.createElement(Box, {
+  return /* @__PURE__ */ React64.createElement(Box, {
     className: backAnimation ? animateContentOutClass3 : animateContentInClass3
-  }, /* @__PURE__ */ React63.createElement(Box, null, /* @__PURE__ */ React63.createElement(Text, {
+  }, /* @__PURE__ */ React64.createElement(Box, null, /* @__PURE__ */ React64.createElement(Text, {
     color: "modalTextSecondary",
     weight: "semibold"
-  }, "Select Account")), /* @__PURE__ */ React63.createElement(Box, {
+  }, "Select Account")), /* @__PURE__ */ React64.createElement(Box, {
     paddingY: "24"
-  }, /* @__PURE__ */ React63.createElement(FunInput, {
+  }, /* @__PURE__ */ React64.createElement(FunInput, {
     placeholder: "Search",
     value: searchInput,
     onChange: (e) => setSearchInput(e.target.value),
-    prefix: /* @__PURE__ */ React63.createElement(Box, {
+    prefix: /* @__PURE__ */ React64.createElement(Box, {
       display: "flex",
       alignItems: "center",
       height: "max"
-    }, /* @__PURE__ */ React63.createElement(SearchIcon, null))
-  })), /* @__PURE__ */ React63.createElement(Box, null, /* @__PURE__ */ React63.createElement(FunSelectDropdown, {
+    }, /* @__PURE__ */ React64.createElement(SearchIcon, null))
+  })), /* @__PURE__ */ React64.createElement(Box, null, /* @__PURE__ */ React64.createElement(FunSelectDropdown, {
     handleSelect: (selectedExchange) => {
       setMeshPreError("");
       setExchange(selectedExchange);
@@ -17642,23 +17741,23 @@ function FunPaymentMeshType({
       (optionItem) => optionItem?.value?.toLowerCase().includes(searchInput?.toLowerCase())
     ),
     selectedValue: exchange?.toString() || ""
-  })), /* @__PURE__ */ React63.createElement(Box, {
+  })), /* @__PURE__ */ React64.createElement(Box, {
     paddingTop: "24",
     display: "flex",
     flexDirection: "column",
     gap: "24"
-  }, /* @__PURE__ */ React63.createElement(FunNotification, {
+  }, /* @__PURE__ */ React64.createElement(FunNotification, {
     type: hasMeshPreError ? "error" : "default",
     description: hasMeshPreError ? meshPreError : "You will be redirected to Mesh to securely link your account."
-  }), /* @__PURE__ */ React63.createElement(FunButton, {
+  }), /* @__PURE__ */ React64.createElement(FunButton, {
     title: "Continue",
     onClick: onClickContinue,
     isDisabled: !canContinue || isLoadingMeshModal || hasMeshPreError,
-    titleSuffix: isLoadingMeshModal ? /* @__PURE__ */ React63.createElement(Box, {
+    titleSuffix: isLoadingMeshModal ? /* @__PURE__ */ React64.createElement(Box, {
       display: "flex",
       alignItems: "center",
       color: "modalText"
-    }, /* @__PURE__ */ React63.createElement(SpinnerIcon, {
+    }, /* @__PURE__ */ React64.createElement(SpinnerIcon, {
       height: 16,
       width: 16
     })) : null
@@ -17667,8 +17766,7 @@ function FunPaymentMeshType({
 
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 import { getMoonpayUrlSignature } from "@funkit/core";
-import React64, { useEffect as useEffect18, useMemo as useMemo12, useState as useState15 } from "react";
-import { useNetwork as useNetwork4 } from "wagmi";
+import React65, { useEffect as useEffect18, useMemo as useMemo12, useState as useState16 } from "react";
 
 // src/utils/moonpay.ts
 import { getMoonPayCheckout } from "@funkit/core";
@@ -17694,7 +17792,7 @@ var animateContentOutClassShorter = "FunPaymentMoonpayType_animateContentOutClas
 
 // src/components/FunPayments/FunPaymentMoonpayType.tsx
 var MoonPayBuyWidget = (props) => {
-  const [MoonPayBuyWidgetInner, setMoonPayBuyWidgetInner] = React64.useState(null);
+  const [MoonPayBuyWidgetInner, setMoonPayBuyWidgetInner] = React65.useState(null);
   useEffect18(() => {
     const loadMoonPayBuyWidgetInner = async () => {
       try {
@@ -17707,8 +17805,8 @@ var MoonPayBuyWidget = (props) => {
     loadMoonPayBuyWidgetInner();
   }, []);
   if (!MoonPayBuyWidgetInner)
-    return /* @__PURE__ */ React64.createElement(React64.Fragment, null, props.children);
-  return /* @__PURE__ */ React64.createElement(MoonPayBuyWidgetInner, {
+    return /* @__PURE__ */ React65.createElement(React65.Fragment, null, props.children);
+  return /* @__PURE__ */ React65.createElement(MoonPayBuyWidgetInner, {
     ...props
   }, props.children);
 };
@@ -17716,35 +17814,32 @@ function FunPaymentMoonpayType({
   paymentFlow,
   paymentAddress,
   depositToken,
-  depositUsdAmount,
+  depositTokenChainId,
+  depositTokenAmount,
   onBackToHome,
   backAnimation = false,
   redirectToCheckoutHistory
 }) {
-  const [isVisible, setIsVisible] = useState15(true);
-  const [isBackToHomeDisabled, setIsBackToHomeDisabled] = useState15(true);
-  const [currencyCode, setCurrencyCode] = useState15("");
-  const [walletAddress, setWalletAddress] = useState15("");
-  const { chain: activeChain } = useNetwork4();
+  const [isSupportedRegion, setIsSupportedRegion] = useState16(true);
+  const [isBackToHomeDisabled, setIsBackToHomeDisabled] = useState16(true);
+  const [currencyCode, setCurrencyCode] = useState16("");
+  const [walletAddress, setWalletAddress] = useState16("");
   const { appName } = useAppInfoInternal();
   const funkitConfig = useFunkitConfig();
   const fetchMoonpayUrl = async () => {
-    if (activeChain) {
-      const url = await handleGetMoonpayUrl(
-        depositToken,
-        activeChain.id,
-        paymentAddress,
-        depositUsdAmount.toString()
-      );
-      const queryParams = new URLSearchParams(url.split("?")[1]);
-      const _currencyCode = queryParams.get("currencyCode");
-      const _walletAddress = queryParams.get("walletAddress");
-      if (_currencyCode)
-        setCurrencyCode(_currencyCode);
-      if (_walletAddress)
-        setWalletAddress(_walletAddress);
-    } else {
-    }
+    const url = await handleGetMoonpayUrl(
+      depositToken,
+      parseInt(depositTokenChainId),
+      paymentAddress,
+      depositTokenAmount.toString()
+    );
+    const queryParams = new URLSearchParams(url.split("?")[1]);
+    const _currencyCode = queryParams.get("currencyCode");
+    const _walletAddress = queryParams.get("walletAddress");
+    if (_currencyCode)
+      setCurrencyCode(_currencyCode);
+    if (_walletAddress)
+      setWalletAddress(_walletAddress);
   };
   useEffect18(() => {
     fetchMoonpayUrl();
@@ -17758,32 +17853,32 @@ function FunPaymentMoonpayType({
   const description = useMemo12(() => {
     return `${appName} uses Moonpay to on-ramp ${depositToken} via credit & debit cards.`;
   }, [appName, depositToken]);
-  return /* @__PURE__ */ React64.createElement(Box, {
+  return /* @__PURE__ */ React65.createElement(Box, {
     className: backAnimation ? paymentFlow === 0 /* DEPOSIT */ ? animateContentOutClass4 : animateContentOutClassShorter : paymentFlow === 0 /* DEPOSIT */ ? animateContentInClass4 : animateContentInClassShorter
-  }, /* @__PURE__ */ React64.createElement(Box, {
+  }, /* @__PURE__ */ React65.createElement(Box, {
     gap: "10"
-  }, /* @__PURE__ */ React64.createElement(Text, {
+  }, /* @__PURE__ */ React65.createElement(Text, {
     color: "modalText",
     size: "18",
     weight: "heavy"
-  }, "Enter Payment Information")), /* @__PURE__ */ React64.createElement(Box, {
+  }, "Enter Payment Information")), /* @__PURE__ */ React65.createElement(Box, {
     paddingY: "10"
-  }, /* @__PURE__ */ React64.createElement(Text, {
+  }, /* @__PURE__ */ React65.createElement(Text, {
     color: "modalTextSecondary",
     size: "14",
     weight: "medium"
-  }, description)), !isVisible ? /* @__PURE__ */ React64.createElement(Box, {
+  }, description)), !isSupportedRegion ? /* @__PURE__ */ React65.createElement(Box, {
     paddingY: "10"
-  }, /* @__PURE__ */ React64.createElement(FunNotification, {
+  }, /* @__PURE__ */ React65.createElement(FunNotification, {
     type: "error",
     description: "You are using moonpay from an unsupported region. Please use a different payment method."
-  })) : null, /* @__PURE__ */ React64.createElement(Box, {
+  })) : null, /* @__PURE__ */ React65.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     paddingBottom: "24"
-  }, /* @__PURE__ */ React64.createElement(MoonPayBuyWidget, {
+  }, /* @__PURE__ */ React65.createElement(MoonPayBuyWidget, {
     variant: "embedded",
-    quoteCurrencyAmount: depositUsdAmount.toString(),
+    quoteCurrencyAmount: depositTokenAmount.toString(),
     currencyCode,
     walletAddress,
     onUrlSignatureRequested: handleGetSignature,
@@ -17794,40 +17889,36 @@ function FunPaymentMoonpayType({
         redirectToCheckoutHistory?.(paymentAddress);
       }
     },
-    onUnsupportedRegion: async () => {
-      if (paymentFlow === 0 /* DEPOSIT */) {
-        setIsVisible(false);
-      }
-    },
-    visible: isVisible,
+    onUnsupportedRegion: () => setIsSupportedRegion(false),
+    visible: isSupportedRegion,
     style: { margin: 0 }
-  })), paymentFlow === 0 /* DEPOSIT */ ? /* @__PURE__ */ React64.createElement(Box, {
+  })), paymentFlow === 0 /* DEPOSIT */ ? /* @__PURE__ */ React65.createElement(Box, {
     position: "absolute",
     width: "full",
     style: { bottom: 0 }
-  }, /* @__PURE__ */ React64.createElement(FunButton, {
+  }, /* @__PURE__ */ React65.createElement(FunButton, {
     title: "Back to Home",
     onClick: onBackToHome,
-    isDisabled: isBackToHomeDisabled && isVisible
+    isDisabled: isBackToHomeDisabled && isSupportedRegion
   })) : null);
 }
 
 // src/components/FunPayments/FunPaymentTransferType.tsx
-import React71 from "react";
+import React72 from "react";
 
 // src/components/ProfileDetails/FunWalletProfileViews/FWSettings/FWSettings.tsx
-import React69, { useCallback as useCallback8, useEffect as useEffect19, useState as useState16 } from "react";
+import React70, { useCallback as useCallback10, useEffect as useEffect19, useState as useState17 } from "react";
 import { useAccount as useAccount6 } from "wagmi";
 
 // src/components/FunButton/FunIconButton.tsx
-import React65 from "react";
+import React66 from "react";
 var FunIconButton = ({
   onClick,
   icon,
   size = "20",
   showBorder = true
 }) => {
-  return /* @__PURE__ */ React65.createElement(Box, {
+  return /* @__PURE__ */ React66.createElement(Box, {
     display: "flex",
     alignItems: "center",
     as: "button",
@@ -17852,41 +17943,41 @@ var FunIconButton = ({
 };
 
 // src/components/Icons/Copied.tsx
-import React66 from "react";
-var CopiedIcon = () => /* @__PURE__ */ React66.createElement("svg", {
+import React67 from "react";
+var CopiedIcon = () => /* @__PURE__ */ React67.createElement("svg", {
   fill: "none",
   height: "13",
   viewBox: "0 0 13 13",
   width: "13",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React66.createElement("path", {
+}, /* @__PURE__ */ React67.createElement("path", {
   d: "M4.94568 12.2646C5.41052 12.2646 5.77283 12.0869 6.01892 11.7109L12.39 1.96973C12.5677 1.69629 12.6429 1.44336 12.6429 1.2041C12.6429 0.561523 12.1644 0.0966797 11.5082 0.0966797C11.057 0.0966797 10.7767 0.260742 10.5033 0.691406L4.9115 9.50977L2.07458 5.98926C1.82166 5.68848 1.54822 5.55176 1.16541 5.55176C0.502319 5.55176 0.0238037 6.02344 0.0238037 6.66602C0.0238037 6.95312 0.112671 7.20605 0.358765 7.48633L3.88611 11.7588C4.18005 12.1074 4.50818 12.2646 4.94568 12.2646Z",
   fill: "currentColor"
 }));
 
 // src/components/Icons/Copy.tsx
-import React67 from "react";
-var CopyIcon = () => /* @__PURE__ */ React67.createElement("svg", {
+import React68 from "react";
+var CopyIcon = () => /* @__PURE__ */ React68.createElement("svg", {
   fill: "none",
   height: "16",
   viewBox: "0 0 17 16",
   width: "17",
   xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React67.createElement("path", {
+}, /* @__PURE__ */ React68.createElement("path", {
   d: "M3.04236 12.3027H4.18396V13.3008C4.18396 14.8525 5.03845 15.7002 6.59705 15.7002H13.6244C15.183 15.7002 16.0375 14.8525 16.0375 13.3008V6.24609C16.0375 4.69434 15.183 3.84668 13.6244 3.84668H12.4828V2.8418C12.4828 1.29688 11.6283 0.442383 10.0697 0.442383H3.04236C1.48376 0.442383 0.629272 1.29004 0.629272 2.8418V9.90332C0.629272 11.4551 1.48376 12.3027 3.04236 12.3027ZM3.23376 10.5391C2.68689 10.5391 2.39294 10.2656 2.39294 9.68457V3.06055C2.39294 2.47949 2.68689 2.21289 3.23376 2.21289H9.8783C10.4252 2.21289 10.7191 2.47949 10.7191 3.06055V3.84668H6.59705C5.03845 3.84668 4.18396 4.69434 4.18396 6.24609V10.5391H3.23376ZM6.78845 13.9365C6.24158 13.9365 5.94763 13.6699 5.94763 13.0889V6.45801C5.94763 5.87695 6.24158 5.61035 6.78845 5.61035H13.433C13.9799 5.61035 14.2738 5.87695 14.2738 6.45801V13.0889C14.2738 13.6699 13.9799 13.9365 13.433 13.9365H6.78845Z",
   fill: "currentColor"
 }));
 
 // src/components/Icons/LogoutIcon.tsx
-import React68 from "react";
+import React69 from "react";
 var LogoutIcon = () => {
-  return /* @__PURE__ */ React68.createElement("svg", {
+  return /* @__PURE__ */ React69.createElement("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React68.createElement("path", {
+  }, /* @__PURE__ */ React69.createElement("path", {
     d: "M9.33463 13.3337H4.0013C3.26492 13.3337 2.66797 12.7367 2.66797 12.0003V4.00033C2.66797 3.26395 3.26492 2.66699 4.0013 2.66699H9.33463M6.66797 8.00033H14.0013M14.0013 8.00033L12.0013 10.0003M14.0013 8.00033L12.0013 6.00033",
     stroke: "currentColor",
     strokeWidth: "1.33333",
@@ -17906,22 +17997,22 @@ function LineItem({
   value,
   valueSuffix = null
 }) {
-  return /* @__PURE__ */ React69.createElement(Box, {
+  return /* @__PURE__ */ React70.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "8"
-  }, /* @__PURE__ */ React69.createElement(Text, {
+  }, /* @__PURE__ */ React70.createElement(Text, {
     color: "modalTextSecondary",
     size: "14",
     weight: "medium"
-  }, label), /* @__PURE__ */ React69.createElement(Box, {
+  }, label), /* @__PURE__ */ React70.createElement(Box, {
     display: "flex",
     flexDirection: "row",
     gap: "8"
-  }, /* @__PURE__ */ React69.createElement(Text, {
+  }, /* @__PURE__ */ React70.createElement(Text, {
     color: "modalText",
     size: "16"
-  }, value), valueSuffix ? /* @__PURE__ */ React69.createElement(Box, {
+  }, value), valueSuffix ? /* @__PURE__ */ React70.createElement(Box, {
     display: "flex",
     alignItems: "center"
   }, valueSuffix) : null));
@@ -17930,8 +18021,8 @@ function CopyAddress({
   address,
   type
 }) {
-  const [copiedAddress, setCopiedAddress] = useState16(false);
-  const copyAddressAction = useCallback8(() => {
+  const [copiedAddress, setCopiedAddress] = useState17(false);
+  const copyAddressAction = useCallback10(() => {
     if (address) {
       navigator.clipboard.writeText(address);
       setCopiedAddress(true);
@@ -17945,19 +18036,19 @@ function CopyAddress({
       return () => clearTimeout(timer);
     }
   }, [copiedAddress]);
-  return type === "button" ? /* @__PURE__ */ React69.createElement(FunIconButton, {
-    icon: /* @__PURE__ */ React69.createElement(Box, {
+  return type === "button" ? /* @__PURE__ */ React70.createElement(FunIconButton, {
+    icon: /* @__PURE__ */ React70.createElement(Box, {
       display: "flex",
       alignItems: "center",
       color: "modalTextSecondary"
-    }, copiedAddress ? /* @__PURE__ */ React69.createElement(CopiedIcon, null) : /* @__PURE__ */ React69.createElement(CopyIcon, null)),
+    }, copiedAddress ? /* @__PURE__ */ React70.createElement(CopiedIcon, null) : /* @__PURE__ */ React70.createElement(CopyIcon, null)),
     onClick: copyAddressAction,
     showBorder: false
-  }) : type === "kv" ? /* @__PURE__ */ React69.createElement(FunKeyValue, {
+  }) : type === "kv" ? /* @__PURE__ */ React70.createElement(FunKeyValue, {
     paddingY: "14",
     paddingX: "14",
     keyText: copiedAddress ? "Address Copied" : "Copy Address",
-    valueIcon: copiedAddress ? /* @__PURE__ */ React69.createElement(CopiedIcon, null) : /* @__PURE__ */ React69.createElement(CopyIcon, null),
+    valueIcon: copiedAddress ? /* @__PURE__ */ React70.createElement(CopiedIcon, null) : /* @__PURE__ */ React70.createElement(CopyIcon, null),
     valueText: "",
     backgroundBaseColor: "modalBackground",
     onClick: copyAddressAction
@@ -17970,9 +18061,9 @@ function FWSettings({
 }) {
   const { address } = useAccount6();
   const { userEmail } = useFunkitWeb2Login();
-  const [animateOut, setAnimateOut] = useState16(false);
-  const [logoutConfirmationOpen, setLogoutConfirmationOpen] = useState16(false);
-  const handleBack = useCallback8(() => {
+  const [animateOut, setAnimateOut] = useState17(false);
+  const [logoutConfirmationOpen, setLogoutConfirmationOpen] = useState17(false);
+  const handleBack = useCallback10(() => {
     setAnimateOut(true);
     if (logoutConfirmationOpen) {
       setTimeout(() => {
@@ -17983,36 +18074,36 @@ function FWSettings({
       setTimeout(onBack, 150);
     }
   }, [logoutConfirmationOpen, onBack]);
-  return /* @__PURE__ */ React69.createElement(Box, null, /* @__PURE__ */ React69.createElement(FunModalTitleSection, {
+  return /* @__PURE__ */ React70.createElement(Box, null, /* @__PURE__ */ React70.createElement(FunModalTitleSection, {
     hasBackButton: true,
     onBack: handleBack,
     backAnimation: true,
     title: logoutConfirmationOpen ? "Logout" : "Settings",
     hasCloseButton: true,
     onClose
-  }), logoutConfirmationOpen ? /* @__PURE__ */ React69.createElement(Box, {
+  }), logoutConfirmationOpen ? /* @__PURE__ */ React70.createElement(Box, {
     paddingTop: "16",
     paddingBottom: "28",
     className: animateOut ? animateContentOutClass5 : animateContentInClass5
-  }, /* @__PURE__ */ React69.createElement(Box, {
+  }, /* @__PURE__ */ React70.createElement(Box, {
     paddingTop: "10",
     paddingBottom: "24"
-  }, /* @__PURE__ */ React69.createElement(Text, {
+  }, /* @__PURE__ */ React70.createElement(Text, {
     color: "modalTextSecondary",
     size: "14",
     weight: "medium"
-  }, "Are you sure you want to logout?")), /* @__PURE__ */ React69.createElement(Box, {
+  }, "Are you sure you want to logout?")), /* @__PURE__ */ React70.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "5"
-  }, /* @__PURE__ */ React69.createElement(FunButton, {
+  }, /* @__PURE__ */ React70.createElement(FunButton, {
     type: "warning",
     onClick: () => {
       onDisconnect();
       onClose();
     },
     title: "Logout"
-  }), /* @__PURE__ */ React69.createElement(FunButton, {
+  }), /* @__PURE__ */ React70.createElement(FunButton, {
     type: "secondary",
     onClick: () => {
       setAnimateOut(true);
@@ -18022,25 +18113,25 @@ function FWSettings({
       }, 150);
     },
     title: "Cancel"
-  }))) : /* @__PURE__ */ React69.createElement(Box, {
+  }))) : /* @__PURE__ */ React70.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "24",
     paddingTop: "16",
     paddingBottom: "28",
     className: animateOut ? animateContentOutClass5 : animateContentInClass5
-  }, /* @__PURE__ */ React69.createElement(LineItem, {
+  }, /* @__PURE__ */ React70.createElement(LineItem, {
     label: "Email",
     value: userEmail
-  }), /* @__PURE__ */ React69.createElement(LineItem, {
+  }), /* @__PURE__ */ React70.createElement(LineItem, {
     label: "Address",
     value: formatAddress(address),
-    valueSuffix: /* @__PURE__ */ React69.createElement(CopyAddress, {
+    valueSuffix: /* @__PURE__ */ React70.createElement(CopyAddress, {
       address,
       type: "button"
     })
-  }), /* @__PURE__ */ React69.createElement(FunButton, {
-    titlePrefix: /* @__PURE__ */ React69.createElement(LogoutIcon, null),
+  }), /* @__PURE__ */ React70.createElement(FunButton, {
+    titlePrefix: /* @__PURE__ */ React70.createElement(LogoutIcon, null),
     title: "Logout",
     onClick: () => {
       setAnimateOut(true);
@@ -18055,7 +18146,7 @@ function FWSettings({
 
 // src/components/QRCode/QRCode.tsx
 import QRCodeUtil from "qrcode";
-import React70, { useMemo as useMemo13 } from "react";
+import React71, { useMemo as useMemo13 } from "react";
 
 // src/components/ConnectOptions/DesktopOptions.css.ts
 var QRCodeBackgroundClassName = "DesktopOptions_QRCodeBackgroundClassName__mu4zht0";
@@ -18099,7 +18190,7 @@ function QRCode({
       const y1 = (matrix.length - 7) * cellSize * y;
       for (let i = 0; i < 3; i++) {
         dots2.push(
-          /* @__PURE__ */ React70.createElement("rect", {
+          /* @__PURE__ */ React71.createElement("rect", {
             fill: i % 2 !== 0 ? "white" : "black",
             height: cellSize * (7 - i * 2),
             key: `${i}-${x}-${y}`,
@@ -18121,7 +18212,7 @@ function QRCode({
           if (!(i < 7 && j < 7 || i > matrix.length - 8 && j < 7 || i < 7 && j > matrix.length - 8)) {
             if (!(i > matrixMiddleStart && i < matrixMiddleEnd && j > matrixMiddleStart && j < matrixMiddleEnd)) {
               dots2.push(
-                /* @__PURE__ */ React70.createElement("circle", {
+                /* @__PURE__ */ React71.createElement("circle", {
                   cx: i * cellSize + cellSize / 2,
                   cy: j * cellSize + cellSize / 2,
                   fill: "black",
@@ -18138,7 +18229,7 @@ function QRCode({
   }, [ecl, logoSize, size, uri]);
   const logoPosition = size / 2 - logoSize / 2;
   const logoWrapperSize = logoSize + logoMargin * 2;
-  return /* @__PURE__ */ React70.createElement(Box, {
+  return /* @__PURE__ */ React71.createElement(Box, {
     borderColor: "generalBorder",
     borderRadius: "menuButton",
     borderStyle: "solid",
@@ -18146,14 +18237,14 @@ function QRCode({
     className: QRCodeBackgroundClassName,
     padding,
     width: "max"
-  }, /* @__PURE__ */ React70.createElement(Box, {
+  }, /* @__PURE__ */ React71.createElement(Box, {
     style: {
       height: size,
       userSelect: "none",
       width: size
     },
     userSelect: "none"
-  }, /* @__PURE__ */ React70.createElement(Box, {
+  }, /* @__PURE__ */ React71.createElement(Box, {
     display: "flex",
     justifyContent: "center",
     position: "relative",
@@ -18163,28 +18254,28 @@ function QRCode({
       width: size
     },
     width: "full"
-  }, /* @__PURE__ */ React70.createElement(AsyncImage, {
+  }, /* @__PURE__ */ React71.createElement(AsyncImage, {
     background: logoBackground,
     borderColor: { custom: "rgba(0, 0, 0, 0.06)" },
     borderRadius: "13",
     height: logoSize,
     src: logoUrl,
     width: logoSize
-  })), /* @__PURE__ */ React70.createElement("svg", {
+  })), /* @__PURE__ */ React71.createElement("svg", {
     height: size,
     style: { all: "revert" },
     width: size
-  }, /* @__PURE__ */ React70.createElement("defs", null, /* @__PURE__ */ React70.createElement("clipPath", {
+  }, /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", {
     id: "clip-wrapper"
-  }, /* @__PURE__ */ React70.createElement("rect", {
+  }, /* @__PURE__ */ React71.createElement("rect", {
     height: logoWrapperSize,
     width: logoWrapperSize
-  })), /* @__PURE__ */ React70.createElement("clipPath", {
+  })), /* @__PURE__ */ React71.createElement("clipPath", {
     id: "clip-logo"
-  }, /* @__PURE__ */ React70.createElement("rect", {
+  }, /* @__PURE__ */ React71.createElement("rect", {
     height: logoSize,
     width: logoSize
-  }))), /* @__PURE__ */ React70.createElement("rect", {
+  }))), /* @__PURE__ */ React71.createElement("rect", {
     fill: "transparent",
     height: size,
     width: size
@@ -18201,16 +18292,16 @@ function FunPaymentTransferType({
   onBackToHome,
   backAnimation = false
 }) {
-  return /* @__PURE__ */ React71.createElement(Box, {
+  return /* @__PURE__ */ React72.createElement(Box, {
     className: backAnimation ? animateContentOutClass6 : animateContentInClass6
-  }, /* @__PURE__ */ React71.createElement(Box, {
+  }, /* @__PURE__ */ React72.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "5"
-  }, /* @__PURE__ */ React71.createElement(CopyAddress, {
+  }, /* @__PURE__ */ React72.createElement(CopyAddress, {
     type: "kv",
     address
-  }), /* @__PURE__ */ React71.createElement(Box, {
+  }), /* @__PURE__ */ React72.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -18219,19 +18310,19 @@ function FunPaymentTransferType({
     borderStyle: "solid",
     borderWidth: "1",
     borderRadius: "16"
-  }, /* @__PURE__ */ React71.createElement(QRCode, {
+  }, /* @__PURE__ */ React72.createElement(QRCode, {
     uri: address,
     logoSize: 0,
     logoMargin: 0,
     size: 360
-  })), /* @__PURE__ */ React71.createElement(Text, {
+  })), /* @__PURE__ */ React72.createElement(Text, {
     textAlign: "center",
     color: "modalTextDim",
     size: "12",
     weight: "medium"
-  }, "Scan the QR or copy and paste the payment details into your wallet.")), /* @__PURE__ */ React71.createElement(Box, {
+  }, "Scan the QR or copy and paste the payment details into your wallet.")), /* @__PURE__ */ React72.createElement(Box, {
     paddingTop: "24"
-  }, /* @__PURE__ */ React71.createElement(FunButton, {
+  }, /* @__PURE__ */ React72.createElement(FunButton, {
     title: "Back to Home",
     type: "primary",
     onClick: onBackToHome
@@ -18247,12 +18338,13 @@ function FunPaymentSetup({
   onSoftHide,
   onBackToHome,
   token,
+  tokenChainId,
   tokenAmountUsd,
   backAnimation = false,
   redirectToCheckoutHistory
 }) {
   const { optionsMap } = useMeshExchanges({ fullInfo: false });
-  return paymentMethod === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React72.createElement(FunPaymentMeshType, {
+  return paymentMethod === "brokerage" /* BROKERAGE */ ? /* @__PURE__ */ React73.createElement(FunPaymentMeshType, {
     onFinish: (meshMeta) => {
       if (meshMeta) {
         const brokerName = meshMeta?.accessToken?.brokerName;
@@ -18267,23 +18359,120 @@ function FunPaymentSetup({
     },
     onSoftHide,
     backAnimation
-  }) : paymentMethod === "transfer" /* TRANSFER */ ? /* @__PURE__ */ React72.createElement(FunPaymentTransferType, {
+  }) : paymentMethod === "transfer" /* TRANSFER */ ? /* @__PURE__ */ React73.createElement(FunPaymentTransferType, {
     address: paymentAddress,
     onBackToHome,
     backAnimation
-  }) : paymentMethod === "card" /* CARD */ ? /* @__PURE__ */ React72.createElement(FunPaymentMoonpayType, {
+  }) : paymentMethod === "card" /* CARD */ ? /* @__PURE__ */ React73.createElement(FunPaymentMoonpayType, {
     paymentFlow,
     paymentAddress,
     depositToken: token,
-    depositUsdAmount: tokenAmountUsd,
+    depositTokenChainId: tokenChainId,
+    depositTokenAmount: tokenAmountUsd,
     onBackToHome,
     backAnimation,
     redirectToCheckoutHistory
-  }) : /* @__PURE__ */ React72.createElement(Text, {
+  }) : /* @__PURE__ */ React73.createElement(Text, {
     color: "modalTextSecondary"
   }, "Unsupported payment method");
 }
 
+// src/components/FunToast/FunToast.tsx
+import React75, { useMemo as useMemo14 } from "react";
+
+// src/components/Icons/SuccessNoBorder.tsx
+import React74 from "react";
+var SuccessNoBorderIcon = () => /* @__PURE__ */ React74.createElement("svg", {
+  width: "21",
+  height: "21",
+  viewBox: "0 0 21 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /* @__PURE__ */ React74.createElement("path", {
+  d: "M5.25 10.5004L8.96228 14.2127L16.3861 6.78809",
+  stroke: "currentColor",
+  strokeWidth: "2.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
+// src/components/FunToast/FunToast.tsx
+var FUN_TOAST_TYPE_DEFAULT_CONFIG = {
+  [1 /* ERROR */]: {
+    borderColor: "connectButtonBackgroundError",
+    borderWidth: "2",
+    titleSuffix: /* @__PURE__ */ React75.createElement(CloseIcon, null)
+  },
+  [3 /* SUCCESS */]: {
+    borderColor: "connectionIndicator",
+    borderWidth: "2",
+    titleSuffix: /* @__PURE__ */ React75.createElement(SuccessNoBorderIcon, null)
+  },
+  [2 /* PENDING */]: {
+    borderColor: "standby",
+    borderWidth: "2",
+    titleSuffix: /* @__PURE__ */ React75.createElement(SpinnerIcon, null)
+  },
+  [0 /* INFO */]: {
+    borderColor: void 0,
+    borderWidth: void 0,
+    titleSuffix: void 0
+  }
+};
+function FunToast({
+  type = 3 /* SUCCESS */,
+  title,
+  titleSuffix,
+  hideTitleSuffix = false,
+  description,
+  isDescriptionText = true,
+  icon
+}) {
+  const styleConfigs = FUN_TOAST_TYPE_DEFAULT_CONFIG?.[type];
+  const finalTitleSuffix = useMemo14(() => {
+    if (titleSuffix) {
+      return titleSuffix;
+    }
+    return styleConfigs.titleSuffix;
+  }, [styleConfigs.titleSuffix, titleSuffix]);
+  return /* @__PURE__ */ React75.createElement(Box, {
+    marginBottom: "5",
+    padding: "20",
+    borderRadius: "16",
+    borderColor: styleConfigs.borderColor,
+    borderWidth: styleConfigs.borderWidth,
+    borderStyle: "solid"
+  }, /* @__PURE__ */ React75.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    gap: "14"
+  }, icon ? /* @__PURE__ */ React75.createElement(Box, {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  }, icon) : null, /* @__PURE__ */ React75.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10",
+    width: "full"
+  }, /* @__PURE__ */ React75.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    width: "full"
+  }, /* @__PURE__ */ React75.createElement(Text, {
+    size: "18",
+    weight: "bold",
+    color: "modalText"
+  }, title), hideTitleSuffix ? null : /* @__PURE__ */ React75.createElement(Box, {
+    color: styleConfigs.borderColor
+  }, finalTitleSuffix)), isDescriptionText ? /* @__PURE__ */ React75.createElement(Text, {
+    size: "12",
+    weight: "medium",
+    color: "modalTextDim"
+  }, description) : description)));
+}
+
 // src/components/ProfileDetails/FunWalletProfileViews/FWDeposit.tsx
 var DEFAULT_DEPOSIT_TOKEN_TICKER = "USDC";
 var MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD = 30;
@@ -18293,20 +18482,21 @@ function FWDeposit({
   onSoftHide,
   onBack
 }) {
-  const [step, setStep] = useState17(0 /* INPUT_AMOUNT */);
-  const [depositAmount, setDepositAmount] = useState17("");
-  const [selectedPaymentMethodInfo, setSelectedPaymentMethodInfo] = useState17(null);
-  const [isDepositing, setIsDepositing] = useState17(false);
-  const [isFetchingEstimatedFees, setIsFetchingEstimatedFees] = useState17(false);
-  const [previewId, setPreviewId] = useState17("");
-  const [estimatedFees, setEstimatedFees] = useState17(0);
-  const [estimationError, setEstimationError] = useState17("");
+  const [step, setStep] = useState18(0 /* INPUT_AMOUNT */);
+  const [depositAmount, setDepositAmount] = useState18("");
+  const [selectedPaymentMethodInfo, setSelectedPaymentMethodInfo] = useState18(null);
+  const [isDepositing, setIsDepositing] = useState18(false);
+  const [isFetchingEstimatedFees, setIsFetchingEstimatedFees] = useState18(false);
+  const [previewId, setPreviewId] = useState18("");
+  const [estimatedFees, setEstimatedFees] = useState18(0);
+  const [estimationError, setEstimationError] = useState18("");
   const funkitConfig = useFunkitConfig();
   const { address: accountAddress } = useAccount7();
-  const { chain: activeChain } = useNetwork5();
-  const hasBack = useMemo14(() => step !== 5 /* PROCESSING */, [step]);
-  const [backAnimation, setBackAnimation] = useState17(false);
-  const handleBack = useCallback9(() => {
+  const { chain: activeChain } = useNetwork4();
+  const { showToast } = useFunToast();
+  const hasBack = useMemo15(() => step !== 5 /* PROCESSING */, [step]);
+  const [backAnimation, setBackAnimation] = useState18(false);
+  const handleBack = useCallback11(() => {
     if (!hasBack) {
       return;
     }
@@ -18347,7 +18537,7 @@ function FWDeposit({
         return;
     }
   }, [hasBack, step, onBack]);
-  const onSelectPaymentMethodWithInfo = useCallback9(
+  const onSelectPaymentMethodWithInfo = useCallback11(
     (selectedPaymentInfo) => {
       setSelectedPaymentMethodInfo(selectedPaymentInfo);
       if (selectedPaymentInfo?.meta) {
@@ -18361,7 +18551,7 @@ function FWDeposit({
   const { fetchInfo: manualFetchNetworkInfo } = useMeshActiveNetworkInfo(
     selectedPaymentMethodInfo?.meta?.accessToken?.brokerName
   );
-  const getMeshFees = useCallback9(async () => {
+  const getMeshFees = useCallback11(async () => {
     if (!funkitConfig?.apiKey) {
       return;
     }
@@ -18415,37 +18605,60 @@ function FWDeposit({
     accountAddress,
     depositAmount
   ]);
-  const onConfirmDeposit = useCallback9(async () => {
-    const selectedMethod = selectedPaymentMethodInfo?.paymentMethod;
-    setIsDepositing(true);
-    switch (selectedMethod) {
-      case "brokerage" /* BROKERAGE */:
-        if (funkitConfig?.apiKey) {
-          const meshNetworkInfo = await manualFetchNetworkInfo();
-          const { previewId: previewId2, previewExpiresIn } = await previewBrokerageDeposit(
-            selectedPaymentMethodInfo?.meta?.accessToken?.accountTokens?.[0].accessToken,
-            selectedPaymentMethodInfo?.meta?.accessToken?.brokerName,
-            DEFAULT_DEPOSIT_TOKEN_TICKER,
-            (roundUpTo5DecimalPlaces(depositAmount) || 0).toString(),
-            accountAddress,
-            funkitConfig?.apiKey,
-            meshNetworkInfo.meshNetworkId
-          );
-          setPreviewId(previewId2);
-          setBackAnimation(true);
-          setTimeout(() => {
-            setStep(4 /* TWO_FACTOR */);
-            setBackAnimation(false);
-          }, ANIMATION_TIMEOUT);
-        } else {
-          throw new Error("Missing api key or mesh network id");
-        }
-        break;
-      case "transfer" /* TRANSFER */:
-      case "card" /* CARD */:
-        break;
+  const onConfirmDeposit = useCallback11(async () => {
+    try {
+      const selectedMethod = selectedPaymentMethodInfo?.paymentMethod;
+      setIsDepositing(true);
+      switch (selectedMethod) {
+        case "brokerage" /* BROKERAGE */:
+          if (funkitConfig?.apiKey) {
+            const meshNetworkInfo = await manualFetchNetworkInfo();
+            const { previewId: previewId2, previewExpiresIn } = await previewBrokerageDeposit(
+              selectedPaymentMethodInfo?.meta?.accessToken?.accountTokens?.[0].accessToken,
+              selectedPaymentMethodInfo?.meta?.accessToken?.brokerName,
+              DEFAULT_DEPOSIT_TOKEN_TICKER,
+              (roundUpTo5DecimalPlaces(depositAmount) || 0).toString(),
+              accountAddress,
+              funkitConfig?.apiKey,
+              meshNetworkInfo.meshNetworkId
+            );
+            const timeNowSeconds = Math.floor(Date.now() / 1e3);
+            const previewExpiresAtSeconds = Number(previewExpiresIn) + timeNowSeconds;
+            if (timeNowSeconds > previewExpiresAtSeconds) {
+              showToast(
+                {
+                  type: 1 /* ERROR */,
+                  title: "Error",
+                  description: `Your ${selectedPaymentMethodInfo?.meta?.accessToken?.brokerName} credentials have expired. Please reconnect.`
+                },
+                5e3
+              );
+              setBackAnimation(true);
+              setTimeout(() => {
+                setStep(2 /* PAYMENT_SETUP */);
+                setBackAnimation(false);
+              }, ANIMATION_TIMEOUT);
+            } else {
+              setPreviewId(previewId2);
+              setBackAnimation(true);
+              setTimeout(() => {
+                setStep(4 /* TWO_FACTOR */);
+                setBackAnimation(false);
+              }, ANIMATION_TIMEOUT);
+            }
+          } else {
+            throw new Error("Missing api key or mesh network id");
+          }
+          break;
+        case "transfer" /* TRANSFER */:
+        case "card" /* CARD */:
+          break;
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsDepositing(false);
     }
-    setIsDepositing(false);
   }, [
     accountAddress,
     depositAmount,
@@ -18453,9 +18666,10 @@ function FWDeposit({
     manualFetchNetworkInfo,
     selectedPaymentMethodInfo?.meta?.accessToken?.accountTokens,
     selectedPaymentMethodInfo?.meta?.accessToken?.brokerName,
-    selectedPaymentMethodInfo?.paymentMethod
+    selectedPaymentMethodInfo?.paymentMethod,
+    showToast
   ]);
-  return /* @__PURE__ */ React73.createElement(Box, null, /* @__PURE__ */ React73.createElement(FunModalTitleSection, {
+  return /* @__PURE__ */ React76.createElement(Box, null, /* @__PURE__ */ React76.createElement(FunModalTitleSection, {
     hasBackButton: hasBack,
     onBack: handleBack,
     skipBackDelay: true,
@@ -18463,11 +18677,11 @@ function FWDeposit({
     title: "Deposit",
     hasCloseButton: true,
     onClose
-  }), /* @__PURE__ */ React73.createElement(Box, {
+  }), /* @__PURE__ */ React76.createElement(Box, {
     paddingTop: "24",
     paddingBottom: "20",
     width: "full"
-  }, step === 0 /* INPUT_AMOUNT */ ? /* @__PURE__ */ React73.createElement(FunOnrampInputStep, {
+  }, step === 0 /* INPUT_AMOUNT */ ? /* @__PURE__ */ React76.createElement(FunOnrampInputStep, {
     tokenTicker: DEFAULT_DEPOSIT_TOKEN_TICKER,
     amount: depositAmount,
     onChangeAmount: setDepositAmount,
@@ -18475,7 +18689,7 @@ function FWDeposit({
     onClickContinue: () => {
       setStep(1 /* SELECT_PAYMENT_METHOD */);
     }
-  }) : step === 1 /* SELECT_PAYMENT_METHOD */ ? /* @__PURE__ */ React73.createElement(FunPaymentMethods, {
+  }) : step === 1 /* SELECT_PAYMENT_METHOD */ ? /* @__PURE__ */ React76.createElement(FunPaymentMethods, {
     paymentFlow: 0 /* DEPOSIT */,
     onSelect: onSelectPaymentMethodWithInfo,
     backAnimation,
@@ -18483,7 +18697,7 @@ function FWDeposit({
       amount: depositAmount,
       tokenTicker: DEFAULT_DEPOSIT_TOKEN_TICKER
     }
-  }) : step === 2 /* PAYMENT_SETUP */ ? /* @__PURE__ */ React73.createElement(FunPaymentSetup, {
+  }) : step === 2 /* PAYMENT_SETUP */ ? /* @__PURE__ */ React76.createElement(FunPaymentSetup, {
     paymentFlow: 0 /* DEPOSIT */,
     paymentAddress: accountAddress,
     paymentMethod: selectedPaymentMethodInfo?.paymentMethod,
@@ -18495,8 +18709,9 @@ function FWDeposit({
     onSoftHide,
     onBackToHome: onBack,
     token: DEFAULT_DEPOSIT_TOKEN_TICKER,
+    tokenChainId: activeChain?.id.toString() || "",
     tokenAmountUsd: parseFloat(depositAmount) || 0
-  }) : step === 3 /* CONFIRMATION */ ? /* @__PURE__ */ React73.createElement(FunOnrampConfirmationStep, {
+  }) : step === 3 /* CONFIRMATION */ ? /* @__PURE__ */ React76.createElement(FunOnrampConfirmationStep, {
     paymentMethodInfo: selectedPaymentMethodInfo,
     token: DEFAULT_DEPOSIT_TOKEN_TICKER,
     tokenAmountUsd: parseFloat(depositAmount) || 0,
@@ -18509,13 +18724,13 @@ function FWDeposit({
     isFetchingEstimatedFees,
     isConfirming: isDepositing,
     backAnimation
-  }) : step === 4 /* TWO_FACTOR */ ? /* @__PURE__ */ React73.createElement(FunMeshTwoFactorStep, {
+  }) : step === 4 /* TWO_FACTOR */ ? /* @__PURE__ */ React76.createElement(FunMeshTwoFactorStep, {
     previewId,
     onSuccess: () => {
       setStep(5 /* PROCESSING */);
     },
     paymentMethodInfo: selectedPaymentMethodInfo
-  }) : step === 5 /* PROCESSING */ ? /* @__PURE__ */ React73.createElement(FunOnrampProcessingStep, {
+  }) : step === 5 /* PROCESSING */ ? /* @__PURE__ */ React76.createElement(FunOnrampProcessingStep, {
     tokenAmountUsd: parseFloat(depositAmount) || 0,
     token: DEFAULT_DEPOSIT_TOKEN_TICKER,
     isDepositing
@@ -18538,32 +18753,32 @@ var PaymentMethod = /* @__PURE__ */ ((PaymentMethod2) => {
 var PAYMENT_METHOD_CONFIG = {
   ["balance" /* ACCOUNT_BALANCE */]: {
     label: "Account Balance",
-    icon: /* @__PURE__ */ React74.createElement(WalletDecoratedIcon, null),
-    timeIcon: /* @__PURE__ */ React74.createElement(LightningIcon, null),
+    icon: /* @__PURE__ */ React77.createElement(WalletDecoratedIcon, null),
+    timeIcon: /* @__PURE__ */ React77.createElement(LightningIcon, null),
     timeRange: "Instant",
     isEnabledForOnramp: false,
     isEnabledForCheckout: true
   },
   ["brokerage" /* BROKERAGE */]: {
     label: "Brokerage or Exchange",
-    icon: /* @__PURE__ */ React74.createElement(BrokerageIcon, null),
-    timeIcon: /* @__PURE__ */ React74.createElement(ClockIcon, null),
+    icon: /* @__PURE__ */ React77.createElement(BrokerageIcon, null),
+    timeIcon: /* @__PURE__ */ React77.createElement(ClockIcon, null),
     timeRange: "2 - 3 mins",
     isEnabledForOnramp: true,
     isEnabledForCheckout: true
   },
   ["card" /* CARD */]: {
     label: "Debit or Credit",
-    icon: /* @__PURE__ */ React74.createElement(CreditCardIcon, null),
-    timeIcon: /* @__PURE__ */ React74.createElement(ClockIcon, null),
+    icon: /* @__PURE__ */ React77.createElement(CreditCardIcon, null),
+    timeIcon: /* @__PURE__ */ React77.createElement(ClockIcon, null),
     timeRange: "1 - 2 mins",
     isEnabledForOnramp: true,
     isEnabledForCheckout: true
   },
   ["transfer" /* TRANSFER */]: {
     label: "Transfer Crypto",
-    icon: /* @__PURE__ */ React74.createElement(TransferCryptoIcon, null),
-    timeIcon: /* @__PURE__ */ React74.createElement(LightningIcon, null),
+    icon: /* @__PURE__ */ React77.createElement(TransferCryptoIcon, null),
+    timeIcon: /* @__PURE__ */ React77.createElement(LightningIcon, null),
     timeRange: "Instant",
     isEnabledForOnramp: true,
     isEnabledForCheckout: false
@@ -18578,7 +18793,7 @@ function AddPaymentMethodItem({
   disclaimerText
 }) {
   const config = PAYMENT_METHOD_CONFIG[paymentMethod];
-  const isEnabledForFlow = useMemo15(() => {
+  const isEnabledForFlow = useMemo16(() => {
     if (paymentFlow === 1 /* CHECKOUT */) {
       return config.isEnabledForCheckout;
     } else if (paymentFlow === 0 /* DEPOSIT */) {
@@ -18588,9 +18803,9 @@ function AddPaymentMethodItem({
     }
   }, [paymentFlow, config]);
   if (!PAYMENT_METHOD_CONFIG?.[paymentMethod]) {
-    return /* @__PURE__ */ React74.createElement(React74.Fragment, null);
+    return /* @__PURE__ */ React77.createElement(React77.Fragment, null);
   }
-  return /* @__PURE__ */ React74.createElement(FunKeyValue, {
+  return /* @__PURE__ */ React77.createElement(FunKeyValue, {
     keyIcon: config.icon,
     keyText: config.label,
     valueIcon: config.timeIcon,
@@ -18611,9 +18826,9 @@ function ExistingPaymentMethodItem({
   isClickable = true
 }) {
   if (!PAYMENT_METHOD_CONFIG?.[paymentMethodInfo?.paymentMethod]) {
-    return /* @__PURE__ */ React74.createElement(React74.Fragment, null);
+    return /* @__PURE__ */ React77.createElement(React77.Fragment, null);
   }
-  return /* @__PURE__ */ React74.createElement(FunKeyValue, {
+  return /* @__PURE__ */ React77.createElement(FunKeyValue, {
     keyIcon: paymentMethodInfo?.titleIcon,
     keyText: paymentMethodInfo?.title,
     valueIcon: paymentMethodInfo?.descriptionIcon,
@@ -18633,12 +18848,13 @@ function FunPaymentMethods({
   backAnimation = false,
   depositInfo
 }) {
-  const [selectedOption, setSelectedOption] = useState18(
+  const [selectedOption, setSelectedOption] = useState19(
     null
   );
+  const [isContinuing, setIsContinuing] = useState19(false);
   useFunWalletAssetsListener();
   const { funWalletAssets } = useFunkitWallet();
-  const hasSufficientBalance = useMemo15(() => {
+  const hasSufficientBalance = useMemo16(() => {
     if (!depositInfo?.amount)
       return true;
     const tokenKeys = Object.keys(funWalletAssets || {});
@@ -18651,11 +18867,12 @@ function FunPaymentMethods({
     });
     return isNotNullish(foundAsset);
   }, [depositInfo?.amount, funWalletAssets]);
-  const canContinue = useMemo15(() => {
+  const canContinue = useMemo16(() => {
     return isNotNullish(selectedOption) && Object.values(PaymentMethod).includes(selectedOption);
   }, [selectedOption]);
-  const onClickContinue = useCallback10(() => {
+  const onClickContinue = useCallback12(() => {
     if (canContinue) {
+      setIsContinuing(true);
       onSelect({
         paymentMethod: selectedOption,
         title: "",
@@ -18666,8 +18883,8 @@ function FunPaymentMethods({
       });
     }
   }, [canContinue, onSelect, selectedOption]);
-  const PaymentMethodListWithStatus = Object.keys(PAYMENT_METHOD_CONFIG).map(
-    (paymentMethod) => {
+  const PaymentMethodListWithStatus = useMemo16(() => {
+    return Object.keys(PAYMENT_METHOD_CONFIG).map((paymentMethod) => {
       if (paymentFlow === 0 /* DEPOSIT */ && paymentMethod === "balance" /* ACCOUNT_BALANCE */ || paymentFlow === 1 /* CHECKOUT */ && paymentMethod === "transfer" /* TRANSFER */) {
         return {
           status: false,
@@ -18679,21 +18896,28 @@ function FunPaymentMethods({
       const isClickable = !isDisabled && !shouldDisableMoonpay && !shouldDisableAccBalance;
       return {
         status: isClickable,
-        component: /* @__PURE__ */ React74.createElement(AddPaymentMethodItem, {
+        component: /* @__PURE__ */ React77.createElement(AddPaymentMethodItem, {
           key: paymentMethod,
           paymentFlow,
           paymentMethod,
           isActive: paymentMethod === selectedOption,
-          isClickable,
+          isClickable: isClickable && !isContinuing,
           disclaimerText: shouldDisableMoonpay ? `Minimum ${PaymentFlow[paymentFlow].toLowerCase()} value of $${MINIMUM_MOONPAY_DEPOSIT_AMOUNT_USD} required.` : shouldDisableAccBalance ? `Insufficient account balance.` : "",
           onClick: () => {
             setSelectedOption(paymentMethod);
           }
         })
       };
-    }
-  );
-  return /* @__PURE__ */ React74.createElement(Box, {
+    });
+  }, [
+    depositInfo?.amount,
+    hasSufficientBalance,
+    isContinuing,
+    isDisabled,
+    paymentFlow,
+    selectedOption
+  ]);
+  return /* @__PURE__ */ React77.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     gap: "24",
@@ -18701,12 +18925,12 @@ function FunPaymentMethods({
       opacity: isDisabled ? 0.5 : 1,
       cursor: isDisabled ? "not-allowed" : void 0
     }
-  }, depositInfo && paymentFlow === 0 /* DEPOSIT */ ? /* @__PURE__ */ React74.createElement(Box, {
+  }, depositInfo && paymentFlow === 0 /* DEPOSIT */ ? /* @__PURE__ */ React77.createElement(Box, {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     gap: "8"
-  }, /* @__PURE__ */ React74.createElement(Box, {
+  }, /* @__PURE__ */ React77.createElement(Box, {
     display: "flex",
     alignItems: "center",
     gap: "8",
@@ -18714,13 +18938,13 @@ function FunPaymentMethods({
     paddingX: "12",
     paddingY: "8",
     borderRadius: "16"
-  }, /* @__PURE__ */ React74.createElement(USDCIcon, null), /* @__PURE__ */ React74.createElement(Text, {
+  }, /* @__PURE__ */ React77.createElement(USDCIcon, null), /* @__PURE__ */ React77.createElement(Text, {
     size: "14",
     color: "modalText"
-  }, depositInfo.tokenTicker)), /* @__PURE__ */ React74.createElement(Box, {
+  }, depositInfo.tokenTicker)), /* @__PURE__ */ React77.createElement(Box, {
     display: "flex",
     wrap: "nowrap"
-  }, /* @__PURE__ */ React74.createElement(Text, {
+  }, /* @__PURE__ */ React77.createElement(Text, {
     size: "57",
     color: "modalText",
     style: {
@@ -18729,7 +18953,7 @@ function FunPaymentMethods({
       lineHeight: "68px",
       paddingRight: "4px"
     }
-  }, "$"), /* @__PURE__ */ React74.createElement(Text, {
+  }, "$"), /* @__PURE__ */ React77.createElement(Text, {
     size: "57",
     color: "modalText",
     style: {
@@ -18737,32 +18961,40 @@ function FunPaymentMethods({
       fontSize: "57px",
       lineHeight: "68px"
     }
-  }, depositInfo.amount))) : null, /* @__PURE__ */ React74.createElement(Box, {
+  }, depositInfo.amount))) : null, /* @__PURE__ */ React77.createElement(Box, {
     id: "add-methods",
     display: "flex",
     flexDirection: "column",
     gap: "24"
-  }, /* @__PURE__ */ React74.createElement(Text, {
+  }, /* @__PURE__ */ React77.createElement(Text, {
     size: "18",
     weight: "semibold",
     color: "modalTextSecondary"
-  }, "Select Payment Method"), /* @__PURE__ */ React74.createElement(Box, {
+  }, "Select Payment Method"), /* @__PURE__ */ React77.createElement(Box, {
     id: "method-list",
     display: "flex",
     flexDirection: "column",
     gap: "10"
   }, PaymentMethodListWithStatus.sort(
     (a, b) => Number(b.status) - Number(a.status)
-  ).map((i) => i?.component))), /* @__PURE__ */ React74.createElement(FunButton, {
+  ).map((i) => i?.component))), /* @__PURE__ */ React77.createElement(FunButton, {
     title: "Continue",
-    isDisabled: !canContinue,
+    isDisabled: !canContinue || isContinuing,
     type: "primary",
-    onClick: onClickContinue
+    onClick: onClickContinue,
+    titleSuffix: isContinuing ? /* @__PURE__ */ React77.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      color: "modalText"
+    }, /* @__PURE__ */ React77.createElement(SpinnerIcon, {
+      height: 16,
+      width: 16
+    })) : null
   }));
 }
 
 // src/components/FunkitProvider/FunkitCheckoutContext.tsx
-var FunkitCheckoutContext = createContext11({
+var FunkitCheckoutContext = createContext12({
   activeCheckouts: {},
   checkoutHistoryList: [],
   checkoutHistoryStateMap: {},
@@ -18784,18 +19016,18 @@ function FunkitCheckoutProvider({ children }) {
   const funkitConfig = useFunkitConfig();
   const account = useAccount8();
   const { funWallet, auth: funWalletAuth } = useFunkitWallet();
-  const [checkoutHistoryList, setCheckoutHistoryList] = useState19([]);
+  const [checkoutHistoryList, setCheckoutHistoryList] = useState20([]);
   const {
     stateMap: checkoutHistoryStateMap,
     depositAddrMap: checkoutHistoryDepositAddrMap
-  } = useMemo16(() => {
+  } = useMemo17(() => {
     return categorizeCheckoutHistories(checkoutHistoryList);
   }, [checkoutHistoryList]);
-  const [activeCheckouts, setActiveCheckouts] = useState19({});
+  const [activeCheckouts, setActiveCheckouts] = useState20({});
   const [refreshSymbol, triggerRefreshSymbol] = useSymbolRefresh_default();
-  const [isCheckoutHistoryInited, setIsCheckoutHistoryInited] = useState19(false);
-  const [isRefreshingCheckoutHistory, setIsRefreshingCheckoutHistory] = useState19(true);
-  const _refreshCheckoutHistory = useCallback11(async () => {
+  const [isCheckoutHistoryInited, setIsCheckoutHistoryInited] = useState20(false);
+  const [isRefreshingCheckoutHistory, setIsRefreshingCheckoutHistory] = useState20(true);
+  const _refreshCheckoutHistory = useCallback13(async () => {
     if (funkitConfig?.apiKey && account.address) {
       try {
         setIsRefreshingCheckoutHistory(true);
@@ -18817,16 +19049,16 @@ function FunkitCheckoutProvider({ children }) {
   useEffect20(() => {
     _refreshCheckoutHistory().catch(console.error);
   }, [refreshSymbol]);
-  const _startCheckoutHistoryListener = useCallback11(() => {
+  const _startCheckoutHistoryListener = useCallback13(() => {
     clearInterval(intervalRef.current);
     intervalRef.current = setInterval(() => {
       triggerRefreshSymbol();
     }, CHECKOUT_HISTORY_REFETCH_INTERVAL_MS);
   }, [triggerRefreshSymbol]);
-  const _stopCheckoutHistoryListener = useCallback11(() => {
+  const _stopCheckoutHistoryListener = useCallback13(() => {
     clearInterval(intervalRef.current);
   }, []);
-  const _initNewCheckout = useCallback11(
+  const _initNewCheckout = useCallback13(
     (initSettings) => {
       const newCheckoutId = uuid();
       const newActiveCheckoutItem = {
@@ -18848,7 +19080,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [activeCheckouts]
   );
-  const _updateSelectedSourceAsset = useCallback11(
+  const _updateSelectedSourceAsset = useCallback13(
     (checkoutId, selectedSourceAssetAddress, selectedSourceAssetSymbol, selectedSourceAssetChainId) => {
       if (!activeCheckouts?.[checkoutId]) {
         throw new Error(
@@ -18872,7 +19104,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [activeCheckouts]
   );
-  const _getCheckoutDraftDollarValue = useCallback11(
+  const _getCheckoutDraftDollarValue = useCallback13(
     async (checkoutId) => {
       if (!activeCheckouts?.[checkoutId]) {
         throw new Error(
@@ -18900,8 +19132,8 @@ function FunkitCheckoutProvider({ children }) {
     },
     [activeCheckouts]
   );
-  const _getCheckoutQuote = useCallback11(
-    async (checkoutId) => {
+  const _getCheckoutQuote = useCallback13(
+    async (checkoutId, sponsorInitialTransferGasLimit) => {
       if (!activeCheckouts?.[checkoutId]) {
         throw new Error(
           `Funkit Internal Error: Unable to find checkout with id: ${checkoutId}`
@@ -18936,6 +19168,7 @@ function FunkitCheckoutProvider({ children }) {
           expirationTimestampMs: parseInt(
             checkoutItem.initSettings.config.expirationTimestampMs.toString()
           ),
+          sponsorInitialTransferGasLimit: sponsorInitialTransferGasLimit.toString(),
           apiKey: funkitConfig.apiKey || ""
         });
         checkoutItem?.initSettings?.onEstimation?.(newEstimation);
@@ -18963,7 +19196,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [account?.address, activeCheckouts, funkitConfig?.apiKey]
   );
-  const _generateSignedBatchOperation = useCallback11(
+  const _generateSignedBatchOperation = useCallback13(
     async (actionsParams, assetChainId, bypassWalletInit) => {
       if (!funWallet || !funWalletAuth || !account.address) {
         throw new Error("Funwallet or auth not defined");
@@ -19001,7 +19234,7 @@ function FunkitCheckoutProvider({ children }) {
     },
     [funWallet, funWalletAuth, account]
   );
-  const _confirmCheckout = useCallback11(
+  const _confirmCheckout = useCallback13(
     async (checkoutId, paymentMethod) => {
       if (!funkitConfig?.apiKey) {
         throw new Error(
@@ -19019,10 +19252,11 @@ function FunkitCheckoutProvider({ children }) {
           `Funkit Internal Error: Unable to find checkout with id: ${checkoutId}`
         );
       }
+      const isAccountBalancePaymentMethod = paymentMethod === "balance" /* ACCOUNT_BALANCE */;
       const signedBatchOperation = await _generateSignedBatchOperation(
         checkoutItem.initSettings.config.actionsParams,
         checkoutItem.initSettings.config.targetChain,
-        paymentMethod === "balance" /* ACCOUNT_BALANCE */
+        isAccountBalancePaymentMethod
       );
       const depositAddress = await postApiInitializeCheckout({
         userOp: signedBatchOperation.userOp,
@@ -19064,7 +19298,7 @@ function FunkitCheckoutProvider({ children }) {
     _confirmCheckout,
     _generateSignedBatchOperation
   };
-  return /* @__PURE__ */ React75.createElement(FunkitCheckoutContext.Provider, {
+  return /* @__PURE__ */ React78.createElement(FunkitCheckoutContext.Provider, {
     value: contextValue
   }, children);
 }
@@ -19075,7 +19309,7 @@ var useFunkitPreCheckoutInternal = (checkoutId) => {
     _confirmCheckout,
     _getCheckoutQuote,
     _getCheckoutDraftDollarValue
-  } = useContext9(FunkitCheckoutContext);
+  } = useContext10(FunkitCheckoutContext);
   if (!checkoutId) {
     return {
       checkoutItem: null,
@@ -19094,12 +19328,12 @@ var useFunkitPreCheckoutInternal = (checkoutId) => {
       newSourceAssetChainId
     ),
     confirmCheckout: async (paymentMethod) => await _confirmCheckout(checkoutId, paymentMethod),
-    getCheckoutQuote: async () => await _getCheckoutQuote(checkoutId),
+    getCheckoutQuote: async (sponsorInitialTransferGasLimit) => await _getCheckoutQuote(checkoutId, sponsorInitialTransferGasLimit),
     getCheckoutDraftDollarValue: async () => await _getCheckoutDraftDollarValue(checkoutId)
   };
 };
 var useFunkitPostCheckoutInternal = (depositAddress) => {
-  const { checkoutHistoryDepositAddrMap } = useContext9(FunkitCheckoutContext);
+  const { checkoutHistoryDepositAddrMap } = useContext10(FunkitCheckoutContext);
   if (!depositAddress || !isAddress2(depositAddress) || !checkoutHistoryDepositAddrMap?.[depositAddress]) {
     throw new Error("Invalid depositAddress");
   }
@@ -19113,7 +19347,7 @@ var useFunkitAllPostCheckoutsInternal = () => {
     isRefreshingCheckoutHistory,
     _startCheckoutHistoryListener,
     _stopCheckoutHistoryListener
-  } = useContext9(FunkitCheckoutContext);
+  } = useContext10(FunkitCheckoutContext);
   return {
     checkoutHistoryList,
     checkoutHistoryStateMap,
@@ -19125,14 +19359,14 @@ var useFunkitAllPostCheckoutsInternal = () => {
 };
 var useFunkitCheckout = (props) => {
   const { config, onValidation, onDirectExecution } = props;
-  const { _initNewCheckout, _generateSignedBatchOperation } = useContext9(
+  const { _initNewCheckout, _generateSignedBatchOperation } = useContext10(
     FunkitCheckoutContext
   );
   const { openFunCheckoutModal } = useFunCheckoutModal();
   const connectionStatus = useConnectionStatus();
   const { isLoggedIn: isWeb2Login, funWallet, auth } = useFunkitWallet();
-  const networks = useNetwork6();
-  const _handleWeb3DirectExecution = useCallback11(async () => {
+  const networks = useNetwork5();
+  const _handleWeb3DirectExecution = useCallback13(async () => {
     for (let i = 0; i < config.actionsParams.length; i++) {
       try {
         const { request } = await prepareWriteContract({
@@ -19155,7 +19389,7 @@ var useFunkitCheckout = (props) => {
       }
     }
   }, [config.actionsParams, onDirectExecution]);
-  const _handleWeb2DirectExecution = useCallback11(async () => {
+  const _handleWeb2DirectExecution = useCallback13(async () => {
     if (funWallet && auth) {
       try {
         const batchOperation = await _generateSignedBatchOperation(
@@ -19192,7 +19426,7 @@ var useFunkitCheckout = (props) => {
     funWallet,
     onDirectExecution
   ]);
-  const beginCheckout = useCallback11(async () => {
+  const beginCheckout = useCallback13(async () => {
     const validationResult = validateCheckoutConfig(config);
     onValidation?.(validationResult);
     if (validationResult.isValid) {
@@ -19253,43 +19487,6 @@ var useFunkitCheckout = (props) => {
   };
 };
 
-// src/components/FunkitProvider/FunToastContext.tsx
-import React76, { createContext as createContext12, useCallback as useCallback12, useContext as useContext10, useState as useState20 } from "react";
-var FunToastContext = createContext12({
-  toastContent: null,
-  showToast: () => void 0,
-  hideToast: () => void 0,
-  closing: false
-});
-function useFunToast() {
-  return useContext10(FunToastContext);
-}
-function FunToastProvider({ children }) {
-  const [toastContent, setToastContent] = useState20(null);
-  const [closing, setClosing] = useState20(false);
-  const showToast = useCallback12(
-    (newToastContent, displayTimeMs = 0) => {
-      setClosing(false);
-      setToastContent({ ...newToastContent });
-      if (displayTimeMs) {
-        setTimeout(() => {
-          setClosing(true);
-          setTimeout(() => {
-            setToastContent(null);
-          }, 150);
-        }, displayTimeMs);
-      }
-    },
-    []
-  );
-  const hideToast = useCallback12(() => {
-    setToastContent(null);
-  }, []);
-  return /* @__PURE__ */ React76.createElement(FunToastContext.Provider, {
-    value: { toastContent, showToast, hideToast, closing }
-  }, children);
-}
-
 // src/components/FunkitProvider/ModalSizeContext.ts
 import { createContext as createContext13 } from "react";
 var ModalSizeOptions = {
@@ -19303,14 +19500,14 @@ import { createContext as createContext14 } from "react";
 var ShowRecentTransactionsContext = createContext14(false);
 
 // src/components/FunkitProvider/useFingerprint.ts
-import { useCallback as useCallback13, useEffect as useEffect21 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect21 } from "react";
 var storageKey3 = "rk-version";
 function setRainbowKitVersion({ version }) {
   localStorage.setItem(storageKey3, version);
 }
 function useFingerprint() {
-  const fingerprint = useCallback13(() => {
-    setRainbowKitVersion({ version: "0.1.3" });
+  const fingerprint = useCallback14(() => {
+    setRainbowKitVersion({ version: "0.1.4" });
   }, []);
   useEffect21(() => {
     fingerprint();
@@ -19318,25 +19515,25 @@ function useFingerprint() {
 }
 
 // src/components/FunkitProvider/usePreloadImages.ts
-import { useCallback as useCallback15, useEffect as useEffect22 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect22 } from "react";
 
 // src/components/Icons/Assets.tsx
-import React77 from "react";
+import React79 from "react";
 var src = async () => (await import("./assets-26YY4GVD.js")).default;
 var preloadAssetsIcon = () => loadImages(src);
 
 // src/components/Icons/Login.tsx
-import React78 from "react";
+import React80 from "react";
 var src2 = async () => (await import("./login-ZSMM5UYL.js")).default;
 var preloadLoginIcon = () => loadImages(src2);
 
 // src/components/SignIn/SignIn.tsx
-import React80, { useCallback as useCallback14, useContext as useContext11, useRef as useRef8 } from "react";
+import React82, { useCallback as useCallback15, useContext as useContext11, useRef as useRef8 } from "react";
 import { UserRejectedRequestError } from "viem";
-import { useAccount as useAccount9, useNetwork as useNetwork7, useSignMessage } from "wagmi";
+import { useAccount as useAccount9, useNetwork as useNetwork6, useSignMessage } from "wagmi";
 
 // src/components/Button/ActionButton.tsx
-import React79 from "react";
+import React81 from "react";
 var sizeVariants = {
   large: {
     fontSize: "16",
@@ -19372,7 +19569,7 @@ function ActionButton({
   const background = !disabled ? isPrimary ? "accentColor" : isNotLarge ? "actionButtonSecondaryBackground" : null : "actionButtonSecondaryBackground";
   const { fontSize, height, paddingX, paddingY } = sizeVariants[size];
   const hasBorder = !mobile || !isNotLarge;
-  return /* @__PURE__ */ React79.createElement(Box, {
+  return /* @__PURE__ */ React81.createElement(Box, {
     ...href ? !disabled ? { as: "a", href, rel, target } : {} : { as: "button", type: "button" },
     onClick: !disabled ? onClick : void 0,
     ...hasBorder ? {
@@ -19391,7 +19588,7 @@ function ActionButton({
     transition: "transform",
     ...background ? { background } : {},
     ...height ? { height } : {}
-  }, /* @__PURE__ */ React79.createElement(Text, {
+  }, /* @__PURE__ */ React81.createElement(Text, {
     color: !disabled ? isPrimary ? "accentColorForeground" : "accentColor" : "modalTextSecondary",
     size: fontSize,
     weight: "bold"
@@ -19402,9 +19599,9 @@ function ActionButton({
 var signInIcon = async () => (await import("./sign-FZVB2CS6.js")).default;
 function SignIn({ onClose }) {
   const i18n2 = useContext11(I18nContext);
-  const [{ status, ...state }, setState] = React80.useState({ status: "idle" });
+  const [{ status, ...state }, setState] = React82.useState({ status: "idle" });
   const authAdapter = useAuthenticationAdapter();
-  const getNonce = useCallback14(async () => {
+  const getNonce = useCallback15(async () => {
     try {
       const nonce = await authAdapter.getNonce();
       setState((x) => ({ ...x, nonce }));
@@ -19417,7 +19614,7 @@ function SignIn({ onClose }) {
     }
   }, [authAdapter]);
   const onceRef = useRef8(false);
-  React80.useEffect(() => {
+  React82.useEffect(() => {
     if (onceRef.current) {
       return;
     }
@@ -19426,7 +19623,7 @@ function SignIn({ onClose }) {
   }, [getNonce]);
   const mobile = isMobile();
   const { address } = useAccount9();
-  const { chain: activeChain } = useNetwork7();
+  const { chain: activeChain } = useNetwork6();
   const { signMessageAsync } = useSignMessage();
   const signIn = async () => {
     try {
@@ -19481,17 +19678,17 @@ function SignIn({ onClose }) {
       });
     }
   };
-  return /* @__PURE__ */ React80.createElement(Box, {
+  return /* @__PURE__ */ React82.createElement(Box, {
     position: "relative"
-  }, /* @__PURE__ */ React80.createElement(Box, {
+  }, /* @__PURE__ */ React82.createElement(Box, {
     display: "flex",
     paddingRight: "16",
     paddingTop: "16",
     position: "absolute",
     right: "0"
-  }, /* @__PURE__ */ React80.createElement(CloseButton, {
+  }, /* @__PURE__ */ React82.createElement(CloseButton, {
     onClose
-  })), /* @__PURE__ */ React80.createElement(Box, {
+  })), /* @__PURE__ */ React82.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
@@ -19499,58 +19696,58 @@ function SignIn({ onClose }) {
     padding: "24",
     paddingX: "18",
     style: { paddingTop: mobile ? "60px" : "36px" }
-  }, /* @__PURE__ */ React80.createElement(Box, {
+  }, /* @__PURE__ */ React82.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
     gap: mobile ? "6" : "4",
     style: { maxWidth: mobile ? 320 : 280 }
-  }, /* @__PURE__ */ React80.createElement(Box, {
+  }, /* @__PURE__ */ React82.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
     gap: mobile ? "32" : "16"
-  }, /* @__PURE__ */ React80.createElement(AsyncImage, {
+  }, /* @__PURE__ */ React82.createElement(AsyncImage, {
     height: 40,
     src: signInIcon,
     width: 40
-  }), /* @__PURE__ */ React80.createElement(Text, {
+  }), /* @__PURE__ */ React82.createElement(Text, {
     color: "modalText",
     size: mobile ? "20" : "18",
     textAlign: "center",
     weight: "heavy"
-  }, i18n2.t("sign_in.label"))), /* @__PURE__ */ React80.createElement(Box, {
+  }, i18n2.t("sign_in.label"))), /* @__PURE__ */ React82.createElement(Box, {
     alignItems: "center",
     display: "flex",
     flexDirection: "column",
     gap: mobile ? "16" : "12"
-  }, /* @__PURE__ */ React80.createElement(Text, {
+  }, /* @__PURE__ */ React82.createElement(Text, {
     color: "modalTextSecondary",
     size: mobile ? "16" : "14",
     textAlign: "center"
-  }, i18n2.t("sign_in.description")), status === "idle" && state.errorMessage ? /* @__PURE__ */ React80.createElement(Text, {
+  }, i18n2.t("sign_in.description")), status === "idle" && state.errorMessage ? /* @__PURE__ */ React82.createElement(Text, {
     color: "error",
     size: mobile ? "16" : "14",
     textAlign: "center",
     weight: "bold"
-  }, state.errorMessage) : null)), /* @__PURE__ */ React80.createElement(Box, {
+  }, state.errorMessage) : null)), /* @__PURE__ */ React82.createElement(Box, {
     alignItems: !mobile ? "center" : void 0,
     display: "flex",
     flexDirection: "column",
     gap: "8",
     width: "full"
-  }, /* @__PURE__ */ React80.createElement(ActionButton, {
+  }, /* @__PURE__ */ React82.createElement(ActionButton, {
     disabled: !state.nonce || status === "signing" || status === "verifying",
     label: !state.nonce ? i18n2.t("sign_in.message.preparing") : status === "signing" ? i18n2.t("sign_in.signature.waiting") : status === "verifying" ? i18n2.t("sign_in.signature.verifying") : i18n2.t("sign_in.message.send"),
     onClick: signIn,
     size: mobile ? "large" : "medium",
     testId: "auth-message-button"
-  }), mobile ? /* @__PURE__ */ React80.createElement(ActionButton, {
+  }), mobile ? /* @__PURE__ */ React82.createElement(ActionButton, {
     label: "Cancel",
     onClick: onClose,
     size: "large",
     type: "secondary"
-  }) : /* @__PURE__ */ React80.createElement(Box, {
+  }) : /* @__PURE__ */ React82.createElement(Box, {
     as: "button",
     borderRadius: "full",
     className: touchableStyles({ active: "shrink", hover: "grow" }),
@@ -19562,7 +19759,7 @@ function SignIn({ onClose }) {
     style: { willChange: "transform" },
     target: "_blank",
     transition: "default"
-  }, /* @__PURE__ */ React80.createElement(Text, {
+  }, /* @__PURE__ */ React82.createElement(Text, {
     color: "closeButton",
     size: mobile ? "16" : "14",
     weight: "bold"
@@ -19574,7 +19771,7 @@ function usePreloadImages() {
   const rainbowKitChains = useRainbowKitChains();
   const walletConnectors = useWalletConnectors();
   const isUnauthenticated = useAuthenticationStatus() === "unauthenticated";
-  const preloadImages = useCallback15(() => {
+  const preloadImages = useCallback16(() => {
     loadImages(
       ...walletConnectors.map((wallet) => wallet.iconUrl),
       ...rainbowKitChains.map((chain) => chain.iconUrl).filter(isNotNullish)
@@ -19613,7 +19810,7 @@ function clearWalletConnectDeepLink() {
 // src/components/FunkitProvider/FunkitProvider.tsx
 "use client";
 var MoonPayProvider = (props) => {
-  const [MoonPayProviderInner, setMoonPayProviderInner] = React81.useState(null);
+  const [MoonPayProviderInner, setMoonPayProviderInner] = React83.useState(null);
   useEffect23(() => {
     const loadMoonPayProviderInner = async () => {
       try {
@@ -19626,8 +19823,8 @@ var MoonPayProvider = (props) => {
     loadMoonPayProviderInner();
   }, []);
   if (!MoonPayProviderInner)
-    return /* @__PURE__ */ React81.createElement(React81.Fragment, null, props.children);
-  return /* @__PURE__ */ React81.createElement(MoonPayProviderInner, {
+    return /* @__PURE__ */ React83.createElement(React83.Fragment, null, props.children);
+  return /* @__PURE__ */ React83.createElement(MoonPayProviderInner, {
     ...props
   }, props.children);
 };
@@ -19694,9 +19891,9 @@ function FunkitProvider(props) {
     appWagmiConfig.connectors = newConnectors;
   }
   const config = createConfig(appWagmiConfig);
-  return /* @__PURE__ */ React81.createElement(WagmiConfig, {
+  return /* @__PURE__ */ React83.createElement(WagmiConfig, {
     config
-  }, /* @__PURE__ */ React81.createElement(FunkitProviderInner, {
+  }, /* @__PURE__ */ React83.createElement(FunkitProviderInner, {
     ...props
   }));
 }
@@ -19730,31 +19927,31 @@ function FunkitProviderInner({
   const avatarContext = avatar ?? defaultAvatar;
   const { width } = useWindowSize();
   const isSmallScreen = width && width < largeScreenMinWidth;
-  return /* @__PURE__ */ React81.createElement(RainbowKitChainProvider, {
+  return /* @__PURE__ */ React83.createElement(RainbowKitChainProvider, {
     chains,
     initialChain
-  }, /* @__PURE__ */ React81.createElement(FunkitConfigContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(FunkitConfigContext.Provider, {
     value: funkitConfig
-  }, /* @__PURE__ */ React81.createElement(I18nProvider, {
+  }, /* @__PURE__ */ React83.createElement(I18nProvider, {
     locale
-  }, /* @__PURE__ */ React81.createElement(CoolModeContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(CoolModeContext.Provider, {
     value: coolMode
-  }, /* @__PURE__ */ React81.createElement(ModalSizeContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(ModalSizeContext.Provider, {
     value: isSmallScreen ? ModalSizeOptions.COMPACT : modalSize
-  }, /* @__PURE__ */ React81.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React81.createElement(FunkitWalletProvider, null, /* @__PURE__ */ React81.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React81.createElement(ShowRecentTransactionsContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React83.createElement(FunkitWalletProvider, null, /* @__PURE__ */ React83.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React83.createElement(ShowRecentTransactionsContext.Provider, {
     value: showRecentTransactions
-  }, /* @__PURE__ */ React81.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React81.createElement(AvatarContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(TransactionStoreProvider, null, /* @__PURE__ */ React83.createElement(AvatarContext.Provider, {
     value: avatarContext
-  }, /* @__PURE__ */ React81.createElement(AppContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(AppContext.Provider, {
     value: appContext
-  }, /* @__PURE__ */ React81.createElement(ThemeIdContext.Provider, {
+  }, /* @__PURE__ */ React83.createElement(ThemeIdContext.Provider, {
     value: id
-  }, /* @__PURE__ */ React81.createElement(FunToastProvider, null, /* @__PURE__ */ React81.createElement(MoonPayProvider, {
+  }, /* @__PURE__ */ React83.createElement(FunToastProvider, null, /* @__PURE__ */ React83.createElement(MoonPayProvider, {
     apiKey: "pk_live_IxayBRQuBC3RzpPZkbGPrwUsRWAaeO",
     debug: true
-  }, /* @__PURE__ */ React81.createElement(ModalProvider, null, theme ? /* @__PURE__ */ React81.createElement("div", {
+  }, /* @__PURE__ */ React83.createElement(ModalProvider, null, theme ? /* @__PURE__ */ React83.createElement("div", {
     ...createThemeRootProps(id)
-  }, /* @__PURE__ */ React81.createElement("style", {
+  }, /* @__PURE__ */ React83.createElement("style", {
     dangerouslySetInnerHTML: {
       __html: [
         `${selector}{${cssStringFromTheme(
@@ -19779,7 +19976,7 @@ var overlay = "Dialog_overlay__1r8f575 sprinkles_backdropFilter_modalOverlay__1r
 var overlayOut = "Dialog_overlayOut__1r8f577 sprinkles_backdropFilter_modalOverlay__1rsrm2fd5 sprinkles_background_modalBackdrop_base__1rsrm2feu sprinkles_display_flex_smallScreen__1rsrm2fa sprinkles_justifyContent_center__1rsrm2f35 sprinkles_position_fixed__1rsrm2fc1";
 
 // src/components/Dialog/FocusTrap.tsx
-import React82, { useCallback as useCallback16, useEffect as useEffect24, useRef as useRef9 } from "react";
+import React84, { useCallback as useCallback17, useEffect as useEffect24, useRef as useRef9 } from "react";
 var moveFocusWithin = (element2, position) => {
   const focusableElements = element2.querySelectorAll(
     "button:not(:disabled), a[href]"
@@ -19809,19 +20006,19 @@ function FocusTrap(props) {
       }
     }
   }, [contentRef]);
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement("div", {
-    onFocus: useCallback16(
+  return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement("div", {
+    onFocus: useCallback17(
       () => contentRef.current && moveFocusWithin(contentRef.current, "end"),
       []
     ),
     tabIndex: 0
-  }), /* @__PURE__ */ React82.createElement("div", {
+  }), /* @__PURE__ */ React84.createElement("div", {
     ref: contentRef,
     style: { outline: "none" },
     tabIndex: -1,
     ...props
-  }), /* @__PURE__ */ React82.createElement("div", {
-    onFocus: useCallback16(
+  }), /* @__PURE__ */ React84.createElement("div", {
+    onFocus: useCallback17(
       () => contentRef.current && moveFocusWithin(contentRef.current, "start"),
       []
     ),
@@ -19849,7 +20046,7 @@ function Dialog({
       getComputedStyle(window.document.body).overflow !== "hidden"
     );
   }, []);
-  const handleBackdropClick = useCallback17(() => onClose(), [onClose]);
+  const handleBackdropClick = useCallback18(() => onClose(), [onClose]);
   const themeRootProps = useThemeRootProps();
   const mobile = isMobile();
   const [isOpen, setIsOpen] = useState21(open);
@@ -19862,13 +20059,13 @@ function Dialog({
       }, DialogAnimationTime);
     }
   }, [open]);
-  return /* @__PURE__ */ React83.createElement(React83.Fragment, null, isOpen ? createPortal(
-    /* @__PURE__ */ React83.createElement(RemoveScroll, {
+  return /* @__PURE__ */ React85.createElement(React85.Fragment, null, isOpen ? createPortal(
+    /* @__PURE__ */ React85.createElement(RemoveScroll, {
       enabled: bodyScrollable
-    }, /* @__PURE__ */ React83.createElement(Box, {
+    }, /* @__PURE__ */ React85.createElement(Box, {
       ...themeRootProps,
       style: { display: isHidden ? "none" : void 0 }
-    }, /* @__PURE__ */ React83.createElement(Box, {
+    }, /* @__PURE__ */ React85.createElement(Box, {
       ...themeRootProps,
       alignItems: mobile ? "flex-end" : "center",
       "aria-labelledby": titleId,
@@ -19877,7 +20074,7 @@ function Dialog({
       onClick: handleBackdropClick,
       position: "fixed",
       role: "dialog"
-    }, /* @__PURE__ */ React83.createElement(FocusTrap, {
+    }, /* @__PURE__ */ React85.createElement(FocusTrap, {
       className: open ? content : contentSlideOut,
       onClick: stopPropagation,
       role: "document"
@@ -19899,101 +20096,6 @@ var shortToastContainer = "FunShortToast_shortToastContainer__1btry8h2";
 var shortToastExit = "FunShortToast_shortToastExit__1btry8h4";
 var typeDisplay = "FunShortToast_typeDisplay__1btry8h5";
 
-// src/components/FunToast/FunToast.tsx
-import React85, { useMemo as useMemo17 } from "react";
-
-// src/components/Icons/SuccessNoBorder.tsx
-import React84 from "react";
-var SuccessNoBorderIcon = () => /* @__PURE__ */ React84.createElement("svg", {
-  width: "21",
-  height: "21",
-  viewBox: "0 0 21 21",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /* @__PURE__ */ React84.createElement("path", {
-  d: "M5.25 10.5004L8.96228 14.2127L16.3861 6.78809",
-  stroke: "currentColor",
-  strokeWidth: "2.5",
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-}));
-
-// src/components/FunToast/FunToast.tsx
-var FUN_TOAST_TYPE_DEFAULT_CONFIG = {
-  [1 /* ERROR */]: {
-    borderColor: "connectButtonBackgroundError",
-    borderWidth: "2",
-    titleSuffix: /* @__PURE__ */ React85.createElement(CloseIcon, null)
-  },
-  [3 /* SUCCESS */]: {
-    borderColor: "connectionIndicator",
-    borderWidth: "2",
-    titleSuffix: /* @__PURE__ */ React85.createElement(SuccessNoBorderIcon, null)
-  },
-  [2 /* PENDING */]: {
-    borderColor: "standby",
-    borderWidth: "2",
-    titleSuffix: /* @__PURE__ */ React85.createElement(SpinnerIcon, null)
-  },
-  [0 /* INFO */]: {
-    borderColor: void 0,
-    borderWidth: void 0,
-    titleSuffix: void 0
-  }
-};
-function FunToast({
-  type = 3 /* SUCCESS */,
-  title,
-  titleSuffix,
-  hideTitleSuffix = false,
-  description,
-  icon
-}) {
-  const styleConfigs = FUN_TOAST_TYPE_DEFAULT_CONFIG?.[type];
-  const finalTitleSuffix = useMemo17(() => {
-    if (titleSuffix) {
-      return titleSuffix;
-    }
-    return styleConfigs.titleSuffix;
-  }, [styleConfigs.titleSuffix, titleSuffix]);
-  return /* @__PURE__ */ React85.createElement(Box, {
-    marginBottom: "5",
-    padding: "20",
-    borderRadius: "16",
-    borderColor: styleConfigs.borderColor,
-    borderWidth: styleConfigs.borderWidth,
-    borderStyle: "solid"
-  }, /* @__PURE__ */ React85.createElement(Box, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "14"
-  }, icon ? /* @__PURE__ */ React85.createElement(Box, {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center"
-  }, icon) : null, /* @__PURE__ */ React85.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    gap: "10",
-    width: "full"
-  }, /* @__PURE__ */ React85.createElement(Box, {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "full"
-  }, /* @__PURE__ */ React85.createElement(Text, {
-    size: "18",
-    weight: "bold",
-    color: "modalText"
-  }, title), hideTitleSuffix ? null : /* @__PURE__ */ React85.createElement(Box, {
-    color: styleConfigs.borderColor
-  }, finalTitleSuffix)), /* @__PURE__ */ React85.createElement(Text, {
-    size: "12",
-    weight: "medium",
-    color: "modalTextDim"
-  }, description))));
-}
-
 // src/components/FunToast/FunShortToast.tsx
 var ShortFunToast = ({
   type = 1 /* ERROR */,
@@ -20069,7 +20171,7 @@ function DialogContent({
 }
 
 // src/components/ProfileDetails/EoaProfileDetails.tsx
-import React88, { useCallback as useCallback18, useContext as useContext14, useEffect as useEffect26, useState as useState22 } from "react";
+import React88, { useCallback as useCallback19, useContext as useContext14, useEffect as useEffect26, useState as useState22 } from "react";
 
 // src/components/ConnectButton/abbreviateETHBalance.ts
 var units = ["k", "m", "b", "t"];
@@ -20121,7 +20223,7 @@ function EoaProfileDetails({
   const showRecentTransactions = useContext14(ShowRecentTransactionsContext);
   const [copiedAddress, setCopiedAddress] = useState22(false);
   const i18n2 = useContext14(I18nContext);
-  const copyAddressAction = useCallback18(() => {
+  const copyAddressAction = useCallback19(() => {
     if (address) {
       navigator.clipboard.writeText(address);
       setCopiedAddress(true);
@@ -20795,9 +20897,10 @@ var animateContentInClass8 = "FWHome_animateContentInClass__v9wve1a";
 var animateContentOutClass8 = "FWHome_animateContentOutClass__v9wve1b";
 var animateTitleInClass2 = "FWHome_animateTitleInClass__v9wve16";
 var animateTitleOutClass2 = "FWHome_animateTitleOutClass__v9wve17";
+var scroll = "FWHome_scroll__v9wve1c";
 
 // src/components/ProfileDetails/FunWalletProfileViews/FWHome/FWHomeCheckoutSection.tsx
-import React99, { Fragment as Fragment3, useMemo as useMemo21 } from "react";
+import React99, { Fragment as Fragment4, useMemo as useMemo21 } from "react";
 var MAX_LATEST_CHECKOUTS = 1;
 function FWHomeCheckoutSection({ onClose }) {
   const { checkoutHistoryStateMap } = useFunkitAllPostCheckoutsInternal();
@@ -20813,7 +20916,7 @@ function FWHomeCheckoutSection({ onClose }) {
       remainingCount: remaining
     };
   }, [checkoutHistoryStateMap]);
-  return latestCheckoutHistories.length > 0 ? /* @__PURE__ */ React99.createElement(Fragment3, null, /* @__PURE__ */ React99.createElement(FunDivider, {
+  return latestCheckoutHistories.length > 0 ? /* @__PURE__ */ React99.createElement(Fragment4, null, /* @__PURE__ */ React99.createElement(FunDivider, {
     marginY: "16"
   }), /* @__PURE__ */ React99.createElement(Box, {
     display: "flex",
@@ -20859,7 +20962,8 @@ var FWHomeTokenBalanceDisplayRow = ({ asset }) => {
     height: "full"
   }, /* @__PURE__ */ React100.createElement(Box, {
     width: "32",
-    height: "32"
+    height: "32",
+    alignSelf: "center"
   }, /* @__PURE__ */ React100.createElement("img", {
     src: isMatic ? polygonIcon2 : isArb ? arbIcon : isNotNullish(asset.logo) ? asset.logo : fallbackIconSrc,
     width: 28,
@@ -21038,6 +21142,7 @@ function FWHome({
     display: "flex",
     flexDirection: "column",
     gap: "10",
+    className: scroll,
     style: { maxHeight: 170, overflow: "auto" }
   }, AssetsList.map((component) => component)), /* @__PURE__ */ React101.createElement(FWHomeCheckoutSection, {
     onClose
@@ -21220,8 +21325,8 @@ function AccountModal({ onClose, open }) {
 }
 
 // src/components/ChainModal/ChainModal.tsx
-import React107, { Fragment as Fragment4, useContext as useContext15 } from "react";
-import { useDisconnect as useDisconnect3, useNetwork as useNetwork8, useSwitchNetwork } from "wagmi";
+import React107, { Fragment as Fragment5, useContext as useContext15 } from "react";
+import { useDisconnect as useDisconnect3, useNetwork as useNetwork7, useSwitchNetwork } from "wagmi";
 
 // src/components/Icons/DisconnectSq.tsx
 import React105 from "react";
@@ -21294,7 +21399,7 @@ var MobileScrollClassName = "ChainModal_MobileScrollClassName__1107ixc1";
 
 // src/components/ChainModal/ChainModal.tsx
 function ChainModal({ onClose, open }) {
-  const { chain: activeChain } = useNetwork8();
+  const { chain: activeChain } = useNetwork7();
   const { chains, pendingChainId, reset, switchNetwork } = useSwitchNetwork({
     onSettled: () => {
       reset();
@@ -21363,7 +21468,7 @@ function ChainModal({ onClose, open }) {
       }
       const isCurrentChain = chain.id === activeChain?.id;
       const switching = !isCurrentChain && chain.id === pendingChainId;
-      return /* @__PURE__ */ React107.createElement(Fragment4, {
+      return /* @__PURE__ */ React107.createElement(Fragment5, {
         key: chain.id
       }, /* @__PURE__ */ React107.createElement(MenuButton, {
         currentlySelected: isCurrentChain,
@@ -21483,6 +21588,7 @@ function ChainModal({ onClose, open }) {
 import React109 from "react";
 
 // src/components/FunCheckoutHistoryModal/FunCheckoutHistoryDetail.tsx
+import { FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO2 } from "@funkit/core";
 import React108, { useMemo as useMemo24 } from "react";
 var FAKE_DELAY_MS = 4107;
 function FunCheckoutHistoryDetail({
@@ -21500,6 +21606,7 @@ function FunCheckoutHistoryDetail({
   } = useCheckoutStateBooleans(checkoutHistoryInfo.state);
   useCheckoutHistoryListener(isProcessing);
   const timelineLabels = useMemo24(() => {
+    const explorerInfo = FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO2[checkoutHistoryInfo.fromChainId].explorerInfo;
     return [
       {
         text: "Order Submitted",
@@ -21511,7 +21618,9 @@ function FunCheckoutHistoryDetail({
         text: "Order Processing",
         description: formatTimestamp(
           new Date(checkoutHistoryInfo.createdTimeMs + FAKE_DELAY_MS)
-        )
+        ),
+        linkText: `View on ${explorerInfo.name}`,
+        linkUrl: `${explorerInfo.url}/address/${checkoutHistoryInfo.depositAddr}`
       },
       {
         text: `Order ${isError ? "Failed" : isExpired ? "Expired" : "Delivered"}`,
@@ -21522,8 +21631,10 @@ function FunCheckoutHistoryDetail({
     ];
   }, [
     checkoutHistoryInfo.createdTimeMs,
+    checkoutHistoryInfo.depositAddr,
     checkoutHistoryInfo.expirationTimestampSeconds,
     checkoutHistoryInfo.lastUpdatedTimeMs,
+    checkoutHistoryInfo.toChainId,
     isError,
     isExpired,
     isTerminal
@@ -21558,7 +21669,23 @@ function FunCheckoutHistoryDetail({
   }, "You will receive a notification when your order has finished."))), isFailed ? /* @__PURE__ */ React108.createElement(FunToast, {
     type: 1 /* ERROR */,
     title: "Order Failed",
-    description: "A problem occurred processing your order. Please contact support for more information.",
+    isDescriptionText: false,
+    description: /* @__PURE__ */ React108.createElement(Text, {
+      size: "12",
+      weight: "medium",
+      color: "modalTextDim"
+    }, "A problem occurred processing your order. Please", /* @__PURE__ */ React108.createElement(FunLinkButton, {
+      hasPadding: false,
+      text: "contact support",
+      textProps: {
+        size: "12",
+        weight: "medium",
+        color: "modalTextSecondary"
+      },
+      onClick: () => {
+        window.location = "mailto:support@fun.xyz";
+      }
+    }), " ", "for more information."),
     hideTitleSuffix: true
   }) : null);
 }
@@ -21595,16 +21722,16 @@ function FunCheckoutHistoryModal({
 }
 
 // src/components/FunCheckoutModal/FunCheckoutModal.tsx
-import React112, { useCallback as useCallback20, useEffect as useEffect31, useMemo as useMemo26, useState as useState30 } from "react";
-import { useNetwork as useNetwork10 } from "wagmi";
+import React112, { useCallback as useCallback21, useEffect as useEffect31, useMemo as useMemo26, useState as useState30 } from "react";
+import { useNetwork as useNetwork9 } from "wagmi";
 
 // src/components/FunCheckoutModal/FunCheckoutSelectAssetStep.tsx
 import {
   FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS as FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS2,
-  FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO2
+  FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO as FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO3
 } from "@funkit/core";
-import React110, { useCallback as useCallback19, useEffect as useEffect30, useMemo as useMemo25, useState as useState29 } from "react";
-import { useNetwork as useNetwork9 } from "wagmi";
+import React110, { useCallback as useCallback20, useEffect as useEffect30, useMemo as useMemo25, useState as useState29 } from "react";
+import { useNetwork as useNetwork8 } from "wagmi";
 
 // src/components/FunCheckoutModal/FunCheckoutSelectAssetStep.css.ts
 var animateContentInClass9 = "FunCheckoutSelectAssetStep_animateContentInClass__1g86dx12";
@@ -21614,15 +21741,16 @@ var animateContentOutClass9 = "FunCheckoutSelectAssetStep_animateContentOutClass
 function MeshOrAccountSelectAsset({
   paymentMethodInfo,
   checkoutId,
-  onFinish
+  onFinish,
+  isOnFinishLoading
 }) {
   const [accountHoldingsMap, setAccountHoldingsMap] = useState29({});
-  const [isLoading, setIsLoading] = useState29(true);
+  const [isLoadingAssets, setIsLoadingAssets] = useState29(true);
   const [selectedTokenSymbol, setSelectedTokenSymbol] = useState29();
   const { checkoutItem, updateSourceAsset } = useFunkitPreCheckoutInternal(checkoutId);
   const draftDollarValueNormalized = checkoutItem?.draftDollarValue || 0;
   const funkitConfig = useFunkitConfig();
-  const { chain: activeChain } = useNetwork9();
+  const { chain: activeChain } = useNetwork8();
   const { fetchInfo: manualFetchNetworkInfo } = useMeshActiveNetworkInfo(
     paymentMethodInfo?.meta?.accessToken?.brokerName
   );
@@ -21630,7 +21758,7 @@ function MeshOrAccountSelectAsset({
     paymentMethodInfo.paymentMethod === "balance" /* ACCOUNT_BALANCE */
   );
   const { funWalletAssets } = useFunkitWallet();
-  const generateAccountHoldingsMapForMesh = useCallback19(async () => {
+  const generateAccountHoldingsMapForMesh = useCallback20(async () => {
     if (funkitConfig?.apiKey && !!activeChain) {
       const [cryptoHoldings, meshNetworkInfo] = await Promise.all([
         fetchMeshAccountCryptoHoldings({
@@ -21670,13 +21798,13 @@ function MeshOrAccountSelectAsset({
     paymentMethodInfo?.meta?.accessToken?.accountTokens,
     paymentMethodInfo?.meta?.accessToken?.brokerName
   ]);
-  const generateAccountHoldingsMapForBalance = useCallback19(async () => {
+  const generateAccountHoldingsMapForBalance = useCallback20(async () => {
     if (activeChain) {
       const itemMap = {};
       Object.values(funWalletAssets || {}).map((fwAsset) => {
         if (fwAsset.symbol && fwAsset.contractAddress && fwAsset.contractAddress !== checkoutItem?.initSettings.config.targetAsset) {
           let normalizedTokenAddress = fwAsset.contractAddress;
-          if (FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO2?.[activeChain.id]?.nativeCurrency?.symbol?.toUpperCase() === fwAsset.symbol.toUpperCase()) {
+          if (FUNKIT_CONNECT_SUPPORTED_CHAINS_INFO3?.[activeChain.id]?.nativeCurrency?.symbol?.toUpperCase() === fwAsset.symbol.toUpperCase()) {
             normalizedTokenAddress = FUNKIT_CONNECT_CHECKOUT_NATIVE_CURRENCY_ADDRESS2;
           }
           itemMap[fwAsset.symbol] = {
@@ -21700,7 +21828,7 @@ function MeshOrAccountSelectAsset({
   ]);
   useEffect30(() => {
     async function fetchAccountHoldings() {
-      setIsLoading(true);
+      setIsLoadingAssets(true);
       const paymentMethod = paymentMethodInfo.paymentMethod;
       let itemMap = {};
       if (paymentMethod === "brokerage" /* BROKERAGE */) {
@@ -21709,7 +21837,7 @@ function MeshOrAccountSelectAsset({
         itemMap = await generateAccountHoldingsMapForBalance();
       }
       setAccountHoldingsMap(itemMap);
-      setIsLoading(false);
+      setIsLoadingAssets(false);
     }
     fetchAccountHoldings().catch(console.error);
   }, [
@@ -21734,7 +21862,7 @@ function MeshOrAccountSelectAsset({
       })
     );
   }, [accountHoldingsMap]);
-  const onClickContinue = useCallback19(() => {
+  const onClickContinue = useCallback20(() => {
     if (selectedTokenSymbol && !!activeChain?.id) {
       const tokenAddress = accountHoldingsMap[selectedTokenSymbol].tokenAddress;
       updateSourceAsset(
@@ -21774,7 +21902,7 @@ function MeshOrAccountSelectAsset({
   }, "Select Asset to Pay")), /* @__PURE__ */ React110.createElement(Box, {
     paddingBottom: "24",
     paddingTop: "18"
-  }, isLoading ? /* @__PURE__ */ React110.createElement(Text, {
+  }, isLoadingAssets ? /* @__PURE__ */ React110.createElement(Text, {
     color: "modalText"
   }, "Loading assets...") : /* @__PURE__ */ React110.createElement(FunSelectDropdown, {
     handleSelect: (newValue) => {
@@ -21796,7 +21924,15 @@ function MeshOrAccountSelectAsset({
   })) : null, /* @__PURE__ */ React110.createElement(FunButton, {
     type: "primary",
     title: "Continue",
-    isDisabled: !selectedTokenSymbol || showErrorNotification,
+    isDisabled: !selectedTokenSymbol || showErrorNotification || isOnFinishLoading,
+    titleSuffix: isOnFinishLoading ? /* @__PURE__ */ React110.createElement(Box, {
+      display: "flex",
+      alignItems: "center",
+      color: "modalText"
+    }, /* @__PURE__ */ React110.createElement(SpinnerIcon, {
+      height: 16,
+      width: 16
+    })) : null,
     onClick: onClickContinue
   }));
 }
@@ -21804,6 +21940,7 @@ function FunCheckoutSelectAssetStep({
   checkoutId,
   selectedPaymentMethodInfo,
   onFinish,
+  isOnFinishLoading,
   animateOut = false
 }) {
   if (!selectedPaymentMethodInfo) {
@@ -21818,6 +21955,7 @@ function FunCheckoutSelectAssetStep({
   }, ["brokerage" /* BROKERAGE */, "balance" /* ACCOUNT_BALANCE */].includes(
     selectedPaymentMethodInfo.paymentMethod
   ) ? /* @__PURE__ */ React110.createElement(MeshOrAccountSelectAsset, {
+    isOnFinishLoading,
     onFinish,
     paymentMethodInfo: selectedPaymentMethodInfo,
     checkoutId
@@ -21855,6 +21993,10 @@ function FunCheckoutVerifyDetailsStep({
 
 // src/components/FunCheckoutModal/FunCheckoutModal.tsx
 var ANIMATION_DELAY = 150;
+var DUMMY_TRANSFER_PARAMS = {
+  toAddress: "0x000000000000000000000000000000000000dEaD",
+  tokenAmount: 20
+};
 function FunCheckoutModal({
   onClose,
   open,
@@ -21863,7 +22005,7 @@ function FunCheckoutModal({
   if (open && !checkoutId) {
     throw new Error("Unable to open checkout modal without a checkoutId");
   }
-  const { chain: activeChain } = useNetwork10();
+  const { chain: activeChain } = useNetwork9();
   const { isLoggedIn: isWeb2Login, funWallet } = useFunkitWallet();
   const { updateSourceAsset } = useFunkitPreCheckoutInternal(checkoutId);
   const { openConnectModal } = useConnectModal();
@@ -21882,6 +22024,7 @@ function FunCheckoutModal({
   const { checkoutItem, getCheckoutQuote } = useFunkitPreCheckoutInternal(
     checkoutId || ""
   );
+  const { generateCheckoutTransferOpItems } = useCheckoutAccountBalanceTransfer(checkoutId);
   const [selectedPaymentMethodInfo, setSelectedPaymentMethodInfo] = useState30(null);
   const titleConfig = useMemo26(() => {
     const baseTitle = checkoutItem?.initSettings?.config?.modalTitle || "Checkout";
@@ -21954,7 +22097,7 @@ function FunCheckoutModal({
     checkoutStep,
     selectedPaymentMethodInfo?.paymentMethod
   ]);
-  const redirectToCheckoutHistory = useCallback20(
+  const redirectToCheckoutHistory = useCallback21(
     (depositAddress) => {
       if (depositAddress) {
         onClose?.();
@@ -21965,33 +22108,48 @@ function FunCheckoutModal({
     },
     [onClose, openFunCheckoutHistoryModal]
   );
-  const onSourceAssetConfirmed = useCallback20(async () => {
-    if (checkoutItem?.selectedSourceAssetInfo?.address && checkoutItem?.selectedSourceAssetInfo?.symbol) {
-      const selectedPaymentMethod = selectedPaymentMethodInfo?.paymentMethod;
-      if (selectedPaymentMethod === "balance" /* ACCOUNT_BALANCE */) {
-        setSelectedPaymentMethodInfo({
-          paymentMethod: "balance" /* ACCOUNT_BALANCE */,
-          title: "Your Wallet",
-          titleIcon: /* @__PURE__ */ React112.createElement(WalletDecoratedIcon, null),
-          description: formatAddress(await funWallet?.getAddress()),
-          meta: {}
-        });
-      } else if (selectedPaymentMethod === "card" /* CARD */) {
-        setSelectedPaymentMethodInfo({
-          paymentMethod: "card" /* CARD */,
-          title: "Debit or Credit",
-          titleIcon: /* @__PURE__ */ React112.createElement(CreditCardIcon, null),
-          description: "",
-          meta: {}
-        });
+  const [isSourceAssetConfirming, setIsSourceAssetConfirming] = useState30(false);
+  const onSourceAssetConfirmed = useCallback21(async () => {
+    try {
+      if (checkoutItem?.selectedSourceAssetInfo?.address && checkoutItem?.selectedSourceAssetInfo?.symbol) {
+        setIsSourceAssetConfirming(true);
+        let sponsorInitialTransferGasLimit = 0;
+        const selectedPaymentMethod = selectedPaymentMethodInfo?.paymentMethod;
+        if (selectedPaymentMethod === "balance" /* ACCOUNT_BALANCE */) {
+          setSelectedPaymentMethodInfo({
+            paymentMethod: "balance" /* ACCOUNT_BALANCE */,
+            title: "Your Wallet",
+            titleIcon: /* @__PURE__ */ React112.createElement(WalletDecoratedIcon, null),
+            description: formatAddress(await funWallet?.getAddress()),
+            meta: {}
+          });
+          const { transferOp } = await generateCheckoutTransferOpItems(
+            DUMMY_TRANSFER_PARAMS.toAddress,
+            DUMMY_TRANSFER_PARAMS.tokenAmount
+          );
+          sponsorInitialTransferGasLimit = Number(transferOp?.userOp.preVerificationGas || 0) + Number(transferOp?.userOp.callGasLimit || 0) + Number(transferOp?.userOp.verificationGasLimit || 0);
+        } else if (selectedPaymentMethod === "card" /* CARD */) {
+          setSelectedPaymentMethodInfo({
+            paymentMethod: "card" /* CARD */,
+            title: "Debit or Credit",
+            titleIcon: /* @__PURE__ */ React112.createElement(CreditCardIcon, null),
+            description: "",
+            meta: {}
+          });
+        }
+        setCheckoutStep("confirmation" /* CONFIRMATION */);
+        await getCheckoutQuote(sponsorInitialTransferGasLimit);
       }
-      setCheckoutStep("confirmation" /* CONFIRMATION */);
-      await getCheckoutQuote();
+    } catch (err) {
+      console.error("Error confirming source asset", err);
+    } finally {
+      setIsSourceAssetConfirming(false);
     }
   }, [
     checkoutItem?.selectedSourceAssetInfo?.address,
     checkoutItem?.selectedSourceAssetInfo?.symbol,
     funWallet,
+    generateCheckoutTransferOpItems,
     getCheckoutQuote,
     selectedPaymentMethodInfo?.paymentMethod
   ]);
@@ -21999,7 +22157,7 @@ function FunCheckoutModal({
   useEffect31(() => {
     onSourceAssetConfirmed();
   }, [triggerSymbol]);
-  const onSelectPaymentMethod = useCallback20(
+  const onSelectPaymentMethod = useCallback21(
     async (partialPaymentMethodInfo) => {
       if (!isWeb2Login) {
         onClose?.();
@@ -22010,16 +22168,17 @@ function FunCheckoutModal({
       if (partialPaymentMethodInfo.paymentMethod === "balance" /* ACCOUNT_BALANCE */) {
         setCheckoutStep("select_asset" /* SELECT_ASSET */);
       } else if (partialPaymentMethodInfo.paymentMethod === "card" /* CARD */) {
-        if (!activeChain)
+        if (!checkoutItem?.initSettings.config.targetChain)
           return;
+        const targetChainId = checkoutItem?.initSettings.config.targetChain.toString();
         const tokenAddress = await getTokenAddress(
           DEFAULT_DEPOSIT_TOKEN_TICKER,
-          activeChain.id.toString()
+          targetChainId
         );
         updateSourceAsset(
           tokenAddress,
           DEFAULT_DEPOSIT_TOKEN_TICKER,
-          activeChain.id.toString()
+          targetChainId
         );
         triggerSourceAssetConfirmedFn();
       } else {
@@ -22027,7 +22186,7 @@ function FunCheckoutModal({
       }
     },
     [
-      activeChain,
+      checkoutItem?.initSettings.config.targetChain,
       isWeb2Login,
       onClose,
       openConnectModal,
@@ -22070,11 +22229,13 @@ function FunCheckoutModal({
     onSoftHide: (isHidden) => setIsSoftHidden(isHidden),
     onBackToHome: () => void 0,
     token: checkoutItem?.selectedSourceAssetInfo.symbol || DEFAULT_DEPOSIT_TOKEN_TICKER,
-    tokenAmountUsd: checkoutItem?.latestQuote?.estTotalUsd || 0,
+    tokenChainId: checkoutItem?.selectedSourceAssetInfo.chainId || "",
+    tokenAmountUsd: Number(checkoutItem?.latestQuote?.estTotalFromAmount) || 0,
     redirectToCheckoutHistory
   })) : checkoutStep === "select_asset" /* SELECT_ASSET */ ? /* @__PURE__ */ React112.createElement(FunCheckoutSelectAssetStep, {
     checkoutId,
     selectedPaymentMethodInfo,
+    isOnFinishLoading: isSourceAssetConfirming,
     onFinish: triggerSourceAssetConfirmedFn,
     animateOut
   }) : checkoutStep === "confirmation" /* CONFIRMATION */ ? /* @__PURE__ */ React112.createElement(FunCheckoutConfirmationStep, {
@@ -22171,10 +22332,10 @@ import React125 from "react";
 import { useDisconnect as useDisconnect4 } from "wagmi";
 
 // src/components/ConnectOptions/FunConnectOptions.tsx
-import React124, { useCallback as useCallback22, useState as useState34 } from "react";
+import React124, { useCallback as useCallback23, useState as useState34 } from "react";
 
 // src/components/FunSignInFlow/FunSignInStep.tsx
-import React117, { useCallback as useCallback21, useState as useState32 } from "react";
+import React117, { useCallback as useCallback22, useState as useState32 } from "react";
 
 // src/utils/groupBy.ts
 function groupBy(items, getKey) {
@@ -22568,7 +22729,7 @@ function FunSignInStep({
       changeStep(3 /* PENDING_WALLET */);
     }
   };
-  const handleEmailSubmit = useCallback21(async () => {
+  const handleEmailSubmit = useCallback22(async () => {
     const sendResult = await sendOTPCode?.();
     if (sendResult) {
       setSelectedOptionId(funkitConnectWallet2.id);
@@ -23079,7 +23240,7 @@ function FunConnectOptions({
       setSelectedWallet(void 0);
     }
   };
-  const connectToWallet = useCallback22(async (wallet) => {
+  const connectToWallet = useCallback23(async (wallet) => {
     if (wallet.ready) {
       wallet?.connect?.()?.catch(() => {
         changeStep(4 /* ERROR */);
@@ -23191,22 +23352,22 @@ function FunDevTestModal({ onClose, open }) {
 function useModalStateValue() {
   const [isModalOpen, setModalOpen] = useState35(false);
   return {
-    closeModal: useCallback23(() => setModalOpen(false), []),
+    closeModal: useCallback24(() => setModalOpen(false), []),
     isModalOpen,
-    openModal: useCallback23(() => setModalOpen(true), [])
+    openModal: useCallback24(() => setModalOpen(true), [])
   };
 }
 function useModalStateValueWithId() {
   const [isModalOpen, setModalOpen] = useState35(false);
   const [modalId, setModalId] = useState35(null);
   return {
-    closeModal: useCallback23(() => {
+    closeModal: useCallback24(() => {
       setModalId(null);
       setModalOpen(false);
     }, []),
     isModalOpen,
     modalId,
-    openModal: useCallback23((id) => {
+    openModal: useCallback24((id) => {
       setModalId(id);
       setModalOpen(true);
     }, [])
@@ -23277,7 +23438,7 @@ function ModalProvider({ children }) {
     openModal: openFunDevTestModal
   } = useModalStateValue();
   const connectionStatus = useConnectionStatus();
-  const { chain } = useNetwork11();
+  const { chain } = useNetwork10();
   const chainSupported = !chain?.unsupported;
   function closeModals({
     keepConnectModalOpen = false
@@ -23421,7 +23582,7 @@ function ConnectButtonRenderer({
     watch: true,
     cacheTime: 3e4
   });
-  const { chain: activeChain } = useNetwork12();
+  const { chain: activeChain } = useNetwork11();
   const rainbowkitChainsById = useRainbowKitChainsById();
   const authenticationStatus = useAuthenticationStatus() ?? void 0;
   const rainbowKitChain = activeChain ? rainbowkitChainsById[activeChain.id] : void 0;