@lumiapassport/ui-kit 1.14.22 → 1.14.23

package/dist/index.js

@@ -3834,28 +3834,32 @@ async function sendUserOperation(session, callTarget, amountWei, innerData = "0x
     try {
       const envCaps = typeof import.meta !== "undefined" && import.meta.env || {};
       const maxBundlerVerifGas = envCaps.VITE_MAX_VERIFICATION_GAS ? BigInt(envCaps.VITE_MAX_VERIFICATION_GAS) : MAX_BUNDLER_VERIFICATION_GAS;
-      const maxCallGas = envCaps.VITE_MAX_CALL_GAS_LIMIT ? BigInt(envCaps.VITE_MAX_CALL_GAS_LIMIT) : 0x7a120n;
+      const maxCallGas = envCaps.VITE_MAX_CALL_GAS_LIMIT ? BigInt(envCaps.VITE_MAX_CALL_GAS_LIMIT) : null;
       const toHex2 = (v) => `0x${v.toString(16)}`;
       const maxAccountVerifGas = usePaymaster ? maxBundlerVerifGas - PAYMASTER_VERIFICATION_GAS : maxBundlerVerifGas;
       const verGas = BigInt(userOp.verificationGasLimit || "0x0");
       if (verGas > maxAccountVerifGas) userOp.verificationGasLimit = toHex2(maxAccountVerifGas);
       const callGas = BigInt(userOp.callGasLimit || "0x0");
-      if (callGas > maxCallGas) userOp.callGasLimit = toHex2(maxCallGas);
+      if (maxCallGas && callGas > maxCallGas) userOp.callGasLimit = toHex2(maxCallGas);
     } catch {
     }
   };
   let estimated = false;
   try {
     const gasEst = await estimateUserOperationGas({ ...userOp, signature: `0x${"00".repeat(65)}` });
+    console.log("[Account] Gas estimation from bundler:", { callGasLimit: gasEst.callGasLimit, verificationGasLimit: gasEst.verificationGasLimit, preVerificationGas: gasEst.preVerificationGas });
     userOp.callGasLimit = gasEst.callGasLimit;
     userOp.verificationGasLimit = gasEst.verificationGasLimit;
     userOp.preVerificationGas = gasEst.preVerificationGas;
     ensureGenerousDefaults();
     enforceCaps(session.usePaymaster);
     estimated = true;
-  } catch {
+    console.log("[Account] Gas after caps:", { callGasLimit: userOp.callGasLimit, verificationGasLimit: userOp.verificationGasLimit, preVerificationGas: userOp.preVerificationGas });
+  } catch (e) {
+    console.log("[Account] Gas estimation failed, using defaults:", e);
     ensureGenerousDefaults();
     enforceCaps(session.usePaymaster);
+    console.log("[Account] Gas after defaults:", { callGasLimit: userOp.callGasLimit, verificationGasLimit: userOp.verificationGasLimit, preVerificationGas: userOp.preVerificationGas });
   }
   try {
     const toHex2 = (v) => `0x${v.toString(16)}`;
@@ -4019,28 +4023,32 @@ async function prepareUserOperation(session, callTarget, amountWei, innerData =
     try {
       const envCaps = typeof import.meta !== "undefined" && import.meta.env || {};
       const maxBundlerVerifGas = envCaps.VITE_MAX_VERIFICATION_GAS ? BigInt(envCaps.VITE_MAX_VERIFICATION_GAS) : MAX_BUNDLER_VERIFICATION_GAS;
-      const maxCallGas = envCaps.VITE_MAX_CALL_GAS_LIMIT ? BigInt(envCaps.VITE_MAX_CALL_GAS_LIMIT) : 0x7a120n;
+      const maxCallGas = envCaps.VITE_MAX_CALL_GAS_LIMIT ? BigInt(envCaps.VITE_MAX_CALL_GAS_LIMIT) : null;
       const toHex2 = (v) => `0x${v.toString(16)}`;
       const maxAccountVerifGas = usePaymaster ? maxBundlerVerifGas - PAYMASTER_VERIFICATION_GAS : maxBundlerVerifGas;
       const verGas = BigInt(userOp.verificationGasLimit || "0x0");
       if (verGas > maxAccountVerifGas) userOp.verificationGasLimit = toHex2(maxAccountVerifGas);
       const callGas = BigInt(userOp.callGasLimit || "0x0");
-      if (callGas > maxCallGas) userOp.callGasLimit = toHex2(maxCallGas);
+      if (maxCallGas && callGas > maxCallGas) userOp.callGasLimit = toHex2(maxCallGas);
     } catch {
     }
   };
   let estimated = false;
   try {
     const gasEst = await estimateUserOperationGas({ ...userOp, signature: `0x${"00".repeat(65)}` });
+    console.log("[Account] Gas estimation from bundler:", { callGasLimit: gasEst.callGasLimit, verificationGasLimit: gasEst.verificationGasLimit, preVerificationGas: gasEst.preVerificationGas });
     userOp.callGasLimit = gasEst.callGasLimit;
     userOp.verificationGasLimit = gasEst.verificationGasLimit;
     userOp.preVerificationGas = gasEst.preVerificationGas;
     ensureGenerousDefaults();
     enforceCaps(session.usePaymaster);
     estimated = true;
-  } catch {
+    console.log("[Account] Gas after caps:", { callGasLimit: userOp.callGasLimit, verificationGasLimit: userOp.verificationGasLimit, preVerificationGas: userOp.preVerificationGas });
+  } catch (e) {
+    console.log("[Account] Gas estimation failed, using defaults:", e);
     ensureGenerousDefaults();
     enforceCaps(session.usePaymaster);
+    console.log("[Account] Gas after defaults:", { callGasLimit: userOp.callGasLimit, verificationGasLimit: userOp.verificationGasLimit, preVerificationGas: userOp.preVerificationGas });
   }
   try {
     const toHex2 = (v) => `0x${v.toString(16)}`;
@@ -4397,9 +4405,9 @@ import {
   createContext,
   useCallback as useCallback20,
   useContext,
-  useEffect as useEffect33,
+  useEffect as useEffect34,
   useMemo as useMemo5,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 
 // src/context/LumiaPassportSessionContext.tsx
@@ -4581,7 +4589,7 @@ function BalanceFeedProvider() {
 
 // src/internal/components/Dialog/LumiaPassportDialog.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion3 } from "framer-motion";
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/internal/components/Footer/Footer.tsx
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -4642,6 +4650,35 @@ var LumiaLogo = forwardRef(({ size = 24, className = "" }, ref) => /* @__PURE__
 init_auth();
 init_base();
 
+// src/internal/hooks/useLayoutStore.ts
+import { create as create2 } from "zustand";
+var useLayoutStore = create2((set) => ({
+  colorMode: "light",
+  // layoutView: 'desktop',
+  // deviceType: 'non-touch',
+  isMobileView: false,
+  maxScrollHeight: MAX_CONTENT_HEIGHT,
+  isDialogClosing: false,
+  isDialogOpen: false,
+  isDialogForced: false,
+  dialogTitle: null,
+  dialogDescription: null,
+  dialogContent: null,
+  isSettings: false,
+  setColorMode: (colorMode) => set({ colorMode }),
+  // setLayoutView: (layoutView) => set(() => ({ layoutView })),
+  // setDeviceType: (deviceType) => set(() => ({ deviceType })),
+  setIsMobileView: (isMobileView) => set({ isMobileView }),
+  setMaxScrollHeight: (maxScrollHeight) => set({ maxScrollHeight }),
+  setIsDialogClosing: (isDialogClosing) => set({ isDialogClosing }),
+  setIsDialogOpen: (isDialogOpen) => set({ isDialogOpen }),
+  setIsDialogForced: (isDialogForced) => set({ isDialogForced }),
+  setDialogTitle: (dialogTitle) => set({ dialogTitle }),
+  setDialogDescription: (dialogDescription) => set({ dialogDescription }),
+  setDialogContent: (dialogContent) => set({ dialogContent }),
+  setIsSettings: (isSettings) => set({ isSettings })
+}));
+
 // src/internal/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -4734,9 +4771,11 @@ function Footer() {
   const { callbacks } = useLumiaPassportConfig();
   const { address, setSession, setAddress, setStatus, setError, setIsLoading } = useLumiaPassportSession();
   const setPage = useLayoutDataStore((st) => st.setPage);
+  const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const { mutate: disconnect, isPending: isDisconnecting } = useMutation({
     mutationFn: async (disconnectAddress) => {
       if (!disconnectAddress) throw new Error("No address to disconnect");
+      setIsDialogForced(true);
       setError(null);
       setStatus("disconnecting");
       setIsLoading(true);
@@ -4753,12 +4792,16 @@ function Footer() {
       setStatus("idle");
       setIsLoading(false);
       callbacks?.onLumiaPassportDisconnect?.({ address: disconnectAddress, userId: disconnectedUserId });
-      setTimeout(() => setPage("auth" /* AUTH */), 200);
+      setTimeout(() => {
+        setPage("auth" /* AUTH */);
+        setIsDialogForced(false);
+      }, 200);
     },
     onError: (err) => {
       setError(err.message || "An unknown error occurred during sign out");
       setStatus("idle");
       setIsLoading(false);
+      setIsDialogForced(false);
     }
   });
   const { name, logo, logoDataUri } = lumiaBeam;
@@ -4944,35 +4987,6 @@ function BalanceView(props) {
 // src/internal/components/KYC/KycMenu.tsx
 import { ArrowLeft } from "lucide-react";
 
-// src/internal/hooks/useLayoutStore.ts
-import { create as create2 } from "zustand";
-var useLayoutStore = create2((set) => ({
-  colorMode: "light",
-  // layoutView: 'desktop',
-  // deviceType: 'non-touch',
-  isMobileView: false,
-  maxScrollHeight: MAX_CONTENT_HEIGHT,
-  isDialogClosing: false,
-  isDialogOpen: false,
-  isDialogForced: false,
-  dialogTitle: null,
-  dialogDescription: null,
-  dialogContent: null,
-  isSettings: false,
-  setColorMode: (colorMode) => set({ colorMode }),
-  // setLayoutView: (layoutView) => set(() => ({ layoutView })),
-  // setDeviceType: (deviceType) => set(() => ({ deviceType })),
-  setIsMobileView: (isMobileView) => set({ isMobileView }),
-  setMaxScrollHeight: (maxScrollHeight) => set({ maxScrollHeight }),
-  setIsDialogClosing: (isDialogClosing) => set({ isDialogClosing }),
-  setIsDialogOpen: (isDialogOpen) => set({ isDialogOpen }),
-  setIsDialogForced: (isDialogForced) => set({ isDialogForced }),
-  setDialogTitle: (dialogTitle) => set({ dialogTitle }),
-  setDialogDescription: (dialogDescription) => set({ dialogDescription }),
-  setDialogContent: (dialogContent) => set({ dialogContent }),
-  setIsSettings: (isSettings) => set({ isSettings })
-}));
-
 // src/internal/components/KYC/SumsubIframe.tsx
 import { LoaderIcon } from "lucide-react";
 
@@ -5355,7 +5369,7 @@ function Header() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.14.22",
+  version: "1.14.23",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -5484,8 +5498,9 @@ var CONTENT_BG_SETUP = {
   boxShadow: "0px 4px 10px var(--l-pass-shadow-c)"
 };
 var DialogContent = forwardRef3(
-  ({ className, children, hideClose, colorMode, ...props }, ref) => {
+  ({ className, children, colorMode, ...props }, ref) => {
     const isSettings = useLayoutStore((st) => st.isSettings);
+    const isDialogForced = useLayoutStore((st) => st.isDialogForced);
     const setPage = useLayoutDataStore((st) => st.setPage);
     const settingsNotifications = useLayoutDataStore((st) => st.settingsNotifications);
     const { isMobileView, isClosing, style } = useDecideContentStyles();
@@ -5516,7 +5531,7 @@ var DialogContent = forwardRef3(
               ...props,
               children: [
                 children,
-                /* @__PURE__ */ jsxs12(
+                !isDialogForced && /* @__PURE__ */ jsxs12(
                   "div",
                   {
                     className: cn(
@@ -5549,7 +5564,7 @@ var DialogContent = forwardRef3(
                           ]
                         }
                       ),
-                      !hideClose && /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsxs12(Button, { variant: "ghost", size: "icon", className: "w-4 h-4", children: [
+                      /* @__PURE__ */ jsx13(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsxs12(Button, { variant: "ghost", size: "icon", className: "w-4 h-4", children: [
                         /* @__PURE__ */ jsx13(X, { className: "h-4 w-4" }),
                         /* @__PURE__ */ jsx13("span", { className: "sr-only", children: "Close" })
                       ] }) })
@@ -5822,23 +5837,25 @@ function useBackupStatusChanges() {
 
 // src/internal/hooks/useBackupWarning.ts
 import { useEffect as useEffect6, useRef as useRef3 } from "react";
-var WARNING_TIMEOUT_MS = 24e3;
+var WARNING_TIMEOUT_MS = 4500;
 function useBackupWarning() {
-  const config = useLumiaPassportConfig().config;
   const address = useLumiaPassportSession((st) => st.address);
   const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const timeoutRef = useRef3(null);
+  const touchedRef = useRef3(false);
   useEffect6(() => {
+    if (touchedRef.current) return;
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-    const isShown = config.current?.warnings?.backupWarning && !hasServerVault;
-    if (!address || !isShown || page === "keysare-backup" /* KEYSARE_BACKUP */) return;
+    if (!address || !!hasServerVault || page === "keysare-backup" /* KEYSARE_BACKUP */) return;
     timeoutRef.current = setTimeout(() => {
       setPage("keysare-backup" /* KEYSARE_BACKUP */);
+      touchedRef.current = true;
+      timeoutRef.current = null;
     }, WARNING_TIMEOUT_MS);
     return () => {
       if (timeoutRef.current) {
@@ -5903,12 +5920,12 @@ function useDetectMaxScrollHeight() {
 }
 
 // src/internal/hooks/usePageMapper.tsx
-import { useCallback as useCallback17, useEffect as useEffect28 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect29 } from "react";
 
 // src/internal/components/AuthMenu/AuthMenu.tsx
 import { AnimatePresence, motion } from "framer-motion";
 import { AlertTriangle as AlertTriangle2, Loader as Loader5 } from "lucide-react";
-import { useEffect as useEffect11, useMemo, useState as useState7 } from "react";
+import { useEffect as useEffect11, useMemo, useRef as useRef9, useState as useState7 } from "react";
 
 // src/internal/components/Expandable/hooks/useExpandable.ts
 import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef4 } from "react";
@@ -7140,8 +7157,18 @@ function useAuthMenuHandlers() {
   const qc = useQueryClient2();
   const pendingLoginResponseRef = useRef7(null);
   const setPage = useLayoutDataStore((st) => st.setPage);
+  const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const [telegramCleanup, setTelegramCleanup] = useState5(null);
-  const { usePaymaster, setError, setStatus, setSession, setAddress, setRecoveryUserId, setHasServerVault } = useLumiaPassportSession();
+  const {
+    usePaymaster,
+    setError,
+    setStatus,
+    setSession,
+    setAddress,
+    setRecoveryUserId,
+    setHasServerVault,
+    setIsLoading
+  } = useLumiaPassportSession();
   const setStep = useAuthStore((st) => st.setStep);
   const setAlert = useAuthStore((st) => st.setAlert);
   const createSessionWithKeyshare = useCallback7(
@@ -7179,6 +7206,7 @@ function useAuthMenuHandlers() {
     [setStatus, callbacks, usePaymaster]
   );
   const onAuthSuccess = useCallback7(async () => {
+    setIsLoading(true);
     const loginResponse = pendingLoginResponseRef.current;
     if (!loginResponse || !loginResponse.userId) {
       setError("Authentication failed - no login data available");
@@ -7207,10 +7235,6 @@ function useAuthMenuHandlers() {
       );
       setError(null);
       setAlert(null);
-      setSession(sess);
-      setAddress(addr);
-      setStatus("ready");
-      setPage(null);
       try {
         callbacks?.onLumiaPassportConnect?.({ address: addr, session: sess });
         callbacks?.onLumiaPassportAccount?.({ userId, address: addr, session: sess, hasKeyshare: hasServerKeyshare });
@@ -7231,6 +7255,16 @@ function useAuthMenuHandlers() {
       } catch (e) {
         console.warn("[UI-KIT] Vault status check failed:", e);
       }
+      setSession(sess);
+      setAddress(addr);
+      setStatus("ready");
+      if (jwt?.isNewUser) {
+        console.log("[AuthMenu] New user detected - forcing backup flow");
+        setIsDialogForced(true);
+        setPage("keysare-backup" /* KEYSARE_BACKUP */);
+      } else {
+        setPage(null);
+      }
     } catch (error) {
       if (error?.code === "KEYSHARE_RECOVERY_NEEDED") {
         console.warn("[AuthMenu] Keyshare recovery needed for user:", userId);
@@ -7250,6 +7284,8 @@ function useAuthMenuHandlers() {
         });
         setStep("failed");
       }
+    } finally {
+      setIsLoading(false);
     }
   }, [
     // config.projectId,
@@ -7263,6 +7299,7 @@ function useAuthMenuHandlers() {
     setAddress,
     setRecoveryUserId,
     setHasServerVault,
+    setIsDialogForced,
     createSessionWithKeyshare
   ]);
   const checkDisplayNameRequired = useCallback7(async (loginResponse) => {
@@ -7636,20 +7673,28 @@ function VerifyStep(props) {
 import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var AuthMenu = () => {
   const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
-  const [isMenuReady, setIsMenuReady] = useState7(false);
   const mainPageHeight = useLayoutDataStore((st) => st.mainPageHeight);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
   const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
   const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn, checkDisplayNameRequired } = useAuthMenuHandlers();
+  const [isAlertShowReady, setIsAlertShowReady] = useState7(false);
+  const readyTimeout = useRef9(null);
+  useEffect11(() => {
+    if (readyTimeout.current) {
+      clearTimeout(readyTimeout.current);
+      readyTimeout.current = null;
+    }
+    setIsAlertShowReady(false);
+    readyTimeout.current = setTimeout(() => setIsAlertShowReady(true), 750);
+  }, [step]);
   useEffect11(() => {
     setMainPageHeight(DEFAULT_AUTH_MENU_HEIGHT);
-    setTimeout(() => setIsMenuReady(true), 500);
     return () => {
       setStep("signin");
       setEmail("");
       setPasskeyStatus("idle");
       setAlert(null);
-      setIsMenuReady(false);
+      setIsAlertShowReady(false);
     };
   }, []);
   if (!isIframeReady) {
@@ -7703,12 +7748,12 @@ var AuthMenu = () => {
       },
       step
     ) }),
-    isMenuReady && /* --------------------------------------------------------------------------------------------------------------- */
+    isAlertShowReady && /* --------------------------------------------------------------------------------------------------------------- */
     /* -------- EXPANDABLE is designed to adjust its height automatically whenever ANY 1ST LEVEL CHILD changes! ------ */
     /* In order to ensure smooth expand animation consistency do not use 2nd (or 3rd etc) nested conditional rendering */
     /* elements, cause it might outcome Expandable not reacting to deeply nested elements' height changes ------------ */
     /* --------------------------------------------------------------------------------------------------------------- */
-    /* @__PURE__ */ jsx30(Expandable, { isExpanded: !!alert2 && isMenuReady, contentClassName: "px-[var(--l-pass-pd)]", children: /* @__PURE__ */ jsxs24(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
+    /* @__PURE__ */ jsx30(Expandable, { isExpanded: !!alert2 && isAlertShowReady, contentClassName: "px-[var(--l-pass-pd)]", children: /* @__PURE__ */ jsxs24(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
       /* @__PURE__ */ jsx30(AlertTriangle2, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
       /* @__PURE__ */ jsxs24("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
         alert2?.title && /* @__PURE__ */ jsx30("span", { className: "block font-bold leading-5", children: alert2.title }),
@@ -7817,7 +7862,7 @@ function RampnowIcon() {
 // src/internal/components/BuyMenu/binance/Binance.tsx
 import { useMutation as useMutation6, useQuery as useQuery3, useQueryClient as useQueryClient3 } from "@tanstack/react-query";
 import { DollarSign, LoaderIcon as LoaderIcon2 } from "lucide-react";
-import { useEffect as useEffect13, useRef as useRef9 } from "react";
+import { useEffect as useEffect13, useRef as useRef10 } from "react";
 
 // src/internal/components/BuyMenu/components/PaymentSelector.tsx
 import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -7982,7 +8027,7 @@ function Binance(props) {
     queryKey: [QUERY_KEYS3.binancePaymentModes, walletAddress, isLumiaAvailable, srcQueryAmount],
     queryFn: async () => getPaymentMethodsQuery({ totalAmount: String(srcQueryAmount || 1) })
   });
-  const lastLoadedPaymentModes = useRef9([]);
+  const lastLoadedPaymentModes = useRef10([]);
   useEffect13(() => {
     if (!paymentModes?.length) return;
     setPaymentMode(getPayMethodID(paymentModes[0]));
@@ -8303,7 +8348,7 @@ var RAMP_PROVIDERS = {
 var REDIRECT_TIMEOUT_MS = 1500;
 
 // src/internal/components/BuyMenu/useSelectables.ts
-import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useRef as useRef11, useState as useState8 } from "react";
 
 // src/internal/utils/debounce.ts
 function debounce2(func, waitFor) {
@@ -8320,7 +8365,7 @@ var useSelectables = () => {
   const [redirecting, setRedirecting] = useState8(false);
   const [rampProvider, setrRampProvider] = useState8("binance");
   const [minAmount, setMinAmount] = useState8(0);
-  const inputRef = useRef10(null);
+  const inputRef = useRef11(null);
   const [srcQueryAmount, setSrcQueryAmount] = useState8(0);
   const [srcInputAmount, setSrcInputAmount] = useState8(0);
   const [paymentMode, setPaymentMode] = useState8(null);
@@ -8396,7 +8441,7 @@ function BuyMenu() {
 // src/internal/components/KeyshareRestoreMenu/KeyshareRestoreMenu.tsx
 import { useMutation as useMutation10, useQuery as useQuery7, useQueryClient as useQueryClient8 } from "@tanstack/react-query";
 import { AlertCircle as AlertCircle2, CheckCircle2, CloudDownload as CloudDownload2, Loader as Loader8, UserCircle as UserCircle2 } from "lucide-react";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 init_vaultClient();
 
 // src/internal/components/KeyshareRestoreMenu/components/MethodSelector.tsx
@@ -8584,13 +8629,22 @@ function useOnRestoreSuccess() {
 }
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useCreateBackup.ts
-init_iframe_manager();
 import { useMutation as useMutation8, useQueryClient as useQueryClient6 } from "@tanstack/react-query";
+import { useEffect as useEffect17 } from "react";
+init_iframe_manager();
 function useCreateBackup() {
   const qc = useQueryClient6();
   const session = useLumiaPassportSession((st) => st.session);
   const address = useLumiaPassportSession((st) => st.address);
-  const { usePasskey, restorePassword, selectedCloudProvider, setSuccess, setError } = useRestoreStore();
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
+  const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
+  const { usePasskey, restorePassword, selectedCloudProvider, setSuccess, setError, setMethod } = useRestoreStore();
+  useEffect17(() => {
+    if (!hasServerVault) {
+      setMethod("server");
+      setIsDialogForced(true);
+    }
+  }, [hasServerVault, setIsDialogForced, setMethod]);
   const passportUserId = session?.mpcUserId || "";
   const onBackupSuccess = () => console.log("[ConnectWalletButton] Backup created successfully");
   const { mutate: createPasswordBackup, isPending: isPasswordBackupCreating } = useMutation8({
@@ -8620,7 +8674,7 @@ function useCreateBackup() {
             })
           );
         }
-        onBackupSuccess?.();
+        onBackupSuccess();
       } else {
         setError(response.error || "Server backup failed");
       }
@@ -8657,7 +8711,7 @@ function useCreateBackup() {
           })
         );
       }
-      onBackupSuccess?.();
+      onBackupSuccess();
     },
     onError: async (error) => {
       setError(error?.message || "Backup creation failed");
@@ -8697,7 +8751,7 @@ function useCreateBackup() {
           })
         );
       }
-      onBackupSuccess?.();
+      onBackupSuccess();
     },
     onError: async (error) => {
       setError(error?.message || "Backup creation failed");
@@ -8827,7 +8881,7 @@ function useRestoreAccount() {
 }
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useValidateFileBackup.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect18 } from "react";
 function validateRestoreFileFormat(parsedData) {
   if (typeof parsedData !== "object" || parsedData === null) return false;
   const data = parsedData;
@@ -8837,7 +8891,7 @@ function useValidateFileBackup() {
   const restoreFile = useRestoreStore((st) => st.restoreFile);
   const setError = useRestoreStore((st) => st.setError);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!restoreFile) {
       return;
     }
@@ -8919,7 +8973,7 @@ function MethodSelector(props) {
               },
               children: [
                 /* @__PURE__ */ jsx38(Icon2, { className: "w-5 h-5 md:w-8 md:h-8" }),
-                !!data?.lastBackup && /* @__PURE__ */ jsx38("div", { className: "w-6 h-6 absolute -top-2 -right-2 flex items-center justify-center bg-[var(--l-pass-bg)]", children: /* @__PURE__ */ jsx38(PositiveIcon, { className: "w-4 h-4" }) })
+                !!data?.lastBackup && /* @__PURE__ */ jsx38("div", { className: "w-6 h-6 absolute -top-2 -right-2 flex items-center justify-center bg-transparent", children: /* @__PURE__ */ jsx38(PositiveIcon, { className: "w-4 h-4" }) })
               ]
             }
           ),
@@ -8934,8 +8988,8 @@ function MethodSelector(props) {
 import { AlertCircle, FileUp as FileUp2, Upload, User as User2 } from "lucide-react";
 
 // src/internal/components/KeyshareRestoreMenu/components/PasswordPasskey.tsx
-import { Eye, EyeOff, Info, Loader as Loader6 } from "lucide-react";
-import { useRef as useRef11 } from "react";
+import { ChevronRight as ChevronRight2, Eye, EyeOff, Info, Loader as Loader6 } from "lucide-react";
+import { useRef as useRef12 } from "react";
 import { Fragment as Fragment8, jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 function PasswordPasskey(props) {
   const {
@@ -8947,9 +9001,15 @@ function PasswordPasskey(props) {
     isEncryptionMethod,
     actionHandler
   } = props;
-  const actionRef = useRef11(null);
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
+  const actionRef = useRef12(null);
   const { showPassword, restorePassword, usePasskey, error, setRestorePassword, setShowPassword } = useRestoreStore();
   return /* @__PURE__ */ jsxs31(Fragment8, { children: [
+    !hasServerVault && /* @__PURE__ */ jsxs31("span", { className: "block w-full text-[10px] leading-4 px-[var(--l-pass-pd)] truncate", children: [
+      "Use your ",
+      /* @__PURE__ */ jsx39("strong", { children: usePasskey ? "Passkey" : "Password" }),
+      " to complete account security setup."
+    ] }),
     !usePasskey ? /* @__PURE__ */ jsxs31("div", { className: "w-full flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ jsx39(
         Input,
@@ -8991,7 +9051,7 @@ function PasswordPasskey(props) {
           title: actionCaption,
           disabled: isLoading || disabled || error?.includes("Invalid backup file") || !usePasskey && !restorePassword,
           className: "w-full w-12 h-12 flex-shrink-0 rounded-[var(--l-pass-el-bdrs)]",
-          children: isLoading ? /* @__PURE__ */ jsx39(Loader6, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ jsx39(ActionIcon, { className: "h-4 w-4" })
+          children: isLoading ? /* @__PURE__ */ jsx39(Loader6, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ jsx39(ChevronRight2, { className: "h-4 w-4" })
         }
       )
     ] }) : /* @__PURE__ */ jsxs31(
@@ -9010,12 +9070,12 @@ function PasswordPasskey(props) {
         ]
       }
     ),
-    !isEncryptionMethod && /* @__PURE__ */ jsx39(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ jsxs31("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
+    !isEncryptionMethod && !!usePasskey && /* @__PURE__ */ jsx39(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ jsxs31("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ jsx39(Info, { className: "h-4 w-4 flex-shrink-0" }),
       /* @__PURE__ */ jsxs31("span", { className: "text-[var(--l-pass-fg-muted)] block flex-1", children: [
         /* @__PURE__ */ jsx39("span", { className: "block mb-1", children: "Your Backup must be encrypted with a password or a passkey, so only you can decrypt it no matter where backup is stored." }),
-        /* @__PURE__ */ jsxs31("span", { children: [
-          " Strong passwords are recommended. Passkeys are a password-free alternative. ",
+        /* @__PURE__ */ jsxs31("span", { className: "block", children: [
+          " Passkeys are a password-free alternative. ",
           /* @__PURE__ */ jsx39(
             "a",
             {
@@ -9050,7 +9110,7 @@ function NoBackupFound(props) {
     !restoreFile && /* @__PURE__ */ jsxs32(Highlight, { type: "warning", className: "animate-glow-warning flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ jsx40(AlertCircle, { className: "h-4 w-4 flex-0" }),
       /* @__PURE__ */ jsxs32("div", { className: "w-full flex-1 flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx40("span", { className: "block w-full text-xl leading-5 font-bold", children: "No Backup Found" }),
+        /* @__PURE__ */ jsx40("span", { className: "block w-full text-sm leading-4 font-bold", children: "No Backup Found" }),
         /* @__PURE__ */ jsxs32("span", { className: "block w-full text-xs", children: [
           /* @__PURE__ */ jsx40("span", { className: "block mb-1", children: "This device doesn't have access to your wallet keyshare, and no backup was found." }),
           /* @__PURE__ */ jsx40("span", { className: "block w-full", children: "If you're using a different device, please return to the one where you created your account to create a backup, then restore access on this device." })
@@ -9120,7 +9180,7 @@ var Switch = forwardRef4((props, ref) => {
       "aria-checked": inputProps.checked,
       className: cn(
         "block rounded-full w-fit h-7 p-1 outline-none flex-none",
-        inputProps.checked ? "bg-[var(--l-pass-bg-success)]" : "bg-[var(--l-pass-primary)]",
+        inputProps.checked ? "bg-[var(--l-pass-bg-success)]" : "bg-[var(--l-pass-bg-info)]",
         className
       ),
       children: /* @__PURE__ */ jsxs33(
@@ -9142,7 +9202,7 @@ var Switch = forwardRef4((props, ref) => {
                 },
                 style: {
                   left: inputProps.checked ? "0px" : "20px",
-                  color: inputProps.checked ? colorMode === "dark" ? "var(--l-pass-fg-inverted)" : "var(--l-pass-fg)" : "var(--l-pass-fg-inverted)",
+                  color: inputProps.checked ? colorMode === "dark" ? "var(--l-pass-fg-inverted)" : "var(--l-pass-fg)" : "var(--l-pass-fg)",
                   transition: "left 200ms ease"
                 },
                 className: "absolute top-0 px-2 text-xs leading-5 font-semibold min-w-5 select-none",
@@ -9156,7 +9216,10 @@ var Switch = forwardRef4((props, ref) => {
                   left: inputProps.checked ? `${labelW}px` : "0px",
                   transition: "left 200ms ease"
                 },
-                className: "absolute top-0 w-5 h-5 bg-[var(--l-pass-fg-inverted)] rounded-full"
+                className: cn("absolute top-0 w-5 h-5 rounded-full bg-[var(--l-pass-fg)]", {
+                  // 'bg-[var(--l-pass-fg-inverted)]': inputProps.checked,
+                  // 'bg-[var(--l-pass-fg)]': !inputProps.checked
+                })
               }
             )
           ]
@@ -9266,23 +9329,24 @@ function File2(props) {
 import { useQueryClient as useQueryClient7 } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import { ArrowLeft as ArrowLeft7, Download, Key as Key4, Upload as Upload2 } from "lucide-react";
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
 function Server(props) {
   const { isLoading, mode = "restore", serverHandler } = props;
   const qc = useQueryClient7();
   const address = useLumiaPassportSession((st) => st.address);
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const { usePasskey, error, setUsePasskey, setRestorePassword, setShowPassword, setMethod, setError, setSuccess } = useRestoreStore();
   const serverRecoveryStatus = qc.getQueryData([CHECK_BACKUP_QUERY_KEY, address]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (mode === "backup" || !serverRecoveryStatus?.created?.encryptionMethod) return;
     setUsePasskey(serverRecoveryStatus.created.encryptionMethod === "passkey");
   }, [mode, serverRecoveryStatus, setUsePasskey]);
   const isEncryptionMethod = mode === "restore" && !!serverRecoveryStatus?.created?.encryptionMethod;
   return /* @__PURE__ */ jsxs35(Fragment11, { children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs35("div", { className: cn("flex items-center justify-between", { "px-[var(--l-pass-pd)]": !hasServerVault }), children: [
       /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
-        /* @__PURE__ */ jsx43(
+        !!hasServerVault && /* @__PURE__ */ jsx43(
           Button,
           {
             variant: "ghost",
@@ -9307,9 +9371,10 @@ function Server(props) {
         {
           name: "password-passkey-toggle",
           labels: { checked: "Password", unchecked: "Passkey" },
-          disabled: isLoading || !!error,
+          disabled: isLoading,
           checked: !usePasskey,
           onChange: (e) => {
+            if (!!error) setError(null);
             if (!!e.target.checked) setRestorePassword("");
             setUsePasskey(!e.target.checked);
           }
@@ -9344,7 +9409,7 @@ function Server(props) {
 // src/internal/components/KeyshareRestoreMenu/methods/Cloud.tsx
 import { useQuery as useQuery6 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft8, CloudDownload, CloudUpload, Loader as Loader7 } from "lucide-react";
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect20 } from "react";
 
 // src/internal/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -9492,7 +9557,7 @@ function Cloud2(props) {
       return availableProviders.map((p) => ({ id: p.id, name: p.name, available: p.isAvailable() }));
     }
   });
-  useEffect19(() => {
+  useEffect20(() => {
     if (isCloudProvidersLoading) return;
     if (!!cloudProvidersError) {
       console.error("[KeyshareBackup] Failed to load cloud providers:", cloudProvidersError);
@@ -9576,7 +9641,7 @@ var KeyshareRestoreMenu = () => {
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const setPage = useLayoutDataStore((st) => st.setPage);
-  useEffect20(() => setIsDialogForced(true), []);
+  useEffect21(() => setIsDialogForced(true), []);
   useCheckBackupAvailability();
   const {
     method: currentRestoreMethod,
@@ -9707,8 +9772,8 @@ var KeyshareRestoreMenu = () => {
 
 // src/internal/components/KeyshareRestoreMenu/KeyshareBackupMenu.tsx
 import { useQuery as useQuery8 } from "@tanstack/react-query";
-import { AlertCircle as AlertCircle3, ArrowLeft as ArrowLeft9, CheckCircle2 as CheckCircle22 } from "lucide-react";
-import { useEffect as useEffect21 } from "react";
+import { AlertCircle as AlertCircle3, ArrowLeft as ArrowLeft9, CheckCircle2 as CheckCircle22, LockIcon } from "lucide-react";
+import { useEffect as useEffect22 } from "react";
 init_vaultClient();
 import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 var COMPONENTS = {
@@ -9718,10 +9783,10 @@ var COMPONENTS = {
 };
 function KeyshareBackupMenu() {
   const address = useLumiaPassportSession((st) => st.address);
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
-  useEffect21(() => setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT), [setMainPageHeight]);
   const {
     method: currentBackupMethod,
     error,
@@ -9732,8 +9797,15 @@ function KeyshareBackupMenu() {
     setRestorePassword,
     setRestoreFile,
     setShowPassword,
-    setUsePasskey
+    setUsePasskey,
+    setMethod
   } = useRestoreStore();
+  useEffect22(() => {
+    setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT);
+    return () => {
+      setMethod(null);
+    };
+  }, []);
   const { data: serverRecoveryStatus } = useQuery8({
     retry: false,
     queryKey: [CHECK_BACKUP_QUERY_KEY, address],
@@ -9755,7 +9827,11 @@ function KeyshareBackupMenu() {
       style: { "--l-pass-scrollbar-mah": `${maxScrollHeight}px` },
       className: "list-scrollbar-y w-full",
       children: /* @__PURE__ */ jsxs39(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)] p-[var(--l-pass-pd)]", children: [
-        !currentBackupMethod && /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
+        !hasServerVault && /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
+          /* @__PURE__ */ jsx47(LockIcon, { className: "w-6 h-6" }),
+          /* @__PURE__ */ jsx47("span", { className: "font-bold text-xl leading-6", children: "Secure Account" })
+        ] }),
+        !!hasServerVault && !currentBackupMethod && /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
           /* @__PURE__ */ jsx47(
             Button,
             {
@@ -9770,14 +9846,15 @@ function KeyshareBackupMenu() {
                 setUsePasskey(false);
                 setError(null);
                 setSuccess(null);
+                setMethod(null);
                 setPage("settings" /* SETTINGS */);
               },
               children: /* @__PURE__ */ jsx47(ArrowLeft9, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ jsx47("span", { className: "text-xl font-semibold", children: "Create Backup" })
+          /* @__PURE__ */ jsx47("span", { className: "text-xl font-semibold leading-8", children: "Create Backup" })
         ] }),
-        !currentBackupMethod && /* @__PURE__ */ jsx47(MethodSelector, { mode: "backup", serverRecoveryStatus }),
+        !!hasServerVault && !currentBackupMethod && /* @__PURE__ */ jsx47(MethodSelector, { mode: "backup", serverRecoveryStatus }),
         !!currentBackupMethod && /* @__PURE__ */ jsx47(Fragment14, { children: /* @__PURE__ */ jsx47(
           BackupComponent,
           {
@@ -9812,8 +9889,8 @@ function KeyshareBackupMenu() {
 }
 
 // src/internal/components/MainMenu/MainMenu.tsx
-import { ChevronLeft, ChevronRight as ChevronRight2, DollarSign as DollarSign3, Wallet2 as Wallet23 } from "lucide-react";
-import { useEffect as useEffect22 } from "react";
+import { ChevronLeft, ChevronRight as ChevronRight3, DollarSign as DollarSign3, Wallet2 as Wallet23 } from "lucide-react";
+import { useEffect as useEffect23 } from "react";
 
 // src/internal/components/ManageWalletMenu/hooks/useProvidersList.ts
 init_common();
@@ -9834,7 +9911,7 @@ function useProvidersList() {
 // src/internal/components/MainMenu/MainMenu.tsx
 import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 var MAIN_MENU_BUTTONS = [
-  { id: "send" /* SEND */, label: "Send", icon: ChevronRight2 },
+  { id: "send" /* SEND */, label: "Send", icon: ChevronRight3 },
   { id: "receive" /* RECEIVE */, label: "Receive", icon: ChevronLeft },
   { id: "buy" /* BUY */, label: "Buy", icon: DollarSign3 },
   { id: "assets" /* ASSETS */, label: "Portfolio", icon: Wallet23 }
@@ -9843,7 +9920,7 @@ function MainMenu() {
   const address = useLumiaPassportSession((st) => st.address);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-  useEffect22(() => setMainPageHeight(DEFAULT_MAIN_MENU_HEIGHT), [setMainPageHeight]);
+  useEffect23(() => setMainPageHeight(DEFAULT_MAIN_MENU_HEIGHT), [setMainPageHeight]);
   useProvidersList();
   return /* @__PURE__ */ jsx48("div", { className: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: /* @__PURE__ */ jsx48("div", { className: "w-full grid grid-cols-4 gap-0 md:gap-[var(--l-pass-gap)] py-[10px] md:py-1", children: MAIN_MENU_BUTTONS.map(({ id, label, icon: Icon2 }) => /* @__PURE__ */ jsxs40(
     Button,
@@ -9916,7 +9993,7 @@ init_passkey2();
 init_lumiaPassport();
 init_projectId();
 import { useMutation as useMutation11 } from "@tanstack/react-query";
-import { ChevronRight as ChevronRight3, Loader as Loader9, Mail as Mail4 } from "lucide-react";
+import { ChevronRight as ChevronRight4, Loader as Loader9, Mail as Mail4 } from "lucide-react";
 
 // src/internal/components/ManageWalletMenu/hooks/useStore.ts
 import { create as create5 } from "zustand";
@@ -10029,7 +10106,7 @@ function EmailForm() {
         size: "large",
         disabled: !email || isLoading,
         onClick: () => onSendVerificationCode(),
-        children: isLoading ? /* @__PURE__ */ jsx49(Loader9, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx49(ChevronRight3, { className: "w-4 h-4" })
+        children: isLoading ? /* @__PURE__ */ jsx49(Loader9, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx49(ChevronRight4, { className: "w-4 h-4" })
       }
     )
   ] });
@@ -10282,7 +10359,7 @@ function EmailNotConnectedWarning() {
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkSocial.ts
 import { useQueryClient as useQueryClient12 } from "@tanstack/react-query";
-import React6, { useEffect as useEffect23 } from "react";
+import React6, { useEffect as useEffect24 } from "react";
 init_auth();
 function useLinkSocial() {
   const qc = useQueryClient12();
@@ -10347,7 +10424,7 @@ function useLinkSocial() {
     [config.social?.providers, callbacks]
   );
   const [socialLinkStarted, setSocialLinkStarted] = React6.useState(false);
-  useEffect23(() => {
+  useEffect24(() => {
     const key = providerType?.toLowerCase();
     console.log("[useLinkSocial] Effect triggered:", { key, linkIsLoading, socialLinkStarted, isWalletLinking });
     if (isWalletLinking) {
@@ -10369,7 +10446,7 @@ function useLinkSocial() {
 // src/internal/components/ManageWalletMenu/hooks/useLinkTelegram.ts
 init_telegram2();
 import { useQueryClient as useQueryClient13 } from "@tanstack/react-query";
-import { useCallback as useCallback11, useEffect as useEffect24, useState as useState11 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect25, useState as useState11 } from "react";
 function useLinkTelegram() {
   const {
     config: { current: config },
@@ -10423,7 +10500,7 @@ function useLinkTelegram() {
     }
   }, [config.social?.providers, callbacks]);
   const [telegramLinkStarted, setTelegramLinkStarted] = useState11(false);
-  useEffect24(() => {
+  useEffect25(() => {
     console.log("[useLinkTelegram] Effect triggered:", {
       providerType,
       linkIsLoading,
@@ -10440,7 +10517,7 @@ function useLinkTelegram() {
       handleLinkTelegram();
     }
   }, [providerType, handleLinkTelegram, linkIsLoading, telegramLinkStarted, isWalletLinking]);
-  useEffect24(() => {
+  useEffect25(() => {
     if (providerType !== "telegram") {
       setTelegramLinkStarted(false);
     }
@@ -10759,7 +10836,7 @@ import { useCallback as useCallback13 } from "react";
 // src/internal/hooks/useBlockscoutAssets.ts
 init_lumiaPassport();
 init_base();
-import { useCallback as useCallback12, useMemo as useMemo4, useRef as useRef12 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo4, useRef as useRef13 } from "react";
 import { useQuery as useQuery11 } from "@tanstack/react-query";
 import { useBalance as useBalance2, usePublicClient } from "wagmi";
 import { formatUnits as formatUnits2 } from "viem";
@@ -10907,7 +10984,7 @@ function useBlockscoutAssets(options) {
     [blockscoutApiUrl]
   );
   const publicClient2 = usePublicClient({ chainId: lumiaBeam.id });
-  const lastRefreshRef = useRef12(0);
+  const lastRefreshRef = useRef13(0);
   const {
     data: nativeBalanceData,
     isLoading: nativeLoading,
@@ -11289,6 +11366,7 @@ function PortfolioMenu() {
 init_auth();
 init_keyshare();
 import { useQuery as useQuery13, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
+import dayjs3 from "dayjs";
 import { ArrowLeft as ArrowLeft12, Loader as Loader16, Trash2 as Trash22 } from "lucide-react";
 import { useState as useState14 } from "react";
 init_iframe_manager();
@@ -11565,15 +11643,22 @@ function SecurityMenu() {
               /* @__PURE__ */ jsx61("div", { className: "w-full space-y-1", children: trustedApps.map((app, index) => /* @__PURE__ */ jsxs53(
                 "div",
                 {
-                  className: "text-[10px] leading-tight p-2 rounded flex items-center gap-2 bg-[var(--l-pass-secondary)]",
+                  className: "text-[10px] leading-tight p-2 rounded-[var(--l-pass-el-bdrs)] flex items-center gap-[var(--l-pass-gap)] bg-[var(--l-pass-bg-info)]",
                   children: [
-                    app.appLogo ? /* @__PURE__ */ jsx61("img", { src: app.appLogo, alt: "", className: "w-8 h-8 rounded-md object-cover flex-shrink-0" }) : /* @__PURE__ */ jsx61("div", { className: "w-8 h-8 rounded-md bg-[var(--l-pass-bg-muted)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx61("span", { className: "text-sm", children: "\u{1F517}" }) }),
+                    app.appLogo ? /* @__PURE__ */ jsx61(
+                      "img",
+                      {
+                        src: app.appLogo,
+                        alt: app.appName,
+                        className: "w-8 h-8 rounded-[var(--l-pass-el-bdrs)] object-cover flex-shrink-0"
+                      }
+                    ) : /* @__PURE__ */ jsx61("div", { className: "w-8 h-8 rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-muted)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx61("span", { className: "text-sm", children: "\u{1F517}" }) }),
                     /* @__PURE__ */ jsxs53("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ jsx61("div", { className: "font-medium truncate", children: app.appName || new URL(app.origin).hostname }),
+                      /* @__PURE__ */ jsx61("div", { className: "font-semibold truncate", children: app.appName || new URL(app.origin).hostname }),
                       /* @__PURE__ */ jsx61("div", { className: "text-[var(--l-pass-fg-muted)] truncate", children: new URL(app.origin).hostname }),
-                      /* @__PURE__ */ jsxs53("div", { className: "text-[var(--l-pass-fg-muted)]", children: [
+                      /* @__PURE__ */ jsxs53("div", { className: "text-[var(--l-pass-fg-muted)] truncate", children: [
                         "Trusted: ",
-                        new Date(app.trustedAt).toLocaleDateString()
+                        dayjs3(app.trustedAt).format("MMM D, YYYY HH:mm")
                       ] })
                     ] }),
                     /* @__PURE__ */ jsx61(
@@ -11582,7 +11667,7 @@ function SecurityMenu() {
                         variant: "ghost",
                         size: "icon",
                         title: "Remove from trusted",
-                        className: "text-[var(--l-pass-error)] flex-shrink-0",
+                        className: "text-[var(--l-pass-bg-error)] flex-shrink-0",
                         onClick: () => setAppToRemove({
                           projectId: app.projectId,
                           origin: app.origin,
@@ -11590,7 +11675,7 @@ function SecurityMenu() {
                           appName: app.appName,
                           appLogo: app.appLogo
                         }),
-                        children: /* @__PURE__ */ jsx61(Trash22, { className: "h-3 w-3" })
+                        children: /* @__PURE__ */ jsx61(Trash22, { className: "h-4 w-4" })
                       }
                     )
                   ]
@@ -11640,7 +11725,7 @@ function SecurityMenu() {
 
 // src/internal/components/SendRecieveMenu/SendLumiaMenu.tsx
 import { AlertCircle as AlertCircle5, ArrowLeft as ArrowLeft13, CheckCircle2 as CheckCircle23, Loader as Loader17, Wallet as Wallet3 } from "lucide-react";
-import { useEffect as useEffect25, useState as useState16 } from "react";
+import { useEffect as useEffect26, useState as useState16 } from "react";
 import { isAddress as isAddress2 } from "viem";
 import { useBalance as useBalance4 } from "wagmi";
 
@@ -11889,7 +11974,7 @@ function SendLumiaMenu() {
   const [validationError, setValidationError] = useState16(null);
   const nativeAsset = assets.find((a) => a.type === "native");
   const balance = nativeAsset ? parseFloat(nativeAsset.formattedBalance) : 0;
-  useEffect25(() => {
+  useEffect26(() => {
     if (open) {
       setTxStep("input");
       setValidationError(null);
@@ -12054,7 +12139,7 @@ function SendLumiaMenu() {
 init_clients();
 import { ArrowLeft as ArrowLeft14, CheckCircle2 as CheckCircle24, Copy as Copy2, Loader as Loader18 } from "lucide-react";
 import QRCode from "qrcode";
-import { useCallback as useCallback15, useEffect as useEffect26, useState as useState17 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect27, useState as useState17 } from "react";
 import { Fragment as Fragment22, jsx as jsx63, jsxs as jsxs55 } from "react/jsx-runtime";
 function ReceiveLumiaMenu() {
   const address = useLumiaPassportSession((st) => st.address);
@@ -12064,7 +12149,7 @@ function ReceiveLumiaMenu() {
   const open = page === "receive";
   const [qrCodeUrl, setQrCodeUrl] = useState17("");
   const [copied, setCopied] = useState17(false);
-  useEffect26(() => {
+  useEffect27(() => {
     if (open && address) {
       QRCode.toDataURL(address, {
         width: 200,
@@ -12107,7 +12192,7 @@ function ReceiveLumiaMenu() {
         /* @__PURE__ */ jsx63("div", { className: "flex items-center justify-center p-[var(--l-pass-pd)]", style: { minHeight: "216px" }, children: qrCodeUrl ? /* @__PURE__ */ jsx63("img", { src: qrCodeUrl, alt: "Wallet QR Code", className: "w-48 h-48" }) : /* @__PURE__ */ jsx63(Loader18, { className: "w-5 h-5 animate-spin text-[var(--l-pass-fg-muted)]" }) }),
         /* @__PURE__ */ jsxs55(Highlight, { type: "info", children: [
           /* @__PURE__ */ jsx63("span", { className: "block w-full text-center font-mono text-[10px] break-all mb-2", children: address }),
-          /* @__PURE__ */ jsx63(Button, { onClick: handleCopy, className: "w-full", size: "medium", children: copied ? /* @__PURE__ */ jsxs55(Fragment22, { children: [
+          /* @__PURE__ */ jsx63(Button, { onClick: handleCopy, className: "w-full", size: "large", children: copied ? /* @__PURE__ */ jsxs55(Fragment22, { children: [
             /* @__PURE__ */ jsx63(CheckCircle24, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx63("span", { children: "Copied!" })
           ] }) : /* @__PURE__ */ jsxs55(Fragment22, { children: [
@@ -12123,7 +12208,7 @@ function ReceiveLumiaMenu() {
 
 // src/internal/components/SettingsMenu/SettingsMenu.tsx
 import { ArrowLeft as ArrowLeft15 } from "lucide-react";
-import { useEffect as useEffect27 } from "react";
+import { useEffect as useEffect28 } from "react";
 
 // src/internal/components/SettingsMenu/constants.ts
 import { ArrowLeftRight, DatabaseBackup, LockKeyhole, UsersRound } from "lucide-react";
@@ -12157,7 +12242,7 @@ function SettingsMenu() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const settingsNotifications = useLayoutDataStore((st) => st.settingsNotifications);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-  useEffect27(() => setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT), [setMainPageHeight]);
+  useEffect28(() => setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT), [setMainPageHeight]);
   useProvidersList();
   const navItems = NAV_BUTTONS.map((el) => ({ ...el, onClick: () => setPage(el.id) }));
   const highlightedKeys = settingsNotifications.map((n) => n.target);
@@ -12509,7 +12594,7 @@ async function getTransactionsListQuery(address) {
 }
 
 // src/internal/components/TransactionsMenu/TransactionsGroup.tsx
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight4, Copy as Copy3 } from "lucide-react";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight5, Copy as Copy3 } from "lucide-react";
 
 // src/internal/components/TransactionsMenu/utils.ts
 init_base();
@@ -12594,7 +12679,7 @@ function TransactionsGroup(props) {
       children: [
         /* @__PURE__ */ jsxs58("div", { className: "flex items-center justify-between gap-[var(--l-pass-gap)]", children: [
           /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-1 flex-0 w-fit", children: [
-            parent.direction === "in" ? /* @__PURE__ */ jsx67(ChevronLeft2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx67(ChevronRight4, { className: "w-4 h-4" }),
+            parent.direction === "in" ? /* @__PURE__ */ jsx67(ChevronLeft2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx67(ChevronRight5, { className: "w-4 h-4" }),
             /* @__PURE__ */ jsx67("span", { className: "text-[10px]", children: isIncoming ? "RECEIVED" : "SENT" }),
             parent.status === "ok" ? /* @__PURE__ */ jsx67(PositiveIcon, {}) : /* @__PURE__ */ jsx67(NegativeIcon, {})
           ] }),
@@ -12734,7 +12819,7 @@ function TransactionsMenu() {
           /* @__PURE__ */ jsx68(XCircle2, { className: "w-4 h-4 flex-none" }),
           /* @__PURE__ */ jsx68("span", { className: "block w-full flex-1 text-center text-xs", children: txHistoryResolvedError })
         ] }),
-        !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length === 0 && /* @__PURE__ */ jsx68(Highlight, { type: "warning", children: /* @__PURE__ */ jsx68("span", { children: "No transactions found. Smart account transactions will appear here" }) }),
+        !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length === 0 && /* @__PURE__ */ jsx68(Highlight, { type: "warning", children: /* @__PURE__ */ jsx68("span", { children: "No transactions found." }) }),
         !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length > 0 && /* @__PURE__ */ jsx68("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: txHistoryGroups.map((group) => /* @__PURE__ */ jsx68(
           TransactionsGroup,
           {
@@ -12879,7 +12964,7 @@ function usePageMapper() {
     },
     [setDialogContent, setDialogDescription, setDialogTitle, setIsDialogOpen]
   );
-  useEffect28(() => {
+  useEffect29(() => {
     if (page === null) return closeDialog();
     const pageItem = protectedRoutes[page];
     if (!pageItem) {
@@ -12893,29 +12978,17 @@ function usePageMapper() {
 
 // src/internal/hooks/useSettingsNotifications.ts
 init_auth();
-import { useEffect as useEffect29 } from "react";
+import { useEffect as useEffect30 } from "react";
 var EMAIL_NOT_CONNECTED_NOTIFICATION = {
   id: "email-not-connected",
   target: "manage-wallet" /* MANAGE_WALLET */,
   message: "Email is not connected"
 };
-var BACKUP_IS_NOT_CREATED_NOTIFICATION = {
-  id: "backup-is-not-created",
-  target: "keysare-backup" /* KEYSARE_BACKUP */,
-  message: "Backup is not created"
-};
 function useSettingsNotifications() {
-  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const setSettingsNotifications = useLayoutDataStore((st) => st.setSettingsNotifications);
   const providers = jwtTokenManager2.getProviders();
   const hasEmail = providers.includes("email");
-  useEffect29(() => {
-    setSettingsNotifications({
-      ...BACKUP_IS_NOT_CREATED_NOTIFICATION,
-      status: hasServerVault ? "resolved" : "active"
-    });
-  }, [hasServerVault, setSettingsNotifications]);
-  useEffect29(() => {
+  useEffect30(() => {
     setSettingsNotifications({
       ...EMAIL_NOT_CONNECTED_NOTIFICATION,
       status: hasEmail ? "resolved" : "active"
@@ -12924,7 +12997,7 @@ function useSettingsNotifications() {
 }
 
 // src/internal/hooks/useWalletStatus.ts
-import { useEffect as useEffect30 } from "react";
+import { useEffect as useEffect31 } from "react";
 init_auth();
 function useWalletStatus() {
   const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
@@ -12934,7 +13007,7 @@ function useWalletStatus() {
     config: { current: config },
     callbacks
   } = useLumiaPassportConfig();
-  useEffect30(() => {
+  useEffect31(() => {
     if (!isIframeReady || !config.projectId || !callbacks?.onWalletReady) return;
     const userId = jwtTokenManager2.getUserId();
     const hasKeyshare = jwtTokenManager2.getHasKeyshare();
@@ -12959,11 +13032,12 @@ function LumiaPassportDialog() {
   const config = useLumiaPassportConfig().config;
   const className = config.current?.ui?.dialogClassName;
   const session = useLumiaPassportSession((st) => st.session);
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
   const page = useLayoutDataStore((st) => st.page);
   const mainPageHeight = useLayoutDataStore((st) => st.mainPageHeight);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const { colorMode, isDialogOpen, dialogTitle, dialogDescription, dialogContent, isDialogForced, setIsSettings } = useLayoutStore();
-  useEffect31(() => setIsSettings(!!session), [session, setIsSettings]);
+  useEffect32(() => setIsSettings(!!session), [session, setIsSettings]);
   usePageMapper();
   useAutoConnect();
   useCheckVaultStatus();
@@ -12973,6 +13047,7 @@ function LumiaPassportDialog() {
   useListenIframeAuthEvents();
   useBackupWarning();
   useWalletStatus();
+  const isHeaderHidden = !session || page === "keysare-backup" /* KEYSARE_BACKUP */ && !hasServerVault;
   return /* @__PURE__ */ jsx70(
     Dialog,
     {
@@ -12981,10 +13056,10 @@ function LumiaPassportDialog() {
         if (isDialogForced) return;
         if (!open) setPage(null);
       },
-      children: /* @__PURE__ */ jsxs60(DialogContent, { colorMode, hideClose: isDialogForced, className, children: [
+      children: /* @__PURE__ */ jsxs60(DialogContent, { colorMode, className, children: [
         /* @__PURE__ */ jsx70(VisuallyHidden, { children: /* @__PURE__ */ jsx70(DialogTitle, { children: dialogTitle }) }),
         /* @__PURE__ */ jsx70(DialogDescription, { className: "sr-only", children: dialogDescription }),
-        !!session && /* @__PURE__ */ jsx70(Header, {}),
+        !isHeaderHidden && /* @__PURE__ */ jsx70(Header, {}),
         /* @__PURE__ */ jsx70(AnimatePresence3, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx70(
           motion3.div,
           {
@@ -13049,7 +13124,7 @@ var TssManagerWithRef = React9.forwardRef((props, ref) => {
 init_wallet();
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { useMutation as useMutation15, useQueryClient as useQueryClient19 } from "@tanstack/react-query";
-import React10, { useCallback as useCallback19, useEffect as useEffect32 } from "react";
+import React10, { useCallback as useCallback19, useEffect as useEffect33 } from "react";
 import { useAccount, useDisconnect, useSignMessage } from "wagmi";
 function WalletConnectHandler() {
   const qc = useQueryClient19();
@@ -13094,7 +13169,7 @@ function WalletConnectHandler() {
     [qc, passportWalletAddress, callbacks, setProviderType, setPage, setIsWalletLinking]
   );
   const [hasStartedLinking, setHasStartedLinking] = React10.useState(false);
-  useEffect32(() => {
+  useEffect33(() => {
     if (isWalletLinking && !hasStartedLinking) {
       setHasStartedLinking(true);
       setProviderType(null);
@@ -13114,7 +13189,7 @@ function WalletConnectHandler() {
       if (isConnected) disconnect();
     }
   }, [isWalletLinking, hasStartedLinking, isConnected, openConnectModal, disconnect, setPage, setProviderType]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (hasStartedLinking && !connectModalOpen && !isConnected && isWalletLinking) {
       console.log("[WalletConnectHandler] Modal closed without connecting");
       onLinkingComplete(false);
@@ -13190,7 +13265,7 @@ function WalletConnectHandler() {
       setPage(passportWalletAddress ? "manage-wallet" /* MANAGE_WALLET */ : "auth" /* AUTH */);
     }
   });
-  useEffect32(() => {
+  useEffect33(() => {
     if (!!chain?.id && isConnected && walletAddress && isWalletLinking && hasStartedLinking) {
       console.log("[WalletConnectHandler] handleWalletSign triggered");
       handleWalletSign({ chainId: chain.id, signingWalletAddress: walletAddress });
@@ -13283,8 +13358,8 @@ function LumiaPassportProvider(props) {
   const { children, projectId, initialConfig = {}, callbacks } = props;
   const setIsIframeReady = useLumiaPassportSession((st) => st.setIsIframeReady);
   const setWalletReadyStatus = useLumiaPassportSession((st) => st.setWalletReadyStatus);
-  useEffect33(() => notifyNoProjetctId(projectId), [projectId]);
-  const config = useRef13({ projectId, ...DEFAULT_LUMIA_PASSPORT_CONFIG });
+  useEffect34(() => notifyNoProjetctId(projectId), [projectId]);
+  const config = useRef14({ projectId, ...DEFAULT_LUMIA_PASSPORT_CONFIG });
   const updateConfig = useCallback20((updates) => {
     const prev = config.current;
     const next = { ...prev };
@@ -13320,7 +13395,7 @@ function LumiaPassportProvider(props) {
     }
     config.current = next;
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     if (typeof window === "undefined" || !projectId) return;
     const mergedConfig = merge2(DEFAULT_LUMIA_PASSPORT_CONFIG, initialConfig);
     updateConfig(mergedConfig);
@@ -13376,7 +13451,7 @@ var useLumiaPassportConfig = () => {
 
 // src/components/ConnectWalletButton.tsx
 import { Cloud as Cloud5, Laptop as Laptop2, Loader as Loader20, Shield as Shield2 } from "lucide-react";
-import { useEffect as useEffect34, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect35, useMemo as useMemo6 } from "react";
 init_auth();
 import { Fragment as Fragment25, jsx as jsx74, jsxs as jsxs62 } from "react/jsx-runtime";
 function getFormattedStatus(label, status, showStatus) {
@@ -13397,7 +13472,7 @@ function ConnectWalletButton(props) {
   const colorMode = useLayoutStore((st) => st.colorMode);
   const { session, address, hasServerVault, isLoading, isIframeReady, status, setUsePaymaster } = useLumiaPassportSession();
   const connectButtonLabel = getFormattedStatus(label || "Connect", status, isIframeReady);
-  useEffect34(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
+  useEffect35(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
   const avatar = jwtTokenManager2.getAvatar();
   const displayName = jwtTokenManager2.getDisplayName();
   const indicators = useMemo6(() => {
@@ -13593,7 +13668,7 @@ function useLumiaPassportOpen() {
 }
 
 // src/hooks/useLumiaPassportColorMode.ts
-import { useCallback as useCallback22, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect36 } from "react";
 function useLumiaPassportColorMode() {
   const {
     config: { current: config }
@@ -13608,7 +13683,7 @@ function useLumiaPassportColorMode() {
     },
     [handleStoreColorMode]
   );
-  useEffect35(() => {
+  useEffect36(() => {
     let targetColorMode = localStorage.getItem(LOCAL_COLOR_MODE_KEY);
     if (!targetColorMode && !preferedColorMode) {
       const systemMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -14337,13 +14412,13 @@ var Hash = ({
 
 // src/internal/components/TransactionsMenu/TransactionsList.tsx
 init_base();
-import { useEffect as useEffect37, useState as useState22 } from "react";
+import { useEffect as useEffect38, useState as useState22 } from "react";
 import { jsx as jsx81, jsxs as jsxs66 } from "react/jsx-runtime";
 var TransactionsList = ({ address, itemsCount = 10 }) => {
   const [transactions, setTransactions] = useState22([]);
   const [loading, setLoading] = useState22(true);
   const [error, setError] = useState22(null);
-  useEffect37(() => {
+  useEffect38(() => {
     const fetchTransactions = async () => {
       try {
         setLoading(true);