@embarkai/ui-kit 0.2.5 → 0.2.7

package/dist/index.d.cts

@@ -663,6 +663,12 @@ declare class IframeManager {
      * Setup visibility change handler to check channel when tab becomes visible
      */
     private setupVisibilityHandler;
+    /**
+     * Normalize legacy message types from cached iframe versions.
+     * Old iframe sends LUMIA_PASSPORT_*, new iframe sends IFRAME_MSG_*.
+     * This ensures both work until all browser caches expire.
+     */
+    private normalizeMessageType;
     /**
      * Handle incoming postMessage events
      */
@@ -1660,12 +1666,19 @@ declare global {
     }
 }
 
+interface AuthProviderMeta extends Record<string, unknown> {
+    walletName?: string;
+    walletType?: string;
+    chainId?: number;
+    email?: string;
+}
 interface AuthProvider {
     provider: 'passkey' | 'email' | 'telegram' | 'google' | 'discord' | 'twitter' | 'wallet';
     verified: boolean;
     linkedAt: string;
     lastUsedAt?: string;
     externalId: string;
+    meta?: AuthProviderMeta;
 }
 
 /**

package/dist/index.d.ts

@@ -663,6 +663,12 @@ declare class IframeManager {
      * Setup visibility change handler to check channel when tab becomes visible
      */
     private setupVisibilityHandler;
+    /**
+     * Normalize legacy message types from cached iframe versions.
+     * Old iframe sends LUMIA_PASSPORT_*, new iframe sends IFRAME_MSG_*.
+     * This ensures both work until all browser caches expire.
+     */
+    private normalizeMessageType;
     /**
      * Handle incoming postMessage events
      */
@@ -1660,12 +1666,19 @@ declare global {
     }
 }
 
+interface AuthProviderMeta extends Record<string, unknown> {
+    walletName?: string;
+    walletType?: string;
+    chainId?: number;
+    email?: string;
+}
 interface AuthProvider {
     provider: 'passkey' | 'email' | 'telegram' | 'google' | 'discord' | 'twitter' | 'wallet';
     verified: boolean;
     linkedAt: string;
     lastUsedAt?: string;
     externalId: string;
+    meta?: AuthProviderMeta;
 }
 
 /**

package/dist/index.js

@@ -2713,12 +2713,13 @@ function useListenIframeAuthEvents() {
   const setIsIframeReady = useSession((state) => state.setIsIframeReady);
   const handleIframeMessage = useCallback4(
     (event) => {
-      if (event.data?.type === "LUMIA_PASSPORT_IFRAME_READY") {
+      const type = event.data?.type?.startsWith?.("LUMIA_PASSPORT_") ? event.data.type.replace("LUMIA_PASSPORT_", "IFRAME_MSG_") : event.data?.type;
+      if (type === "IFRAME_MSG_IFRAME_READY") {
         console.log("[ IFRAME MESSAGE CACTHED ] Iframe is ready");
         setIsIframeReady(true);
-      } else if (event.data?.type === "LUMIA_PASSPORT_SHOW_IFRAME") {
+      } else if (type === "IFRAME_MSG_SHOW_IFRAME") {
         console.log("[ IFRAME MESSAGE CACTHED ] Consent screen shown - hiding auth modal");
-      } else if (event.data?.type === "LUMIA_PASSPORT_HIDE_IFRAME") {
+      } else if (type === "IFRAME_MSG_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");
@@ -10524,6 +10525,12 @@ var init_useLinkTelegram = __esm({
 // src/internal/components/ManageWalletMenu/ProviderCard.tsx
 import { CheckCircle, Clock, Trash2 } from "lucide-react";
 import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
+function formatExternalId(provider, externalId) {
+  if (provider === "wallet" && externalId.startsWith("0x") && externalId.length >= 14) {
+    return `${externalId.slice(0, 10)}...${externalId.slice(-4)}`;
+  }
+  return externalId;
+}
 function ProviderCard(props) {
   const { t } = useT();
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -10544,13 +10551,14 @@ function ProviderCard(props) {
   return /* @__PURE__ */ jsxs48("div", { className: "w-full flex items-center justify-between gap-[var(--ui-kit-gap)]", children: [
     /* @__PURE__ */ jsx55("div", { className: "w-12 h-12 flex items-center justify-center flex-none border border-[var(--ui-kit-bd)] rounded-full", children: /* @__PURE__ */ jsx55(IconComponent, { className: "w-5 h-5" }) }),
     /* @__PURE__ */ jsxs48("div", { className: "flex flex-col gap-1 flex-1", children: [
-      /* @__PURE__ */ jsx55("span", { className: "block w-full text-[10px] font-medium", children: info.name }),
+      /* @__PURE__ */ jsx55("span", { className: "block w-full text-[10px] font-medium", children: props.meta?.walletName || info.name }),
       props.externalId && /* @__PURE__ */ jsx55(
         "span",
         {
           style: { maxWidth: 184 },
           className: "block w-full font-bold text-xs whitespace-nowrap text-ellipsis overflow-hidden",
-          children: props.externalId
+          title: props.externalId,
+          children: formatExternalId(props.provider, props.externalId)
         }
       )
     ] }),
@@ -10631,19 +10639,19 @@ function ManageWalletMenu() {
       if (name === "x") return "twitter";
       return name;
     };
-    const usedProviders = fromPairs(providers.map((p) => [normalizeProviderName(p.provider), true]));
     const used = [];
     const unused = [];
-    POSSIBLE_PROVIDERS.forEach((provider, providerIdx) => {
+    POSSIBLE_PROVIDERS.forEach((provider) => {
       if (!configuredProviders[provider]) return;
       const Icon2 = PROVIDERS_META[provider].icon;
-      if (usedProviders[provider]) {
-        const apiProviderName = provider === "twitter" ? "x" : provider;
-        const providerData = providers.find((p) => p.provider === apiProviderName || p.provider === provider);
-        if (providerData) {
-          used.push(/* @__PURE__ */ jsx56(ProviderCard, { ...providerData }, `${provider}-${providerIdx}`));
-        }
-      } else {
+      const matches = providers.filter((p) => normalizeProviderName(p.provider) === provider);
+      matches.forEach((providerData, idx) => {
+        used.push(
+          /* @__PURE__ */ jsx56(ProviderCard, { ...providerData }, `${provider}-${providerData.externalId || idx}`)
+        );
+      });
+      const isMulti = MULTI_PROVIDERS.includes(provider);
+      if (isMulti || matches.length === 0) {
         unused.push(
           /* @__PURE__ */ jsxs49(
             Button,
@@ -10688,7 +10696,7 @@ function ManageWalletMenu() {
                 ] })
               ]
             },
-            `${provider}-${providerIdx}`
+            `add-${provider}`
           )
         );
       }
@@ -10750,7 +10758,7 @@ function ManageWalletMenu() {
     }
   );
 }
-var POSSIBLE_PROVIDERS;
+var POSSIBLE_PROVIDERS, MULTI_PROVIDERS;
 var init_ManageWallet = __esm({
   "src/internal/components/ManageWalletMenu/ManageWallet.tsx"() {
     init_useLayoutDataStore();
@@ -10778,6 +10786,7 @@ var init_ManageWallet = __esm({
       "passkey",
       "wallet"
     ];
+    MULTI_PROVIDERS = ["email", "wallet"];
   }
 });
 
@@ -15470,7 +15479,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.2.5",
+      version: "0.2.7",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -17823,7 +17832,7 @@ var init_iframe_manager = __esm({
         const response = await this.sendMessage("SDK_AUTH", {
           projectId: this.projectId
         });
-        if (response.type === "LUMIA_PASSPORT_SDK_AUTH_SUCCESS") {
+        if (response.type === "IFRAME_MSG_SDK_AUTH_SUCCESS") {
           this.channelToken = response.sessionToken;
         } else {
           throw new Error("SDK channel authentication failed");
@@ -17904,6 +17913,17 @@ var init_iframe_manager = __esm({
         });
         this.log("[IframeManager] Visibility handler setup");
       }
+      /**
+       * Normalize legacy message types from cached iframe versions.
+       * Old iframe sends LUMIA_PASSPORT_*, new iframe sends IFRAME_MSG_*.
+       * This ensures both work until all browser caches expire.
+       */
+      normalizeMessageType(type) {
+        if (type.startsWith("LUMIA_PASSPORT_")) {
+          return type.replace("LUMIA_PASSPORT_", "IFRAME_MSG_");
+        }
+        return type;
+      }
       /**
        * Handle incoming postMessage events
        */
@@ -17912,24 +17932,25 @@ var init_iframe_manager = __esm({
         if (!message || typeof message !== "object" || !message.type) {
           return;
         }
+        message.type = this.normalizeMessageType(message.type);
         const validIframeTypes = [
-          "LUMIA_PASSPORT_IFRAME_READY",
-          "LUMIA_PASSPORT_WALLET_READY",
-          "LUMIA_PASSPORT_SHOW_IFRAME",
-          "LUMIA_PASSPORT_HIDE_IFRAME",
-          "LUMIA_PASSPORT_SDK_AUTH_SUCCESS",
-          "LUMIA_PASSPORT_AUTH_SUCCESS",
-          "LUMIA_PASSPORT_DKG_SUCCESS",
-          "LUMIA_PASSPORT_SIGNATURE",
-          "LUMIA_PASSPORT_ADDRESS",
-          "LUMIA_PASSPORT_KEYSHARE_STATUS",
-          "LUMIA_PASSPORT_TRUSTED_APPS_LIST",
-          "LUMIA_PASSPORT_TRUSTED_APP_REMOVED",
-          "LUMIA_PASSPORT_REQUEST_NEW_TOKEN",
-          "LUMIA_PASSPORT_TOKEN_REFRESHED",
-          "LUMIA_PASSPORT_HEARTBEAT_RESPONSE",
-          "LUMIA_PASSPORT_RESPONSE",
-          "LUMIA_PASSPORT_ERROR"
+          "IFRAME_MSG_IFRAME_READY",
+          "IFRAME_MSG_WALLET_READY",
+          "IFRAME_MSG_SHOW_IFRAME",
+          "IFRAME_MSG_HIDE_IFRAME",
+          "IFRAME_MSG_SDK_AUTH_SUCCESS",
+          "IFRAME_MSG_AUTH_SUCCESS",
+          "IFRAME_MSG_DKG_SUCCESS",
+          "IFRAME_MSG_SIGNATURE",
+          "IFRAME_MSG_ADDRESS",
+          "IFRAME_MSG_KEYSHARE_STATUS",
+          "IFRAME_MSG_TRUSTED_APPS_LIST",
+          "IFRAME_MSG_TRUSTED_APP_REMOVED",
+          "IFRAME_MSG_REQUEST_NEW_TOKEN",
+          "IFRAME_MSG_TOKEN_REFRESHED",
+          "IFRAME_MSG_HEARTBEAT_RESPONSE",
+          "IFRAME_MSG_RESPONSE",
+          "IFRAME_MSG_ERROR"
         ];
         if (!validIframeTypes.includes(message.type) && !message.messageId) {
           return;
@@ -17942,31 +17963,31 @@ var init_iframe_manager = __esm({
           });
           return;
         }
-        if (message.type === "LUMIA_PASSPORT_IFRAME_READY") {
-          this.log("[IframeManager] \u{1F4E8} Received LUMIA_PASSPORT_IFRAME_READY");
+        if (message.type === "IFRAME_MSG_IFRAME_READY") {
+          this.log("[IframeManager] \u{1F4E8} Received IFRAME_MSG_IFRAME_READY");
           this.isReady = true;
           this.readyResolve();
           return;
         }
-        if (message.type === "LUMIA_PASSPORT_WALLET_READY") {
-          this.log("[IframeManager] \u{1F4E8} Received LUMIA_PASSPORT_WALLET_READY", message.data);
+        if (message.type === "IFRAME_MSG_WALLET_READY") {
+          this.log("[IframeManager] \u{1F4E8} Received IFRAME_MSG_WALLET_READY", message.data);
           if (this.onWalletReadyCallback) {
             this.onWalletReadyCallback(message.data);
           }
           return;
         }
-        if (message.type === "LUMIA_PASSPORT_SHOW_IFRAME") {
-          this.log("[IframeManager] \u{1F4E8} Received LUMIA_PASSPORT_SHOW_IFRAME");
+        if (message.type === "IFRAME_MSG_SHOW_IFRAME") {
+          this.log("[IframeManager] \u{1F4E8} Received IFRAME_MSG_SHOW_IFRAME");
           this.showIframe();
           return;
         }
-        if (message.type === "LUMIA_PASSPORT_HIDE_IFRAME") {
-          this.log("[IframeManager] \u{1F4E8} Received LUMIA_PASSPORT_HIDE_IFRAME");
+        if (message.type === "IFRAME_MSG_HIDE_IFRAME") {
+          this.log("[IframeManager] \u{1F4E8} Received IFRAME_MSG_HIDE_IFRAME");
           this.hideIframe();
           return;
         }
-        if (message.type === "LUMIA_PASSPORT_REQUEST_NEW_TOKEN") {
-          this.log("[IframeManager] \u{1F4E8} Received LUMIA_PASSPORT_REQUEST_NEW_TOKEN");
+        if (message.type === "IFRAME_MSG_REQUEST_NEW_TOKEN") {
+          this.log("[IframeManager] \u{1F4E8} Received IFRAME_MSG_REQUEST_NEW_TOKEN");
           this.handleTokenRefreshRequest(message).catch((error) => {
             this.log("[IframeManager] \u274C Token refresh error:", error);
           });
@@ -17976,7 +17997,7 @@ var init_iframe_manager = __esm({
           const pending = this.pendingRequests.get(message.messageId);
           if (pending) {
             this.pendingRequests.delete(message.messageId);
-            if (message.type === "LUMIA_PASSPORT_ERROR") {
+            if (message.type === "IFRAME_MSG_ERROR") {
               const passportError = createAccountAbstractionError({
                 message: message.error || "Unknown error",
                 code: message.code
@@ -18001,7 +18022,7 @@ var init_iframe_manager = __esm({
               const iframeOrigin = new URL(this.iframeUrl).origin;
               this.iframe.contentWindow.postMessage(
                 {
-                  type: "LUMIA_PASSPORT_TOKEN_REFRESHED",
+                  type: "IFRAME_MSG_TOKEN_REFRESHED",
                   messageId: message.messageId,
                   accessToken: newAccessToken,
                   timestamp: Date.now()
@@ -18014,7 +18035,7 @@ var init_iframe_manager = __esm({
               const iframeOrigin = new URL(this.iframeUrl).origin;
               this.iframe.contentWindow.postMessage(
                 {
-                  type: "LUMIA_PASSPORT_TOKEN_REFRESHED",
+                  type: "IFRAME_MSG_TOKEN_REFRESHED",
                   messageId: message.messageId,
                   error: "Token refresh failed",
                   timestamp: Date.now()
@@ -18028,7 +18049,7 @@ var init_iframe_manager = __esm({
             const iframeOrigin = new URL(this.iframeUrl).origin;
             this.iframe.contentWindow.postMessage(
               {
-                type: "LUMIA_PASSPORT_TOKEN_REFRESHED",
+                type: "IFRAME_MSG_TOKEN_REFRESHED",
                 messageId: message.messageId,
                 error: error instanceof Error ? error.message : "Unknown error",
                 timestamp: Date.now()
@@ -18279,7 +18300,7 @@ var init_iframe_manager = __esm({
           avatar,
           displayName
         });
-        if (response.type === "LUMIA_PASSPORT_AUTH_SUCCESS") {
+        if (response.type === "IFRAME_MSG_AUTH_SUCCESS") {
           return {
             userId: response.userId,
             address: response.address
@@ -18297,7 +18318,7 @@ var init_iframe_manager = __esm({
           accessToken
           // Pass access token for TSS API authentication
         });
-        if (response.type === "LUMIA_PASSPORT_DKG_SUCCESS") {
+        if (response.type === "IFRAME_MSG_DKG_SUCCESS") {
           return response.ownerAddress;
         }
         throw new Error("DKG failed");
@@ -18320,7 +18341,7 @@ var init_iframe_manager = __esm({
           avatar,
           displayName
         });
-        if (response.type === "LUMIA_PASSPORT_SIGNATURE") {
+        if (response.type === "IFRAME_MSG_SIGNATURE") {
           return response.signature;
         }
         throw new Error("Transaction signing failed");
@@ -18353,7 +18374,7 @@ var init_iframe_manager = __esm({
           type: response.type,
           hasSignature: !!response.signature
         });
-        if (response.type === "LUMIA_PASSPORT_EIP712_SIGNATURE") {
+        if (response.type === "IFRAME_MSG_EIP712_SIGNATURE") {
           return response.signature;
         }
         throw new Error("EIP712 signing failed");
@@ -18365,7 +18386,7 @@ var init_iframe_manager = __esm({
         const response = await this.sendMessage("GET_ADDRESS", {
           userId
         });
-        if (response.type === "LUMIA_PASSPORT_ADDRESS") {
+        if (response.type === "IFRAME_MSG_ADDRESS") {
           return response.address;
         }
         return void 0;
@@ -18377,7 +18398,7 @@ var init_iframe_manager = __esm({
         const response = await this.sendMessage("CHECK_KEYSHARE", {
           userId
         });
-        if (response.type === "LUMIA_PASSPORT_KEYSHARE_STATUS") {
+        if (response.type === "IFRAME_MSG_KEYSHARE_STATUS") {
           return {
             hasKeyshare: response.hasKeyshare,
             address: response.address
@@ -18773,7 +18794,7 @@ var init_iframe_manager = __esm({
         const response = await this.sendMessage("GET_TRUSTED_APPS", {
           userId
         });
-        if (response.type === "LUMIA_PASSPORT_TRUSTED_APPS_LIST") {
+        if (response.type === "IFRAME_MSG_TRUSTED_APPS_LIST") {
           return response.apps || [];
         }
         return [];
@@ -18787,7 +18808,7 @@ var init_iframe_manager = __esm({
           projectId,
           appOrigin: origin
         });
-        if (response.type === "LUMIA_PASSPORT_TRUSTED_APP_REMOVED") {
+        if (response.type === "IFRAME_MSG_TRUSTED_APP_REMOVED") {
           return response.success;
         }
         return false;
@@ -18818,7 +18839,7 @@ var init_iframe_manager = __esm({
           accessToken
           // Pass access token for TSS API authentication
         });
-        if (response.type === "LUMIA_PASSPORT_BACKUP_CREATED") {
+        if (response.type === "IFRAME_MSG_BACKUP_CREATED") {
           return response.result;
         }
         throw new Error("Unexpected response type");
@@ -18833,7 +18854,7 @@ var init_iframe_manager = __esm({
           accessToken
           // Pass access token for TSS API authentication
         });
-        if (response.type === "LUMIA_PASSPORT_BACKUP_RESTORED") {
+        if (response.type === "IFRAME_MSG_BACKUP_RESTORED") {
           return response.result;
         }
         throw new Error("Unexpected response type");
@@ -18847,7 +18868,7 @@ var init_iframe_manager = __esm({
           userId,
           password
         });
-        if (response.type === "LUMIA_PASSPORT_BACKUP_ENCRYPTED") {
+        if (response.type === "IFRAME_MSG_BACKUP_ENCRYPTED") {
           return response.encryptedData;
         }
         throw new Error("Unexpected response type");
@@ -18861,7 +18882,7 @@ var init_iframe_manager = __esm({
           fileContent,
           password
         });
-        if (response.type === "LUMIA_PASSPORT_FILE_RESTORED") {
+        if (response.type === "IFRAME_MSG_FILE_RESTORED") {
           return response.result;
         }
         throw new Error("Unexpected response type");
@@ -18873,7 +18894,7 @@ var init_iframe_manager = __esm({
         const response = await this.sendMessage("GET_BACKUP_STATUS", {
           userId
         });
-        if (response.type === "LUMIA_PASSPORT_BACKUP_STATUS") {
+        if (response.type === "IFRAME_MSG_BACKUP_STATUS") {
           return response.status;
         }
         throw new Error("Unexpected response type");
@@ -18883,7 +18904,7 @@ var init_iframe_manager = __esm({
        */
       async getCloudProviders() {
         const response = await this.sendMessage("GET_CLOUD_PROVIDERS", {});
-        if (response.type === "LUMIA_PASSPORT_CLOUD_PROVIDERS") {
+        if (response.type === "IFRAME_MSG_CLOUD_PROVIDERS") {
           return response.providers;
         }
         throw new Error("Unexpected response type");