@volr/react-ui 0.1.5 → 0.1.6

package/README.md

@@ -1,13 +1,13 @@
 # @volr/react-ui
 
-Pre-built UI components for Volr SDK with minimal, modern design.
+Pre-built UI components for Volr, built on top of `@volr/react` and `@volr/sdk-core`, with minimal, modern design.
 
 ## Installation
 
 ```bash
-npm install @volr/react-ui @volr/react
+npm install @volr/react-ui @volr/react @volr/sdk-core viem
 # or
-yarn add @volr/react-ui @volr/react
+yarn add @volr/react-ui @volr/react @volr/sdk-core viem
 ```
 
 ## Quick Start
@@ -16,21 +16,21 @@ yarn add @volr/react-ui @volr/react
 
 ```tsx
 import { VolrUIProvider } from '@volr/react-ui';
-import type { VolrConfig } from '@volr/react';
+import type { VolrUIConfig } from '@volr/react-ui';
 
-const volrConfig: VolrConfig = {
+const volrConfig: VolrUIConfig = {
   defaultChainId: 8453,
   projectApiKey: 'your-project-api-key',
+  appName: 'My App',
+  // keyStorageType defaults to 'passkey' if not specified
+  accentColor: '#3b82f6',
+  enabledLoginMethods: ['email', 'social', 'siwe'],
+  socialProviders: ['google', 'twitter', 'apple'],
 };
 
 function App() {
   return (
-    <VolrUIProvider
-      config={volrConfig}
-      accentColor="#3b82f6"
-      enabledLoginMethods={['email', 'social', 'siwe']}
-      socialProviders={['google', 'twitter', 'apple']}
-    >
+    <VolrUIProvider config={volrConfig}>
       <YourApp />
     </VolrUIProvider>
   );
@@ -68,13 +68,16 @@ function LoginButton() {
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `config` | `VolrConfig` | **Required** | Volr configuration (defaultChainId, projectApiKey) |
-| `accentColor` | `string` | `'#303030'` | Accent color for buttons and links |
-| `appName` | `string` | `undefined` | Application name |
-| `enabledLoginMethods` | `('email' \| 'social' \| 'siwe')[]` | `['email', 'social', 'siwe']` | Enabled login methods |
-| `socialProviders` | `('google' \| 'twitter' \| 'apple')[]` | `['google', 'twitter', 'apple']` | Enabled social providers |
-| `volrLogoUrl` | `string` | `undefined` | Custom Volr logo URL |
-| `providerPolicy` | `object` | `{ enforceOnFirstLogin: true }` | Provider policy settings |
+| `config` | `VolrUIConfig` | **Required** | Volr UI configuration (extends VolrConfig) |
+| `config.defaultChainId` | `number` | **Required** | Default chain ID |
+| `config.projectApiKey` | `string` | **Required** | Project API key |
+| `config.appName` | `string` | **Required** | Application name |
+| `config.accentColor` | `string` | `'#303030'` | Accent color for buttons and links |
+| `config.enabledLoginMethods` | `('email' \| 'social' \| 'siwe')[]` | `['email', 'social', 'siwe']` | Enabled login methods |
+| `config.socialProviders` | `('google' \| 'twitter' \| 'apple')[]` | `['google', 'twitter', 'apple']` | Enabled social providers |
+| `config.keyStorageType` | `'passkey' \| 'mpc'` | `'passkey'` | Key storage type (optional, defaults to passkey) |
+| `config.branding` | `BrandingConfig` | `undefined` | Custom branding configuration |
+| `config.providerPolicy` | `object` | `{ enforceOnFirstLogin: true }` | Provider policy settings |
 
 ### LoginModal Props
 
@@ -136,11 +139,15 @@ For new users, a passkey-based wallet is automatically created:
 ### Email Only
 
 ```tsx
-<VolrUIProvider
-  config={volrConfig}
-  accentColor="#6366f1"
-  enabledLoginMethods={['email']}
->
+const volrConfig: VolrUIConfig = {
+  defaultChainId: 8453,
+  projectApiKey: 'your-project-api-key',
+  appName: 'My App',
+  accentColor: '#6366f1',
+  enabledLoginMethods: ['email'],
+};
+
+<VolrUIProvider config={volrConfig}>
   <App />
 </VolrUIProvider>
 ```
@@ -148,12 +155,16 @@ For new users, a passkey-based wallet is automatically created:
 ### Google and Apple Only
 
 ```tsx
-<VolrUIProvider
-  config={volrConfig}
-  accentColor="#8b5cf6"
-  enabledLoginMethods={['social']}
-  socialProviders={['google', 'apple']}
->
+const volrConfig: VolrUIConfig = {
+  defaultChainId: 8453,
+  projectApiKey: 'your-project-api-key',
+  appName: 'My App',
+  accentColor: '#8b5cf6',
+  enabledLoginMethods: ['social'],
+  socialProviders: ['google', 'apple'],
+};
+
+<VolrUIProvider config={volrConfig}>
   <App />
 </VolrUIProvider>
 ```

package/dist/index.cjs

@@ -2811,7 +2811,8 @@ var VolrUIProvider = ({
     enabledLoginMethods = ["email", "social", "siwe"],
     socialProviders = ["google", "twitter", "apple"],
     branding,
-    keyStorageType
+    keyStorageType = "passkey"
+    // Default to passkey if not specified
   } = config;
   const providerPolicy = config.providerPolicy ?? {
     enforceOnFirstLogin: true