@zerodev/wallet-react 0.0.1-alpha.0 → 0.0.1-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zerodev/wallet-react
 
+## 0.0.1-alpha.1
+
+### Patch Changes
+
+- feat: changed default aaUrl to staging url
+
 ## 0.0.1-alpha.0
 
 ### Patch Changes

package/README.md

@@ -0,0 +1,269 @@
+# @zerodev/wallet-react
+
+React hooks and Wagmi connector for ZeroDev Wallet SDK with EIP-7702 gasless transactions.
+
+## Features
+
+- **Wagmi Integration** - Works seamlessly with the Wagmi ecosystem
+- **Multiple Auth Methods** - Passkey (WebAuthn), Email OTP, OAuth (Google)
+- **Gasless Transactions** - All transactions are gasless via EIP-7702
+- **Session Management** - Auto-refresh with configurable thresholds
+- **Multi-Chain** - Lazy kernel account creation per chain
+- **TypeScript** - Full type safety with proper generics
+- **React Query** - Built on TanStack Query for optimal UX
+
+## Installation
+
+```bash
+npm install @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+# or
+yarn add @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+# or
+pnpm add @zerodev/wallet-react @zerodev/wallet-core wagmi viem
+```
+
+## Quick Start
+
+### 1. Configure Wagmi
+
+```typescript
+import { createConfig, http } from 'wagmi'
+import { sepolia } from 'wagmi/chains'
+import { zeroDevWallet } from '@zerodev/wallet-react'
+
+const config = createConfig({
+  chains: [sepolia],
+  connectors: [
+    zeroDevWallet({
+      projectId: 'YOUR_PROJECT_ID',
+      aaUrl: 'YOUR_AA_PROVIDER_URL',
+      chains: [sepolia],
+      oauthConfig: {
+        googleClientId: 'YOUR_GOOGLE_CLIENT_ID',
+        redirectUri: 'http://localhost:3000',
+      },
+    })
+  ],
+  transports: {
+    [sepolia.id]: http('YOUR_RPC_URL'),
+  },
+})
+```
+
+### 2. Wrap Your App
+
+```typescript
+import { WagmiProvider } from 'wagmi'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+function App() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <YourApp />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}
+```
+
+### 3. Authenticate Users
+
+```typescript
+import { useRegisterPasskey, useAuthenticateOAuth, OAUTH_PROVIDERS } from '@zerodev/wallet-react'
+
+function LoginPage() {
+  const registerPasskey = useRegisterPasskey()
+  const authenticateOAuth = useAuthenticateOAuth()
+
+  return (
+    <>
+      <button
+        onClick={() => registerPasskey.mutate({ email: 'user@example.com' })}
+        disabled={registerPasskey.isPending}
+      >
+        {registerPasskey.isPending ? 'Registering...' : 'Register with Passkey'}
+      </button>
+
+      <button
+        onClick={() => authenticateOAuth.mutate({ provider: OAUTH_PROVIDERS.GOOGLE })}
+        disabled={authenticateOAuth.isPending}
+      >
+        {authenticateOAuth.isPending ? 'Authenticating...' : 'Login with Google'}
+      </button>
+    </>
+  )
+}
+```
+
+### 4. Use Standard Wagmi Hooks
+
+```typescript
+import { useConnection, useSendTransaction, useDisconnect } from 'wagmi'
+import { parseEther } from 'viem'
+
+function Dashboard() {
+  const { address } = useConnection()
+  const { sendTransaction } = useSendTransaction()
+  const { disconnect } = useDisconnect()
+
+  return (
+    <>
+      <p>Address: {address}</p>
+
+      <button onClick={() =>
+        sendTransaction({
+          to: '0x...',
+          value: parseEther('0.01')
+        })
+      }>
+        Send Gasless Transaction
+      </button>
+
+      <button onClick={() => disconnect()}>
+        Logout
+      </button>
+    </>
+  )
+}
+```
+
+## Authentication Methods
+
+### Passkey (WebAuthn)
+
+```typescript
+const registerPasskey = useRegisterPasskey()
+const loginPasskey = useLoginPasskey()
+
+// Register new passkey
+await registerPasskey.mutateAsync({ email: 'user@example.com' })
+
+// Login with existing passkey
+await loginPasskey.mutateAsync({ email: 'user@example.com' })
+```
+
+### OAuth (Google)
+
+```typescript
+const authenticateOAuth = useAuthenticateOAuth()
+
+// Opens popup automatically, handles token exchange
+await authenticateOAuth.mutateAsync({
+  provider: OAUTH_PROVIDERS.GOOGLE
+})
+```
+
+### Email OTP
+
+```typescript
+const sendOTP = useSendOTP()
+const verifyOTP = useVerifyOTP()
+
+// Send OTP code
+const { otpId, subOrganizationId } = await sendOTP.mutateAsync({
+  email: 'user@example.com'
+})
+
+// Verify OTP code
+await verifyOTP.mutateAsync({
+  code: '123456',
+  otpId,
+  subOrganizationId
+})
+```
+
+## Configuration Options
+
+```typescript
+type ZeroDevWalletConnectorParams = {
+  projectId: string                    // Required: Your ZeroDev project ID
+  organizationId?: string               // Optional: Turnkey organization ID
+  proxyBaseUrl?: string                 // Optional: KMS proxy URL
+  aaUrl: string                         // Required: Bundler/paymaster URL
+  chains: readonly Chain[]              // Required: Supported chains
+  rpId?: string                         // Optional: WebAuthn RP ID
+  sessionStorage?: StorageAdapter       // Optional: Custom session storage
+  autoRefreshSession?: boolean          // Optional: Auto-refresh (default: true)
+  sessionWarningThreshold?: number      // Optional: Refresh threshold in ms (default: 60000)
+  oauthConfig?: OAuthConfig             // Optional: OAuth configuration
+}
+
+type OAuthConfig = {
+  googleClientId?: string
+  redirectUri: string
+}
+```
+
+## Advanced Usage
+
+### Custom Callbacks
+
+```typescript
+const registerPasskey = useRegisterPasskey({
+  mutation: {
+    onSuccess: () => {
+      console.log('Registration successful!')
+      router.push('/dashboard')
+    },
+    onError: (error) => {
+      console.error('Registration failed:', error)
+      analytics.track('auth_failed', { method: 'passkey' })
+    }
+  }
+})
+```
+
+### Manual Session Refresh
+
+```typescript
+const refreshSession = useRefreshSession()
+
+await refreshSession.mutateAsync({})
+```
+
+### Export Wallet
+
+```typescript
+const exportWallet = useExportWallet()
+
+await exportWallet.mutateAsync({
+  iframeContainerId: 'export-container'
+})
+```
+
+## API Reference
+
+### Hooks
+
+All hooks follow the TanStack Query mutation pattern:
+
+- `useRegisterPasskey()` - Register with passkey
+- `useLoginPasskey()` - Login with passkey
+- `useAuthenticateOAuth()` - OAuth (Google popup)
+- `useSendOTP()` - Send OTP via email
+- `useVerifyOTP()` - Verify OTP code
+- `useRefreshSession()` - Manually refresh session
+- `useExportWallet()` - Export wallet seed phrase
+
+### Connector
+
+- `zeroDevWallet(params)` - Wagmi connector factory
+
+### Constants
+
+- `OAUTH_PROVIDERS.GOOGLE` - Google OAuth provider constant
+
+### Types
+
+- `OAuthProvider` - OAuth provider type
+- `OAuthConfig` - OAuth configuration type
+- `ZeroDevWalletConnectorParams` - Connector parameters
+- `ZeroDevWalletState` - Store state type
+- `ZeroDevProvider` - EIP-1193 provider type
+
+## License
+
+MIT

package/dist/_cjs/connector.js

@@ -105,12 +105,12 @@ function zeroDevWallet(params) {
                     store.getState().setKernelAccount(activeChainId, kernelAccount);
                     const kernelClient = (0, sdk_1.createKernelAccountClient)({
                         account: kernelAccount,
-                        bundlerTransport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(activeChainId, params.aaUrl)),
+                        bundlerTransport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(params.projectId, activeChainId, params.aaUrl)),
                         chain,
                         client: publicClient,
                         paymaster: (0, sdk_1.createZeroDevPaymasterClient)({
                             chain,
-                            transport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(activeChainId, params.aaUrl)),
+                            transport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(params.projectId, activeChainId, params.aaUrl)),
                         }),
                     });
                     store.getState().setKernelClient(activeChainId, kernelClient);
@@ -184,12 +184,12 @@ function zeroDevWallet(params) {
                     store.getState().setKernelAccount(chainId, kernelAccount);
                     const kernelClient = (0, sdk_1.createKernelAccountClient)({
                         account: kernelAccount,
-                        bundlerTransport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(chainId, params.aaUrl)),
+                        bundlerTransport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(params.projectId, chainId, params.aaUrl)),
                         chain,
                         client: publicClient,
                         paymaster: (0, sdk_1.createZeroDevPaymasterClient)({
                             chain,
-                            transport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(chainId, params.aaUrl)),
+                            transport: (0, viem_1.http)((0, aaUtils_js_1.getAAUrl)(params.projectId, chainId, params.aaUrl)),
                         }),
                     });
                     store.getState().setKernelClient(chainId, kernelClient);

package/dist/_cjs/constants.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZERODEV_AA_URL = void 0;
-exports.ZERODEV_AA_URL = 'https://rpc.zerodev.app/api/v3/';
+exports.ZERODEV_AA_URL = 'https://staging-meta-aa-provider.onrender.com/api/v3/';

package/dist/_cjs/utils/aaUtils.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAAUrl = getAAUrl;
 const constants_js_1 = require("../constants.js");
-function getAAUrl(chainId, aaUrl) {
-    return aaUrl || `${constants_js_1.ZERODEV_AA_URL}${chainId}/chain/${chainId}`;
+function getAAUrl(projectId, chainId, aaUrl) {
+    return aaUrl || `${constants_js_1.ZERODEV_AA_URL}${projectId}/chain/${chainId}`;
 }

package/dist/_esm/connector.js

@@ -118,12 +118,12 @@ export function zeroDevWallet(params) {
                     // Create and store kernel client for transactions
                     const kernelClient = createKernelAccountClient({
                         account: kernelAccount,
-                        bundlerTransport: http(getAAUrl(activeChainId, params.aaUrl)),
+                        bundlerTransport: http(getAAUrl(params.projectId, activeChainId, params.aaUrl)),
                         chain,
                         client: publicClient,
                         paymaster: createZeroDevPaymasterClient({
                             chain,
-                            transport: http(getAAUrl(activeChainId, params.aaUrl)),
+                            transport: http(getAAUrl(params.projectId, activeChainId, params.aaUrl)),
                         }),
                     });
                     store.getState().setKernelClient(activeChainId, kernelClient);
@@ -205,12 +205,12 @@ export function zeroDevWallet(params) {
                     store.getState().setKernelAccount(chainId, kernelAccount);
                     const kernelClient = createKernelAccountClient({
                         account: kernelAccount,
-                        bundlerTransport: http(getAAUrl(chainId, params.aaUrl)),
+                        bundlerTransport: http(getAAUrl(params.projectId, chainId, params.aaUrl)),
                         chain,
                         client: publicClient,
                         paymaster: createZeroDevPaymasterClient({
                             chain,
-                            transport: http(getAAUrl(chainId, params.aaUrl)),
+                            transport: http(getAAUrl(params.projectId, chainId, params.aaUrl)),
                         }),
                     });
                     store.getState().setKernelClient(chainId, kernelClient);

package/dist/_esm/constants.js

@@ -1 +1 @@
-export const ZERODEV_AA_URL = 'https://rpc.zerodev.app/api/v3/';
+export const ZERODEV_AA_URL = 'https://staging-meta-aa-provider.onrender.com/api/v3/';

package/dist/_esm/utils/aaUtils.js

@@ -1,4 +1,4 @@
 import { ZERODEV_AA_URL } from '../constants.js';
-export function getAAUrl(chainId, aaUrl) {
-    return aaUrl || `${ZERODEV_AA_URL}${chainId}/chain/${chainId}`;
+export function getAAUrl(projectId, chainId, aaUrl) {
+    return aaUrl || `${ZERODEV_AA_URL}${projectId}/chain/${chainId}`;
 }

package/dist/_types/connector.d.ts

@@ -6,7 +6,7 @@ export type ZeroDevWalletConnectorParams = {
     projectId: string;
     organizationId?: string;
     proxyBaseUrl?: string;
-    aaUrl: string;
+    aaUrl?: string;
     chains: readonly Chain[];
     rpId?: string;
     sessionStorage?: StorageAdapter;

package/dist/_types/connector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"connector.d.ts","sourceRoot":"","sources":["../../src/connector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,aAAa,CAAA;AAOrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,OAAO,EAAE,KAAK,KAAK,EAA4B,MAAM,MAAM,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,SAAS,KAAK,EAAE,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,4BAA4B,GACnC,iBAAiB,CAiTnB"}
+{"version":3,"file":"connector.d.ts","sourceRoot":"","sources":["../../src/connector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAmB,MAAM,aAAa,CAAA;AAOrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1D,OAAO,EAAE,KAAK,KAAK,EAA4B,MAAM,MAAM,CAAA;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAK7C,MAAM,MAAM,4BAA4B,GAAG;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,SAAS,KAAK,EAAE,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,cAAc,CAAA;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAED,wBAAgB,aAAa,CAC3B,MAAM,EAAE,4BAA4B,GACnC,iBAAiB,CAyTnB"}

package/dist/_types/constants.d.ts

@@ -1,2 +1,2 @@
-export declare const ZERODEV_AA_URL = "https://rpc.zerodev.app/api/v3/";
+export declare const ZERODEV_AA_URL = "https://staging-meta-aa-provider.onrender.com/api/v3/";
 //# sourceMappingURL=constants.d.ts.map

package/dist/_types/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,oCAAoC,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,0DAC8B,CAAA"}

package/dist/_types/utils/aaUtils.d.ts

@@ -1,2 +1,2 @@
-export declare function getAAUrl(chainId: number, aaUrl?: string): string;
+export declare function getAAUrl(projectId: string, chainId: number, aaUrl?: string): string;
 //# sourceMappingURL=aaUtils.d.ts.map

package/dist/_types/utils/aaUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"aaUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/aaUtils.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAEvD"}
+{"version":3,"file":"aaUtils.d.ts","sourceRoot":"","sources":["../../../src/utils/aaUtils.ts"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAE1E"}