@lumiapassport/ui-kit 1.5.1 → 1.5.2

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.2</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -3659,7 +3659,7 @@ var BackupManager = class {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.5.1";
+var IFRAME_VERSION = "1.5.2";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -8516,7 +8516,7 @@ function useLumiaPassportLinkedProfiles() {
 // package.json
 var package_default = {
   name: "@lumiapassport/ui-kit",
-  version: "1.5.1",
+  version: "1.5.2",
   description: "React UI components and hooks for Lumia Passport authentication and Account Abstraction",
   type: "module",
   main: "./dist/index.cjs",