@zerodev/wallet-react 0.0.1-alpha.0

package/src/connector.ts

@@ -0,0 +1,336 @@
+import { type CreateConnectorFn, createConnector } from '@wagmi/core'
+import {
+  createKernelAccount,
+  createKernelAccountClient,
+  createZeroDevPaymasterClient,
+} from '@zerodev/sdk'
+import { getEntryPoint, KERNEL_V3_3 } from '@zerodev/sdk/constants'
+import type { StorageAdapter } from '@zerodev/wallet-core'
+import { createZeroDevWallet } from '@zerodev/wallet-core'
+import { type Chain, createPublicClient, http } from 'viem'
+import type { OAuthConfig } from './oauth.js'
+import { createProvider } from './provider.js'
+import { createZeroDevWalletStore } from './store.js'
+import { getAAUrl } from './utils/aaUtils.js'
+
+export type ZeroDevWalletConnectorParams = {
+  projectId: string
+  organizationId?: string
+  proxyBaseUrl?: string
+  aaUrl: string // Bundler/paymaster URL
+  chains: readonly Chain[]
+  rpId?: string
+  sessionStorage?: StorageAdapter
+  autoRefreshSession?: boolean
+  sessionWarningThreshold?: number
+  oauthConfig?: OAuthConfig
+}
+
+export function zeroDevWallet(
+  params: ZeroDevWalletConnectorParams,
+): CreateConnectorFn {
+  type Provider = ReturnType<typeof createProvider>
+  type Properties = {
+    connect<withCapabilities extends boolean = false>(parameters?: {
+      chainId?: number | undefined
+      isReconnecting?: boolean | undefined
+      withCapabilities?: withCapabilities | boolean | undefined
+    }): Promise<{
+      accounts: withCapabilities extends true
+        ? readonly {
+            address: `0x${string}`
+            capabilities: Record<string, unknown>
+          }[]
+        : readonly `0x${string}`[]
+      chainId: number
+    }>
+    getStore(): Promise<ReturnType<typeof createZeroDevWalletStore>>
+  }
+
+  return createConnector<Provider, Properties>((wagmiConfig) => {
+    let store: ReturnType<typeof createZeroDevWalletStore>
+    let provider: ReturnType<typeof createProvider>
+    let initPromise: Promise<void> | undefined
+
+    // Get transports from Wagmi config (uses user's RPC URLs)
+    const transports = wagmiConfig.transports
+
+    // Lazy initialization - only runs on client side
+    const initialize = async () => {
+      initPromise ??= (async () => {
+        console.log('Initializing ZeroDevWallet connector...')
+
+        // Initialize wallet SDK
+        const wallet = await createZeroDevWallet({
+          projectId: params.projectId,
+          ...(params.organizationId && {
+            organizationId: params.organizationId,
+          }),
+          ...(params.proxyBaseUrl && { proxyBaseUrl: params.proxyBaseUrl }),
+          ...(params.sessionStorage && {
+            sessionStorage: params.sessionStorage,
+          }),
+          ...(params.rpId && { rpId: params.rpId }),
+        })
+
+        // Create store
+        store = createZeroDevWalletStore()
+        store.getState().setWallet(wallet)
+
+        // Initialize chainIds
+        const chainIds = params.chains.map((c) => c.id)
+        store.setState({ chainIds })
+
+        // Store OAuth config if provided
+        if (params.oauthConfig) {
+          store.getState().setOAuthConfig(params.oauthConfig)
+        }
+
+        // Create EIP-1193 provider
+        provider = createProvider({
+          store,
+          config: params,
+          chains: Array.from(params.chains),
+        })
+
+        // Check for existing session (page reload)
+        const session = await wallet.getSession()
+        if (session) {
+          console.log('Found existing session, restoring...')
+          const eoaAccount = await wallet.toAccount()
+          store.getState().setEoaAccount(eoaAccount)
+          store.getState().setSession(session)
+        }
+
+        console.log('ZeroDevWallet connector initialized')
+      })()
+
+      return initPromise
+    }
+
+    return {
+      id: 'zerodev-wallet',
+      name: 'ZeroDevWallet',
+      type: 'injected' as const,
+
+      async setup() {
+        // Initialize on client-side mount (setup only runs client-side)
+        if (typeof window !== 'undefined') {
+          await initialize()
+        }
+      },
+
+      async connect({ chainId, ...rest } = {}) {
+        const withCapabilities =
+          ('withCapabilities' in rest && rest.withCapabilities) || false
+        const isReconnecting =
+          ('isReconnecting' in rest && rest.isReconnecting) || false
+
+        // Ensure wallet is initialized (lazy init on first connect)
+        await initialize()
+
+        console.log(
+          isReconnecting
+            ? 'Reconnecting ZeroDevWallet...'
+            : 'Connecting ZeroDevWallet...',
+        )
+        const state = store.getState()
+
+        // Determine active chain
+        const activeChainId = chainId || state.chainIds[0]
+        if (!activeChainId) {
+          throw new Error('No chain configured')
+        }
+
+        // If reconnecting and already have kernel account, return immediately
+        if (isReconnecting && state.kernelAccounts.has(activeChainId)) {
+          const kernelAccount = state.kernelAccounts.get(activeChainId)
+          if (kernelAccount?.address) {
+            console.log('Already connected:', kernelAccount.address)
+            return {
+              accounts: [kernelAccount.address] as never,
+              chainId: activeChainId,
+            }
+          }
+        }
+
+        if (!state.eoaAccount) {
+          throw new Error(
+            'Not authenticated. Please authenticate first using passkey, OAuth, or OTP.',
+          )
+        }
+
+        // Create KernelAccount for this chain if doesn't exist
+        if (!state.kernelAccounts.has(activeChainId)) {
+          const chain = params.chains.find((c) => c.id === activeChainId)
+          if (!chain) {
+            throw new Error(`Chain ${activeChainId} not found in config`)
+          }
+
+          // Use transport from Wagmi config (has user's RPC URL)
+          const transport = transports?.[activeChainId] ?? http()
+          const publicClient = createPublicClient({
+            chain,
+            transport,
+          })
+
+          console.log(`Creating kernel account for chain ${activeChainId}...`)
+          const kernelAccount = await createKernelAccount(publicClient, {
+            entryPoint: getEntryPoint('0.7'),
+            kernelVersion: KERNEL_V3_3,
+            eip7702Account: state.eoaAccount,
+          })
+
+          // Store kernel account for this chain
+          store.getState().setKernelAccount(activeChainId, kernelAccount)
+
+          // Create and store kernel client for transactions
+          const kernelClient = createKernelAccountClient({
+            account: kernelAccount,
+            bundlerTransport: http(getAAUrl(activeChainId, params.aaUrl)),
+            chain,
+            client: publicClient,
+            paymaster: createZeroDevPaymasterClient({
+              chain,
+              transport: http(getAAUrl(activeChainId, params.aaUrl)),
+            }),
+          })
+          store.getState().setKernelClient(activeChainId, kernelClient)
+        }
+
+        // Set as active chain
+        store.getState().setActiveChain(activeChainId)
+
+        // Get fresh state after updates
+        const freshState = store.getState()
+        const kernelAccount = freshState.kernelAccounts.get(activeChainId)!
+
+        console.log('ZeroDevWallet connected:', kernelAccount.address)
+
+        const address = kernelAccount.address
+        return {
+          accounts: (withCapabilities
+            ? [{ address, capabilities: {} }]
+            : [address]) as never,
+          chainId: activeChainId,
+        }
+      },
+
+      async disconnect() {
+        console.log('Disconnecting ZeroDevWallet...')
+        if (!store) return
+        const wallet = store.getState().wallet
+
+        // Cleanup provider (clears timers)
+        provider?.destroy()
+
+        await wallet?.logout()
+        store.getState().clear()
+      },
+
+      async getAccounts() {
+        if (!store) return []
+        const { eoaAccount, kernelAccounts, chainIds } = store.getState()
+
+        // Return EOA address if we have it (EIP-7702: EOA address = kernel address)
+        if (eoaAccount) {
+          return [eoaAccount.address]
+        }
+
+        // Fallback: check kernel accounts
+        const activeAccount = chainIds[0]
+          ? kernelAccounts.get(chainIds[0])
+          : null
+        return activeAccount ? [activeAccount.address] : []
+      },
+
+      async getChainId() {
+        if (!store) return params.chains[0].id
+        return store.getState().chainIds[0] || params.chains[0].id
+      },
+
+      async getProvider() {
+        await initialize()
+        return provider
+      },
+
+      async switchChain({ chainId }) {
+        await initialize()
+        console.log(`Switching to chain ${chainId}...`)
+        const state = store.getState()
+
+        if (!state.eoaAccount) {
+          throw new Error('Not authenticated')
+        }
+
+        // Update active chain
+        store.getState().setActiveChain(chainId)
+
+        // Create kernel account for new chain if doesn't exist
+        if (!state.kernelAccounts.has(chainId)) {
+          const chain = params.chains.find((c) => c.id === chainId)
+          if (!chain) {
+            throw new Error(`Chain ${chainId} not found in config`)
+          }
+
+          // Use transport from Wagmi config (has user's RPC URL)
+          const transport = transports?.[chainId] ?? http()
+          const publicClient = createPublicClient({
+            chain,
+            transport,
+          })
+
+          console.log(`Creating kernel account for chain ${chainId}...`)
+          const kernelAccount = await createKernelAccount(publicClient, {
+            entryPoint: getEntryPoint('0.7'),
+            kernelVersion: KERNEL_V3_3,
+            eip7702Account: state.eoaAccount,
+          })
+
+          store.getState().setKernelAccount(chainId, kernelAccount)
+          const kernelClient = createKernelAccountClient({
+            account: kernelAccount,
+            bundlerTransport: http(getAAUrl(chainId, params.aaUrl)),
+            chain,
+            client: publicClient,
+            paymaster: createZeroDevPaymasterClient({
+              chain,
+              transport: http(getAAUrl(chainId, params.aaUrl)),
+            }),
+          })
+          store.getState().setKernelClient(chainId, kernelClient)
+        }
+
+        return params.chains.find((c) => c.id === chainId)!
+      },
+
+      async isAuthorized() {
+        // Just check if we have a session - don't initialize here (too slow)
+        if (!store) return false
+        return !!store.getState().eoaAccount
+      },
+
+      // Custom method for hooks to access store
+      async getStore() {
+        await initialize()
+        return store
+      },
+
+      // Event listeners
+      onAccountsChanged() {
+        // Not applicable for this wallet type
+      },
+      onChainChanged() {
+        // Handled by Wagmi
+      },
+      onConnect() {
+        // Handled by Wagmi
+      },
+      onDisconnect() {
+        console.log('Disconnect event')
+        provider?.destroy()
+        store.getState().clear()
+      },
+    }
+  })
+}

package/src/constants.ts

@@ -0,0 +1 @@
+export const ZERODEV_AA_URL = 'https://rpc.zerodev.app/api/v3/'

package/src/hooks/useAuthenticateOAuth.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { authenticateOAuth } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to authenticate with OAuth (opens popup)
+ */
+export function useAuthenticateOAuth<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useAuthenticateOAuth.Parameters<config, context> = {},
+): useAuthenticateOAuth.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: authenticateOAuth.Parameters) {
+      return authenticateOAuth(config, variables)
+    },
+    mutationKey: ['authenticateOAuth'],
+  })
+}
+
+export declare namespace useAuthenticateOAuth {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          authenticateOAuth.ReturnType,
+          authenticateOAuth.ErrorType,
+          authenticateOAuth.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    authenticateOAuth.ReturnType,
+    authenticateOAuth.ErrorType,
+    authenticateOAuth.Parameters,
+    context
+  >
+}

package/src/hooks/useExportWallet.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { exportWallet } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to export wallet seed phrase
+ */
+export function useExportWallet<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useExportWallet.Parameters<config, context> = {},
+): useExportWallet.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: exportWallet.Parameters) {
+      return exportWallet(config, variables)
+    },
+    mutationKey: ['exportWallet'],
+  })
+}
+
+export declare namespace useExportWallet {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          exportWallet.ReturnType,
+          exportWallet.ErrorType,
+          exportWallet.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    exportWallet.ReturnType,
+    exportWallet.ErrorType,
+    exportWallet.Parameters,
+    context
+  >
+}

package/src/hooks/useLoginPasskey.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { loginPasskey } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to login with passkey
+ */
+export function useLoginPasskey<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useLoginPasskey.Parameters<config, context> = {},
+): useLoginPasskey.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: loginPasskey.Parameters) {
+      return loginPasskey(config, variables)
+    },
+    mutationKey: ['loginPasskey'],
+  })
+}
+
+export declare namespace useLoginPasskey {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          loginPasskey.ReturnType,
+          loginPasskey.ErrorType,
+          loginPasskey.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    loginPasskey.ReturnType,
+    loginPasskey.ErrorType,
+    loginPasskey.Parameters,
+    context
+  >
+}

package/src/hooks/useRefreshSession.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { refreshSession } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to manually refresh session
+ */
+export function useRefreshSession<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useRefreshSession.Parameters<config, context> = {},
+): useRefreshSession.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: refreshSession.Parameters) {
+      return refreshSession(config, variables)
+    },
+    mutationKey: ['refreshSession'],
+  })
+}
+
+export declare namespace useRefreshSession {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          refreshSession.ReturnType,
+          refreshSession.ErrorType,
+          refreshSession.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    refreshSession.ReturnType,
+    refreshSession.ErrorType,
+    refreshSession.Parameters,
+    context
+  >
+}

package/src/hooks/useRegisterPasskey.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { registerPasskey } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to register with passkey
+ */
+export function useRegisterPasskey<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useRegisterPasskey.Parameters<config, context> = {},
+): useRegisterPasskey.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: registerPasskey.Parameters) {
+      return registerPasskey(config, variables)
+    },
+    mutationKey: ['registerPasskey'],
+  })
+}
+
+export declare namespace useRegisterPasskey {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          registerPasskey.ReturnType,
+          registerPasskey.ErrorType,
+          registerPasskey.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    registerPasskey.ReturnType,
+    registerPasskey.ErrorType,
+    registerPasskey.Parameters,
+    context
+  >
+}

package/src/hooks/useSendOTP.ts

@@ -0,0 +1,57 @@
+'use client'
+
+import {
+  type UseMutationOptions,
+  type UseMutationResult,
+  useMutation,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { sendOTP } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to send OTP via email
+ */
+export function useSendOTP<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useSendOTP.Parameters<config, context> = {},
+): useSendOTP.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: sendOTP.Parameters) {
+      return sendOTP(config, variables)
+    },
+    mutationKey: ['sendOTP'],
+  })
+}
+
+export declare namespace useSendOTP {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          sendOTP.ReturnType,
+          sendOTP.ErrorType,
+          sendOTP.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    sendOTP.ReturnType,
+    sendOTP.ErrorType,
+    sendOTP.Parameters,
+    context
+  >
+}