@lumiapassport/ui-kit 1.10.0 → 1.11.0

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.10.0</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.11.0</title>
 
     <!-- Styles will be injected by build process -->
     <style>
@@ -156,6 +156,16 @@
       }
 
       /* Modal Overlays */
+      /* Authorization modal container */
+      .authorization-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10000;
+      }
+
       /* Transaction confirmation modal container */
       .transaction-confirmation-modal {
         position: fixed;
@@ -232,6 +242,12 @@
         object-fit: contain;
       }
 
+      .lumia-logo.user-avatar {
+        border-radius: 50%;
+        border: 2px solid var(--iframe-border);
+        object-fit: cover;
+      }
+
       /* Authorization Title */
       .auth-title {
         font-size: 1.5rem;

package/dist/iframe/main.js

@@ -2507,9 +2507,11 @@ var TrustedAppsManager = class {
    */
   isTrusted(userId, projectId, origin) {
     const trustedApps = this.getTrustedApps();
-    return trustedApps.some(
+    const result = trustedApps.some(
       (app) => app.userId === userId && app.projectId === projectId && app.origin === origin
     );
+    console.log("[TrustedApps] isTrusted check:", { userId, projectId, origin, result, totalApps: trustedApps.length });
+    return result;
   }
   /**
    * Add app to trusted list
@@ -2549,8 +2551,12 @@ var TrustedAppsManager = class {
    * Get all trusted apps for a user
    */
   getTrustedAppsForUser(userId) {
+    console.log("[TrustedApps] Getting trusted apps for user:", userId);
     const trustedApps = this.getTrustedApps();
-    return trustedApps.filter((app) => app.userId === userId);
+    console.log("[TrustedApps] Total apps in storage:", trustedApps.length, trustedApps);
+    const filtered = trustedApps.filter((app) => app.userId === userId);
+    console.log("[TrustedApps] Filtered apps for user:", filtered.length, filtered);
+    return filtered;
   }
   /**
    * Clear all trusted apps for a user
@@ -2568,10 +2574,13 @@ var TrustedAppsManager = class {
   getTrustedApps() {
     try {
       const data = localStorage.getItem(STORAGE_KEY);
+      console.log("[TrustedApps] Raw storage data:", data);
       if (!data) {
+        console.log("[TrustedApps] No data in storage");
         return [];
       }
       const apps = JSON.parse(data);
+      console.log("[TrustedApps] Parsed apps:", apps);
       return Array.isArray(apps) ? apps : [];
     } catch (error) {
       console.error("[TrustedApps] Error reading trusted apps:", error);
@@ -2677,7 +2686,7 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Sign transaction with user confirmation
    */
-  async signTransaction(userId, projectId, origin, transaction, accessToken) {
+  async signTransaction(userId, projectId, origin, transaction, accessToken, userProfile) {
     if (!this.wasmLoaded) {
       await this.initialize();
     }
@@ -2702,7 +2711,8 @@ var SigningManager = class extends TokenRefreshApiClient {
         projectInfo,
         origin,
         transaction,
-        risk
+        risk,
+        userProfile
       );
       if (!confirmResult.confirmed) {
         throw new Error("User rejected transaction");
@@ -2782,11 +2792,11 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Show transaction confirmation dialog
    */
-  async showConfirmationDialog(userId, projectId, project, origin, transaction, risk) {
+  async showConfirmationDialog(userId, projectId, project, origin, transaction, risk, userProfile) {
     this.showIframe();
     const metadata = await this.fetchProjectMetadata(projectId);
     return new Promise((resolve) => {
-      const modal = this.createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata);
+      const modal = this.createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata, userProfile);
       const confirmBtn = modal.querySelector(".confirm-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const trustCheckbox = modal.querySelector(".trust-app-checkbox");
@@ -2809,11 +2819,13 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Create confirmation modal UI
    */
-  createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata) {
+  createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata, userProfile) {
     const modal = document.createElement("div");
     modal.className = "transaction-confirmation-modal";
     const isVerifiedOrigin = project.domains.includes(origin);
     const isUserOp = !!transaction.userOpDetails;
+    const userAvatar = userProfile?.avatar;
+    const userName = userProfile?.displayName || "Lumia Passport";
     const isSponsored = isUserOp && !!transaction.userOpDetails?.paymaster;
     const estimatedCost = isSponsored ? "0 (Sponsored)" : "Free (Sponsored Transaction)";
     const displayName = metadata?.name || project.name;
@@ -2849,7 +2861,7 @@ var SigningManager = class extends TokenRefreshApiClient {
                   <path d="M23.7071 8.70711C24.0976 8.31658 24.0976 7.68342 23.7071 7.29289L17.3431 0.928932C16.9526 0.538408 16.3195 0.538408 15.9289 0.928932C15.5384 1.31946 15.5384 1.95262 15.9289 2.34315L21.5858 8L15.9289 13.6569C15.5384 14.0474 15.5384 14.6805 15.9289 15.0711C16.3195 15.4616 16.9526 15.4616 17.3431 15.0711L23.7071 8.70711ZM0 9H23V7H0V9Z"/>
                 </svg>
               </div>
-              <img src="./lumia-logo.svg" alt="Lumia Passport" class="lumia-logo" />
+              ${userAvatar ? `<img src="${userAvatar}" alt="${userName}" class="lumia-logo user-avatar" />` : '<img src="./lumia-logo.svg" alt="Lumia Passport" class="lumia-logo" />'}
             </div>
           </div>
 
@@ -3018,7 +3030,7 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Sign EIP712 typed data with user confirmation
    */
-  async signTypedData(userId, projectId, origin, typedData, digest32, accessToken) {
+  async signTypedData(userId, projectId, origin, typedData, digest32, accessToken, userProfile) {
     console.log("[iframe][Sign] EIP712 signing request:", { userId, projectId, origin, primaryType: typedData.primaryType });
     await this.initialize();
     const projectInfo = {
@@ -3035,7 +3047,8 @@ var SigningManager = class extends TokenRefreshApiClient {
         projectId,
         projectInfo,
         origin,
-        typedData
+        typedData,
+        userProfile
       );
       if (!confirmResult.confirmed) {
         throw new Error("User rejected signature request");
@@ -3055,11 +3068,11 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Show EIP712 confirmation dialog
    */
-  async showEIP712ConfirmationDialog(userId, projectId, project, origin, typedData) {
+  async showEIP712ConfirmationDialog(userId, projectId, project, origin, typedData, userProfile) {
     this.showIframe();
     const metadata = await this.fetchProjectMetadata(projectId);
     return new Promise((resolve) => {
-      const modal = this.createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata);
+      const modal = this.createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata, userProfile);
       const confirmBtn = modal.querySelector(".confirm-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const trustCheckbox = modal.querySelector(".trust-app-checkbox");
@@ -3082,10 +3095,12 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Create EIP712 confirmation modal UI (similar to MetaMask)
    */
-  createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata) {
+  createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata, userProfile) {
     const modal = document.createElement("div");
     modal.className = "eip712-confirmation-modal";
     const isVerifiedOrigin = project.domains.includes(origin);
+    const userAvatar = userProfile?.avatar;
+    const userName = userProfile?.displayName || "Lumia Passport";
     const formatFieldValue = (value) => {
       if (Array.isArray(value)) {
         return `[${value.map((v) => formatFieldValue(v)).join(", ")}]`;
@@ -3118,7 +3133,7 @@ var SigningManager = class extends TokenRefreshApiClient {
             <div class="logo-container">
               ${metadata?.logo ? `<img src="${metadata.logo}" alt="${metadata.name}" class="project-logo" />` : '<div class="project-logo-placeholder">\u{1F510}</div>'}
               <span class="arrow-icon">\u2192</span>
-              <div class="lumia-logo">L</div>
+              ${userAvatar ? `<img src="${userAvatar}" alt="${userName}" class="lumia-logo user-avatar" style="width: 40px; height: 40px;" />` : '<div class="lumia-logo">L</div>'}
             </div>
             <h2 class="modal-title">Signature Request</h2>
             <p class="origin-text">
@@ -3292,11 +3307,11 @@ var AuthorizationManager = class {
   /**
    * Request user authorization with consent screen
    */
-  async requestAuthorization(project, origin) {
+  async requestAuthorization(project, origin, userProfile) {
     this.showIframe();
     const metadata = await this.fetchProjectMetadata(project.id);
     return new Promise((resolve) => {
-      const modal = this.createAuthorizationModal(project, origin, metadata);
+      const modal = this.createAuthorizationModal(project, origin, metadata, userProfile);
       const authorizeBtn = modal.querySelector(".authorize-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const cleanup = (result) => {
@@ -3344,13 +3359,15 @@ var AuthorizationManager = class {
   /**
    * Create authorization consent modal
    */
-  createAuthorizationModal(project, origin, metadata) {
+  createAuthorizationModal(project, origin, metadata, userProfile) {
     const modal = document.createElement("div");
     modal.className = "authorization-modal";
     const isVerifiedOrigin = project.domains.includes(origin);
     const displayName = metadata?.name || project.name;
     const displayLogo = metadata?.logo || project.logoUrl;
     const displayDescription = metadata?.description;
+    const userAvatar = userProfile?.avatar;
+    const userName = userProfile?.displayName || "Lumia Passport";
     modal.innerHTML = `
       <div class="modal-overlay">
         <div class="modal-content">
@@ -3363,7 +3380,7 @@ var AuthorizationManager = class {
                   <path d="M23.7071 8.70711C24.0976 8.31658 24.0976 7.68342 23.7071 7.29289L17.3431 0.928932C16.9526 0.538408 16.3195 0.538408 15.9289 0.928932C15.5384 1.31946 15.5384 1.95262 15.9289 2.34315L21.5858 8L15.9289 13.6569C15.5384 14.0474 15.5384 14.6805 15.9289 15.0711C16.3195 15.4616 16.9526 15.4616 17.3431 15.0711L23.7071 8.70711ZM0 9H23V7H0V9Z"/>
                 </svg>
               </div>
-              <img src="./lumia-logo.svg" alt="Lumia Passport" class="lumia-logo" />
+              ${userAvatar ? `<img src="${userAvatar}" alt="${userName}" class="lumia-logo user-avatar" />` : '<img src="./lumia-logo.svg" alt="Lumia Passport" class="lumia-logo" />'}
             </div>
           </div>
 
@@ -3947,7 +3964,7 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.10.0";
+var IFRAME_VERSION = "1.11.0";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -4098,7 +4115,7 @@ var IframeWallet = class {
     console.log(`[iframe] \u2705 SDK authenticated for origin: ${origin.substring(0, 40)}...`);
   }
   async handleAuthenticate(message, origin) {
-    const { sessionToken, projectId, userId } = message.data;
+    const { sessionToken, projectId, userId, avatar, displayName } = message.data;
     const { messageId } = message;
     if (!this.sessionManager.validateSession(sessionToken, origin)) {
       throw new Error("Invalid session");
@@ -4114,7 +4131,7 @@ var IframeWallet = class {
         website: origin,
         domains: [origin]
       };
-      const consent = await this.authManager.requestAuthorization(projectInfo, origin);
+      const consent = await this.authManager.requestAuthorization(projectInfo, origin, { avatar, displayName });
       if (!consent) {
         throw new Error("User denied authorization");
       }
@@ -4175,7 +4192,7 @@ var IframeWallet = class {
     }
   }
   async handleSignTransaction(message, origin) {
-    const { sessionToken, userId, projectId, transaction, accessToken } = message.data;
+    const { sessionToken, userId, projectId, transaction, accessToken, avatar, displayName } = message.data;
     const { messageId } = message;
     if (!this.sessionManager.validateSession(sessionToken, origin)) {
       throw new Error("Invalid session");
@@ -4191,7 +4208,8 @@ var IframeWallet = class {
         projectId,
         origin,
         transaction,
-        accessToken
+        accessToken,
+        { avatar, displayName }
       );
       this.messenger.sendResponse(
         messageId,
@@ -4208,7 +4226,7 @@ var IframeWallet = class {
     }
   }
   async handleSignTypedData(message, origin) {
-    const { sessionToken, userId, projectId, typedData, digest32, accessToken } = message.data;
+    const { sessionToken, userId, projectId, typedData, digest32, accessToken, avatar, displayName } = message.data;
     const { messageId } = message;
     if (!this.sessionManager.validateSession(sessionToken, origin)) {
       throw new Error("Invalid session");
@@ -4225,7 +4243,8 @@ var IframeWallet = class {
         origin,
         typedData,
         digest32,
-        accessToken
+        accessToken,
+        { avatar, displayName }
       );
       this.messenger.sendResponse(
         messageId,