@lumiapassport/ui-kit 1.14.3 → 1.14.5

package/dist/index.js

@@ -4336,7 +4336,7 @@ import {
 } from "react";
 
 // src/context/LumiaPassportSessionContext.tsx
-import { Fragment as Fragment18 } from "react";
+import { Fragment as Fragment19 } from "react";
 import { create as create6 } from "zustand";
 
 // src/internal/components/BalanceFeedProvider/BalanceFeedProvider.tsx
@@ -4352,7 +4352,7 @@ import { create } from "zustand";
 init_assets();
 import { Key as Key2, Mail as Mail2, Wallet2 as Wallet22 } from "lucide-react";
 var LOCAL_COLOR_MODE_KEY = "lumia-passport-theme";
-var DEFAULT_AUTH_MENU_HEIGHT = 253;
+var DEFAULT_AUTH_MENU_HEIGHT = 337;
 var DEFAULT_MAIN_MENU_HEIGHT = 90;
 var DEFAULT_SETTINGS_MENU_HEIGHT = 346;
 var MAX_CONTENT_HEIGHT = 640;
@@ -4369,23 +4369,23 @@ var PROVIDERS_META2 = {
 };
 
 // src/internal/hooks/useLayoutDataStore.ts
-var PageKey = /* @__PURE__ */ ((PageKey2) => {
-  PageKey2["AUTH"] = "auth";
-  PageKey2["TERMS_OF_SERVICE"] = "terms-of-service";
-  PageKey2["MAIN_MENU"] = "main-menu";
-  PageKey2["SETTINGS"] = "settings";
-  PageKey2["SEND"] = "send";
-  PageKey2["RECEIVE"] = "receive";
-  PageKey2["BUY"] = "buy";
-  PageKey2["KYC"] = "kyc";
-  PageKey2["TRANSACTIONS"] = "transactions";
-  PageKey2["ASSETS"] = "assets";
-  PageKey2["MANAGE_WALLET"] = "manage-wallet";
-  PageKey2["UNLINK_PROVIDER"] = "unlink-provider";
-  PageKey2["SECURITY"] = "security";
-  PageKey2["KEYSARE_BACKUP"] = "keysare-backup";
-  PageKey2["KEYSHARE_RESTORE"] = "keyshare-restore";
-  return PageKey2;
+var PageKey = /* @__PURE__ */ ((PageKey4) => {
+  PageKey4["AUTH"] = "auth";
+  PageKey4["TERMS_OF_SERVICE"] = "terms-of-service";
+  PageKey4["MAIN_MENU"] = "main-menu";
+  PageKey4["SETTINGS"] = "settings";
+  PageKey4["SEND"] = "send";
+  PageKey4["RECEIVE"] = "receive";
+  PageKey4["BUY"] = "buy";
+  PageKey4["KYC"] = "kyc";
+  PageKey4["TRANSACTIONS"] = "transactions";
+  PageKey4["ASSETS"] = "assets";
+  PageKey4["MANAGE_WALLET"] = "manage-wallet";
+  PageKey4["UNLINK_PROVIDER"] = "unlink-provider";
+  PageKey4["SECURITY"] = "security";
+  PageKey4["KEYSARE_BACKUP"] = "keysare-backup";
+  PageKey4["KEYSHARE_RESTORE"] = "keyshare-restore";
+  return PageKey4;
 })(PageKey || {});
 var useLayoutDataStore = create((set) => ({
   page: null,
@@ -4397,6 +4397,7 @@ var useLayoutDataStore = create((set) => ({
   balance: { decimals: 18, formatted: "0.0", symbol: "LUMIA", value: BigInt(0) },
   mainPageHeight: DEFAULT_MAIN_MENU_HEIGHT,
   settingsNotifications: [],
+  isWalletLinking: false,
   setPage: (page) => set({ page }),
   setPageParams: (pageOptions) => set({ pageParams: pageOptions }),
   setCryptoRate: (lumiaRate) => set({ cryptoRate: lumiaRate }),
@@ -4414,7 +4415,8 @@ var useLayoutDataStore = create((set) => ({
     }
     const filtered = prev.settingsNotifications.filter((n) => n.id !== notification.id);
     return { settingsNotifications: filtered };
-  })
+  }),
+  setIsWalletLinking: (isWalletLinking) => set({ isWalletLinking })
 }));
 
 // src/internal/components/BalanceFeedProvider/BalanceFeedProvider.tsx
@@ -4510,7 +4512,7 @@ import { useEffect as useEffect31 } from "react";
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.14.3",
+  version: "1.14.5",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",
@@ -4743,6 +4745,15 @@ Button.displayName = "Button";
 
 // src/internal/components/Footer/Footer.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Version({ className }) {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: cn("font-mono text-[10px] text-[var(--l-pass-fg-muted)]", className),
+      children: `v${package_default.version}`
+    }
+  );
+}
 function Footer() {
   const qc = useQueryClient();
   const { callbacks } = useLumiaPassportConfig();
@@ -4781,7 +4792,7 @@ function Footer() {
     "div",
     {
       style: { borderTop: "1px solid var(--l-pass-bd)" },
-      className: cn("w-full flex flex-col gap-1 items-center p-[var(--l-pass-pd)] pb-5"),
+      className: "w-full flex flex-col items-center p-[var(--l-pass-pd)] pb-5",
       children: [
         /* @__PURE__ */ jsxs3("div", { className: "w-full flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs3(
@@ -4823,9 +4834,9 @@ function Footer() {
                 isDisconnecting ? /* @__PURE__ */ jsx4(Loader, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx4(LogOut, { className: "w-4 h-4" })
               ]
             }
-          ) : /* @__PURE__ */ jsx4("span", { className: "font-mono text-[10px] text-[var(--l-pass-fg-muted)]", children: `v${package_default.version}` })
+          ) : /* @__PURE__ */ jsx4(Version, {})
         ] }),
-        !!address && /* @__PURE__ */ jsx4("span", { className: "font-mono text-[10px] text-[var(--l-pass-fg-muted)]", children: `v${package_default.version}` })
+        !!address && /* @__PURE__ */ jsx4(Version, { className: "block w-fit mt-1" })
       ]
     }
   );
@@ -5478,8 +5489,34 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 import { jsx as jsx13 } from "react/jsx-runtime";
 var VisuallyHidden = ({ children }) => /* @__PURE__ */ jsx13("span", { className: "sr-only absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0", children });
 
+// src/internal/hooks/useListenIframeAuthEvents.ts
+import { useCallback, useEffect as useEffect3 } from "react";
+function useListenIframeAuthEvents() {
+  const setPage = useLayoutDataStore((state) => state.setPage);
+  const setIsIframeReady = useLumiaPassportSession((state) => state.setIsIframeReady);
+  const handleIframeMessage = useCallback(
+    (event) => {
+      if (event.data?.type === "LUMIA_PASSPORT_IFRAME_READY") {
+        console.log("[ IFRAME MESSAGE CACTHED ] Iframe is ready");
+        setIsIframeReady(true);
+      } else if (event.data?.type === "LUMIA_PASSPORT_SHOW_IFRAME") {
+        console.log("[ IFRAME MESSAGE CACTHED ] Consent screen shown - hiding auth modal");
+      } else if (event.data?.type === "LUMIA_PASSPORT_HIDE_IFRAME") {
+        console.log("[ IFRAME MESSAGE CACTHED ] Consent screen hidden");
+      } else if (event.data?.type === "KEYSHARE_RECOVERY_NEEDED") {
+        console.log("[ IFRAME MESSAGE  CACTHED] recovery neede");
+      }
+    },
+    [setPage, setIsIframeReady]
+  );
+  useEffect3(() => {
+    window.addEventListener("message", handleIframeMessage);
+    return () => window.removeEventListener("message", handleIframeMessage);
+  }, [handleIframeMessage]);
+}
+
 // src/internal/hooks/useAutoConnect.ts
-import { useCallback, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef2 } from "react";
 function useAutoConnect() {
   const {
     config: { current: config },
@@ -5499,7 +5536,7 @@ function useAutoConnect() {
     setIsIframeReady,
     setIsLoading
   } = useLumiaPassportSession();
-  const createSessionWithKeyshare = useCallback(
+  const createSessionWithKeyshare = useCallback2(
     async (userId, hasServerKeyshare, isNewUser) => {
       try {
         try {
@@ -5534,7 +5571,7 @@ function useAutoConnect() {
     [usePaymaster, setStatus, callbacks]
   );
   const autoConnectAttemptedRef = useRef2(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (autoConnectAttemptedRef.current) return;
     setIsLoading(true);
     const tryAutoConnect = async (attempt) => {
@@ -5656,14 +5693,13 @@ function useAutoConnect() {
 
 // src/internal/hooks/useBackupStatusChanges.ts
 import { useMutation as useMutation2 } from "@tanstack/react-query";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 init_vaultClient();
 function useBackupStatusChanges() {
   const setHasServerVault = useLumiaPassportSession((st) => st.setHasServerVault);
   const { mutate: handleBackupStatusChanged } = useMutation2({
     mutationFn: async (event) => {
       const customEvent = event;
-      console.log("[BACKUP STATUS] changed:", customEvent.detail);
       return await getShareRecoveryStats();
     },
     onSuccess: (stats) => {
@@ -5680,7 +5716,7 @@ function useBackupStatusChanges() {
       console.warn("[BACKUP STATUS] Failed to fetch initial vault status:", error);
     }
   });
-  useEffect4(() => {
+  useEffect5(() => {
     window.addEventListener("lumia-passport-backup-status-changed", handleBackupStatusChanged);
     return () => {
       window.removeEventListener("lumia-passport-backup-status-changed", handleBackupStatusChanged);
@@ -5689,7 +5725,7 @@ function useBackupStatusChanges() {
 }
 
 // src/internal/hooks/useBackupWarning.ts
-import { useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
 var WARNING_TIMEOUT_MS = 24e3;
 function useBackupWarning() {
   const config = useLumiaPassportConfig().config;
@@ -5698,7 +5734,7 @@ function useBackupWarning() {
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const timeoutRef = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -5720,7 +5756,7 @@ function useBackupWarning() {
 
 // src/internal/hooks/useCheckVaultStatus.ts
 import { useMutation as useMutation3 } from "@tanstack/react-query";
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 init_vaultClient();
 function useCheckVaultStatus() {
   const address = useLumiaPassportSession((st) => st.address);
@@ -5739,7 +5775,7 @@ function useCheckVaultStatus() {
       setHasServerVault(false);
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!address) return setHasServerVault(false);
     checkVaultStatus();
   }, [address, checkVaultStatus]);
@@ -5747,12 +5783,12 @@ function useCheckVaultStatus() {
 
 // src/internal/hooks/useDetectMaxScrollHeight.ts
 import { debounce } from "lodash-es";
-import { useCallback as useCallback2, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8 } from "react";
 var DEBOUNCE_DELAY = 50;
 function useDetectMaxScrollHeight() {
   const setIsMobileView = useLayoutStore((state) => state.setIsMobileView);
   const setMaxScrollHeight = useLayoutStore((state) => state.setMaxScrollHeight);
-  const onResize = useCallback2(
+  const onResize = useCallback3(
     debounce(({ width, height }) => {
       const limContentHeight = height * 0.92 - 116 - 72;
       setIsMobileView(width < height && (width < 475 || limContentHeight <= MAX_CONTENT_HEIGHT));
@@ -5760,7 +5796,7 @@ function useDetectMaxScrollHeight() {
     }, DEBOUNCE_DELAY),
     [setMaxScrollHeight, setIsMobileView]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     const obs = new ResizeObserver(([entry]) => onResize(entry.contentRect));
     const doc = window.document.getElementsByTagName("html")[0];
     if (doc) obs.observe(doc);
@@ -5773,9 +5809,34 @@ import { useCallback as useCallback16, useEffect as useEffect28 } from "react";
 
 // src/internal/components/AuthMenu/AuthMenu.tsx
 import { AnimatePresence, motion } from "framer-motion";
-import { Loader as Loader5 } from "lucide-react";
+import { AlertTriangle as AlertTriangle2, Loader as Loader5 } from "lucide-react";
 import { useEffect as useEffect11, useMemo } from "react";
 
+// src/internal/components/ui/highlight.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var CARD_STYLES = {
+  info: "text-[var(--l-pass-info)] bg-[var(--l-pass-bg-info)]",
+  success: "text-[var(--l-pass-success)] bg-[var(--l-pass-bg-success)]",
+  warning: "text-[var(--l-pass-warning)] bg-[var(--l-pass-bg-warning)]",
+  error: "text-[var(--l-pass-error)] bg-[var(--l-pass-bg-error)]"
+};
+function Highlight(props) {
+  const { type = "info", children, className } = props;
+  return /* @__PURE__ */ jsx14(
+    "div",
+    {
+      className: cn(
+        "w-full text-xs rounded-[var(--l-pass-el-bdrs)] p-[var(--l-pass-pd)]",
+        "whitespace-pre-line",
+        type === "error" ? "break-all" : "break-normal",
+        CARD_STYLES[type],
+        className
+      ),
+      children
+    }
+  );
+}
+
 // src/internal/components/AuthMenu/AuthFailedStep.tsx
 import { AlertTriangle, Cross } from "lucide-react";
 
@@ -5788,68 +5849,58 @@ var useAuthStore = create3((set) => ({
   expiresIn: null,
   codeSendError: null,
   passkeyStatus: "idle",
-  passkeyError: null,
-  failedMessage: null,
   failedType: "general",
-  verificationError: null,
   setStep: (step) => set({ step }),
-  setAlert: (alert2) => set({ alert: alert2 }),
   setEmail: (email) => set({ email }),
   setExpiresIn: (expiresIn) => set({ expiresIn }),
-  setCodeSendError: (error) => set({ codeSendError: error }),
   setPasskeyStatus: (status) => set({ passkeyStatus: status }),
-  setPasskeyError: (error) => set({ passkeyError: error }),
-  setFailedMessage: (message) => set({ failedMessage: message }),
-  setFailedType: (type) => set({ failedType: type }),
-  setVerificationError: (error) => set({ verificationError: error })
+  setAlert: (alert2) => set({ alert: alert2 }),
+  setFailedType: (type) => set({ failedType: type })
 }));
 
 // src/internal/components/AuthMenu/AuthFailedStep.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 function AuthFailedStep() {
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const { failedMessage, failedType, setStep, setFailedMessage, setFailedType } = useAuthStore();
+  const { failedType, setStep, setFailedType, setAlert } = useAuthStore();
   const isCritical = failedType === "critical" || failedType === "config";
   return /* @__PURE__ */ jsxs12("div", { className: "w-full flex flex-col text-center gap-4 p-4", children: [
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsx15(
       "div",
       {
         className: cn(
           "w-full flex flex-col p-2 gap-2 rounded-[var(--l-pass-el-bdrs)]",
           isCritical ? "text-[var(--l-pass-error)] bg-[var(--l-pass-bg-error)]" : "text-[var(--l-pass-warning)] bg-[var(--l-pass-bg-warning)]"
         ),
-        children: [
-          /* @__PURE__ */ jsxs12("div", { className: "w-full flex items-center justify-center gap-2", children: [
-            isCritical ? /* @__PURE__ */ jsx14(AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }) : /* @__PURE__ */ jsx14(Cross, { className: "w-5 h-5 text-[var(--l-pass-warning)]" }),
-            /* @__PURE__ */ jsx14("span", { className: "text-center block text-xl font-bold", children: failedType === "config" ? "Configuration Error" : failedType === "critical" ? "Critical Error" : "Failed" })
-          ] }),
-          failedMessage && /* @__PURE__ */ jsx14("span", { className: "text-center block text-sm whitespace-pre-line leading-relaxed", children: failedMessage })
-        ]
+        children: /* @__PURE__ */ jsxs12("div", { className: "w-full flex items-center justify-center gap-2", children: [
+          isCritical ? /* @__PURE__ */ jsx15(AlertTriangle, { className: "w-5 h-5 text-[var(--l-pass-error)]" }) : /* @__PURE__ */ jsx15(Cross, { className: "w-5 h-5 text-[var(--l-pass-warning)]" }),
+          /* @__PURE__ */ jsx15("span", { className: "text-center block text-xl font-bold", children: failedType === "config" ? "Configuration Error" : failedType === "critical" ? "Critical Error" : "Failed" })
+        ] })
       }
     ),
     failedType === "config" && /* @__PURE__ */ jsxs12("div", { className: "p-2 rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-info)]", children: [
-      /* @__PURE__ */ jsx14("div", { className: "text-sm font-medium text-[var(--l-pass-info)] mb-2", children: "To fix this issue:" }),
+      /* @__PURE__ */ jsx15("div", { className: "text-sm font-medium text-[var(--l-pass-info)] mb-2", children: "To fix this issue:" }),
       /* @__PURE__ */ jsxs12("ul", { className: "text-xs text-[var(--l-pass-info)] text-left space-y-1 list-disc list-inside", children: [
-        /* @__PURE__ */ jsx14("li", { children: "Contact your project administrator" }),
-        /* @__PURE__ */ jsx14("li", { children: "Verify projectId is correctly configured" }),
-        /* @__PURE__ */ jsx14("li", { children: "Check project metadata on the server" })
+        /* @__PURE__ */ jsx15("li", { children: "Contact your project administrator" }),
+        /* @__PURE__ */ jsx15("li", { children: "Verify projectId is correctly configured" }),
+        /* @__PURE__ */ jsx15("li", { children: "Check project metadata on the server" })
       ] })
     ] }),
     failedType === "critical" && /* @__PURE__ */ jsxs12("div", { className: "p-2 rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-error)] border", children: [
-      /* @__PURE__ */ jsx14("div", { className: "text-sm font-semibold text-[var(--l-pass-error)] mb-2", children: "What to do next:" }),
+      /* @__PURE__ */ jsx15("div", { className: "text-sm font-semibold text-[var(--l-pass-error)] mb-2", children: "What to do next:" }),
       /* @__PURE__ */ jsxs12("ul", { className: "text-xs text-[var(--l-pass-error)] text-left space-y-1 list-disc list-inside", children: [
-        /* @__PURE__ */ jsx14("li", { children: "Contact support immediately" }),
-        /* @__PURE__ */ jsx14("li", { children: "Provide your projectId and error details" }),
-        /* @__PURE__ */ jsx14("li", { children: "You may need to create a new account" })
+        /* @__PURE__ */ jsx15("li", { children: "Contact support immediately" }),
+        /* @__PURE__ */ jsx15("li", { children: "Provide your projectId and error details" }),
+        /* @__PURE__ */ jsx15("li", { children: "You may need to create a new account" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx14("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx15(
       Button,
       {
         size: "large",
         onClick: () => {
           setStep("signin");
-          setFailedMessage("");
+          setAlert(null);
           setFailedType("general");
           setIsLoading(false);
         },
@@ -5868,7 +5919,7 @@ init_profile();
 
 // src/internal/components/ui/input.tsx
 import React2, { useImperativeHandle, useRef as useRef4 } from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
 var Input = React2.forwardRef((props, ref) => {
   const { className, disabled, error, Icon, element, ...inputProps } = props;
   const internalRef = useRef4(null);
@@ -5890,8 +5941,8 @@ var Input = React2.forwardRef((props, ref) => {
           internalRef.current?.focus();
         },
         children: [
-          Icon && /* @__PURE__ */ jsx15("div", { className: "flex flex-none items-center justify-center w-6 h-6 p-1", children: /* @__PURE__ */ jsx15(Icon, { width: 16, height: 16, className: "text-[var(--l-pass-fg)]" }) }),
-          /* @__PURE__ */ jsx15(
+          Icon && /* @__PURE__ */ jsx16("div", { className: "flex flex-none items-center justify-center w-6 h-6 p-1", children: /* @__PURE__ */ jsx16(Icon, { width: 16, height: 16, className: "text-[var(--l-pass-fg)]" }) }),
+          /* @__PURE__ */ jsx16(
             "input",
             {
               ref: internalRef,
@@ -5910,13 +5961,13 @@ var Input = React2.forwardRef((props, ref) => {
         ]
       }
     ),
-    !!error?.length && /* @__PURE__ */ jsx15("span", { className: "block text-[var(--l-pass-error)]", children: error })
+    !!error?.length && /* @__PURE__ */ jsx16("span", { className: "block text-[var(--l-pass-error)]", children: error })
   ] });
 });
 Input.displayName = "Input";
 
 // src/internal/components/AuthMenu/DisaplayNameStep/DisplayNameInput.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 var DisplayNameInput = ({ onComplete, onSkip }) => {
   const [displayName, setDisplayName] = useState4("");
   const [isLoading, setIsLoading] = useState4(false);
@@ -5946,12 +5997,12 @@ var DisplayNameInput = ({ onComplete, onSkip }) => {
   };
   return /* @__PURE__ */ jsxs14("div", { className: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: [
     /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
-      /* @__PURE__ */ jsx16(LumiaLogo, { size: 24, className: "w-6 h-6" }),
-      /* @__PURE__ */ jsx16("span", { className: "font-bold text-xl leading-6", children: "What's your name?" })
+      /* @__PURE__ */ jsx17(LumiaLogo, { size: 24, className: "w-6 h-6" }),
+      /* @__PURE__ */ jsx17("span", { className: "font-bold text-xl leading-6", children: "What's your name?" })
     ] }),
-    /* @__PURE__ */ jsx16("span", { className: "block w-full text-xs text-center", children: "This helps personalize your experience" }),
+    /* @__PURE__ */ jsx17("span", { className: "block w-full text-xs text-center", children: "This helps personalize your experience" }),
     /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, className: "w-full flex flex-col gap-[var(--l-pass-pd)]", children: [
-      /* @__PURE__ */ jsx16(
+      /* @__PURE__ */ jsx17(
         Input,
         {
           Icon: User,
@@ -5969,7 +6020,7 @@ var DisplayNameInput = ({ onComplete, onSkip }) => {
         }
       ),
       /* @__PURE__ */ jsxs14("div", { className: "w-full flex gap-[var(--l-pass-gap)]", children: [
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Button,
           {
             type: "submit",
@@ -5979,7 +6030,7 @@ var DisplayNameInput = ({ onComplete, onSkip }) => {
             children: isLoading ? "Saving..." : "Continue"
           }
         ),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(
           Button,
           {
             className: "flex-1 text-[var(--l-pass-fg-muted)]",
@@ -5997,17 +6048,16 @@ var DisplayNameInput = ({ onComplete, onSkip }) => {
 };
 
 // src/internal/components/AuthMenu/DisaplayNameStep/DisplayNameStep.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function DisplayNameStep(props) {
   const { onAuthSuccess } = props;
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const { setVerificationError, setStep, setEmail, setPasskeyError, setPasskeyStatus } = useAuthStore();
+  const { setStep, setEmail, setPasskeyStatus, setAlert } = useAuthStore();
   const onSkip = async () => {
     setPage(null);
     setStep("signin");
     setEmail("");
-    setVerificationError("");
-    setPasskeyError("");
+    setAlert(null);
     setPasskeyStatus("idle");
     await new Promise((resolve) => setTimeout(resolve, 250));
     if (onAuthSuccess) await onAuthSuccess();
@@ -6016,21 +6066,20 @@ function DisplayNameStep(props) {
     setPage(null);
     setStep("signin");
     setEmail("");
-    setVerificationError("");
-    setPasskeyError("");
+    setAlert(null);
     setPasskeyStatus("idle");
     await new Promise((resolve) => setTimeout(resolve, 250));
     if (onAuthSuccess) await onAuthSuccess();
   };
-  return /* @__PURE__ */ jsx17(DisplayNameInput, { onComplete, onSkip });
+  return /* @__PURE__ */ jsx18(DisplayNameInput, { onComplete, onSkip });
 }
 
 // src/internal/components/AuthMenu/PassKeyStep.tsx
 import { ArrowLeft as ArrowLeft3, Key as Key3 } from "lucide-react";
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback5 } from "react";
 
 // src/internal/assets/PasskeyAddIcon.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function PasskeyAddIcon(props) {
   const { width = "24", height = "24", className = "w-6 h-6", ...rest } = props;
   return /* @__PURE__ */ jsxs15(
@@ -6046,11 +6095,11 @@ function PasskeyAddIcon(props) {
       strokeLinejoin: "round",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx18("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
-        /* @__PURE__ */ jsx18("path", { d: "m21 2-9.6 9.6" }),
-        /* @__PURE__ */ jsx18("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
-        /* @__PURE__ */ jsx18("path", { d: "M18 15v6" }),
-        /* @__PURE__ */ jsx18("path", { d: "M21 18h-6" })
+        /* @__PURE__ */ jsx19("path", { d: "m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" }),
+        /* @__PURE__ */ jsx19("path", { d: "m21 2-9.6 9.6" }),
+        /* @__PURE__ */ jsx19("circle", { cx: "7.5", cy: "15.5", r: "5.5" }),
+        /* @__PURE__ */ jsx19("path", { d: "M18 15v6" }),
+        /* @__PURE__ */ jsx19("path", { d: "M21 18h-6" })
       ]
     }
   );
@@ -6060,16 +6109,16 @@ function PasskeyAddIcon(props) {
 init_auth();
 
 // src/internal/components/Expandable/hooks/useExpandable.ts
-import { useCallback as useCallback3, useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef5 } from "react";
 var useExpandable = (props) => {
   const { isExpanded = false, children, initHeight = 0, minHeight = 0 } = props;
   const expandableRef = useRef5(null);
   const contentRef = useRef5(null);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!expandableRef.current) return;
     expandableRef.current.style.setProperty("--ifo-basic-expandable-h", `${initHeight}px )`);
   }, []);
-  const setExpandableHeight = useCallback3(
+  const setExpandableHeight = useCallback4(
     (isExpnd) => {
       if (!contentRef.current || !expandableRef.current) return;
       expandableRef.current.style.setProperty(
@@ -6080,7 +6129,7 @@ var useExpandable = (props) => {
     //  ON_RESIZE_DELEAY),
     [minHeight]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!contentRef.current || !expandableRef.current) return;
     const obs = new ResizeObserver(() => setExpandableHeight(isExpanded));
     obs.observe(expandableRef.current);
@@ -6093,24 +6142,24 @@ var useExpandable = (props) => {
 };
 
 // src/internal/components/Expandable/Expandable.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function Expandable(props) {
   const { children, className, contentClassName, minHeight, divProps } = props;
   const { expandableRef, contentRef } = useExpandable(props);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "div",
     {
       ...divProps,
       ref: expandableRef,
       className: cn("w-full overflow-y-hidden", className),
       style: { height: "var(--ifo-basic-expandable-h)", transition: "height 375ms ease" },
-      children: /* @__PURE__ */ jsx19("div", { className: cn("w-full", contentClassName), ref: contentRef, style: minHeight ? { minHeight } : void 0, children })
+      children: /* @__PURE__ */ jsx20("div", { className: cn("w-full", contentClassName), ref: contentRef, style: minHeight ? { minHeight } : void 0, children })
     }
   );
 }
 
 // src/internal/components/AuthMenu/PassKeyStep.tsx
-import { Fragment as Fragment2, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function normalizeWebAuthnError(err) {
   const raw = err?.message || String(err || "");
   const lower = raw.toLowerCase();
@@ -6132,20 +6181,9 @@ function PassKeyStep(props) {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
   const autoCloseOnSuccess = !recoveryUserId;
-  const {
-    passkeyError,
-    passkeyStatus,
-    setStep,
-    setPasskeyError,
-    setPasskeyStatus,
-    setAlert,
-    setEmail,
-    setVerificationError,
-    setFailedMessage,
-    setFailedType
-  } = useAuthStore();
-  const onPasskeyRegister = useCallback4(async () => {
-    setPasskeyError("");
+  const { passkeyStatus, setStep, setPasskeyStatus, setAlert, setEmail, setFailedType } = useAuthStore();
+  const onPasskeyRegister = useCallback5(async () => {
+    setAlert(null);
     setPasskeyStatus("registering passkey...");
     setIsLoading(true);
     try {
@@ -6172,8 +6210,7 @@ function PassKeyStep(props) {
         if (onAuthSuccess) await onAuthSuccess();
         setStep("signin");
         setEmail("");
-        setVerificationError("");
-        setPasskeyError("");
+        setAlert(null);
         setPasskeyStatus("idle");
       } else {
         setPasskeyStatus("Passkey registered successfully!");
@@ -6195,7 +6232,10 @@ function PassKeyStep(props) {
           message: "This passkey is already registered for your account. No need to register again!"
         });
       } else if (!normalized.benignCancel) {
-        setPasskeyError(errorMessage);
+        setAlert({
+          title: "Passkey Error",
+          message: errorMessage
+        });
       }
       if (!normalized.benignCancel) {
         try {
@@ -6211,8 +6251,8 @@ function PassKeyStep(props) {
       setIsLoading(false);
     }
   }, [onAuthSuccess, setPage, callbacks]);
-  const onPasskeyAuth = useCallback4(async () => {
-    setPasskeyError("");
+  const onPasskeyAuth = useCallback5(async () => {
+    setAlert(null);
     setPasskeyStatus("checking available passkeys...");
     setIsLoading(true);
     try {
@@ -6228,9 +6268,10 @@ function PassKeyStep(props) {
       pendingLoginResponseRef.current = result.loginResponse;
       const hasKeyshare = result.loginResponse.hasKeyshare ?? false;
       if (!hasKeyshare && result.loginResponse.isNewUser === void 0) {
-        setFailedMessage(
-          "The backend could not determine user status. This indicates you probably already have used the passkey and did not create required backups.\n Unfortunately, your wallet cannot be recovered. You need to create account using a different passkey."
-        );
+        setAlert({
+          title: "Configuration Error",
+          message: "The backend could not determine user status. This indicates you probably already have used the passkey and did not create required backups.\n Unfortunately, your wallet cannot be recovered. You need to create account using a different passkey."
+        });
         setFailedType("config");
         setStep("failed");
         setPasskeyStatus("idle");
@@ -6238,9 +6279,10 @@ function PassKeyStep(props) {
         return;
       }
       if (!hasKeyshare && result.loginResponse.isNewUser === false) {
-        setFailedMessage(
-          "Your account data has been lost on the server.\nThis should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered.\nYou will need to create a new account.\n\nPlease contact support immediately with this error."
-        );
+        setAlert({
+          title: "Data has been lost",
+          message: "Your account data has been lost on the server.\nThis should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered.\nYou will need to create a new account.\n\nPlease contact support immediately with this error."
+        });
         setFailedType("critical");
         setStep("failed");
         setPasskeyStatus("idle");
@@ -6261,7 +6303,10 @@ function PassKeyStep(props) {
         if (onAuthSuccess) await onAuthSuccess();
       } catch (authError) {
         if (authError?.message?.includes("User denied authorization")) {
-          setFailedMessage("Authorization cancelled");
+          setAlert({
+            title: "Authorization Cancelled",
+            message: authError?.message || "You have cancelled the authorization process."
+          });
           setStep("failed");
           setPasskeyStatus("idle");
           return;
@@ -6271,8 +6316,7 @@ function PassKeyStep(props) {
       if (autoCloseOnSuccess) {
         setStep("signin");
         setEmail("");
-        setVerificationError("");
-        setPasskeyError("");
+        setAlert(null);
         setPasskeyStatus("idle");
         setPage(null);
       }
@@ -6280,7 +6324,10 @@ function PassKeyStep(props) {
       const normalized = normalizeWebAuthnError(e);
       const errorMessage = normalized.message || "Authentication failed";
       if (!normalized.benignCancel) {
-        setPasskeyError(errorMessage);
+        setAlert({
+          title: "Passkey Error",
+          message: errorMessage
+        });
         try {
           callbacks?.onLumiaPassportError?.({
             error: e instanceof Error ? e : new Error(errorMessage),
@@ -6297,8 +6344,8 @@ function PassKeyStep(props) {
   }, [onAuthSuccess, setPage, callbacks]);
   return /* @__PURE__ */ jsxs16(Expandable, { isExpanded: true, contentClassName: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: [
     /* @__PURE__ */ jsxs16("div", { className: "relative flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
-      /* @__PURE__ */ jsx20(Key3, { className: "w-6 h-6" }),
-      /* @__PURE__ */ jsx20("span", { className: "font-bold text-xl leading-6", children: "Passkey" }),
+      /* @__PURE__ */ jsx21(Key3, { className: "w-6 h-6" }),
+      /* @__PURE__ */ jsx21("span", { className: "font-bold text-xl leading-6", children: "Passkey" }),
       /* @__PURE__ */ jsxs16(
         Button,
         {
@@ -6309,25 +6356,24 @@ function PassKeyStep(props) {
           className: "absolute left-0 top-0 w-5 h-5",
           onClick: () => setStep("signin"),
           children: [
-            /* @__PURE__ */ jsx20(ArrowLeft3, { className: "h-4 w-4" }),
-            /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Back to SignIn" })
+            /* @__PURE__ */ jsx21(ArrowLeft3, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Back to SignIn" })
           ]
         }
       )
     ] }),
     /* @__PURE__ */ jsxs16(Button, { variant: "default", size: "large", className: "w-full", onClick: onPasskeyAuth, disabled: isLoading, children: [
-      /* @__PURE__ */ jsx20(Key3, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsx21(Key3, { className: "w-4 h-4" }),
       "Sign in with existing Passkey"
     ] }),
     config.passkey.showCreateButton && /* @__PURE__ */ jsxs16(Fragment2, { children: [
-      /* @__PURE__ */ jsx20("span", { className: "block w-full text-center text-sm text-[var(--l-pass-fg-muted)]", children: "Don't have a passkey?" }),
+      /* @__PURE__ */ jsx21("span", { className: "block w-full text-center text-sm text-[var(--l-pass-fg-muted)]", children: "Don't have a passkey?" }),
       /* @__PURE__ */ jsxs16(Button, { variant: "outline", size: "large", className: "w-full", onClick: onPasskeyRegister, disabled: isLoading, children: [
-        /* @__PURE__ */ jsx20(PasskeyAddIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx21(PasskeyAddIcon, { className: "w-4 h-4" }),
         "Create Passkey"
       ] })
     ] }),
-    passkeyError && /* @__PURE__ */ jsx20("div", { className: "w-full p-[var(--l-pass-pd)] rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-error)]", children: /* @__PURE__ */ jsx20("span", { className: "w-full block text-sm text-[var(--l-pass-error)] break-words whitespace-pre-wrap text-center", children: passkeyError }) }),
-    !passkeyError && passkeyStatus !== "idle" && /* @__PURE__ */ jsx20("div", { className: "w-full p-[var(--l-pass-pd)] rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-success)]", children: /* @__PURE__ */ jsx20("span", { className: "w-full block text-sm text-[var(--l-pass-success)] break-words whitespace-pre-wrap text-center", children: passkeyStatus }) })
+    passkeyStatus !== "idle" && /* @__PURE__ */ jsx21("div", { className: "w-full p-[var(--l-pass-pd)] rounded-[var(--l-pass-el-bdrs)] bg-[var(--l-pass-bg-success)]", children: /* @__PURE__ */ jsx21("span", { className: "w-full block text-sm text-[var(--l-pass-success)] break-words whitespace-pre-wrap text-center", children: passkeyStatus }) })
   ] });
 }
 
@@ -6341,40 +6387,13 @@ init_projectId();
 import { useMutation as useMutation4 } from "@tanstack/react-query";
 import { ChevronRight, Loader as Loader3, Mail as Mail3 } from "lucide-react";
 import { useRef as useRef6 } from "react";
-
-// src/internal/components/ui/highlight.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
-var CARD_STYLES = {
-  info: "text-[var(--l-pass-info)] bg-[var(--l-pass-bg-info)]",
-  success: "text-[var(--l-pass-success)] bg-[var(--l-pass-bg-success)]",
-  warning: "text-[var(--l-pass-warning)] bg-[var(--l-pass-bg-warning)]",
-  error: "text-[var(--l-pass-error)] bg-[var(--l-pass-bg-error)]"
-};
-function Highlight(props) {
-  const { type = "info", children, className } = props;
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: cn(
-        "w-full text-xs rounded-[var(--l-pass-el-bdrs)] p-[var(--l-pass-pd)]",
-        "whitespace-pre-line",
-        type === "error" ? "break-all" : "break-normal",
-        CARD_STYLES[type],
-        className
-      ),
-      children
-    }
-  );
-}
-
-// src/internal/components/AuthMenu/SignInStep/Email.tsx
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 function Email() {
   const { config, callbacks } = useLumiaPassportConfig();
   const buttonRef = useRef6(null);
   const isLoading = useLumiaPassportSession((st) => st.isLoading);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const { email, codeSendError, alert: alert2, setEmail, setCodeSendError, setExpiresIn, setStep, setAlert } = useAuthStore();
+  const { email, alert: alert2, setEmail, setExpiresIn, setStep, setAlert } = useAuthStore();
   const { mutate: onSendVerificationCode } = useMutation4({
     mutationFn: async (mail) => {
       const isEmailValid = mail.length !== 0 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail);
@@ -6382,7 +6401,7 @@ function Email() {
         throw new Error("Invalid email format, please correct and try again.");
       }
       setIsLoading(true);
-      setCodeSendError("");
+      setAlert(null);
       const apiUrl = addProjectIdToUrl(`${getServiceUrls().tssUrl}/api/auth/email/send-code`);
       return await fetch(apiUrl, {
         method: "POST",
@@ -6399,83 +6418,75 @@ function Email() {
       } else {
         if (response.status === 429) {
           const retryAfter = data.retryAfter || 60;
-          setCodeSendError(`Code already sent recently. Please wait ${retryAfter} seconds before requesting another.`);
+          setAlert({
+            title: "Code already sent recently (Too Many Requests)",
+            message: `Please wait ${retryAfter} seconds before requesting another.`
+          });
         } else if (response.status === 400) {
-          setCodeSendError(data.message || "Invalid email address");
+          setAlert({
+            title: "Failed to send verification code",
+            message: data.message || "Unknown error occurred"
+          });
         } else {
-          setCodeSendError(data.message || "Failed to send verification code");
+          setAlert({
+            title: "Failed to send verification code",
+            message: data.message || "Unknown error occurred"
+          });
         }
       }
       setIsLoading(false);
     },
     onError: (error) => {
       callbacks?.onLumiaPassportError?.({ error, message: error?.message || "" });
-      setCodeSendError(error?.message || "Network error. Please check your connection.");
+      setAlert({
+        title: "Failed to send verification code",
+        message: error?.message || "Unknown error occurred"
+      });
       setIsLoading(false);
     }
   });
-  return /* @__PURE__ */ jsxs17(Expandable, { isExpanded: true, contentClassName: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
-    /* @__PURE__ */ jsxs17(
-      "div",
-      {
-        className: "w-full flex gap-[10px] items-center",
-        onKeyDown: (e) => {
-          if (e.key === "Enter" && !isLoading && email) {
-            buttonRef.current?.click();
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx22(
-            Input,
-            {
-              name: "signin-email",
-              Icon: Mail3,
-              type: "email",
-              autoComplete: "off",
-              placeholder: config.current?.email?.placeholder || "Enter your email",
-              value: email,
-              disabled: isLoading,
-              className: "flex-1 w-full",
-              onChange: (e) => {
-                if (alert2) setAlert(null);
-                setEmail(e.target.value);
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx22(
-            Button,
-            {
-              ref: buttonRef,
-              className: "w-12 h-12 flex-none",
-              variant: "default",
-              size: "large",
-              disabled: !email || isLoading,
-              onClick: () => onSendVerificationCode(email),
-              children: isLoading ? /* @__PURE__ */ jsx22(Loader3, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx22(ChevronRight, { className: "w-4 h-4" })
+  return /* @__PURE__ */ jsx22("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: "w-full flex gap-[10px] items-center",
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && !isLoading && email) {
+          buttonRef.current?.click();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx22(
+          Input,
+          {
+            name: "signin-email",
+            Icon: Mail3,
+            type: "email",
+            autoComplete: "off",
+            placeholder: config.current?.email?.placeholder || "Enter your email",
+            value: email,
+            disabled: isLoading,
+            className: "flex-1 w-full",
+            onChange: (e) => {
+              if (alert2) setAlert(null);
+              setEmail(e.target.value);
             }
-          )
-        ]
-      }
-    ),
-    !!codeSendError && /* @__PURE__ */ jsxs17(Highlight, { type: "warning", className: "flex gap-[var(--l-pass-gap)]", children: [
-      /* @__PURE__ */ jsx22(Mail3, { className: "w-4 h-4" }),
-      /* @__PURE__ */ jsx22("span", { children: codeSendError })
-    ] })
-  ] });
-}
-
-// src/internal/components/AuthMenu/SignInStep/ErrorAlert.tsx
-import { AlertTriangle as AlertTriangle2 } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
-function ErrorAlert(props) {
-  const { title, message } = props;
-  return /* @__PURE__ */ jsxs18(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)]", children: [
-    /* @__PURE__ */ jsx23(AlertTriangle2, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
-    /* @__PURE__ */ jsxs18("div", { className: "w-full flex-1", children: [
-      /* @__PURE__ */ jsx23("span", { className: "block w-full font-bold", children: title }),
-      /* @__PURE__ */ jsx23("span", { className: "block w-full whitespace-pre-line", children: message })
-    ] })
-  ] });
+          }
+        ),
+        /* @__PURE__ */ jsx22(
+          Button,
+          {
+            ref: buttonRef,
+            className: "w-12 h-12 flex-none",
+            variant: "default",
+            size: "large",
+            disabled: !email || isLoading,
+            onClick: () => onSendVerificationCode(email),
+            children: isLoading ? /* @__PURE__ */ jsx22(Loader3, { className: "w-4 h-4 animate-spin" }) : /* @__PURE__ */ jsx22(ChevronRight, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  ) });
 }
 
 // src/internal/components/AuthMenu/SignInStep/Social.tsx
@@ -6484,28 +6495,26 @@ init_lumiaPassport();
 init_auth();
 init_projectId();
 import { Key as Key4 } from "lucide-react";
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback6 } from "react";
 
 // src/internal/components/AuthMenu/SignInStep/utils.ts
-var POSSIBLE_SIGNIN_METHODS = [
-  "email",
-  "passkey",
-  "social"
-  // 'wallet'
-];
+var POSSIBLE_SIGNIN_METHODS = ["email", "passkey", "social", "wallet"];
 function getSignInEnabledMethods(params) {
   const { order, config, exclude } = params;
   const enabled = new Array(POSSIBLE_SIGNIN_METHODS.length).fill(null);
+  const unordered = new Array(POSSIBLE_SIGNIN_METHODS.length).fill(null);
   POSSIBLE_SIGNIN_METHODS.forEach((sign) => {
     const orderedIdx = order.indexOf(sign);
     if (orderedIdx < 0) {
-      const unordered = config[sign]?.enabled ? sign : null;
-      enabled.push(unordered);
+      unordered.push(config[sign]?.enabled ? sign : null);
     } else {
       enabled[orderedIdx] = config[sign]?.enabled ? sign : null;
     }
   });
-  return enabled.filter(Boolean).filter((s) => !exclude.includes(s));
+  return [
+    ...enabled.filter(Boolean).filter((s) => !exclude.includes(s)),
+    ...unordered.filter(Boolean).filter((s) => !exclude.includes(s))
+  ];
 }
 async function normalizeSocialLoginResponse(rawLoginResponse, providerKey, userData) {
   if (!rawLoginResponse) {
@@ -6545,7 +6554,7 @@ async function normalizeSocialLoginResponse(rawLoginResponse, providerKey, userD
 }
 
 // src/internal/components/AuthMenu/SignInStep/Social.tsx
-import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var SUPPORTED_PROVIDERS = ["telegram", "x", "twitter"];
 var SOCIAL_ICONS = {
   google: GoogleIcon,
@@ -6653,18 +6662,8 @@ function Social(props) {
   const { config, callbacks } = useLumiaPassportConfig();
   const isLoading = useLumiaPassportSession((st) => st.isLoading);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const {
-    alert: alert2,
-    setStep,
-    setEmail,
-    setVerificationError,
-    setFailedType,
-    setAlert,
-    setFailedMessage,
-    setPasskeyError,
-    setPasskeyStatus
-  } = useAuthStore();
-  const onSocialAuth = useCallback5(
+  const { alert: alert2, setStep, setEmail, setFailedType, setAlert, setPasskeyStatus } = useAuthStore();
+  const onSocialAuth = useCallback6(
     async (providerId) => {
       const normalizedProviderId = providerId.toLowerCase();
       const provider = config.current?.social?.providers?.find(
@@ -6718,9 +6717,10 @@ function Social(props) {
               loginResponse2.hasKeyshare = false;
               loginResponse2.isNewUser = false;
             } else {
-              setFailedMessage(
-                "The backend could not determine user status. This indicates that your projectId is not properly configured or the project metadata is missing.\n\nPlease contact support with your projectId to resolve this issue."
-              );
+              setAlert({
+                title: "Configuration Error",
+                message: "The backend could not determine user status. This indicates that your projectId is not properly configured or the project metadata is missing.\n\nPlease contact support with your projectId to resolve this issue."
+              });
               setFailedType("config");
               setStep("failed");
               setIsLoading(false);
@@ -6729,9 +6729,10 @@ function Social(props) {
             }
           }
           if (loginResponse2.hasKeyshare === false && loginResponse2.isNewUser === false && providerKey !== "x") {
-            setFailedMessage(
-              "Your account data has been lost on the server.\nThis should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered.\nYou will need to create a new account.\n\nPlease contact support immediately with this error."
-            );
+            setAlert({
+              title: "Account Data Lost",
+              message: "Your account data has been lost on the server. This should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered. You will need to create a new account.\n\nPlease contact support immediately with this error."
+            });
             setFailedType("critical");
             setStep("failed");
             setIsLoading(false);
@@ -6781,16 +6782,14 @@ function Social(props) {
             onAuthSuccess?.();
             setStep("signin");
             setEmail("");
-            setVerificationError("");
-            setPasskeyError("");
+            setAlert(null);
             setPasskeyStatus("idle");
             setIsLoading(false);
           } else {
             onAuthSuccess?.();
             setStep("signin");
             setEmail("");
-            setVerificationError("");
-            setPasskeyError("");
+            setAlert(null);
             setPasskeyStatus("idle");
             setIsLoading(false);
           }
@@ -6880,13 +6879,13 @@ function Social(props) {
   );
   const isPasskey = config.current?.passkey?.enabled;
   const gridCols = (config.current?.social?.gridColumns || 1) + (isPasskey ? 1 : 0);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: "grid gap-[var(--l-pass-gap)]",
       style: { gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))` },
       children: [
-        isPasskey && /* @__PURE__ */ jsx24(
+        isPasskey && /* @__PURE__ */ jsx23(
           Button,
           {
             variant: "outline",
@@ -6898,7 +6897,7 @@ function Social(props) {
             },
             disabled: isLoading,
             title: "Passkey",
-            children: /* @__PURE__ */ jsx24(Key4, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ jsx23(Key4, { className: "w-5 h-5" })
           }
         ),
         config.current?.social?.providers.filter((provider) => provider.enabled).map((provider) => {
@@ -6906,7 +6905,7 @@ function Social(props) {
           const isSupported = SUPPORTED_PROVIDERS.includes(providerId);
           const IconComponent = config.current?.ui?.useExternalIcons ? provider.icon : SOCIAL_ICONS[providerId];
           const handleClick = isSupported ? () => onSocialAuth(providerId) : () => setAlert({ title: "Coming Soon", message: `${provider.name} authentication is coming soon!` });
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx23(
             Button,
             {
               variant: "outline",
@@ -6918,7 +6917,7 @@ function Social(props) {
               },
               disabled: isLoading,
               title: provider.comingSoon ? `${provider.name} (Coming Soon)` : provider.name,
-              children: IconComponent ? /* @__PURE__ */ jsx24(IconComponent, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx24("span", { className: "text-lg font-bold", children: provider.name.slice(0, 1).toUpperCase() })
+              children: IconComponent ? /* @__PURE__ */ jsx23(IconComponent, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx23("span", { className: "text-lg font-bold", children: provider.name.slice(0, 1).toUpperCase() })
             },
             provider.id
           );
@@ -6928,12 +6927,35 @@ function Social(props) {
   );
 }
 
+// src/internal/components/AuthMenu/SignInStep/Wallet.tsx
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+function Wallet() {
+  const setAlert = useAuthStore((st) => st.setAlert);
+  const setIsWalletLinking = useLayoutDataStore((st) => st.setIsWalletLinking);
+  const Icon = PROVIDERS_META2.wallet.icon;
+  return /* @__PURE__ */ jsxs19(
+    Button,
+    {
+      size: "large",
+      variant: "outline",
+      className: "w-full",
+      onClick: () => {
+        setAlert(null);
+        setIsWalletLinking(true);
+      },
+      children: [
+        /* @__PURE__ */ jsx24(Icon, { className: "w-5 h-5" }),
+        "Wallet"
+      ]
+    }
+  );
+}
+
 // src/internal/components/AuthMenu/SignInStep/SignInStep.tsx
 import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function SignInStep(props) {
   const { pendingLoginResponseRef, onAuthSuccess, checkDisplayNameRequired } = props;
   const { config } = useLumiaPassportConfig();
-  const alert2 = useAuthStore((st) => st.alert);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const enabledWoPasskey = getSignInEnabledMethods({
     config: config.current,
@@ -6949,24 +6971,22 @@ function SignInStep(props) {
         onAuthSuccess,
         checkDisplayNameRequired
       }
-    )
+    ),
+    wallet: /* @__PURE__ */ jsx25(Wallet, {})
   };
   return /* @__PURE__ */ jsxs20("div", { className: "w-full p-[var(--l-pass-pd)] flex flex-col gap-[var(--l-pass-gap)]", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
       /* @__PURE__ */ jsx25(UserCircle, { className: "w-6 h-6" }),
       /* @__PURE__ */ jsx25("span", { className: "font-bold text-xl leading-6", children: "Sign In" })
     ] }),
-    /* @__PURE__ */ jsxs20("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
-      enabledWoPasskey.map((kind, idx) => /* @__PURE__ */ jsxs20(Fragment3, { children: [
-        idx > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx25("div", { style: { borderTop: "1px solid var(--l-pass-bd)" }, className: "flex-1" }),
-          /* @__PURE__ */ jsx25("div", { className: "flex-none px-2 text-xs leading-4", children: "Or sign in using" }),
-          /* @__PURE__ */ jsx25("div", { style: { borderTop: "1px solid var(--l-pass-bd)" }, className: "flex-1" })
-        ] }, `auth-method-${kind}-${idx}`),
-        signInMethods[kind]
-      ] }, `fragment-${idx}`)),
-      !!alert2 && /* @__PURE__ */ jsx25(ErrorAlert, { title: alert2.title, message: alert2.message })
-    ] }),
+    /* @__PURE__ */ jsx25("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: enabledWoPasskey.map((kind, idx) => /* @__PURE__ */ jsxs20(Fragment3, { children: [
+      idx > 0 && /* @__PURE__ */ jsxs20("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsx25("div", { style: { borderTop: "1px solid var(--l-pass-bd)" }, className: "flex-1" }),
+        /* @__PURE__ */ jsx25("div", { className: "flex-none px-2 text-xs leading-4", children: "Or" }),
+        /* @__PURE__ */ jsx25("div", { style: { borderTop: "1px solid var(--l-pass-bd)" }, className: "flex-1" })
+      ] }, `auth-method-${kind}-${idx}`),
+      signInMethods[kind]
+    ] }, `fragment-${idx}`)) }),
     /* @__PURE__ */ jsxs20("div", { className: "w-full flex items-center gap-2 justify-center", children: [
       /* @__PURE__ */ jsx25("span", { className: "text-[10px] font-medium", children: "By signing in, you agree to the" }),
       /* @__PURE__ */ jsx25(
@@ -6986,7 +7006,7 @@ function SignInStep(props) {
 // src/internal/components/AuthMenu/useAuthMenuHanders.ts
 init_auth();
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
-import { useCallback as useCallback6, useRef as useRef7, useState as useState5 } from "react";
+import { useCallback as useCallback7, useRef as useRef7, useState as useState5 } from "react";
 function useAuthMenuHandlers() {
   const { config, callbacks } = useLumiaPassportConfig();
   const qc = useQueryClient2();
@@ -6994,8 +7014,9 @@ function useAuthMenuHandlers() {
   const setPage = useLayoutDataStore((st) => st.setPage);
   const [telegramCleanup, setTelegramCleanup] = useState5(null);
   const { usePaymaster, setError, setStatus, setSession, setAddress, setRecoveryUserId, setHasServerVault } = useLumiaPassportSession();
-  const { setStep, setVerificationError, setCodeSendError, setFailedMessage } = useAuthStore();
-  const createSessionWithKeyshare = useCallback6(
+  const setStep = useAuthStore((st) => st.setStep);
+  const setAlert = useAuthStore((st) => st.setAlert);
+  const createSessionWithKeyshare = useCallback7(
     async (userId, hasServerKeyshare, isNewUser) => {
       try {
         try {
@@ -7029,7 +7050,7 @@ function useAuthMenuHandlers() {
     },
     [setStatus, callbacks, usePaymaster]
   );
-  const onAuthSuccess = useCallback6(async () => {
+  const onAuthSuccess = useCallback7(async () => {
     const loginResponse = pendingLoginResponseRef.current;
     if (!loginResponse || !loginResponse.userId) {
       setError("Authentication failed - no login data available");
@@ -7057,7 +7078,7 @@ function useAuthMenuHandlers() {
         jwt?.isNewUser
       );
       setError(null);
-      setFailedMessage(null);
+      setAlert(null);
       setSession(sess);
       setAddress(addr);
       setStatus("ready");
@@ -7095,7 +7116,10 @@ function useAuthMenuHandlers() {
         await jwtTokenManager2.clearTokens();
         setStatus("error");
         setError(error?.message || String(error));
-        setFailedMessage("Authorization cancelled");
+        setAlert({
+          title: "Authorization cancelled",
+          message: error?.message || String(error) || "An unknown error occurred during authentication."
+        });
         setStep("failed");
       }
     }
@@ -7107,12 +7131,13 @@ function useAuthMenuHandlers() {
     setError,
     setStatus,
     setSession,
+    setAlert,
     setAddress,
     setRecoveryUserId,
     setHasServerVault,
     createSessionWithKeyshare
   ]);
-  const checkDisplayNameRequired = useCallback6(async (loginResponse) => {
+  const checkDisplayNameRequired = useCallback7(async (loginResponse) => {
     if (!config.current?.features?.displayNameNeeded) {
       return false;
     }
@@ -7136,15 +7161,14 @@ function useAuthMenuHandlers() {
       return false;
     }
   }, []);
-  const goBackToSignIn = useCallback6(() => {
+  const goBackToSignIn = useCallback7(() => {
     setStep("signin");
-    setVerificationError("");
-    setCodeSendError("");
+    setAlert(null);
     if (telegramCleanup) {
       telegramCleanup();
       setTelegramCleanup(null);
     }
-  }, [setStep, setVerificationError, setCodeSendError, telegramCleanup]);
+  }, [setStep, setAlert, telegramCleanup]);
   return {
     pendingLoginResponseRef,
     onAuthSuccess,
@@ -7153,35 +7177,6 @@ function useAuthMenuHandlers() {
   };
 }
 
-// src/internal/components/AuthMenu/useListenIframeAuthEvents.ts
-import { useCallback as useCallback7, useEffect as useEffect9 } from "react";
-function useListenIframeAuthEvents() {
-  const setPage = useLayoutDataStore((state) => state.setPage);
-  const setIsIframeReady = useLumiaPassportSession((state) => state.setIsIframeReady);
-  const handleIframeMessage = useCallback7(
-    (event) => {
-      console.log("[AuthMenu] Received iframe message:", event.data);
-      if (event.data?.type === "LUMIA_PASSPORT_IFRAME_READY") {
-        console.log("[AuthMenu] Iframe is ready");
-        setIsIframeReady(true);
-      } else if (event.data?.type === "LUMIA_PASSPORT_SHOW_IFRAME") {
-        console.log("[AuthMenu] Consent screen shown - hiding auth modal");
-        setPage(null);
-      } else if (event.data?.type === "LUMIA_PASSPORT_HIDE_IFRAME") {
-        console.log("[AuthMenu] Consent screen hidden");
-      } else if (event.data?.type === "KEYSHARE_RECOVERY_NEEDED") {
-        console.log("[AuthMenu] recovery neede");
-        setPage("keyshare-restore" /* KEYSHARE_RESTORE */);
-      }
-    },
-    [setPage, setIsIframeReady]
-  );
-  useEffect9(() => {
-    window.addEventListener("message", handleIframeMessage);
-    return () => window.removeEventListener("message", handleIframeMessage);
-  }, [handleIframeMessage]);
-}
-
 // src/internal/components/AuthMenu/VerifyStep/VerifyStep.tsx
 init_lumiaPassport();
 import { useMutation as useMutation5 } from "@tanstack/react-query";
@@ -7208,8 +7203,8 @@ init_projectId();
 import { useEffect as useEffect10, useRef as useRef8, useState as useState6 } from "react";
 import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var VerificationCodeInput = (props) => {
-  const { onVerifyCode, onResendCode, isLoading, expiresIn, error } = props;
-  const setVerificationError = useAuthStore((st) => st.setVerificationError);
+  const { onVerifyCode, onResendCode, isLoading, expiresIn } = props;
+  const setAlert = useAuthStore((st) => st.setAlert);
   const [timeLeft, setTimeLeft] = useState6(expiresIn);
   useEffect10(() => setTimeLeft(expiresIn), [expiresIn]);
   useEffect10(() => {
@@ -7305,7 +7300,6 @@ var VerificationCodeInput = (props) => {
       },
       i
     )) }),
-    error && /* @__PURE__ */ jsx27("div", { className: "w-full bg-[var(--l-pass-bg-error)] p-[var(--l-pass-pd)] rounded-[var(--l-pass-el-bdrs)]", children: /* @__PURE__ */ jsx27("span", { className: "w-full block text-sm text-[var(--l-pass-error)] break-words whitespace-pre-wrap text-center", children: error }) }),
     /* @__PURE__ */ jsxs21("div", { className: "text-xs", children: [
       "Code expires in ",
       mm,
@@ -7323,8 +7317,8 @@ var VerificationCodeInput = (props) => {
           className: "text-xs h-fit px-0 leading-4 text-[var(--l-pass-fg-muted)] underline underline-offset-4",
           onClick: () => {
             if (!timeLeft) return onResendCode();
-            setVerificationError("Please wait until the current code expires to resend.");
-            setTimeout(() => setVerificationError(""), 3e3);
+            setAlert({ title: "Please wait", message: "Please wait until the current code expires to resend." });
+            setTimeout(() => setAlert(null), 3e3);
           },
           children: "Resend"
         }
@@ -7345,18 +7339,16 @@ function VerifyStep(props) {
   const {
     email,
     expiresIn,
-    verificationError,
-    setVerificationError,
-    setFailedMessage,
     setFailedType,
     setStep,
     setEmail,
-    setExpiresIn
+    setExpiresIn,
+    setAlert
   } = useAuthStore();
   const { mutate: onVerifyCode, isPending: isCodeVerifying } = useMutation5({
     mutationFn: async (code) => {
       setIsLoading(true);
-      setVerificationError("");
+      setAlert(null);
       const { loginWithEmail: loginWithEmail2 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
       const loginResponse = await loginWithEmail2(email, code, { skipTokenSave: true });
       pendingLoginResponseRef.current = loginResponse;
@@ -7364,9 +7356,10 @@ function VerifyStep(props) {
     },
     onSuccess: async (loginResponse) => {
       if (!loginResponse.hasKeyshare && loginResponse.isNewUser === void 0) {
-        setFailedMessage(
-          "The backend could not determine user status. This indicates that your projectId is not properly configured or the project metadata is missing.\n\nPlease contact support with your projectId to resolve this issue."
-        );
+        setAlert({
+          title: "Configuration Error",
+          message: "The backend could not determine user status. This indicates that your projectId is not properly configured or the project metadata is missing.\n\nPlease contact support with your projectId to resolve this issue."
+        });
         setFailedType("config");
         setStep("failed");
         pendingLoginResponseRef.current = null;
@@ -7374,9 +7367,10 @@ function VerifyStep(props) {
         return;
       }
       if (!loginResponse.hasKeyshare && loginResponse.isNewUser === false) {
-        setFailedMessage(
-          "Your account data has been lost on the server.\nThis should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered.\nYou will need to create a new account.\n\nPlease contact support immediately with this error."
-        );
+        setAlert({
+          title: "Account Data Lost",
+          message: "Your account data has been lost on the server. This should never happen and indicates a serious system failure.\n\nUnfortunately, your wallet cannot be recovered. You will need to create a new account.\n\nPlease contact support immediately with this error."
+        });
         setFailedType("critical");
         setStep("failed");
         pendingLoginResponseRef.current = null;
@@ -7402,7 +7396,7 @@ function VerifyStep(props) {
       if (!recoveryUserId && !needsRecovery) {
         setStep("signin");
         setEmail("");
-        setVerificationError("");
+        setAlert(null);
         setPage(null);
       }
       setIsLoading(false);
@@ -7418,7 +7412,10 @@ function VerifyStep(props) {
       } else {
         errorMessage = error.message || "Verification failed. Please try again.";
       }
-      setVerificationError(errorMessage);
+      setAlert({
+        title: "Verification failed",
+        message: errorMessage
+      });
       callbacks?.onLumiaPassportError?.({
         error: error instanceof Error ? error : new Error(errorMessage),
         message: errorMessage
@@ -7428,7 +7425,7 @@ function VerifyStep(props) {
   });
   const { mutate: onResendCode, isPending: isCodeResending } = useMutation5({
     mutationFn: async () => {
-      setVerificationError("");
+      setAlert(null);
       setIsLoading(true);
       const response = await fetch(addProjectIdToUrl(`${getServiceUrls().tssUrl}/api/auth/email/send-code`), {
         method: "POST",
@@ -7444,17 +7441,24 @@ function VerifyStep(props) {
         setExpiresIn(data.expiresIn || 300);
       }
       if (!response.ok && response.status === 429) {
-        setVerificationError(
-          `Code already sent recently. Please wait ${data.retryAfter || 60} seconds before requesting another.`
-        );
+        setAlert({
+          title: "Code already sent recently (Too Many Requests)",
+          message: `Please wait ${data.retryAfter || 60} seconds before requesting another.`
+        });
       }
       if (!response.ok && response.status !== 429) {
-        setVerificationError(data.message || "Failed to resend verification code");
+        setAlert({
+          title: "Failed to resend verification code",
+          message: data.message || "Unknown error occurred"
+        });
       }
       setIsLoading(false);
     },
     onError: (err) => {
-      setVerificationError(err.message || "Network error. Please check your connection.");
+      setAlert({
+        title: "Failed to resend verification code",
+        message: err.message || "Unknown error occurred"
+      });
       setIsLoading(false);
     }
   });
@@ -7491,8 +7495,7 @@ function VerifyStep(props) {
         onVerifyCode,
         onResendCode,
         isLoading,
-        expiresIn,
-        error: verificationError
+        expiresIn
       }
     )
   ] });
@@ -7502,31 +7505,17 @@ function VerifyStep(props) {
 import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var AuthMenu = () => {
   const isIframeReady = useLumiaPassportSession((st) => st.isIframeReady);
-  const page = useLayoutDataStore((st) => st.page);
   const setMainPageHeight = useLayoutDataStore((st) => st.setMainPageHeight);
-  useEffect11(() => setMainPageHeight(DEFAULT_AUTH_MENU_HEIGHT), [setMainPageHeight]);
-  const {
-    step,
-    setStep,
-    setPasskeyError,
-    setPasskeyStatus,
-    setEmail,
-    setVerificationError,
-    setFailedMessage,
-    setCodeSendError
-  } = useAuthStore();
+  const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
+  useEffect11(() => setMainPageHeight(DEFAULT_AUTH_MENU_HEIGHT), []);
   useEffect11(() => {
-    if (page !== "auth" /* AUTH */) {
+    return () => {
       setStep("signin");
       setEmail("");
-      setVerificationError("");
-      setCodeSendError("");
-      setPasskeyError("");
       setPasskeyStatus("idle");
-      setFailedMessage("");
-    }
-  }, [page]);
-  useListenIframeAuthEvents();
+      setAlert(null);
+    };
+  }, []);
   const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn, checkDisplayNameRequired } = useAuthMenuHandlers();
   if (!isIframeReady) {
     return /* @__PURE__ */ jsxs23("div", { className: "w-full p-8 flex flex-col justify-center items-center gap-[var(--l-pass-gap)]", children: [
@@ -7566,21 +7555,28 @@ var AuthMenu = () => {
     }),
     [onAuthSuccess, goBackToSignIn, checkDisplayNameRequired]
   );
-  return (
-    // simple wrap by div
-    /* @__PURE__ */ jsx29("div", { className: "w-full", children: /* @__PURE__ */ jsx29(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx29(
-      motion.div,
-      {
-        initial: { opacity: 0, height: DEFAULT_AUTH_MENU_HEIGHT },
-        animate: { opacity: 1, height: "auto" },
-        exit: { opacity: 0, height: DEFAULT_AUTH_MENU_HEIGHT },
-        style: { overflow: "hidden" },
-        transition: Y_ANIMATION_SETUP,
-        children: stepContent[step]
-      },
-      step
-    ) }) })
-  );
+  return /* @__PURE__ */ jsx29("div", { className: "w-full", children: /* @__PURE__ */ jsx29(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxs23(
+    motion.div,
+    {
+      initial: { opacity: 0, height: DEFAULT_AUTH_MENU_HEIGHT },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: DEFAULT_AUTH_MENU_HEIGHT },
+      style: { overflow: "hidden" },
+      transition: Y_ANIMATION_SETUP,
+      children: [
+        stepContent[step],
+        !!alert2 && // <Expandable isExpanded contentClassName="px-[var(--l-pass-pd)]">
+        /* @__PURE__ */ jsxs23(Highlight, { type: "error", className: "w-full flex gap-[var(--l-pass-gap)]", children: [
+          /* @__PURE__ */ jsx29(AlertTriangle2, { className: "w-5 h-5 text-[var(--l-pass-error)]" }),
+          /* @__PURE__ */ jsxs23("span", { className: "block w-full flex flex-col gap-1 flex-1", children: [
+            /* @__PURE__ */ jsx29("span", { className: "block font-bold leading-5", children: alert2.title }),
+            /* @__PURE__ */ jsx29("span", { className: "block whitespace-pre-line", children: alert2.message })
+          ] })
+        ] })
+      ]
+    },
+    step
+  ) }) });
 };
 
 // src/internal/components/BuyMenu/ByuMenu.tsx
@@ -9431,29 +9427,21 @@ import { ChevronRight as ChevronRight3, Loader as Loader12, Mail as Mail4 } from
 // src/internal/components/ManageWalletMenu/hooks/useStore.ts
 import { create as create5 } from "zustand";
 var useManageWalletStore = create5((set) => ({
+  alert: null,
   emailStep: "input",
   email: "",
   emailCode: "",
-  emailCodeSentError: "",
   emailCodeExpiresIn: 0,
-  isWalletLinking: false,
   linkIsLoading: false,
-  linkError: "",
-  verificationError: "",
   providerType: null,
   confirmUnlink: null,
+  setAlert: (alert2) => set({ alert: alert2 }),
   setEmailStep: (emailStep) => set({ emailStep }),
   setEmail: (email) => set({ email }),
   setEmailCode: (emailCode) => set({ emailCode }),
-  setEmailCodeSentError: (emailCodeSentError) => set({ emailCodeSentError }),
   setEmailCodeExpiresIn: (emailCodeExpiresIn) => set({ emailCodeExpiresIn }),
-  setIsWalletLinking: (isWalletLinking) => set({ isWalletLinking }),
   setLinkIsLoading: (linkIsLoading) => set({ linkIsLoading }),
-  setLinkError: (linkError) => set({ linkError }),
-  setVerificationError: (verificationError) => set({ verificationError }),
-  setProviderType: (providerType) => {
-    set({ providerType });
-  },
+  setProviderType: (providerType) => set({ providerType }),
   setConfirmUnlink: (confirmUnlink) => set({ confirmUnlink })
 }));
 
@@ -9466,12 +9454,12 @@ function EmailForm() {
   } = useLumiaPassportConfig();
   const isLoading = useLumiaPassportSession((st) => st.isLoading);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const { email, setEmail, setEmailCodeSentError, setEmailCodeExpiresIn, setEmailStep } = useManageWalletStore();
+  const { email, setEmail, setAlert, setEmailCodeExpiresIn, setEmailStep } = useManageWalletStore();
   const { mutate: onSendVerificationCode } = useMutation11({
     mutationFn: async () => {
       if (!email) return;
       setIsLoading(true);
-      setEmailCodeSentError("");
+      setAlert(null);
       try {
         const response = await fetch(addProjectIdToUrl(`${getServiceUrls().tssUrl}/api/auth/email/send-code`), {
           method: "POST",
@@ -9491,18 +9479,28 @@ function EmailForm() {
         } else {
           if (response.status === 429) {
             const retryAfter = data.retryAfter || 60;
-            setEmailCodeSentError(
-              `Code already sent recently. Please wait ${retryAfter} seconds before requesting another.`
-            );
+            setAlert({
+              title: "Too Many Requests",
+              message: `Code already sent recently. Please wait ${retryAfter} seconds before requesting another.`
+            });
           } else if (response.status === 400) {
-            setEmailCodeSentError(data.message || "Invalid email address");
+            setAlert({
+              title: "Invalid Email",
+              message: data.message || "Invalid email address"
+            });
           } else {
-            setEmailCodeSentError(data.message || "Failed to send verification code");
+            setAlert({
+              title: "Error",
+              message: data.message || "Failed to send verification code"
+            });
           }
         }
       } catch (error) {
         const errorMessage = "Network error. Please check your connection.";
-        setEmailCodeSentError(errorMessage);
+        setAlert({
+          title: "Network Error",
+          message: errorMessage
+        });
         try {
           callbacks?.onLumiaPassportError?.({
             error: error instanceof Error ? error : new Error(errorMessage),
@@ -9547,19 +9545,21 @@ function EmailForm() {
 init_email();
 import { useMutation as useMutation12 } from "@tanstack/react-query";
 function useSendVerificationCode() {
-  const { setVerificationError, setLinkIsLoading, setEmailCodeSentError, setEmailCodeExpiresIn } = useManageWalletStore();
+  const setAlert = useManageWalletStore((st) => st.setAlert);
+  const setLinkIsLoading = useManageWalletStore((st) => st.setLinkIsLoading);
+  const setEmailCodeExpiresIn = useManageWalletStore((st) => st.setEmailCodeExpiresIn);
   return useMutation12({
     mutationFn: async (email) => {
       if (!email) {
         throw new Error("Email is required");
       }
-      setVerificationError("");
+      setAlert(null);
       setLinkIsLoading(true);
       await sendEmailLinkCode(email);
     },
     onError: (error) => {
       console.error("Failed to send verification code", error.message);
-      setEmailCodeSentError(error?.message || "Failed to send verification code");
+      setAlert({ title: "Error", message: error?.message || "Failed to send verification code" });
       setLinkIsLoading(false);
     },
     onSuccess: () => {
@@ -9578,28 +9578,17 @@ function useVerifyCode() {
   const qc = useQueryClient10();
   const address = useLumiaPassportSession((st) => st.address);
   const setIsLoading = useLumiaPassportSession((st) => st.setIsLoading);
-  const {
-    email,
-    emailCode,
-    setEmail,
-    setEmailStep,
-    setEmailCode,
-    setProviderType,
-    setLinkIsLoading,
-    setVerificationError,
-    setEmailCodeSentError
-  } = useManageWalletStore();
+  const { email, emailCode, setEmail, setEmailStep, setEmailCode, setProviderType, setLinkIsLoading, setAlert } = useManageWalletStore();
   return useMutation13({
     mutationFn: async (codeToVerify) => {
       const code = codeToVerify ?? emailCode;
       if (!code) {
-        setEmailCodeSentError("Please enter the verification code");
+        setAlert({ title: "Error", message: "Please enter the verification code" });
         return;
       }
       setIsLoading(true);
       setLinkIsLoading(true);
-      setVerificationError("");
-      setEmailCodeSentError("");
+      setAlert(null);
       return await verifyEmailLinkCode(email, code);
     },
     onSuccess: async () => {
@@ -9608,8 +9597,7 @@ function useVerifyCode() {
       setProviderType(null);
       setEmail("");
       setEmailCode("");
-      setVerificationError("");
-      setEmailCodeSentError("");
+      setAlert(null);
       setEmailStep("input");
       try {
         callbacks?.onLumiaPassportUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
@@ -9619,7 +9607,7 @@ function useVerifyCode() {
       setLinkIsLoading(false);
     },
     onError: (error) => {
-      setVerificationError(error?.message || "Failed to verify and link email");
+      setAlert({ title: "Error", message: error?.message || "Failed to verify and link email" });
       setIsLoading(false);
       setLinkIsLoading(false);
     }
@@ -9640,7 +9628,7 @@ function normalizePasskeyLinkError(msg) {
 }
 function AddProvider() {
   const qc = useQueryClient11();
-  const { callbacks } = useLumiaPassportConfig();
+  const callbacks = useLumiaPassportConfig().callbacks;
   const address = useLumiaPassportSession((st) => st.address);
   const {
     linkIsLoading,
@@ -9648,8 +9636,8 @@ function AddProvider() {
     email,
     emailStep,
     emailCodeExpiresIn,
+    setAlert,
     setProviderType,
-    setLinkError,
     setLinkIsLoading
   } = useManageWalletStore();
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -9689,7 +9677,7 @@ function AddProvider() {
           size: "medium",
           disabled: isLoading,
           onClick: async () => {
-            setLinkError("");
+            setAlert(null);
             setLinkIsLoading(true);
             try {
               await linkPasskeyWithWebAuthn({
@@ -9711,7 +9699,7 @@ function AddProvider() {
               setProviderType(null);
             } catch (e) {
               const msg = e?.message || "Failed to link passkey";
-              setLinkError(normalizePasskeyLinkError(msg));
+              setAlert({ title: "Error", message: normalizePasskeyLinkError(msg) });
             } finally {
               setLinkIsLoading(false);
             }
@@ -9730,7 +9718,7 @@ function AddProvider() {
           size: "medium",
           disabled: isLoading,
           onClick: async () => {
-            setLinkError("");
+            setAlert(null);
             setLinkIsLoading(true);
             try {
               await linkPasskeyWithWebAuthn({
@@ -9752,7 +9740,7 @@ function AddProvider() {
               setProviderType(null);
             } catch (e) {
               const msg = e?.message || "Failed to link passkey";
-              setLinkError(normalizePasskeyLinkError(msg));
+              setAlert({ title: "Error", message: normalizePasskeyLinkError(msg) });
             } finally {
               setLinkIsLoading(false);
             }
@@ -9810,14 +9798,15 @@ function useLinkSocial() {
     callbacks
   } = useLumiaPassportConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const { providerType, linkIsLoading, isWalletLinking, setProviderType, setLinkIsLoading, setLinkError } = useManageWalletStore();
+  const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
+  const { providerType, linkIsLoading, setProviderType, setAlert, setLinkIsLoading } = useManageWalletStore();
   const handleLinkSocialProvider = React7.useCallback(
     async (providerIdRaw) => {
       const providerKey = providerIdRaw.toLowerCase();
       const normalizedKey = providerKey === "twitter" ? "x" : providerKey;
       try {
         setLinkIsLoading(true);
-        setLinkError("");
+        setAlert(null);
         const socialProvider = config.social?.providers?.find(
           (p) => (p.id || "").toLowerCase() === normalizedKey && p.enabled
         );
@@ -9855,7 +9844,7 @@ function useLinkSocial() {
       } catch (e) {
         console.error(`[ManageWallet] Failed to link ${providerIdRaw}:`, e);
         const message = e?.message || `Failed to link ${providerIdRaw}`;
-        setLinkError(message);
+        setAlert({ title: "Error", message });
         setProviderType(null);
       } finally {
         setLinkIsLoading(false);
@@ -9884,9 +9873,9 @@ 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 useEffect23, useState as useState8 } from "react";
-init_telegram2();
 function useLinkTelegram() {
   const {
     config: { current: config },
@@ -9894,12 +9883,13 @@ function useLinkTelegram() {
   } = useLumiaPassportConfig();
   const qc = useQueryClient13();
   const address = useLumiaPassportSession((st) => st.address);
-  const { providerType, linkIsLoading, isWalletLinking, setLinkIsLoading, setProviderType, setLinkError } = useManageWalletStore();
+  const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
+  const { providerType, linkIsLoading, setLinkIsLoading, setProviderType, setAlert } = useManageWalletStore();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const handleLinkTelegram = useCallback11(async () => {
     try {
       setLinkIsLoading(true);
-      setLinkError("");
+      setAlert(null);
       const telegramProvider = config.social?.providers?.find(
         (p) => (p.id || "").toLowerCase() === "telegram" && p.enabled
       );
@@ -9932,7 +9922,7 @@ function useLinkTelegram() {
       setProviderType(null);
     } catch (e) {
       console.error("[ManageWallet] Failed to link Telegram:", e);
-      setLinkError(e?.message || "Failed to link Telegram");
+      setAlert({ title: "Error", message: e?.message || "Failed to link Telegram" });
       setProviderType(null);
     } finally {
       setLinkIsLoading(false);
@@ -9940,7 +9930,12 @@ function useLinkTelegram() {
   }, [config.social?.providers, callbacks]);
   const [telegramLinkStarted, setTelegramLinkStarted] = useState8(false);
   useEffect23(() => {
-    console.log("[useLinkTelegram] Effect triggered:", { providerType, linkIsLoading, telegramLinkStarted, isWalletLinking });
+    console.log("[useLinkTelegram] Effect triggered:", {
+      providerType,
+      linkIsLoading,
+      telegramLinkStarted,
+      isWalletLinking
+    });
     if (isWalletLinking) {
       console.log("[useLinkTelegram] Skipping - wallet linking in progress");
       return;
@@ -10008,7 +10003,7 @@ function ProviderCard(props) {
 }
 
 // src/internal/components/ManageWalletMenu/ManageWallet.tsx
-import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
 var POSSIBLE_PROVIDERS = [
   "email",
   // 'google',
@@ -10041,22 +10036,18 @@ function ManageWalletMenu() {
     config: { current: config }
   } = useLumiaPassportConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
+  const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
+  const setIsWalletLinking = useLayoutDataStore((st) => st.setIsWalletLinking);
   const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
   const {
+    alert: alert2,
     providerType,
-    isWalletLinking,
-    linkError,
-    verificationError,
-    emailCodeSentError,
+    setAlert,
     setProviderType,
     setEmail,
     setEmailStep,
-    setEmailCodeSentError,
     setEmailCodeExpiresIn,
-    setEmailCode,
-    setLinkError,
-    setVerificationError,
-    setIsWalletLinking
+    setEmailCode
   } = useManageWalletStore();
   const configuredProviders = getConfiguredProviders(config);
   const { data: providers = [], isLoading: isProvidersLoading, error: providersError } = useProvidersList();
@@ -10082,17 +10073,16 @@ function ManageWalletMenu() {
               disabled: isWalletLinking,
               onClick: () => {
                 if (isWalletLinking) return;
+                setAlert(null);
                 switch (provider) {
                   case "email":
                     setEmail("");
                     setEmailCode("");
-                    setEmailCodeSentError("");
                     setEmailCodeExpiresIn(0);
                     setEmailStep("input");
                     setProviderType(provider);
                     break;
                   case "twitter":
-                    console.log("[ManageWallet] Twitter button clicked!");
                     setProviderType("twitter");
                     break;
                   case "wallet":
@@ -10120,7 +10110,7 @@ function ManageWalletMenu() {
   useLinkSocial();
   const showCurrentProviders = !isProvidersLoading && !providersError && (providerType !== "email" && providerType !== "passkey" || providerType === null);
   const showExtraProvidersUi = !isProvidersLoading && !providersError && (providerType === "email" || providerType === "passkey");
-  const combinedError = emailCodeSentError || linkError || verificationError || null;
+  const combinedAlertMessage = alert2?.message || providersError?.message || null;
   return /* @__PURE__ */ jsxs41(
     "div",
     {
@@ -10138,15 +10128,13 @@ function ManageWalletMenu() {
               size: "icon",
               title: "Back",
               onClick: () => {
+                setAlert(null);
                 if (providerType === "email") {
                   setEmail("");
                   setEmailCode("");
                   setEmailStep("input");
-                  setEmailCodeSentError("");
                   setEmailCodeExpiresIn(0);
-                  setVerificationError("");
                 }
-                setLinkError("");
                 if (!providerType) setPage("settings" /* SETTINGS */);
                 setProviderType(null);
               },
@@ -10155,16 +10143,19 @@ function ManageWalletMenu() {
           ),
           /* @__PURE__ */ jsx50("span", { className: "text-xl font-semibold", children: "Profiles" })
         ] }),
-        /* @__PURE__ */ jsxs41("div", { className: "w-full flex flex-col gap-[var(--l-pass-gap)]", children: [
-          providersError && /* @__PURE__ */ jsxs41(Highlight, { type: "error", className: "flex items-start gap-[var(--l-pass-gap)] break-words whitespace-pre-wrap", children: [
-            /* @__PURE__ */ jsx50(AlertTriangle3, { className: "w-4 h-4 shrink-0" }),
-            /* @__PURE__ */ jsx50("span", { className: "block", children: providersError.message })
-          ] }),
-          isProvidersLoading && /* @__PURE__ */ jsx50("div", { className: "flex items-center justify-center p-4 text-[var(--l-pass-fg-muted)]", children: /* @__PURE__ */ jsx50(Loader13, { className: "w-5 h-5 animate-spin" }) }),
-          /* @__PURE__ */ jsx50(EmailNotConnectedWarning, {}),
-          showCurrentProviders && renderProviders.map((node) => node),
-          showExtraProvidersUi && /* @__PURE__ */ jsx50(AddProvider, {}),
-          combinedError && /* @__PURE__ */ jsx50(Highlight, { type: "error", children: /* @__PURE__ */ jsx50("span", { children: combinedError }) })
+        isProvidersLoading && /* @__PURE__ */ jsx50("div", { className: "flex items-center justify-center p-4 text-[var(--l-pass-fg-muted)]", children: /* @__PURE__ */ jsx50(Loader13, { className: "w-5 h-5 animate-spin" }) }),
+        /* @__PURE__ */ jsx50(EmailNotConnectedWarning, {}),
+        showCurrentProviders && renderProviders.map((node) => node),
+        showExtraProvidersUi && /* @__PURE__ */ jsx50(AddProvider, {}),
+        combinedAlertMessage && /* @__PURE__ */ jsxs41(Highlight, { type: "error", className: "flex gap-[var(--l-pass-gap)]", children: [
+          /* @__PURE__ */ jsx50(AlertTriangle3, { className: "w-4 h-4 shrink-0" }),
+          /* @__PURE__ */ jsxs41("span", { className: "break-words whitespace-pre-wrap", children: [
+            alert2?.title && /* @__PURE__ */ jsxs41(Fragment14, { children: [
+              /* @__PURE__ */ jsx50("strong", { children: alert2.title }),
+              /* @__PURE__ */ jsx50("br", {})
+            ] }),
+            combinedAlertMessage
+          ] })
         ] })
       ]
     }
@@ -10182,7 +10173,7 @@ function UnlinkProviderMenu() {
   const address = useLumiaPassportSession((st) => st.address);
   const { callbacks } = useLumiaPassportConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const { confirmUnlink, setConfirmUnlink, setLinkError } = useManageWalletStore();
+  const { confirmUnlink, setConfirmUnlink, setAlert } = useManageWalletStore();
   const [confirmInput, setConfirmInput] = useState9("");
   const { mutate: handleUnlinkProvider, isPending: isProviderUnlinking } = useMutation14({
     mutationFn: async () => {
@@ -10204,7 +10195,7 @@ function UnlinkProviderMenu() {
       }
     },
     onError: (error) => {
-      setLinkError(error?.message || "Failed to unlink provider");
+      setAlert({ title: "Error", message: error?.message || "Failed to unlink provider" });
       setPage("manage-wallet" /* MANAGE_WALLET */);
     }
   });
@@ -10426,21 +10417,21 @@ function useTokenBalance(tokenAddress, userAddress) {
 init_base();
 import { useQuery as useQuery11, useQueryClient as useQueryClient15 } from "@tanstack/react-query";
 import { Loader as Loader15 } from "lucide-react";
-import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
 var price16 = Intl.NumberFormat("en-US", { minimumFractionDigits: 16, maximumFractionDigits: 16 });
 function formatValue(price) {
-  if (!price) return /* @__PURE__ */ jsx52(Fragment14, { children: `0.00` });
+  if (!price) return /* @__PURE__ */ jsx52(Fragment15, { children: `0.00` });
   if (price < 0.01) {
     const strigified = price16.format(price);
     const absValue = parseInt(strigified.replace(/^0\./, "")).toString().slice(0, 2);
     const zeroQnt = strigified.replace(/^0\./, "").split("").findIndex((el) => +el > 0);
-    return /* @__PURE__ */ jsxs43(Fragment14, { children: [
+    return /* @__PURE__ */ jsxs43(Fragment15, { children: [
       `0.0`,
       /* @__PURE__ */ jsx52("sub", { className: "text-[10px]", children: zeroQnt }),
       absValue
     ] });
   }
-  return /* @__PURE__ */ jsx52(Fragment14, { children: price.toFixed(2) });
+  return /* @__PURE__ */ jsx52(Fragment15, { children: price.toFixed(2) });
 }
 function openInExplorer(address) {
   window.open(`${LUMIA_EXPLORER_URL}/address/${address}`, "_blank");
@@ -10873,7 +10864,7 @@ function SecurityMenu() {
 }
 
 // src/internal/components/SendRecieveMenu/SendLumiaMenu.tsx
-import { AlertCircle as AlertCircle4, ArrowLeft as ArrowLeft13, CheckCircle2 as CheckCircle24, Loader as Loader18, Wallet } from "lucide-react";
+import { AlertCircle as AlertCircle4, ArrowLeft as ArrowLeft13, CheckCircle2 as CheckCircle24, Loader as Loader18, Wallet as Wallet3 } from "lucide-react";
 import { useEffect as useEffect25, useState as useState12 } from "react";
 import { isAddress as isAddress2 } from "viem";
 import { useBalance as useBalance3 } from "wagmi";
@@ -10944,7 +10935,7 @@ function useSendTransaction() {
 
 // src/internal/components/SendRecieveMenu/SendLumiaMenu.tsx
 init_base();
-import { Fragment as Fragment15, jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx55, jsxs as jsxs46 } from "react/jsx-runtime";
 function SendLumiaMenu() {
   const page = useLayoutDataStore((st) => st.page);
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -11022,13 +11013,13 @@ function SendLumiaMenu() {
       txStep === "input" && /* @__PURE__ */ jsx55(Button, { variant: "ghost", size: "icon", title: "Back", onClick: () => setPage("main-menu" /* MAIN_MENU */), children: /* @__PURE__ */ jsx55(ArrowLeft13, { className: "h-4 w-4" }) }),
       /* @__PURE__ */ jsx55("span", { className: "text-xl font-semibold", children: "Send LUMIA" })
     ] }),
-    txStep === "input" && /* @__PURE__ */ jsxs46(Fragment15, { children: [
+    txStep === "input" && /* @__PURE__ */ jsxs46(Fragment16, { children: [
       /* @__PURE__ */ jsxs46("div", { className: "w-full flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx55("span", { className: "block text-sm font-medium mb-2 text-[var(--l-pass-fg-muted)]", children: "Recipient Address" }),
         /* @__PURE__ */ jsx55(
           Input,
           {
-            Icon: Wallet,
+            Icon: Wallet3,
             type: "text",
             value: recipient,
             onChange: (e) => setRecipient(e.target.value),
@@ -11076,7 +11067,7 @@ function SendLumiaMenu() {
       ] }),
       /* @__PURE__ */ jsx55(Button, { onClick: handleSend, disabled: isLoading, className: "w-full", size: "large", children: "Continue" })
     ] }),
-    txStep === "confirm" && /* @__PURE__ */ jsxs46(Fragment15, { children: [
+    txStep === "confirm" && /* @__PURE__ */ jsxs46(Fragment16, { children: [
       /* @__PURE__ */ jsxs46("div", { className: "bg-gray-50 rounded-lg p-4", children: [
         /* @__PURE__ */ jsx55("h3", { className: "font-medium mb-3", children: "Transaction Details" }),
         /* @__PURE__ */ jsxs46("div", { className: "space-y-2 text-sm", children: [
@@ -11112,7 +11103,7 @@ function SendLumiaMenu() {
         /* @__PURE__ */ jsx55("span", { className: "block text-sm mt-1", children: "Please wait while we process your transaction" })
       ] })
     ] }),
-    txStep === "success" && userOpHash && /* @__PURE__ */ jsxs46(Fragment15, { children: [
+    txStep === "success" && userOpHash && /* @__PURE__ */ jsxs46(Fragment16, { children: [
       /* @__PURE__ */ jsxs46("div", { className: "text-center py-4", children: [
         /* @__PURE__ */ jsx55(CheckCircle24, { className: "h-12 w-12 text-[var(--l-pass-success)] mx-auto mb-3" }),
         /* @__PURE__ */ jsx55("p", { className: "font-medium", children: "Transaction Sent!" }),
@@ -11128,7 +11119,7 @@ init_clients();
 import { ArrowLeft as ArrowLeft14, CheckCircle2 as CheckCircle25, Copy as Copy2, Loader as Loader19 } from "lucide-react";
 import QRCode from "qrcode";
 import { useCallback as useCallback14, useEffect as useEffect26, useState as useState13 } from "react";
-import { Fragment as Fragment16, jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx56, jsxs as jsxs47 } from "react/jsx-runtime";
 function ReceiveLumiaMenu() {
   const address = useLumiaPassportSession((st) => st.address);
   const page = useLayoutDataStore((st) => st.page);
@@ -11180,10 +11171,10 @@ function ReceiveLumiaMenu() {
         /* @__PURE__ */ jsx56("div", { className: "flex items-center justify-center p-[var(--l-pass-pd)]", style: { minHeight: "216px" }, children: qrCodeUrl ? /* @__PURE__ */ jsx56("img", { src: qrCodeUrl, alt: "Wallet QR Code", className: "w-48 h-48" }) : /* @__PURE__ */ jsx56(Loader19, { className: "w-5 h-5 animate-spin text-[var(--l-pass-fg-muted)]" }) }),
         /* @__PURE__ */ jsxs47(Highlight, { type: "info", children: [
           /* @__PURE__ */ jsx56("span", { className: "block w-full text-center font-mono text-[10px] break-all mb-2", children: address }),
-          /* @__PURE__ */ jsx56(Button, { onClick: handleCopy, className: "w-full", size: "medium", children: copied ? /* @__PURE__ */ jsxs47(Fragment16, { children: [
+          /* @__PURE__ */ jsx56(Button, { onClick: handleCopy, className: "w-full", size: "medium", children: copied ? /* @__PURE__ */ jsxs47(Fragment17, { children: [
             /* @__PURE__ */ jsx56(CheckCircle25, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx56("span", { children: "Copied!" })
-          ] }) : /* @__PURE__ */ jsxs47(Fragment16, { children: [
+          ] }) : /* @__PURE__ */ jsxs47(Fragment17, { children: [
             /* @__PURE__ */ jsx56(Copy2, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx56("span", { children: "Copy Address" })
           ] }) })
@@ -11640,7 +11631,7 @@ var formatTimestamp = (timestampMs) => {
 };
 
 // src/internal/components/TransactionsMenu/TransactionsGroup.tsx
-import { Fragment as Fragment17, jsx as jsx61, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx61, jsxs as jsxs51 } from "react/jsx-runtime";
 function InternalTransaction({ internal, assetSymbol, assetDecimals }) {
   const internalSymbol = internal.assetSymbol || assetSymbol;
   const internalDecimals = internal.decimals ?? assetDecimals;
@@ -11717,7 +11708,7 @@ function TransactionsGroup(props) {
             )
           ] })
         ] }),
-        internalsToRender.length > 0 && /* @__PURE__ */ jsxs51(Fragment17, { children: [
+        internalsToRender.length > 0 && /* @__PURE__ */ jsxs51(Fragment18, { children: [
           /* @__PURE__ */ jsxs51("div", { className: "w-full flex items-center", children: [
             /* @__PURE__ */ jsx61("div", { style: { borderTop: "1px solid var(--l-pass-bd)" }, className: "flex-1" }),
             /* @__PURE__ */ jsx61("div", { className: "flex-none font-bold px-2 text-xs leading-4 text-[var(--l-pass-fg-muted)]", children: "Internals" }),
@@ -12056,6 +12047,7 @@ function LumiaPassportDialog() {
   useBackupStatusChanges();
   useDetectMaxScrollHeight();
   useSettingsNotifications();
+  useListenIframeAuthEvents();
   useBackupWarning();
   useWalletStatus();
   return /* @__PURE__ */ jsx64(
@@ -12133,48 +12125,52 @@ var TssManagerWithRef = React10.forwardRef((props, ref) => {
 // src/internal/components/WalletConnectHandler.tsx
 init_wallet();
 import { useConnectModal } from "@rainbow-me/rainbowkit";
-import { useQueryClient as useQueryClient19 } from "@tanstack/react-query";
+import { useMutation as useMutation15, useQueryClient as useQueryClient19 } from "@tanstack/react-query";
 import React11, { useCallback as useCallback18, useEffect as useEffect32 } from "react";
 import { useAccount, useDisconnect, useSignMessage } from "wagmi";
 function WalletConnectHandler() {
   const qc = useQueryClient19();
-  const { callbacks } = useLumiaPassportConfig();
-  const userAddress = useLumiaPassportSession((st) => st.address);
+  const callbacks = useLumiaPassportConfig().callbacks;
+  const passportWalletAddress = useLumiaPassportSession((st) => st.address);
   const { address: walletAddress, isConnected, chain, connector } = useAccount();
+  const { openConnectModal, connectModalOpen } = useConnectModal();
   const { disconnect } = useDisconnect();
   const { signMessageAsync } = useSignMessage();
+  const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
   const setPage = useLayoutDataStore((st) => st.setPage);
-  const { isWalletLinking, setLinkError, setIsWalletLinking, setLinkIsLoading, setProviderType } = useManageWalletStore();
-  const onError = useCallback18((error) => {
-    setLinkError(error);
-    setIsWalletLinking(false);
-    setPage("manage-wallet" /* MANAGE_WALLET */);
-  }, []);
+  const setIsWalletLinking = useLayoutDataStore((st) => st.setIsWalletLinking);
+  const setAuthError = useAuthStore((st) => st.setAlert);
+  const setManageWalletLinkError = useManageWalletStore((st) => st.setLinkError);
+  const setLinkIsLoading = useManageWalletStore((st) => st.setLinkIsLoading);
+  const setProviderType = useManageWalletStore((st) => st.setProviderType);
   const onLinkingComplete = useCallback18(
     async (success) => {
-      console.log("[WalletConnectHandler] onLinkingComplete called:", { success, userAddress });
       setIsWalletLinking(false);
+      if (!success && !passportWalletAddress) {
+        setProviderType(null);
+        setPage("auth" /* AUTH */);
+        return;
+      }
+      if (!success && passportWalletAddress) {
+        setProviderType(null);
+        setPage("manage-wallet" /* MANAGE_WALLET */);
+        return;
+      }
       setProviderType(null);
       setPage("manage-wallet" /* MANAGE_WALLET */);
-      if (success) {
-        console.log("[WalletConnectHandler] Invalidating and refetching queries with key:", [
-          PROVIDERS_QUERY_KEY,
-          userAddress
-        ]);
-        await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, userAddress], refetchType: "active" });
-        await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, userAddress], refetchType: "active" });
-        await qc.refetchQueries({ queryKey: [PROVIDERS_QUERY_KEY, userAddress] });
-        try {
-          callbacks?.onLumiaPassportUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, userAddress]) });
-        } catch {
-        }
+      await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, passportWalletAddress], refetchType: "active" });
+      await qc.invalidateQueries({
+        queryKey: [LINKED_PROFILES_QUERY_KEY, passportWalletAddress],
+        refetchType: "active"
+      });
+      try {
+        callbacks?.onLumiaPassportUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, passportWalletAddress]) });
+      } catch {
       }
     },
-    [qc, userAddress, callbacks, setProviderType, setPage, setIsWalletLinking]
+    [qc, passportWalletAddress, callbacks, setProviderType, setPage, setIsWalletLinking]
   );
-  const { openConnectModal, connectModalOpen } = useConnectModal();
   const [hasStartedLinking, setHasStartedLinking] = React11.useState(false);
-  const timeoutRef = React11.useRef();
   useEffect32(() => {
     if (isWalletLinking && !hasStartedLinking) {
       setHasStartedLinking(true);
@@ -12182,94 +12178,101 @@ function WalletConnectHandler() {
       if (isConnected) {
         disconnect();
         setTimeout(() => {
-          if (openConnectModal) {
-            setPage(null);
-            openConnectModal();
-          }
-        }, 500);
-      } else {
-        if (openConnectModal) {
           setPage(null);
           openConnectModal();
-        }
+        }, 500);
+      } else {
+        setPage(null);
+        openConnectModal();
       }
     }
     if (!isWalletLinking && hasStartedLinking) {
       setHasStartedLinking(false);
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
       if (isConnected) disconnect();
     }
   }, [isWalletLinking, hasStartedLinking, isConnected, openConnectModal, disconnect, setPage, setProviderType]);
   useEffect32(() => {
-    console.log("[WalletConnectHandler] Modal state check:", {
-      hasStartedLinking,
-      connectModalOpen,
-      isConnected,
-      isWalletLinking
-    });
     if (hasStartedLinking && !connectModalOpen && !isConnected && isWalletLinking) {
-      console.log("[WalletConnectHandler] Modal closed without connecting, resetting state");
+      console.log("[WalletConnectHandler] Modal closed without connecting");
       onLinkingComplete(false);
       setHasStartedLinking(false);
     }
   }, [connectModalOpen, hasStartedLinking, isConnected, isWalletLinking]);
-  useEffect32(() => {
-    if (isConnected && walletAddress && isWalletLinking && hasStartedLinking) {
-      handleWalletSign();
-    }
-  }, [isConnected, walletAddress, isWalletLinking, hasStartedLinking]);
-  const handleWalletSign = async () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    if (!walletAddress || !chain) {
-      onError("No wallet connected");
-      disconnect();
-      onLinkingComplete(false);
-      setHasStartedLinking(false);
-      return;
-    }
-    try {
+  const { mutate: handleWalletSign, isPending: isWalletSigning } = useMutation15({
+    mutationFn: async (payload) => {
+      const { chainId, signingWalletAddress } = payload;
+      if (!signingWalletAddress || !chainId) {
+        disconnect();
+        if (passportWalletAddress) {
+          setManageWalletLinkError("Wallet error! No wallet available");
+        } else {
+          setAuthError({ title: "Wallet error", message: "No wallet available" });
+        }
+        setIsWalletLinking(false);
+        setHasStartedLinking(false);
+        onLinkingComplete(false);
+        setPage(passportWalletAddress ? "manage-wallet" /* MANAGE_WALLET */ : "auth" /* AUTH */);
+        return;
+      }
       setLinkIsLoading(true);
-      const message = createSignatureMessage(walletAddress);
-      const signature = await signMessageAsync({ message });
+      const message = createSignatureMessage(signingWalletAddress);
+      const signature = await signMessageAsync({ message, account: signingWalletAddress });
       if (!signature) {
         throw new Error("Failed to get signature");
       }
       const walletName = connector?.name || "Unknown Wallet";
       const walletType = connector?.id || "unknown";
-      console.log("[WalletConnectHandler] Wallet metadata:", {
-        walletName,
-        walletType,
-        connectorInfo: connector
-      });
-      await linkWallet({
-        address: walletAddress,
+      return await linkWallet({
+        // chainId: chain.id,
+        chainId,
+        address: signingWalletAddress,
         signature,
         message,
-        chainId: chain.id,
         walletName,
         walletType
       });
+    },
+    onSuccess: () => {
       disconnect();
+      setHasStartedLinking(false);
       onLinkingComplete(true);
+      setLinkIsLoading(false);
+    },
+    onError: (err) => {
+      disconnect();
+      setIsWalletLinking(false);
+      onLinkingComplete(false);
       setHasStartedLinking(false);
-    } catch (err) {
+      setLinkIsLoading(false);
       const errorMsg = err?.message || "Failed to link wallet";
       if (errorMsg.includes("User rejected") || errorMsg.includes("User denied")) {
-        onError("Signature request was cancelled");
+        if (passportWalletAddress) {
+          setManageWalletLinkError("Signature request was cancelled");
+        } else {
+          setAuthError({ title: "Signature error", message: "Signature request was cancelled" });
+        }
       } else if (errorMsg.includes("already linked")) {
-        onError("This wallet is already linked to another account");
+        if (passportWalletAddress) {
+          setManageWalletLinkError("This wallet is already linked to another account");
+        } else {
+          setAuthError({ title: "Wallet error", message: "This wallet is already linked to another account" });
+        }
       } else {
-        onError(errorMsg);
+        if (passportWalletAddress) {
+          setManageWalletLinkError(errorMsg);
+        } else {
+          setAuthError({ title: "Error", message: errorMsg });
+        }
       }
-      disconnect();
-      onLinkingComplete(false);
-      setHasStartedLinking(false);
-    } finally {
-      setLinkIsLoading(false);
+      setPage(passportWalletAddress ? "manage-wallet" /* MANAGE_WALLET */ : "auth" /* AUTH */);
     }
-  };
+  });
+  useEffect32(() => {
+    if (!!chain?.id && isConnected && walletAddress && isWalletLinking && hasStartedLinking) {
+      console.log("[WalletConnectHandler] handleWalletSign triggered");
+      handleWalletSign({ chainId: chain.id, signingWalletAddress: walletAddress });
+    }
+  }, [chain, isConnected, walletAddress, isWalletLinking, hasStartedLinking]);
   return null;
 }
 
@@ -12300,7 +12303,7 @@ var useLumiaPassportSession = create6((set) => ({
 }));
 function LumiaPassportSessionProvider({ children }) {
   const config = useLumiaPassportConfig().config;
-  return /* @__PURE__ */ jsxs54(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs54(Fragment19, { children: [
     children,
     config.current?.wallet?.enabled && /* @__PURE__ */ jsx65(WalletConnectHandler, {}),
     /* @__PURE__ */ jsx65(BalanceFeedProvider, {}),
@@ -12452,7 +12455,7 @@ var useLumiaPassportConfig = () => {
 import { Cloud as Cloud4, Laptop as Laptop2, Loader as Loader21, Shield as Shield2 } from "lucide-react";
 import { useEffect as useEffect34, useMemo as useMemo5 } from "react";
 init_auth();
-import { Fragment as Fragment19, jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx68, jsxs as jsxs55 } from "react/jsx-runtime";
 function getFormattedStatus(label, status, showStatus) {
   const isStatus = showStatus && status && status !== "idle" && status !== "ready";
   if (!isStatus) return label;
@@ -12484,7 +12487,7 @@ function ConnectWalletButton(props) {
   const isConnecting = connectButtonLabel !== label || isLoading;
   return /* @__PURE__ */ jsx68("div", { "data-lumia-passport-mode": colorMode, className: cn("lumia-scope w-fit h-fit", className), children: !address ? (
     /** external Buttons can be provided */
-    /* @__PURE__ */ jsx68(Fragment19, { children: ConnectButton ? /* @__PURE__ */ jsxs55(
+    /* @__PURE__ */ jsx68(Fragment20, { children: ConnectButton ? /* @__PURE__ */ jsxs55(
       ConnectButton,
       {
         type: "button",
@@ -12952,7 +12955,7 @@ var rainbowTheme = {
 
 // src/context/RainbowKitContext.tsx
 import "@rainbow-me/rainbowkit/styles.css";
-import { Fragment as Fragment20, jsx as jsx70 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx70 } from "react/jsx-runtime";
 function LumiaRainbowKitProvider({ children }) {
   const config = useLumiaPassportConfig().config;
   const colorMode = useLayoutStore((st) => st.colorMode);
@@ -12971,7 +12974,7 @@ function LumiaRainbowKitProvider({ children }) {
     },
     [colorMode]
   );
-  if (!config.current?.wallet?.enabled) return /* @__PURE__ */ jsx70(Fragment20, { children });
+  if (!config.current?.wallet?.enabled) return /* @__PURE__ */ jsx70(Fragment21, { children });
   return /* @__PURE__ */ jsx70(WagmiProvider2, { config: rainbowConfig2, children: /* @__PURE__ */ jsx70(RainbowKitProvider, { theme: customTheme, modalSize: "compact", showRecentTransactions: true, children }) });
 }