@funkit/connect 5.4.0 → 5.4.1

package/dist/index.js

@@ -400,7 +400,7 @@ function Avatar({ address, imageUrl, loading, size }) {
 }
 
 // src/components/ConnectButton/ConnectButton.tsx
-import React251, { useEffect as useEffect49, useState as useState69 } from "react";
+import React252, { useEffect as useEffect49, useState as useState69 } from "react";
 
 // src/css/touchableStyles.css.ts
 var active = { shrink: "_7rkubb8", shrinkSm: "_7rkubb9" };
@@ -504,7 +504,7 @@ import PrivyJS, {
   getUserEmbeddedWallet,
   LocalStorage
 } from "@privy-io/js-sdk-core";
-import React248, {
+import React249, {
   createContext as createContext18,
   useCallback as useCallback47,
   useContext as useContext18,
@@ -1023,7 +1023,7 @@ var useFunkitConnectChainsById = () => groupChainsById(useFunkitConnectChains())
 var useInitialChainId = () => useContext4(FunkitConnectChainContext).initialChainId;
 
 // src/providers/ModalContext.tsx
-import React247, {
+import React248, {
   createContext as createContext17,
   useCallback as useCallback46,
   useContext as useContext17,
@@ -3141,10 +3141,10 @@ var flagConfig = {
           {
             key: "apiKey",
             type: "isAnyOf",
-            values: [POLYMARKET_API_KEY2]
+            values: [POLYMARKET_API_KEY2, KATANA_API_KEY2]
           }
         ],
-        // Turn off geoblock for PM on our end. PM will handle the conditional display of the Deposit button.
+        // Turn off geoblock for PM & Katana on our end. PM & Katana will handle the conditional display of the Deposit button.
         value: ""
       }
     ]
@@ -3167,7 +3167,7 @@ var flagConfig = {
           {
             key: "apiKey",
             type: "isAnyOf",
-            values: [DYDX_API_KEY2]
+            values: [DYDX_API_KEY2, KATANA_API_KEY2]
           }
         ],
         value: true
@@ -3441,7 +3441,8 @@ var flagConfig = {
       8453: ["*"],
       42161: ["*"],
       10: ["*"],
-      56: ["*"]
+      56: ["*"],
+      747474: ["*"]
     })
   },
   [FlagKey.RelayBypassTargetChainsAndAssets]: {
@@ -6430,23 +6431,25 @@ import {
 import { useMemo as useMemo7 } from "react";
 
 // src/hooks/useDirectExecutionInfoPolling.ts
-import { getDirectExecutionByTxHash } from "@funkit/api-base";
+import {
+  getDirectExecutionByTxHash
+} from "@funkit/api-base";
 import { RELAY_TERMINAL_STATUSES } from "@funkit/fun-relay";
 import { useQuery as useQuery2 } from "@tanstack/react-query";
 var RELAY_FETCH_INTERVAL = 1500;
 var logPrefix = "useDirectExecutionInfoPolling";
 function useDirectExecutionInfoPolling({
-  txHash
+  initDirectExecution
 }) {
   const { apiKey } = useFunkitConfig();
   const { data: directExecution, isLoading } = useQuery2({
-    queryKey: [logPrefix, txHash],
+    queryKey: [logPrefix, initDirectExecution?.txHash],
     queryFn: async () => {
       try {
         const data = await getDirectExecutionByTxHash({
           apiKey,
           logger,
-          txHash
+          txHash: initDirectExecution?.txHash
           // query is disabled if txHash not present
         });
         logger.log(`${logPrefix}:response`, data);
@@ -6467,7 +6470,8 @@ function useDirectExecutionInfoPolling({
       }
       return RELAY_FETCH_INTERVAL;
     },
-    enabled: !!txHash
+    initialData: initDirectExecution,
+    enabled: !!initDirectExecution?.txHash
   });
   return {
     directExecution,
@@ -6488,9 +6492,11 @@ function mapRelayExecutionStatusToCheckoutState(status) {
   }
 }
 function useCheckoutDirectExecutionHistory({
-  txHash
+  initDirectExecution
 }) {
-  const { directExecution } = useDirectExecutionInfoPolling({ txHash });
+  const { directExecution } = useDirectExecutionInfoPolling({
+    initDirectExecution
+  });
   const status = directExecution?.listenerInfo?.status ?? RelayExecutionStatus.PENDING;
   const state = useMemo7(() => {
     return mapRelayExecutionStatusToCheckoutState(status);
@@ -6510,17 +6516,27 @@ function useCheckoutDirectExecutionHistory({
     isRefunded: refundState === CheckoutRefundState.REFUNDED,
     isCompleted: state === CheckoutState2.COMPLETED,
     isFailed: state === CheckoutState2.CHECKOUT_ERROR,
-    isDelayed: isDelayed2
+    isDelayed: isDelayed2,
+    isProcessing: state === CheckoutState2.PENDING_RECEIVAL
   };
 }
 
+// src/utils/directExecution.ts
+function getDirectExecutionUpdatedTimeMs({
+  directExecution
+}) {
+  const updatedAt = directExecution?.listenerInfo?.relayExecutionRequestDetails?.updatedAt || directExecution?.listenerInfo?.time || // Fallback to 0 if updatedAt is not defined. Not ideal but should really not happen unless its a really old test direct execution record
+  directExecution?.updatedTimeMs || 0;
+  return new Date(updatedAt).getTime();
+}
+
 // src/utils/purifyCheckoutHistoryItem.ts
 var purifyCheckoutHistoryItem = (item) => {
   if ("depositAddr" in item) {
     return {
-      depositAddr: item.depositAddr,
       directExecution: false,
       id: item.depositAddr,
+      depositAddr: item.depositAddr,
       fromAmountBaseUnit: item.fromAmountBaseUnit,
       fromChainId: item.fromChainId,
       fromTokenAddress: item.fromTokenAddress,
@@ -6528,7 +6544,9 @@ var purifyCheckoutHistoryItem = (item) => {
       toChainId: item.toChainId,
       toTokenAddress: item.toTokenAddress,
       toAmountBaseUnit: item.toAmountBaseUnit,
-      createdTimeMs: item.createdTimeMs
+      createdTimeMs: item.createdTimeMs,
+      updatedTimeMs: item.lastUpdatedTimeMs,
+      additionalActions: item?.clientMetadata?.evaluatedActionsParams ?? []
     };
   }
   return {
@@ -6544,7 +6562,9 @@ var purifyCheckoutHistoryItem = (item) => {
     toTokenAddress: item.toTokenAddress,
     toAmountBaseUnit: item.toAmountBaseUnit,
     txHash: item.txHash,
-    createdTimeMs: item.createdTimeMs
+    createdTimeMs: item.createdTimeMs,
+    updatedTimeMs: getDirectExecutionUpdatedTimeMs({ directExecution: item }),
+    additionalActions: item?.clientMetadata?.evaluatedActionsParams ?? []
   };
 };
 
@@ -6809,7 +6829,7 @@ function getCheckoutCompletionTime(checkout) {
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryDetail.tsx
 import React214, { useCallback as useCallback40, useMemo as useMemo36, useState as useState57 } from "react";
-import { createPortal as createPortal11 } from "react-dom";
+import { createPortal as createPortal13 } from "react-dom";
 
 // src/components/HelpAlert/HelpAlert.tsx
 import React64 from "react";
@@ -13819,6 +13839,12 @@ function PaymentAmountSummary({
       quote.baseQuote.estSubtotalUsd + Number.parseFloat(quote.finalPaymentFeeUsd) - Number.parseFloat(quote.finalSpreadUsd)
     );
   }, [quote]);
+  const receiveTokenUsdAmount = useMemo17(() => {
+    if (!quote) return void 0;
+    return formatCurrencyAndStringify2(
+      Number.parseFloat(quote.finalTotalUsd) - Number.parseFloat(quote.finalPaymentFeeUsd) - Number.parseFloat(quote.finalSpreadUsd)
+    );
+  }, [quote]);
   const targetAssetTicker = checkoutConfig?.targetAssetTicker;
   const targetTokenAmount = checkoutConfig?.targetAssetAmount ?? 0;
   const targetItemName = (targetAssetTicker || checkoutConfig?.checkoutItemTitle) ?? "";
@@ -13869,6 +13895,7 @@ function PaymentAmountSummary({
       label: receiveAmountLabel,
       paymentTokenAmount: targetTokenAmount,
       valueSymbol: targetItemName,
+      paymentUsdAmount: uiCustomizations?.confirmationScreen?.showReceiveAmountUsd ? receiveTokenUsdAmount : void 0,
       icon: /* @__PURE__ */ React122.createElement(
         FunAssetAvatar,
         {
@@ -13880,7 +13907,7 @@ function PaymentAmountSummary({
           assetName: "checkout-asset"
         }
       ),
-      isLoading: false
+      isLoading: uiCustomizations?.confirmationScreen?.showReceiveAmountUsd ? isLoading : false
     }
   ));
 }
@@ -20140,6 +20167,7 @@ function FunSelectBrokerage({
 }
 
 // src/modals/CheckoutModal/SelectBrokerage.tsx
+import { createPortal as createPortal10 } from "react-dom";
 var SelectBrokerageInfo = {
   Component: SelectBrokerage,
   onNext(state, payload) {
@@ -20198,7 +20226,8 @@ function SelectBrokerage({
       });
     }
   };
-  return /* @__PURE__ */ React178.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React178.createElement(
+  const bottomSectionRef = useBottomSectionRef();
+  return /* @__PURE__ */ React178.createElement(React178.Fragment, null, /* @__PURE__ */ React178.createElement(Box, { display: "flex", flexDirection: "column", gap: VERTICAL_SECTION_GAP }, /* @__PURE__ */ React178.createElement(
     FunInput,
     {
       placeholder: "Search exchanges",
@@ -20213,16 +20242,26 @@ function SelectBrokerage({
       options: filteredOptions,
       selectedValue: selectedExchange ?? ""
     }
-  )));
+  ))), bottomSectionRef && createPortal10(/* @__PURE__ */ React178.createElement(Dialog.BottomBar, null), bottomSectionRef));
 }
 
 // src/modals/CheckoutModal/SourceChange/SourceChange.tsx
 import { BridgeCustomerStatus as BridgeCustomerStatus6 } from "@funkit/api-base";
 import React179, { useEffect as useEffect35, useState as useState45 } from "react";
-import { createPortal as createPortal10 } from "react-dom";
+import { createPortal as createPortal11 } from "react-dom";
 
 // src/hooks/usePaymentSources.ts
 import { FlagKey as FlagKey22, isNotNullish as isNotNullish9 } from "@funkit/utils";
+
+// src/utils/customer.ts
+function isKatanaEarnFlow({
+  apiKey,
+  checkoutConfig
+}) {
+  return isKatanaCustomer(apiKey) && !!checkoutConfig && isCheckoutPostActionRequired(checkoutConfig);
+}
+
+// src/hooks/usePaymentSources.ts
 function useRemainingMeshExchangeConnections(selected) {
   const { getActiveConnection } = useFunkitMesh();
   const supportedExchanges = useSupportedExchanges();
@@ -20247,17 +20286,39 @@ function useRemainingMeshExchangeConnections(selected) {
     )
   };
 }
-var usePaymentSources = (paymentMethodInfo, targetChainId) => {
+function usePaymentMethodEnablement({
+  checkoutConfig
+}) {
+  const { apiKey, uiCustomizations } = useFunkitConfig();
+  const isTokenTransferFlagEnabled = useFlag(FlagKey22.EnableTokenTransfer);
+  const isFiatFlagEnabled = useFiatEnabled();
+  const isCardFlagEnabled = useFlag(FlagKey22.EnableCard);
+  const isBrokerageFlagEnabled = useFlag(FlagKey22.EnableBrokerage);
+  const isKatanaEarnFlowAction = isKatanaEarnFlow({ apiKey, checkoutConfig });
+  const isFiatEnabled = isFiatFlagEnabled && !isKatanaEarnFlowAction;
+  const isTokenTransferEnabled = isTokenTransferFlagEnabled && !isKatanaEarnFlowAction;
+  const isBrokerageEnabled = isBrokerageFlagEnabled && !isKatanaEarnFlowAction;
+  const isCardEnabled = isCardFlagEnabled && !isKatanaEarnFlowAction && (uiCustomizations?.paymentMethods?.isCardEnabled ?? true);
+  return {
+    isFiatEnabled,
+    isTokenTransferEnabled,
+    isBrokerageEnabled,
+    isCardEnabled
+  };
+}
+var usePaymentSources = (paymentMethodInfo, targetChainId, checkoutConfig) => {
   const { activeConnections } = useRemainingMeshExchangeConnections(paymentMethodInfo);
   const { isUserLoggedIn, walletAddress } = useGeneralWallet();
   const { data: allFiatAccounts } = useVirtualFiatAccounts();
   const matchingFiatAccount = useMatchingVirtualFiatAccount(allFiatAccounts);
   const { hasUsableBalance } = useWalletAssetHoldings(targetChainId);
-  const { apiKey, uiCustomizations } = useFunkitConfig();
-  const isTokenTransferEnabled = useFlag(FlagKey22.EnableTokenTransfer);
-  const isFiatEnabled = useFiatEnabled();
-  const isCardFlagEnabled = useFlag(FlagKey22.EnableCard);
-  const isBrokerageEnabled = useFlag(FlagKey22.EnableBrokerage);
+  const { apiKey } = useFunkitConfig();
+  const {
+    isBrokerageEnabled,
+    isFiatEnabled,
+    isTokenTransferEnabled,
+    isCardEnabled
+  } = usePaymentMethodEnablement({ checkoutConfig });
   const accountPaymentMethodInfo = createPaymentMethodInfo({
     paymentMethod: "balance" /* ACCOUNT_BALANCE */,
     walletAddress
@@ -20274,7 +20335,6 @@ var usePaymentSources = (paymentMethodInfo, targetChainId) => {
     ...isBrokerageEnabled ? activeConnections : [],
     virtualBankPaymentMethodInfo
   ].filter(isNotNullish9);
-  const isCardEnabled = isCardFlagEnabled && (uiCustomizations?.paymentMethods?.isCardEnabled ?? true);
   const ignoreFallback = isUserLoggedIn && !hasUsableBalance;
   const fallback2 = connected.length === 0 && !ignoreFallback ? isTokenTransferEnabled ? ["token_transfer" /* TOKEN_TRANSFER */] : isCardEnabled ? ["card" /* CARD */] : isDydxCustomer(apiKey) ? [] : ["balance" /* ACCOUNT_BALANCE */] : [];
   const isTokenInNewSources = !fallback2.includes("token_transfer" /* TOKEN_TRANSFER */) && isTokenTransferEnabled;
@@ -20618,7 +20678,8 @@ function SourceChange({
   };
   const { preferred, moreSources } = usePaymentSources(
     paymentMethodInfo,
-    targetChainId
+    targetChainId,
+    checkoutItem?.initSettings.config
   );
   function renderSource(source) {
     if (typeof source === "object") {
@@ -20654,11 +20715,11 @@ function SourceChange({
       marginBottom: "8",
       borderColor: "selectedOptionBorder"
     }
-  ), moreSources.map(renderSource)), bottomSectionRef && !hasAutoContinue && createPortal10(
+  ), moreSources.map(renderSource)), bottomSectionRef && createPortal11(
     /* @__PURE__ */ React179.createElement(
       Dialog.BottomBar,
       {
-        actionButtonProps: {
+        actionButtonProps: hasAutoContinue ? void 0 : {
           title: "Continue",
           onClick: () => {
             if (connectedSource === null && !!newSource) {
@@ -20679,6 +20740,7 @@ function SourceChange({
 import { FlagKey as FlagKey25 } from "@funkit/utils";
 import { motion as motion8, useAnimationControls as useAnimationControls3 } from "motion/react";
 import React193, { useEffect as useEffect36, useRef as useRef15, useState as useState48 } from "react";
+import { createPortal as createPortal12 } from "react-dom";
 import { polygon as polygon6 } from "viem/chains";
 
 // src/components/CopyAddress/CopyInputDisplayedAddress.tsx
@@ -21555,9 +21617,13 @@ function TransferToken({
     }
   };
   const isLoadingDepositAddress = depositAddress === void 0;
+  const defaultCandidate = checkoutConfig?.dynamicTargetAssetCandidates?.find(
+    (candidate) => candidate.isDefault
+  );
+  const bottomSectionRef = useBottomSectionRef();
   return (
     // This ID is used in the DialogContent css to set the height of the modal
-    /* @__PURE__ */ React193.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React193.createElement(
+    /* @__PURE__ */ React193.createElement(React193.Fragment, null, /* @__PURE__ */ React193.createElement(Box, { id: "token-transfer-page" }, /* @__PURE__ */ React193.createElement(
       Box,
       {
         display: "flex",
@@ -21576,6 +21642,32 @@ function TransferToken({
           onClick: () => onNext({})
         }
       )),
+      defaultCandidate && /* @__PURE__ */ React193.createElement(
+        Box,
+        {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          width: "full",
+          borderColor: "mediumStroke",
+          borderWidth: "1",
+          borderRadius: BORDER_RADIUS,
+          borderStyle: "solid",
+          paddingY: "8",
+          paddingX: HORIZONTAL_OUTER_PADDING_X
+        },
+        /* @__PURE__ */ React193.createElement(Text, { size: "12", color: "secondaryText" }, "Receive token"),
+        /* @__PURE__ */ React193.createElement(Box, { display: "flex", alignItems: "center", gap: "8" }, /* @__PURE__ */ React193.createElement(
+          FunAssetAvatar,
+          {
+            assetIconSize: "16",
+            assetName: "receive-token-asset",
+            assetSrc: getTokenIconUrl(defaultCandidate.tokenSymbol),
+            chainId: defaultCandidate.tokenChainId,
+            largeChainIcon: true
+          }
+        ), /* @__PURE__ */ React193.createElement(Text, { size: "12", weight: "medium" }, defaultCandidate.tokenSymbol))
+      ),
       /* @__PURE__ */ React193.createElement(Box, { width: "full", display: "flex", gap: "12" }, /* @__PURE__ */ React193.createElement(Box, { width: "full", display: "flex", flexDirection: "column", gap: "4" }, /* @__PURE__ */ React193.createElement(Text, { size: "12", weight: "medium" }, "Supported token"), /* @__PURE__ */ React193.createElement(
         TokenDropdown,
         {
@@ -21716,7 +21808,7 @@ function TransferToken({
           maxSlippage
         }
       ))
-    ))
+    )), bottomSectionRef && createPortal12(/* @__PURE__ */ React193.createElement(Dialog.BottomBar, null), bottomSectionRef))
   );
 }
 
@@ -23698,7 +23790,7 @@ function FunCheckoutHistoryDetail({
       refundState: checkoutHistoryInfo.refundState,
       onHelp
     }
-  )), bottomSectionRef && createPortal11(
+  )), bottomSectionRef && createPortal13(
     /* @__PURE__ */ React214.createElement(
       Dialog.BottomBar,
       {
@@ -23739,7 +23831,7 @@ var CheckoutAlert = ({ state, refundState, onHelp }) => {
 // src/components/FunCheckoutHistory/FunCheckoutHistoryHelp.tsx
 import { sendSupportMessage } from "@funkit/api-base";
 import React217, { useEffect as useEffect42, useMemo as useMemo37, useRef as useRef19, useState as useState58 } from "react";
-import { createPortal as createPortal12 } from "react-dom";
+import { createPortal as createPortal14 } from "react-dom";
 
 // src/components/FunInput/FunTextAreaInput.tsx
 import React215 from "react";
@@ -24043,7 +24135,7 @@ function FunCheckoutHistoryHelp({
       },
       openDropdownBackgroundColor: "inputBackground"
     }
-  ))), bottomSectionRef && createPortal12(
+  ))), bottomSectionRef && createPortal14(
     /* @__PURE__ */ React217.createElement(
       Dialog.BottomBar,
       {
@@ -24071,17 +24163,18 @@ import { DirectExecutionType as DirectExecutionType4 } from "@funkit/api-base";
 import {
   formatAddress as formatAddress7,
   formatCryptoAndStringify as formatCryptoAndStringify5,
+  formatTimestamp as formatTimestamp2,
   isTokenEquivalent as isTokenEquivalent8
 } from "@funkit/utils";
 import React219, { useCallback as useCallback41, useMemo as useMemo39 } from "react";
-import { createPortal as createPortal13 } from "react-dom";
+import { createPortal as createPortal15 } from "react-dom";
 
 // src/components/FunCheckoutHistory/FunDirectExecutionStatus.tsx
 import React218, { useMemo as useMemo38 } from "react";
 function FunDirectExecutionStatus({
   directExecution
 }) {
-  const { isCompleted, isDelayed: isDelayed2, isFailed, isRefunded } = useCheckoutDirectExecutionHistory({ txHash: directExecution?.txHash });
+  const { isCompleted, isDelayed: isDelayed2, isFailed, isRefunded } = useCheckoutDirectExecutionHistory({ initDirectExecution: directExecution });
   if (directExecution === void 0) {
     return /* @__PURE__ */ React218.createElement(Box, { className: GradientLoadingBox }, /* @__PURE__ */ React218.createElement(FunSkeletonCircle, { size: "40" }));
   }
@@ -24122,7 +24215,7 @@ function FunDirectExecutionStatusTagLoaded({
   directExecution
 }) {
   const { state, refundState, isDelayed: isDelayed2 } = useCheckoutDirectExecutionHistory({
-    txHash: directExecution.txHash
+    initDirectExecution: directExecution
   });
   return /* @__PURE__ */ React219.createElement(StatusTag, { state, refundState, isDelayed: isDelayed2 });
 }
@@ -24220,7 +24313,7 @@ function FunDirectExecutionHistoryDetail({
     {
       onHelp: () => window.open(CONTACT_US_LINK, "_blank", "noopener")
     }
-  )), bottomSectionRef && createPortal13(
+  )), bottomSectionRef && createPortal15(
     /* @__PURE__ */ React219.createElement(
       Dialog.BottomBar,
       {
@@ -24231,6 +24324,27 @@ function FunDirectExecutionHistoryDetail({
     bottomSectionRef
   ));
 }
+var getTimestamp2 = (timestamp) => formatTimestamp2(new Date(timestamp), {
+  hours: "24hr",
+  year: "none",
+  month: "short"
+});
+function DirectExecutionOrderDetailSection({
+  directExecution,
+  showRelayLink
+}) {
+  const { isProcessing, isFailed, isRefunded } = useCheckoutDirectExecutionHistory({ initDirectExecution: directExecution });
+  const { txHash, createdTimeMs, fromChainId } = directExecution;
+  const updateTime = getDirectExecutionUpdatedTimeMs({ directExecution });
+  return /* @__PURE__ */ React219.createElement(Box, { display: "flex", flexDirection: "column", gap: "12" }, /* @__PURE__ */ React219.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, "Deposit tx"), /* @__PURE__ */ React219.createElement(Box, { display: "flex", alignItems: "center", gap: "4" }, /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, formatAddress7(txHash)), /* @__PURE__ */ React219.createElement(
+    TransactionRedirectButton,
+    {
+      chainId: fromChainId,
+      txHash,
+      customRedirectUrl: showRelayLink ? `${RELAY_TRANSACTION_PAGE_URL}${txHash}` : void 0
+    }
+  ))), /* @__PURE__ */ React219.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, "Order submitted"), /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(createdTimeMs))), !isProcessing && updateTime && /* @__PURE__ */ React219.createElement(FunTxSummaryLineItem, null, /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, `Order ${isFailed ? "failed" : isRefunded ? "refunded" : "filled"}`), /* @__PURE__ */ React219.createElement(Text, { color: "tertiaryText", size: "12" }, getTimestamp2(updateTime))));
+}
 
 // src/components/FunCheckoutHistory/FunCheckoutHistoryContent.tsx
 function FunCheckoutHistoryContent({
@@ -24403,7 +24517,7 @@ var animateVirtuosoInClass = "_26hmws5";
 var tabLabelStyles = "_26hmws6";
 
 // src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.tsx
-import { formatTimestamp as formatTimestamp2 } from "@funkit/utils";
+import { formatTimestamp as formatTimestamp3 } from "@funkit/utils";
 import {
   formatCurrencyAndStringify as formatCurrencyAndStringify8,
   isMobile as isMobile9,
@@ -24565,7 +24679,7 @@ var HomeCheckoutDisplayRow = ({
       /* @__PURE__ */ React225.createElement(Text, { size: TEXT_SIZE_MEDIUM2, weight: "medium", color: "primaryText" }, `${formatCurrencyAndStringify8(
         checkoutClientMetadata?.finalDollarValue || 0
       )} USD`)
-    ), /* @__PURE__ */ React225.createElement(Box, { display: "flex", justifyContent: "space-between", gap: "16" }, /* @__PURE__ */ React225.createElement(Text, { size: TEXT_SIZE_SMALL2, color: "secondaryText" }, formatTimestamp2(new Date(checkoutHistoryItem.createdTimeMs), {
+    ), /* @__PURE__ */ React225.createElement(Box, { display: "flex", justifyContent: "space-between", gap: "16" }, /* @__PURE__ */ React225.createElement(Text, { size: TEXT_SIZE_SMALL2, color: "secondaryText" }, formatTimestamp3(new Date(checkoutHistoryItem.createdTimeMs), {
       year: "none",
       seconds: "none",
       month: "short"
@@ -25541,7 +25655,7 @@ function ChainModal({ onClose, open }) {
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3 } from "@funkit/chains";
 import { LogLevel, initializeRelayClient } from "@funkit/fun-relay";
 import { FlagKey as FlagKey28 } from "@funkit/utils";
-import React245 from "react";
+import React246 from "react";
 
 // src/components/DydxSwitchModalTab/DydxSwitchModalTab.tsx
 import React238, { useCallback as useCallback44 } from "react";
@@ -25689,7 +25803,7 @@ var FunCheckoutBlocked = ({ reason }) => {
 
 // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
 import clsx22 from "clsx";
-import React244, { useEffect as useEffect45, useMemo as useMemo41, useState as useState64 } from "react";
+import React245, { useEffect as useEffect45, useMemo as useMemo41, useState as useState64 } from "react";
 
 // src/components/FunNotificationBanner/FunNotificationShowMoreButton.tsx
 import React240 from "react";
@@ -25741,7 +25855,7 @@ import { FlagKey as FlagKey27 } from "@funkit/utils";
 import { useQuery as useQuery11 } from "@tanstack/react-query";
 var hasCorrectPaymentMethod = (checkout, paymentMethod) => !paymentMethod || checkout.clientMetadata.selectedPaymentMethodInfo?.paymentMethod === paymentMethod;
 var isRecent = (checkout, timestampCutoff) => checkout.createdTimeMs > timestampCutoff;
-var DEFAULT_CUTOFF = 7 * 24 * 60 * 60 * 1e3;
+var DEFAULT_NOTIF_CUTOFF = 7 * 24 * 60 * 60 * 1e3;
 function useCheckoutRefreshInterval() {
   const str = useFlag(FlagKey27.CheckoutNotificationsRefreshInterval);
   return safeJSONParse(str) || { listRefresh: 50 * 1e3, itemRefresh: 5 * 1e3 };
@@ -25760,7 +25874,7 @@ var useRecentCheckouts = ({
         userId: userInfo.id,
         apiKey
       });
-      const defaultTimestampCutoff = Date.now() - DEFAULT_CUTOFF;
+      const defaultTimestampCutoff = Date.now() - DEFAULT_NOTIF_CUTOFF;
       return checkouts.filter(
         (checkout) => isCheckoutValid(checkout) && isRecent(checkout, defaultTimestampCutoff) && hasCorrectPaymentMethod(checkout, paymentMethod)
       ).sort((a, b) => b.createdTimeMs - a.createdTimeMs);
@@ -25771,6 +25885,34 @@ var useRecentCheckouts = ({
   return query;
 };
 
+// src/hooks/queries/useRecentDirectExecutions.ts
+import {
+  getDirectExecutionsByUserId as getDirectExecutionsByUserId2
+} from "@funkit/api-base";
+import { useQuery as useQuery12 } from "@tanstack/react-query";
+var isRecent2 = (de, timestampCutoff) => de.createdTimeMs > timestampCutoff;
+var useRecentDirectExecutions = ({
+  isVisible
+}) => {
+  const { isUserLoggedIn, userInfo } = useGeneralWallet();
+  const { apiKey } = useFunkitConfig();
+  const { listRefresh } = useCheckoutRefreshInterval();
+  const query = useQuery12({
+    queryKey: ["directExecutions", userInfo.id],
+    queryFn: async () => {
+      const directExecutions = await getDirectExecutionsByUserId2({
+        userId: userInfo.id,
+        apiKey
+      });
+      const defaultTimestampCutoff = Date.now() - DEFAULT_NOTIF_CUTOFF;
+      return directExecutions.filter((de) => isRecent2(de, defaultTimestampCutoff)).sort((a, b) => b.createdTimeMs - a.createdTimeMs);
+    },
+    refetchInterval: listRefresh,
+    enabled: !!userInfo.id && isUserLoggedIn && isVisible
+  });
+  return query;
+};
+
 // src/modals/CheckoutModal/TransferToken/CheckoutNotification.tsx
 import React243 from "react";
 
@@ -26467,11 +26609,11 @@ var FunNotificationBanner = ({
 import {
   getCheckoutByDepositAddress as getCheckoutByDepositAddress2
 } from "@funkit/api-base";
-import { useQuery as useQuery12 } from "@tanstack/react-query";
+import { useQuery as useQuery13 } from "@tanstack/react-query";
 var useCheckout = (depositAddress, initial) => {
   const { apiKey } = useFunkitConfig();
   const { itemRefresh } = useCheckoutRefreshInterval();
-  const query = useQuery12({
+  const query = useQuery13({
     queryKey: ["checkouts", "checkout", depositAddress],
     queryFn: () => (
       // biome-ignore lint/style/noNonNullAssertion: already checked for null
@@ -26490,7 +26632,7 @@ var CheckoutNotification = ({
   onClose,
   onHelp
 }) => {
-  const { initSettings, id } = defaultCheckout.clientMetadata;
+  const { initSettings } = defaultCheckout.clientMetadata;
   const depositAddress = defaultCheckout.depositAddr;
   const { data: checkout } = useCheckout(depositAddress, defaultCheckout);
   if (!checkout) return null;
@@ -26505,7 +26647,7 @@ var CheckoutNotification = ({
       disclaimer: parseDisclaimer(checkout, () => onHelp(depositAddress)),
       iconUrl: initSettings.config.iconSrc ?? ASSET_LOGO_SRCS[normalizedTicker],
       status: notificationStatus,
-      onClosed: () => onClose(id)
+      onClosed: () => onClose(depositAddress)
     },
     /* @__PURE__ */ React243.createElement(
       Box,
@@ -26574,6 +26716,112 @@ var parseDisclaimer = (checkout, onHelp) => {
   }
 };
 
+// src/modals/CheckoutModal/TransferToken/DirectExecutionNotification.tsx
+import React244 from "react";
+var mapDirectExecutionStateToNotificationStatus = (isDelayed2, isRefunded, isCompleted, isFailed) => {
+  if (isDelayed2) return "delayed";
+  if (isCompleted) return "completed";
+  if (isRefunded) return "expired";
+  if (isFailed) return "failed";
+  return "completed";
+};
+var DirectExecutionNotification = ({
+  directExecution,
+  onClose,
+  onHelp
+}) => {
+  const { initSettings } = directExecution.clientMetadata;
+  const { isDelayed: isDelayed2, isRefunded, isCompleted, isFailed } = useCheckoutDirectExecutionHistory({
+    initDirectExecution: directExecution
+  });
+  const notificationStatus = mapDirectExecutionStateToNotificationStatus(
+    isDelayed2,
+    isRefunded,
+    isCompleted,
+    isFailed
+  );
+  const normalizedTicker = initSettings.config.targetAssetTicker?.toUpperCase();
+  return /* @__PURE__ */ React244.createElement(
+    FunNotificationBanner,
+    {
+      description: parseDescription2(
+        isDelayed2,
+        isRefunded,
+        isCompleted,
+        isFailed
+      ),
+      title: parseTitle(isDelayed2, isRefunded, isCompleted, isFailed),
+      disclaimer: parseDisclaimer2(
+        isRefunded,
+        isDelayed2,
+        isFailed,
+        () => onHelp(directExecution.txHash)
+      ),
+      iconUrl: ASSET_LOGO_SRCS[normalizedTicker],
+      status: notificationStatus,
+      onClosed: () => onClose(directExecution.txHash)
+    },
+    /* @__PURE__ */ React244.createElement(
+      Box,
+      {
+        paddingY: "8",
+        paddingX: "10",
+        background: "modalBackground",
+        borderRadius: "8",
+        borderColor: "mediumStroke",
+        borderWidth: "1",
+        borderStyle: "solid"
+      },
+      /* @__PURE__ */ React244.createElement(
+        DirectExecutionOrderDetailSection,
+        {
+          directExecution,
+          showRelayLink: true
+        }
+      )
+    )
+  );
+};
+var parseTitle = (isDelayed2, isRefunded, isCompleted, isFailed) => {
+  if (isDelayed2) return "Deposit received and pending...";
+  if (isCompleted) return "Deposit completed";
+  if (isFailed || isRefunded) return "Didn't complete";
+  return "Deposit received and processing...";
+};
+var parseDescription2 = (isDelayed2, isRefunded, isCompleted, isFailed) => {
+  if (isDelayed2) {
+    return "Your deposit will be credited to your account shortly.";
+  }
+  if (isCompleted) {
+    return "Your deposit has been credited to your account.";
+  }
+  if (isRefunded) {
+    return "Your deposit has been refunded or reprocessed. Feel free to reach out for an update.";
+  }
+  if (isFailed) {
+    return "An issue occurred with your deposit. Please try again.";
+  }
+  return "";
+};
+var parseDisclaimer2 = (isRefunded, isDelayed2, isFailed, onHelp) => {
+  const contactLink = /* @__PURE__ */ React244.createElement(
+    FunLinkButton,
+    {
+      text: "Contact us",
+      onClick: onHelp,
+      inline: true,
+      size: "12",
+      weight: "regular"
+    }
+  );
+  if (isFailed || isRefunded) {
+    return /* @__PURE__ */ React244.createElement(React244.Fragment, null, "Your deposit didn't complete. ", contactLink, " for more info.");
+  }
+  if (isDelayed2) {
+    return /* @__PURE__ */ React244.createElement(React244.Fragment, null, "Your deposit is delayed but funds are safe. ", contactLink, " for more info.");
+  }
+};
+
 // src/modals/CheckoutModal/TransferToken/CheckoutNotifications.tsx
 var COLLAPSED_COUNT = 2;
 var MAX_COUNT = 5;
@@ -26583,24 +26831,44 @@ var CheckoutNotifications = ({
 }) => {
   const [isExpanded, setIsExpanded] = useState64(false);
   const [initialCheckouts, setInitialCheckouts] = useState64();
+  const [initialDirectExecutions, setInitialDirectExecutions] = useState64();
   const [closedNotifications, setClosedNotifications] = useState64([]);
   const { data: checkouts } = useRecentCheckouts({ isVisible });
+  const { data: directExecutions } = useRecentDirectExecutions({
+    isVisible
+  });
   useEffect45(() => {
     if (initialCheckouts || !checkouts) return;
     setInitialCheckouts(checkouts);
   }, [initialCheckouts, checkouts]);
+  useEffect45(() => {
+    if (initialDirectExecutions || !directExecutions) return;
+    setInitialDirectExecutions(directExecutions);
+  }, [initialDirectExecutions, directExecutions]);
+  const displayedDirectExecutions = useMemo41(() => {
+    if (!directExecutions) return [];
+    return getUpdatedDirectExecutions(directExecutions, initialDirectExecutions).filter(({ txHash }) => !closedNotifications.includes(txHash)).slice(0, MAX_COUNT);
+  }, [initialDirectExecutions, directExecutions, closedNotifications]);
   const displayedCheckouts = useMemo41(() => {
     if (!checkouts) return [];
-    return getUpdatedCheckouts(checkouts, initialCheckouts).filter(
-      ({ clientMetadata }) => !closedNotifications.includes(
-        clientMetadata.id
-      )
-    ).slice(0, MAX_COUNT);
+    return getUpdatedCheckouts(checkouts, initialCheckouts).filter(({ depositAddr }) => !closedNotifications.includes(depositAddr)).slice(0, MAX_COUNT);
   }, [initialCheckouts, checkouts, closedNotifications]);
-  const displayedNotifications = isExpanded ? displayedCheckouts : displayedCheckouts.slice(0, COLLAPSED_COUNT);
+  const combinedNotifications = useMemo41(() => {
+    return [
+      ...displayedDirectExecutions.map(
+        (item) => ({ ...item, isDirectExecution: true })
+      ),
+      ...displayedCheckouts.map(
+        (item) => ({ ...item, isDirectExecution: false })
+      )
+    ].sort((a, b) => b.createdTimeMs - a.createdTimeMs);
+  }, [displayedDirectExecutions, displayedCheckouts]);
+  const displayedNotifications = useMemo41(() => {
+    return isExpanded ? combinedNotifications : combinedNotifications.slice(0, COLLAPSED_COUNT);
+  }, [isExpanded, combinedNotifications]);
   const handleNotificationClose = (id) => setClosedNotifications((prev) => [...prev, id]);
   if (!isVisible) return null;
-  return /* @__PURE__ */ React244.createElement(
+  return /* @__PURE__ */ React245.createElement(
     Box,
     {
       position: "absolute",
@@ -26608,19 +26876,32 @@ var CheckoutNotifications = ({
       maxHeight: "full",
       style: { bottom: 0, left: 0, right: 0, zIndex: OVERLAY_Z_INDEX }
     },
-    /* @__PURE__ */ React244.createElement(Box, { display: "flex", flexDirection: "column", gap: "8", padding: "8" }, displayedNotifications.map((checkout) => /* @__PURE__ */ React244.createElement(
-      CheckoutNotification,
-      {
-        key: checkout.clientMetadata.id,
-        checkout,
-        onClose: handleNotificationClose,
-        onHelp
+    /* @__PURE__ */ React245.createElement(Box, { display: "flex", flexDirection: "column", gap: "8", padding: "8" }, displayedNotifications.map((item) => {
+      if (item.isDirectExecution) {
+        return /* @__PURE__ */ React245.createElement(
+          DirectExecutionNotification,
+          {
+            key: item.txHash,
+            directExecution: item,
+            onClose: handleNotificationClose,
+            onHelp
+          }
+        );
       }
-    )), displayedCheckouts.length > COLLAPSED_COUNT && /* @__PURE__ */ React244.createElement(
+      return /* @__PURE__ */ React245.createElement(
+        CheckoutNotification,
+        {
+          key: item.depositAddr,
+          checkout: item,
+          onClose: handleNotificationClose,
+          onHelp
+        }
+      );
+    }), combinedNotifications.length > COLLAPSED_COUNT && /* @__PURE__ */ React245.createElement(
       FunNotificationShowMoreButton,
       {
         isExpanded,
-        numberOfNotifications: displayedCheckouts.length - COLLAPSED_COUNT,
+        numberOfNotifications: combinedNotifications.length - COLLAPSED_COUNT,
         onClick: () => setIsExpanded((value) => !value)
       }
     ))
@@ -26629,11 +26910,21 @@ var CheckoutNotifications = ({
 var getUpdatedCheckouts = (checkouts, initialCheckouts) => {
   return checkouts.filter((checkout) => {
     const initialCheckout = initialCheckouts?.find(
-      (initialCheckout2) => initialCheckout2.clientMetadata.id === checkout.clientMetadata.id
+      (initialCheckout2) => initialCheckout2.depositAddr === checkout.depositAddr
     );
     return !initialCheckout || initialCheckout.lastUpdatedTimeMs !== checkout.lastUpdatedTimeMs;
   });
 };
+var getUpdatedDirectExecutions = (directExecutions, initialDirectExecutions) => {
+  return directExecutions.filter((directExecution) => {
+    const initialDirectExecution = initialDirectExecutions?.find(
+      (initialDirectExecution2) => initialDirectExecution2.txHash === directExecution.txHash
+    );
+    return !initialDirectExecution || getDirectExecutionUpdatedTimeMs({
+      directExecution: initialDirectExecution
+    }) !== getDirectExecutionUpdatedTimeMs({ directExecution });
+  });
+};
 
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 initializeRelayClient({
@@ -26645,7 +26936,7 @@ initializeRelayClient({
 var CHECKOUT_DIALOG_CONTENT_ID = "checkout-dialog-content";
 function FunCheckoutModalStepComponent(props) {
   const { Component: Component2 } = CheckoutModalSteps[props.modalState.step];
-  return /* @__PURE__ */ React245.createElement(Component2, { ...props });
+  return /* @__PURE__ */ React246.createElement(Component2, { ...props });
 }
 function FunCheckoutModalInner({
   checkoutItem,
@@ -26692,7 +26983,7 @@ function FunCheckoutModalInner({
     depositAddress: checkoutItem.depositAddress ?? void 0,
     isCheckoutDetailView: modalState.step === "checkout_complete" /* CHECKOUT_COMPLETE */,
     paddingTop: 0,
-    topbar: /* @__PURE__ */ React245.createElement(
+    topbar: /* @__PURE__ */ React246.createElement(
       Dialog.Title,
       {
         hasBackButton: hasBack && !isBlocked,
@@ -26708,7 +26999,7 @@ function FunCheckoutModalInner({
     withTopDivider: checkoutConfig.modalTitleMeta ? "always" : "scroll",
     scrollableContent: CHECKOUT_DIALOG_CONTENT_ID
   });
-  return /* @__PURE__ */ React245.createElement(
+  return /* @__PURE__ */ React246.createElement(
     Dialog,
     {
       open,
@@ -26716,7 +27007,7 @@ function FunCheckoutModalInner({
       titleId: "fun-checkout-modal",
       isHidden: modalState.isSoftHidden
     },
-    /* @__PURE__ */ React245.createElement(FunCheckoutModalHeightAnimationWrapper, { checkoutStep: modalState.step }, topbar, /* @__PURE__ */ React245.createElement(
+    /* @__PURE__ */ React246.createElement(FunCheckoutModalHeightAnimationWrapper, { checkoutStep: modalState.step }, topbar, /* @__PURE__ */ React246.createElement(
       Dialog.Content,
       {
         fullHeight: showFullHeight,
@@ -26726,20 +27017,20 @@ function FunCheckoutModalInner({
         withBottomDivider: modalState.step === "transfer_token" /* TRANSFER_TOKEN */ || modalState.step === "fiat_account_detail" /* FIAT_ACCOUNT_DETAIL */ ? "never" : "scroll",
         id: CHECKOUT_DIALOG_CONTENT_ID
       },
-      isBlocked ? /* @__PURE__ */ React245.createElement(
+      isBlocked ? /* @__PURE__ */ React246.createElement(
         FunCheckoutBlocked,
         {
           reason: isUserGeoblocked ? "geoblock" : "security"
         }
-      ) : /* @__PURE__ */ React245.createElement(React245.Fragment, null, /* @__PURE__ */ React245.createElement(
+      ) : /* @__PURE__ */ React246.createElement(React246.Fragment, null, /* @__PURE__ */ React246.createElement(
         DydxSwitchTab,
         {
           onSwitch: checkoutItem.initSettings.onDydxSwitch,
           showSwitch: showDydxSwitch,
           onClose: onCloseWrapper
         }
-      ), /* @__PURE__ */ React245.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
-    ), /* @__PURE__ */ React245.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }), !isBlocked && /* @__PURE__ */ React245.createElement(
+      ), /* @__PURE__ */ React246.createElement(FunCheckoutModalStepComponent, { ...modalProps }))
+    ), /* @__PURE__ */ React246.createElement(Dialog.BottomSection, { id: CHECKOUT_MODAL_BOTTOM_BAR_ID }), !isBlocked && /* @__PURE__ */ React246.createElement(
       CheckoutNotifications,
       {
         onHelp: handleCheckoutHelp,
@@ -26753,7 +27044,7 @@ function FunCheckoutModal({ onClose, open }) {
   if (!checkoutItem) {
     return null;
   }
-  return /* @__PURE__ */ React245.createElement(
+  return /* @__PURE__ */ React246.createElement(
     FunCheckoutModalInner,
     {
       checkoutItem,
@@ -26764,7 +27055,7 @@ function FunCheckoutModal({ onClose, open }) {
 }
 
 // src/modals/ConnectModal/ConnectModal.tsx
-import React246 from "react";
+import React247 from "react";
 import { useAccount as useAccount8 } from "wagmi";
 var TITLE_ID2 = "rk_connect_title";
 function ConnectModal({
@@ -26775,12 +27066,12 @@ function ConnectModal({
   const connectionStatus = useConnectionStatus();
   const { disconnect } = useFunkitDisconnect();
   const { isConnecting } = useAccount8();
-  const onConnectModalCancel = React246.useCallback(() => {
+  const onConnectModalCancel = React247.useCallback(() => {
     if (isConnecting) disconnect();
     onClose();
   }, [onClose, disconnect, isConnecting]);
   if (connectionStatus === "disconnected" || connectionStatus === "loading") {
-    return /* @__PURE__ */ React246.createElement(
+    return /* @__PURE__ */ React247.createElement(
       Dialog,
       {
         onClose: onConnectModalCancel,
@@ -26788,7 +27079,7 @@ function ConnectModal({
         titleId: TITLE_ID2,
         isSmartCloseable: true
       },
-      /* @__PURE__ */ React246.createElement(
+      /* @__PURE__ */ React247.createElement(
         FunConnectOptions,
         {
           onClose: onConnectModalCancel,
@@ -26879,7 +27170,7 @@ function ModalProvider({ children }) {
   useEffect46(() => {
     if (isUnauthenticated) closeModals();
   }, [isUnauthenticated]);
-  return /* @__PURE__ */ React247.createElement(
+  return /* @__PURE__ */ React248.createElement(
     ModalContext.Provider,
     {
       value: useMemo42(
@@ -26917,7 +27208,7 @@ function ModalProvider({ children }) {
       )
     },
     children,
-    /* @__PURE__ */ React247.createElement(
+    /* @__PURE__ */ React248.createElement(
       ConnectModal,
       {
         onClose: closeConnectModal,
@@ -26925,7 +27216,7 @@ function ModalProvider({ children }) {
         walletsOnly: !!walletsOnly
       }
     ),
-    /* @__PURE__ */ React247.createElement(
+    /* @__PURE__ */ React248.createElement(
       AccountModal,
       {
         onClose: closeAccountModal,
@@ -26933,8 +27224,8 @@ function ModalProvider({ children }) {
         defaultTab: accountModalTab
       }
     ),
-    /* @__PURE__ */ React247.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
-    /* @__PURE__ */ React247.createElement(
+    /* @__PURE__ */ React248.createElement(ChainModal, { onClose: closeChainModal, open: chainModalOpen }),
+    /* @__PURE__ */ React248.createElement(
       FunCheckoutModal,
       {
         onClose: closeFunCheckoutModal,
@@ -27675,7 +27966,7 @@ var FunkitWeb2Provider = ({
     handleFunkitWeb2Logout,
     web2UserInfo
   };
-  return /* @__PURE__ */ React248.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React248.createElement(
+  return /* @__PURE__ */ React249.createElement(FunkitWeb2Context.Provider, { value: contextValue }, privyIframeUrl ? /* @__PURE__ */ React249.createElement(
     "iframe",
     {
       id: PRIVY_IFRAME_ID,
@@ -27708,7 +27999,7 @@ function useConnectionStatus() {
 }
 
 // src/providers/ShowBalanceContext.tsx
-import React249, {
+import React250, {
   createContext as createContext19,
   useContext as useContext19,
   useState as useState67
@@ -27719,13 +28010,13 @@ var ShowBalanceContext = createContext19({
 });
 function ShowBalanceProvider({ children }) {
   const [showBalance, setShowBalance] = useState67();
-  return /* @__PURE__ */ React249.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
+  return /* @__PURE__ */ React250.createElement(ShowBalanceContext.Provider, { value: { showBalance, setShowBalance } }, children);
 }
 var useShowBalance = () => useContext19(ShowBalanceContext);
 
 // src/components/ConnectButton/ConnectButtonRenderer.tsx
 import { formatCurrencyAndStringify as formatCurrencyAndStringify11, isMobile as isMobile14, noop as noop8 } from "@funkit/utils";
-import React250 from "react";
+import React251 from "react";
 import { useAccount as useAccount11, useBalance, useConfig as useConfig6 } from "wagmi";
 
 // src/hooks/useIsMounted.ts
@@ -27816,7 +28107,7 @@ function ConnectButtonRenderer({
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
   const { accountModalOpen, chainModalOpen, connectModalOpen } = useModalState();
-  return /* @__PURE__ */ React250.createElement(React250.Fragment, null, children({
+  return /* @__PURE__ */ React251.createElement(React251.Fragment, null, children({
     account: address ? {
       address,
       balanceDecimals: balanceData?.decimals,
@@ -27872,7 +28163,7 @@ function ChainSelectorButton({
   openChainModal,
   chain
 }) {
-  return /* @__PURE__ */ React251.createElement(
+  return /* @__PURE__ */ React252.createElement(
     Box,
     {
       alignItems: "center",
@@ -27900,7 +28191,7 @@ function ChainSelectorButton({
       type: "button",
       ...connectButtonStyles
     },
-    unsupportedChain ? /* @__PURE__ */ React251.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React251.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React251.createElement(
+    unsupportedChain ? /* @__PURE__ */ React252.createElement(Box, { alignItems: "center", display: "flex", height: "24", paddingX: "4" }, "Wrong network") : /* @__PURE__ */ React252.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, chain.hasIcon ? /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -27910,7 +28201,7 @@ function ChainSelectorButton({
         height: "12",
         width: "12"
       },
-      /* @__PURE__ */ React251.createElement(
+      /* @__PURE__ */ React252.createElement(
         AsyncImage,
         {
           alt: chain.name ?? "Chain icon",
@@ -27921,7 +28212,7 @@ function ChainSelectorButton({
           src: chain.iconUrl
         }
       )
-    ) : null, /* @__PURE__ */ React251.createElement(
+    ) : null, /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: mapResponsiveValue(chainStatus, (value) => {
@@ -27941,7 +28232,7 @@ function AccountButton({
   showBalance,
   accountStatus
 }) {
-  return /* @__PURE__ */ React251.createElement(
+  return /* @__PURE__ */ React252.createElement(
     Box,
     {
       alignItems: "center",
@@ -27961,7 +28252,7 @@ function AccountButton({
       gap: "16",
       ...connectButtonStyles
     },
-    account.displayBalance && /* @__PURE__ */ React251.createElement(
+    account.displayBalance && /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -27971,7 +28262,7 @@ function AccountButton({
       },
       account.displayBalance
     ),
-    /* @__PURE__ */ React251.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React251.createElement(
+    /* @__PURE__ */ React252.createElement(Box, { alignItems: "center", display: "flex", gap: "6" }, /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -27979,7 +28270,7 @@ function AccountButton({
           (value) => value === "full" || value === "avatar" ? "block" : "none"
         )
       },
-      /* @__PURE__ */ React251.createElement(
+      /* @__PURE__ */ React252.createElement(
         Avatar,
         {
           address: account.address,
@@ -27988,7 +28279,7 @@ function AccountButton({
           size: 12
         }
       )
-    ), /* @__PURE__ */ React251.createElement(
+    ), /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: mapResponsiveValue(
@@ -28019,7 +28310,7 @@ function ConnectButton({
     setShowBalance(showBalance);
     if (!ready) setReady(true);
   }, [showBalance, setShowBalance, ready]);
-  return ready ? /* @__PURE__ */ React251.createElement(ConnectButtonRenderer, null, ({
+  return ready ? /* @__PURE__ */ React252.createElement(ConnectButtonRenderer, null, ({
     account,
     chain,
     mounted,
@@ -28029,7 +28320,7 @@ function ConnectButton({
   }) => {
     const ready2 = mounted && connectionStatus !== "loading";
     const unsupportedChain = chain?.unsupported ?? false;
-    return /* @__PURE__ */ React251.createElement(
+    return /* @__PURE__ */ React252.createElement(
       Box,
       {
         display: "flex",
@@ -28045,7 +28336,7 @@ function ConnectButton({
       },
       ready2 && account && connectionStatus === "connected" ? (
         // Logged in: Chain Button & Account Button
-        /* @__PURE__ */ React251.createElement(React251.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React251.createElement(
+        /* @__PURE__ */ React252.createElement(React252.Fragment, null, showChainSelector && chain && (chains.length > 1 || unsupportedChain) && /* @__PURE__ */ React252.createElement(
           ChainSelectorButton,
           {
             unsupportedChain,
@@ -28053,7 +28344,7 @@ function ConnectButton({
             openChainModal,
             chain
           }
-        ), !unsupportedChain && /* @__PURE__ */ React251.createElement(
+        ), !unsupportedChain && /* @__PURE__ */ React252.createElement(
           AccountButton,
           {
             openAccountModal,
@@ -28064,7 +28355,7 @@ function ConnectButton({
         ))
       ) : (
         // Not logged in: Connect Button
-        /* @__PURE__ */ React251.createElement(
+        /* @__PURE__ */ React252.createElement(
           Box,
           {
             as: "button",
@@ -28082,19 +28373,19 @@ function ConnectButton({
             type: "button",
             ...connectButtonStyles
           },
-          /* @__PURE__ */ React251.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
+          /* @__PURE__ */ React252.createElement(Box, { display: "flex", gap: "8", alignItems: "center" }, mounted && label, suffixIcon)
         )
       )
     );
-  }) : /* @__PURE__ */ React251.createElement(React251.Fragment, null);
+  }) : /* @__PURE__ */ React252.createElement(React252.Fragment, null);
 }
 ConnectButton.__defaultProps = defaultProps;
 ConnectButton.Custom = ConnectButtonRenderer;
 
 // src/components/Icons/FunkitPaymentsIconLine.tsx
-import React252 from "react";
+import React253 from "react";
 function MetaMaskPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React252.createElement(
+  return /* @__PURE__ */ React253.createElement(
     "svg",
     {
       width: size,
@@ -28103,7 +28394,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     },
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M24.0891 3.1199L15.3446 9.61456L16.9617 5.7828L24.0891 3.1199Z",
@@ -28114,7 +28405,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M3.90207 3.1199L12.5763 9.67608L11.0383 5.7828L3.90207 3.1199Z",
@@ -28125,7 +28416,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M20.9429 18.1745L18.6139 21.7426L23.597 23.1136L25.0295 18.2536L20.9429 18.1745Z",
@@ -28136,7 +28427,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M2.97929 18.2536L4.40301 23.1136L9.38607 21.7426L7.05713 18.1745L2.97929 18.2536Z",
@@ -28147,7 +28438,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.10483 12.1456L7.71626 14.2461L12.6642 14.4658L12.4884 9.14877L9.10483 12.1456Z",
@@ -28158,7 +28449,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M18.8864 12.1456L15.4589 9.08725L15.3446 14.4658L20.2837 14.2461L18.8864 12.1456Z",
@@ -28169,7 +28460,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.3566 20.2925L9.79033 18.2888L9.38606 21.7426Z",
@@ -28180,7 +28471,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.6347 20.2925L18.6139 21.7426L18.2009 18.2888L15.6347 20.2925Z",
@@ -28191,7 +28482,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M18.6139 21.7426L15.6347 20.2925L15.8719 22.2348L15.8456 23.0521L18.6139 21.7426Z",
@@ -28202,7 +28493,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.38606 21.7426L12.1544 23.0521L12.1368 22.2348L12.3566 20.2925L9.38606 21.7426Z",
@@ -28213,7 +28504,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M12.1984 17.0056L9.72002 16.2762L11.4689 15.4765L12.1984 17.0056Z",
@@ -28224,7 +28515,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.7928 17.0056L16.5223 15.4765L18.28 16.2762L15.7928 17.0056Z",
@@ -28235,7 +28526,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.38606 21.7426L9.80791 18.1745L7.05712 18.2536L9.38606 21.7426Z",
@@ -28246,7 +28537,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M18.1921 18.1745L18.6139 21.7426L20.9429 18.2536L18.1921 18.1745Z",
@@ -28257,7 +28548,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M20.2837 14.2461L15.3446 14.4658L15.8016 17.0057L16.5311 15.4765L18.2888 16.2762L20.2837 14.2461Z",
@@ -28268,7 +28559,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.72002 16.2762L11.4777 15.4765L12.1984 17.0057L12.6642 14.4658L7.71626 14.2461L9.72002 16.2762Z",
@@ -28279,7 +28570,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M7.71626 14.2461L9.79033 18.2888L9.72002 16.2762L7.71626 14.2461Z",
@@ -28290,7 +28581,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M18.2888 16.2762L18.2009 18.2888L20.2837 14.2461L18.2888 16.2762Z",
@@ -28301,7 +28592,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M12.6642 14.4658L12.1984 17.0057L12.7784 20.0025L12.9102 16.0565L12.6642 14.4658Z",
@@ -28312,7 +28603,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.1073 16.0477L15.2128 20.0025L15.8016 17.0057L15.3446 14.4658Z",
@@ -28323,7 +28614,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.8016 17.0056L15.2128 20.0025L15.6347 20.2925L18.2009 18.2888L18.2888 16.2762L15.8016 17.0056Z",
@@ -28334,7 +28625,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.72002 16.2762L9.79033 18.2888L12.3566 20.2925L12.7784 20.0025L12.1984 17.0056L9.72002 16.2762Z",
@@ -28345,7 +28636,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.8456 23.0521L15.8719 22.2348L15.6522 22.0414H12.339L12.1368 22.2348L12.1544 23.0521L9.38606 21.7426L10.3528 22.5336L12.3126 23.8958H15.6786L17.6472 22.5336L18.6139 21.7426L15.8456 23.0521Z",
@@ -28356,7 +28647,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.6347 20.2925L15.2128 20.0025H12.7784L12.3566 20.2925L12.1368 22.2348L12.339 22.0414H15.6522L15.8719 22.2348L15.6347 20.2925Z",
@@ -28367,7 +28658,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M24.4583 10.0364L25.2053 6.45072L24.0891 3.1199L15.6347 9.39485L18.8864 12.1456L23.4827 13.4903L24.5022 12.3038L24.0628 11.9874L24.7658 11.3459L24.221 10.924L24.924 10.3879L24.4583 10.0364Z",
@@ -28378,7 +28669,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M2.79472 6.45072L3.54174 10.0364L3.06717 10.3879L3.77024 10.924L3.23415 11.3459L3.93722 11.9874L3.4978 12.3038L4.50847 13.4903L9.10483 12.1456L12.3566 9.39485L3.90207 3.1199L2.79472 6.45072Z",
@@ -28389,7 +28680,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M23.4827 13.4903L18.8864 12.1456L20.2837 14.2461L18.2009 18.2888L20.9429 18.2536H25.0295L23.4827 13.4903Z",
@@ -28400,7 +28691,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M9.10484 12.1456L4.50848 13.4903L2.97929 18.2536H7.05713L9.79033 18.2888L7.71626 14.2461L9.10484 12.1456Z",
@@ -28411,7 +28702,7 @@ function MetaMaskPaymentIcon({ size = 16 }) {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M15.3446 14.4658L15.6347 9.39485L16.9705 5.7828H11.0383L12.3566 9.39485L12.6642 14.4658L12.7696 16.0653L12.7784 20.0025H15.2128L15.2304 16.0653L15.3446 14.4658Z",
@@ -28425,14 +28716,14 @@ function MetaMaskPaymentIcon({ size = 16 }) {
   );
 }
 function MastercardPaymentIcon({ size = 16 }) {
-  return /* @__PURE__ */ React252.createElement(
+  return /* @__PURE__ */ React253.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       height: size,
       viewBox: "0 0 152.407 108"
     },
-    /* @__PURE__ */ React252.createElement("g", null, /* @__PURE__ */ React252.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React252.createElement("g", null, /* @__PURE__ */ React252.createElement(
+    /* @__PURE__ */ React253.createElement("g", null, /* @__PURE__ */ React253.createElement("rect", { width: "152.407", height: "108", fill: "transparent" }), /* @__PURE__ */ React253.createElement("g", null, /* @__PURE__ */ React253.createElement(
       "rect",
       {
         x: "60.4117",
@@ -28441,21 +28732,21 @@ function MastercardPaymentIcon({ size = 16 }) {
         height: "56.6064",
         fill: "#ff5f00"
       }
-    ), /* @__PURE__ */ React252.createElement(
+    ), /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M382.20839,306a35.9375,35.9375,0,0,1,13.7499-28.3032,36,36,0,1,0,0,56.6064A35.938,35.938,0,0,1,382.20839,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#eb001b"
       }
-    ), /* @__PURE__ */ React252.createElement(
+    ), /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M454.20349,306a35.99867,35.99867,0,0,1-58.2452,28.3032,36.00518,36.00518,0,0,0,0-56.6064A35.99867,35.99867,0,0,1,454.20349,306Z",
         transform: "translate(-319.79649 -252)",
         fill: "#f79e1b"
       }
-    ), /* @__PURE__ */ React252.createElement(
+    ), /* @__PURE__ */ React253.createElement(
       "path",
       {
         d: "M450.76889,328.3077v-1.1589h.4673v-.2361h-1.1901v.2361h.4675v1.1589Zm2.3105,0v-1.3973h-.3648l-.41959.9611-.41971-.9611h-.365v1.3973h.2576v-1.054l.3935.9087h.2671l.39351-.911v1.0563Z",
@@ -28469,7 +28760,7 @@ function FunkitPaymentsIconLine({
   size = 16,
   gap = "2"
 }) {
-  return /* @__PURE__ */ React252.createElement(
+  return /* @__PURE__ */ React253.createElement(
     Box,
     {
       display: "flex",
@@ -28478,9 +28769,9 @@ function FunkitPaymentsIconLine({
       alignItems: "center",
       justifyContent: "center"
     },
-    /* @__PURE__ */ React252.createElement(MetaMaskPaymentIcon, { size }),
-    /* @__PURE__ */ React252.createElement(MastercardPaymentIcon, { size }),
-    /* @__PURE__ */ React252.createElement(CoinbaseIcon, { size })
+    /* @__PURE__ */ React253.createElement(MetaMaskPaymentIcon, { size }),
+    /* @__PURE__ */ React253.createElement(MastercardPaymentIcon, { size }),
+    /* @__PURE__ */ React253.createElement(CoinbaseIcon, { size })
   );
 }
 
@@ -28539,7 +28830,7 @@ var useUpdateActiveFunkitCheckout = () => {
 
 // src/providers/FunkitProvider.tsx
 import { QueryClientProvider } from "@tanstack/react-query";
-import React253, { createContext as createContext20, useContext as useContext20 } from "react";
+import React254, { createContext as createContext20, useContext as useContext20 } from "react";
 import { WagmiProvider, useAccountEffect as useAccountEffect3 } from "wagmi";
 
 // src/utils/funkitProvider.ts
@@ -28623,7 +28914,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey5, version);
 }
 function getCurrentSdkVersion() {
-  return "5.4.0";
+  return "5.4.1";
 }
 function useFingerprint() {
   const fingerprint = useCallback49(() => {
@@ -28674,7 +28965,7 @@ function FunkitProvider(props) {
     !!props.debug,
     getCurrentSdkVersion()
   );
-  const MainChild = /* @__PURE__ */ React253.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React253.createElement(
+  const MainChild = /* @__PURE__ */ React254.createElement(FunkitThemeProvider, { theme: props.theme }, /* @__PURE__ */ React254.createElement(
     FunkitProviderInner,
     {
       avatar: props.avatar,
@@ -28687,7 +28978,7 @@ function FunkitProvider(props) {
     },
     props.children
   ));
-  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React253.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React253.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
+  return finalWagmiConfig && finalQueryClient ? /* @__PURE__ */ React254.createElement(WagmiProvider, { config: finalWagmiConfig }, /* @__PURE__ */ React254.createElement(QueryClientProvider, { client: finalQueryClient }, MainChild)) : MainChild;
 }
 function FunkitProviderInner({
   avatar,
@@ -28707,7 +28998,7 @@ function FunkitProviderInner({
   const avatarContext = avatar ?? defaultAvatar;
   const isSandboxMode = !!sandbox;
   const modalSizeFinal = modalSize || ModalSizeOptions.COMPACT;
-  return /* @__PURE__ */ React253.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React253.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React253.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React253.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React253.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React253.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React253.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React253.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React253.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React253.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React253.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React253.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React253.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React253.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React253.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React253.createElement(UserPresenceProvider, null, /* @__PURE__ */ React253.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React253.createElement(
+  return /* @__PURE__ */ React254.createElement(FunkitConfigContext.Provider, { value: funkitConfig }, /* @__PURE__ */ React254.createElement(FunkitConnectChainProvider, { initialChain }, /* @__PURE__ */ React254.createElement(ModalSizeProvider, { modalSize: modalSizeFinal }, /* @__PURE__ */ React254.createElement(FunkitWeb2Provider, null, /* @__PURE__ */ React254.createElement(GeneralWalletProvider, null, /* @__PURE__ */ React254.createElement(FunkitFlagsProvider, null, /* @__PURE__ */ React254.createElement(FunkitCheckoutHistoryProvider, null, /* @__PURE__ */ React254.createElement(FunkitCheckoutProvider, null, /* @__PURE__ */ React254.createElement(FunkitQuoteProvider, null, /* @__PURE__ */ React254.createElement(FunkitSandboxContext.Provider, { value: isSandboxMode }, /* @__PURE__ */ React254.createElement(FunkitMeshProvider, null, /* @__PURE__ */ React254.createElement(AvatarContext.Provider, { value: avatarContext }, /* @__PURE__ */ React254.createElement(ThemeIdContext2.Provider, { value: id }, /* @__PURE__ */ React254.createElement(ShowBalanceProvider, null, /* @__PURE__ */ React254.createElement(FunkitMoonpayProvider, { debug: !!debug }, /* @__PURE__ */ React254.createElement(UserPresenceProvider, null, /* @__PURE__ */ React254.createElement(ModalProvider, null, activeTheme ? /* @__PURE__ */ React254.createElement(
     "div",
     {
       ...createThemeRootProps2(id),
@@ -28716,7 +29007,7 @@ function FunkitProviderInner({
         height: "100%"
       }
     },
-    /* @__PURE__ */ React253.createElement(
+    /* @__PURE__ */ React254.createElement(
       "style",
       {
         dangerouslySetInnerHTML: {