@lumiapassport/ui-kit 1.4.16 → 1.5.0

package/dist/iframe/_headers

@@ -5,8 +5,9 @@
   # Content Security Policy - Strict security policy for iframe
   # IMPORTANT: frame-ancestors 'https:' allows embedding on any HTTPS site
   # Domain validation is performed via projectId check in JavaScript
-  # connect-src whitelist: only allowed TSS servers (where the second key share is stored)
-  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https://api.lumiapassport.com https://lumiaid-demo.18102024.xyz http://localhost:*; frame-ancestors https: http://localhost:*; base-uri 'self'; form-action 'self';
+  # connect-src whitelist: only allowed TSS servers (where the second key share is stored) and lumiapassport.com subdomains
+  # NOTE: http://localhost:* in frame-ancestors is for development testing only
+  Content-Security-Policy: default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' https://*.lumiapassport.com; frame-ancestors https: http://localhost:*; base-uri 'self'; form-action 'self';
 
   # Allow iframe embedding from HTTPS sites (domain validation in JS)
   # X-Frame-Options is NOT set (CSP frame-ancestors takes precedence)

package/dist/iframe/index.html

@@ -7,17 +7,29 @@
     <!-- Security Headers -->
     <!-- NOTE: These are fallback headers for development. Production uses _headers file from Cloudflare -->
     <!-- WARNING: frame-ancestors MUST be set via HTTP headers, not meta tags (it's ignored in meta) -->
+    <!-- WARNING: localhost is allowed ONLY for local development, production CSP in _headers is stricter -->
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' http://localhost:* https:; base-uri 'self'; form-action 'self';"
+      content="default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https: blob:; font-src 'self'; connect-src 'self' http://localhost:* https://*.lumiapassport.com; base-uri 'self'; form-action 'self';"
     />
     <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.4.16</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.5.0</title>
 
     <!-- Styles will be injected by build process -->
     <style>
+      :root {
+        /* Default theme colors (can be overridden via URL params) */
+        --iframe-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        --iframe-text: #333;
+        --iframe-text-secondary: #666;
+        --iframe-border: #e0e0e0;
+        --iframe-modal-bg: white;
+        --iframe-button-bg: #667eea;
+        --iframe-button-text: white;
+      }
+
       * {
         margin: 0;
         padding: 0;
@@ -26,8 +38,8 @@
 
       body {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: #333;
+        background: var(--iframe-bg);
+        color: var(--iframe-text);
         min-height: 100vh;
         display: flex;
         align-items: center;
@@ -45,7 +57,7 @@
       /* Ready Indicator */
       .ready-indicator {
         text-align: center;
-        background: white;
+        background: var(--iframe-modal-bg);
         padding: 3rem;
         border-radius: 16px;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
@@ -60,11 +72,11 @@
       .ready-indicator h2 {
         font-size: 1.5rem;
         margin-bottom: 0.5rem;
-        color: #333;
+        color: var(--iframe-text);
       }
 
       .ready-indicator p {
-        color: #666;
+        color: var(--iframe-text-secondary);
         margin-bottom: 1.5rem;
       }
 
@@ -164,96 +176,239 @@
       }
 
       .modal-content {
-        background: white;
+        background: var(--iframe-modal-bg);
         border-radius: 12px;
-        padding: 2rem;
-        max-width: 90%;
-        max-height: 90%;
+        padding: 0;
+        max-width: 520px;
+        width: 90%;
+        max-height: 90vh;
         overflow-y: auto;
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
       }
 
-      .modal-content h2 {
-        font-size: 1.5rem;
-        margin-bottom: 1rem;
-        color: #333;
+      /* Authorization Header with Logos */
+      .auth-header {
+        padding: 1rem 1rem 0.75rem;
+        text-align: center;
+        border-bottom: 1px solid var(--iframe-border);
       }
 
-      .modal-content h3 {
-        font-size: 1.1rem;
-        margin: 1rem 0 0.5rem;
-        color: #555;
+      .logo-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        margin-bottom: 0.75rem;
       }
 
-      .app-identity {
-        text-align: center;
-        padding: 1rem;
-        border-bottom: 1px solid #e0e0e0;
-        margin-bottom: 1.5rem;
+      .app-logo {
+        width: 64px;
+        height: 64px;
+        border-radius: 12px;
+        border: 1px solid var(--iframe-border);
+        object-fit: cover;
       }
 
-      .app-logo {
+      .app-logo-placeholder {
         width: 64px;
         height: 64px;
-        margin-bottom: 0.5rem;
+        border-radius: 12px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+
+      .logo-connector {
+        color: #6b7280;
+        display: flex;
+        align-items: center;
+      }
+
+      .lumia-logo {
+        width: 48px;
+        height: 48px;
+        object-fit: contain;
+      }
+
+      /* Authorization Title */
+      .auth-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: var(--iframe-text);
+        margin: 0;
+        padding: 1.5rem 2rem 0;
+        text-align: center;
+      }
+
+      /* Description Section */
+      .auth-description {
+        padding: 1rem 2rem;
+        text-align: center;
+      }
+
+      .project-description {
+        font-size: 0.875rem;
+        color: var(--iframe-text-secondary);
+        margin: 0 0 0.75rem 0;
+        line-height: 1.5;
+      }
+
+      .domain-info {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: 0.875rem;
+        padding: 0.5rem 1rem;
+        border-radius: 6px;
+        background: #f6f8fa;
+      }
+
+      .domain-info.verified {
+        background: #dff6dd;
+        color: #1a7f37;
+      }
+
+      .domain-info.unverified {
+        background: #fff8c5;
+        color: #9a6700;
+      }
+
+      .domain-label {
+        font-weight: 500;
+      }
+
+      .domain-value {
+        font-family: monospace;
+        font-size: 0.8125rem;
+      }
+
+      /* Permissions Box */
+      .permissions-box {
+        margin: 1.5rem 2rem;
+        padding: 1rem;
+        border: 1px solid #30363d;
         border-radius: 8px;
+        background: #161b22;
       }
 
-      .app-origin {
-        font-size: 0.9rem;
-        margin-top: 0.5rem;
+      .permissions-header {
+        font-size: 0.875rem;
+        color: #c9d1d9;
+        margin-bottom: 1rem;
+        line-height: 1.5;
       }
 
-      .app-origin.verified {
-        color: #10b981;
+      .project-owner {
+        color: #8b949e;
+      }
+
+      .permission-group {
+        margin-bottom: 1rem;
+      }
+
+      .permission-group:last-child {
+        margin-bottom: 0;
+      }
+
+      .permission-group-title {
+        font-size: 0.8125rem;
+        font-weight: 600;
+        color: #c9d1d9;
+        margin-bottom: 0.5rem;
+      }
+
+      .permissions-list ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .permissions-list li {
+        font-size: 0.8125rem;
+        color: #c9d1d9;
+        padding: 0.25rem 0;
+        padding-left: 1.25rem;
+        position: relative;
       }
 
-      .app-origin.unverified {
-        color: #f59e0b;
+      .permissions-list li:before {
+        content: "•";
+        position: absolute;
+        left: 0.5rem;
+        color: #8b949e;
       }
 
+      /* Actions Section */
       .actions {
         display: flex;
-        gap: 1rem;
-        margin-top: 1.5rem;
+        gap: 0.5rem;
+        padding: 1.5rem 2rem;
+        border-top: 1px solid var(--iframe-border);
       }
 
       button {
         flex: 1;
-        padding: 0.75rem 1.5rem;
-        border: none;
-        border-radius: 8px;
-        font-size: 1rem;
+        padding: 0.625rem 1.25rem;
+        border: 1px solid;
+        border-radius: 6px;
+        font-size: 0.875rem;
         cursor: pointer;
-        font-weight: 600;
-        transition: all 0.2s;
+        font-weight: 500;
+        transition: all 0.15s;
       }
 
       .cancel-btn {
-        background: #e5e7eb;
-        color: #374151;
+        background: #ffffff;
+        color: #24292f;
+        border-color: rgba(27, 31, 36, 0.15);
       }
 
       .cancel-btn:hover {
-        background: #d1d5db;
+        background: #f6f8fa;
+        border-color: rgba(27, 31, 36, 0.2);
       }
 
       .confirm-btn,
       .authorize-btn {
-        background: #667eea;
-        color: white;
+        background: #2da44e;
+        color: #ffffff;
+        border-color: rgba(27, 31, 36, 0.15);
       }
 
       .confirm-btn:hover,
       .authorize-btn:hover {
-        background: #5568d3;
+        background: #2c974b;
       }
 
       button:disabled {
-        opacity: 0.5;
+        opacity: 0.6;
         cursor: not-allowed;
       }
 
+      button:disabled:hover {
+        background: #2da44e;
+      }
+
+      /* Footer */
+      .auth-footer {
+        padding: 0 2rem 2rem;
+        text-align: center;
+      }
+
+      .auth-footer p {
+        font-size: 0.75rem;
+        color: var(--iframe-text-secondary);
+        margin: 0.5rem 0;
+        line-height: 1.5;
+      }
+
+      .auth-footer strong {
+        font-weight: 600;
+        color: var(--iframe-text);
+      }
+
+      .footer-note {
+        color: #6b7280;
+      }
+
       .tx-details {
         background: #f9fafb;
         border-radius: 8px;
@@ -278,18 +433,31 @@
         color: #6b7280;
       }
 
-      .security-notice {
-        background: #fef3c7;
-        border-left: 4px solid #f59e0b;
+      /* Security Warning */
+      .security-warning {
+        margin: 1rem 2rem;
         padding: 1rem;
-        margin: 1rem 0;
-        border-radius: 4px;
+        background: #fff8c5;
+        border: 1px solid #d29922;
+        border-radius: 6px;
+        font-size: 0.8125rem;
+        color: #9a6700;
       }
 
-      .security-notice p {
-        font-size: 0.9rem;
-        color: #92400e;
-        margin: 0;
+      .security-warning strong {
+        display: block;
+        margin-bottom: 0.5rem;
+      }
+
+      .warning-details {
+        margin-top: 0.5rem;
+        font-family: monospace;
+        font-size: 0.75rem;
+        color: #7d5d00;
+      }
+
+      .warning-details div {
+        margin: 0.25rem 0;
       }
 
       .risk-warning {
@@ -313,16 +481,6 @@
         border-left: 4px solid #ec4899;
       }
 
-      .permissions-list ul {
-        list-style: none;
-        padding: 0;
-      }
-
-      .permissions-list li {
-        padding: 0.5rem 0;
-        color: #555;
-      }
-
       /* Additional modal styles for transaction confirmation */
       .app-identity .app-info h3 {
         font-size: 1.2rem;

package/dist/iframe/lumia-logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="CIRCLE_OUTLINE_BLACK" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#060117" stroke-width="0"/><path d="M264.13948,48.01032l63.62778,132.2788,133.95322,68.65102h-147.34854s-48.55804-10.04649-50.23246-56.93012,0-143.99971,0-143.99971Z" fill="#fefdff" stroke-width="0"/><path d="M50.27932,245.59045l132.27894-63.62734L251.20943,48.01032l-.00012,147.34824s-10.04654,48.55792-56.93019,50.23222c-46.88366,1.6743-143.9998-.00033-143.9998-.00033Z" fill="#fefdff" stroke-width="0"/><path d="M247.86056,463.98968l-63.62772-132.27875-133.95315-68.65092,147.34848-.00011s48.55802,10.04646,50.23242,56.93008c1.6744,46.88362-.00004,143.9997-.00004,143.9997Z" fill="#fefdff" stroke-width="0"/><path d="M461.72068,266.40941l-132.2789,63.62744-68.65118,133.95283.00016-147.34823s10.04655-48.55792,56.93018-50.23226c46.88364-1.67434,143.99974.00023,143.99974.00023Z" fill="#fefdff" stroke-width="0"/></svg>

package/dist/iframe/main.js

@@ -2921,8 +2921,27 @@ var SigningManager = class extends TokenRefreshApiClient {
 var AuthorizationManager = class {
   constructor() {
     this.STORAGE_KEY_PREFIX = "auth";
+    this.METADATA_API_URL = "https://dashboard.lumiapassport.com/api/public/project";
     console.log("[iframe][Auth] Initialized");
   }
+  /**
+   * Fetch project metadata from public API
+   */
+  async fetchProjectMetadata(projectId) {
+    try {
+      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`);
+      if (!response.ok) {
+        console.warn(`[iframe][Auth] Failed to fetch project metadata: ${response.status}`);
+        return null;
+      }
+      const metadata = await response.json();
+      console.log(`[iframe][Auth] Fetched metadata for project: ${metadata.name}`);
+      return metadata;
+    } catch (error) {
+      console.error("[iframe][Auth] Error fetching project metadata:", error);
+      return null;
+    }
+  }
   /**
    * Check if user has authorized a project
    */
@@ -2990,8 +3009,9 @@ var AuthorizationManager = class {
    */
   async requestAuthorization(project, origin) {
     this.showIframe();
+    const metadata = await this.fetchProjectMetadata(project.id);
     return new Promise((resolve) => {
-      const modal = this.createAuthorizationModal(project, origin);
+      const modal = this.createAuthorizationModal(project, origin, metadata);
       const authorizeBtn = modal.querySelector(".authorize-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const cleanup = (result) => {
@@ -3039,52 +3059,91 @@ var AuthorizationManager = class {
   /**
    * Create authorization consent modal
    */
-  createAuthorizationModal(project, origin) {
+  createAuthorizationModal(project, origin, metadata) {
     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;
     modal.innerHTML = `
       <div class="modal-overlay">
         <div class="modal-content">
-          <div class="app-identity">
-            ${project.logoUrl ? `<img src="${project.logoUrl}" alt="${project.name}" class="app-logo" />` : ""}
-            <h2>${project.name}</h2>
-            <div class="app-origin ${isVerifiedOrigin ? "verified" : "unverified"}">
-              ${isVerifiedOrigin ? "\u2713" : "\u26A0\uFE0F"} ${origin}
+          <!-- Header with logos -->
+          <div class="auth-header">
+            <div class="logo-container">
+              ${displayLogo ? `<img src="${displayLogo}" alt="${displayName}" class="app-logo" />` : '<div class="app-logo-placeholder"></div>'}
+              <div class="logo-connector">
+                <svg width="24" height="16" viewBox="0 0 24 16" fill="currentColor">
+                  <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" />
             </div>
           </div>
 
-          <div class="consent-message">
-            <p><strong>${project.name}</strong> wants to use your Lumia wallet.</p>
+          <!-- Authorization title -->
+          <h2 class="auth-title">Authorize ${displayName}</h2>
+
+          <!-- Description section -->
+          <div class="auth-description">
+            ${displayDescription ? `<p class="project-description">${displayDescription}</p>` : ""}
+            <div class="domain-info ${isVerifiedOrigin ? "verified" : "unverified"}">
+              <span class="domain-label">
+                ${isVerifiedOrigin ? "\u2713 Verified domain:" : "\u26A0\uFE0F Unverified domain:"}
+              </span>
+              <span class="domain-value">${origin}</span>
+            </div>
           </div>
 
-          <div class="permissions-list">
-            <h3>This application will be able to:</h3>
-            <ul>
-              <li>\u2713 View your wallet address</li>
-              <li>\u2713 Request transaction signatures</li>
-              <li>\u2713 View your public transaction history</li>
-            </ul>
+          <!-- Permissions box -->
+          <div class="permissions-box">
+            <div class="permissions-header">
+              <strong>${displayName}</strong> by <span class="project-owner">${displayName}</span> wants to access your <strong>Lumia Passport</strong> account
+            </div>
+
+            <div class="permissions-list">
+              <div class="permission-group">
+                <div class="permission-group-title">Personal user data</div>
+                <ul>
+                  <li>Wallet address (read-only)</li>
+                  <li>Public transaction history (read-only)</li>
+                </ul>
+              </div>
+
+              <div class="permission-group">
+                <div class="permission-group-title">Permissions</div>
+                <ul>
+                  <li>Request transaction signatures</li>
+                  <li>Initiate blockchain operations</li>
+                </ul>
+              </div>
+            </div>
           </div>
 
           ${!isVerifiedOrigin ? `
             <div class="security-warning">
-              <p>\u26A0\uFE0F <strong>Warning:</strong> This domain is not verified for ${project.name}</p>
-              <p>Expected: ${project.domains.join(", ")}</p>
-              <p>Actual: ${origin}</p>
+              <strong>\u26A0\uFE0F Warning:</strong> This domain is not verified for ${displayName}
+              <div class="warning-details">
+                <div>Expected: ${project.domains.join(", ")}</div>
+                <div>Actual: ${origin}</div>
+              </div>
             </div>
           ` : ""}
 
-          <div class="security-notice">
-            <p>\u26A0\uFE0F Only authorize applications you trust. You can revoke access at any time in settings.</p>
-          </div>
-
+          <!-- Action buttons -->
           <div class="actions">
             <button class="cancel-btn">Cancel</button>
             <button class="authorize-btn" ${!isVerifiedOrigin ? "disabled" : ""}>
-              Authorize
+              Authorize ${displayName}
             </button>
           </div>
+
+          <!-- Footer notice -->
+          <div class="auth-footer">
+            <p>Authorizing will redirect to <strong>${origin}</strong></p>
+            <p class="footer-note">You can revoke access at any time in your Lumia Passport settings.</p>
+          </div>
         </div>
       </div>
     `;
@@ -3600,12 +3659,13 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.4.16";
+var IFRAME_VERSION = "1.5.0";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
     console.log(`  Lumia Passport Secure Wallet - iframe version ${IFRAME_VERSION}`);
     console.log("=".repeat(60));
+    this.applyThemeColors();
     this.messenger = new SecureMessenger();
     this.sessionManager = new SessionManager();
     this.dkgManager = new DKGManager();
@@ -3615,6 +3675,34 @@ var IframeWallet = class {
     this.trustedApps = new TrustedAppsManager();
     this.backupManager = new BackupManager();
   }
+  applyThemeColors() {
+    try {
+      const params = new URLSearchParams(window.location.search);
+      const bg = params.get("bg");
+      const text = params.get("text");
+      const textSec = params.get("textSec");
+      const border = params.get("border");
+      if (bg || text || textSec || border) {
+        const root = document.documentElement;
+        if (bg) {
+          root.style.setProperty("--iframe-bg", bg);
+          root.style.setProperty("--iframe-modal-bg", bg);
+        }
+        if (text) {
+          root.style.setProperty("--iframe-text", text);
+        }
+        if (textSec) {
+          root.style.setProperty("--iframe-text-secondary", textSec);
+        }
+        if (border) {
+          root.style.setProperty("--iframe-border", border);
+        }
+        console.log("[IframeWallet] Applied theme colors:", { bg, text, textSec, border });
+      }
+    } catch (error) {
+      console.warn("[IframeWallet] Failed to apply theme colors:", error);
+    }
+  }
   async initialize() {
     if (window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1" && !window.location.hostname.includes("lumiapassport.com")) {
       console.warn("[iframe] \u26A0\uFE0F Running on unexpected origin!");