[wip] docs: add React Kit docs

docs/pages/wallets/react-kit/configuration.mdx

@@ -0,0 +1,83 @@
+# Configuration
+
+The kit connector accepts all base `zeroDevWallet` params plus an optional `config` object for kit-specific features.
+
+## Basic
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+  projectId: 'your-project-id',
+  chains: [sepolia],
+})
+```
+
+Signing confirmation is enabled by default (`prompt` mode). No extra config needed.
+
+## Auth
+
+Configure how users sign in. To display the auth UI, mount the [`<AuthFlow />`](/wallets/react-kit/features/authentication) component in your app.
+
+```tsx
+zeroDevWallet({
+  projectId: '...',
+  chains: [sepolia],
+  config: {
+    auth: {
+      magicLinkBaseUrl: 'https://yourdomain.com/auth/verify',
+      enabledMethods: ['email', 'google', 'passkey'],
+      termsAndConditionsUrl: 'https://yourdomain.com/terms',
+      privacyPolicyUrl: 'https://yourdomain.com/privacy',
+    },
+  },
+})
+```
+
+### `config.auth`
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `magicLinkBaseUrl` | `string` | The URL the magic link points to. |
+| `enabledMethods` | `AuthMethod[]` | Which methods to offer: `'email'`, `'google'`, `'passkey'`, `'injected-wallet'`. |
+| `termsAndConditionsUrl` | `string` (optional) | Your terms and conditions URL. When set (alone or with `privacyPolicyUrl`), the auth UI shows a required agreement checkbox. |
+| `privacyPolicyUrl` | `string` (optional) | Your privacy policy URL. When set (alone or with `termsAndConditionsUrl`), the auth UI shows a required agreement checkbox. |
+| `onSuccess` | `() => void` | Called when authentication completes successfully. |
+| `onError` | `(error: unknown) => void` | Called when authentication fails. |
+
+## Signing
+
+Control whether transactions and signing requests show a confirmation UI. To display the confirmation UI, mount the [`<SignatureRequest />`](/wallets/react-kit/features/transaction-signing) component in your app.
+
+```tsx
+zeroDevWallet({
+  projectId: '...',
+  chains: [sepolia],
+  config: {
+    signing: {
+      mode: 'prompt',
+    },
+  },
+})
+```
+
+### `config.signing`
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `"prompt"` or `"background"` | `"prompt"` | `prompt` shows confirmation UI. `background` skips it. |
+| `methods` | `RequestMethod[]` | `eth_sendTransaction`, `wallet_sendTransaction`, `wallet_sendCalls`, `personal_sign`, `eth_signTypedData_v4` | Which RPC methods trigger the confirmation UI. |
+
+### Background mode
+
+Set `mode: 'background'` to disable the signing gate entirely. Transactions execute immediately without confirmation UI.
+
+```tsx
+zeroDevWallet({
+  projectId: '...',
+  chains: [sepolia],
+  config: {
+    signing: { mode: 'background' },
+  },
+})
+```

docs/pages/wallets/react-kit/features/authentication.mdx

@@ -0,0 +1,86 @@
+# Authentication
+
+Sign user in with email, Google, passkey, and more. The `<AuthFlow />`
+component sits in your tree and renders the right auth screen for the
+current step.
+
+## Import
+
+```tsx
+import { AuthFlow } from '@zerodev/wallet-react-kit'
+```
+
+## Configure auth
+
+Pass an `auth` block to the connector to enable authentication:
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+  projectId: '...',
+  chains: [sepolia],
+  config: {
+    auth: {
+      magicLinkBaseUrl: 'https://yourdomain.com/auth/verify',
+      enabledMethods: ['email', 'google', 'passkey'],
+      termsAndConditionsUrl: 'https://yourdomain.com/terms',
+      privacyPolicyUrl: 'https://yourdomain.com/privacy',
+      onSuccess: () => {
+        // user is authenticated
+      },
+      onError: (error) => {
+        // auth failed
+      },
+    },
+  },
+})
+```
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `magicLinkBaseUrl` | `string` | The URL the magic link points to. Your app should call the verification handler at this path. |
+| `enabledMethods` | `AuthMethod[]` | Which methods to offer: `'email'`, `'google'`, `'passkey'`, `'injected-wallet'`. |
+| `termsAndConditionsUrl` | `string` (optional) | URL for your terms and conditions page. When set (alone or with `privacyPolicyUrl`), the auth UI shows a required agreement checkbox before the user can continue. |
+| `privacyPolicyUrl` | `string` (optional) | URL for your privacy policy page. When set (alone or with `termsAndConditionsUrl`), the auth UI shows a required agreement checkbox before the user can continue. |
+| `onSuccess` | `() => void` | Called when authentication completes successfully. |
+| `onError` | `(error: unknown) => void` | Called when authentication fails. |
+
+## Usage
+
+Mount the component once, anywhere in your tree. It renders the active
+auth screen when the user is signing in and renders nothing otherwise.
+Trigger the flow with wagmi's `useConnect`:
+
+```tsx
+import { AuthFlow } from '@zerodev/wallet-react-kit'
+import { useConnect } from 'wagmi'
+
+function App() {
+  const { connect, connectors } = useConnect()
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => connect({ connector: connectors[0] })}
+      >
+        Connect
+      </button>
+      <AuthFlow />
+    </>
+  )
+}
+```
+
+`connect()` triggers `eth_requestAccounts` under the hood, which kicks
+off the auth flow. The flow completes when the user is authenticated,
+at which point `onSuccess` fires.
+
+To build a custom auth UI instead of using `<AuthFlow />`, read state
+directly with the [`useAuth`](/wallets/react-kit/hooks/use-auth) hook.
+
+## Live demo
+
+Try `<AuthFlow />` end-to-end at
+[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/).

docs/pages/wallets/react-kit/features/transaction-signing.mdx

@@ -0,0 +1,68 @@
+# Transaction Signing
+
+Show users what they're signing before it happens. The
+`<SignatureRequest />` component sits in your tree and intercepts signing
+RPC calls, giving the user a chance to review and approve or reject
+before the underlying call proceeds.
+
+## Import
+
+```tsx
+import { SignatureRequest } from '@zerodev/wallet-react-kit'
+```
+
+## Configure transaction signing
+
+Signing confirmation is on by default — no config required. Pass a
+`signing` block to the connector if you want to customize the behavior:
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+
+zeroDevWallet({
+  projectId: '...',
+  chains: [sepolia],
+  config: {
+    signing: {
+      mode: 'prompt',
+    },
+  },
+})
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `mode` | `"prompt"` or `"background"` | `"prompt"` | `prompt` shows the confirmation UI. `background` skips it and lets calls go through immediately. |
+| `methods` | `RequestMethod[]` | `eth_sendTransaction`, `wallet_sendTransaction`, `wallet_sendCalls`, `personal_sign`, `eth_signTypedData_v4` | Which RPC methods trigger the confirmation UI. |
+
+## Usage
+
+Mount the component once, anywhere in your tree. When a signing call
+comes in, the confirmation UI appears.
+
+```tsx
+import { SignatureRequest } from '@zerodev/wallet-react-kit'
+import { useSendTransaction } from 'wagmi'
+
+function App() {
+  const { sendTransaction } = useSendTransaction()
+
+  return (
+    <>
+      <button onClick={() => sendTransaction({ to: '0x...', value: 100n })}>
+        Send
+      </button>
+      <SignatureRequest />
+    </>
+  )
+}
+```
+
+No props needed. When there's nothing pending, the component renders
+nothing.
+
+## Live demo
+
+Try `<SignatureRequest />` end-to-end at
+[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/) —
+sign in, then trigger a transaction from the dashboard.

docs/pages/wallets/react-kit/getting-started.mdx

@@ -0,0 +1,67 @@
+# Getting Started
+
+`@zerodev/wallet-react-kit` is the React UI layer for the ZeroDev
+Wallet SDK. It ships an enhanced wagmi connector and drop-in components
+for the most common wallet flows, built on wagmi so it slots into a
+standard wagmi setup.
+
+## Installation
+
+```bash
+pnpm add @zerodev/wallet-react-kit wagmi viem @tanstack/react-query
+```
+
+## Setup
+
+### 1. Create a wagmi config with the kit connector
+
+```tsx
+import { zeroDevWallet } from '@zerodev/wallet-react-kit'
+import { createConfig, http } from 'wagmi'
+import { sepolia } from 'wagmi/chains'
+
+export const config = createConfig({
+  chains: [sepolia],
+  connectors: [
+    zeroDevWallet({
+      projectId: 'your-project-id',
+      chains: [sepolia],
+    }),
+  ],
+  transports: {
+    [sepolia.id]: http(),
+  },
+})
+```
+
+
+### 2. Import the kit's stylesheet
+
+Once, anywhere in your app entry (e.g. `main.tsx`):
+
+```tsx
+import '@zerodev/wallet-react-kit/styles.css'
+```
+
+This stylesheet contains the styles for the kit's components. Without
+it, components render unstyled.
+
+### 3. Wrap your app with providers
+
+```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { config } from './wagmi'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <WagmiProvider config={config}>
+        <YourApp />
+      </WagmiProvider>
+    </QueryClientProvider>
+  )
+}
+```

docs/pages/wallets/react-kit/hooks/use-auth.mdx

@@ -0,0 +1,74 @@
+# useAuth
+
+Access the auth flow state. Use this to build a custom auth UI instead
+of the default `<AuthFlow />`, or to react to auth state changes
+elsewhere in your app.
+
+## Import
+
+```tsx
+import { useAuth } from '@zerodev/wallet-react-kit'
+```
+
+## Usage
+
+```tsx
+function MyCustomAuth() {
+  const { step, email, enabledMethods, goToStep, setEmail } = useAuth()
+
+  if (step === 'sign-up') {
+    return (
+      <form
+        onSubmit={(e) => {
+          e.preventDefault()
+          goToStep('email-verification')
+        }}
+      >
+        <input
+          value={email ?? ''}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <button type="submit">Continue</button>
+      </form>
+    )
+  }
+
+  return null
+}
+```
+
+## Return value
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `step` | `AuthStep \| null` | The current step in the auth flow. `null` means nothing should render yet. |
+| `email` | `string \| null` | The email entered by the user, if any. |
+| `otpId` | `string \| null` | The id of the active OTP challenge, if any. |
+| `enabledMethods` | `AuthMethod[]` | Methods enabled by `config.auth.enabledMethods`. |
+| `config` | `AuthConfig \| null` | The full auth config passed to the connector. |
+| `goToStep` | `(step: AuthStep \| null) => void` | Move the flow to a specific step (or `null` to render nothing). |
+| `goBack` | `(() => void) \| null` | Go back to the previous step. `null` when there's no previous step. |
+| `reset` | `() => void` | Reset the flow to its initial state. |
+| `setEmail` | `(email: string) => void` | Set the email value. |
+| `setOtpId` | `(otpId: string) => void` | Set the OTP challenge id. |
+
+### `AuthStep`
+
+```ts
+type AuthStep =
+  | 'sign-up'
+  | 'email-verification'
+  | 'otp-input'
+  | 'verifying-otp'
+  | 'passkey-prompt'
+  | 'oauth-in-progress'
+  | 'wallet-selection'
+  | 'authenticated'
+  | 'error'
+```
+
+### `AuthMethod`
+
+```ts
+type AuthMethod = 'email' | 'google' | 'passkey' | 'injected-wallet'
+```