@volr/react-ui 0.1.57 → 0.1.58

package/README.md

@@ -22,7 +22,6 @@ 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'],
@@ -37,69 +36,52 @@ function App() {
 }
 ```
 
-### 2. Use LoginModal
+### 2. Use useVolrModal Hook
 
 ```tsx
-import { useState } from 'react';
-import { LoginModal } from '@volr/react-ui';
+import { useVolrModal, useVolr } from '@volr/react-ui';
 
-function LoginButton() {
-  const [isOpen, setIsOpen] = useState(false);
+function Example() {
+  const { open } = useVolrModal();
+  const { evmAddress, isLoggedIn, logout } = useVolr();
 
   return (
-    <>
-      <button onClick={() => setIsOpen(true)}>Login</button>
-      
-      <LoginModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        onError={(error) => {
-          console.error('Login error:', error);
-        }}
-      />
-    </>
+    <div>
+      {isLoggedIn ? (
+        <>
+          <p>Wallet: {evmAddress}</p>
+          <button onClick={() => open({ mode: 'account' })}>
+            My Account
+          </button>
+          <button onClick={() => open({ mode: 'deposit' })}>
+            Deposit
+          </button>
+          <button onClick={logout}>Logout</button>
+        </>
+      ) : (
+        <button onClick={() => open()}>Login</button>
+      )}
+    </div>
   );
 }
 ```
 
-### 3. Use Wallet
+### 3. Direct Asset Deposit
 
-After login, use `useVolr` to interact with the blockchain.
+Open deposit modal with a specific asset pre-selected:
 
 ```tsx
-import { useVolr } from '@volr/react-ui';
-
-function Example() {
-  const { evm, evmAddress, isLoggedIn, logout } = useVolr();
-
-  if (!isLoggedIn) {
-    return <LoginButton />;
-  }
-
-  const handleTransfer = async () => {
-    await evm(8453).sendBatch([
-      {
-        target: tokenAddress,
-        abi: erc20Abi,
-        functionName: 'transfer',
-        args: [recipient, amount],
-      },
-    ]);
+function DepositButton() {
+  const { open } = useVolrModal();
+
+  const handleDeposit = () => {
+    open({
+      mode: 'deposit',
+      asset: { chainId: 8453, symbol: 'USDC' },
+    });
   };
 
-  return (
-    <div className="flex flex-col gap-4">
-      <p className="text-sm text-gray-600">Wallet: {evmAddress}</p>
-      <div className="flex gap-2">
-        <button onClick={handleTransfer} className="bg-blue-500 text-white rounded">
-          Transfer
-        </button>
-        <button onClick={logout} className="bg-gray-200 rounded">
-          Logout
-        </button>
-      </div>
-    </div>
-  );
+  return <button onClick={handleDeposit}>Deposit USDC</button>;
 }
 ```
 
@@ -116,20 +98,45 @@ function Example() {
 | `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.keyStorageType` | `'passkey' \| 'mpc'` | `'passkey'` | Key storage type |
 | `config.branding` | `BrandingConfig` | `undefined` | Custom branding configuration |
 | `config.providerPolicy` | `object` | `{ enforceOnFirstLogin: true }` | Provider policy settings |
 
-### LoginModal Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `isOpen` | `boolean` | **Required** | Modal open/close state |
-| `onClose` | `() => void` | **Required** | Close callback |
-| `onError` | `(error: Error) => void` | `undefined` | Error callback |
+> **Note:** Deposit assets are now configured via the Volr Dashboard, not in the SDK config.
 
 ## API Reference
 
+### useVolrModal
+
+Hook for controlling modals.
+
+```tsx
+import { useVolrModal } from '@volr/react-ui';
+
+const { isOpen, mode, asset, open, close } = useVolrModal();
+
+// Open account modal (default) - shows login if not logged in, account info if logged in
+open();
+open({ mode: 'account' });
+
+// Open deposit modal
+open({ mode: 'deposit' });
+
+// Open deposit with specific asset
+open({ mode: 'deposit', asset: { chainId: 8453, symbol: 'ETH' } });
+
+// Close modal
+close();
+```
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isOpen` | `boolean` | Whether modal is open |
+| `mode` | `'account' \| 'deposit'` | Current modal mode |
+| `asset` | `{ chainId: number; symbol: string } \| null` | Selected asset for deposit |
+| `open` | `(options?) => void` | Open modal with optional mode/asset |
+| `close` | `() => void` | Close modal |
+
 ### useVolr
 
 ```tsx
@@ -179,25 +186,29 @@ const result = await client.sendBatch([
     gasLimit: 100000n,
   },
 ]);
-
-// Send batch (raw calls)
-const result = await client.sendBatch([
-  {
-    target: '0x...',
-    data: '0x...',
-    value: 0n,
-    gasLimit: 100000n,
-  },
-]);
 ```
 
+## Modal Modes
+
+### Account Mode (`mode: 'account'`)
+
+- **Not logged in**: Shows login screen (email, social, SIWE)
+- **Logged in**: Shows account info (wallet address, email) and logout button
+
+### Deposit Mode (`mode: 'deposit'`)
+
+- **Not logged in**: Shows login first, then deposit screen
+- **Logged in**: Shows deposit QR code and address
+- **With asset**: Pre-selects the specified asset
+
 ## Features
 
 - **Email Login**: Email verification with 6-digit code
 - **Social Login**: Google, Twitter, Apple OAuth
 - **SIWE**: Sign-In with Ethereum (wallet login)
-- **Passkey Wallet**: Automatic passkey-based wallet creation for new users
-- **Minimal Design**: Clean, modern UI without emojis
+- **Passkey Wallet**: Automatic passkey-based wallet creation
+- **Deposit**: QR code-based crypto deposits
+- **Minimal Design**: Clean, modern UI
 - **Customizable**: Accent color and enabled methods
 - **Type-Safe**: Full TypeScript support
 
@@ -225,22 +236,50 @@ const result = await client.sendBatch([
 4. **New users**: Passkey setup
 5. **Existing users**: Success
 
-## Passkey Setup
+## Examples
 
-For new users, a passkey-based wallet is automatically created:
+### Login/Account Button
 
-1. **Create Passkey**: WebAuthn API with platform authenticator
-2. **Derive Wrap Key**: From Passkey PRF
-3. **Generate Master Seed**: 32-byte random seed
-4. **Encrypt**: AES-256-GCM with Wrap Key
-5. **Upload**: Encrypted seed to S3
-6. **Register Provider**: Backend registration
-7. **Derive EVM Key**: BIP-32 derivation
-8. **Complete**: Wallet address confirmed
+```tsx
+import { useVolrModal, useVolr } from '@volr/react-ui';
+
+function AuthButton() {
+  const { open } = useVolrModal();
+  const { isLoggedIn, evmAddress } = useVolr();
+
+  if (isLoggedIn) {
+    return (
+      <button onClick={() => open({ mode: 'account' })}>
+        {evmAddress?.slice(0, 6)}...{evmAddress?.slice(-4)}
+      </button>
+    );
+  }
 
-## Examples
+  return <button onClick={() => open()}>Connect</button>;
+}
+```
+
+### Deposit Button
+
+```tsx
+import { useVolrModal, useVolr } from '@volr/react-ui';
+
+function DepositButton() {
+  const { open } = useVolrModal();
+  const { isLoggedIn } = useVolr();
+
+  return (
+    <button 
+      onClick={() => open({ mode: 'deposit' })}
+      disabled={!isLoggedIn}
+    >
+      Deposit
+    </button>
+  );
+}
+```
 
-### Email Only
+### Email Only Config
 
 ```tsx
 const volrConfig: VolrUIConfig = {
@@ -250,10 +289,6 @@ const volrConfig: VolrUIConfig = {
   accentColor: '#6366f1',
   enabledLoginMethods: ['email'],
 };
-
-<VolrUIProvider config={volrConfig}>
-  <App />
-</VolrUIProvider>
 ```
 
 ### Google and Apple Only
@@ -267,45 +302,8 @@ const volrConfig: VolrUIConfig = {
   enabledLoginMethods: ['social'],
   socialProviders: ['google', 'apple'],
 };
-
-<VolrUIProvider config={volrConfig}>
-  <App />
-</VolrUIProvider>
-```
-
-### Custom Error Handling
-
-```tsx
-function App() {
-  const [showLogin, setShowLogin] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  return (
-    <div className="flex flex-col gap-4">
-      {error && (
-        <div className="bg-red-50 text-red-800 rounded-lg">
-          {error}
-        </div>
-      )}
-      
-      <button onClick={() => setShowLogin(true)}>Login</button>
-      
-      <LoginModal
-        isOpen={showLogin}
-        onClose={() => {
-          setShowLogin(false);
-          setError(null);
-        }}
-        onError={(err) => {
-          setError(err.message);
-          setTimeout(() => setError(null), 3000);
-        }}
-      />
-    </div>
-  );
-}
 ```
 
 ## License
 
-MIT
+MIT