@embarkai/ui-kit 0.2.7 → 0.3.0

package/dist/index.d.cts

@@ -618,6 +618,7 @@ declare class IframeManager {
     private isReady;
     private readyPromise;
     private readyResolve;
+    private initPromise;
     private onWalletReadyCallback?;
     private pendingRequests;
     private usedNonces;
@@ -639,6 +640,7 @@ declare class IframeManager {
      * Initialize iframe and wait for it to be ready
      */
     initialize(): Promise<void>;
+    private doInitialize;
     /**
      * Set the onWalletReady callback
      */

package/dist/index.d.ts

@@ -618,6 +618,7 @@ declare class IframeManager {
     private isReady;
     private readyPromise;
     private readyResolve;
+    private initPromise;
     private onWalletReadyCallback?;
     private pendingRequests;
     private usedNonces;
@@ -639,6 +640,7 @@ declare class IframeManager {
      * Initialize iframe and wait for it to be ready
      */
     initialize(): Promise<void>;
+    private doInitialize;
     /**
      * Set the onWalletReady callback
      */

package/dist/index.js

@@ -866,6 +866,7 @@ var init_useLayoutDataStore = __esm({
       transitionPageHeight: DEFAULT_MAIN_MENU_HEIGHT,
       settingsNotifications: [],
       isWalletLinking: false,
+      pendingWalletLogin: null,
       setPageParams: (pageOptions) => set({ pageParams: pageOptions }),
       setPage: (page) => set((prev) => ({
         page,
@@ -887,7 +888,8 @@ var init_useLayoutDataStore = __esm({
         const filtered = prev.settingsNotifications.filter((n) => n.id !== notification.id);
         return { settingsNotifications: filtered };
       }),
-      setIsWalletLinking: (isWalletLinking) => set({ isWalletLinking })
+      setIsWalletLinking: (isWalletLinking) => set({ isWalletLinking }),
+      setPendingWalletLogin: (pendingWalletLogin) => set({ pendingWalletLogin })
     }));
   }
 });
@@ -2564,6 +2566,8 @@ function useAutoConnect() {
         }
       } catch (e) {
         if (e?.code === "KEYSHARE_RECOVERY_NEEDED") {
+          setSession(null);
+          setAddress(null);
           setRecoveryUserId(userId);
           setError(null);
           setStatus("recovery_needed");
@@ -5057,6 +5061,8 @@ function useAuthMenuHandlers() {
         console.warn("[AuthMenu] Keyshare recovery needed for user:", userId);
         pendingLoginResponseRef.current = null;
         setError(null);
+        setSession(null);
+        setAddress(null);
         setRecoveryUserId(userId);
         setStatus("recovery_needed");
         setTimeout(() => {
@@ -5462,6 +5468,7 @@ var AuthMenu;
 var init_AuthMenu = __esm({
   "src/internal/components/AuthMenu/AuthMenu.tsx"() {
     init_SessionContext();
+    init_auth();
     init_constants();
     init_useLayoutDataStore();
     init_useLayoutStore();
@@ -5478,8 +5485,20 @@ var init_AuthMenu = __esm({
       const isIframeReady = useSession((st) => st.isIframeReady);
       const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
       const setTransitionPageHeight = useLayoutDataStore((st) => st.setTransitionPageHeight);
+      const pendingWalletLogin = useLayoutDataStore((st) => st.pendingWalletLogin);
+      const setPendingWalletLogin = useLayoutDataStore((st) => st.setPendingWalletLogin);
       const { step, alert: alert2, setStep, setPasskeyStatus, setEmail, setAlert } = useAuthStore();
       const { pendingLoginResponseRef, onAuthSuccess, goBackToSignIn } = useAuthMenuHandlers();
+      useEffect10(() => {
+        if (!pendingWalletLogin) return;
+        const loginResponse = pendingWalletLogin;
+        setPendingWalletLogin(null);
+        console.log("[AuthMenu] Processing wallet login response:", loginResponse);
+        jwtTokenManager2.clearTokens().then(() => {
+          pendingLoginResponseRef.current = loginResponse;
+          onAuthSuccess();
+        });
+      }, [pendingWalletLogin]);
       useEffect10(() => {
         setTransitionPageHeight(DEFAULT_AUTH_MENU_HEIGHT);
         return () => {
@@ -7967,7 +7986,8 @@ function useCreateBackup() {
       setIsDialogForced(true);
     }
   }, [hasServerVault, setIsDialogForced, setMethod]);
-  const passportUserId = session?.mpcUserId || "";
+  const recoveryUserId = useSession((st) => st.recoveryUserId);
+  const passportUserId = session?.mpcUserId || recoveryUserId || "";
   const onBackupSuccess = () => console.log("[ConnectWalletButton] Backup created successfully");
   const { mutate: createPasswordBackup, isPending: isPasswordBackupCreating } = useMutation7({
     mutationFn: async () => {
@@ -15479,7 +15499,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.2.7",
+      version: "0.3.0",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -15517,51 +15537,52 @@ var init_package = __esm({
       },
       peerDependencies: {
         "@tanstack/react-query": ">=5.0.0",
+        i18next: "^25.8.0",
         react: ">=18",
         "react-dom": ">=18",
-        "tailwind-merge": ">=2.2.0",
-        i18next: "^25.8.0",
-        "react-i18next": "^16.5.3"
+        "react-i18next": "^16.5.3",
+        "tailwind-merge": ">=2.2.0"
       },
       dependencies: {
-        "@radix-ui/react-slot": ">=1.2.4",
+        "@embarkai/core": "workspace:*",
         "@radix-ui/react-checkbox": ">=1.3.3",
-        "@radix-ui/react-select": ">=2.2.6",
         "@radix-ui/react-dialog": ">=1.1.15",
-        "@embarkai/core": "workspace:*",
+        "@radix-ui/react-select": ">=2.2.6",
+        "@radix-ui/react-slot": ">=1.2.4",
         "@rainbow-me/rainbowkit": "^2.2.10",
         "@sentry/browser": "^10.22.0",
         "class-variance-authority": "^0.7.0",
-        "lodash-es": "^4.17.21",
         clsx: "^2.1.1",
+        dayjs: "^1.11.9",
         "dkls23-wasm": "^0.1.0",
+        "framer-motion": "^12.23.24",
+        "lodash-es": "^4.17.21",
         "lucide-react": "^0.454.0",
         qrcode: "^1.5.0",
-        zustand: "^5.0.8",
         viem: "^2.38.0",
         wagmi: "^2.17.5",
-        dayjs: "^1.11.9",
-        "framer-motion": "^12.23.24"
+        zustand: "^5.0.8"
       },
       devDependencies: {
         "@tailwindcss/typography": "^0.5.16",
         "@tanstack/react-query": "^5.90.2",
+        "@types/lodash-es": "^4.17.12",
         "@types/qrcode": "^1.5.0",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         autoprefixer: "^10.4.20",
         dotenv: "^17.2.3",
+        i18next: "^25.8.0",
         postcss: "^8.4.47",
         react: "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-i18next": "^16.5.3",
         "tailwind-merge": "^2.2.0",
-        "@types/lodash-es": "^4.17.12",
         tailwindcss: "^3.4.10",
         tsup: "^8.5.0",
         typescript: "^5.4.5",
         vite: "^5.0.0",
-        i18next: "^25.8.0",
-        "react-i18next": "^16.5.3"
+        vitest: "^4.0.18"
       },
       repository: {
         type: "git",
@@ -16160,6 +16181,19 @@ var init_TssManager = __esm({
 });
 
 // src/internal/auth/providers/wallet.ts
+async function walletLogin(walletData) {
+  const response = await fetch(addProjectIdToUrl(`${getTssUrl3()}/api/auth/wallet/login`), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(walletData)
+  });
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}));
+    throw new Error(errorData.message || `Wallet login failed: ${response.statusText}`);
+  }
+  return response.json();
+}
 async function linkWallet(walletData) {
   const hasValidToken = await ensureValidToken();
   if (!hasValidToken) throw new Error("No authentication token available");
@@ -16212,9 +16246,23 @@ Timestamp: ${timestamp}
 
 Sign this message to link your wallet to ${projectName} Wallet`;
 }
+function createLoginMessage(address, projectName) {
+  const nonce = crypto.randomUUID();
+  const timestamp = Date.now();
+  return [
+    `${projectName} Wallet Login`,
+    "",
+    `Address: ${address}`,
+    `Nonce: ${nonce}`,
+    `Timestamp: ${timestamp}`,
+    "",
+    `Sign this message to login your wallet to ${projectName}`
+  ].join("\n");
+}
 var METADATA_API_URL, METADATA_CACHE_TTL, metadataCache;
 var init_wallet = __esm({
   "src/internal/auth/providers/wallet.ts"() {
+    init_projectId();
     init_auth();
     init_types();
     METADATA_API_URL = "https://dashboard.lumiapassport.com/api/public/project";
@@ -16278,6 +16326,7 @@ function WalletConnectHandler() {
   const walletMode = providerConfig?.wallet?.mode || "linked";
   const projectId = providerConfig?.projectId;
   const setExternalWallet = useExternalWalletStore((st) => st.setExternalWallet);
+  const setPendingWalletLogin = useLayoutDataStore((st) => st.setPendingWalletLogin);
   const onLinkingComplete = useCallback23(
     async (success) => {
       setIsWalletLinking(false);
@@ -16366,12 +16415,14 @@ function WalletConnectHandler() {
     if (isWalletLinking) {
       const timeout = setTimeout(() => {
         console.warn("[WalletConnectHandler] Wallet linking timed out, resetting state");
+        disconnect();
         setIsWalletLinking(false);
         setHasStartedLinking(false);
       }, 12e4);
       return () => clearTimeout(timeout);
     }
-  }, [isWalletLinking, setIsWalletLinking]);
+  }, [isWalletLinking, setIsWalletLinking, disconnect]);
+  const isAuthFlow = !passportWalletAddress;
   const { mutate: handleWalletSign, isPending: isWalletSigning } = useMutation16({
     mutationFn: async (payload) => {
       const { chainId, signingWalletAddress } = payload;
@@ -16390,24 +16441,45 @@ function WalletConnectHandler() {
       }
       setLinkIsLoading(true);
       const projectName = projectId ? await fetchProjectName(projectId) : "EmbarkAI";
-      const message = createSignatureMessage(signingWalletAddress, projectName);
-      const signature = await signMessageAsync({ message, account: signingWalletAddress });
+      const message = isAuthFlow ? createLoginMessage(signingWalletAddress, projectName) : createSignatureMessage(signingWalletAddress, projectName);
+      const signature = await Promise.race([
+        signMessageAsync({ message, account: signingWalletAddress }),
+        new Promise(
+          (_, reject) => setTimeout(() => reject(new Error("Signature request timed out. Please try again.")), 6e4)
+        )
+      ]);
       if (!signature) {
         throw new Error("Failed to get signature");
       }
       const walletName = connector?.name || "Unknown Wallet";
       const walletType = connector?.id || "unknown";
-      return await linkWallet({
-        // chainId: chain.id,
+      const walletData = {
         chainId,
         address: signingWalletAddress,
         signature,
         message,
         walletName,
         walletType
-      });
+      };
+      if (isAuthFlow) {
+        const loginResponse = await walletLogin(walletData);
+        return loginResponse;
+      } else {
+        await linkWallet(walletData);
+        return void 0;
+      }
     },
-    onSuccess: () => {
+    onSuccess: (data) => {
+      if (isAuthFlow && data) {
+        console.log("[WalletConnectHandler] Wallet login successful, passing to AuthMenu");
+        disconnect();
+        setPendingWalletLogin(data);
+        setIsWalletLinking(false);
+        setHasStartedLinking(false);
+        setLinkIsLoading(false);
+        setPage("auth" /* AUTH */);
+        return;
+      }
       const shouldKeepConnected = walletMode === "direct" || walletMode === "both";
       if (shouldKeepConnected && walletAddress && chain?.id && connector) {
         setExternalWallet({
@@ -16428,7 +16500,7 @@ function WalletConnectHandler() {
       onLinkingComplete(false);
       setHasStartedLinking(false);
       setLinkIsLoading(false);
-      const errorMsg = err?.message || "Failed to link wallet";
+      const errorMsg = err?.message || (isAuthFlow ? "Wallet login failed" : "Failed to link wallet");
       if (errorMsg.includes("User rejected") || errorMsg.includes("User denied")) {
         if (passportWalletAddress) {
           setManageWalletLinkError("Signature request was cancelled");
@@ -17651,6 +17723,7 @@ __export(auth_exports, {
   configureJwtModule: () => configureJwtModule,
   createInitialAuthState: () => createInitialAuthState,
   createJwtTokenManager: () => createJwtTokenManager,
+  createLoginMessage: () => createLoginMessage,
   createPasskeyHelpers: () => createPasskeyHelpers,
   createSignatureMessage: () => createSignatureMessage,
   deriveDemoPrivateKey: () => deriveDemoPrivateKey,
@@ -17687,7 +17760,8 @@ __export(auth_exports, {
   unlinkWallet: () => unlinkWallet,
   unlinkX: () => unlinkX,
   verifyEmailLinkCode: () => verifyEmailLinkCode,
-  verifyToken: () => verifyToken
+  verifyToken: () => verifyToken,
+  walletLogin: () => walletLogin
 });
 import {
   JwtTokenManager,
@@ -17754,6 +17828,7 @@ var init_iframe_manager = __esm({
         this.iframe = null;
         this.channelToken = null;
         this.isReady = false;
+        this.initPromise = null;
         // Message handling
         this.pendingRequests = /* @__PURE__ */ new Map();
         this.usedNonces = /* @__PURE__ */ new Set();
@@ -17791,9 +17866,13 @@ var init_iframe_manager = __esm({
        * Initialize iframe and wait for it to be ready
        */
       async initialize() {
-        if (this.iframe) {
-          return this.readyPromise;
+        if (this.initPromise) {
+          return this.initPromise;
         }
+        this.initPromise = this.doInitialize();
+        return this.initPromise;
+      }
+      async doInitialize() {
         this.iframe = document.createElement("iframe");
         let iframeUrl = this.iframeUrl;
         this.iframe.src = iframeUrl;
@@ -18063,9 +18142,15 @@ var init_iframe_manager = __esm({
        * Send secure message to iframe
        */
       async sendMessage(type, data) {
+        if (this.initPromise && type !== "SDK_AUTH") {
+          await this.initPromise;
+        }
         if (!this.iframe || !this.iframe.contentWindow) {
           throw new Error("Iframe not initialized");
         }
+        if (!this.channelToken && type !== "SDK_AUTH") {
+          throw createAccountAbstractionError({ message: "SDK channel not established. Initialize iframe first." });
+        }
         const messageId = this.generateMessageId();
         const nonce = this.generateNonce();
         const timestamp = Date.now();
@@ -18929,6 +19014,10 @@ var init_iframe_manager = __esm({
         this.iframe = null;
         this.isReady = false;
         this.channelToken = null;
+        this.initPromise = null;
+        this.readyPromise = new Promise((resolve) => {
+          this.readyResolve = resolve;
+        });
         this.log("[IframeManager] \u2705 Destroyed");
       }
       /**
@@ -18949,7 +19038,6 @@ var init_iframe_manager = __esm({
 });
 
 // src/config/rainbowkit.ts
-import { lumiaMainnetChain as lumiaMainnetChain2, lumiaTestnetChain as lumiaTestnetChain2 } from "@embarkai/core/read";
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
 import {
   coinbaseWallet,
@@ -18979,7 +19067,7 @@ var init_rainbowkit = __esm({
       const config = {
         appName: "EmbarkAI Wallet",
         projectId: getProjectId(opts.projectId),
-        chains: [lumiaMainnetChain2, lumiaTestnetChain2, mainnet, polygon, bsc, arbitrum, optimism, avalanche, base, zora],
+        chains: [mainnet, polygon, bsc, arbitrum, optimism, avalanche, base, zora],
         ssr: false
       };
       if (opts.allowedWallets && opts.allowedWallets.length > 0) {
@@ -19239,7 +19327,7 @@ var init_utils8 = __esm({
 });
 
 // src/config/wagmi.ts
-import { lumiaMainnetChain as lumiaMainnetChain3, lumiaTestnetChain as lumiaTestnetChain3 } from "@embarkai/core/read";
+import { lumiaMainnetChain as lumiaMainnetChain2, lumiaTestnetChain as lumiaTestnetChain2 } from "@embarkai/core/read";
 import { fallback } from "viem";
 import { createConfig, http as http4 } from "wagmi";
 function buildTransport(urls) {
@@ -19264,10 +19352,10 @@ var wagmiConfig;
 var init_wagmi = __esm({
   "src/config/wagmi.ts"() {
     wagmiConfig = createConfig({
-      chains: [lumiaMainnetChain3, lumiaTestnetChain3],
+      chains: [lumiaMainnetChain2, lumiaTestnetChain2],
       transports: {
-        [lumiaTestnetChain3.id]: buildTransport(lumiaTestnetChain3.rpcUrls.default.http),
-        [lumiaMainnetChain3.id]: buildTransport(lumiaMainnetChain3.rpcUrls.default.http)
+        [lumiaTestnetChain2.id]: buildTransport(lumiaTestnetChain2.rpcUrls.default.http),
+        [lumiaMainnetChain2.id]: buildTransport(lumiaMainnetChain2.rpcUrls.default.http)
       }
     });
   }