@funkit/connect 9.0.0 → 9.0.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @funkit/connect
 
+## 9.0.1
+
+### Patch Changes
+
+- 7506ab8: feat(connect): swapped statsig step events
+- 0e2bc9d: feat(connect): swapped iframe event metadata
+- c1fed6a: fix: swapped box paddings
+- 9b87e81: replace postmessage wildcard origin for swapped
+- c5d7c00: feat: resolve css variable values before sending theme to swapped
+- f863de4: feat(connect): add timeout error logs
+
 ## 9.0.0
 
 ### Major Changes

package/dist/hooks/track/CheckoutModalEvent.d.ts

@@ -32,6 +32,8 @@ export declare enum CheckoutModalEvent {
     READY_TRANSFER_TOKEN = "fc::ready::transfer_token",
     READY_LOADING_ACCOUNT = "fc::ready::loading_account",
     READY_SWAPPED_IFRAME = "fc::ready::swapped_iframe",
+    SOURCE_CHANGE_CRYPTO_TAB = "fc::source_change::crypto_tab",
+    SOURCE_CHANGE_CASH_TAB = "fc::source_change::cash_tab",
     QUERY_FROG_SUB_ACCOUNTS = "fc::query::frog_sub_accounts",
     QUERY_UDA_ADDRESS = "fc::query::uda_address",
     QUERY_WALLET_ASSETS = "fc::query::wallet_assets",
@@ -44,6 +46,10 @@ export declare enum CheckoutModalEvent {
     BLUVO_WITHDRAWAL_COMPLETED = "fc::success::bluvo_withdrawal_completed",
     QUICK_OPTION_SELECTED = "fc::input_amount::quick_option_selected",
     SWAPPED_IFRAME_NAVIGATION = "fc::swapped_iframe::navigation",
+    SWAPPED_IFRAME_NAVIGATION_INITIAL = "fc::swapped_iframe::navigation::initial",
+    SWAPPED_IFRAME_NAVIGATION_KYC = "fc::swapped_iframe::navigation::kyc",
+    SWAPPED_IFRAME_NAVIGATION_PAYMENT = "fc::swapped_iframe::navigation::payment",
+    SWAPPED_IFRAME_NAVIGATION_CONFIRMATION = "fc::swapped_iframe::navigation::confirmation",
     SWAPPED_IFRAME_COMPLETE = "fc::swapped_iframe::complete",
     SWAPPED_IFRAME_ERROR = "fc::swapped_iframe::error",
     SWAPPED_IFRAME_BACK = "fc::swapped_iframe::back",

package/dist/index.js

@@ -2354,7 +2354,7 @@ function setFunkitConnectVersion({ version }) {
   localStorage.setItem(storageKey, version);
 }
 function getCurrentSdkVersion() {
-  return "9.0.0";
+  return "9.0.1";
 }
 function useFingerprint() {
   const fingerprint = useCallback3(() => {
@@ -7346,6 +7346,18 @@ var flagConfig = {
           }
         ],
         value: JSON.stringify(QR_CODE_WITH_MONAD)
+      },
+      {
+        if_any: [
+          {
+            key: "apiKey",
+            type: "isAnyOf",
+            values: [VENTUALS_API_KEY]
+          }
+        ],
+        // Relay does not support Bitcoin to Hyperliquid USDH route (https://fun-xyz.slack.com/archives/C0AKC3U55FC)
+        // If we want to enable other chains for Ventuals, please remember to exclude Bitcoin
+        value: JSON.stringify(QR_CODE_WITH_SOLANA)
       }
     ]
   },
@@ -20505,6 +20517,14 @@ var getSavedFormOfPaymentIcon = (fop) => {
   const cardBrandInfo = SWAPPED_CARD_BRANDS[cardBrand];
   return cardBrandInfo?.iconImageUrl ?? fop.iconImageUrl;
 };
+function getSwappedOrigin(url) {
+  try {
+    const { origin } = new URL(url);
+    return isSwappedOrigin(origin) ? origin : null;
+  } catch {
+    return null;
+  }
+}
 function isSwappedOrigin(origin) {
   try {
     const { hostname } = new URL(origin);
@@ -20513,38 +20533,77 @@ function isSwappedOrigin(origin) {
     return false;
   }
 }
-function buildSwappedTheme(activeTheme, customFontFamily) {
+function resolveCssValue(value) {
+  if (typeof value !== "string" || !value.startsWith("var(")) {
+    return value;
+  }
+  if (typeof document === "undefined") {
+    return value;
+  }
+  try {
+    const prop = value.slice(4, -1).split(",")[0]?.trim();
+    if (!prop) {
+      return value;
+    }
+    const resolved = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
+    return resolved || value;
+  } catch {
+    return value;
+  }
+}
+function resolveObjectCssVars(obj) {
+  if (!obj || typeof obj !== "object") {
+    return obj;
+  }
+  const result = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const val = obj[key];
+      if (typeof val === "string") {
+        result[key] = resolveCssValue(val);
+      } else if (val && typeof val === "object" && !Array.isArray(val)) {
+        result[key] = resolveObjectCssVars(val);
+      } else {
+        result[key] = val;
+      }
+    }
+  }
+  return result;
+}
+function buildSwappedTheme(theme) {
+  const { customFontFamily } = theme;
   const toFontSlug = (name) => name.toLowerCase().replace(/ /g, "-");
-  return {
+  const swappedTheme = {
     colors: {
-      ...activeTheme.colors,
-      buttonDisabled: activeTheme.colors.buttonBackgroundDisabled,
-      headerButtonBackground: activeTheme.colors.modalTopbarIconBackground,
-      inputBorder: activeTheme.colors.inputBorderBase,
-      secondaryButtonBg: activeTheme.colors.modalTopbarIconBackground,
-      secondaryButtonText: activeTheme.colors.modalTopbarIcon,
-      secondaryButtonHover: activeTheme.colors.modalTopbarIconBackgroundHover,
-      secondaryButtonTextHover: activeTheme.colors.modalTopbarIcon,
-      inputBorderFocused: activeTheme.colors.secondaryText,
-      inputBorderActive: activeTheme.colors.secondaryText,
-      inputPlaceholder: activeTheme.colors.secondaryText
+      ...theme.colors,
+      buttonDisabled: theme.colors.buttonBackgroundDisabled,
+      headerButtonBackground: theme.colors.modalTopbarIconBackground,
+      inputBorder: theme.colors.inputBorderBase,
+      secondaryButtonBg: theme.colors.modalTopbarIconBackground,
+      secondaryButtonText: theme.colors.modalTopbarIcon,
+      secondaryButtonHover: theme.colors.modalTopbarIconBackgroundHover,
+      secondaryButtonTextHover: theme.colors.modalTopbarIcon,
+      inputBorderFocused: theme.colors.secondaryText,
+      inputBorderActive: theme.colors.secondaryText,
+      inputPlaceholder: theme.colors.secondaryText
     },
     radii: {
-      ...activeTheme.radii,
-      otpInput: activeTheme.radii.actionButton,
-      calculatorInput: activeTheme.radii.actionButton,
-      amountPill: activeTheme.radii.actionButton
-    },
-    headerHeight: activeTheme.dimensions.modalTopBarHeight,
-    headerFontWeight: activeTheme.fontWeight.modalTopbarTitle,
-    topbarIconColor: activeTheme.colors.modalTopbarIcon,
-    topbarTextFontSize: activeTheme.fontSize.modalTopbarTitle.fontSize,
-    headerIconWrapperSize: activeTheme.dimensions.modalTopbarIconWrapperSize,
-    headerIconSize: activeTheme.dimensions.modalTopbarIconSize,
-    buttonFontWeight: activeTheme.fontWeight.modalBottomBarButtonText,
-    modalBottomBarButtonHeight: activeTheme.dimensions.modalBottomBarButtonHeight,
-    iframeBackground: activeTheme.colors.modalBackground,
+      ...theme.radii,
+      otpInput: theme.radii.actionButton,
+      calculatorInput: theme.radii.actionButton,
+      amountPill: theme.radii.actionButton
+    },
+    headerHeight: theme.dimensions.modalTopBarHeight,
+    headerFontWeight: theme.fontWeight.modalTopbarTitle,
+    topbarIconColor: theme.colors.modalTopbarIcon,
+    topbarTextFontSize: theme.fontSize.modalTopbarTitle.fontSize,
+    headerIconWrapperSize: theme.dimensions.modalTopbarIconWrapperSize,
+    headerIconSize: theme.dimensions.modalTopbarIconSize,
+    buttonFontWeight: theme.fontWeight.modalBottomBarButtonText,
+    modalBottomBarButtonHeight: theme.dimensions.modalBottomBarButtonHeight,
+    iframeBackground: theme.colors.modalBackground,
     boxPaddingY: "16px",
+    boxPaddingX: "16px",
     paddingPrimary: "20px",
     paddingSecondary: "12px",
     paddingTertiary: "20px",
@@ -20555,6 +20614,21 @@ function buildSwappedTheme(activeTheme, customFontFamily) {
       secondaryFont: toFontSlug(customFontFamily.secondary)
     }
   };
+  return resolveObjectCssVars(swappedTheme);
+}
+function buildSwappedThemeQueryParams(activeTheme) {
+  const toRawHex = (color) => resolveCssValue(color).replace(/^#/, "");
+  return {
+    iframeBackground: toRawHex(activeTheme.colors.modalBackground),
+    widgetBackground: toRawHex(activeTheme.colors.modalBackground),
+    textColor: toRawHex(activeTheme.colors.primaryText),
+    spinnerColor: toRawHex(activeTheme.colors.spinnerIndicator),
+    modalRadii: resolveCssValue(activeTheme.radii.modal),
+    skeletonColor: toRawHex(activeTheme.colors.inputBorderHover),
+    skeletonSecondaryColor: toRawHex(activeTheme.colors.offBackground),
+    height: String(DIALOG_HEIGHT),
+    width: String(Number.parseInt(DIALOG_WIDTH_WIDE))
+  };
 }
 
 // src/components/FunBadge/BridgeCustomerStatusBadge.tsx
@@ -25030,7 +25104,7 @@ import React239 from "react";
 import {
   useCallback as useCallback48,
   useEffect as useEffect59,
-  useRef as useRef33,
+  useRef as useRef34,
   useState as useState71
 } from "react";
 
@@ -35060,7 +35134,7 @@ import {
 } from "@funkit/api-base";
 import { LIGHTER_CHAIN_ID as LIGHTER_CHAIN_ID3 } from "@funkit/chains";
 import { noop as noop9 } from "@funkit/utils";
-import React221, { useEffect as useEffect55, useState as useState63 } from "react";
+import React221, { useEffect as useEffect55, useRef as useRef31, useState as useState63 } from "react";
 import { createPortal as createPortal20 } from "react-dom";
 
 // src/hooks/queries/useFops.ts
@@ -35156,7 +35230,6 @@ var useSwappedDefaultCurrency = () => {
 };
 
 // src/hooks/queries/useFops.ts
-var stripHash = (color) => color.replace(/^#/, "");
 function validateFormOfPayments(res) {
   const isValid = (data) => {
     if (!data.iconImageUrl || !isValidUrl(data.embeddedFlowUrl)) {
@@ -35198,19 +35271,10 @@ var useFops = () => {
   } = useSwappedDefaultCurrency();
   const { checkoutItem } = useCheckoutContext();
   const { transferInit, isLoading: isTransferInitLoading } = useCheckoutTransferInit();
-  const themeConfig = useMemo47(() => {
-    return {
-      iframeBackground: stripHash(activeTheme.colors.modalBackground),
-      widgetBackground: stripHash(activeTheme.colors.modalBackground),
-      textColor: stripHash(activeTheme.colors.primaryText),
-      spinnerColor: stripHash(activeTheme.colors.spinnerIndicator),
-      modalRadii: activeTheme.radii.modal,
-      skeletonColor: stripHash(activeTheme.colors.inputBorderHover),
-      skeletonSecondaryColor: stripHash(activeTheme.colors.offBackground),
-      height: String(DIALOG_HEIGHT),
-      width: String(Number.parseInt(DIALOG_WIDTH_WIDE))
-    };
-  }, [activeTheme.colors, activeTheme.radii.modal]);
+  const themeConfig = useMemo47(
+    () => buildSwappedThemeQueryParams(activeTheme),
+    [activeTheme]
+  );
   const targetAsset = checkoutItem?.initSettings.config.targetAsset;
   const targetChain = checkoutItem?.initSettings.config.targetChain;
   const recipientAddress = getDepositAddressForChain(
@@ -35409,7 +35473,10 @@ function SwappedProvider({ children }) {
   const activeCallbacksRef = useRef30(null);
   const loadDelayTimeoutRef = useRef30(void 0);
   const swappedTheme = useMemo48(
-    () => buildSwappedTheme(activeTheme, uiCustomizations.customFontFamily),
+    () => buildSwappedTheme({
+      ...activeTheme,
+      customFontFamily: uiCustomizations.customFontFamily
+    }),
     [activeTheme, uiCustomizations.customFontFamily]
   );
   const setActiveCallbacks = useCallback43(
@@ -35428,11 +35495,13 @@ function SwappedProvider({ children }) {
     },
     [pool.activeUrlRef, pool.getRef]
   );
-  const sendThemeToWindow = useEffectEvent((contentWindow) => {
-    const msg = { type: "SWAPPED_THEME", data: swappedTheme };
-    contentWindow.postMessage(msg, "*");
-    logger.info("swapped-provider:sendTheme", { postMessage: msg });
-  });
+  const sendThemeToWindow = useEffectEvent(
+    (contentWindow, targetOrigin) => {
+      const msg = { type: "SWAPPED_THEME", data: swappedTheme };
+      contentWindow.postMessage(msg, targetOrigin);
+      logger.info("swapped-provider:sendTheme", { postMessage: msg });
+    }
+  );
   const onIframeReady = useEffectEvent((source) => {
     const url = pool.urls.find((u) => pool.getRef(u)?.contentWindow === source);
     if (url) {
@@ -35448,9 +35517,10 @@ function SwappedProvider({ children }) {
   });
   const handleIframeElementLoaded = useCallback43(
     (url) => {
+      const targetOrigin = getSwappedOrigin(url);
       const contentWindow = pool.getRef(url)?.contentWindow;
-      if (contentWindow) {
-        sendThemeToWindow(contentWindow);
+      if (contentWindow && targetOrigin) {
+        sendThemeToWindow(contentWindow, targetOrigin);
       }
     },
     [pool.getRef, sendThemeToWindow]
@@ -35460,13 +35530,17 @@ function SwappedProvider({ children }) {
   }, []);
   useEffect53(() => {
     for (const url of pool.urls) {
+      const targetOrigin = getSwappedOrigin(url);
       const contentWindow = pool.getRef(url)?.contentWindow;
-      if (contentWindow) {
-        const msg = { type: "SWAPPED_THEME", data: swappedTheme };
-        contentWindow.postMessage(msg, "*");
+      const isLoaded = pool.loadedUrlsRef.current.includes(url);
+      if (contentWindow && targetOrigin && isLoaded) {
+        contentWindow.postMessage(
+          { type: "SWAPPED_THEME", data: swappedTheme },
+          targetOrigin
+        );
       }
     }
-  }, [swappedTheme, pool.urls, pool.getRef]);
+  }, [swappedTheme, pool.urls, pool.getRef, pool.loadedUrlsRef]);
   useEffect53(() => {
     function handleMessage(event) {
       if (!isSwappedOrigin(event.origin)) {
@@ -35478,7 +35552,7 @@ function SwappedProvider({ children }) {
       }
       if (messageType === "SWAPPED_READY") {
         if (event.source && "postMessage" in event.source) {
-          sendThemeToWindow(event.source);
+          sendThemeToWindow(event.source, event.origin);
           onIframeReady(event.source);
         }
       }
@@ -35486,9 +35560,6 @@ function SwappedProvider({ children }) {
         return;
       }
       switch (messageType) {
-        case "SWAPPED_READY":
-          activeCallbacksRef.current.onReady();
-          break;
         case "SWAPPED_COMPLETE":
           activeCallbacksRef.current.onComplete();
           break;
@@ -36011,6 +36082,7 @@ function SourceChange({
   setModalState
 }) {
   const bluvo = useBluvo();
+  const { logEvent } = useTrack();
   const connectionStatus = useConnectionStatus();
   const bottomSectionRef = useBottomSectionRef();
   const { t } = useFunkitTranslation();
@@ -36119,6 +36191,22 @@ function SourceChange({
       setModalState((state) => ({ ...state, showWalletOptions: true }));
     }
   };
+  const lastObservedTabRef = useRef31(void 0);
+  const sendPaymentMethodTabEvent = useEffectEvent((tab) => {
+    if (lastObservedTabRef.current === tab) {
+      return;
+    }
+    lastObservedTabRef.current = tab;
+    logEvent(
+      trackEventForTabChange(
+        checkoutItem ?? { id: modalState.checkoutId },
+        tab
+      )
+    );
+  });
+  useEffect55(() => {
+    sendPaymentMethodTabEvent(paymentMethodTab);
+  }, [paymentMethodTab, sendPaymentMethodTabEvent]);
   const handleNewSourceContinue = async (newSource2, isConfirmed = false) => {
     setConnectedSource(null);
     setNewSource(newSource2);
@@ -36317,10 +36405,21 @@ function SourceChange({
     bottomSectionRef
   ));
 }
+function trackEventForTabChange(checkoutItem, tab) {
+  return {
+    eventName: tab === "crypto" ? "fc::source_change::crypto_tab" /* SOURCE_CHANGE_CRYPTO_TAB */ : "fc::source_change::cash_tab" /* SOURCE_CHANGE_CASH_TAB */,
+    metadata: {
+      ...checkoutItem,
+      // alias 'id' to 'checkoutId' for better readability / consistency with other events
+      id: void 0,
+      checkoutId: checkoutItem.id
+    }
+  };
+}
 
 // src/modals/CheckoutModal/SwappedIframe/SwappedIframe.tsx
 import { useQueryClient as useQueryClient3 } from "@tanstack/react-query";
-import React222, { useEffect as useEffect56, useRef as useRef31, useState as useState64 } from "react";
+import React222, { useEffect as useEffect56, useRef as useRef32, useState as useState64 } from "react";
 var SwappedIframeInfo = {
   Component: SwappedIframe,
   onBack: (state, prevState) => {
@@ -36354,7 +36453,8 @@ function SwappedIframe({
   const { t } = useFunkitTranslation();
   const queryClient = useQueryClient3();
   const [error, setError] = useState64(null);
-  const timeoutRef = useRef31(void 0);
+  const timeoutRef = useRef32(void 0);
+  const { checkoutItem } = useCheckoutContext();
   const {
     activateIframe,
     deactivateIframe,
@@ -36366,73 +36466,122 @@ function SwappedIframe({
   const { selectedPaymentOption } = modalState;
   const iframeUrl = selectedPaymentOption.embeddedFlowUrl || "";
   const loaded = loadedIframeUrls.includes(iframeUrl);
+  const getTrackEvent = useEffectEvent(
+    (event, extras) => trackEventForFormOfPayment(
+      selectedPaymentOption,
+      checkoutItem ?? { id: modalState.checkoutId },
+      event,
+      extras
+    )
+  );
   useEffect56(() => {
     startMeasuredEvent("fc::ready::swapped_iframe" /* READY_SWAPPED_IFRAME */);
   }, [startMeasuredEvent]);
+  useEffect56(() => {
+    if (loaded) {
+      const event = getTrackEvent("fc::ready::swapped_iframe" /* READY_SWAPPED_IFRAME */);
+      logger.info("swapped-iframe:ready", event.metadata);
+      logMeasuredEvent(event);
+    }
+  }, [getTrackEvent, loaded, logMeasuredEvent]);
   useEffect56(() => {
     setActiveCallbacks({
-      onReady: () => {
-        logger.info("swapped-iframe:ready");
-      },
       onComplete: () => {
-        logger.info("swapped-iframe:complete");
-        logEvent({
-          eventName: "fc::swapped_iframe::complete" /* SWAPPED_IFRAME_COMPLETE */,
-          metadata: {
-            paymentOptionType: selectedPaymentOption.fopType
-          }
-        });
+        const event = getTrackEvent("fc::swapped_iframe::complete" /* SWAPPED_IFRAME_COMPLETE */);
+        logger.info("swapped-iframe:complete", event.metadata);
+        logEvent(event);
         queryClient.invalidateQueries({ queryKey: ["fops"] });
         onNext({ success: true });
       },
       onBack: () => {
-        logger.info("swapped-iframe:back");
-        logEvent({
-          eventName: "fc::swapped_iframe::back" /* SWAPPED_IFRAME_BACK */
-        });
+        const event = getTrackEvent("fc::swapped_iframe::back" /* SWAPPED_IFRAME_BACK */);
+        logger.info("swapped-iframe:back", event.metadata);
+        logEvent(event);
         queryClient.invalidateQueries({ queryKey: ["fops"] });
         onBack();
       },
       onNewDeposit: () => {
-        logger.info("swapped-iframe:back_and_new_deposit");
-        logEvent({
-          eventName: "fc::swapped_iframe::new_deposit_back" /* SWAPPED_IFRAME_NEW_DEPOSIT_BACK */
-        });
+        const event = getTrackEvent(
+          "fc::swapped_iframe::new_deposit_back" /* SWAPPED_IFRAME_NEW_DEPOSIT_BACK */
+        );
+        logger.info("swapped-iframe:back_and_new_deposit", event.metadata);
+        logEvent(event);
         queryClient.invalidateQueries({ queryKey: ["fops"] });
         onBack();
       },
       onExit: () => {
-        logger.info("swapped-iframe:exit");
-        logEvent({
-          eventName: "fc::swapped_iframe::exit" /* SWAPPED_IFRAME_EXIT */
-        });
+        const event = getTrackEvent("fc::swapped_iframe::exit" /* SWAPPED_IFRAME_EXIT */);
+        logger.info("swapped-iframe:exit", event.metadata);
+        logEvent(event);
         queryClient.invalidateQueries({ queryKey: ["fops"] });
         onClose();
       },
       onError: (message) => {
-        logger.error("swapped-iframe:error", { message });
-        logEvent({
-          eventName: "fc::swapped_iframe::error" /* SWAPPED_IFRAME_ERROR */,
-          metadata: { message }
+        const event = getTrackEvent("fc::swapped_iframe::error" /* SWAPPED_IFRAME_ERROR */, {
+          message
         });
+        logger.error("swapped-iframe:error", event.metadata);
+        logEvent(event);
         setError(t("checkoutConfirmation.genericErrorMessage"));
       },
       onNavigation: (step) => {
-        logger.info("swapped-iframe:navigation", { step });
-        logEvent({
-          eventName: "fc::swapped_iframe::navigation" /* SWAPPED_IFRAME_NAVIGATION */,
-          metadata: { step }
-        });
+        switch (step) {
+          // that's the initial step with the amount input
+          case "EMPTY": {
+            const event = getTrackEvent(
+              "fc::swapped_iframe::navigation::initial" /* SWAPPED_IFRAME_NAVIGATION_INITIAL */
+            );
+            logger.info("swapped-iframe:navigation:initial", event.metadata);
+            logEvent(event);
+            break;
+          }
+          case "KYC_IDENTITY": {
+            const event = getTrackEvent(
+              "fc::swapped_iframe::navigation::kyc" /* SWAPPED_IFRAME_NAVIGATION_KYC */
+            );
+            logger.info("swapped-iframe:navigation:kyc", event.metadata);
+            logEvent(event);
+            break;
+          }
+          case "PAYMENT": {
+            const event = getTrackEvent(
+              "fc::swapped_iframe::navigation::payment" /* SWAPPED_IFRAME_NAVIGATION_PAYMENT */
+            );
+            logger.info("swapped-iframe:navigation:payment", event.metadata);
+            logEvent(event);
+            break;
+          }
+          case "ORDER_CONFIRMATION": {
+            const event = getTrackEvent(
+              "fc::swapped_iframe::navigation::confirmation" /* SWAPPED_IFRAME_NAVIGATION_CONFIRMATION */
+            );
+            logger.info(
+              "swapped-iframe:navigation:confirmation",
+              event.metadata
+            );
+            logEvent(event);
+            break;
+          }
+          default: {
+            const event = getTrackEvent(
+              "fc::swapped_iframe::navigation" /* SWAPPED_IFRAME_NAVIGATION */,
+              { step }
+            );
+            logger.info("swapped-iframe:navigation", event.metadata);
+            logEvent(event);
+            break;
+          }
+        }
       }
     });
     return () => setActiveCallbacks(null);
   }, [
+    getTrackEvent,
     setActiveCallbacks,
     logEvent,
     onBack,
     onClose,
     onNext,
-    selectedPaymentOption.fopType,
     t,
     queryClient
   ]);
@@ -36447,16 +36596,12 @@ function SwappedIframe({
     }
     timeoutRef.current = setTimeout(() => {
       setError(t("common.pleaseTryAgainLater"));
+      logger.error("swapped-iframe:timeout", {
+        message: "Unable to load swapped iframe. Max timeout error"
+      });
     }, TIMEOUT_ERROR);
     return () => clearTimeout(timeoutRef.current);
   }, [loaded, t]);
-  useEffect56(() => {
-    if (loaded) {
-      logMeasuredEvent({
-        eventName: "fc::ready::swapped_iframe" /* READY_SWAPPED_IFRAME */
-      });
-    }
-  }, [loaded, logMeasuredEvent]);
   if (error) {
     return /* @__PURE__ */ React222.createElement(React222.Fragment, null, /* @__PURE__ */ React222.createElement(Dialog.Content, null, /* @__PURE__ */ React222.createElement(
       Box,
@@ -36590,10 +36735,26 @@ function SwappedIframe({
   }
   return null;
 }
+function trackEventForFormOfPayment(fop, checkoutItem, eventName, extras) {
+  return {
+    eventName,
+    metadata: {
+      ...checkoutItem,
+      ...extras,
+      fopMetadata: fop.metadata,
+      fopName: fop.name,
+      fopType: fop.fopType,
+      fopUrl: fop.embeddedFlowUrl,
+      // alias 'id' to 'checkoutId' for better readability / consistency with other events
+      id: void 0,
+      checkoutId: checkoutItem.id
+    }
+  };
+}
 
 // src/modals/CheckoutModal/TransferToken/TransferToken.tsx
 import { motion as motion16, useAnimationControls as useAnimationControls3 } from "motion/react";
-import React232, { useRef as useRef32, useState as useState68 } from "react";
+import React232, { useRef as useRef33, useState as useState68 } from "react";
 import { createPortal as createPortal21 } from "react-dom";
 
 // src/components/CopyAddress/CopyInputDisplayedAddress.tsx
@@ -37312,7 +37473,7 @@ function TransferToken({
   const { checkoutItem } = useCheckoutContext();
   const checkoutConfig = checkoutItem?.initSettings.config;
   const { transferToken } = modalState;
-  const disclaimerTextWrapperRef = useRef32(null);
+  const disclaimerTextWrapperRef = useRef33(null);
   const { transferInit } = useCheckoutTransferInit();
   const {
     assets,
@@ -38221,7 +38382,7 @@ function useCheckoutModalTransition(checkoutItem, onClose) {
   );
   const { animation, animate } = useAnimatedNavigation(void 0);
   const [stateHistory, setHistory] = useState71([]);
-  const prevStep = useRef33(null);
+  const prevStep = useRef34(null);
   const hasHistoryEntry = stateHistory.length > 1;
   const onNext = useCallback48(
     (payload) => {
@@ -38392,7 +38553,7 @@ function useCheckoutModalTitle(depositAddress, defaultTitle) {
 import { IN_PROGRESS_CHECKOUT_STATES as IN_PROGRESS_CHECKOUT_STATES2 } from "@funkit/api-base";
 import { formatTimestampToDate, fullMonthNames } from "@funkit/utils";
 import clsx23 from "clsx";
-import React248, { useEffect as useEffect60, useMemo as useMemo51, useRef as useRef34, useState as useState73 } from "react";
+import React248, { useEffect as useEffect60, useMemo as useMemo51, useRef as useRef35, useState as useState73 } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 // src/components/Icons/GreenRoundCheckmark.tsx
@@ -38925,8 +39086,8 @@ function Home({
 }) {
   const { t } = useFunkitTranslation();
   const [selectedView, setSelectedView] = useState73(defaultHomeTab);
-  const checkoutsListRef = useRef34(null);
-  const virtuosoParentRef = useRef34(null);
+  const checkoutsListRef = useRef35(null);
+  const virtuosoParentRef = useRef35(null);
   const account = useAccount();
   useCheckoutHistoryListener();
   const { userInfo, handleLogout } = useGeneralWallet();
@@ -39684,7 +39845,7 @@ function ChainModal({ onClose, open }) {
 // src/modals/CheckoutModal/FunCheckoutModal.tsx
 import { FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST as FUNKIT_CONNECT_SUPPORTED_CHECKOUT_CHAINS_INFO_LIST3 } from "@funkit/chains";
 import { LogLevel as LogLevel2, initializeRelayClient } from "@funkit/fun-relay";
-import React267, { useRef as useRef35 } from "react";
+import React267, { useRef as useRef36 } from "react";
 
 // src/components/FunConnectOptions/FunConnectOptions.tsx
 import React264, { useCallback as useCallback51, useMemo as useMemo52, useState as useState77 } from "react";
@@ -40379,8 +40540,8 @@ function FunCheckoutModalInner({
       depositAddress
     });
   };
-  const animationCallbackRef = useRef35(null);
-  const tooltipAnchorRef = useRef35(null);
+  const animationCallbackRef = useRef36(null);
+  const tooltipAnchorRef = useRef36(null);
   const handleAnimationCompleteRegister = (cb) => {
     animationCallbackRef.current = cb;
   };

package/dist/providers/SwappedProvider.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { type SwappedTheme } from '../utils/swapped';
 export interface SwappedIframeCallbacks {
-    onReady: () => void;
     onComplete: () => void;
     onBack: () => void;
     onExit: () => void;

package/dist/utils/flags/config.d.ts

@@ -90,6 +90,13 @@ export declare const flagConfig: {
                 readonly values: ["clDebbfo9edXq1GydZ0CahSAfSimPj616lFa9p8e"];
             }];
             readonly value: string;
+        }, {
+            readonly if_any: [{
+                readonly key: "apiKey";
+                readonly type: "isAnyOf";
+                readonly values: ["5UzOrcAE2F3rcuMX2EeIlaYv5VUcDe6Lyh0PeZX2"];
+            }];
+            readonly value: string;
         }];
     };
     readonly withdrawal_chains_and_assets: {

package/dist/utils/swapped.d.ts

@@ -1,9 +1,8 @@
 import type { SavedFormOfPayment, SwappedFormOfPayment } from '@funkit/api-base';
 import type { ThemeVars } from '../css/sprinkles.css';
-export declare const isSavedFormOfPaymentType: (fop: SwappedFormOfPayment) => fop is SavedFormOfPayment;
-export declare const getSavedFormOfPaymentDisplayName: (fop: SavedFormOfPayment) => string;
-export declare const getSavedFormOfPaymentIcon: (fop: SavedFormOfPayment) => string;
-export declare function isSwappedOrigin(origin: string): boolean;
+/**
+ * Ref: https://www.notion.so/Fun-Parameter-Styling-Guide-312966ea6e398011bbc6c14e976e281d#63dcdd77ea2d488084a980cda4c63d08
+ */
 export interface SwappedTheme {
     colors: Record<string, string>;
     radii: Record<string, string>;
@@ -12,7 +11,9 @@ export interface SwappedTheme {
     buttonFontWeight: string;
     modalBottomBarButtonHeight: string;
     iframeBackground: string;
-    paddingPrimary: string;
+    paddingPrimary?: string;
+    paddingPrimaryX?: string;
+    paddingPrimaryY?: string;
     paddingSecondary: string;
     paddingTertiary: string;
     baseFont?: string;
@@ -23,8 +24,19 @@ export interface SwappedTheme {
     topbarTextFontSize?: string;
     contentPadding?: string;
     boxPaddingY?: string;
+    boxPaddingX?: string;
 }
-export declare function buildSwappedTheme(activeTheme: ThemeVars, customFontFamily?: {
-    primary?: string;
-    secondary?: string;
+export declare const isSavedFormOfPaymentType: (fop: SwappedFormOfPayment) => fop is SavedFormOfPayment;
+export declare const getSavedFormOfPaymentDisplayName: (fop: SavedFormOfPayment) => string;
+export declare const getSavedFormOfPaymentIcon: (fop: SavedFormOfPayment) => string;
+export declare function getSwappedOrigin(url: string): string | null;
+export declare function isSwappedOrigin(origin: string): boolean;
+export declare function resolveCssValue(value: string): string;
+export declare function resolveObjectCssVars<T extends object>(obj: T): T;
+export declare function buildSwappedTheme(theme: ThemeVars & {
+    customFontFamily?: {
+        primary?: string;
+        secondary?: string;
+    };
 }): SwappedTheme;
+export declare function buildSwappedThemeQueryParams(activeTheme: ThemeVars): Record<string, string>;

package/dist/wallets/walletConnectors/index.js

@@ -5,6 +5,9 @@ import {
 import {
   zealWallet
 } from "./chunk-HE2LMIPD.js";
+import {
+  tahoWallet
+} from "./chunk-4BMUFNMT.js";
 import {
   talismanWallet
 } from "./chunk-6MFOL6EB.js";
@@ -14,18 +17,15 @@ import {
 import {
   tokenaryWallet
 } from "./chunk-34LO6Q7A.js";
-import {
-  safeheronWallet
-} from "./chunk-4R4AARTG.js";
 import {
   trustWallet
 } from "./chunk-KO56HCTI.js";
-import {
-  walletConnectWallet
-} from "./chunk-J34FG3W4.js";
 import {
   uniswapWallet
 } from "./chunk-NHLG5PVD.js";
+import {
+  walletConnectWallet
+} from "./chunk-J34FG3W4.js";
 import {
   xdefiWallet
 } from "./chunk-O7RSASRH.js";
@@ -44,6 +44,9 @@ import {
 import {
   safeWallet
 } from "./chunk-YKVWTGU7.js";
+import {
+  safeheronWallet
+} from "./chunk-4R4AARTG.js";
 import {
   safepalWallet
 } from "./chunk-IICWJWGZ.js";
@@ -51,11 +54,8 @@ import {
   subWallet
 } from "./chunk-XBLHZICW.js";
 import {
-  tahoWallet
-} from "./chunk-4BMUFNMT.js";
-import {
-  ledgerWallet
-} from "./chunk-WKCCLGHJ.js";
+  metaMaskWallet
+} from "./chunk-HETS3KKI.js";
 import {
   mewWallet
 } from "./chunk-HKVDCVCG.js";
@@ -78,8 +78,8 @@ import {
   phantomWallet
 } from "./chunk-XMNVOYSJ.js";
 import {
-  foxWallet
-} from "./chunk-53VYSPXK.js";
+  enkryptWallet
+} from "./chunk-W6TXXLCO.js";
 import {
   frameWallet
 } from "./chunk-WDTNOIMF.js";
@@ -99,8 +99,8 @@ import {
   kresusWallet
 } from "./chunk-G4V5B6YC.js";
 import {
-  metaMaskWallet
-} from "./chunk-HETS3KKI.js";
+  ledgerWallet
+} from "./chunk-WKCCLGHJ.js";
 import {
   bybitWallet
 } from "./chunk-6UCI7GM6.js";
@@ -123,14 +123,14 @@ import {
   desigWallet
 } from "./chunk-JYVLYSH3.js";
 import {
-  enkryptWallet
-} from "./chunk-W6TXXLCO.js";
-import {
-  bifrostWallet
-} from "./chunk-EKJHJFRN.js";
+  foxWallet
+} from "./chunk-53VYSPXK.js";
 import {
   argentWallet
 } from "./chunk-VUOAIUZE.js";
+import {
+  bifrostWallet
+} from "./chunk-EKJHJFRN.js";
 import {
   bitgetWallet
 } from "./chunk-HOPH3TQ3.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funkit/connect",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.",
   "files": [
     "dist",
@@ -102,10 +102,10 @@
     "ua-parser-js": "^1.0.37",
     "use-debounce": "^10.0.5",
     "uuid": "^9.0.1",
-    "@funkit/chains": "1.1.0",
     "@funkit/api-base": "2.3.1",
-    "@funkit/utils": "1.2.3",
-    "@funkit/fun-relay": "2.6.1"
+    "@funkit/chains": "1.1.0",
+    "@funkit/fun-relay": "2.6.1",
+    "@funkit/utils": "1.2.3"
   },
   "repository": {
     "type": "git",