@embarkai/ui-kit 0.1.1 → 0.1.3

package/README.md

@@ -8,7 +8,7 @@ React UI components and hooks for EmbarkAI - a secure, user-friendly authenticat
 - 🔑 **MPC Key Management** - Distributed key generation with iframe isolation
 - 💼 **Account Abstraction** - ERC-4337 compliant smart contract wallets
 - 🎨 **Pre-built UI Components** - Ready-to-use React components with customizable themes
-- ⚡ **Easy Integration** - Just wrap your app with `LumiaPassportProvider`
+- ⚡ **Easy Integration** - Just wrap your app with `Provider`
 
 ## Installation
 
@@ -129,9 +129,9 @@ import {
   combineI18NResources,
   LOCAL_STORAGE_I18N_KEY,
   //
-  LumiaPassportProvider,
-  LumiaPassportSessionProvider,
-  LumiaRainbowKitProvider
+  Provider,
+  RainbowKitProvider,
+  SessionProvider
 } from '@embarkai/ui-kit'
 //
 import i18n from 'i18next'
@@ -154,11 +154,11 @@ function Root() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <LumiaPassportProvider
-        projectId="your-project-id" // Get from Lumia Passport Dashboard
+      <Provider
+        projectId="your-project-id" // Get from EmbarkAI Dashboard
       >
-        <LumiaRainbowKitProvider>
-          <LumiaPassportSessionProvider>
+        <RainbowKitProvider>
+          <SessionProvider>
             <header>
               <h1>{t('common.appname')}</h1>
             </header>
@@ -166,9 +166,9 @@ function Root() {
             <main>
               <span>{t('page1.title')}</span>
             </main>
-          </LumiaPassportSessionProvider>
-        </LumiaRainbowKitProvider>
-      </LumiaPassportProvider>
+          </SessionProvider>
+        </RainbowKitProvider>
+      </Provider>
     </QueryClientProvider>
   )
 }
@@ -217,14 +217,14 @@ 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"
+> **Note:** Don't forget to wrap your app with `QueryClientProvider` from `@tanstack/react-query` before using `Provider`, otherwise you'll get an error: "No QueryClient set, use QueryClientProvider to set one"
 
 ## Configuration Options
 
 ### Basic Configuration
 
 ```tsx
-<LumiaPassportProvider
+<Provider
   projectId="your-project-id" // Required
   initialConfig={{
     network: {
@@ -234,6 +234,7 @@ That's it! The `ConnectWalletButton` provides a complete authentication UI with
       rpcUrl: 'https://beam-rpc.lumia.org',
       explorerUrl: 'https://beam-explorer.lumia.org',
       testnet: true,
+      forceChain: false
     },
   }}
 >
@@ -245,14 +246,14 @@ The SDK uses the following priority for determining the active chain:
 
 1. **User's explicit selection** - If user manually switched chains in the UI, their choice is preserved (stored in localStorage)
 2. **dApp config `network.chainId`** - Your configured default chain for first-time users
-3. **SDK default** - Lumia Testnet (fallback if no config provided)
+3. **SDK default** - BSC
 
 This ensures returning users keep their preferred chain while new users start on your configured network.
 
 ### Advanced Configuration
 
 ```tsx
-<LumiaPassportProvider
+<Provider
   projectId="your-project-id"
   initialConfig={{
     // UI customization
@@ -333,28 +334,28 @@ This ensures returning users keep their preferred chain while new users start on
     },
   }}
   callbacks={{
-    onLumiaPassportConnecting: ({ method, provider }) => {
+    onConnecting: ({ method, provider }) => {
       console.log('Connecting with:', method, provider);
     },
-    onLumiaPassportConnect: ({ address, session }) => {
+    onConnect: ({ address, session }) => {
       console.log('Connected:', address);
     },
-    onLumiaPassportAccount: ({ userId, address, session, hasKeyshare }) => {
+    onAccount: ({ userId, address, session, hasKeyshare }) => {
       console.log('Account ready:', userId);
     },
-    onLumiaPassportUpdate: ({ providers }) => {
+    onAccountUpdate: ({ providers }) => {
       console.log('Profile updated:', providers);
     },
-    onLumiaPassportDisconnect: ({ address, userId }) => {
+    onDisconnect: ({ address, userId }) => {
       console.log('Disconnected:', address);
     },
-    onLumiaPassportError: ({ error, message }) => {
+    onError: ({ error, message }) => {
       console.error('Error:', message);
     },
     onWalletReady: (status) => {
       console.log('Wallet ready:', status.ready);
     },
-    onLumiaPassportChainChange: ({ chainId, previousChainId }) => {
+    onChainChange: ({ chainId, previousChainId }) => {
       console.log('Chain Changed:', { previousChainId, chainId })
     },
   }}
@@ -363,15 +364,15 @@ This ensures returning users keep their preferred chain while new users start on
 
 ## Using Hooks
 
-> **Note:** The `useLumiaPassportSession` hook is based on pure Zustand store so if you're already using useLumiaPassportSession hook please consider 2 options: 1) refactor state extarction so it uses zustand state extraction feature. 2) consider using dedicated LumiaPassport shared store values hooks: `useLumiaPassportAccountSession`, `useLumiaPassportAddress` etc. Otherwise you might experience excessive re-rendering issues as LumiaPassport shares its internal store and might update some state values which should not affect app render.
+> **Note:** The `useSession` hook is based on pure Zustand store so if you're already using useSession hook please consider 2 options: 1) refactor state extarction so it uses zustand state extraction feature. 2) consider using dedicated EmbarkAI shared store values hooks: `useAccountSession`, `useAddress` etc. Otherwise you might experience excessive re-rendering issues as EmbarkAI shares its internal store and might update some state values which should not affect app render.
 
 ```tsx
-import { useLumiaPassportAccountSession, useLumiaPassportLoadingStatus } from '@embarkai/ui-kit'
+import { useAccountSession, useLoadingStatus } from '@embarkai/ui-kit'
 
 function MyComponent() {
-  // const session = useLumiaPassportSession(s => s.session) - with prev hook & Zustand state extraction feature, please prefer this instead:
-  const session = useLumiaPassportAccountSession()
-  const { isSessionLoading } = useLumiaPassportLoadingStatus()
+  // const session = useSession(s => s.session) - with prev hook & Zustand state extraction feature, please prefer this instead:
+  const session = useAccountSession()
+  const { isSessionLoading } = useLoadingStatus()
 
   if (isSessionLoading) return <div>Loading...</div>
 
@@ -390,18 +391,18 @@ function MyComponent() {
 }
 ```
 
-### Lumia Passport shared store values hooks
+### EmbarkAI hared store values hooks
 
-- **useLumiaPassportActiveChainId** - Returns current ChainID
-- **useLumiaPassportIsMobileView** - Returns boolean indicating if UI is in mobile view mode
-- **useLumiaPassportAccountSession** - Returns current user session object with userId, addresses, and auth info
-- **useLumiaPassportLoadingStatus** - Returns `{ isSessionLoading, sessionStatus }` for tracking authentication state
-- **useLumiaPassportBalance** - Returns wallet balance data: `{ walletBalance, fiatBalance, cryptoRate, fiatSymbol, cryptoSymbol }`
-- **useLumiaPassportIFrameReady** - Returns boolean indicating if the MPC iframe is ready for operations
-- **useLumiaPassportAddress** - Returns the current user's wallet address
-- **useLumiaPassportError** - Returns any error that occurred during authentication or operations
-- **useLumiaPassportRecoveryUserId** - Returns userId for account recovery flow
-- **useLumiaPassportHasServerVault** - Returns boolean indicating if user has server-side keyshare backup
+- **useActiveChainId** - Returns current ChainID
+- **useIsMobileView** - Returns boolean indicating if UI is in mobile view mode
+- **useAccountSession** - Returns current user session object with userId, addresses, and auth info
+- **useLoadingStatus** - Returns `{ isSessionLoading, sessionStatus }` for tracking authentication state
+- **useBalance** - Returns wallet balance data: `{ walletBalance, fiatBalance, cryptoRate, fiatSymbol, cryptoSymbol }`
+- **useIFrameReady** - Returns boolean indicating if the MPC iframe is ready for operations
+- **useAddress** - Returns the current user's wallet address
+- **useError** - Returns any error that occurred during authentication or operations
+- **useRecoveryUserId** - Returns userId for account recovery flow
+- **useHasServerVault** - Returns boolean indicating if user has server-side keyshare backup
 
 ### useSendTransaction - Send Transactions
 
@@ -439,10 +440,10 @@ function TransactionExample() {
 For direct control without using the React hook, you can use `sendUserOperation` function:
 
 ```tsx
-import { sendUserOperation, useLumiaPassportAccountSession } from '@embarkai/ui-kit'
+import { sendUserOperation, useAccountSession } from '@embarkai/ui-kit'
 
 function DirectTransactionExample() {
-  const session = useLumiaPassportAccountSession()
+  const session = useAccountSession()
 
   const handleSend = async () => {
     if (!session) {
@@ -453,7 +454,7 @@ function DirectTransactionExample() {
     try {
       // Send transaction directly with full control
       const userOpHash = await sendUserOperation(
-        session, // Required: session from useLumiaPassportAccountSession
+        session, // Required: session from useAccountSession
         '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb', // to address
         '1000000000000000000', // value in wei (1 ETH)
         '0x', // data (optional contract call)
@@ -483,10 +484,10 @@ Deploy the smart account contract immediately after registration. This is **opti
 **Smart behavior:** Automatically checks if account is already deployed and skips transaction to save gas.
 
 ```tsx
-import { deployAccount, useLumiaPassportAccountSession } from '@embarkai/ui-kit'
+import { deployAccount, useAccountSession } from '@embarkai/ui-kit'
 
 function DeployAccountExample() {
-  const session = useLumiaPassportAccountSession()
+  const session = useAccountSession()
 
   const handleDeploy = async () => {
     if (!session) return
@@ -541,10 +542,10 @@ const hash = await deployAccount(session, 'economy', { force: true })
 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, useLumiaPassportAccountSession } from '@embarkai/ui-kit'
+import { signTypedData, useAccountSession } from '@embarkai/ui-kit'
 
 function SignatureExample() {
-  const session = useLumiaPassportAccountSession()
+  const session = useAccountSession()
 
   const handleSign = async () => {
     if (!session) return
@@ -642,10 +643,10 @@ In Account Abstraction (ERC-4337), there are **two addresses**:
 ### prepareUserOperation - Prepare for Backend Submission
 
 ```tsx
-import { prepareUserOperation, useLumiaPassportAccountSession } from '@embarkai/ui-kit'
+import { prepareUserOperation, useAccountSession } from '@embarkai/ui-kit'
 
 function BackendSubmissionExample() {
-  const session = useLumiaPassportAccountSession()
+  const session = useAccountSession()
 
   const handlePrepare = async () => {
     if (!session) return
@@ -709,10 +710,7 @@ const submittedUserOpHash = await sendUserOperationRaw(userOp, { chainId: CHAIN_
 const waitForReceipt = async (hash: string, maxAttempts = 60, delayMs = 1000) => {
   for (let i = 0; i < maxAttempts; i++) {
     // REQUIRES bundlerUrl parameter
-    const receipt = await getUserOperationReceipt(
-      hash as `0x${string}`,
-      chainConfig.bundlerUrl
-    )
+    const receipt = await getUserOperationReceipt(hash as `0x${string}`, chainConfig.bundlerUrl)
     if (receipt) {
       return {
         success: receipt.success,
@@ -735,25 +733,25 @@ return {
 
 **Network Configuration:**
 
-| Network | Chain ID | Bundler URL |
-|---------|----------|-------------|
-| Lumia Testnet (Beam) | 2030232745 | https://api.lumiapassport.com/rundler |
-| Lumia Mainnet (Prism) | 994873017 | https://api.lumiapassport.com/rundler-prism |
+| Network               | Chain ID   | Bundler URL                                 |
+| --------------------- | ---------- | ------------------------------------------- |
+| Lumia Testnet (Beam)  | 2030232745 | https://api.lumiapassport.com/rundler       |
+| Lumia Mainnet (Prism) | 994873017  | https://api.lumiapassport.com/rundler-prism |
 
-### useLumiaPassportOpen - Programmatic LumiaPassport Dialog Control
+### useOpenPage - Programmatic EmbarkAI Dialog Control
 
-Control the Lumia Passport dialog programmatically.
+Control the EmbarkAI dialog programmatically.
 
 ```tsx
-import { PageKey, useLumiaPassportOpen } from '@embarkai/ui-kit'
+import { PageKey, useOpenPage } from '@embarkai/ui-kit'
 
 function CustomAuthButton() {
-  const { isOpen, open: openLumiaPassport, close } = useLumiaPassportOpen()
+  const { isOpen, open: openEmbarkAI, close } = useOpenPage()
 
   return (
     <div>
-      <button onClick={() => openLumiaPassport(PageKey.AUTH)}>Sign In</button>
-      <button onClick={() => openLumiaPassport(PageKey.RECEIVE)}>Receive LUMIA</button>
+      <button onClick={() => openEmbarkAI(PageKey.AUTH)}>Sign In</button>
+      <button onClick={() => openEmbarkAI(PageKey.RECEIVE)}>Receive LUMIA</button>
 
       <button onClick={close}>Close Dialog</button>
     </div>
@@ -763,7 +761,7 @@ function CustomAuthButton() {
 
 ### ThemeToggle - Quick Theme Switcher
 
-Pre-built theme toggle button component to use in combo with useLumiaPassportColorMode.
+Pre-built theme toggle button component to use in combo with useColorMode.
 
 ```tsx
 import { ThemeToggle } from '@embarkai/ui-kit'
@@ -837,14 +835,14 @@ Global Passport window view can be redefined via config prop by providing specif
 
   box-shadow:
     0 0 8px rgba(14, 14, 14, 0.1),
-    inset 0 0 0 1px var(--lumia-passport-bd);
+    inset 0 0 0 1px var(--account-abstraction-bd);
 }
 ```
 
 ```tsx
 import 'index.css'
 
-<LumiaPassportProvider
+<Provider
   ...
   initialConfig={{
     ...
@@ -859,13 +857,13 @@ import 'index.css'
 
 ### Passport styles
 
-Passport provides global hook for Light/Dark modes - useLumiaPassportColorMode - use it within yor application instead of any local mode declaration.
+Passport provides global hook for Light/Dark modes - useColorMode - use it within yor application instead of any local mode declaration.
 
 ```tsx
-import { useLumiaPassportColorMode } from '@embarkai/ui-kit'
+import { useColorMode } from '@embarkai/ui-kit'
 
 function YourAnyComponent() {
-  const { colorMode, setColorMode } = useLumiaPassportColorMode()
+  const { colorMode, setColorMode } = useColorMode()
 
   return (
     <div>
@@ -882,57 +880,57 @@ Values will be automatically applied according to selected colorMode.
 The simpliest way to customize cssv is via app index.css file:
 
 ```css
-.lumia-scope[data-lumia-passport-mode='light'],
-.lumia-scope[data-lumia-passport-mode='dark'] {
+.account-abstraction-ui-scope[data-current-theme-mode='light'],
+.account-abstraction-ui-scope[data-current-theme-mode='dark'] {
   /* fixed cssv */
-  --lumia-passport-maw: 384px;
-  --lumia-passport-pd: 12px;
-  --lumia-passport-gap: 10px;
-  --lumia-passport-bdrs: 20px;
-  --lumia-passport-element-bdrs: 10px;
+  --account-abstraction-maw: 384px;
+  --account-abstraction-pd: 12px;
+  --account-abstraction-gap: 10px;
+  --account-abstraction-bdrs: 20px;
+  --account-abstraction-element-bdrs: 10px;
 
   /** overlay */
-  --lumia-passport-overlay: rgba(255, 255, 255, 0.8);
-  --lumia-passport-backdrop-blur: 10px;
+  --account-abstraction-overlay: rgba(255, 255, 255, 0.8);
+  --account-abstraction-backdrop-blur: 10px;
 
   /** surface backgrounds */
-  --lumia-passport-bg: #ffffff;
+  --account-abstraction-bg: #ffffff;
 
   /** text */
-  --lumia-passport-fg: #000000;
-  --lumia-passport-fg-h: rgba(0, 0, 0, 0.6);
-  --lumia-passport-fg-a: rgba(0, 0, 0, 0.4);
-  --lumia-passport-fg-inverted: #ffffff;
-  --lumia-passport-fg-muted: rgba(0, 0, 0, 0.6);
+  --account-abstraction-fg: #000000;
+  --account-abstraction-fg-h: rgba(0, 0, 0, 0.6);
+  --account-abstraction-fg-a: rgba(0, 0, 0, 0.4);
+  --account-abstraction-fg-inverted: #ffffff;
+  --account-abstraction-fg-muted: rgba(0, 0, 0, 0.6);
 
   /** backgrounds i.e. buttons bg etc */
-  --lumia-passport-primary: #000000;
-  --lumia-passport-primary-h: rgba(0, 0, 0, 0.8);
-  --lumia-passport-primary-a: rgba(0, 0, 0, 0.6);
+  --account-abstraction-primary: #000000;
+  --account-abstraction-primary-h: rgba(0, 0, 0, 0.8);
+  --account-abstraction-primary-a: rgba(0, 0, 0, 0.6);
 
-  --lumia-passport-secondary: #e4e4e4;
-  --lumia-passport-secondary-h: rgba(228, 228, 228, 0.8);
-  --lumia-passport-secondary-a: rgba(228, 228, 228, 0.6);
+  --account-abstraction-secondary: #e4e4e4;
+  --account-abstraction-secondary-h: rgba(228, 228, 228, 0.8);
+  --account-abstraction-secondary-a: rgba(228, 228, 228, 0.6);
 
   /** borders */
-  --lumia-passport-bd: #ebebeb;
-  --lumia-passport-bd-intense: rgb(169, 169, 169);
+  --account-abstraction-bd: #ebebeb;
+  --account-abstraction-bd-intense: rgb(169, 169, 169);
 
   /** shadows */
-  --lumia-passport-shadow-c: rgba(0, 0, 0, 0.1);
+  --account-abstraction-shadow-c: rgba(0, 0, 0, 0.1);
 
   /** highlight colors */
-  --lumia-passport-info: #000000;
-  --lumia-passport-bg-info: #e4e4e4;
+  --account-abstraction-info: #000000;
+  --account-abstraction-bg-info: #e4e4e4;
 
-  --lumia-passport-success: #000000;
-  --lumia-passport-bg-success: #21ff51;
+  --account-abstraction-success: #000000;
+  --account-abstraction-bg-success: #21ff51;
 
-  --lumia-passport-warning: #000000;
-  --lumia-passport-bg-warning: #e9fa00;
+  --account-abstraction-warning: #000000;
+  --account-abstraction-bg-warning: #e9fa00;
 
-  --lumia-passport-error: #ffffff;
-  --lumia-passport-bg-error: #d6204e;
+  --account-abstraction-error: #ffffff;
+  --account-abstraction-bg-error: #d6204e;
 }
 ```
 
@@ -941,7 +939,7 @@ The simpliest way to customize cssv is via app index.css file:
 Full TypeScript support with exported types:
 
 ```tsx
-import type { AuthProvider, LumiaPassportConfig, User, WalletInfo } from '@embarkai/ui-kit'
+import type { AuthProvider, ProviderConfig, User, WalletInfo } from '@embarkai/ui-kit'
 ```
 
 ## Examples

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 0.1.1</title>
+    <title>EmbarkAI Secure Wallet - iframe version 0.1.3</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/kyc/sumsub.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Sumsub KYC - Lumia Passport</title>
+    <title>Sumsub KYC - EmbarkAI</title>
 
     <style>
       * {