@embarkai/ui-kit 0.4.111 → 0.4.112

package/dist/index.js

@@ -6031,6 +6031,32 @@ var init_ChainSync2 = __esm({
   }
 });
 
+// src/internal/hooks/useAllowExternalModalsScroll.ts
+import { useEffect as useEffect4 } from "react";
+function isFromExternalModal(event) {
+  return event.composedPath().some((node) => node instanceof Element && EXTERNAL_MODAL_TAGS.has(node.tagName));
+}
+function stopExternalModalScrollEvent(event) {
+  if (isFromExternalModal(event)) event.stopPropagation();
+}
+function useAllowExternalModalsScroll(enabled) {
+  useEffect4(() => {
+    if (!enabled || typeof document === "undefined") return;
+    const body = document.body;
+    SCROLL_EVENTS.forEach((type) => body.addEventListener(type, stopExternalModalScrollEvent, { passive: true }));
+    return () => {
+      SCROLL_EVENTS.forEach((type) => body.removeEventListener(type, stopExternalModalScrollEvent));
+    };
+  }, [enabled]);
+}
+var EXTERNAL_MODAL_TAGS, SCROLL_EVENTS;
+var init_useAllowExternalModalsScroll = __esm({
+  "src/internal/hooks/useAllowExternalModalsScroll.ts"() {
+    EXTERNAL_MODAL_TAGS = /* @__PURE__ */ new Set(["W3M-MODAL", "APPKIT-MODAL", "WCM-MODAL"]);
+    SCROLL_EVENTS = ["wheel", "touchmove"];
+  }
+});
+
 // src/internal/clients/account/register-smart-account-address.ts
 async function registerSmartAccountAddress(chainId, smartAccountAddress, factoryAddress) {
   const accessToken = jwtTokenManager2.getAccessToken();
@@ -6959,7 +6985,7 @@ var init_clients = __esm({
 });
 
 // src/internal/hooks/useAutoConnect.ts
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef2 } from "react";
 function useAutoConnect() {
   const {
     config: { current: config },
@@ -7021,7 +7047,7 @@ function useAutoConnect() {
     [usePaymaster, setStatus, activeChainId]
   );
   const autoConnectAttemptedRef = useRef2(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!hasHydrated) return;
     if (autoConnectAttemptedRef.current) return;
     setIsLoading(true);
@@ -7160,7 +7186,7 @@ var init_useAutoConnect = __esm({
 });
 
 // src/hooks/useOpenPage.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef3 } from "react";
 function useOpenPage() {
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -7190,7 +7216,7 @@ function useOpenPage() {
 }
 function usePageParams() {
   const currentParams = useRef3({});
-  useEffect5(() => {
+  useEffect6(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams) return;
     currentParams.current = pageParams;
@@ -7206,13 +7232,13 @@ var init_useOpenPage = __esm({
 });
 
 // src/internal/hooks/useBackupStatusChanges.ts
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useEffect as useEffect7, useRef as useRef4 } from "react";
 function useBackupStatusChanges() {
   const { open: openPage } = useOpenPage();
   const requestSeqRef = useRef4(0);
   const openPageRef = useRef4(openPage);
   openPageRef.current = openPage;
-  useEffect6(() => {
+  useEffect7(() => {
     async function handleBackupStatusChanged(event) {
       const detail = event?.detail;
       console.log("[BACKUP STATUS] changed:", detail);
@@ -7254,7 +7280,7 @@ var init_useBackupStatusChanges = __esm({
 
 // src/internal/hooks/useDetectMaxScrollHeight.ts
 import { debounce } from "lodash-es";
-import { useCallback as useCallback5, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8 } from "react";
 function useDetectMaxScrollHeight() {
   const page = useLayoutDataStore((state) => state.page);
   const setIsMobileView = useLayoutStore((state) => state.setIsMobileView);
@@ -7268,7 +7294,7 @@ function useDetectMaxScrollHeight() {
     }, DEBOUNCE_DELAY),
     [page, setMaxScrollHeight, setIsMobileView]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const obs = new ResizeObserver(([entry]) => onResize(entry.contentRect));
     const doc = window.document.getElementsByTagName("html")[0];
     if (doc) obs.observe(doc);
@@ -7286,7 +7312,7 @@ var init_useDetectMaxScrollHeight = __esm({
 });
 
 // src/internal/hooks/useListenIframeAuthEvents.ts
-import { useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9 } from "react";
 function useListenIframeAuthEvents() {
   const setPage = useLayoutDataStore((state) => state.setPage);
   const setIsIframeReady = useSession((state) => state.setIsIframeReady);
@@ -7306,7 +7332,7 @@ function useListenIframeAuthEvents() {
     },
     [setPage, setIsIframeReady]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     window.addEventListener("message", handleIframeMessage);
     return () => window.removeEventListener("message", handleIframeMessage);
   }, [handleIframeMessage]);
@@ -7319,7 +7345,7 @@ var init_useListenIframeAuthEvents = __esm({
 });
 
 // src/internal/components/Expandable/hooks/useExpandable.ts
-import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef5 } from "react";
 var DEFERRED_DELAY, useExpandable;
 var init_useExpandable = __esm({
   "src/internal/components/Expandable/hooks/useExpandable.ts"() {
@@ -7328,7 +7354,7 @@ var init_useExpandable = __esm({
       const { isExpanded = false, initHeight = 0, minHeight = 0 } = props;
       const expandableRef = useRef5(null);
       const contentRef = useRef5(null);
-      useEffect9(() => {
+      useEffect10(() => {
         if (!expandableRef.current) return;
         expandableRef.current.style.setProperty("--ui-kit-expandable-h", `${initHeight}px )`);
       }, []);
@@ -7344,7 +7370,7 @@ var init_useExpandable = __esm({
           expandableHeightTimerRef.current = null;
         }, DEFERRED_DELAY);
       }, []);
-      useEffect9(() => {
+      useEffect10(() => {
         if (!contentRef.current || !expandableRef.current) return;
         const resizeObs = new ResizeObserver(() => setExpandableHeight(minHeight, isExpanded));
         const domMutationObs = new MutationObserver(() => setExpandableHeight(minHeight, isExpanded));
@@ -9610,9 +9636,9 @@ var init_useActivityLog = __esm({
 
 // src/internal/components/ActivityLogMenu/useActivityLogMenuParams.ts
 import { keys } from "lodash-es";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function useActivityLogMenuParams() {
-  useEffect10(() => {
+  useEffect11(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams || !keys(pageParams).length) return;
     setTimeout(() => useActivityLogFilters.setState(pageParams), 0);
@@ -10184,7 +10210,7 @@ var init_emailChallenge = __esm({
 // src/internal/components/AuthMenu/SignInStep/Email.tsx
 import { useMutation as useMutation2 } from "@tanstack/react-query";
 import { ChevronRight, Loader as Loader2, Mail as Mail2 } from "lucide-react";
-import { useEffect as useEffect11, useRef as useRef7 } from "react";
+import { useEffect as useEffect12, useRef as useRef7 } from "react";
 import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function Email() {
   const { callbacksRef } = useProviderConfig();
@@ -10255,7 +10281,7 @@ function Email() {
     }
     onSendVerificationCode(email);
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (!focusRef.current || !isMobileView) return;
     focusRef.current?.focus();
     setTimeout(() => {
@@ -11178,7 +11204,7 @@ var init_useAuthMenuHanders = __esm({
 });
 
 // src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx
-import { useEffect as useEffect12, useRef as useRef9, useState as useState4 } from "react";
+import { useEffect as useEffect13, useRef as useRef9, useState as useState4 } from "react";
 import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var getRemainingSeconds, VerificationCodeInput;
 var init_VerificationCodeInput = __esm({
@@ -11193,7 +11219,7 @@ var init_VerificationCodeInput = __esm({
       const { t } = useT();
       const setAlert = useAuthStore((st) => st.setAlert);
       const [timeLeft, setTimeLeft] = useState4(() => getRemainingSeconds(expiresAt));
-      useEffect12(() => {
+      useEffect13(() => {
         let intervalId;
         const syncTimeLeft = () => {
           const remaining = getRemainingSeconds(expiresAt);
@@ -11217,7 +11243,7 @@ var init_VerificationCodeInput = __esm({
       const lastSubmittedRef = useRef9(null);
       const inputsRef = useRef9([]);
       const [digits, setDigits] = useState4(["", "", "", "", "", ""]);
-      useEffect12(() => {
+      useEffect13(() => {
         const code = digits.join("");
         if (code.length === 6 && digits.every((d) => d !== "") && !isLoading) {
           if (lastSubmittedRef.current !== code) {
@@ -11226,7 +11252,7 @@ var init_VerificationCodeInput = __esm({
           }
         }
       }, [digits, isLoading, onVerifyCode]);
-      useEffect12(() => {
+      useEffect13(() => {
         const t2 = setTimeout(() => {
           inputsRef.current[0]?.focus();
         }, 0);
@@ -11531,7 +11557,7 @@ var init_VerifyStep2 = __esm({
 
 // src/internal/components/AuthMenu/AuthMenu.tsx
 import { Loader as Loader4 } from "lucide-react";
-import { useEffect as useEffect13, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo2 } from "react";
 import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var AuthMenu;
 var init_AuthMenu = __esm({
@@ -11558,7 +11584,7 @@ var init_AuthMenu = __esm({
       const step = useAuthStore((st) => st.step);
       const alert2 = useAuthStore((st) => st.alert);
       const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn } = useAuthMenuHandlers();
-      useEffect13(() => {
+      useEffect14(() => {
         if (!pendingWalletLogin) return;
         const loginResponse = pendingWalletLogin;
         useLayoutDataStore.getState().setPendingWalletLogin(null);
@@ -11568,7 +11594,7 @@ var init_AuthMenu = __esm({
           onAuthSuccess();
         });
       }, [pendingWalletLogin]);
-      useEffect13(() => {
+      useEffect14(() => {
         useLayoutDataStore.getState().setTransitionPageHeight(DEFAULT_AUTH_MENU_HEIGHT);
         return () => {
           const { setStep, setPasskeyStatus, setEmail, setEmailChallenge, setAlert } = useAuthStore.getState();
@@ -11760,7 +11786,7 @@ var init_onboarder = __esm({
 
 // src/internal/components/Onboarding/OnboardingOverlay.tsx
 import { ChevronRightIcon, LoaderIcon as LoaderIcon2, XIcon } from "lucide-react";
-import { useEffect as useEffect14, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect15, useMemo as useMemo3, useState as useState6 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function getTooltipXPos(params) {
@@ -11786,7 +11812,7 @@ function getTooltipYPos(params) {
 function OnboardingOverlay() {
   const { t } = useT();
   const page = useLayoutDataStore((st) => st.page);
-  useEffect14(() => {
+  useEffect15(() => {
     setTimeout(() => {
       if (!page) {
         useOnboardingStore.getState().setMountIntoNode(document.body);
@@ -11822,7 +11848,7 @@ function OnboardingOverlay() {
     };
     return { ...getTooltipXPos(posParams), ...getTooltipYPos(posParams) };
   }, [elRect, isMobileView]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!waitSecs) return;
     setContinueCountdown(waitSecs);
     const countdownInterval = setInterval(() => {
@@ -11981,9 +12007,9 @@ var init_OnboardingOverlay = __esm({
 });
 
 // src/internal/components/Onboarding/useOnboardingTouirAvailable.ts
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 function useOnboardingTourAvailable(isAvailable) {
-  useEffect15(() => {
+  useEffect16(() => {
     useOnboardingStore.getState().setIsTourAvailable(isAvailable);
     return () => useOnboardingStore.getState().setIsTourAvailable(false);
   }, [isAvailable]);
@@ -12553,11 +12579,11 @@ var init_priceFormatter = __esm({
 
 // src/internal/components/BuyMenu/useBuyMenuStore.ts
 import { keys as keys2, noop } from "lodash-es";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 import { create as create7 } from "zustand";
 import { persist as persist2 } from "zustand/middleware";
 function useBuyMenuParams() {
-  useEffect16(() => {
+  useEffect17(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams || !keys2(pageParams).length) return;
     const { amount, crypto: crypto2, onRampWidgetRedirected } = pageParams || {};
@@ -13732,11 +13758,11 @@ var init_BinanceTxHistory = __esm({
 
 // src/internal/components/BuyMenu/binance/useBinanceSseTracing.ts
 import { useQueryClient as useQueryClient4 } from "@tanstack/react-query";
-import { useEffect as useEffect18, useRef as useRef10 } from "react";
+import { useEffect as useEffect19, useRef as useRef10 } from "react";
 function useBinanceSseTxTracing(walletAddress) {
   const qc = useQueryClient4();
   const debounceRef = useRef10(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!walletAddress) return;
     const iframeManager = getIframeManager();
     if (!iframeManager) return;
@@ -13778,7 +13804,7 @@ var init_utils7 = __esm({
 // src/internal/components/BuyMenu/binance/Binance.tsx
 import { useMutation as useMutation5, useQuery as useQuery4, useQueryClient as useQueryClient5 } from "@tanstack/react-query";
 import { LoaderIcon as LoaderIcon5 } from "lucide-react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 import { Fragment as Fragment13, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
 function Binance() {
   const qc = useQueryClient5();
@@ -13831,7 +13857,7 @@ function Binance() {
   });
   const paymentModes = paymentModesData?.data?.paymentMethods || [];
   const selectedPaymentMode = paymentModes?.find((el) => getPayMethodID(el) === paymentMode) || null;
-  useEffect19(() => {
+  useEffect20(() => {
     useBuyMenuStore.getState().setMinAmount(Number(selectedPaymentMode?.fiatMinLimit || "0"));
   }, [selectedPaymentMode]);
   const { mutate: estimateQuote, isPending: isQuoteEstimating } = useMutation5({
@@ -13859,22 +13885,22 @@ function Binance() {
     }
   });
   const availableFiats = (tradingPairsData?.data?.fiatCurrencies || []).map((ticker) => ({ ticker }));
-  useEffect19(() => {
+  useEffect20(() => {
     if (!!selectedFiat || !availableFiats?.length) return;
     const targetFiat = availableFiats.find((item) => PREFERRED_FIATS.includes(item.ticker)) || availableFiats[0];
     useBuyMenuStore.getState().setSelectedFiat(targetFiat.ticker);
   }, [availableFiats, selectedFiat]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!!selectedCrypto || !networkAvailableCryptoList?.length) return;
     const targetCrypto = networkAvailableCryptoList.find((item) => PREFERRED_CRYPTOS.includes(item.cryptoCurrency)) || networkAvailableCryptoList[0];
     useBuyMenuStore.getState().setSelectedCrypto(targetCrypto.cryptoCurrency);
   }, [networkAvailableCryptoList, selectedCrypto]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!!paymentMode || !paymentModes.length) return;
     const targetPaymentMode = paymentModes.find((item) => item.payMethodCode === PREFERRED_PAYMENT_METHOD) || paymentModes[0];
     useBinanceStore.getState().setPaymentMode(getPayMethodID(targetPaymentMode));
   }, [paymentModes]);
-  useEffect19(() => {
+  useEffect20(() => {
     return () => {
       useBinanceStore.getState().setPaymentMode(null);
       qc.resetQueries({ queryKey: [QUERY_KEYS2.binanceTradingPairs] });
@@ -14393,11 +14419,11 @@ var init_networks = __esm({
 
 // src/internal/components/BuyMenu/finchpay/useFinchpaySseTxTracing.ts
 import { useQueryClient as useQueryClient6 } from "@tanstack/react-query";
-import { useEffect as useEffect20, useRef as useRef11 } from "react";
+import { useEffect as useEffect21, useRef as useRef11 } from "react";
 function useFinchpaySseTxTracing(walletAddress) {
   const qc = useQueryClient6();
   const debounceRef = useRef11(null);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!walletAddress) return;
     const iframeManager = getIframeManager();
     if (!iframeManager) return;
@@ -14446,7 +14472,7 @@ var init_utils8 = __esm({
 // src/internal/components/BuyMenu/finchpay/FinchPay.tsx
 import { useQuery as useQuery5, useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 import { DollarSign, LoaderIcon as LoaderIcon7 } from "lucide-react";
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect22 } from "react";
 import { Fragment as Fragment14, jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
 function FinchPay() {
   const qc = useQueryClient7();
@@ -14522,7 +14548,7 @@ function FinchPay() {
     })
   });
   const minimum = Number(limitsData?.min_amount || "0");
-  useEffect21(() => {
+  useEffect22(() => {
     if (minimum <= 0) return;
     useBuyMenuStore.getState().setMinAmount(minimum);
   }, [minimum]);
@@ -14550,23 +14576,23 @@ function FinchPay() {
       // defaults to CARD estimation, widgetUrl
     })
   });
-  useEffect21(() => {
+  useEffect22(() => {
     const { error: errorTitle, message: errorMessage } = handleErrors([currenciesError, limitsError, estimateError]);
     if (!errorTitle && !errorMessage) return;
     console.error(`[BuyModal][Binance] ${errorTitle}: ${errorMessage}`);
     useBuyMenuStore.getState().setError(errorMessage);
   }, [currenciesError, limitsError, estimateError]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!!selectedFiat || currenciesData.fiats.length === 0) return;
     const fallbackFiat = currenciesData.fiats[0];
     const targetFiat = currenciesData.fiats.find((f) => f.ticker.toUpperCase() === "USD") || fallbackFiat;
     useBuyMenuStore.getState().setSelectedFiat(targetFiat.ticker);
   }, [currenciesData, selectedFiat]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!!selectedCrypto || currenciesData.currentNetworkCoins.length === 0) return;
     useBuyMenuStore.getState().setSelectedCrypto(currenciesData.currentNetworkCoins[0].ticker);
   }, [currenciesData, selectedCrypto]);
-  useEffect21(() => {
+  useEffect22(() => {
     return () => {
       qc.resetQueries({ queryKey: [QUERY_KEYS2.finchPayCurrencies] });
       qc.resetQueries({ queryKey: [QUERY_KEYS2.finchPayLimits] });
@@ -14820,7 +14846,7 @@ var init_ProviderSelector = __esm({
 });
 
 // src/internal/components/BuyMenu/useHandleInputAmount.ts
-import { useEffect as useEffect22, useRef as useRef12 } from "react";
+import { useEffect as useEffect23, useRef as useRef12 } from "react";
 var ON_INPUT_QUERY_DELAY, useHandleInputAmount;
 var init_useHandleInputAmount = __esm({
   "src/internal/components/BuyMenu/useHandleInputAmount.ts"() {
@@ -14833,7 +14859,7 @@ var init_useHandleInputAmount = __esm({
       const srcInputAmount = useBuyMenuStore((st) => st.srcInputAmount);
       const minAmount = useBuyMenuStore((st) => st.minAmount);
       const queryAmountTimer = useRef12(null);
-      useEffect22(() => {
+      useEffect23(() => {
         if (queryAmountTimer.current) clearTimeout(queryAmountTimer.current);
         queryAmountTimer.current = setTimeout(() => {
           const checkedValue = Math.ceil(Math.max(Number(srcInputAmount), Number(minAmount)));
@@ -14841,7 +14867,7 @@ var init_useHandleInputAmount = __esm({
           useBuyMenuStore.getState().setSrcQueryAmount(checkedValue);
         }, ON_INPUT_QUERY_DELAY);
       }, [minAmount, srcInputAmount]);
-      useEffect22(() => {
+      useEffect23(() => {
         if (lastRampProviderRef.current === rampProvider) return;
         const {
           setIsProviderSummary,
@@ -16526,7 +16552,7 @@ var init_EmailNotConnectedWarning = __esm({
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkSocial.ts
 import { useQueryClient as useQueryClient11 } from "@tanstack/react-query";
-import React29, { useEffect as useEffect23 } from "react";
+import React29, { useEffect as useEffect24 } from "react";
 function normalizeSocialLinkError(message) {
   if (message === "X_ALREADY_LINKED") {
     return "This X account is already linked to another account";
@@ -16601,7 +16627,7 @@ function useLinkSocial() {
     [config.social?.providers]
   );
   const [socialLinkStarted, setSocialLinkStarted] = React29.useState(false);
-  useEffect23(() => {
+  useEffect24(() => {
     const key = providerType?.toLowerCase();
     console.log("[useLinkSocial] Effect triggered:", { key, linkIsLoading, socialLinkStarted });
     if (key && key !== "telegram" && key !== "email" && key !== "passkey" && key !== "wallet") {
@@ -16680,7 +16706,7 @@ var init_telegram2 = __esm({
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkTelegram.ts
 import { useQueryClient as useQueryClient12 } from "@tanstack/react-query";
-import { useCallback as useCallback16, useEffect as useEffect24, useState as useState12 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect25, useState as useState12 } from "react";
 function useLinkTelegram() {
   const {
     config: { current: config },
@@ -16738,7 +16764,7 @@ function useLinkTelegram() {
     }
   }, [config.social?.providers]);
   const [telegramLinkStarted, setTelegramLinkStarted] = useState12(false);
-  useEffect24(() => {
+  useEffect25(() => {
     console.log("[useLinkTelegram] Effect triggered:", { providerType, linkIsLoading, telegramLinkStarted });
     if (providerType === "telegram" && !linkIsLoading && !telegramLinkStarted) {
       console.log("[useLinkTelegram] Starting Telegram link flow");
@@ -16746,7 +16772,7 @@ function useLinkTelegram() {
       handleLinkTelegram();
     }
   }, [providerType, handleLinkTelegram, linkIsLoading, telegramLinkStarted]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (providerType !== "telegram") {
       setTelegramLinkStarted(false);
     }
@@ -17259,10 +17285,10 @@ var init_ManageWalletMenu = __esm({
 
 // src/internal/components/ConnectExternalWalletMenu/useConnectExternalWalletMenuParams.ts
 import { keys as keys3 } from "lodash-es";
-import { useEffect as useEffect25, useRef as useRef13 } from "react";
+import { useEffect as useEffect26, useRef as useRef13 } from "react";
 function useConnectExternalWalletMenuParams() {
   const paramsRef = useRef13(null);
-  useEffect25(() => {
+  useEffect26(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams || !keys3(pageParams).length) return;
     paramsRef.current = pageParams;
@@ -18415,7 +18441,7 @@ var init_guardian_backup = __esm({
 
 // src/internal/components/DevicesMenu/DeviceManageScreen.tsx
 import { ArrowLeft as ArrowLeft10, Cpu, Download, HardDrive, Loader2 as Loader23, Trash2, Upload } from "lucide-react";
-import { useCallback as useCallback19, useEffect as useEffect26, useRef as useRef14, useState as useState16 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect27, useRef as useRef14, useState as useState16 } from "react";
 import { Fragment as Fragment20, jsx as jsx76, jsxs as jsxs67 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -18435,12 +18461,12 @@ function DeviceManageScreen() {
   const [statusMessage, setStatusMessage] = useState16(null);
   const [errorMessage, setErrorMessage] = useState16(null);
   const [waitingConfirm, setWaitingConfirm] = useState16(false);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!statusMessage) return;
     const t = setTimeout(() => setStatusMessage(null), 3e3);
     return () => clearTimeout(t);
   }, [statusMessage]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!deviceId || !isWebSerialAvailable()) {
       setScreen({ step: "error", message: "WebSerial not available" });
       return;
@@ -19372,7 +19398,7 @@ var init_cloudStorage = __esm({
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useCreateBackup.ts
 import { useMutation as useMutation12, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
-import { useCallback as useCallback22, useEffect as useEffect27 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect28 } from "react";
 function useCreateBackup() {
   const qc = useQueryClient16();
   const session = useSession((st) => st.session);
@@ -19381,7 +19407,7 @@ function useCreateBackup() {
   const usePasskey = useRestoreStore((st) => st.usePasskey);
   const restorePassword = useRestoreStore((st) => st.restorePassword);
   const selectedCloudProvider = useRestoreStore((st) => st.selectedCloudProvider);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!hasServerVault) {
       useRestoreStore.getState().setMethod("server");
       useLayoutStore.getState().setIsDialogForced(true);
@@ -19691,7 +19717,7 @@ var init_useRestoreAccount = __esm({
 });
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useValidateFileBackup.ts
-import { useEffect as useEffect28 } from "react";
+import { useEffect as useEffect29 } from "react";
 function validateRestoreFileFormat(parsedData) {
   if (typeof parsedData !== "object" || parsedData === null) return false;
   const data = parsedData;
@@ -19701,7 +19727,7 @@ function useValidateFileBackup() {
   const restoreFile = useRestoreStore((st) => st.restoreFile);
   const setError = useRestoreStore((st) => st.setError);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!restoreFile) {
       return;
     }
@@ -19929,7 +19955,7 @@ var init_onboarding_setup4 = __esm({
 
 // src/internal/components/KeyshareRestoreMenu/components/PasswordPasskey.tsx
 import { ChevronRight as ChevronRight3, Eye, EyeOff, Info as Info3, Key as Key5, Loader as Loader12, Plus } from "lucide-react";
-import { useEffect as useEffect29, useRef as useRef15 } from "react";
+import { useEffect as useEffect30, useRef as useRef15 } from "react";
 import { Fragment as Fragment23, jsx as jsx80, jsxs as jsxs71 } from "react/jsx-runtime";
 function PasswordPasskey(props) {
   const { t } = useT();
@@ -19958,7 +19984,7 @@ function PasswordPasskey(props) {
   } = useRestoreStore();
   const { config } = useProviderConfig();
   const isPasskeyEnabled = config.current.passkey.enabled;
-  useEffect29(() => {
+  useEffect30(() => {
     if (!isPasskeyEnabled && usePasskey) setUsePasskey(false);
   }, [isPasskeyEnabled, usePasskey]);
   return /* @__PURE__ */ jsxs71(Fragment23, { children: [
@@ -20296,7 +20322,7 @@ var init_File = __esm({
 import { useQueryClient as useQueryClient17 } from "@tanstack/react-query";
 import dayjs4 from "dayjs";
 import { Download as Download3, Key as Key6, Upload as Upload3 } from "lucide-react";
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect31 } from "react";
 import { Fragment as Fragment26, jsx as jsx83, jsxs as jsxs74 } from "react/jsx-runtime";
 function Server(props) {
   const { isLoading, mode = "restore", serverHandler, createPasskeyHandler } = props;
@@ -20306,7 +20332,7 @@ function Server(props) {
   const usePasskey = useRestoreStore((st) => st.usePasskey);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
   const serverRecoveryStatus = qc.getQueryData([CHECK_BACKUP_QUERY_KEY, address]);
-  useEffect30(() => {
+  useEffect31(() => {
     if (mode === "backup" || !serverRecoveryStatus?.created?.encryptionMethod) return;
     setUsePasskey(serverRecoveryStatus.created.encryptionMethod === "passkey");
   }, [mode, serverRecoveryStatus, setUsePasskey]);
@@ -20498,7 +20524,7 @@ var init_select = __esm({
 // src/internal/components/KeyshareRestoreMenu/methods/Cloud.tsx
 import { useQuery as useQuery11 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft13, CloudDownload, CloudUpload, Loader as Loader13 } from "lucide-react";
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 import { Fragment as Fragment27, jsx as jsx85, jsxs as jsxs76 } from "react/jsx-runtime";
 function Cloud2(props) {
   const { isLoading, mode = "restore", cloudHandler } = props;
@@ -20519,7 +20545,7 @@ function Cloud2(props) {
       return availableProviders.map((p) => ({ id: p.id, name: p.name, available: p.isAvailable() }));
     }
   });
-  useEffect31(() => {
+  useEffect32(() => {
     if (isCloudProvidersLoading) return;
     if (!!cloudProvidersError) {
       console.error("[KeyshareBackup] Failed to load cloud providers:", cloudProvidersError);
@@ -20759,7 +20785,7 @@ var init_methods = __esm({
 // src/internal/components/KeyshareRestoreMenu/KeyshareRestoreMenu.tsx
 import { useMutation as useMutation14, useQuery as useQuery12, useQueryClient as useQueryClient18 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22, CloudDownload as CloudDownload2, Loader as Loader14, UserCircle as UserCircle2 } from "lucide-react";
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect33 } from "react";
 import { useDisconnect as useDisconnect4 } from "wagmi";
 import { Fragment as Fragment29, jsx as jsx87, jsxs as jsxs78 } from "react/jsx-runtime";
 var RESTORE_COMPONENTS, KeyshareRestoreMenu;
@@ -20795,7 +20821,7 @@ var init_KeyshareRestoreMenu = __esm({
       const error = useRestoreStore((st) => st.error);
       const success = useRestoreStore((st) => st.success);
       const currentRestoreMethod = useRestoreStore((st) => st.method);
-      useEffect32(() => {
+      useEffect33(() => {
         const { setIsDialogForced } = useLayoutStore.getState();
         const { setRestorePassword, setRestoreFile, setShowPassword, setUsePasskey, setMethod } = useRestoreStore.getState();
         setIsDialogForced(true);
@@ -20834,7 +20860,7 @@ var init_KeyshareRestoreMenu = __esm({
         queryFn: async () => await getShareRecoveryStats()
       });
       const hasServerBackup = serverRecoveryStatus?.created || serverRecoveryStatus?.devices?.length > 0;
-      useEffect32(() => {
+      useEffect33(() => {
         if (!!hasServerBackup) useRestoreStore.getState().setMethod("server");
       }, [hasServerBackup]);
       const { mutate: disconnect, isPending: isDisconnecting } = useMutation14({
@@ -20974,7 +21000,7 @@ var init_KeyshareRestoreMenu = __esm({
 // src/internal/components/KeyshareRestoreMenu/KeyshareBackupMenu.tsx
 import { useQuery as useQuery13 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle3, ArrowLeft as ArrowLeft14, CheckCircle2 as CheckCircle23, Loader as Loader15, LockIcon } from "lucide-react";
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect34 } from "react";
 import { Fragment as Fragment30, jsx as jsx88, jsxs as jsxs79 } from "react/jsx-runtime";
 function KeyshareBackupMenu() {
   const address = useSession((st) => st.address);
@@ -20985,7 +21011,7 @@ function KeyshareBackupMenu() {
   const usePasskey = useRestoreStore((st) => st.usePasskey);
   const error = useRestoreStore((st) => st.error);
   const success = useRestoreStore((st) => st.success);
-  useEffect33(() => {
+  useEffect34(() => {
     const { setSuccess, setError, setRestorePassword, setRestoreFile, setShowPassword, setUsePasskey, setMethod } = useRestoreStore.getState();
     return () => {
       setSuccess(null);
@@ -21005,7 +21031,7 @@ function KeyshareBackupMenu() {
   });
   useOnboardingTourAvailable(!isRecoveryLoading && currentBackupMethod === "server" && !usePasskey);
   const hasRecoveryData2 = serverRecoveryStatus?.created || serverRecoveryStatus?.devices?.length > 0;
-  useEffect33(() => {
+  useEffect34(() => {
     if (!!hasRecoveryData2) useRestoreStore.getState().setMethod("server");
   }, [hasRecoveryData2]);
   const {
@@ -21252,7 +21278,7 @@ var init_SumsubIframeManager = __esm({
 });
 
 // src/internal/components/KYC/useSumsubIframe.ts
-import { useEffect as useEffect34, useRef as useRef16, useState as useState21 } from "react";
+import { useEffect as useEffect35, useRef as useRef16, useState as useState21 } from "react";
 function useSumsubIframe({ iframeUrl }) {
   const config = useProviderConfig().config;
   const { colorMode } = useColorMode();
@@ -21262,7 +21288,7 @@ function useSumsubIframe({ iframeUrl }) {
   const [height, setHeight] = useState21(0);
   const [status, setStatus] = useState21("");
   const levelName = config.current?.kyc?.options?.levelName;
-  useEffect34(() => {
+  useEffect35(() => {
     setError(null);
     setIsLoading(true);
     setStatus("Preparing verification...");
@@ -22764,11 +22790,11 @@ var init_useNicknameStore = __esm({
 // src/internal/components/NicknameMenu/useNicknameAvailability.ts
 import { useMutation as useMutation15 } from "@tanstack/react-query";
 import { debounce as debounce4 } from "lodash-es";
-import { useCallback as useCallback25, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect36 } from "react";
 function useNicknameAvailability(currentNickname) {
   const { t } = useT();
   const nicknameValue = useNicknameStore((st) => st.nicknameValue);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!currentNickname) return;
     useNicknameStore.getState().setNicknameValue(currentNickname);
   }, [currentNickname]);
@@ -22790,7 +22816,7 @@ function useNicknameAvailability(currentNickname) {
     }
   });
   const debouncedCheckAvailability = useCallback25(debounce4(checkAvailability, DEBOUNCE_MS), [checkAvailability]);
-  useEffect35(() => {
+  useEffect36(() => {
     if (!currentNickname) return;
     const normalizedInputValue = normalizeNickname(nicknameValue);
     const { valid: isNicknameValid } = validateNickname(nicknameValue);
@@ -22819,7 +22845,7 @@ var init_useNicknameAvailability = __esm({
 // src/internal/components/NicknameMenu/NicknameEditForm.tsx
 import { useMutation as useMutation16, useQueryClient as useQueryClient21 } from "@tanstack/react-query";
 import { AtSignIcon, CopyIcon as CopyIcon2, LoaderIcon as LoaderIcon12, SaveIcon } from "lucide-react";
-import { useCallback as useCallback26, useEffect as useEffect36, useRef as useRef18, useState as useState23 } from "react";
+import { useCallback as useCallback26, useEffect as useEffect37, useRef as useRef18, useState as useState23 } from "react";
 import { Fragment as Fragment34, jsx as jsx98, jsxs as jsxs89 } from "react/jsx-runtime";
 function NicknameEditForm(props) {
   const { isInitialUser, nicknameInfo } = props;
@@ -22834,7 +22860,7 @@ function NicknameEditForm(props) {
   const { isCheckingAvailability } = useNicknameAvailability(nicknameInfo ? nicknameInfo.handle : "");
   const [isNicknameCopied, setIsNicknameCopied] = useState23(false);
   const exitTimerRef = useRef18(null);
-  useEffect36(() => () => {
+  useEffect37(() => () => {
     if (exitTimerRef.current) clearTimeout(exitTimerRef.current);
   }, []);
   const { mutate: changeNickname2, isPending: isNicknameChanging } = useMutation16({
@@ -22998,7 +23024,7 @@ var init_NicknameEditForm = __esm({
 import { useQuery as useQuery19 } from "@tanstack/react-query";
 import dayjs5 from "dayjs";
 import { ArrowLeft as ArrowLeft18, Loader as Loader18 } from "lucide-react";
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 import { jsx as jsx99, jsxs as jsxs90 } from "react/jsx-runtime";
 function NicknameMenu() {
   const { isInitialUser } = usePageParams().current;
@@ -23018,7 +23044,7 @@ function NicknameMenu() {
     queryFn: async () => await getNicknameInfo()
   });
   const resolvedError = nicknameError || nicknameInfoError?.message || null;
-  useEffect37(() => () => useNicknameStore.getState().reset(), []);
+  useEffect38(() => () => useNicknameStore.getState().reset(), []);
   return /* @__PURE__ */ jsxs90(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: [
     /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-[var(--ui-kit-gap)] ", children: [
       /* @__PURE__ */ jsx99(
@@ -23210,7 +23236,7 @@ var init_nickname_fingerprint = __esm({
 import { useQuery as useQuery20 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft19, AtSignIcon as AtSignIcon2, CheckCircle2 as CheckCircle24, Copy as Copy2, FingerprintIcon, LoaderIcon as LoaderIcon13, Wallet2Icon as Wallet2Icon4 } from "lucide-react";
 import QRCode from "qrcode";
-import { useEffect as useEffect38, useMemo as useMemo15, useState as useState24 } from "react";
+import { useEffect as useEffect39, useMemo as useMemo15, useState as useState24 } from "react";
 import { Fragment as Fragment35, jsx as jsx100, jsxs as jsxs91 } from "react/jsx-runtime";
 function ReceiveMenu() {
   const { t } = useT();
@@ -23236,7 +23262,7 @@ function ReceiveMenu() {
       return null;
     }
   }, [session?.ownerAddress]);
-  useEffect38(() => {
+  useEffect39(() => {
     if (!address) return;
     QRCode.toDataURL(address, {
       width: 200,
@@ -24038,7 +24064,7 @@ var init_utils10 = __esm({
 });
 
 // src/internal/components/SecurityMenu/UserPolicies/usePolicyForm.ts
-import { useEffect as useEffect39, useState as useState25 } from "react";
+import { useEffect as useEffect40, useState as useState25 } from "react";
 import { create as create14 } from "zustand";
 function updateDestinations(patch) {
   usePolicyForm.setState((st) => ({ ...st, destinations: { ...st?.destinations, ...patch } }));
@@ -24050,7 +24076,7 @@ function useWatchFormData() {
   const [showFormErrors, setShowFormErrors] = useState25(false);
   const formData = usePolicyForm();
   const formState = usePolicyFormValidation();
-  useEffect39(() => {
+  useEffect40(() => {
     if (!formData) return;
     setShowFormErrors(false);
     const errors = {};
@@ -24077,7 +24103,7 @@ function useWatchFormData() {
     }
     usePolicyFormValidation.setState(errors, true);
   }, [formData]);
-  useEffect39(() => () => usePolicyFormValidation.setState({}, true), []);
+  useEffect40(() => () => usePolicyFormValidation.setState({}, true), []);
   const formErrorItem = Object.entries(formState).find(([_, value]) => value?.error);
   const formErrorMessage = formErrorItem ? `${formErrorItem[0].toUpperCase()}: ${formErrorItem[1]?.error}` : "";
   return {
@@ -24584,9 +24610,9 @@ var init_UserPolicies2 = __esm({
 
 // src/internal/components/SecurityMenu/useSecurityMenuParams.ts
 import { keys as keys4 } from "lodash-es";
-import { useEffect as useEffect40 } from "react";
+import { useEffect as useEffect41 } from "react";
 function useSecurityMenuParams() {
-  useEffect40(() => {
+  useEffect41(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams || !keys4(pageParams).length) return;
     const { submenu } = pageParams;
@@ -24620,7 +24646,7 @@ var init_useSecurityMenuParams = __esm({
 
 // src/internal/components/SecurityMenu/SecurityMenu.tsx
 import { ArrowLeft as ArrowLeft20, LayoutGridIcon, ShieldCogIcon } from "lucide-react";
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect42 } from "react";
 import { Fragment as Fragment38, jsx as jsx108, jsxs as jsxs99 } from "react/jsx-runtime";
 function SecurityMenuContent() {
   const { t } = useT();
@@ -24629,7 +24655,7 @@ function SecurityMenuContent() {
   const { appToUntrust, showConnectedApps, showAssetsPolicies } = useSecurityStore();
   const policyForm = usePolicyForm();
   useOnboardingTourAvailable(!showConnectedApps && !showAssetsPolicies);
-  useEffect41(() => {
+  useEffect42(() => {
     let securityTitle = "";
     switch (true) {
       case showConnectedApps:
@@ -24650,7 +24676,7 @@ function SecurityMenuContent() {
     return () => {
     };
   }, [t, showConnectedApps, showAssetsPolicies, policyForm]);
-  useEffect41(
+  useEffect42(
     () => () => {
       usePolicyForm.setState(null, true);
       useSecurityStore.setState(
@@ -24946,12 +24972,12 @@ var init_SenderSelector = __esm({
 });
 
 // src/internal/components/SendMenu/hyperbridge/hooks/useAvailableSenders.ts
-import { useEffect as useEffect42, useRef as useRef19 } from "react";
+import { useEffect as useEffect43, useRef as useRef19 } from "react";
 function useAvailableSenders() {
   const address = useSession((st) => st.address);
   const { profiles } = useLinkedProfiles();
   const lastCalcedSenders = useRef19([]);
-  useEffect42(() => {
+  useEffect43(() => {
     const sendersAccumulator = [
       {
         type: "embarkai-wallet",
@@ -25654,7 +25680,7 @@ var init_useBridge = __esm({
 
 // src/internal/components/SendMenu/hyperbridge/hooks/useHyperlaneRoutes.ts
 import { useQuery as useQuery24 } from "@tanstack/react-query";
-import { useEffect as useEffect43 } from "react";
+import { useEffect as useEffect44 } from "react";
 function useHyperlaneRoutes() {
   const address = useSession((st) => st.address);
   const page = useLayoutDataStore((st) => st.page);
@@ -25670,7 +25696,7 @@ function useHyperlaneRoutes() {
     queryKey: [HYPERLANE_WARP_ROUTES_QUERY_KEY, address],
     queryFn: async () => await getHyperlaneWarpRoutes()
   });
-  useEffect43(() => {
+  useEffect44(() => {
     if (!errorWarpRoutes) return;
     useFlowSelectorStore.getState().setError(errorWarpRoutes.message);
     const { resetSelections, setRecipient, setOriginChain, setDestinationChain } = useBridgeStore.getState();
@@ -25679,7 +25705,7 @@ function useHyperlaneRoutes() {
     setOriginChain(null);
     setDestinationChain(null);
   }, [errorWarpRoutes]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (!!hyperRoute || !hyperlaneWarpRoutes.length) return;
     let targetHyperRouteToSelect = hyperlaneWarpRoutes.find((route) => route.routeId === hyperRoute);
     if (!targetHyperRouteToSelect) {
@@ -25718,13 +25744,13 @@ var init_useHyperlaneRoutes = __esm({
 });
 
 // src/internal/components/SendMenu/hyperbridge/hooks/useMenuTitle.ts
-import { useEffect as useEffect44 } from "react";
+import { useEffect as useEffect45 } from "react";
 function useMenuTitle(warpRoutes) {
   const { t } = useT();
   const bridgeStep = useBridgeStore((st) => st.bridgeStep);
   const hyperRoute = useBridgeStore((st) => st.hyperRoute);
   const hyperRouteMeta = warpRoutes?.length ? warpRoutes.find((route) => route.routeId === hyperRoute) : null;
-  useEffect44(() => {
+  useEffect45(() => {
     const updateMenuTitle = useFlowSelectorStore.getState().setMenuTitle;
     switch (true) {
       case bridgeStep === "sender-selector":
@@ -25918,7 +25944,7 @@ var init_ResolveChainIcon = __esm({
 // src/internal/components/SendMenu/hyperbridge/hooks/useBridgeBalance.ts
 import { CHAINS_BROWSERS_TRANSPORTS as CHAINS_BROWSERS_TRANSPORTS2 } from "@embarkai/core";
 import { useQuery as useQuery25, useQueryClient as useQueryClient26 } from "@tanstack/react-query";
-import { useCallback as useCallback29, useEffect as useEffect45 } from "react";
+import { useCallback as useCallback29, useEffect as useEffect46 } from "react";
 import { createPublicClient as createPublicClient2, erc20Abi as erc20Abi3, formatUnits as formatUnits9, http as http3 } from "viem";
 import { useSwitchChain as useSwitchChain3 } from "wagmi";
 function useBridgeBalance(isLoadingWarpRoutes, hyperlaneWarpRoutes) {
@@ -26024,7 +26050,7 @@ function useBridgeBalance(isLoadingWarpRoutes, hyperlaneWarpRoutes) {
     },
     [refreshBalances, qc]
   );
-  useEffect45(() => {
+  useEffect46(() => {
     if (!!isLoadingWarpRoutes || !bridgeSender || !originChain) return;
     switch (bridgeSender) {
       case "embarkai-wallet":
@@ -26987,7 +27013,7 @@ var init_steps = __esm({
 });
 
 // src/internal/components/SendMenu/hyperbridge/HyperlaneBridge.tsx
-import { useEffect as useEffect46 } from "react";
+import { useEffect as useEffect47 } from "react";
 import { jsx as jsx117, jsxs as jsxs106 } from "react/jsx-runtime";
 function HyperlaneBridge() {
   const bridgeStep = useBridgeStore((st) => st.bridgeStep);
@@ -26995,7 +27021,7 @@ function HyperlaneBridge() {
   const { hyperlaneWarpRoutes, isLoadingWarpRoutes } = useHyperlaneRoutes();
   const { directWalletProfiles } = useAvailableSenders();
   useMenuTitle(hyperlaneWarpRoutes);
-  useEffect46(() => {
+  useEffect47(() => {
     return () => {
       useBridgeStore.getState().resetSelections();
     };
@@ -27150,7 +27176,7 @@ var init_useErc3643Compliance = __esm({
 
 // src/hooks/useNicknameResolve.ts
 import { useQuery as useQuery26 } from "@tanstack/react-query";
-import { useEffect as useEffect47, useMemo as useMemo18, useState as useState29 } from "react";
+import { useEffect as useEffect48, useMemo as useMemo18, useState as useState29 } from "react";
 function looksLikeNickname(input) {
   if (!input) return false;
   if (input.startsWith("0x")) return false;
@@ -27164,7 +27190,7 @@ function useNicknameResolve(input, options) {
   const [isDebouncing, setIsDebouncing] = useState29(false);
   const normalized = normalizeNickname(input);
   const isNicknameInput = looksLikeNickname(input) && normalized.length >= 3;
-  useEffect47(() => {
+  useEffect48(() => {
     if (!isNicknameInput || !enabled) {
       setDebouncedInput("");
       setIsDebouncing(false);
@@ -27632,7 +27658,7 @@ var init_AssetList = __esm({
 
 // src/internal/components/SendMenu/send/components/NicknameData.tsx
 import { AtSign, CheckCircle2 as CheckCircle25, ShieldAlert, ShieldCheck as ShieldCheck2 } from "lucide-react";
-import { useEffect as useEffect48 } from "react";
+import { useEffect as useEffect49 } from "react";
 import { jsx as jsx122, jsxs as jsxs110 } from "react/jsx-runtime";
 function NicknameData(props) {
   const { resolvedNicknameData, isNicknameInput } = props;
@@ -27645,7 +27671,7 @@ function NicknameData(props) {
     isWalletNotSetup,
     isFrozen
   } = resolvedNicknameData;
-  useEffect48(() => {
+  useEffect49(() => {
     if (isResolving) return;
     let errMessage = null;
     switch (true) {
@@ -28214,7 +28240,7 @@ var init_sendSteps = __esm({
 
 // src/internal/components/SendMenu/send/SendMenu.tsx
 import { CheckCircle2 as CheckCircle27, Loader as Loader28 } from "lucide-react";
-import { useEffect as useEffect49, useMemo as useMemo19 } from "react";
+import { useEffect as useEffect50, useMemo as useMemo19 } from "react";
 import { parseUnits as parseUnits2 } from "viem";
 import { Fragment as Fragment44, jsx as jsx125, jsxs as jsxs113 } from "react/jsx-runtime";
 function SendMenu() {
@@ -28235,16 +28261,16 @@ function SendMenu() {
     userOpHash,
     reset
   } = useSendTransaction();
-  useEffect49(() => {
+  useEffect50(() => {
     useFlowSelectorStore.getState().setIsUiLocked(isAssetsLoading || isTransactionPending);
   }, [isAssetsLoading, isTransactionPending]);
-  useEffect49(() => {
+  useEffect50(() => {
     useFlowSelectorStore.getState().setError(sendTransactionError || null);
   }, [sendTransactionError]);
   const { txStep, recipient, amount, selectedAsset, setSelectedAsset } = useSendStore();
   const isNft = isNftAsset3(selectedAsset);
   const isSecurity = isSecurityToken2(selectedAsset);
-  useEffect49(() => {
+  useEffect50(() => {
     const shouldDefaultAsset = assets.length > 0 && !selectedAsset;
     if (!shouldDefaultAsset) return;
     const chainNativeCurrency = useSession.getState().chainConfig?.nativeCurrency;
@@ -28254,7 +28280,7 @@ function SendMenu() {
     if (isBalance(erc20)) return setSelectedAsset(erc20);
     setSelectedAsset(assets[0]);
   }, [assets, selectedAsset]);
-  useEffect49(
+  useEffect50(
     () => () => {
       useSendStore.getState().reset();
       reset();
@@ -28279,7 +28305,7 @@ function SendMenu() {
     enabled: isSecurity && !!effectiveAddress && !!complianceAmount,
     chainId: activeChainId
   });
-  useEffect49(() => {
+  useEffect50(() => {
     const updateMenuTitle = useFlowSelectorStore.getState().setMenuTitle;
     switch (true) {
       case txStep === "select-asset":
@@ -28378,10 +28404,10 @@ var init_send = __esm({
 
 // src/internal/components/SendMenu/useSendMenuParams.ts
 import { keys as keys5 } from "lodash-es";
-import { useEffect as useEffect50 } from "react";
+import { useEffect as useEffect51 } from "react";
 function useSendMenuParams() {
   const { config } = useProviderConfig();
-  useEffect50(() => {
+  useEffect51(() => {
     const { pageParams, setPageParams } = useLayoutDataStore.getState();
     if (!pageParams || !keys5(pageParams).length) return;
     const { sendFlow, send, bridge } = pageParams || {};
@@ -28446,7 +28472,7 @@ var init_useSendMenuParams = __esm({
 
 // src/internal/components/SendMenu/SendFlowSelector.tsx
 import { ArrowLeft as ArrowLeft21, ArrowRightIcon as ArrowRightIcon2, ArrowRightLeftIcon as ArrowRightLeftIcon3 } from "lucide-react";
-import { useEffect as useEffect51, useMemo as useMemo20 } from "react";
+import { useEffect as useEffect52, useMemo as useMemo20 } from "react";
 import { jsx as jsx126, jsxs as jsxs114 } from "react/jsx-runtime";
 function SelectorFlowButtons() {
   const { t } = useT();
@@ -28507,13 +28533,13 @@ function SendFlowSelector() {
   const sendStep = useSendStore((st) => st.txStep);
   const bridgeStep = useBridgeStore((st) => st.bridgeStep);
   useOnboardingTourAvailable(sendStep === "input" && bridgeStep === "select");
-  useEffect51(
+  useEffect52(
     () => () => {
       useFlowSelectorStore.getState().setError(null);
     },
     []
   );
-  useEffect51(() => {
+  useEffect52(() => {
     if (!!config?.current?.features?.showAssetBridge) return;
     if (selectorFlow === "bridge") useFlowSelectorStore.getState().setFlow("send");
   }, [selectorFlow]);
@@ -29858,7 +29884,7 @@ var init_PageMap = __esm({
 });
 
 // src/internal/hooks/usePageMapper.tsx
-import { useCallback as useCallback32, useEffect as useEffect52 } from "react";
+import { useCallback as useCallback32, useEffect as useEffect53 } from "react";
 import { jsx as jsx130 } from "react/jsx-runtime";
 function usePageMapper() {
   const page = useLayoutDataStore((st) => st.page);
@@ -29881,7 +29907,7 @@ function usePageMapper() {
       // isDialogAnimating: true
     });
   }, []);
-  useEffect52(() => {
+  useEffect53(() => {
     if (page === null) return closeDialog();
     const pageItem = PAGE_MAP[page];
     if (!pageItem) {
@@ -29904,20 +29930,20 @@ var init_usePageMapper = __esm({
 });
 
 // src/internal/hooks/useSettingsNotifications.ts
-import { useEffect as useEffect53 } from "react";
+import { useEffect as useEffect54 } from "react";
 function useSettingsNotifications() {
   const setSettingsNotifications = useLayoutDataStore((st) => st.setSettingsNotifications);
   const providers = jwtTokenManager2.getProviders();
   const hasEmail = providers.includes("email");
   const { data: userProfile = null } = useUserProfile();
-  useEffect53(() => {
+  useEffect54(() => {
     const isKYCVerified = userProfile?.kycDetails?.kycStatus === "verified";
     setSettingsNotifications({
       ...COMPLETE_KYC_PROGRESS,
       status: isKYCVerified ? "resolved" : "active"
     });
   }, [userProfile, setSettingsNotifications]);
-  useEffect53(() => {
+  useEffect54(() => {
     setSettingsNotifications({
       ...EMAIL_NOT_CONNECTED_NOTIFICATION,
       status: hasEmail ? "resolved" : "active"
@@ -29949,7 +29975,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.111",
+      version: "0.4.112",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -30452,21 +30478,23 @@ var init_dialog = __esm({
     init_button();
     Dialog = DialogPrimitive.Root;
     DialogPortal = DialogPrimitive.Portal;
-    DialogOverlay = forwardRef6(({ className, closing, ...props }, ref) => /* @__PURE__ */ jsx133(
-      "div",
-      {
-        ref,
-        style: { backdropFilter: "blur(var(--ui-kit-backdrop-blur))" },
-        className: cn2(
-          "w-[100dvw] h-[100dvh]",
-          "fixed inset-0 z-[9998] bg-[var(--ui-kit-overlay)]",
-          closing ? "animate-dialog-out" : "animate-dialog-in",
-          className
-        ),
-        ...props
-      }
-    ));
-    DialogOverlay.displayName = "DialogOverlay";
+    DialogOverlay = forwardRef6(
+      ({ className, closing, ...props }, ref) => /* @__PURE__ */ jsx133(
+        DialogPrimitive.Overlay,
+        {
+          ref,
+          style: { backdropFilter: "blur(var(--ui-kit-backdrop-blur))" },
+          className: cn2(
+            "w-[100dvw] h-[100dvh]",
+            "fixed inset-0 z-[9998] bg-[var(--ui-kit-overlay)]",
+            closing ? "animate-dialog-out" : "animate-dialog-in",
+            className
+          ),
+          ...props
+        }
+      )
+    );
+    DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
     CONTENT_BG_SETUP = {
       backgroundColor: "var(--ui-kit-bg)",
       border: "1px solid var(--ui-kit-bd)",
@@ -30608,7 +30636,7 @@ var init_visually_hidden = __esm({
 
 // src/internal/components/Dialog/Dialog.tsx
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect as useEffect54 } from "react";
+import { useEffect as useEffect55 } from "react";
 import { jsx as jsx135, jsxs as jsxs121 } from "react/jsx-runtime";
 function Dialog2() {
   const config = useProviderConfig().config;
@@ -30618,19 +30646,19 @@ function Dialog2() {
   const { colorMode, maxScrollHeight, isDialogOpen, dialogContent, isDialogForced } = useLayoutStore();
   const page = useLayoutDataStore((st) => st.page);
   const transitionPageHeight = useLayoutDataStore((st) => st.transitionPageHeight);
-  useEffect54(() => useLayoutStore.setState({ isSettings: !!session }), [session]);
+  useEffect55(() => useLayoutStore.setState({ isSettings: !!session }), [session]);
   usePageMapper();
   useAutoConnect();
   useBackupStatusChanges();
   useDetectMaxScrollHeight();
   useSettingsNotifications();
   useListenIframeAuthEvents();
+  useAllowExternalModalsScroll(isDialogOpen);
   const isHeaderHidden = !session || page === "keysare-backup" /* KEYSARE_BACKUP */ && !hasServerVault;
   return /* @__PURE__ */ jsx135(
     Dialog,
     {
       open: isDialogOpen,
-      modal: false,
       onOpenChange: (open) => {
         if (isDialogForced) return;
         if (!open) {
@@ -30684,6 +30712,7 @@ var init_Dialog = __esm({
     init_ProviderContext();
     init_SessionContext();
     init_constants();
+    init_useAllowExternalModalsScroll();
     init_useAutoConnect();
     init_useBackupStatusChanges();
     init_useDetectMaxScrollHeight();
@@ -30708,19 +30737,19 @@ var init_Dialog2 = __esm({
 });
 
 // src/internal/components/DirectWalletHandler.tsx
-import { useEffect as useEffect55 } from "react";
+import { useEffect as useEffect56 } from "react";
 import { useConnection } from "wagmi";
 function DirectWalletHandler() {
   const walletMode = useProviderConfig().config.current?.wallet?.mode || "both";
   const externalAddress = useExternalWalletStore((st) => st.externalAddress);
   const isExternalConnected = useExternalWalletStore((st) => st.isExternalConnected);
   const { address, isConnected, chain, connector } = useConnection();
-  useEffect55(() => {
+  useEffect56(() => {
     const { setConfigMode, setActiveMode } = useExternalWalletStore.getState();
     setConfigMode(walletMode);
     if (walletMode !== "both") setActiveMode(walletMode);
   }, [walletMode]);
-  useEffect55(() => {
+  useEffect56(() => {
     if ((!!externalAddress || isExternalConnected) && !isConnected) {
       useExternalWalletStore.getState().clearExternalWallet();
       return;
@@ -33304,7 +33333,7 @@ import {
   createContext,
   useCallback as useCallback35,
   useContext,
-  useEffect as useEffect56,
+  useEffect as useEffect57,
   useMemo as useMemo21,
   useRef as useRef22
 } from "react";
@@ -33328,7 +33357,7 @@ function clearLegacyWagmiStorage() {
 function Provider(props) {
   const { children, projectId, initialConfig = {}, callbacks } = props;
   const callbacksRef = useRef22(callbacks);
-  useEffect56(() => notifyNoProjetctId(projectId), [projectId]);
+  useEffect57(() => notifyNoProjetctId(projectId), [projectId]);
   const config = useRef22(merge3({}, DEFAULT_PROVIDER_CONFIG, { projectId }, initialConfig));
   const wagmiConfig3 = useRef22(getWagmiConfig(config.current?.wallet?.walletConnectId || null));
   const updateConfig = useCallback35((updates) => {
@@ -33370,7 +33399,7 @@ function Provider(props) {
     const next = updates ? { ...prev, ...updates } : void 0;
     callbacksRef.current = next;
   }, []);
-  useEffect56(() => {
+  useEffect57(() => {
     if (typeof window === "undefined" || !projectId) return;
     const mergedConfig = merge3(DEFAULT_PROVIDER_CONFIG, initialConfig);
     updateConfig(mergedConfig);
@@ -33390,7 +33419,7 @@ function Provider(props) {
       useSession.getState().setActiveChainId(mergedConfig.network.chainId);
     }
   }, [projectId, initialConfig]);
-  useEffect56(() => {
+  useEffect57(() => {
     if (typeof window === "undefined" || !projectId) return;
     try {
       initSdkErrorTracking();
@@ -33470,7 +33499,7 @@ init_useUserProfile();
 init_pro_mode();
 init_utils();
 import { Cloud as Cloud4, Laptop as Laptop2, Loader as Loader32, Shield as Shield2 } from "lucide-react";
-import { useEffect as useEffect57, useMemo as useMemo22 } from "react";
+import { useEffect as useEffect58, useMemo as useMemo22 } from "react";
 import { Fragment as Fragment48, jsx as jsx138, jsxs as jsxs123 } from "react/jsx-runtime";
 function getFormattedStatus(label, status, showStatus) {
   const isStatus = showStatus && status && status !== "idle" && status !== "ready";
@@ -33490,7 +33519,7 @@ function ConnectWalletButton(props) {
   const colorMode = useLayoutStore((st) => st.colorMode);
   const { session, address, hasServerVault, isLoading, isIframeReady, status, setUsePaymaster } = useSession();
   const connectButtonLabel = getFormattedStatus(label || "Connect", status, isIframeReady);
-  useEffect57(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
+  useEffect58(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
   const { data: profile, isLoading: isProfileLoading } = useUserProfile();
   const displayName = profile?.nicknameDisplay || profile?.displayName || jwtTokenManager2.getDisplayName();
   const indicators = useMemo22(() => {
@@ -34136,13 +34165,13 @@ var Hash = ({
 
 // src/internal/components/TransactionsMenu/TransactionsList.tsx
 init_base3();
-import { useEffect as useEffect59, useState as useState37 } from "react";
+import { useEffect as useEffect60, useState as useState37 } from "react";
 import { jsx as jsx144, jsxs as jsxs127 } from "react/jsx-runtime";
 var TransactionsList = ({ address, itemsCount = 10 }) => {
   const [transactions, setTransactions] = useState37([]);
   const [loading, setLoading] = useState37(true);
   const [error, setError] = useState37(null);
-  useEffect59(() => {
+  useEffect60(() => {
     const fetchTransactions2 = async () => {
       try {
         setLoading(true);