diff --git a/docs/pages/wallets/react-kit/configuration.mdx b/docs/pages/wallets/react-kit/configuration.mdx new file mode 100644 index 0000000..eae2e3f --- /dev/null +++ b/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 [``](/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 [``](/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' }, + }, +}) +``` \ No newline at end of file diff --git a/docs/pages/wallets/react-kit/features/authentication.mdx b/docs/pages/wallets/react-kit/features/authentication.mdx new file mode 100644 index 0000000..e702813 --- /dev/null +++ b/docs/pages/wallets/react-kit/features/authentication.mdx @@ -0,0 +1,86 @@ +# Authentication + +Sign user in with email, Google, passkey, and more. The `` +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 ( + <> + + + + ) +} +``` + +`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 ``, read state +directly with the [`useAuth`](/wallets/react-kit/hooks/use-auth) hook. + +## Live demo + +Try `` end-to-end at +[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/). \ No newline at end of file diff --git a/docs/pages/wallets/react-kit/features/transaction-signing.mdx b/docs/pages/wallets/react-kit/features/transaction-signing.mdx new file mode 100644 index 0000000..c0d26bd --- /dev/null +++ b/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 +`` 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 ( + <> + + + + ) +} +``` + +No props needed. When there's nothing pending, the component renders +nothing. + +## Live demo + +Try `` end-to-end at +[zerodev-signer-demo.vercel.app](https://zerodev-signer-demo.vercel.app/) — +sign in, then trigger a transaction from the dashboard. \ No newline at end of file diff --git a/docs/pages/wallets/react-kit/getting-started.mdx b/docs/pages/wallets/react-kit/getting-started.mdx new file mode 100644 index 0000000..92595a3 --- /dev/null +++ b/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 ( + + + + + + ) +} +``` \ No newline at end of file diff --git a/docs/pages/wallets/react-kit/hooks/use-auth.mdx b/docs/pages/wallets/react-kit/hooks/use-auth.mdx new file mode 100644 index 0000000..8175891 --- /dev/null +++ b/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 ``, 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 ( +
{ + e.preventDefault() + goToStep('email-verification') + }} + > + setEmail(e.target.value)} + /> + +
+ ) + } + + 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' +``` \ No newline at end of file diff --git a/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx b/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx new file mode 100644 index 0000000..b235e05 --- /dev/null +++ b/docs/pages/wallets/react-kit/hooks/use-pending-request.mdx @@ -0,0 +1,38 @@ +# usePendingRequest + +Access the pending signing request state. Use this to build a custom +confirmation UI instead of the default ``, or to +show a count of queued requests in your own UI. + +## Import + +```tsx +import { usePendingRequest } from '@zerodev/wallet-react-kit' +``` + +## Usage + +```tsx +function MyCustomConfirmation() { + const { pendingRequest, confirm, reject } = usePendingRequest() + + if (!pendingRequest) return null + + return ( +
+

{pendingRequest.method}

+ + +
+ ) +} +``` + +## Return value + +| Property | Type | Description | +| --- | --- | --- | +| `pendingRequest` | `PendingRequest \| null` | The head of the pending queue — the request currently awaiting user action. `null` when the queue is empty. | +| `pendingRequests` | `PendingRequest[]` | The full pending queue. | +| `confirm` | `() => void` | Resolves the active request and removes it from the queue, letting the underlying RPC call proceed. | +| `reject` | `() => void` | Rejects the active request with `User rejected the request` and removes it from the queue. | diff --git a/vocs.config.tsx b/vocs.config.tsx index 383610a..4769851 100644 --- a/vocs.config.tsx +++ b/vocs.config.tsx @@ -233,6 +233,18 @@ const REDIRECTS: Record = { "/smart-accounts/permissions/actions/build-your-own", "/smart-wallet/permissions/1-click-trading": "/smart-accounts/permissions/1-click-trading", + + // React Kit docs moved from the standalone vocs site under + // packages/react-kit/docs into the main wallets section. + "/react-kit/getting-started": "/wallets/react-kit/getting-started", + "/react-kit/configuration": "/wallets/react-kit/configuration", + "/react-kit/features/authentication": + "/wallets/react-kit/features/authentication", + "/react-kit/features/transaction-signing": + "/wallets/react-kit/features/transaction-signing", + "/react-kit/hooks/use-auth": "/wallets/react-kit/hooks/use-auth", + "/react-kit/hooks/use-pending-request": + "/wallets/react-kit/hooks/use-pending-request", }; export default defineConfig({ @@ -752,6 +764,46 @@ export default defineConfig({ }, ], }, + { + text: "React Kit", + collapsed: true, + items: [ + { + text: "Getting Started", + link: "/wallets/react-kit/getting-started", + }, + { + text: "Configuration", + link: "/wallets/react-kit/configuration", + }, + { + text: "Features", + items: [ + { + text: "Authentication", + link: "/wallets/react-kit/features/authentication", + }, + { + text: "Transaction Signing", + link: "/wallets/react-kit/features/transaction-signing", + }, + ], + }, + { + text: "Hooks", + items: [ + { + text: "useAuth", + link: "/wallets/react-kit/hooks/use-auth", + }, + { + text: "usePendingRequest", + link: "/wallets/react-kit/hooks/use-pending-request", + }, + ], + }, + ], + }, ], }, ],