@lumiapassport/ui-kit 1.6.3 → 1.8.0

package/README.md

@@ -340,6 +340,98 @@ function DirectTransactionExample() {
 - ✅ Use `useSendTransaction()` hook for React components (automatic session management)
 - ✅ Use `sendUserOperation()` function for custom logic, utility functions, or non-React code
 
+### signTypedData - Sign EIP712 Structured Messages
+
+Sign structured data according to [EIP-712](https://eips.ethereum.org/EIPS/eip-712) standard. This is commonly used for off-chain signatures in dApps (e.g., NFT marketplace orders, gasless transactions, permit signatures).
+
+```tsx
+import { signTypedData, useLumiaPassportSession } from '@lumiapassport/ui-kit';
+
+function SignatureExample() {
+  const { session } = useLumiaPassportSession();
+
+  const handleSign = async () => {
+    if (!session) return;
+
+    try {
+      // Define EIP712 typed data
+      const signature = await signTypedData(session, {
+        domain: {
+          name: 'MyDApp',              // Your dApp name (must match contract)
+          version: '1',                // Contract version
+          chainId: 994,                // Lumia Prism Testnet
+          verifyingContract: '0x...',  // Your contract address (REQUIRED in production!)
+        },
+        types: {
+          Order: [
+            { name: 'tokenIds', type: 'uint256[]' },
+            { name: 'price', type: 'uint256' },
+            { name: 'deadline', type: 'uint256' },
+          ],
+        },
+        primaryType: 'Order',
+        message: {
+          tokenIds: [1n, 2n, 3n],
+          price: 1000000000000000000n, // 1 token in wei
+          deadline: BigInt(Math.floor(Date.now() / 1000) + 3600), // 1 hour from now
+        },
+      });
+
+      console.log('Signature:', signature);
+
+      // Verify signature (optional)
+      const { recoverTypedDataAddress } = await import('viem');
+      const recoveredAddress = await recoverTypedDataAddress({
+        domain: { /* same domain */ },
+        types: { /* same types */ },
+        primaryType: 'Order',
+        message: { /* same message */ },
+        signature,
+      });
+
+      console.log('Signer:', recoveredAddress); // Should match session.ownerAddress
+    } catch (error) {
+      console.error('Signing failed:', error);
+    }
+  };
+
+  return <button onClick={handleSign}>Sign Message</button>;
+}
+```
+
+**Important Notes about ERC-4337 Smart Accounts:**
+
+In Account Abstraction (ERC-4337), there are **two addresses**:
+1. **Owner Address (EOA)** - The address that signs messages/transactions
+2. **Smart Account Address** - The contract wallet address
+
+⚠️ **Critical:** The signature is created by the **owner address** (EOA), NOT the smart account address!
+
+**Compatibility with existing protocols:**
+- ✅ **Works:** Protocols that verify signatures off-chain (e.g., your backend verifies the owner EOA signature)
+- ⚠️ **May not work:** Protocols designed for EOA wallets that store and verify against `msg.sender` or wallet address
+  - Example: Uniswap Permit2, some NFT marketplaces
+  - These protocols expect the signer address to match the wallet address
+  - With smart accounts: signer = owner EOA, wallet = smart account contract
+  - **Solution:** Use ERC-1271 signature validation in your smart contracts (allows contracts to validate signatures)
+
+**Domain Configuration:**
+- In production, use your actual `verifyingContract` address (not zero address!)
+- The `domain` parameters must match exactly between frontend and smart contract
+- The `chainId` should match the network you're deploying to
+
+**Technical Details:**
+- Shows a MetaMask-like confirmation modal with structured message preview
+- All BigInt values are supported in the message
+- Signature can be verified using `viem.recoverTypedDataAddress()` - will return owner EOA address
+
+**When to use signTypedData:**
+- ✅ Custom backend signature verification (you control the verification logic)
+- ✅ Gasless transactions with meta-transaction relayers
+- ✅ DAO voting and governance (off-chain signatures)
+- ✅ Custom smart contracts with ERC-1271 support
+- ⚠️ Be cautious with protocols designed exclusively for EOA wallets
+
 ### prepareUserOperation - Prepare for Backend Submission
 
 ```tsx

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.6.3</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.8.0</title>
 
     <!-- Styles will be injected by build process -->
     <style>
@@ -28,6 +28,10 @@
         --iframe-modal-bg: white;
         --iframe-button-bg: #667eea;
         --iframe-button-text: white;
+        --iframe-section-bg: #f9fafb;
+        --iframe-section-border: #e5e7eb;
+        --iframe-section-text: #374151;
+        --iframe-field-label: #6b7280;
       }
 
       * {
@@ -542,6 +546,221 @@
       .trust-app-label:hover {
         color: #111827;
       }
+
+      /* EIP712 Signature Request Modal Styles */
+      .eip712-confirmation-modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 10000;
+      }
+
+      .eip712-modal {
+        max-width: 480px;
+      }
+
+      .eip712-content {
+        padding: 1.5rem 2rem;
+      }
+
+      .section-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--iframe-section-text);
+        margin-bottom: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+
+      .eip712-section {
+        background: var(--iframe-section-bg);
+        border: 1px solid var(--iframe-section-border);
+        border-radius: 8px;
+        padding: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .section-subtitle {
+        font-size: 1rem;
+        font-weight: 700;
+        color: var(--iframe-section-text);
+        margin-bottom: 0.75rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid var(--iframe-section-border);
+      }
+
+      .eip712-field {
+        display: grid;
+        grid-template-columns: 120px 1fr;
+        gap: 0.75rem;
+        padding: 0.5rem 0;
+        align-items: start;
+      }
+
+      .eip712-field:not(:last-child) {
+        border-bottom: 1px solid var(--iframe-section-border);
+      }
+
+      .field-name {
+        font-size: 0.8125rem;
+        font-weight: 500;
+        color: var(--iframe-field-label);
+      }
+
+      .field-value {
+        font-size: 0.8125rem;
+        color: var(--iframe-section-text);
+        word-break: break-word;
+        font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+      }
+
+      .eip712-details {
+        margin-bottom: 1rem;
+        border: 1px solid var(--iframe-section-border);
+        border-radius: 6px;
+        overflow: hidden;
+      }
+
+      .eip712-details summary {
+        padding: 0.75rem 1rem;
+        cursor: pointer;
+        background: var(--iframe-section-bg);
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--iframe-section-text);
+        user-select: none;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .eip712-details summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .eip712-details summary:after {
+        content: '▼';
+        font-size: 0.7rem;
+        transition: transform 0.2s;
+        color: var(--iframe-section-text);
+      }
+
+      .eip712-details[open] summary:after {
+        transform: rotate(180deg);
+      }
+
+      .eip712-details summary:hover {
+        background: var(--iframe-modal-bg);
+        opacity: 0.9;
+      }
+
+      .eip712-raw {
+        margin: 0;
+        padding: 1rem;
+        background: var(--iframe-modal-bg);
+        border-top: 1px solid var(--iframe-section-border);
+        max-height: 200px;
+        overflow-y: auto;
+      }
+
+      .eip712-raw code {
+        font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+        font-size: 0.75rem;
+        color: var(--iframe-section-text);
+        line-height: 1.5;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+
+      .security-info {
+        background: var(--iframe-section-bg);
+        border-radius: 6px;
+        padding: 0.75rem 1rem;
+        margin-bottom: 1rem;
+      }
+
+      .info-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.8125rem;
+      }
+
+      .info-label {
+        font-weight: 500;
+        color: var(--iframe-field-label);
+      }
+
+      .info-value {
+        font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+        color: var(--iframe-section-text);
+      }
+
+      .footer-notice {
+        padding: 0 2rem 2rem;
+        text-align: center;
+      }
+
+      .modal-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: var(--iframe-text);
+        margin: 0.5rem 0;
+      }
+
+      .origin-text {
+        font-size: 0.875rem;
+        color: var(--iframe-text-secondary);
+        margin: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+      }
+
+      .verified-badge {
+        color: #10b981;
+        font-weight: 600;
+      }
+
+      .project-logo {
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+        object-fit: cover;
+      }
+
+      .project-logo-placeholder {
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.5rem;
+      }
+
+      .arrow-icon {
+        font-size: 1.25rem;
+        color: #9ca3af;
+      }
+
+      .lumia-logo {
+        width: 40px;
+        height: 40px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        font-weight: 700;
+        font-size: 1.25rem;
+      }
     </style>
   </head>
   <body>

package/dist/iframe/main.js

@@ -1085,6 +1085,7 @@ async function uploadShareToVault(encryptedShare, accessToken) {
       "Authorization": `Bearer ${token}`,
       "Idempotency-Key": idempotencyKey
     },
+    credentials: "include",
     body: JSON.stringify(encryptedShare)
   });
   if (!response.ok) {
@@ -1109,7 +1110,8 @@ async function downloadShareFromVault(accessToken) {
       "Authorization": `Bearer ${token}`,
       "X-Client-Device-Id": "lumia-ui-kit",
       "X-Client-Device-Name": "Lumia UI Kit"
-    }
+    },
+    credentials: "include"
   });
   if (!response.ok) {
     if (response.status === 404) {
@@ -1379,6 +1381,7 @@ var SecureMessenger = class {
       "AUTHENTICATE",
       "START_DKG",
       "SIGN_TRANSACTION",
+      "SIGN_TYPED_DATA",
       "GET_ADDRESS",
       "CHECK_KEYSHARE",
       "GET_TRUSTED_APPS",
@@ -2628,7 +2631,9 @@ var SigningManager = class extends TokenRefreshApiClient {
       return cached.data;
     }
     try {
-      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`);
+      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`, {
+        credentials: "include"
+      });
       if (!response.ok) {
         console.warn(`[iframe][Sign] Failed to fetch project metadata: ${response.status}`);
         return null;
@@ -2911,14 +2916,22 @@ var SigningManager = class extends TokenRefreshApiClient {
   }
   /**
    * Assess transaction risk
+   *
+   * TODO: Implement backend-based risk assessment with real-time price conversion
+   * - Get current LUMIA/USD price from API
+   * - Calculate transaction value in USD
+   * - Use dynamic thresholds based on USD value (e.g., >$100 = HIGH)
+   * - Consider additional factors: recipient reputation, contract verification, etc.
    */
   async assessRisk(transaction) {
     const reasons = [];
     let score = 0;
-    const valueEth = parseFloat(transaction.value);
-    if (valueEth > 1) {
+    const valueWei = BigInt(transaction.value || "0");
+    const valueLumia = Number(valueWei) / 1e18;
+    if (valueLumia > 10) {
       score += 20;
-      reasons.push(`High value transaction (${valueEth} ETH)`);
+      const formattedValue = valueLumia >= 1 ? valueLumia.toFixed(4).replace(/\.?0+$/, "") : valueLumia.toFixed(8).replace(/\.?0+$/, "");
+      reasons.push(`High value transaction (${formattedValue} LUMIA)`);
     }
     if (transaction.data && transaction.data !== "0x" && transaction.data.length > 2) {
       score += 10;
@@ -2975,6 +2988,170 @@ var SigningManager = class extends TokenRefreshApiClient {
   extractServerMessage(response) {
     return response?.msgNext || response?.msg_next || response?.msg || null;
   }
+  /**
+   * Sign EIP712 typed data with user confirmation
+   */
+  async signTypedData(userId, projectId, origin, typedData, digest32, accessToken) {
+    console.log("[iframe][Sign] EIP712 signing request:", { userId, projectId, origin, primaryType: typedData.primaryType });
+    await this.initialize();
+    const projectInfo = {
+      id: projectId,
+      name: "Application",
+      logoUrl: "",
+      website: origin,
+      domains: [origin]
+    };
+    const isTrusted = this.trustedApps.isTrusted(userId, projectId, origin);
+    if (!isTrusted) {
+      const confirmResult = await this.showEIP712ConfirmationDialog(
+        userId,
+        projectId,
+        projectInfo,
+        origin,
+        typedData
+      );
+      if (!confirmResult.confirmed) {
+        throw new Error("User rejected signature request");
+      }
+      if (confirmResult.trustApp) {
+        this.trustedApps.addTrustedApp(userId, projectId, origin);
+      }
+    }
+    const keyshareData = this.storage.loadKeyshare(userId);
+    if (!keyshareData) {
+      throw new Error("No keyshare found. Please complete DKG first.");
+    }
+    const signature = await this.performMPCSigning(userId, keyshareData, digest32, projectId, accessToken);
+    console.log("[iframe][Sign] EIP712 signature generated");
+    return signature;
+  }
+  /**
+   * Show EIP712 confirmation dialog
+   */
+  async showEIP712ConfirmationDialog(userId, projectId, project, origin, typedData) {
+    this.showIframe();
+    const metadata = await this.fetchProjectMetadata(projectId);
+    return new Promise((resolve) => {
+      const modal = this.createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata);
+      const confirmBtn = modal.querySelector(".confirm-btn");
+      const cancelBtn = modal.querySelector(".cancel-btn");
+      const trustCheckbox = modal.querySelector(".trust-app-checkbox");
+      confirmBtn?.addEventListener("click", (e) => {
+        if (e.isTrusted) {
+          const trustApp = trustCheckbox?.checked || false;
+          modal.remove();
+          this.hideIframe();
+          resolve({ confirmed: true, trustApp });
+        }
+      });
+      cancelBtn?.addEventListener("click", () => {
+        modal.remove();
+        this.hideIframe();
+        resolve({ confirmed: false, trustApp: false });
+      });
+      document.body.appendChild(modal);
+    });
+  }
+  /**
+   * Create EIP712 confirmation modal UI (similar to MetaMask)
+   */
+  createEIP712ConfirmationModal(userId, projectId, project, origin, typedData, metadata) {
+    const modal = document.createElement("div");
+    modal.className = "eip712-confirmation-modal";
+    const isVerifiedOrigin = project.domains.includes(origin);
+    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>
+              <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">
+            <div class="section-title">\u{1F4DD} Message</div>
+            <div class="eip712-section">
+              <div class="section-subtitle">${typedData.primaryType}</div>
+              ${messageFields}
+            </div>
+
+            <details class="eip712-details">
+              <summary>\u{1F50D} Domain</summary>
+              <div class="eip712-section">
+                ${domainFields}
+              </div>
+            </details>
+
+            <details class="eip712-details">
+              <summary>\u{1F4CB} Full Message</summary>
+              <pre class="eip712-raw"><code>${JSON.stringify(typedData.message, null, 2)}</code></pre>
+            </details>
+          </div>
+
+          <!-- Security Info -->
+          <div class="security-info">
+            <div class="info-item">
+              <span class="info-label">Signing with:</span>
+              <span class="info-value">${this.storage.getOwnerAddress(userId) || userId.substring(0, 20) + "..."}</span>
+            </div>
+          </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>
+    `;
+    return modal;
+  }
   /**
    * Show iframe (notify parent)
    */
@@ -3014,7 +3191,9 @@ var AuthorizationManager = class {
       return cached.data;
     }
     try {
-      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`);
+      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`, {
+        credentials: "include"
+      });
       if (!response.ok) {
         console.warn(`[iframe][Auth] Failed to fetch project metadata: ${response.status}`);
         return null;
@@ -3434,7 +3613,8 @@ var GoogleDriveProvider = class {
     const searchResponse = await fetch(
       `https://www.googleapis.com/drive/v3/files?q=name='${folderName}' and mimeType='application/vnd.google-apps.folder' and trashed=false`,
       {
-        headers: { Authorization: `Bearer ${this.accessToken}` }
+        headers: { Authorization: `Bearer ${this.accessToken}` },
+        credentials: "include"
       }
     );
     if (!searchResponse.ok) {
@@ -3450,6 +3630,7 @@ var GoogleDriveProvider = class {
         Authorization: `Bearer ${this.accessToken}`,
         "Content-Type": "application/json"
       },
+      credentials: "include",
       body: JSON.stringify({
         name: folderName,
         mimeType: "application/vnd.google-apps.folder"
@@ -3473,6 +3654,7 @@ var GoogleDriveProvider = class {
         headers: {
           Authorization: `Bearer ${this.accessToken}`
         },
+        credentials: "include",
         body: form
       }
     );
@@ -3748,7 +3930,7 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.6.3";
+var IFRAME_VERSION = "1.8.0";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));
@@ -3831,6 +4013,9 @@ var IframeWallet = class {
         case "SIGN_TRANSACTION":
           await this.handleSignTransaction(message, origin);
           break;
+        case "SIGN_TYPED_DATA":
+          await this.handleSignTypedData(message, origin);
+          break;
         case "GET_ADDRESS":
           await this.handleGetAddress(message, origin);
           break;
@@ -4005,6 +4190,40 @@ var IframeWallet = class {
       throw error;
     }
   }
+  async handleSignTypedData(message, origin) {
+    const { sessionToken, userId, projectId, typedData, digest32, accessToken } = message.data;
+    const { messageId } = message;
+    if (!this.sessionManager.validateSession(sessionToken, origin)) {
+      throw new Error("Invalid session");
+    }
+    const isAuthorized = await this.authManager.checkAuthorization(userId, projectId);
+    if (!isAuthorized) {
+      throw new Error("User has not authorized this application");
+    }
+    console.log(`[iframe] SIGN_TYPED_DATA: userId=${userId}, primaryType=${typedData?.primaryType}`);
+    try {
+      const signature = await this.signingManager.signTypedData(
+        userId,
+        projectId,
+        origin,
+        typedData,
+        digest32,
+        accessToken
+      );
+      this.messenger.sendResponse(
+        messageId,
+        {
+          type: "LUMIA_PASSPORT_EIP712_SIGNATURE",
+          signature
+        },
+        origin
+      );
+      console.log(`[iframe] \u2705 EIP712 message signed`);
+    } catch (error) {
+      console.error("[iframe] EIP712 signing failed:", error);
+      throw error;
+    }
+  }
   async handleGetAddress(message, origin) {
     const { sessionToken, userId } = message.data;
     const { messageId } = message;