@lumiapassport/ui-kit 1.14.8 → 1.14.10

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.14.8</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.14.10</title>
 
     <!-- Styles will be injected by build process -->
     <style>
@@ -608,39 +608,46 @@
       }
 
       /* Trust app checkbox section */
+      /* OK */
       .trust-app-section {
-        margin: 1.5rem 2rem;
-        padding: 0.75rem;
-        background: #f9fafb;
-        border-radius: 6px;
-        border: 1px solid #e5e7eb;
+        width: 100%;
+        padding: var(--iframe-gap);
+        background: var(--iframe-info);
+        border-radius: var(--iframe-el-bdrs);
+        border: 1px solid var(--iframe-bd);
+        transition: opacity 0.2s ease;
+      }
+      .trust-app-section:hover {
+        opacity: 0.6;
+      }
+      .trust-app-section:active {
+        opacity: 0.4;
       }
 
+      /* OK */
       .trust-app-label {
         display: flex;
-        align-items: center;
-        gap: 0.5rem;
+        align-items: flex-start;
+        gap: var(--iframe-gap);
         cursor: pointer;
         font-size: 0.9rem;
-        color: #374151;
       }
 
+      /* OK */
       .trust-app-checkbox {
-        width: 18px;
-        height: 18px;
+        width: 24px;
+        height: 24px;
         cursor: pointer;
         flex-shrink: 0;
       }
 
       .trust-app-label span {
-        line-height: 1.4;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 1.2;
         user-select: none;
       }
 
-      .trust-app-label:hover {
-        color: #111827;
-      }
-
       /* EIP712 Signature Request Modal Styles */
       .eip712-confirmation-modal {
         position: fixed;

package/dist/iframe/main.js

@@ -1269,9 +1269,15 @@ var TemplateEngine = class {
 // src/iframe/templates/html/authorization.html
 var authorization_default = '<div\n  style="\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n    background: #000000;\n  "\n>\n  <div\n    style="\n      display: flex;\n      flex-direction: column;\n      gap: var(--iframe-gap);\n      align-items: center;\n      background: var(--iframe-modal-bg);\n      border-radius: 20px;\n      padding: 20px;\n      max-width: 320px;\n      width: calc(100% - 40px);\n      max-height: 90vh;\n      overflow-y: auto;\n    "\n  >\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      {{#if userAvatar}}\n      <img\n        src="{{userAvatar}}"\n        alt="{{userName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >U</span\n      >\n      {{/if}}\n\n      <!-- ------------------------------------------------------------ -->\n      <svg\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n        stroke="var(--iframe-text-secondary)"\n        stroke-width="2"\n        stroke-linecap="round"\n        stroke-linejoin="round"\n      >\n        <path d="M5 12h14" />\n        <path d="m12 5 7 7-7 7" />\n      </svg>\n      <!-- ------------------------------------------------------------ -->\n\n      {{#if displayLogo}}\n      <img\n        src="{{displayLogo}}"\n        alt="{{displayName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >A</span\n      >\n      {{/if}}\n    </div>\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <span\n        style="\n          width: fit-content;\n          font-size: var(--iframe-h2-fz);\n          font-weight: var(--iframe-heading-fw);\n          line-height: 150%;\n          text-align: center;\n        "\n        >{{displayName}}</span\n      >\n    </div>\n\n    <div class="domain-info {{domainStatusClass}}">\n      <span style="display: block; width: 100%; font-size: 12px; text-align: center; font-family: monospace"\n        >{{domainStatusIcon}} {{origin}}</span\n      >\n    </div>\n\n    <!-- Permissions box -->\n    <div\n      id="data-auth-permissions-block"\n      aria-expanded="false"\n      style="display: flex; flex-direction: column; width: 100%"\n    >\n      <div\n        id="data-auth-permissions-toggler"\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 \u25BC\n      </div>\n\n      <div\n        id="data-auth-permissions-content"\n        style="width: 100%; height: var(--iframe-permissions-h, 0); overflow: hidden; transition: height 300ms ease"\n      >\n        <div\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      </div>\n    </div>\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="display: block; text-align: center; font-size: 10px; color: var(--iframe-text-secondary)"\n      >By continuing you allow the app to use these permissions, you can revoke access at any time.</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  </div>\n</div>\n';
 
+// src/iframe/templates/html/confirm-tx.html
+var confirm_tx_default = '<div\n  style="\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n    background: #000000;\n  "\n>\n  <div\n    style="\n      display: flex;\n      flex-direction: column;\n      gap: var(--iframe-gap);\n      align-items: center;\n      background: var(--iframe-modal-bg);\n      border-radius: 20px;\n      padding: 20px;\n      max-width: 320px;\n      width: calc(100% - 40px);\n      max-height: 90vh;\n      overflow-y: auto;\n    "\n  >\n    <!-- Header with logos -->\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: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >A</span\n      >\n      {{/if}}\n\n      <!-- ------------------------------------------------------------ -->\n      <svg\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n        stroke="var(--iframe-text-secondary)"\n        stroke-width="2"\n        stroke-linecap="round"\n        stroke-linejoin="round"\n      >\n        <path d="M5 12h14" />\n        <path d="m12 5 7 7-7 7" />\n      </svg>\n      <!-- ------------------------------------------------------------ -->\n\n      {{#if userAvatar}}\n      <img\n        src="{{userAvatar}}"\n        alt="{{userName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >U</span\n      >\n      {{/if}}\n    </div>\n\n    <!-- Transaction title -->\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <span\n        style="\n          width: fit-content;\n          font-size: var(--iframe-h1-fz);\n          font-weight: var(--iframe-heading-fw);\n          line-height: 150%;\n          text-align: center;\n        "\n        >Confirm Transaction</span\n      >\n    </div>\n\n    <!-- Application info -->\n    <div class="domain-info {{domainStatusClass}}">\n      <span style="display: block; width: 100%; font-size: 12px; text-align: center; font-family: monospace"\n        >{{domainStatusText}} {{origin}}</span\n      >\n    </div>\n\n    <!-- Transaction details box -->\n    <div\n      id="confirm-transaction-details-block"\n      aria-expanded="false"\n      style="display: flex; flex-direction: column; width: 100%"\n    >\n      <div\n        id="confirm-transaction-details-toggler"\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 Transaction Details \u25BC\n      </div>\n\n      <div\n        id="confirm-transaction-details-content"\n        style="\n          display: flex;\n          flex-direction: column;\n          gap: var(--iframe-gap);\n          width: 100%;\n          max-height: var(--confirm-transaction-details-h, 0px);\n          overflow: hidden;\n          transition: max-height 300ms ease;\n        "\n      >\n        <div\n          style="\n            display: flex;\n            flex-direction: column;\n            gap: var(--iframe-gap);\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          {{#if fromAddress}}\n          <div style="display: flex; justify-content: space-between">\n            <strong style="color: var(--iframe-text-secondary); display: block">From:</strong>\n            <code style="word-break: break-all; display: block">{{fromAddress}}</code>\n          </div>\n          {{/if}}\n\n          <!-- ------------------------------------------------------------ -->\n\n          {{#if toAddress}}\n          <div style="display: flex; justify-content: space-between">\n            <strong style="color: var(--iframe-text-secondary); display: block">To:</strong>\n            <code style="word-break: break-all; display: block">{{toAddress}}</code>\n          </div>\n          {{/if}}\n\n          <!-- ------------------------------------------------------------ -->\n\n          {{#if hasValue}}\n          <div style="display: flex; justify-content: space-between">\n            <strong style="color: var(--iframe-text-secondary); display: block">Amount:</strong>\n            <code style="word-break: break-all; display: block">{{formattedValue}} LUMIA</code>\n          </div>\n          {{/if}}\n\n          <!-- ------------------------------------------------------------ -->\n\n          {{#if showContractInteraction}}\n          <div style="display: flex; justify-content: space-between">\n            <strong style="color: var(--iframe-text-secondary); display: block">Action:</strong>\n            <code style="word-break: break-all; display: block">Contract Interaction</code>\n          </div>\n          {{/if}}\n\n          <!-- ------------------------------------------------------------ -->\n\n          <div style="display: flex; justify-content: space-between">\n            <strong style="color: var(--iframe-text-secondary); display: block">Estimated Cost:</strong>\n            <code style="word-break: break-all; display: block; color: #10b981">{{estimatedCost}}</code>\n          </div>\n\n          <!-- ------------------------------------------------------------ -->\n\n          {{#if isSponsored}}\n          <div\n            style="\n              display: flex;\n              justify-content: space-between;\n              background: var(--iframe-success);\n              border-radius: var(--iframe-el-bdrs);\n              padding: var(--iframe-gap);\n            "\n          >\n            <span>Gas fees will be paid by the application (no cost to you)</span>\n          </div>\n          {{/if}}\n        </div>\n      </div>\n    </div>\n\n    <!-- ------------------------------------------------------------ -->\n\n    {{#if showHighRisk}}\n    <div class="security-warning">\n      <strong>\u26A0\uFE0F {{riskLevel}} RISK</strong>\n      {{riskReasons}}\n    </div>\n    {{else}}\n    <div class="security-warning">Please verify this transaction carefully before confirming.</div>\n    {{/if}}\n\n    <!-- ------------------------------------------------------------ -->\n\n    <div class="trust-app-section">\n      <label class="trust-app-label">\n        <input type="checkbox" class="trust-app-checkbox" />\n        <span>Add this application to trusted list and skip confirmation for future transactions</span>\n      </label>\n    </div>\n\n    <!-- Action buttons -->\n    <div style="display: flex; gap: var(--iframe-gap); width: 100%; align-items: center">\n      <button class="cancel-btn">Reject</button>\n      <button class="confirm-btn">Confirm</button>\n    </div>\n\n    <!-- Footer notice -->\n    <span\n      style="\n        display: block;\n        padding: var(--iframe-gap);\n        text-align: center;\n        font-size: 10px;\n        color: var(--iframe-text-secondary);\n      "\n    >\n      You can manage trusted applications in your Lumia Passport settings.\n    </span>\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/html/sign-eip712-tx.html
+var sign_eip712_tx_default = '<div\n  style="\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 10000;\n    background: #000000;\n  "\n>\n  <div\n    style="\n      display: flex;\n      flex-direction: column;\n      gap: var(--iframe-gap);\n      align-items: center;\n      background: var(--iframe-modal-bg);\n      border-radius: 20px;\n      padding: 20px;\n      max-width: 320px;\n      width: calc(100% - 40px);\n      max-height: 90vh;\n      overflow-y: auto;\n    "\n  >\n    <!-- Header -->\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      {{#if metadataLogo}}\n      <img\n        src="{{metadataLogo}}"\n        alt="{{metadataName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >\u{1F510}</span\n      >\n      {{/if}}\n\n      <!-- ------------------------------------------------------------ -->\n      <svg\n        xmlns="http://www.w3.org/2000/svg"\n        width="24"\n        height="24"\n        viewBox="0 0 24 24"\n        fill="none"\n        stroke="var(--iframe-text-secondary)"\n        stroke-width="2"\n        stroke-linecap="round"\n        stroke-linejoin="round"\n      >\n        <path d="M5 12h14" />\n        <path d="m12 5 7 7-7 7" />\n      </svg>\n      <!-- ------------------------------------------------------------ -->\n\n      {{#if userAvatar}}\n      <img\n        src="{{userAvatar}}"\n        alt="{{userName}}"\n        style="width: 48px; height: 48px; border-radius: 24px; object-fit: cover"\n      />\n      {{else}}\n      <span\n        style="\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          width: 48px;\n          height: 48px;\n          border-radius: 24px;\n          background-color: var(--iframe-button-bg);\n          color: var(--iframe-button-text);\n          font-size: 14px;\n          font-weight: 600;\n        "\n        >U</span\n      >\n      {{/if}}\n    </div>\n\n    <div style="display: flex; align-items: center; gap: var(--iframe-gap); justify-content: center">\n      <span\n        style="\n          width: fit-content;\n          font-size: var(--iframe-h2-fz);\n          font-weight: var(--iframe-heading-fw);\n          line-height: 150%;\n          text-align: center;\n        "\n        >Signature Request</span\n      >\n    </div>\n\n    <div class="domain-info verified">\n      <span style="display: block; width: 100%; font-size: 12px; text-align: center; font-family: monospace">\n        {{#if isVerifiedOrigin}}\n        <span>\u2713</span>\n        {{/if}} {{origin}}</span\n      >\n    </div>\n\n    <!-- EIP712 Message Content -->\n    <div class="eip712-content">\n      <details class="eip712-details">\n        <summary>Advanced details</summary>\n\n        <div class="section-title">\u{1F4DD} Message</div>\n        <div class="eip712-section">\n          <div class="section-subtitle">{{primaryType}}</div>\n          {{messageFields}}\n        </div>\n\n        <div class="section-title" style="margin-top: 16px">\u{1F50D} Domain</div>\n        <div class="eip712-section">{{domainFields}}</div>\n\n        <div class="section-title" style="margin-top: 16px">\u{1F4CB} Full Message</div>\n        <pre class="eip712-raw"><code>{{fullMessageJson}}</code></pre>\n      </details>\n    </div>\n\n    <!-- Trust App Option -->\n    <div class="trust-app-section">\n      <label class="trust-app-label">\n        <input type="checkbox" class="trust-app-checkbox" />\n        <span>Trust this application and skip confirmation for future signatures</span>\n      </label>\n    </div>\n\n    <!-- Action Buttons -->\n    <div class="actions">\n      <button class="cancel-btn">Reject</button>\n      <button class="confirm-btn">Sign</button>\n    </div>\n\n    <!-- Footer Notice -->\n    <div class="footer-notice">\n      <p class="footer-note">Only sign messages from applications you trust.</p>\n    </div>\n  </div>\n</div>\n';
+
 // src/iframe/templates/template-loader.ts
 var TemplateLoader = class {
   /** Get template by name */
@@ -1293,6 +1299,10 @@ var TemplateLoader = class {
         return authorization_default;
       case "ready-indicator":
         return ready_indicator_default;
+      case "sign-eip712-tx":
+        return sign_eip712_tx_default;
+      case "confirm-tx":
+        return confirm_tx_default;
       default:
         return null;
     }
@@ -1347,6 +1357,115 @@ function buildReadyIndicatorData(input) {
   };
 }
 
+// src/iframe/templates/data/sign-tx-template-data.ts
+function buildSignTxTemplateData(project, origin, typedData, metadata, userProfile) {
+  const isVerifiedOrigin = project.domains.includes(origin);
+  const metadataName = metadata?.name || project.name;
+  const metadataLogo = metadata?.logo || project.logoUrl || "";
+  const userAvatar = userProfile?.avatar || "";
+  const userName = userProfile?.displayName || "Lumia Passport";
+  const formatFieldValue = (value) => {
+    if (Array.isArray(value)) {
+      return `[${value.map((v) => formatFieldValue(v)).join(", ")}]`;
+    }
+    if (typeof value === "bigint") {
+      return value.toString();
+    }
+    if (typeof value === "object" && value !== null) {
+      return JSON.stringify(value, null, 2);
+    }
+    return String(value);
+  };
+  const messageFields = Object.entries(typedData.message).map(
+    ([key, value]) => `
+        <div class="eip712-field">
+          <div class="field-name">${key}:</div>
+          <div class="field-value">${formatFieldValue(value)}</div>
+        </div>
+      `
+  ).join("");
+  const domainFields = Object.entries(typedData.domain).filter(([_, value]) => value !== void 0).map(
+    ([key, value]) => `
+        <div class="eip712-field">
+          <div class="field-name">${key}:</div>
+          <div class="field-value">${formatFieldValue(value)}</div>
+        </div>
+      `
+  ).join("");
+  return {
+    metadataLogo,
+    metadataName,
+    userAvatar,
+    userName,
+    origin,
+    isVerifiedOrigin,
+    primaryType: typedData.primaryType,
+    messageFields,
+    domainFields,
+    fullMessageJson: JSON.stringify(typedData.message, null, 2)
+  };
+}
+
+// src/iframe/templates/data/confirm-tx-template-data.ts
+function formatAddress(address) {
+  if (address.length < 10) return address;
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function buildConfirmTxTemplateData(project, origin, transaction, risk, metadata, userProfile) {
+  const isVerifiedOrigin = project.domains.includes(origin);
+  const isUserOp = !!transaction.userOpDetails;
+  const displayName = metadata?.name || project.name;
+  const displayLogo = metadata?.logo || project.logoUrl || "";
+  const userAvatar = userProfile?.avatar || "";
+  const userName = userProfile?.displayName || "Lumia Passport";
+  const domainStatusClass = isVerifiedOrigin ? "verified" : "unverified";
+  const domainStatusText = isVerifiedOrigin ? "\u2705" : "\u26A0\uFE0F";
+  const fromAddress = formatAddress(transaction.userOpDetails?.sender || "");
+  const toAddress = formatAddress(transaction.userOpDetails?.callTarget || transaction.to || "");
+  const formatValue = (valueWei) => {
+    try {
+      const value = BigInt(valueWei);
+      if (value === 0n) return "0";
+      const tokens = Number(value) / 1e18;
+      if (tokens >= 1) {
+        return tokens.toFixed(4).replace(/\.?0+$/, "");
+      } else {
+        return tokens.toFixed(8).replace(/\.?0+$/, "");
+      }
+    } catch {
+      return "0";
+    }
+  };
+  const transactionValue = transaction.value || "0";
+  const formattedValue = formatValue(transactionValue);
+  const hasValue = BigInt(transactionValue) > 0n;
+  const showContractInteraction = isUserOp && !!transaction.userOpDetails?.callData && transaction.userOpDetails.callData !== "0x";
+  const isSponsored = isUserOp && !!transaction.userOpDetails?.paymaster;
+  const estimatedCost = isSponsored ? "0 (Sponsored)" : "Free (Sponsored Transaction)";
+  const showHighRisk = risk.level !== "LOW";
+  const riskLevel = risk.level;
+  const riskReasons = risk.reasons.map((r) => `<div>\u2022 ${r}</div>`).join("");
+  return {
+    displayName,
+    displayLogo,
+    userAvatar,
+    userName,
+    origin,
+    domainStatusClass,
+    domainStatusText,
+    fromAddress,
+    toAddress,
+    hasValue,
+    formattedValue,
+    showContractInteraction,
+    estimatedCost,
+    isSponsored,
+    showHighRisk,
+    riskLevel,
+    riskReasons
+  };
+}
+
 // src/iframe/lib/authorization-manager.ts
 var AuthorizationManager = class {
   constructor() {
@@ -1504,7 +1623,6 @@ var AuthorizationManager = class {
    */
   createAuthorizationModal(project, origin, metadata, userProfile) {
     const modal = document.createElement("div");
-    modal.className = "authorization-modal";
     const templateData = buildAuthorizationTemplateData(project, origin, metadata, userProfile);
     const template = TemplateLoader.getTemplate("authorization");
     const populatedHTML = TemplateEngine.render(template, templateData);
@@ -3547,8 +3665,8 @@ var TrustedAppsManager = class {
   /**
    * Add app to trusted list
    */
-  addTrustedApp(userId, projectId, origin) {
-    console.log("[TrustedApps] Adding trusted app:", { userId, projectId, origin });
+  addTrustedApp(userId, projectId, origin, appName, appLogo) {
+    console.log("[TrustedApps] Adding trusted app:", { userId, projectId, origin, appName });
     const trustedApps = this.getTrustedApps();
     const exists = trustedApps.some(
       (app) => app.userId === userId && app.projectId === projectId && app.origin === origin
@@ -3561,7 +3679,9 @@ var TrustedAppsManager = class {
       userId,
       projectId,
       origin,
-      trustedAt: Date.now()
+      trustedAt: Date.now(),
+      appName,
+      appLogo
     });
     this.saveTrustedApps(trustedApps);
     console.log("[TrustedApps] \u2705 App added to trusted list");
@@ -3749,7 +3869,7 @@ var SigningManager = class extends TokenRefreshApiClient {
         throw new Error("User rejected transaction");
       }
       if (confirmResult.trustApp) {
-        this.trustedApps.addTrustedApp(userId, projectId, origin);
+        this.trustedApps.addTrustedApp(userId, projectId, origin, confirmResult.appName, confirmResult.appLogo);
       }
     } else if (isMinimalOperation) {
       console.log("[iframe][Sign] Auto-approving minimal safe operation (account deployment)");
@@ -3869,7 +3989,7 @@ var SigningManager = class extends TokenRefreshApiClient {
           const trustApp = trustCheckbox?.checked || false;
           modal.remove();
           this.hideIframe();
-          resolve({ confirmed: true, trustApp });
+          resolve({ confirmed: true, trustApp, appName: metadata?.name, appLogo: metadata?.logo });
         }
       });
       cancelBtn?.addEventListener("click", () => {
@@ -3886,135 +4006,9 @@ var SigningManager = class extends TokenRefreshApiClient {
   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;
-    const displayLogo = metadata?.logo || project.logoUrl;
-    const fromAddress = transaction.userOpDetails?.sender;
-    const toAddress = transaction.userOpDetails?.callTarget || transaction.to;
-    const formatValue = (valueWei) => {
-      try {
-        const value = BigInt(valueWei);
-        if (value === 0n) return "0";
-        const tokens = Number(value) / 1e18;
-        if (tokens >= 1) {
-          return tokens.toFixed(4).replace(/\.?0+$/, "");
-        } else {
-          return tokens.toFixed(8).replace(/\.?0+$/, "");
-        }
-      } catch {
-        return "0";
-      }
-    };
-    const transactionValue = transaction.value || "0";
-    const formattedValue = formatValue(transactionValue);
-    const hasValue = BigInt(transactionValue) > 0n;
-    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>
-
-          <!-- Transaction title -->
-          <h2 class="auth-title">Confirm Transaction</h2>
-
-          <!-- Application info -->
-          <div class="auth-description">
-            <div class="domain-info ${isVerifiedOrigin ? "verified" : "unverified"}">
-              <span class="domain-label">
-                ${isVerifiedOrigin ? "\u2713 Verified:" : "\u26A0\uFE0F Unverified:"}
-              </span>
-              <span class="domain-value">${origin}</span>
-            </div>
-          </div>
-
-          <!-- Transaction details box -->
-          <div class="permissions-box">
-            ${fromAddress ? `
-              <div class="detail-row" style="margin-bottom: 0.5rem;">
-                <div style="color: var(--iframe-text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;"><strong>From:</strong></div>
-                <code style="font-size: 0.75rem; word-break: break-all; display: block; color: var(--iframe-text);">${fromAddress}</code>
-              </div>
-            ` : ""}
-
-            ${toAddress ? `
-              <div class="detail-row" style="margin-bottom: 0.5rem;">
-                <div style="color: var(--iframe-text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;"><strong>To:</strong></div>
-                <code style="font-size: 0.75rem; word-break: break-all; display: block; color: var(--iframe-text);">${toAddress}</code>
-              </div>
-            ` : ""}
-
-            ${hasValue ? `
-              <div class="detail-row" style="margin-bottom: 0.5rem;">
-                <span style="color: var(--iframe-text-secondary);"><strong>Amount:</strong></span>
-                <strong style="color: var(--iframe-text); font-size: 1rem;">${formattedValue} LUMIA</strong>
-              </div>
-            ` : ""}
-
-            ${isUserOp && transaction.userOpDetails?.callData && transaction.userOpDetails.callData !== "0x" ? `
-              <div class="detail-row" style="margin-bottom: 0.5rem;">
-                <span style="color: var(--iframe-text-secondary);"><strong>Action:</strong></span>
-                <span style="color: var(--iframe-text);">Contract Interaction</span>
-              </div>
-            ` : ""}
-
-            <div class="detail-row" style="margin-bottom: 0.5rem;">
-              <span style="color: var(--iframe-text-secondary);"><strong>Estimated Cost:</strong></span>
-              <strong style="color: #10b981;">${estimatedCost}</strong>
-            </div>
-
-            ${isSponsored ? `
-              <div class="detail-row" style="background: #d1fae5; border-radius: 6px; padding: 0.75rem; margin-top: 0.5rem;">
-                <span style="color: #047857;">\u2713 Gas fees will be paid by the application (no cost to you)</span>
-              </div>
-            ` : ""}
-          </div>
-
-          ${risk.level !== "LOW" ? `
-            <div class="security-warning">
-              <strong>\u26A0\uFE0F ${risk.level} RISK</strong>
-              ${risk.reasons.map((r) => `<div>\u2022 ${r}</div>`).join("")}
-            </div>
-          ` : `
-            <div class="security-warning">
-              <strong>\u26A0\uFE0F Warning:</strong> Please verify this transaction carefully before confirming.
-            </div>
-          `}
-
-          <div class="trust-app-section">
-            <label class="trust-app-label">
-              <input type="checkbox" class="trust-app-checkbox" />
-              <span>Trust this application and skip confirmation for future transactions</span>
-            </label>
-          </div>
-
-          <!-- Action buttons -->
-          <div class="actions">
-            <button class="cancel-btn">Reject</button>
-            <button class="confirm-btn">Confirm</button>
-          </div>
-
-          <!-- Footer notice -->
-          <div class="auth-footer">
-            <p class="footer-note">You can manage trusted applications in your Lumia Passport settings.</p>
-          </div>
-        </div>
-      </div>
-    `;
+    const templateData = buildConfirmTxTemplateData(project, origin, transaction, risk, metadata, userProfile);
+    const template = TemplateLoader.getTemplate("confirm-tx");
+    modal.innerHTML = TemplateEngine.render(template, templateData);
     return modal;
   }
   /**
@@ -4123,7 +4117,7 @@ var SigningManager = class extends TokenRefreshApiClient {
         throw new Error("User rejected signature request");
       }
       if (confirmResult.trustApp) {
-        this.trustedApps.addTrustedApp(userId, projectId, origin);
+        this.trustedApps.addTrustedApp(userId, projectId, origin, confirmResult.appName, confirmResult.appLogo);
       }
     }
     const keyshareData = this.storage.loadKeyshare(userId);
@@ -4158,7 +4152,7 @@ var SigningManager = class extends TokenRefreshApiClient {
           const trustApp = trustCheckbox?.checked || false;
           modal.remove();
           this.hideIframe();
-          resolve({ confirmed: true, trustApp });
+          resolve({ confirmed: true, trustApp, appName: metadata?.name, appLogo: metadata?.logo });
         }
       });
       cancelBtn?.addEventListener("click", () => {
@@ -4174,97 +4168,9 @@ var SigningManager = class extends TokenRefreshApiClient {
    */
   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(", ")}]`;
-      }
-      if (typeof value === "bigint") {
-        return value.toString();
-      }
-      if (typeof value === "object" && value !== null) {
-        return JSON.stringify(value, null, 2);
-      }
-      return String(value);
-    };
-    const messageFields = Object.entries(typedData.message).map(
-      ([key, value]) => `
-        <div class="eip712-field">
-          <div class="field-name">${key}:</div>
-          <div class="field-value">${formatFieldValue(value)}</div>
-        </div>
-      `
-    ).join("");
-    const domainFields = Object.entries(typedData.domain).filter(([_, value]) => value !== void 0).map(
-      ([key, value]) => `
-        <div class="eip712-field">
-          <div class="field-name">${key}:</div>
-          <div class="field-value">${formatFieldValue(value)}</div>
-        </div>
-      `
-    ).join("");
-    modal.innerHTML = `
-      <div class="modal-overlay">
-        <div class="modal-content eip712-modal">
-          <!-- Header -->
-          <div class="auth-header">
-            <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>
-              ${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">
-              ${isVerifiedOrigin ? '<span class="verified-badge">\u2713</span>' : ""}
-              ${origin}
-            </p>
-          </div>
-
-          <!-- EIP712 Message Content -->
-          <div class="eip712-content">
-            <details class="eip712-details">
-              <summary>Advanced details</summary>
-
-              <div class="section-title">\u{1F4DD} Message</div>
-              <div class="eip712-section">
-                <div class="section-subtitle">${typedData.primaryType}</div>
-                ${messageFields}
-              </div>
-
-              <div class="section-title" style="margin-top: 16px;">\u{1F50D} Domain</div>
-              <div class="eip712-section">
-                ${domainFields}
-              </div>
-
-              <div class="section-title" style="margin-top: 16px;">\u{1F4CB} Full Message</div>
-              <pre class="eip712-raw"><code>${JSON.stringify(typedData.message, null, 2)}</code></pre>
-            </details>
-          </div>
-
-          <!-- Trust App Option -->
-          <div class="trust-app-section">
-            <label class="trust-app-label">
-              <input type="checkbox" class="trust-app-checkbox" />
-              <span>Trust this application and skip confirmation for future signatures</span>
-            </label>
-          </div>
-
-          <!-- Action Buttons -->
-          <div class="actions">
-            <button class="cancel-btn">Reject</button>
-            <button class="confirm-btn">Sign</button>
-          </div>
-
-          <!-- Footer Notice -->
-          <div class="footer-notice">
-            <p class="footer-note">Only sign messages from applications you trust.</p>
-          </div>
-        </div>
-      </div>
-    `;
+    const templateData = buildSignTxTemplateData(project, origin, typedData, metadata, userProfile);
+    const template = TemplateLoader.getTemplate("sign-eip712-tx");
+    modal.innerHTML = TemplateEngine.render(template, templateData);
     return modal;
   }
   /**
@@ -4286,7 +4192,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.14.8";
+var IFRAME_VERSION = "1.14.10";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -4939,7 +4845,7 @@ var IframeWallet = class {
   }
 };
 function toggleAuthPermissions(e) {
-  const isToggler = e.target.id === "data-auth-permissions-toggler";
+  const isToggler = e.target?.id === "data-auth-permissions-toggler";
   if (!isToggler) return;
   const details = document.getElementById("data-auth-permissions-block");
   const isOpen = details.hasAttribute("aria-expanded") && details.getAttribute("aria-expanded") === "true";
@@ -4954,6 +4860,22 @@ function toggleAuthPermissions(e) {
     toggler.innerHTML = "Hide Permissions \u25B2";
   }
 }
+function toggleConfirmTransactionDetails(e) {
+  const isToggler = e.target?.id === "confirm-transaction-details-toggler";
+  if (!isToggler) return;
+  const details = document.getElementById("confirm-transaction-details-block");
+  const isOpen = details.hasAttribute("aria-expanded") && details.getAttribute("aria-expanded") === "true";
+  const toggler = details.querySelector("#confirm-transaction-details-toggler");
+  if (isOpen) {
+    details.setAttribute("aria-expanded", "false");
+    details.style.setProperty("--confirm-transaction-details-h", "0px");
+    toggler.innerHTML = "Show Transaction Details \u25BC";
+  } else {
+    details.setAttribute("aria-expanded", "true");
+    details.style.setProperty("--confirm-transaction-details-h", "200px");
+    toggler.innerHTML = "Hide Transaction Details \u25B2";
+  }
+}
 function initWallet() {
   const wallet = new IframeWallet();
   wallet.initialize().catch((error) => {
@@ -4969,7 +4891,10 @@ function initWallet() {
       `;
     }
   });
-  document.addEventListener("click", toggleAuthPermissions);
+  document.addEventListener("click", (e) => {
+    toggleAuthPermissions(e);
+    toggleConfirmTransactionDetails(e);
+  });
 }
 if (document.readyState === "loading") {
   document.addEventListener("DOMContentLoaded", initWallet);