@lumiapassport/ui-kit 1.5.1 → 1.5.3

package/README.md

@@ -13,43 +13,57 @@ React UI components and hooks for Lumia Passport - a secure, user-friendly authe
 ## Installation
 
 ```bash
-npm install @lumiapassport/ui-kit @lumiapassport/core
+npm install @lumiapassport/ui-kit 
 # or
-pnpm add @lumiapassport/ui-kit @lumiapassport/core
+pnpm add @lumiapassport/ui-kit 
 # or
-yarn add @lumiapassport/ui-kit @lumiapassport/core
+yarn add @lumiapassport/ui-kit
 ```
 
-### Peer Dependencies
+## Quick Start
 
-The following packages are required as peer dependencies:
+### 1. Setup QueryClient (Required)
 
-```bash
-npm install react react-dom viem wagmi @tanstack/react-query
-```
+The UI Kit requires `@tanstack/react-query` for state management. First, create a query client:
 
-## Quick Start
+```tsx
+// queryClient.ts
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+```
 
-### 1. Wrap your app with `LumiaPassportProvider`
+### 2. Wrap your app with providers
 
 ```tsx
+import { QueryClientProvider } from '@tanstack/react-query';
 import { LumiaPassportProvider } from '@lumiapassport/ui-kit';
 import '@lumiapassport/ui-kit/dist/styles.css';
+import { queryClient } from './queryClient';
 
-function App() {
+function Root() {
   return (
-    <LumiaPassportProvider
-      config={{
-        projectId: 'your-project-id', // Get from Lumia Passport Dashboard
-      }}
-    >
-      <YourApp />
-    </LumiaPassportProvider>
+    <QueryClientProvider client={queryClient}>
+      <LumiaPassportProvider
+        projectId="your-project-id" // Get from Lumia Passport Dashboard
+      >
+        <YourApp />
+      </LumiaPassportProvider>
+    </QueryClientProvider>
   );
 }
 ```
 
-### 2. Add the Connect Button
+### 3. Add the Connect Button
 
 ```tsx
 import { ConnectWalletButton } from '@lumiapassport/ui-kit';
@@ -58,7 +72,7 @@ function YourApp() {
   return (
     <div>
       <h1>My App</h1>
-      <ConnectWalletButton />
+      <ConnectWalletButton label="Sign in" mode="compact"/>
     </div>
   );
 }
@@ -66,22 +80,24 @@ function YourApp() {
 
 That's it! The `ConnectWalletButton` provides a complete authentication UI with wallet management.
 
+> **Note:** Don't forget to wrap your app with `QueryClientProvider` from `@tanstack/react-query` before using `LumiaPassportProvider`, otherwise you'll get an error: "No QueryClient set, use QueryClientProvider to set one"
+
 ## Configuration Options
 
 ### Basic Configuration
 
 ```tsx
 <LumiaPassportProvider
-  config={{
-    projectId: 'your-project-id', // Required
-
-    // Optional: Custom RPC and network
-    rpcUrl: 'https://beam-rpc.lumia.org',
-    explorerUrl: 'https://beam-explorer.lumia.org',
-
-    // Optional: Custom smart contract addresses
-    aaFactoryAddress: '0x...',
-    paymasterAddress: '0x...',
+  projectId="your-project-id" // Required
+  initialConfig={{
+    network: {
+      name: 'Lumia Beam',
+      symbol: 'LUMIA',
+      chainId: 2030232745,
+      rpcUrl: 'https://beam-rpc.lumia.org',
+      explorerUrl: 'https://beam-explorer.lumia.org',
+      testnet: true,
+    },
   }}
 >
 ```
@@ -90,27 +106,134 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
 
 ```tsx
 <LumiaPassportProvider
-  config={{
-    projectId: 'your-project-id',
+  projectId="your-project-id"
+  initialConfig={{
+    // UI customization
+    ui: {
+      theme: 'dark', // 'light' | 'dark' | 'auto'
+      title: 'Welcome to MyApp',
+      subtitle: 'Sign in to continue',
+      authOrder: ['email', 'passkey', 'social'],
+      modal: {
+        width: '420px',
+        borderRadius: '24px'
+      },
+      branding: {
+        tagline: 'Powered by MPC',
+        link: { text: 'Learn More', url: 'https://example.com/docs' },
+      },
+      // Custom colors
+      colors: {
+        dark: {
+          background: '#060117',
+          text: '#fefdff',
+          textSecondary: '#c4c2c7',
+          textMuted: '#8a8890',
+          border: '#2a1a3a',
+          buttonBackground: '#ff6b35',
+          buttonBackgroundEnd: '#f7931e',
+          buttonText: '#ffffff',
+          buttonBackgroundHover: '#e55a2b',
+          buttonBackgroundHoverEnd: '#d67d1a',
+          connectedButtonBackground: 'rgba(27, 90, 226, 0.6)',
+          connectedButtonBorder: '#4a5568'
+        },
+        light: {
+          background: '#fefdff',
+          text: '#060117',
+          textSecondary: '#4a4754',
+          textMuted: '#6b6a70',
+          border: '#e0dde6',
+          buttonBackground: '#9333ea',
+          buttonBackgroundEnd: '#2563eb',
+          buttonText: '#fefdff',
+          buttonBackgroundHover: '#7e22ce',
+          buttonBackgroundHoverEnd: '#1d4ed8',
+          connectedButtonBackground: '#f3f4f6',
+          connectedButtonBorder: '#d1d5db'
+        }
+      },
+    },
 
     // Authentication providers
-    authProviders: {
-      email: true,      // Email OTP
-      passkey: true,    // Passkey/WebAuthn
-      telegram: true,   // Telegram Mini App
-      wallet: true,     // External wallet connection
+    email: {
+      enabled: true,
+      placeholder: 'Enter your email',
+      buttonText: 'Continue',
+      verificationTitle: 'Check your email',
     },
-
-    // UI customization
-    theme: {
-      mode: 'dark',           // 'light' | 'dark' | 'auto'
-      primaryColor: '#6366f1', // Custom brand color
+    passkey: {
+      enabled: true,
+      showCreateButton: true,
+      primaryButtonText: 'Sign in with Passkey',
+    },
+    social: {
+      enabled: true,
+      gridColumns: 2,
+      providers: [
+        { id: 'Discord', name: 'Discord', enabled: true, comingSoon: false },
+        { id: 'telegram', name: 'Telegram', enabled: true, comingSoon: false },
+      ],
+    },
+    wallet: {
+      enabled: true,
+      supportedChains: [994873017, 2030232745],
+      requireSignature: true,
+      walletConnectProjectId: 'your-walletconnect-id',
     },
 
     // Features
     features: {
-      backup: true,           // Enable key backup/recovery
-      mpcSecurity: true,      // Enable MPC iframe isolation
+      mpcSecurity: true,
+      strictMode: false,
+      requestDeduplication: true,
+      kycNeeded: false,
+      displayNameNeeded: false,
+    },
+
+    // KYC configuration (if needed)
+    kyc: {
+      provider: 'sumsub',
+      options: { levelName: 'basic-kyc', flowName: 'default' }
+    },
+
+    // Warnings
+    warnings: {
+      backupWarning: true,
+      emailNotConnectedWarning: true,
+    },
+
+    // Network configuration
+    network: {
+      name: 'Lumia Beam',
+      symbol: 'LUMIA',
+      chainId: 2030232745,
+      rpcUrl: 'https://beam-rpc.lumia.org',
+      explorerUrl: 'https://beam-explorer.lumia.org',
+      testnet: true,
+    },
+  }}
+  callbacks={{
+    onLumiaPassportConnecting: ({ method, provider }) => {
+      console.log('Connecting with:', method, provider);
+    },
+    onLumiaPassportConnect: ({ address, session }) => {
+      console.log('Connected:', address);
+    },
+    onLumiaPassportAccount: ({ userId, address, session, hasKeyshare }) => {
+      console.log('Account ready:', userId);
+    },
+    onLumiaPassportUpdate: ({ providers }) => {
+      console.log('Profile updated:', providers);
+    },
+    onLumiaPassportDisconnect: ({ address, userId }) => {
+      console.log('Disconnected:', address);
+    },
+    onLumiaPassportError: ({ error, message }) => {
+      console.error('Error:', message);
+    },
+    onWalletReady: (status) => {
+      console.log('Wallet ready:', status.ready);
     },
   }}
 >
@@ -348,12 +471,14 @@ Secure biometric authentication with device passkeys.
 Authentication via Telegram for mini apps.
 
 ```tsx
-// Requires Telegram bot configuration
-// Set in config:
-config={{
-  telegram: {
-    botName: 'your_bot_name',
-  }
+// Configure via social providers:
+initialConfig={{
+  social: {
+    enabled: true,
+    providers: [
+      { id: 'telegram', name: 'Telegram', enabled: true },
+    ],
+  },
 }}
 ```
 
@@ -374,10 +499,10 @@ Connect existing wallets (MetaMask, WalletConnect, etc.).
 import '@lumiapassport/ui-kit/dist/styles.css';
 
 <LumiaPassportProvider
-  config={{
-    projectId: 'your-project-id',
-    theme: {
-      mode: 'dark', // or 'light', 'auto'
+  projectId="your-project-id"
+  initialConfig={{
+    ui: {
+      theme: 'dark', // or 'light', 'auto'
     }
   }}
 >

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.5.1</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.5.3</title>
 
     <!-- Styles will be injected by build process -->
     <style>
@@ -203,7 +203,7 @@
 
       .app-logo {
         width: 64px;
-        height: 64px;
+        /* height: 64px; */
         border-radius: 12px;
         border: 1px solid var(--iframe-border);
         object-fit: cover;
@@ -284,20 +284,20 @@
       .permissions-box {
         margin: 1.5rem 2rem;
         padding: 1rem;
-        border: 1px solid #30363d;
+        border: 1px solid var(--iframe-text);
         border-radius: 8px;
-        background: #161b22;
+        background: transparent;
       }
 
       .permissions-header {
         font-size: 0.875rem;
-        color: #c9d1d9;
+        color: var(--iframe-text);
         margin-bottom: 1rem;
         line-height: 1.5;
       }
 
       .project-owner {
-        color: #8b949e;
+        color: var(--iframe-text-secondary);
       }
 
       .permission-group {
@@ -311,7 +311,7 @@
       .permission-group-title {
         font-size: 0.8125rem;
         font-weight: 600;
-        color: #c9d1d9;
+        color: var(--iframe-text);
         margin-bottom: 0.5rem;
       }
 
@@ -323,7 +323,7 @@
 
       .permissions-list li {
         font-size: 0.8125rem;
-        color: #c9d1d9;
+        color: var(--iframe-text);
         padding: 0.25rem 0;
         padding-left: 1.25rem;
         position: relative;
@@ -333,7 +333,7 @@
         content: "•";
         position: absolute;
         left: 0.5rem;
-        color: #8b949e;
+        color: var(--iframe-text-secondary);
       }
 
       /* Actions Section */
@@ -423,19 +423,14 @@
         font-size: 0.9rem;
       }
 
-      .detail-row:not(:last-child) {
-        border-bottom: 1px solid #e5e7eb;
-      }
-
       .detail-row code {
         font-family: 'Courier New', monospace;
-        font-size: 0.85rem;
-        color: #6b7280;
       }
 
+
       /* Security Warning */
       .security-warning {
-        margin: 1rem 2rem;
+        margin: 1.5rem 2rem;
         padding: 1rem;
         background: #fff8c5;
         border: 1px solid #d29922;
@@ -516,7 +511,7 @@
 
       /* Trust app checkbox section */
       .trust-app-section {
-        margin: 1rem 0;
+        margin: 1.5rem 2rem;
         padding: 0.75rem;
         background: #f9fafb;
         border-radius: 6px;

package/dist/iframe/main.js

@@ -2595,6 +2595,11 @@ var SigningManager = class extends TokenRefreshApiClient {
   constructor() {
     super();
     this.wasmLoaded = false;
+    this.explorerUrl = "https://beam-explorer.lumia.org";
+    this.METADATA_API_URL = "https://dashboard.lumiapassport.com/api/public/project";
+    this.METADATA_CACHE_TTL = 36e5;
+    // 1 hour in milliseconds
+    this.metadataCache = /* @__PURE__ */ new Map();
     this.storage = new StorageManager();
     this.trustedApps = new TrustedAppsManager();
   }
@@ -2612,6 +2617,34 @@ var SigningManager = class extends TokenRefreshApiClient {
       throw new Error("Failed to initialize signing WASM module");
     }
   }
+  /**
+   * Fetch project metadata from public API (with caching)
+   */
+  async fetchProjectMetadata(projectId) {
+    const cached = this.metadataCache.get(projectId);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < this.METADATA_CACHE_TTL) {
+      console.log(`[iframe][Sign] Using cached metadata for project: ${cached.data.name}`);
+      return cached.data;
+    }
+    try {
+      const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`);
+      if (!response.ok) {
+        console.warn(`[iframe][Sign] Failed to fetch project metadata: ${response.status}`);
+        return null;
+      }
+      const metadata = await response.json();
+      console.log(`[iframe][Sign] Fetched metadata for project: ${metadata.name}`);
+      this.metadataCache.set(projectId, {
+        data: metadata,
+        timestamp: now
+      });
+      return metadata;
+    } catch (error) {
+      console.error("[iframe][Sign] Error fetching project metadata:", error);
+      return null;
+    }
+  }
   /**
    * Sign transaction with user confirmation
    */
@@ -2719,8 +2752,9 @@ var SigningManager = class extends TokenRefreshApiClient {
    */
   async showConfirmationDialog(userId, projectId, project, origin, transaction, risk) {
     this.showIframe();
+    const metadata = await this.fetchProjectMetadata(projectId);
     return new Promise((resolve) => {
-      const modal = this.createConfirmationModal(userId, projectId, project, origin, transaction, risk);
+      const modal = this.createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata);
       const confirmBtn = modal.querySelector(".confirm-btn");
       const cancelBtn = modal.querySelector(".cancel-btn");
       const trustCheckbox = modal.querySelector(".trust-app-checkbox");
@@ -2743,79 +2777,91 @@ var SigningManager = class extends TokenRefreshApiClient {
   /**
    * Create confirmation modal UI
    */
-  createConfirmationModal(userId, projectId, project, origin, transaction, risk) {
+  createConfirmationModal(userId, projectId, project, origin, transaction, risk, metadata) {
     const modal = document.createElement("div");
     modal.className = "transaction-confirmation-modal";
-    const riskClass = risk.level.toLowerCase();
+    const isVerifiedOrigin = project.domains.includes(origin);
     const isUserOp = !!transaction.userOpDetails;
-    const formatHex = (value, maxLength = 20) => {
-      if (!value) return "N/A";
-      if (value.length > maxLength) {
-        return `${value.substring(0, maxLength)}...`;
-      }
-      return value;
-    };
-    const formatGas = (gasLimit, gasPrice) => {
-      if (!gasLimit || !gasPrice) return "N/A";
-      try {
-        const gas = BigInt(gasLimit);
-        const price = BigInt(gasPrice);
-        const totalWei = gas * price;
-        const totalEth = Number(totalWei) / 1e18;
-        return totalEth.toFixed(9) + " ETH";
-      } catch {
-        return "N/A";
-      }
-    };
     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;
     modal.innerHTML = `
       <div class="modal-overlay">
         <div class="modal-content">
-          <div class="app-identity">
-            <div class="app-info">
-              <h3>${project.name}</h3>
-              <p class="origin">${origin}</p>
+          <!-- 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>
 
-          <h2>Confirm Transaction</h2>
+          <!-- Transaction title -->
+          <h2 class="auth-title">Confirm Transaction</h2>
 
-          ${risk.level !== "LOW" ? `
-            <div class="risk-warning ${riskClass}">
-              <strong>\u26A0\uFE0F ${risk.level} RISK</strong>
-              ${risk.reasons.map((r) => `<p>\u2022 ${r}</p>`).join("")}
+          <!-- 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>
 
-          <div class="tx-details">
-            <div class="detail-row">
-              <span><strong>From:</strong></span>
-              <code>${formatHex(transaction.userOpDetails?.sender || transaction.to, 16)}</code>
-            </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>
+            ` : ""}
 
             ${isUserOp && transaction.userOpDetails?.callData && transaction.userOpDetails.callData !== "0x" ? `
-              <div class="detail-row">
-                <span><strong>Action:</strong></span>
-                <span>Contract Interaction</span>
+              <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">
-              <span><strong>Estimated Cost:</strong></span>
+            <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="security-notice" style="background: #d1fae5; border-left-color: #10b981; margin-top: 1rem;">
-                <p>\u2713 Gas fees will be paid by the application (no cost to you)</p>
+              <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>
 
-          <div class="security-notice">
-            <p>\u26A0\uFE0F Please verify this transaction carefully before confirming.</p>
-          </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">
@@ -2824,10 +2870,16 @@ var SigningManager = class extends TokenRefreshApiClient {
             </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>
     `;
@@ -2922,12 +2974,21 @@ var AuthorizationManager = class {
   constructor() {
     this.STORAGE_KEY_PREFIX = "auth";
     this.METADATA_API_URL = "https://dashboard.lumiapassport.com/api/public/project";
+    this.METADATA_CACHE_TTL = 36e5;
+    // 1 hour in milliseconds
+    this.metadataCache = /* @__PURE__ */ new Map();
     console.log("[iframe][Auth] Initialized");
   }
   /**
-   * Fetch project metadata from public API
+   * Fetch project metadata from public API (with caching)
    */
   async fetchProjectMetadata(projectId) {
+    const cached = this.metadataCache.get(projectId);
+    const now = Date.now();
+    if (cached && now - cached.timestamp < this.METADATA_CACHE_TTL) {
+      console.log(`[iframe][Auth] Using cached metadata for project: ${cached.data.name}`);
+      return cached.data;
+    }
     try {
       const response = await fetch(`${this.METADATA_API_URL}/${projectId}/metadata`);
       if (!response.ok) {
@@ -2936,6 +2997,10 @@ var AuthorizationManager = class {
       }
       const metadata = await response.json();
       console.log(`[iframe][Auth] Fetched metadata for project: ${metadata.name}`);
+      this.metadataCache.set(projectId, {
+        data: metadata,
+        timestamp: now
+      });
       return metadata;
     } catch (error) {
       console.error("[iframe][Auth] Error fetching project metadata:", error);
@@ -3659,7 +3724,7 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.5.1";
+var IFRAME_VERSION = "1.5.3";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));