@zerodev/wallet-react 0.0.1-alpha.0

package/src/hooks/useVerifyOTP.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 { verifyOTP } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to verify OTP code
+ */
+export function useVerifyOTP<
+  config extends Config = ResolvedRegister['config'],
+  context = unknown,
+>(
+  parameters: useVerifyOTP.Parameters<config, context> = {},
+): useVerifyOTP.ReturnType<context> {
+  const { mutation } = parameters
+  const config = useConfig(parameters)
+
+  return useMutation({
+    ...mutation,
+    async mutationFn(variables: verifyOTP.Parameters) {
+      return verifyOTP(config, variables)
+    },
+    mutationKey: ['verifyOTP'],
+  })
+}
+
+export declare namespace useVerifyOTP {
+  type Parameters<
+    config extends Config = Config,
+    context = unknown,
+  > = ConfigParameter<config> & {
+    mutation?:
+      | UseMutationOptions<
+          verifyOTP.ReturnType,
+          verifyOTP.ErrorType,
+          verifyOTP.Parameters,
+          context
+        >
+      | undefined
+  }
+
+  type ReturnType<context = unknown> = UseMutationResult<
+    verifyOTP.ReturnType,
+    verifyOTP.ErrorType,
+    verifyOTP.Parameters,
+    context
+  >
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export type { ZeroDevWalletConnectorParams } from './connector.js'
+export { zeroDevWallet } from './connector.js'
+export { useAuthenticateOAuth } from './hooks/useAuthenticateOAuth.js'
+export { useExportWallet } from './hooks/useExportWallet.js'
+export { useLoginPasskey } from './hooks/useLoginPasskey.js'
+export { useRefreshSession } from './hooks/useRefreshSession.js'
+export { useRegisterPasskey } from './hooks/useRegisterPasskey.js'
+export { useSendOTP } from './hooks/useSendOTP.js'
+export { useVerifyOTP } from './hooks/useVerifyOTP.js'
+export type { OAuthConfig, OAuthProvider } from './oauth.js'
+export { OAUTH_PROVIDERS } from './oauth.js'
+export type { ZeroDevProvider } from './provider.js'
+export type { ZeroDevWalletState } from './store.js'
+export { createZeroDevWalletStore } from './store.js'

package/src/oauth.ts

@@ -0,0 +1,124 @@
+import { type Hex, sha256 } from 'viem'
+
+export const OAUTH_PROVIDERS = {
+  GOOGLE: 'google',
+} as const
+
+export type OAuthProvider =
+  (typeof OAUTH_PROVIDERS)[keyof typeof OAUTH_PROVIDERS]
+
+export type OAuthConfig = {
+  googleClientId?: string
+  redirectUri: string
+}
+
+export type OAuthFlowParams = {
+  provider: OAuthProvider
+  clientId: string
+  redirectUri: string
+  nonce: string
+  state?: Record<string, string>
+}
+
+const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/v2/auth'
+
+const POPUP_WIDTH = 500
+const POPUP_HEIGHT = 600
+
+export function buildOAuthUrl(params: OAuthFlowParams): string {
+  const { provider, clientId, redirectUri, nonce, state } = params
+
+  if (provider !== OAUTH_PROVIDERS.GOOGLE) {
+    throw new Error(`Unsupported OAuth provider: ${provider}`)
+  }
+
+  const authUrl = new URL(GOOGLE_AUTH_URL)
+  authUrl.searchParams.set('client_id', clientId)
+  authUrl.searchParams.set('redirect_uri', redirectUri)
+  authUrl.searchParams.set('response_type', 'id_token')
+  authUrl.searchParams.set('scope', 'openid email profile')
+  authUrl.searchParams.set('nonce', nonce)
+  authUrl.searchParams.set('prompt', 'select_account')
+
+  let stateParam = `provider=${provider}`
+  if (state) {
+    const additionalState = Object.entries(state)
+      .map(
+        ([key, value]) =>
+          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
+      )
+      .join('&')
+    if (additionalState) {
+      stateParam += `&${additionalState}`
+    }
+  }
+  authUrl.searchParams.set('state', stateParam)
+
+  return authUrl.toString()
+}
+
+export function openOAuthPopup(url: string): Window | null {
+  const width = POPUP_WIDTH
+  const height = POPUP_HEIGHT
+  const left = window.screenX + (window.innerWidth - width) / 2
+  const top = window.screenY + (window.innerHeight - height) / 2
+
+  const authWindow = window.open(
+    'about:blank',
+    '_blank',
+    `width=${width},height=${height},top=${top},left=${left},scrollbars=yes,resizable=yes`,
+  )
+
+  if (authWindow) {
+    authWindow.location.href = url
+  }
+
+  return authWindow
+}
+
+export function extractOAuthToken(url: string): string | null {
+  const hashParams = new URLSearchParams(url.split('#')[1])
+  let idToken = hashParams.get('id_token')
+
+  if (!idToken) {
+    const queryParams = new URLSearchParams(url.split('?')[1])
+    idToken = queryParams.get('id_token')
+  }
+
+  return idToken
+}
+
+export function pollOAuthPopup(
+  authWindow: Window,
+  originUrl: string,
+  onSuccess: (token: string) => void,
+  onError: (error: Error) => void,
+): void {
+  const interval = setInterval(() => {
+    try {
+      if (authWindow.closed) {
+        clearInterval(interval)
+        onError(new Error('Authentication window was closed'))
+        return
+      }
+
+      const url = authWindow.location.href || ''
+
+      if (url.startsWith(originUrl)) {
+        const token = extractOAuthToken(url)
+
+        if (token) {
+          authWindow.close()
+          clearInterval(interval)
+          onSuccess(token)
+        }
+      }
+    } catch {
+      // Ignore cross-origin errors
+    }
+  }, 500)
+}
+
+export function generateOAuthNonce(publicKey: string): string {
+  return sha256(publicKey as Hex).replace(/^0x/, '')
+}

package/src/provider.ts

@@ -0,0 +1,235 @@
+import type { KernelSmartAccountImplementation } from '@zerodev/sdk'
+import { normalizeTimestamp } from '@zerodev/wallet-core'
+import { Provider } from 'ox'
+import type { Chain, LocalAccount } from 'viem'
+import type { SmartAccount } from 'viem/account-abstraction'
+import type { ZeroDevWalletConnectorParams } from './connector.js'
+import type { createZeroDevWalletStore } from './store.js'
+
+const SESSION_WARNING_THRESHOLD_MS = 60 * 1000 // 1 minute before expiry
+
+type CreateProviderParams = {
+  store: ReturnType<typeof createZeroDevWalletStore>
+  config: ZeroDevWalletConnectorParams
+  chains: Chain[]
+}
+
+export type ZeroDevProvider = ReturnType<typeof Provider.createEmitter> & {
+  request(args: { method: string; params?: unknown[] }): Promise<unknown>
+  destroy(): void
+}
+
+export function createProvider({
+  store,
+  config,
+}: CreateProviderParams): ZeroDevProvider {
+  const emitter = Provider.createEmitter()
+  let sessionRefreshTimer: NodeJS.Timeout | null = null
+
+  // Session auto-refresh logic
+  const scheduleSessionRefresh = () => {
+    if (config.autoRefreshSession === false) return
+
+    const state = store.getState()
+    if (!state.session || !state.wallet) return
+
+    const expiryMs = normalizeTimestamp(state.session.expiry)
+    const now = Date.now()
+    const timeUntilExpiry = expiryMs - now
+
+    if (timeUntilExpiry <= 0) {
+      console.log('Session already expired')
+      return
+    }
+
+    // Clear existing timer
+    if (sessionRefreshTimer) {
+      clearTimeout(sessionRefreshTimer)
+      sessionRefreshTimer = null
+    }
+
+    const threshold =
+      config.sessionWarningThreshold || SESSION_WARNING_THRESHOLD_MS
+    const refreshAt = expiryMs - threshold
+    const timeUntilRefresh = refreshAt - now
+
+    if (timeUntilRefresh <= 0) {
+      console.log('Session expiring soon, refreshing immediately...')
+      refreshSessionNow()
+    } else {
+      console.log(`Scheduling session refresh in ${timeUntilRefresh}ms`)
+      sessionRefreshTimer = setTimeout(() => {
+        refreshSessionNow()
+      }, timeUntilRefresh)
+    }
+  }
+
+  const refreshSessionNow = async () => {
+    const state = store.getState()
+    if (!state.wallet || !state.session) return
+
+    console.log('Auto-refreshing session...')
+    store.getState().setIsExpiring(true)
+
+    try {
+      const newSession = await state.wallet.refreshSession(state.session.id)
+      console.log('Session refreshed successfully')
+      store.getState().setSession(newSession || null)
+      store.getState().setIsExpiring(false)
+
+      if (newSession) {
+        scheduleSessionRefresh()
+      }
+    } catch (err) {
+      console.error('Session refresh failed:', err)
+      store.getState().setIsExpiring(false)
+      store.getState().clear()
+    }
+  }
+
+  // Subscribe to session changes
+  const unsubscribe = store.subscribe(
+    (state) => state.session,
+    () => {
+      scheduleSessionRefresh()
+    },
+  )
+
+  // Schedule initial refresh if session exists
+  const initialSession = store.getState().session
+  if (initialSession) {
+    scheduleSessionRefresh()
+  }
+
+  return {
+    ...emitter,
+
+    destroy() {
+      // Cleanup timer and subscription
+      if (sessionRefreshTimer) {
+        clearTimeout(sessionRefreshTimer)
+        sessionRefreshTimer = null
+      }
+      unsubscribe()
+    },
+
+    async request({ method, params }: { method: string; params?: any[] }) {
+      const state = store.getState()
+      const activeChainId = state.chainIds[0]
+
+      switch (method) {
+        case 'eth_accounts': {
+          const account = state.kernelAccounts.get(activeChainId)
+          return account ? [account.address] : []
+        }
+
+        case 'eth_requestAccounts': {
+          const account = state.kernelAccounts.get(activeChainId)
+          if (!account) throw new Error('Not authenticated')
+          return [account.address]
+        }
+
+        case 'eth_chainId': {
+          return `0x${activeChainId.toString(16)}`
+        }
+
+        case 'wallet_sendTransaction':
+        case 'eth_sendTransaction': {
+          if (!params || params.length === 0) {
+            throw new Error('Missing transaction parameters')
+          }
+
+          const [tx] = params
+          const chainId = tx.chainId ? parseInt(tx.chainId, 16) : activeChainId
+
+          // Get kernel client for this chain
+          const kernelClient = store.getState().kernelClients.get(chainId)
+          if (!kernelClient) {
+            throw new Error(`No kernel client for chain ${chainId}`)
+          }
+
+          // Send gasless transaction (always UserOp for EIP-7702)
+          const hash = await kernelClient.sendTransaction({
+            calls: [
+              {
+                to: tx.to,
+                value: tx.value ? BigInt(tx.value) : 0n,
+                data: tx.data || '0x',
+              },
+            ],
+          })
+
+          return hash
+        }
+
+        case 'personal_sign': {
+          if (!params || params.length < 2) {
+            throw new Error('Missing sign parameters')
+          }
+
+          const [message] = params
+          let account:
+            | SmartAccount<KernelSmartAccountImplementation>
+            | LocalAccount
+            | undefined
+            | null = state.kernelAccounts.get(activeChainId)
+          if (
+            account &&
+            'isDeployed' in account &&
+            !(await account.isDeployed())
+          ) {
+            account = state.eoaAccount
+          }
+
+          if (!account) throw new Error('Not authenticated')
+
+          return await account.signMessage({ message })
+        }
+
+        case 'eth_signTypedData_v4': {
+          if (!params || params.length < 2) {
+            throw new Error('Missing typed data parameters')
+          }
+
+          const [, typedDataJson] = params
+          let account:
+            | SmartAccount<KernelSmartAccountImplementation>
+            | LocalAccount
+            | undefined
+            | null = state.kernelAccounts.get(activeChainId)
+          if (
+            account &&
+            'isDeployed' in account &&
+            !(await account.isDeployed())
+          ) {
+            account = state.eoaAccount
+          }
+          if (!account) throw new Error('Not authenticated')
+
+          const typedData = JSON.parse(typedDataJson)
+          return await account.signTypedData(typedData)
+        }
+
+        case 'wallet_switchEthereumChain': {
+          if (!params || params.length === 0) {
+            throw new Error('Missing chain parameter')
+          }
+
+          const [{ chainId }] = params
+          const chainId_number = parseInt(chainId, 16)
+
+          // Update active chain
+          store.getState().setActiveChain(chainId_number)
+
+          // Emit chainChanged event
+          emitter.emit('chainChanged', chainId)
+
+          return null
+        }
+
+        default:
+          throw new Error(`Method not supported: ${method}`)
+      }
+    },
+  }
+}

package/src/store.ts

@@ -0,0 +1,113 @@
+import type {
+  KernelAccountClient,
+  KernelSmartAccountImplementation,
+} from '@zerodev/sdk'
+import type {
+  ZeroDevWalletSDK,
+  ZeroDevWalletSession,
+} from '@zerodev/wallet-core'
+import type { LocalAccount } from 'viem'
+import type { SmartAccount } from 'viem/account-abstraction'
+import { create } from 'zustand'
+import { persist, subscribeWithSelector } from 'zustand/middleware'
+import type { OAuthConfig } from './oauth.js'
+
+export type ZeroDevWalletState = {
+  // Core
+  wallet: ZeroDevWalletSDK | null
+  eoaAccount: LocalAccount | null
+  session: ZeroDevWalletSession | null
+
+  // Multi-chain support
+  chainIds: number[] // [activeChain, ...otherChains]
+  kernelAccounts: Map<number, SmartAccount<KernelSmartAccountImplementation>>
+  kernelClients: Map<number, KernelAccountClient>
+
+  // Session expiry
+  isExpiring: boolean
+
+  // OAuth config (optional)
+  oauthConfig: OAuthConfig | null
+
+  // Actions
+  setWallet: (wallet: ZeroDevWalletSDK) => void
+  setEoaAccount: (account: LocalAccount | null) => void
+  setKernelAccount: (
+    chainId: number,
+    account: SmartAccount<KernelSmartAccountImplementation>,
+  ) => void
+  setKernelClient: (chainId: number, client: KernelAccountClient) => void
+  setSession: (session: ZeroDevWalletSession | null) => void
+  setActiveChain: (chainId: number) => void
+  setIsExpiring: (isExpiring: boolean) => void
+  setOAuthConfig: (config: OAuthConfig | null) => void
+  clear: () => void
+}
+
+export const createZeroDevWalletStore = () =>
+  create<ZeroDevWalletState>()(
+    subscribeWithSelector(
+      persist(
+        (set, get) => ({
+          // Initial state
+          wallet: null,
+          eoaAccount: null,
+          session: null,
+          chainIds: [],
+          kernelAccounts: new Map(),
+          kernelClients: new Map(),
+          isExpiring: false,
+          oauthConfig: null,
+
+          // Actions
+          setWallet: (wallet) => set({ wallet }),
+
+          setEoaAccount: (account) => set({ eoaAccount: account }),
+
+          setKernelAccount: (chainId, account) => {
+            const accounts = new Map(get().kernelAccounts)
+            accounts.set(chainId, account)
+            set({ kernelAccounts: accounts })
+          },
+
+          setKernelClient: (chainId, client) => {
+            const clients = new Map(get().kernelClients)
+            clients.set(chainId, client)
+            set({ kernelClients: clients })
+          },
+
+          setSession: (session) => set({ session }),
+
+          setActiveChain: (chainId) => {
+            const { chainIds } = get()
+            // Move chainId to front, remove duplicates
+            set({
+              chainIds: [chainId, ...chainIds.filter((id) => id !== chainId)],
+            })
+          },
+
+          setIsExpiring: (isExpiring) => set({ isExpiring }),
+
+          setOAuthConfig: (config) => set({ oauthConfig: config }),
+
+          clear: () =>
+            set({
+              eoaAccount: null,
+              session: null,
+              kernelAccounts: new Map(),
+              kernelClients: new Map(),
+              isExpiring: false,
+              chainIds: [],
+            }),
+        }),
+        {
+          name: 'zerodev-wallet',
+          // Only persist session data, not clients or accounts
+          partialize: (state) => ({
+            session: state.session,
+            chainIds: state.chainIds,
+          }),
+        },
+      ),
+    ),
+  )

package/src/utils/aaUtils.ts

@@ -0,0 +1,5 @@
+import { ZERODEV_AA_URL } from '../constants.js'
+
+export function getAAUrl(chainId: number, aaUrl?: string) {
+  return aaUrl || `${ZERODEV_AA_URL}${chainId}/chain/${chainId}`
+}

package/src/utils/timers.ts

@@ -0,0 +1,80 @@
+// Timer utilities for session management
+// Handles delays >24.8 days (setTimeout limit) by chunking
+
+export type TimerController = { clear: () => void }
+export type TimerMap = Record<string, TimerController>
+
+export const MAX_DELAY_MS = 2_147_483_647 // ~24.8 days
+
+function toIntMs(x: number) {
+  return Math.max(0, Math.floor(Number.isFinite(x) ? x : 0))
+}
+
+/**
+ * A drop-in replacement for `setTimeout` that supports arbitrarily long delays.
+ * Browsers clamp `setTimeout` delays to ~24.8 days. This helper safely schedules
+ * timeouts that can be months or years into the future by chunking.
+ */
+export function setCappedTimeout(
+  cb: () => void,
+  delayMs: number,
+): TimerController {
+  const target = Date.now() + toIntMs(delayMs)
+  let handle: ReturnType<typeof setTimeout> | undefined
+
+  const tick = () => {
+    const remaining = target - Date.now()
+    if (remaining <= 0) {
+      cb()
+      return
+    }
+    handle = setTimeout(tick, Math.min(MAX_DELAY_MS, remaining))
+  }
+
+  tick()
+
+  return {
+    clear() {
+      if (handle !== undefined) {
+        clearTimeout(handle)
+        handle = undefined
+      }
+    },
+  }
+}
+
+/** Replace any existing timer for `key` with `controller`. */
+export function putTimer(
+  map: TimerMap,
+  key: string,
+  controller: TimerController,
+) {
+  map[key]?.clear?.()
+  map[key] = controller
+}
+
+/** Clear a specific key (noop if missing). */
+export function clearKey(map: TimerMap, key: string) {
+  map[key]?.clear?.()
+  delete map[key]
+}
+
+/** Clear all timers in the map. */
+export function clearAll(map: TimerMap) {
+  for (const k of Object.keys(map)) {
+    map[k]?.clear?.()
+    delete map[k]
+  }
+}
+
+/**
+ * Convenience: set a capped timeout directly into the map for `key`.
+ */
+export function setCappedTimeoutInMap(
+  map: TimerMap,
+  key: string,
+  cb: () => void,
+  delayMs: number,
+) {
+  putTimer(map, key, setCappedTimeout(cb, delayMs))
+}

package/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../templates/typescript/tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}