@lumiapassport/ui-kit 1.14.22 → 1.14.23

package/dist/index.cjs

@@ -3822,28 +3822,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 (0, import_bundler.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)}`;
@@ -4007,28 +4011,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 (0, import_bundler.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)}`;
@@ -4444,12 +4452,12 @@ var built_default = '.container{width:100%}@media (min-width:640px){.container{m
 // src/context/LumiaPassportContext.tsx
 var import_error_tracking4 = require("@lumiapassport/core/internal/error-tracking");
 var import_lodash_es4 = require("lodash-es");
-var import_react60 = require("react");
+var import_react61 = require("react");
 init_lumiaPassport();
 init_iframe_manager();
 
 // src/context/LumiaPassportSessionContext.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_zustand6 = require("zustand");
 
 // src/internal/components/BalanceFeedProvider/BalanceFeedProvider.tsx
@@ -4627,7 +4635,7 @@ function BalanceFeedProvider() {
 
 // src/internal/components/Dialog/LumiaPassportDialog.tsx
 var import_framer_motion3 = require("framer-motion");
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/internal/components/Footer/Footer.tsx
 var import_react_query2 = require("@tanstack/react-query");
@@ -4688,6 +4696,35 @@ var LumiaLogo = (0, import_react2.forwardRef)(({ size = 24, className = "" }, re
 init_auth();
 init_base();
 
+// src/internal/hooks/useLayoutStore.ts
+var import_zustand2 = require("zustand");
+var useLayoutStore = (0, import_zustand2.create)((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
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -4780,9 +4817,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 } = (0, import_react_query2.useMutation)({
     mutationFn: async (disconnectAddress) => {
       if (!disconnectAddress) throw new Error("No address to disconnect");
+      setIsDialogForced(true);
       setError(null);
       setStatus("disconnecting");
       setIsLoading(true);
@@ -4799,12 +4838,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;
@@ -4990,35 +5033,6 @@ function BalanceView(props) {
 // src/internal/components/KYC/KycMenu.tsx
 var import_lucide_react5 = require("lucide-react");
 
-// src/internal/hooks/useLayoutStore.ts
-var import_zustand2 = require("zustand");
-var useLayoutStore = (0, import_zustand2.create)((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
 var import_lucide_react4 = require("lucide-react");
 
@@ -5401,7 +5415,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",
@@ -5530,8 +5544,9 @@ var CONTENT_BG_SETUP = {
   boxShadow: "0px 4px 10px var(--l-pass-shadow-c)"
 };
 var DialogContent = (0, import_react6.forwardRef)(
-  ({ 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();
@@ -5562,7 +5577,7 @@ var DialogContent = (0, import_react6.forwardRef)(
               ...props,
               children: [
                 children,
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                !isDialogForced && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                   "div",
                   {
                     className: cn(
@@ -5595,7 +5610,7 @@ var DialogContent = (0, import_react6.forwardRef)(
                           ]
                         }
                       ),
-                      !hideClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button, { variant: "ghost", size: "icon", className: "w-4 h-4", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button, { variant: "ghost", size: "icon", className: "w-4 h-4", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.X, { className: "h-4 w-4" }),
                         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: "Close" })
                       ] }) })
@@ -5868,23 +5883,25 @@ function useBackupStatusChanges() {
 
 // src/internal/hooks/useBackupWarning.ts
 var import_react10 = require("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 = (0, import_react10.useRef)(null);
+  const touchedRef = (0, import_react10.useRef)(false);
   (0, import_react10.useEffect)(() => {
+    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) {
@@ -5949,7 +5966,7 @@ function useDetectMaxScrollHeight() {
 }
 
 // src/internal/hooks/usePageMapper.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/internal/components/AuthMenu/AuthMenu.tsx
 var import_framer_motion = require("framer-motion");
@@ -7186,8 +7203,18 @@ function useAuthMenuHandlers() {
   const qc = (0, import_react_query8.useQueryClient)();
   const pendingLoginResponseRef = (0, import_react20.useRef)(null);
   const setPage = useLayoutDataStore((st) => st.setPage);
+  const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const [telegramCleanup, setTelegramCleanup] = (0, import_react20.useState)(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 = (0, import_react20.useCallback)(
@@ -7225,6 +7252,7 @@ function useAuthMenuHandlers() {
     [setStatus, callbacks, usePaymaster]
   );
   const onAuthSuccess = (0, import_react20.useCallback)(async () => {
+    setIsLoading(true);
     const loginResponse = pendingLoginResponseRef.current;
     if (!loginResponse || !loginResponse.userId) {
       setError("Authentication failed - no login data available");
@@ -7253,10 +7281,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 });
@@ -7277,6 +7301,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);
@@ -7296,6 +7330,8 @@ function useAuthMenuHandlers() {
         });
         setStep("failed");
       }
+    } finally {
+      setIsLoading(false);
     }
   }, [
     // config.projectId,
@@ -7309,6 +7345,7 @@ function useAuthMenuHandlers() {
     setAddress,
     setRecoveryUserId,
     setHasServerVault,
+    setIsDialogForced,
     createSessionWithKeyshare
   ]);
   const checkDisplayNameRequired = (0, import_react20.useCallback)(async (loginResponse) => {
@@ -7682,20 +7719,28 @@ function VerifyStep(props) {
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var AuthMenu = () => {
   const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
-  const [isMenuReady, setIsMenuReady] = (0, import_react22.useState)(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] = (0, import_react22.useState)(false);
+  const readyTimeout = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    if (readyTimeout.current) {
+      clearTimeout(readyTimeout.current);
+      readyTimeout.current = null;
+    }
+    setIsAlertShowReady(false);
+    readyTimeout.current = setTimeout(() => setIsAlertShowReady(true), 750);
+  }, [step]);
   (0, import_react22.useEffect)(() => {
     setMainPageHeight(DEFAULT_AUTH_MENU_HEIGHT);
-    setTimeout(() => setIsMenuReady(true), 500);
     return () => {
       setStep("signin");
       setEmail("");
       setPasskeyStatus("idle");
       setAlert(null);
-      setIsMenuReady(false);
+      setIsAlertShowReady(false);
     };
   }, []);
   if (!isIframeReady) {
@@ -7749,12 +7794,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__ */ (0, import_jsx_runtime30.jsx)(Expandable, { isExpanded: !!alert2 && isMenuReady, contentClassName: "px-[var(--l-pass-pd)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Expandable, { isExpanded: !!alert2 && isAlertShowReady, contentClassName: "px-[var(--l-pass-pd)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)] ", children: [
       /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react15.AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
       /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
         alert2?.title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "block font-bold leading-5", children: alert2.title }),
@@ -8442,12 +8487,12 @@ function BuyMenu() {
 // src/internal/components/KeyshareRestoreMenu/KeyshareRestoreMenu.tsx
 var import_react_query17 = require("@tanstack/react-query");
 var import_lucide_react26 = require("lucide-react");
-var import_react35 = require("react");
+var import_react36 = require("react");
 init_vaultClient();
 
 // src/internal/components/KeyshareRestoreMenu/components/MethodSelector.tsx
 var import_lucide_react19 = require("lucide-react");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useCheckBackupAvailability.ts
 var import_react_query12 = require("@tanstack/react-query");
@@ -8631,12 +8676,21 @@ function useOnRestoreSuccess() {
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useCreateBackup.ts
 var import_react_query13 = require("@tanstack/react-query");
+var import_react29 = require("react");
 init_iframe_manager();
 function useCreateBackup() {
   const qc = (0, import_react_query13.useQueryClient)();
   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();
+  (0, import_react29.useEffect)(() => {
+    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 } = (0, import_react_query13.useMutation)({
@@ -8666,7 +8720,7 @@ function useCreateBackup() {
             })
           );
         }
-        onBackupSuccess?.();
+        onBackupSuccess();
       } else {
         setError(response.error || "Server backup failed");
       }
@@ -8703,7 +8757,7 @@ function useCreateBackup() {
           })
         );
       }
-      onBackupSuccess?.();
+      onBackupSuccess();
     },
     onError: async (error) => {
       setError(error?.message || "Backup creation failed");
@@ -8743,7 +8797,7 @@ function useCreateBackup() {
           })
         );
       }
-      onBackupSuccess?.();
+      onBackupSuccess();
     },
     onError: async (error) => {
       setError(error?.message || "Backup creation failed");
@@ -8873,7 +8927,7 @@ function useRestoreAccount() {
 }
 
 // src/internal/components/KeyshareRestoreMenu/hooks/useValidateFileBackup.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function validateRestoreFileFormat(parsedData) {
   if (typeof parsedData !== "object" || parsedData === null) return false;
   const data = parsedData;
@@ -8883,7 +8937,7 @@ function useValidateFileBackup() {
   const restoreFile = useRestoreStore((st) => st.restoreFile);
   const setError = useRestoreStore((st) => st.setError);
   const setUsePasskey = useRestoreStore((st) => st.setUsePasskey);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!restoreFile) {
       return;
     }
@@ -8923,7 +8977,7 @@ function MethodSelector(props) {
     setError,
     setSuccess
   } = useRestoreStore();
-  const recoveryRenderMethods = (0, import_react30.useMemo)(() => {
+  const recoveryRenderMethods = (0, import_react31.useMemo)(() => {
     const methodsWithBackupData = getRecoveryRenderMethods(mode).map((mt) => {
       let data = null;
       switch (true) {
@@ -8938,7 +8992,7 @@ function MethodSelector(props) {
     return methodsWithBackupData;
   }, [mode, serverRecoveryStatus]);
   if (!!selectedRecoveryMethod) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react30.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react31.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "block w-full text-xs font-semibold text-center leading-8 text-[var(--l-pass-fg-muted)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "leading-8", children: mode === "restore" ? "Choose restore method" : "Create or Update Backup via" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
@@ -8965,7 +9019,7 @@ function MethodSelector(props) {
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Icon2, { className: "w-5 h-5 md:w-8 md:h-8" }),
-                !!data?.lastBackup && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-6 h-6 absolute -top-2 -right-2 flex items-center justify-center bg-[var(--l-pass-bg)]", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PositiveIcon, { className: "w-4 h-4" }) })
+                !!data?.lastBackup && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-6 h-6 absolute -top-2 -right-2 flex items-center justify-center bg-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PositiveIcon, { className: "w-4 h-4" }) })
               ]
             }
           ),
@@ -8981,7 +9035,7 @@ var import_lucide_react21 = require("lucide-react");
 
 // src/internal/components/KeyshareRestoreMenu/components/PasswordPasskey.tsx
 var import_lucide_react20 = require("lucide-react");
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function PasswordPasskey(props) {
   const {
@@ -8993,9 +9047,15 @@ function PasswordPasskey(props) {
     isEncryptionMethod,
     actionHandler
   } = props;
-  const actionRef = (0, import_react31.useRef)(null);
+  const hasServerVault = useLumiaPassportSession((st) => st.hasServerVault);
+  const actionRef = (0, import_react32.useRef)(null);
   const { showPassword, restorePassword, usePasskey, error, setRestorePassword, setShowPassword } = useRestoreStore();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    !hasServerVault && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block w-full text-[10px] leading-4 px-[var(--l-pass-pd)] truncate", children: [
+      "Use your ",
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("strong", { children: usePasskey ? "Passkey" : "Password" }),
+      " to complete account security setup."
+    ] }),
     !usePasskey ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Input,
@@ -9037,7 +9097,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__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Loader, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ActionIcon, { className: "h-4 w-4" })
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Loader, { className: "animate-spin h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.ChevronRight, { className: "h-4 w-4" })
         }
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
@@ -9056,12 +9116,12 @@ function PasswordPasskey(props) {
         ]
       }
     ),
-    !isEncryptionMethod && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
+    !isEncryptionMethod && !!usePasskey && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Highlight, { type: "info", className: "w-full flex flex-col gap-[var(--l-pass-gap)] text-[10px]", children: mode === "backup" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react20.Info, { className: "h-4 w-4 flex-shrink-0" }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "text-[var(--l-pass-fg-muted)] block flex-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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__ */ (0, import_jsx_runtime39.jsxs)("span", { children: [
-          " Strong passwords are recommended. Passkeys are a password-free alternative. ",
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "block", children: [
+          " Passkeys are a password-free alternative. ",
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             "a",
             {
@@ -9096,7 +9156,7 @@ function NoBackupFound(props) {
     !restoreFile && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Highlight, { type: "warning", className: "animate-glow-warning flex gap-[var(--l-pass-gap)]", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react21.AlertCircle, { className: "h-4 w-4 flex-0" }),
       /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "w-full flex-1 flex flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block w-full text-xl leading-5 font-bold", children: "No Backup Found" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block w-full text-sm leading-4 font-bold", children: "No Backup Found" }),
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "block w-full text-xs", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "block mb-1", children: "This device doesn't have access to your wallet keyshare, and no backup was found." }),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("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." })
@@ -9153,12 +9213,12 @@ function NoBackupFound(props) {
 var import_lucide_react22 = require("lucide-react");
 
 // src/internal/components/ui/switch.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var Switch = (0, import_react32.forwardRef)((props, ref) => {
+var Switch = (0, import_react33.forwardRef)((props, ref) => {
   const { className, labels, ...inputProps } = props;
   const colorMode = useLayoutStore((st) => st.colorMode);
-  const [labelW, setLabelW] = (0, import_react32.useState)(0);
+  const [labelW, setLabelW] = (0, import_react33.useState)(0);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
@@ -9166,7 +9226,7 @@ var Switch = (0, import_react32.forwardRef)((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__ */ (0, import_jsx_runtime41.jsxs)(
@@ -9188,7 +9248,7 @@ var Switch = (0, import_react32.forwardRef)((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",
@@ -9202,7 +9262,10 @@ var Switch = (0, import_react32.forwardRef)((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
+                })
               }
             )
           ]
@@ -9312,23 +9375,24 @@ function File2(props) {
 var import_react_query15 = require("@tanstack/react-query");
 var import_dayjs = __toESM(require("dayjs"), 1);
 var import_lucide_react23 = require("lucide-react");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 function Server(props) {
   const { isLoading, mode = "restore", serverHandler } = props;
   const qc = (0, import_react_query15.useQueryClient)();
   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]);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (mode === "backup" || !serverRecoveryStatus?.created?.encryptionMethod) return;
     setUsePasskey(serverRecoveryStatus.created.encryptionMethod === "passkey");
   }, [mode, serverRecoveryStatus, setUsePasskey]);
   const isEncryptionMethod = mode === "restore" && !!serverRecoveryStatus?.created?.encryptionMethod;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("flex items-center justify-between", { "px-[var(--l-pass-pd)]": !hasServerVault }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        !!hasServerVault && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           Button,
           {
             variant: "ghost",
@@ -9353,9 +9417,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);
           }
@@ -9390,7 +9455,7 @@ function Server(props) {
 // src/internal/components/KeyshareRestoreMenu/methods/Cloud.tsx
 var import_react_query16 = require("@tanstack/react-query");
 var import_lucide_react25 = require("lucide-react");
-var import_react34 = require("react");
+var import_react35 = require("react");
 
 // src/internal/components/ui/select.tsx
 var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
@@ -9538,7 +9603,7 @@ function Cloud2(props) {
       return availableProviders.map((p) => ({ id: p.id, name: p.name, available: p.isAvailable() }));
     }
   });
-  (0, import_react34.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (isCloudProvidersLoading) return;
     if (!!cloudProvidersError) {
       console.error("[KeyshareBackup] Failed to load cloud providers:", cloudProvidersError);
@@ -9622,7 +9687,7 @@ var KeyshareRestoreMenu = () => {
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const setPage = useLayoutDataStore((st) => st.setPage);
-  (0, import_react35.useEffect)(() => setIsDialogForced(true), []);
+  (0, import_react36.useEffect)(() => setIsDialogForced(true), []);
   useCheckBackupAvailability();
   const {
     method: currentRestoreMethod,
@@ -9754,7 +9819,7 @@ var KeyshareRestoreMenu = () => {
 // src/internal/components/KeyshareRestoreMenu/KeyshareBackupMenu.tsx
 var import_react_query18 = require("@tanstack/react-query");
 var import_lucide_react27 = require("lucide-react");
-var import_react36 = require("react");
+var import_react37 = require("react");
 init_vaultClient();
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var COMPONENTS = {
@@ -9764,10 +9829,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);
-  (0, import_react36.useEffect)(() => setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT), [setMainPageHeight]);
   const {
     method: currentBackupMethod,
     error,
@@ -9778,8 +9843,15 @@ function KeyshareBackupMenu() {
     setRestorePassword,
     setRestoreFile,
     setShowPassword,
-    setUsePasskey
+    setUsePasskey,
+    setMethod
   } = useRestoreStore();
+  (0, import_react37.useEffect)(() => {
+    setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT);
+    return () => {
+      setMethod(null);
+    };
+  }, []);
   const { data: serverRecoveryStatus } = (0, import_react_query18.useQuery)({
     retry: false,
     queryKey: [CHECK_BACKUP_QUERY_KEY, address],
@@ -9801,7 +9873,11 @@ function KeyshareBackupMenu() {
       style: { "--l-pass-scrollbar-mah": `${maxScrollHeight}px` },
       className: "list-scrollbar-y w-full",
       children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)] p-[var(--l-pass-pd)]", children: [
-        !currentBackupMethod && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
+        !hasServerVault && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.LockIcon, { className: "w-6 h-6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "font-bold text-xl leading-6", children: "Secure Account" })
+        ] }),
+        !!hasServerVault && !currentBackupMethod && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-[var(--l-pass-gap)]", children: [
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             Button,
             {
@@ -9816,14 +9892,15 @@ function KeyshareBackupMenu() {
                 setUsePasskey(false);
                 setError(null);
                 setSuccess(null);
+                setMethod(null);
                 setPage("settings" /* SETTINGS */);
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react27.ArrowLeft, { className: "h-4 w-4" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl font-semibold", children: "Create Backup" })
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xl font-semibold leading-8", children: "Create Backup" })
         ] }),
-        !currentBackupMethod && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MethodSelector, { mode: "backup", serverRecoveryStatus }),
+        !!hasServerVault && !currentBackupMethod && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(MethodSelector, { mode: "backup", serverRecoveryStatus }),
         !!currentBackupMethod && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_jsx_runtime47.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           BackupComponent,
           {
@@ -9859,7 +9936,7 @@ function KeyshareBackupMenu() {
 
 // src/internal/components/MainMenu/MainMenu.tsx
 var import_lucide_react28 = require("lucide-react");
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/internal/components/ManageWalletMenu/hooks/useProvidersList.ts
 var import_react_query19 = require("@tanstack/react-query");
@@ -9889,7 +9966,7 @@ function MainMenu() {
   const address = useLumiaPassportSession((st) => st.address);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-  (0, import_react37.useEffect)(() => setMainPageHeight(DEFAULT_MAIN_MENU_HEIGHT), [setMainPageHeight]);
+  (0, import_react38.useEffect)(() => setMainPageHeight(DEFAULT_MAIN_MENU_HEIGHT), [setMainPageHeight]);
   useProvidersList();
   return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsxs)(
     Button,
@@ -9911,11 +9988,11 @@ function MainMenu() {
 // src/internal/components/ManageWalletMenu/ManageWallet.tsx
 var import_lodash_es3 = require("lodash-es");
 var import_lucide_react32 = require("lucide-react");
-var import_react41 = require("react");
+var import_react42 = require("react");
 
 // src/modules/linkedProfiles.ts
 var import_react_query20 = require("@tanstack/react-query");
-var import_react38 = require("react");
+var import_react39 = require("react");
 init_auth();
 init_common();
 init_types();
@@ -9948,7 +10025,7 @@ function useLumiaPassportLinkedProfiles() {
     queryFn: getLinkProfilesData
   });
   const { profiles = [], avatar = null } = data || {};
-  const refresh = (0, import_react38.useCallback)(async () => {
+  const refresh = (0, import_react39.useCallback)(async () => {
     await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address] });
   }, [qc, address]);
   return { profiles, avatar, isLoading, error, refresh };
@@ -10328,7 +10405,7 @@ function EmailNotConnectedWarning() {
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkSocial.ts
 var import_react_query25 = require("@tanstack/react-query");
-var import_react39 = __toESM(require("react"), 1);
+var import_react40 = __toESM(require("react"), 1);
 init_auth();
 function useLinkSocial() {
   const qc = (0, import_react_query25.useQueryClient)();
@@ -10340,7 +10417,7 @@ function useLinkSocial() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
   const { providerType, linkIsLoading, setProviderType, setAlert, setLinkIsLoading } = useManageWalletStore();
-  const handleLinkSocialProvider = import_react39.default.useCallback(
+  const handleLinkSocialProvider = import_react40.default.useCallback(
     async (providerIdRaw) => {
       const providerKey = providerIdRaw.toLowerCase();
       const normalizedKey = providerKey === "twitter" ? "x" : providerKey;
@@ -10392,8 +10469,8 @@ function useLinkSocial() {
     },
     [config.social?.providers, callbacks]
   );
-  const [socialLinkStarted, setSocialLinkStarted] = import_react39.default.useState(false);
-  (0, import_react39.useEffect)(() => {
+  const [socialLinkStarted, setSocialLinkStarted] = import_react40.default.useState(false);
+  (0, import_react40.useEffect)(() => {
     const key = providerType?.toLowerCase();
     console.log("[useLinkSocial] Effect triggered:", { key, linkIsLoading, socialLinkStarted, isWalletLinking });
     if (isWalletLinking) {
@@ -10414,7 +10491,7 @@ function useLinkSocial() {
 
 // src/internal/components/ManageWalletMenu/hooks/useLinkTelegram.ts
 var import_react_query26 = require("@tanstack/react-query");
-var import_react40 = require("react");
+var import_react41 = require("react");
 init_telegram2();
 function useLinkTelegram() {
   const {
@@ -10426,7 +10503,7 @@ function useLinkTelegram() {
   const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
   const { providerType, linkIsLoading, setLinkIsLoading, setProviderType, setAlert } = useManageWalletStore();
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const handleLinkTelegram = (0, import_react40.useCallback)(async () => {
+  const handleLinkTelegram = (0, import_react41.useCallback)(async () => {
     try {
       setLinkIsLoading(true);
       setAlert(null);
@@ -10468,8 +10545,8 @@ function useLinkTelegram() {
       setLinkIsLoading(false);
     }
   }, [config.social?.providers, callbacks]);
-  const [telegramLinkStarted, setTelegramLinkStarted] = (0, import_react40.useState)(false);
-  (0, import_react40.useEffect)(() => {
+  const [telegramLinkStarted, setTelegramLinkStarted] = (0, import_react41.useState)(false);
+  (0, import_react41.useEffect)(() => {
     console.log("[useLinkTelegram] Effect triggered:", {
       providerType,
       linkIsLoading,
@@ -10486,7 +10563,7 @@ function useLinkTelegram() {
       handleLinkTelegram();
     }
   }, [providerType, handleLinkTelegram, linkIsLoading, telegramLinkStarted, isWalletLinking]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (providerType !== "telegram") {
       setTelegramLinkStarted(false);
     }
@@ -10595,7 +10672,7 @@ function ManageWalletMenu() {
   } = useManageWalletStore();
   const configuredProviders = getConfiguredProviders(config);
   const { data: providers = [], isLoading: isProvidersLoading, error: providersError } = useProvidersList();
-  const renderProviders = (0, import_react41.useMemo)(() => {
+  const renderProviders = (0, import_react42.useMemo)(() => {
     const normalizeProviderName = (name) => {
       if (name === "x") return "twitter";
       return name;
@@ -10715,7 +10792,7 @@ function ManageWalletMenu() {
 // src/internal/components/ManageWalletMenu/UnlinkProviderMenu.tsx
 var import_react_query27 = require("@tanstack/react-query");
 var import_lucide_react33 = require("lucide-react");
-var import_react42 = require("react");
+var import_react43 = require("react");
 init_auth();
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function UnlinkProviderMenu() {
@@ -10724,7 +10801,7 @@ function UnlinkProviderMenu() {
   const { callbacks } = useLumiaPassportConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const { confirmUnlink, setConfirmUnlink, setAlert } = useManageWalletStore();
-  const [confirmInput, setConfirmInput] = (0, import_react42.useState)("");
+  const [confirmInput, setConfirmInput] = (0, import_react43.useState)("");
   const { mutate: handleUnlinkProvider, isPending: isProviderUnlinking } = (0, import_react_query27.useMutation)({
     mutationFn: async () => {
       if (!confirmUnlink) {
@@ -10800,10 +10877,10 @@ function UnlinkProviderMenu() {
 // src/internal/components/PortfolioMenu/PortfolioMenu.tsx
 var import_react_query30 = require("@tanstack/react-query");
 var import_lucide_react35 = require("lucide-react");
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/internal/hooks/useBlockscoutAssets.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_react_query28 = require("@tanstack/react-query");
 var import_wagmi2 = require("wagmi");
 var import_viem5 = require("viem");
@@ -10946,12 +11023,12 @@ function createError(error) {
 function useBlockscoutAssets(options) {
   const { address, enabled = true, detectSecurityTokens = true } = options;
   const blockscoutApiUrl = getBlockscoutApiUrl();
-  const blockscoutClient = (0, import_react43.useMemo)(
+  const blockscoutClient = (0, import_react44.useMemo)(
     () => (0, import_clients2.createBlockscoutClient)({ baseUrl: blockscoutApiUrl }),
     [blockscoutApiUrl]
   );
   const publicClient2 = (0, import_wagmi2.usePublicClient)({ chainId: lumiaBeam.id });
-  const lastRefreshRef = (0, import_react43.useRef)(0);
+  const lastRefreshRef = (0, import_react44.useRef)(0);
   const {
     data: nativeBalanceData,
     isLoading: nativeLoading,
@@ -10991,7 +11068,7 @@ function useBlockscoutAssets(options) {
     retry: 2,
     retryDelay: 1e3
   });
-  const erc20TokenAddresses = (0, import_react43.useMemo)(() => {
+  const erc20TokenAddresses = (0, import_react44.useMemo)(() => {
     if (!tokenBalances) return [];
     return tokenBalances.filter((tb) => tb.token.type === "ERC-20").map((tb) => tb.token.address);
   }, [tokenBalances]);
@@ -11035,7 +11112,7 @@ function useBlockscoutAssets(options) {
     gcTime: BLOCKSCOUT_QUERY_GC_TIME,
     retry: 1
   });
-  const assets = (0, import_react43.useMemo)(() => {
+  const assets = (0, import_react44.useMemo)(() => {
     const result = [];
     if (nativeBalanceData) {
       result.push({
@@ -11071,7 +11148,7 @@ function useBlockscoutAssets(options) {
     }
     return result;
   }, [nativeBalanceData, tokenBalances, nftItems, erc3643Results]);
-  const nativeBalance = (0, import_react43.useMemo)(() => {
+  const nativeBalance = (0, import_react44.useMemo)(() => {
     if (!nativeBalanceData) return null;
     return {
       value: nativeBalanceData.value,
@@ -11079,11 +11156,11 @@ function useBlockscoutAssets(options) {
       symbol: "LUMIA"
     };
   }, [nativeBalanceData]);
-  const error = (0, import_react43.useMemo)(() => {
+  const error = (0, import_react44.useMemo)(() => {
     if (!tokensError) return null;
     return createError(tokensError);
   }, [tokensError]);
-  const refreshBalances = (0, import_react43.useCallback)(async () => {
+  const refreshBalances = (0, import_react44.useCallback)(async () => {
     const now = Date.now();
     if (now - lastRefreshRef.current < BLOCKSCOUT_REFRESH_DEBOUNCE) {
       return;
@@ -11091,7 +11168,7 @@ function useBlockscoutAssets(options) {
     lastRefreshRef.current = now;
     await Promise.all([refetchNative(), refetchTokens(), refetchNfts()]);
   }, [refetchNative, refetchTokens, refetchNfts]);
-  const getTokenBalance = (0, import_react43.useCallback)(
+  const getTokenBalance = (0, import_react44.useCallback)(
     (tokenAddress) => {
       return assets.find((a) => a.address?.toLowerCase() === tokenAddress.toLowerCase()) || null;
     },
@@ -11113,7 +11190,7 @@ function useBlockscoutAssets(options) {
 // src/internal/components/PortfolioMenu/PortfolioItem.tsx
 var import_react_query29 = require("@tanstack/react-query");
 var import_lucide_react34 = require("lucide-react");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_viem6 = require("viem");
 init_base();
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -11151,8 +11228,8 @@ async function getAssetRate2(symbol) {
 var ASSETS_RATES_QUERY_KEY = "lumia-passport-assets-rates-query-key";
 function PortfolioItem(props) {
   const { address, asset, isProjectAsset } = props;
-  const [nftImageError, setNftImageError] = (0, import_react44.useState)(false);
-  const [logoError, setLogoError] = (0, import_react44.useState)(false);
+  const [nftImageError, setNftImageError] = (0, import_react45.useState)(false);
+  const [logoError, setLogoError] = (0, import_react45.useState)(false);
   const { assets: projectAssets, showBalanceAs: showBalanceAsSymbol } = useLumiaPassportConfig().config.current.projectAssets || {};
   const qc = (0, import_react_query29.useQueryClient)();
   const { balanceQueryKey } = projectAssets?.find((a) => a.symbol === showBalanceAsSymbol) || {};
@@ -11278,7 +11355,7 @@ function PortfolioMenu() {
   } = useBlockscoutAssets({
     address
   });
-  const refreshAllAssetsBalances = (0, import_react45.useCallback)(() => {
+  const refreshAllAssetsBalances = (0, import_react46.useCallback)(() => {
     Promise.all(projectAssets.map((asset) => qc.invalidateQueries({ queryKey: asset.balanceQueryKey })));
     refreshBlockscoutBalances();
   }, [qc, projectAssets, refreshBlockscoutBalances]);
@@ -11331,8 +11408,9 @@ function PortfolioMenu() {
 
 // src/internal/components/SecurityMenu/SecurityMenu.tsx
 var import_react_query31 = require("@tanstack/react-query");
+var import_dayjs3 = __toESM(require("dayjs"), 1);
 var import_lucide_react39 = require("lucide-react");
-var import_react46 = require("react");
+var import_react47 = require("react");
 init_auth();
 init_keyshare();
 init_iframe_manager();
@@ -11524,8 +11602,8 @@ function SecurityMenu() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const userId = import_auth3.jwtTokenManager.getUserId();
   const serverHasKeyshare = import_auth3.jwtTokenManager.getHasKeyshare() ?? false;
-  const [isRemoving, setIsRemoving] = (0, import_react46.useState)(false);
-  const [appToRemove, setAppToRemove] = (0, import_react46.useState)(null);
+  const [isRemoving, setIsRemoving] = (0, import_react47.useState)(false);
+  const [appToRemove, setAppToRemove] = (0, import_react47.useState)(null);
   const { data: recoveryData, isFetching: isRecoveryLoading } = (0, import_react_query31.useQuery)({
     enabled: !!userId,
     queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
@@ -11609,15 +11687,22 @@ function SecurityMenu() {
               /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-full space-y-1", children: trustedApps.map((app, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
                 "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__ */ (0, import_jsx_runtime61.jsx)("img", { src: app.appLogo, alt: "", className: "w-8 h-8 rounded-md object-cover flex-shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-8 h-8 rounded-md bg-[var(--l-pass-bg-muted)] flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-sm", children: "\u{1F517}" }) }),
+                    app.appLogo ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                      "img",
+                      {
+                        src: app.appLogo,
+                        alt: app.appName,
+                        className: "w-8 h-8 rounded-[var(--l-pass-el-bdrs)] object-cover flex-shrink-0"
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsx)("span", { className: "text-sm", children: "\u{1F517}" }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "font-medium truncate", children: app.appName || new URL(app.origin).hostname }),
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "font-semibold truncate", children: app.appName || new URL(app.origin).hostname }),
                       /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-[var(--l-pass-fg-muted)] truncate", children: new URL(app.origin).hostname }),
-                      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "text-[var(--l-pass-fg-muted)]", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "text-[var(--l-pass-fg-muted)] truncate", children: [
                         "Trusted: ",
-                        new Date(app.trustedAt).toLocaleDateString()
+                        (0, import_dayjs3.default)(app.trustedAt).format("MMM D, YYYY HH:mm")
                       ] })
                     ] }),
                     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
@@ -11626,7 +11711,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,
@@ -11634,7 +11719,7 @@ function SecurityMenu() {
                           appName: app.appName,
                           appLogo: app.appLogo
                         }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react39.Trash2, { className: "h-3 w-3" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react39.Trash2, { className: "h-4 w-4" })
                       }
                     )
                   ]
@@ -11684,21 +11769,21 @@ function SecurityMenu() {
 
 // src/internal/components/SendRecieveMenu/SendLumiaMenu.tsx
 var import_lucide_react40 = require("lucide-react");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_viem9 = require("viem");
 var import_wagmi4 = require("wagmi");
 
 // src/hooks/useSendTransaction.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_viem7 = require("viem");
 init_account();
 function useSendTransaction() {
   const session = useLumiaPassportSession((st) => st.session);
   const address = useLumiaPassportSession((st) => st.address);
-  const [isLoading, setIsLoading] = (0, import_react47.useState)(false);
-  const [error, setError] = (0, import_react47.useState)(null);
-  const [userOpHash, setUserOpHash] = (0, import_react47.useState)(null);
-  const sendTransaction = (0, import_react47.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react48.useState)(false);
+  const [error, setError] = (0, import_react48.useState)(null);
+  const [userOpHash, setUserOpHash] = (0, import_react48.useState)(null);
+  const sendTransaction = (0, import_react48.useCallback)(
     async (params) => {
       if (!session || !address) {
         setError("No active session");
@@ -11738,7 +11823,7 @@ function useSendTransaction() {
     },
     [session, address]
   );
-  const reset = (0, import_react47.useCallback)(() => {
+  const reset = (0, import_react48.useCallback)(() => {
     setError(null);
     setUserOpHash(null);
     setIsLoading(false);
@@ -11753,7 +11838,7 @@ function useSendTransaction() {
 }
 
 // src/modules/assets.ts
-var import_react48 = __toESM(require("react"), 1);
+var import_react49 = __toESM(require("react"), 1);
 var import_wagmi3 = require("wagmi");
 var import_viem8 = require("viem");
 init_base();
@@ -11900,7 +11985,7 @@ function useTokenBalance(tokenAddress, userAddress) {
     }
   });
   const { tokenInfo } = useTokenInfo(tokenAddress);
-  const formattedBalance = import_react48.default.useMemo(() => {
+  const formattedBalance = import_react49.default.useMemo(() => {
     if (!balance || !tokenInfo) return "0";
     return (0, import_viem8.formatUnits)(balance, tokenInfo.decimals);
   }, [balance, tokenInfo]);
@@ -11927,13 +12012,13 @@ function SendLumiaMenu() {
     address,
     chainId: lumiaBeam.id
   });
-  const [recipient, setRecipient] = (0, import_react49.useState)("");
-  const [amount, setAmount] = (0, import_react49.useState)("");
-  const [txStep, setTxStep] = (0, import_react49.useState)("input");
-  const [validationError, setValidationError] = (0, import_react49.useState)(null);
+  const [recipient, setRecipient] = (0, import_react50.useState)("");
+  const [amount, setAmount] = (0, import_react50.useState)("");
+  const [txStep, setTxStep] = (0, import_react50.useState)("input");
+  const [validationError, setValidationError] = (0, import_react50.useState)(null);
   const nativeAsset = assets.find((a) => a.type === "native");
   const balance = nativeAsset ? parseFloat(nativeAsset.formattedBalance) : 0;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (open) {
       setTxStep("input");
       setValidationError(null);
@@ -12097,7 +12182,7 @@ function SendLumiaMenu() {
 // src/internal/components/SendRecieveMenu/ReceiveLumiaMenu.tsx
 var import_lucide_react41 = require("lucide-react");
 var import_qrcode = __toESM(require("qrcode"), 1);
-var import_react50 = require("react");
+var import_react51 = require("react");
 init_clients();
 var import_jsx_runtime63 = require("react/jsx-runtime");
 function ReceiveLumiaMenu() {
@@ -12106,9 +12191,9 @@ function ReceiveLumiaMenu() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const open = page === "receive";
-  const [qrCodeUrl, setQrCodeUrl] = (0, import_react50.useState)("");
-  const [copied, setCopied] = (0, import_react50.useState)(false);
-  (0, import_react50.useEffect)(() => {
+  const [qrCodeUrl, setQrCodeUrl] = (0, import_react51.useState)("");
+  const [copied, setCopied] = (0, import_react51.useState)(false);
+  (0, import_react51.useEffect)(() => {
     if (open && address) {
       import_qrcode.default.toDataURL(address, {
         width: 200,
@@ -12121,7 +12206,7 @@ function ReceiveLumiaMenu() {
       });
     }
   }, [open, address]);
-  const handleCopy = (0, import_react50.useCallback)(async () => {
+  const handleCopy = (0, import_react51.useCallback)(async () => {
     if (!address) return;
     try {
       await navigator.clipboard.writeText(address);
@@ -12151,7 +12236,7 @@ function ReceiveLumiaMenu() {
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex items-center justify-center p-[var(--l-pass-pd)]", style: { minHeight: "216px" }, children: qrCodeUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("img", { src: qrCodeUrl, alt: "Wallet QR Code", className: "w-48 h-48" }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react41.Loader, { className: "w-5 h-5 animate-spin text-[var(--l-pass-fg-muted)]" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Highlight, { type: "info", children: [
           /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "block w-full text-center font-mono text-[10px] break-all mb-2", children: address }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { onClick: handleCopy, className: "w-full", size: "medium", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { onClick: handleCopy, className: "w-full", size: "large", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react41.CheckCircle2, { className: "h-4 w-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: "Copied!" })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
@@ -12167,7 +12252,7 @@ function ReceiveLumiaMenu() {
 
 // src/internal/components/SettingsMenu/SettingsMenu.tsx
 var import_lucide_react43 = require("lucide-react");
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/internal/components/SettingsMenu/constants.ts
 var import_lucide_react42 = require("lucide-react");
@@ -12201,7 +12286,7 @@ function SettingsMenu() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const settingsNotifications = useLayoutDataStore((st) => st.settingsNotifications);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-  (0, import_react51.useEffect)(() => setMainPageHeight(DEFAULT_SETTINGS_MENU_HEIGHT), [setMainPageHeight]);
+  (0, import_react52.useEffect)(() => 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);
@@ -12262,7 +12347,7 @@ function TermsOfService() {
 // src/internal/components/TransactionsMenu/TransactionsMenu.tsx
 var import_react_query32 = require("@tanstack/react-query");
 var import_lucide_react46 = require("lucide-react");
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/internal/components/TransactionsMenu/api.ts
 init_base();
@@ -12732,7 +12817,7 @@ function TransactionsMenu() {
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
-  const [expandedGroups, setExpandedGroups] = (0, import_react52.useState)({});
+  const [expandedGroups, setExpandedGroups] = (0, import_react53.useState)({});
   const {
     data: txHistoryGroups = [],
     isLoading: isTxHistoryLoading,
@@ -12744,7 +12829,7 @@ function TransactionsMenu() {
     queryKey: [TRANSACTIONS_HISTORY_QUERY_KEY, address],
     queryFn: () => getTransactionsListQuery(address)
   });
-  const refreshTxHistory = (0, import_react52.useCallback)(
+  const refreshTxHistory = (0, import_react53.useCallback)(
     () => qc.invalidateQueries({ queryKey: [TRANSACTIONS_HISTORY_QUERY_KEY, address] }),
     [qc, address]
   );
@@ -12778,7 +12863,7 @@ function TransactionsMenu() {
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react46.XCircle, { className: "w-4 h-4 flex-none" }),
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "block w-full flex-1 text-center text-xs", children: txHistoryResolvedError })
         ] }),
-        !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Highlight, { type: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "No transactions found. Smart account transactions will appear here" }) }),
+        !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Highlight, { type: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: "No transactions found." }) }),
         !isTxHistoryLoading && !txHistoryResolvedError && txHistoryGroups.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: txHistoryGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           TransactionsGroup,
           {
@@ -12902,7 +12987,7 @@ function usePageMapper() {
     setIsDialogOpen,
     setIsDialogClosing
   } = useLayoutStore();
-  const closeDialog = (0, import_react53.useCallback)(() => {
+  const closeDialog = (0, import_react54.useCallback)(() => {
     setIsDialogClosing(true);
     setTimeout(() => {
       setDialogContent(null);
@@ -12913,7 +12998,7 @@ function usePageMapper() {
       setIsDialogOpen(false);
     }, CLEAR_DIALOG_TIMEOUT);
   }, [setDialogContent, setDialogDescription, setDialogTitle, setIsDialogForced, setIsDialogOpen, setIsDialogClosing]);
-  const openDialog = (0, import_react53.useCallback)(
+  const openDialog = (0, import_react54.useCallback)(
     (pageItem) => {
       const PageContentComponent = pageItem.component;
       setDialogTitle(pageItem.title);
@@ -12923,7 +13008,7 @@ function usePageMapper() {
     },
     [setDialogContent, setDialogDescription, setDialogTitle, setIsDialogOpen]
   );
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (page === null) return closeDialog();
     const pageItem = protectedRoutes[page];
     if (!pageItem) {
@@ -12936,30 +13021,18 @@ function usePageMapper() {
 }
 
 // src/internal/hooks/useSettingsNotifications.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 init_auth();
 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 = import_auth3.jwtTokenManager.getProviders();
   const hasEmail = providers.includes("email");
-  (0, import_react54.useEffect)(() => {
-    setSettingsNotifications({
-      ...BACKUP_IS_NOT_CREATED_NOTIFICATION,
-      status: hasServerVault ? "resolved" : "active"
-    });
-  }, [hasServerVault, setSettingsNotifications]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     setSettingsNotifications({
       ...EMAIL_NOT_CONNECTED_NOTIFICATION,
       status: hasEmail ? "resolved" : "active"
@@ -12968,7 +13041,7 @@ function useSettingsNotifications() {
 }
 
 // src/internal/hooks/useWalletStatus.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 init_auth();
 function useWalletStatus() {
   const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
@@ -12978,7 +13051,7 @@ function useWalletStatus() {
     config: { current: config },
     callbacks
   } = useLumiaPassportConfig();
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!isIframeReady || !config.projectId || !callbacks?.onWalletReady) return;
     const userId = import_auth3.jwtTokenManager.getUserId();
     const hasKeyshare = import_auth3.jwtTokenManager.getHasKeyshare();
@@ -13003,11 +13076,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();
-  (0, import_react56.useEffect)(() => setIsSettings(!!session), [session, setIsSettings]);
+  (0, import_react57.useEffect)(() => setIsSettings(!!session), [session, setIsSettings]);
   usePageMapper();
   useAutoConnect();
   useCheckVaultStatus();
@@ -13017,6 +13091,7 @@ function LumiaPassportDialog() {
   useListenIframeAuthEvents();
   useBackupWarning();
   useWalletStatus();
+  const isHeaderHidden = !session || page === "keysare-backup" /* KEYSARE_BACKUP */ && !hasServerVault;
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     Dialog,
     {
@@ -13025,10 +13100,10 @@ function LumiaPassportDialog() {
         if (isDialogForced) return;
         if (!open) setPage(null);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(DialogContent, { colorMode, hideClose: isDialogForced, className, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(DialogContent, { colorMode, className, children: [
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogTitle, { children: dialogTitle }) }),
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DialogDescription, { className: "sr-only", children: dialogDescription }),
-        !!session && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Header, {}),
+        !isHeaderHidden && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Header, {}),
         /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_framer_motion3.AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           import_framer_motion3.motion.div,
           {
@@ -13048,23 +13123,23 @@ function LumiaPassportDialog() {
 }
 
 // src/internal/components/TssManager.tsx
-var import_react57 = __toESM(require("react"), 1);
+var import_react58 = __toESM(require("react"), 1);
 init_auth();
 init_clients();
-var TssManagerWithRef = import_react57.default.forwardRef((props, ref) => {
+var TssManagerWithRef = import_react58.default.forwardRef((props, ref) => {
   const { mpcPin } = props;
   const usePaymaster = useLumiaPassportSession((st) => st.usePaymaster);
   const setStatus = useLumiaPassportSession((st) => st.setStatus);
   const setSession = useLumiaPassportSession((st) => st.setSession);
   const setAddress = useLumiaPassportSession((st) => st.setAddress);
-  const onSessionCreated = (0, import_react57.useCallback)(
+  const onSessionCreated = (0, import_react58.useCallback)(
     (session, address) => {
       setSession(session);
       setAddress(address);
     },
     [setSession, setAddress]
   );
-  const createSessionWithKeyshare = import_react57.default.useCallback(
+  const createSessionWithKeyshare = import_react58.default.useCallback(
     async (userId, hasServerKeyshare, isNewUser) => {
       setStatus("checking key management setup...");
       await ensureKeyshare(userId, hasServerKeyshare, setStatus, isNewUser);
@@ -13085,14 +13160,14 @@ var TssManagerWithRef = import_react57.default.forwardRef((props, ref) => {
     },
     [setStatus, usePaymaster, mpcPin]
   );
-  import_react57.default.useImperativeHandle(ref, () => ({ createSessionWithKeyshare }), [createSessionWithKeyshare]);
+  import_react58.default.useImperativeHandle(ref, () => ({ createSessionWithKeyshare }), [createSessionWithKeyshare]);
   return null;
 });
 
 // src/internal/components/WalletConnectHandler.tsx
 var import_rainbowkit = require("@rainbow-me/rainbowkit");
 var import_react_query33 = require("@tanstack/react-query");
-var import_react58 = __toESM(require("react"), 1);
+var import_react59 = __toESM(require("react"), 1);
 var import_wagmi5 = require("wagmi");
 init_wallet();
 function WalletConnectHandler() {
@@ -13110,7 +13185,7 @@ function WalletConnectHandler() {
   const setManageWalletLinkError = useManageWalletStore((st) => st.setLinkError);
   const setLinkIsLoading = useManageWalletStore((st) => st.setLinkIsLoading);
   const setProviderType = useManageWalletStore((st) => st.setProviderType);
-  const onLinkingComplete = (0, import_react58.useCallback)(
+  const onLinkingComplete = (0, import_react59.useCallback)(
     async (success) => {
       setIsWalletLinking(false);
       if (!success && !passportWalletAddress) {
@@ -13137,8 +13212,8 @@ function WalletConnectHandler() {
     },
     [qc, passportWalletAddress, callbacks, setProviderType, setPage, setIsWalletLinking]
   );
-  const [hasStartedLinking, setHasStartedLinking] = import_react58.default.useState(false);
-  (0, import_react58.useEffect)(() => {
+  const [hasStartedLinking, setHasStartedLinking] = import_react59.default.useState(false);
+  (0, import_react59.useEffect)(() => {
     if (isWalletLinking && !hasStartedLinking) {
       setHasStartedLinking(true);
       setProviderType(null);
@@ -13158,7 +13233,7 @@ function WalletConnectHandler() {
       if (isConnected) disconnect();
     }
   }, [isWalletLinking, hasStartedLinking, isConnected, openConnectModal, disconnect, setPage, setProviderType]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (hasStartedLinking && !connectModalOpen && !isConnected && isWalletLinking) {
       console.log("[WalletConnectHandler] Modal closed without connecting");
       onLinkingComplete(false);
@@ -13234,7 +13309,7 @@ function WalletConnectHandler() {
       setPage(passportWalletAddress ? "manage-wallet" /* MANAGE_WALLET */ : "auth" /* AUTH */);
     }
   });
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!!chain?.id && isConnected && walletAddress && isWalletLinking && hasStartedLinking) {
       console.log("[WalletConnectHandler] handleWalletSign triggered");
       handleWalletSign({ chainId: chain.id, signingWalletAddress: walletAddress });
@@ -13270,7 +13345,7 @@ var useLumiaPassportSession = (0, import_zustand6.create)((set) => ({
 }));
 function LumiaPassportSessionProvider({ children }) {
   const config = useLumiaPassportConfig().config;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react59.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react60.Fragment, { children: [
     children,
     config.current?.wallet?.enabled && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(WalletConnectHandler, {}),
     /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(BalanceFeedProvider, {}),
@@ -13322,14 +13397,14 @@ var LumiaWagmiProvider = ({ children }) => {
 
 // src/context/LumiaPassportContext.tsx
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var LumiaPassportContext = (0, import_react60.createContext)(void 0);
+var LumiaPassportContext = (0, import_react61.createContext)(void 0);
 function LumiaPassportProvider(props) {
   const { children, projectId, initialConfig = {}, callbacks } = props;
   const setIsIframeReady = useLumiaPassportSession((st) => st.setIsIframeReady);
   const setWalletReadyStatus = useLumiaPassportSession((st) => st.setWalletReadyStatus);
-  (0, import_react60.useEffect)(() => notifyNoProjetctId(projectId), [projectId]);
-  const config = (0, import_react60.useRef)({ projectId, ...DEFAULT_LUMIA_PASSPORT_CONFIG });
-  const updateConfig = (0, import_react60.useCallback)((updates) => {
+  (0, import_react61.useEffect)(() => notifyNoProjetctId(projectId), [projectId]);
+  const config = (0, import_react61.useRef)({ projectId, ...DEFAULT_LUMIA_PASSPORT_CONFIG });
+  const updateConfig = (0, import_react61.useCallback)((updates) => {
     const prev = config.current;
     const next = { ...prev };
     if (updates.projectId !== void 0) next.projectId = updates.projectId;
@@ -13364,7 +13439,7 @@ function LumiaPassportProvider(props) {
     }
     config.current = next;
   }, []);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (typeof window === "undefined" || !projectId) return;
     const mergedConfig = (0, import_lodash_es4.merge)(DEFAULT_LUMIA_PASSPORT_CONFIG, initialConfig);
     updateConfig(mergedConfig);
@@ -13409,18 +13484,18 @@ function LumiaPassportProvider(props) {
       console.error("[LumiaPassport] Error setting up iframe manager:", error);
     }
   }, [projectId, initialConfig, callbacks, updateConfig, setIsIframeReady, setWalletReadyStatus]);
-  const contextValue = (0, import_react60.useMemo)(() => ({ config, updateConfig, callbacks }), [config, updateConfig, callbacks]);
+  const contextValue = (0, import_react61.useMemo)(() => ({ config, updateConfig, callbacks }), [config, updateConfig, callbacks]);
   return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LumiaWagmiProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LumiaPassportContext.Provider, { value: contextValue, children }) });
 }
 var useLumiaPassportConfig = () => {
-  const ctx = (0, import_react60.useContext)(LumiaPassportContext);
+  const ctx = (0, import_react61.useContext)(LumiaPassportContext);
   if (!ctx) throw new Error("useLumiaPassportConfig must be used within a LumiaPassportProvider");
   return ctx;
 };
 
 // src/components/ConnectWalletButton.tsx
 var import_lucide_react47 = require("lucide-react");
-var import_react61 = require("react");
+var import_react62 = require("react");
 init_auth();
 var import_jsx_runtime74 = (
   /** external Buttons can be provided */
@@ -13444,10 +13519,10 @@ 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);
-  (0, import_react61.useEffect)(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
+  (0, import_react62.useEffect)(() => setUsePaymaster(usePaymaster), [setUsePaymaster, usePaymaster]);
   const avatar = import_auth3.jwtTokenManager.getAvatar();
   const displayName = import_auth3.jwtTokenManager.getDisplayName();
-  const indicators = (0, import_react61.useMemo)(() => {
+  const indicators = (0, import_react62.useMemo)(() => {
     const userId = import_auth3.jwtTokenManager.getUserId();
     if (!userId) return { server: false, local: false, backup: false };
     const server = import_auth3.jwtTokenManager.getHasKeyshare() ?? false;
@@ -13617,13 +13692,13 @@ var useLumiaPassportRecoveryUserId = () => useLumiaPassportSession((st) => st.re
 var useLumiaPassportHasServerVault = () => useLumiaPassportSession((st) => st.hasServerVault);
 
 // src/hooks/useLumiaPassportOpen.ts
-var import_react62 = require("react");
+var import_react63 = require("react");
 function useLumiaPassportOpen() {
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const setPageParams = useLayoutDataStore((st) => st.setPageParams);
   const address = useLumiaPassportSession((st) => st.address);
-  const open = (0, import_react62.useCallback)(
+  const open = (0, import_react63.useCallback)(
     (passportPage, params) => {
       if (!address) return setPage("auth" /* AUTH */);
       if (!!address && passportPage === "auth" /* AUTH */) return setPage("manage-wallet" /* MANAGE_WALLET */);
@@ -13632,12 +13707,12 @@ function useLumiaPassportOpen() {
     },
     [setPage, setPageParams, address]
   );
-  const close = (0, import_react62.useCallback)(() => setPage(null), [setPage]);
+  const close = (0, import_react63.useCallback)(() => setPage(null), [setPage]);
   return { open, close, isOpen: page !== null };
 }
 
 // src/hooks/useLumiaPassportColorMode.ts
-var import_react63 = require("react");
+var import_react64 = require("react");
 function useLumiaPassportColorMode() {
   const {
     config: { current: config }
@@ -13645,14 +13720,14 @@ function useLumiaPassportColorMode() {
   const preferedColorMode = config?.preferedColorMode;
   const colorMode = useLayoutStore((st) => st.colorMode);
   const handleStoreColorMode = useLayoutStore((st) => st.setColorMode);
-  const setColorMode = (0, import_react63.useCallback)(
+  const setColorMode = (0, import_react64.useCallback)(
     (mode) => {
       localStorage.setItem(LOCAL_COLOR_MODE_KEY, mode);
       handleStoreColorMode(mode);
     },
     [handleStoreColorMode]
   );
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     let targetColorMode = localStorage.getItem(LOCAL_COLOR_MODE_KEY);
     if (!targetColorMode && !preferedColorMode) {
       const systemMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -13695,7 +13770,7 @@ function ThemeToggle(props) {
 
 // src/context/RainbowKitContext.tsx
 var import_rainbowkit3 = require("@rainbow-me/rainbowkit");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_wagmi9 = require("wagmi");
 
 // src/config/rainbowkit.ts
@@ -13927,8 +14002,8 @@ var import_jsx_runtime76 = require("react/jsx-runtime");
 function LumiaRainbowKitProvider({ children }) {
   const config = useLumiaPassportConfig().config;
   const colorMode = useLayoutStore((st) => st.colorMode);
-  const rainbowConfig2 = (0, import_react64.useMemo)(() => createRainbowConfig(config.current?.wallet?.walletConnectProjectId), [config]);
-  const customTheme = (0, import_react64.useMemo)(
+  const rainbowConfig2 = (0, import_react65.useMemo)(() => createRainbowConfig(config.current?.wallet?.walletConnectProjectId), [config]);
+  const customTheme = (0, import_react65.useMemo)(
     () => colorMode === "dark" ? {
       ...(0, import_rainbowkit3.darkTheme)(),
       colors: { ...(0, import_rainbowkit3.darkTheme)().colors, ...rainbowTheme.darkMode.colors },
@@ -14380,14 +14455,14 @@ var Hash = ({
 };
 
 // src/internal/components/TransactionsMenu/TransactionsList.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 init_base();
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var TransactionsList = ({ address, itemsCount = 10 }) => {
-  const [transactions, setTransactions] = (0, import_react65.useState)([]);
-  const [loading, setLoading] = (0, import_react65.useState)(true);
-  const [error, setError] = (0, import_react65.useState)(null);
-  (0, import_react65.useEffect)(() => {
+  const [transactions, setTransactions] = (0, import_react66.useState)([]);
+  const [loading, setLoading] = (0, import_react66.useState)(true);
+  const [error, setError] = (0, import_react66.useState)(null);
+  (0, import_react66.useEffect)(() => {
     const fetchTransactions = async () => {
       try {
         setLoading(true);
@@ -14689,11 +14764,11 @@ function useUserOpStatus(options = {}) {
 
 // src/hooks/useLogout.ts
 var import_auth20 = require("@lumiapassport/core/auth");
-var import_react66 = require("react");
+var import_react67 = require("react");
 function useLogout() {
   const { setSession, setIsLoading, setAddress, setStatus, setError, address } = useLumiaPassportSession();
   const { callbacks } = useLumiaPassportConfig();
-  const logout2 = (0, import_react66.useCallback)(async () => {
+  const logout2 = (0, import_react67.useCallback)(async () => {
     const prevAddress = address;
     let userId = null;
     setIsLoading(true);