@lumiapassport/ui-kit 1.13.6 → 1.13.7

package/dist/iframe/main.js

@@ -1218,6 +1218,135 @@ var init_keccak256 = __esm({
   }
 });
 
+// src/iframe/templates/template-engine.ts
+var TemplateEngine = class {
+  /**
+   * Render template with data
+   */
+  static render(template, data) {
+    let html = template;
+    html = this.processConditionals(html, data);
+    html = this.processVariables(html, data);
+    return html;
+  }
+  /**
+   * Process conditional blocks: {{#if condition}}...{{else}}...{{/if}}
+   */
+  static processConditionals(html, data) {
+    const conditionalRegex = /\{\{#if\s+(\w+)\}\}([\s\S]*?)(?:\{\{else\}\}([\s\S]*?))?\{\{\/if\}\}/g;
+    return html.replace(conditionalRegex, (match, variable, trueBlock, falseBlock) => {
+      const value = data[variable];
+      const condition = this.isTruthy(value);
+      if (condition) {
+        return trueBlock || "";
+      } else {
+        return falseBlock || "";
+      }
+    });
+  }
+  /**
+   * Process variable interpolation: {{variable}}
+   */
+  static processVariables(html, data) {
+    const variableRegex = /\{\{(?!#|\/|else)(\w+)\}\}/g;
+    return html.replace(variableRegex, (match, variable) => {
+      const value = data[variable];
+      return value !== null && value !== void 0 ? String(value) : "";
+    });
+  }
+  /**
+   * Check if value is truthy (for conditionals)
+   */
+  static isTruthy(value) {
+    if (value === null || value === void 0) return false;
+    if (typeof value === "boolean") return value;
+    if (typeof value === "number") return value !== 0;
+    if (typeof value === "string") return value.length > 0;
+    return true;
+  }
+};
+
+// src/iframe/templates/html/authorization.html
+var authorization_default = '<div class="modal-overlay">\n  <div class="modal-content" style="display: flex; flex-direction: column; gap: var(--iframe-gap); align-items: center">\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <img\n        src="./lumia-logo.svg"\n        alt="Lumia Passport"\n        style="width: 40px; height: 40px; border-radius: 20px; object-fit: cover"\n      />\n\n      <span\n        style="display: block; font-size: var(--iframe-h1-fz); font-weight: var(--iframe-heading-fw); line-height: 150%"\n        >Authorize</span\n      >\n    </div>\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      {{#if displayLogo}}\n      <img\n        src="{{displayLogo}}"\n        alt="{{displayName}}"\n        style="width: 32px; height: 32px; border-radius: 16px; object-fit: cover"\n      />\n      {{else}}\n      <span style="font-size: 14px; font-weight: 600">{{displayName}}</span>\n      {{/if}}\n\n      <span\n        style="display: block; font-size: var(--iframe-h2-fz); font-weight: var(--iframe-heading-fw); line-height: 150%"\n        >{{displayName}}</span\n      >\n    </div>\n\n    <div class="domain-info {{domainStatusClass}}" style="font-size: 12px; text-align: center">\n      <span style="font-family: monospace">{{domainStatusIcon}} {{domainStatusText}} {{origin}}</span>\n    </div>\n\n    <!-- Permissions box -->\n    <details style="display: flex; flex-direction: column; width: 100%">\n      <summary\n        style="\n          cursor: pointer;\n          text-align: center;\n          list-style: none;\n          padding: 0 var(--iframe-pd);\n          user-select: none;\n          font-size: 12px;\n          line-height: 20px;\n        "\n      >\n        Show Permissions\n      </summary>\n      <div\n        data-details-content="true"\n        style="\n          width: 100%;\n          padding: var(--iframe-gap);\n          border-radius: var(--iframe-el-bdrs);\n          background: var(--iframe-info);\n          font-size: 10px;\n        "\n      >\n        <div style="margin-bottom: var(--iframe-gap)">\n          <strong>{{displayName}}</strong> by <span class="project-owner">{{displayName}}</span> wants to access your\n          <strong>Lumia Passport</strong> account\n        </div>\n\n        <div style="margin-bottom: var(--iframe-gap)">\n          <strong style="margin-bottom: var(--iframe-gap)">Personal user data</strong>\n          <ul style="list-style: none">\n            <li style="padding-left: var(--iframe-pd)">Wallet address (read-only)</li>\n            <li style="padding-left: var(--iframe-pd)">Public transaction history (read-only)</li>\n          </ul>\n        </div>\n\n        <div style="width: 100%">\n          <strong style="margin-bottom: var(--iframe-gap)">Permissions</strong>\n          <ul style="list-style: none">\n            <li style="padding-left: var(--iframe-pd)">Request transaction signatures</li>\n            <li style="padding-left: var(--iframe-pd)">Initiate blockchain operations</li>\n          </ul>\n        </div>\n      </div>\n    </details>\n\n    {{#if showSecurityWarning}}\n    <div class="security-warning">\n      <strong>\u26A0\uFE0F Warning:</strong> This domain is not verified for {{displayName}}\n      <div>Expected: {{expectedDomains}}</div>\n      <div>Actual: {{origin}}</div>\n    </div>\n    {{else}}\n    <span style="font-size: 10px; color: var(--iframe-text-secondary)"\n      >By continuing you allow the app to use these permissions.</span\n    >\n    {{/if}}\n\n    <!-- Action buttons -->\n    <div style="display: flex; gap: var(--iframe-gap); width: 100%; align-items: center">\n      <button class="cancel-btn">Cancel</button>\n      <button class="authorize-btn" {{authorizeButtonState}}>Continue</button>\n    </div>\n\n    <!-- Footer notice -->\n    <div\n      style="\n        color: var(--iframe-text-secondary);\n        font-size: 10px;\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        align-items: center;\n        text-align: center;\n      "\n    >\n      <span>Authorizing will redirect to <strong>{{origin}}</strong></span>\n      <span>You can revoke access at any time in your Lumia Passport settings.</span>\n    </div>\n  </div>\n</div>\n';
+
+// src/iframe/templates/html/ready-indicator.html
+var ready_indicator_default = '<div class="ready-indicator">\n  <div class="status-icon">\u2713</div>\n  <h2>Secure Wallet Ready</h2>\n  <p>Lumia Passport is ready for secure operations</p>\n  <div class="info">\n    <div class="info-row">\n      <strong>Origin:</strong>\n      <span>{{origin}}</span>\n    </div>\n    <div class="info-row">\n      <strong>Status:</strong>\n      <span class="status-active">Active</span>\n    </div>\n    <div class="info-row">\n      <strong>Version:</strong>\n      <span>{{iframeVersion}}</span>\n    </div>\n    <div class="info-row">\n      <strong>Documentation:</strong>\n      <a\n        href="https://docs.lumiapassport.com/"\n        target="_blank"\n        rel="noopener noreferrer"\n        style="color: #667eea; text-decoration: none"\n        >docs.lumiapassport.com</a\n      >\n    </div>\n  </div>\n</div>\n';
+
+// src/iframe/templates/template-loader.ts
+var TemplateLoader = class {
+  /** Get template by name */
+  static getTemplate(name) {
+    if (this.templateCache.has(name)) {
+      return this.templateCache.get(name);
+    }
+    const template = this.loadBundledTemplate(name);
+    if (!template) {
+      throw new Error(`Template not found: ${name}`);
+    }
+    this.templateCache.set(name, template);
+    return template;
+  }
+  /** Load bundled template */
+  static loadBundledTemplate(name) {
+    switch (name) {
+      case "authorization":
+        return authorization_default;
+      case "ready-indicator":
+        return ready_indicator_default;
+      default:
+        return null;
+    }
+  }
+  // /** Pre-load all templates (optional optimization) */
+  // static preloadTemplates(): void {
+  //   this.getTemplate('authorization')
+  //   console.log('[TemplateLoader] Pre-loaded all templates')
+  // }
+  // /** Clear template cache (useful for hot-reloading in development) */
+  // static clearCache(): void {
+  //   this.templateCache.clear()
+  //   console.log('[TemplateLoader] Cleared template cache')
+  // }
+};
+TemplateLoader.templateCache = /* @__PURE__ */ new Map();
+
+// src/iframe/templates/data/authorization-template-data.ts
+function buildAuthorizationTemplateData(project, origin, metadata, userProfile) {
+  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";
+  return {
+    // Display
+    displayName,
+    displayLogo,
+    displayDescription,
+    // User
+    userAvatar,
+    userName,
+    // Domain
+    origin,
+    domainStatusClass: isVerifiedOrigin ? "verified" : "unverified",
+    domainStatusIcon: isVerifiedOrigin ? "\u2713" : "\u26A0\uFE0F",
+    domainStatusText: isVerifiedOrigin ? "Verified domain:" : "Unverified domain:",
+    // Security
+    showSecurityWarning: !isVerifiedOrigin,
+    expectedDomains: project.domains.join(", "),
+    // Button
+    authorizeButtonState: !isVerifiedOrigin ? "disabled" : ""
+  };
+}
+
+// src/iframe/templates/data/ready-indicator-data.ts
+function buildReadyIndicatorData(input) {
+  return {
+    origin: input.origin,
+    iframeVersion: input.iframeVersion
+  };
+}
+
 // src/iframe/lib/authorization-manager.ts
 var AuthorizationManager = class {
   constructor() {
@@ -1376,93 +1505,10 @@ var AuthorizationManager = class {
   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">
-          <!-- 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>
-              ${userAvatar ? `<img src="${userAvatar}" alt="${userName}" class="lumia-logo user-avatar" />` : '<img src="./lumia-logo.svg" alt="Lumia Passport" class="lumia-logo" />'}
-            </div>
-          </div>
-
-          <!-- 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>
-
-          <!-- 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">
-              <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>
-          ` : ""}
-
-          <!-- Action buttons -->
-          <div class="actions">
-            <button class="cancel-btn">Cancel</button>
-            <button class="authorize-btn" ${!isVerifiedOrigin ? "disabled" : ""}>
-              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>
-    `;
+    const templateData = buildAuthorizationTemplateData(project, origin, metadata, userProfile);
+    const template = TemplateLoader.getTemplate("authorization");
+    const populatedHTML = TemplateEngine.render(template, templateData);
+    modal.innerHTML = populatedHTML;
     return modal;
   }
   /**
@@ -3964,7 +4010,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.13.6";
+var IFRAME_VERSION = "1.13.7";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -4588,31 +4634,13 @@ var IframeWallet = class {
   displayReadyIndicator() {
     const app = document.getElementById("app");
     if (!app) return;
-    app.innerHTML = `
-      <div class="ready-indicator">
-        <div class="status-icon">\u{1F512}</div>
-        <h2>Secure Wallet Ready</h2>
-        <p>Lumia Passport is ready for secure operations</p>
-        <div class="info">
-          <div class="info-row">
-            <strong>Origin:</strong>
-            <span>${window.location.origin}</span>
-          </div>
-          <div class="info-row">
-            <strong>Status:</strong>
-            <span class="status-active">Active</span>
-          </div>
-          <div class="info-row">
-            <strong>Version:</strong>
-            <span>${IFRAME_VERSION}</span>
-          </div>
-          <div class="info-row">
-            <strong>Documentation:</strong>
-            <a href="https://docs.lumiapassport.com/" target="_blank" rel="noopener noreferrer" style="color: #667eea; text-decoration: none;">docs.lumiapassport.com</a>
-          </div>
-        </div>
-      </div>
-    `;
+    const templateData = buildReadyIndicatorData({
+      origin: window.location.origin,
+      iframeVersion: IFRAME_VERSION
+    });
+    const template = TemplateLoader.getTemplate("ready-indicator");
+    const populatedReadyIndicatorHTML = TemplateEngine.render(template, templateData);
+    app.innerHTML = populatedReadyIndicatorHTML;
   }
   /**
    * Send wallet ready status to parent