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

package/src/hooks/useGetUserEmail.ts

@@ -0,0 +1,52 @@
+'use client'
+
+import {
+  type UseQueryOptions,
+  type UseQueryResult,
+  useQuery,
+} from '@tanstack/react-query'
+import { type Config, type ResolvedRegister, useConfig } from 'wagmi'
+import { getUserEmail } from '../actions.js'
+
+type ConfigParameter<config extends Config = Config> = {
+  config?: Config | config | undefined
+}
+
+/**
+ * Hook to fetch user email address
+ */
+export function useGetUserEmail<
+  config extends Config = ResolvedRegister['config'],
+>(parameters: useGetUserEmail.Parameters<config>): useGetUserEmail.ReturnType {
+  const { query } = parameters
+  const config = useConfig(parameters)
+
+  return useQuery({
+    ...query,
+    queryKey: ['getUserEmail'],
+    queryFn: async () => {
+      return getUserEmail(config)
+    },
+    enabled: Boolean(config),
+  })
+}
+
+export declare namespace useGetUserEmail {
+  type Parameters<config extends Config = Config> = ConfigParameter<config> & {
+    query?:
+      | Omit<
+          UseQueryOptions<
+            getUserEmail.ReturnType,
+            getUserEmail.ErrorType,
+            getUserEmail.ReturnType
+          >,
+          'queryKey' | 'queryFn'
+        >
+      | undefined
+  }
+
+  type ReturnType = UseQueryResult<
+    getUserEmail.ReturnType,
+    getUserEmail.ErrorType
+  >
+}

package/src/index.ts

@@ -1,14 +1,21 @@
 export type { ZeroDevWalletConnectorParams } from './connector.js'
 export { zeroDevWallet } from './connector.js'
 export { useAuthenticateOAuth } from './hooks/useAuthenticateOAuth.js'
+export { useExportPrivateKey } from './hooks/useExportPrivateKey.js'
 export { useExportWallet } from './hooks/useExportWallet.js'
+export { useGetUserEmail } from './hooks/useGetUserEmail.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 { OAuthMessageData, OAuthProvider } from './oauth.js'
+export {
+  buildBackendOAuthUrl,
+  handleOAuthCallback,
+  listenForOAuthMessage,
+  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

@@ -7,56 +7,17 @@ export const OAUTH_PROVIDERS = {
 export type OAuthProvider =
   (typeof OAUTH_PROVIDERS)[keyof typeof OAUTH_PROVIDERS]
 
-export type OAuthConfig = {
-  googleClientId?: string
-  redirectUri: string
-}
-
-export type OAuthFlowParams = {
+export type BackendOAuthFlowParams = {
   provider: OAuthProvider
-  clientId: string
-  redirectUri: string
-  nonce: string
-  state?: Record<string, string>
+  backendUrl: string
+  projectId: string
+  publicKey: string
+  returnTo: 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
@@ -76,49 +37,107 @@ export function openOAuthPopup(url: string): Window | null {
   return authWindow
 }
 
-export function extractOAuthToken(url: string): string | null {
-  const hashParams = new URLSearchParams(url.split('#')[1])
-  let idToken = hashParams.get('id_token')
+export function generateOAuthNonce(publicKey: string): string {
+  return sha256(publicKey as Hex).replace(/^0x/, '')
+}
 
-  if (!idToken) {
-    const queryParams = new URLSearchParams(url.split('?')[1])
-    idToken = queryParams.get('id_token')
+/**
+ * Build OAuth URL that redirects to backend's OAuth endpoint
+ * The backend handles PKCE, client credentials, and token exchange
+ */
+export function buildBackendOAuthUrl(params: BackendOAuthFlowParams): string {
+  const { provider, backendUrl, projectId, publicKey, returnTo } = params
+
+  if (provider !== OAUTH_PROVIDERS.GOOGLE) {
+    throw new Error(`Unsupported OAuth provider: ${provider}`)
   }
 
-  return idToken
+  const oauthUrl = new URL(`${backendUrl}/oauth/google/login`)
+  oauthUrl.searchParams.set('project_id', projectId)
+  oauthUrl.searchParams.set('pub_key', publicKey.replace(/^0x/, ''))
+  oauthUrl.searchParams.set('return_to', returnTo)
+
+  return oauthUrl.toString()
 }
 
-export function pollOAuthPopup(
+export type OAuthMessageData = {
+  type: 'oauth_success' | 'oauth_error'
+  error?: string
+}
+
+/**
+ * Listen for OAuth completion via postMessage from popup
+ * The popup sends a message when it detects a successful redirect
+ */
+export function listenForOAuthMessage(
   authWindow: Window,
-  originUrl: string,
-  onSuccess: (token: string) => void,
+  expectedOrigin: string,
+  onSuccess: () => 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
+): () => void {
+  let cleaned = false
+
+  const handleMessage = (event: MessageEvent<OAuthMessageData>) => {
+    // Only trust messages from expected origin
+    if (event.origin !== expectedOrigin) return
+    if (!event.data || typeof event.data !== 'object') return
+
+    if (event.data.type === 'oauth_success') {
+      cleanup()
+      onSuccess()
+    } else if (event.data.type === 'oauth_error') {
+      cleanup()
+      onError(new Error(event.data.error || 'OAuth authentication failed'))
+    }
+  }
+
+  const checkWindowClosed = setInterval(() => {
+    if (authWindow.closed) {
+      cleanup()
+      onError(new Error('Authentication window was closed'))
     }
   }, 500)
+
+  const cleanup = () => {
+    if (cleaned) return
+    cleaned = true
+    window.removeEventListener('message', handleMessage)
+    clearInterval(checkWindowClosed)
+  }
+
+  window.addEventListener('message', handleMessage)
+
+  return cleanup
 }
 
-export function generateOAuthNonce(publicKey: string): string {
-  return sha256(publicKey as Hex).replace(/^0x/, '')
+/**
+ * Handle OAuth callback on the return page
+ * Call this on the page that receives the OAuth redirect
+ * It sends a postMessage to the opener and closes the window
+ */
+export function handleOAuthCallback(successParam = 'oauth_success'): boolean {
+  const urlParams = new URLSearchParams(window.location.search)
+  const isSuccess = urlParams.get(successParam) === 'true'
+  const error = urlParams.get('error')
+
+  if (window.opener) {
+    if (isSuccess) {
+      window.opener.postMessage(
+        { type: 'oauth_success' } satisfies OAuthMessageData,
+        window.location.origin,
+      )
+      window.close()
+      return true
+    }
+    if (error) {
+      window.opener.postMessage(
+        { type: 'oauth_error', error } satisfies OAuthMessageData,
+        window.location.origin,
+      )
+      window.close()
+      return false
+    }
+  }
+
+  return false
 }

package/src/provider.ts

@@ -115,7 +115,10 @@ export function createProvider({
 
     async request({ method, params }: { method: string; params?: any[] }) {
       const state = store.getState()
-      const activeChainId = state.chainIds[0]
+      const activeChainId = state.activeChainId
+      if (!activeChainId) {
+        throw new Error('No active chain')
+      }
 
       switch (method) {
         case 'eth_accounts': {
@@ -219,7 +222,7 @@ export function createProvider({
           const chainId_number = parseInt(chainId, 16)
 
           // Update active chain
-          store.getState().setActiveChain(chainId_number)
+          store.getState().setActiveChainId(chainId_number)
 
           // Emit chainChanged event
           emitter.emit('chainChanged', chainId)

package/src/store.ts

@@ -10,7 +10,12 @@ 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'
+
+// Internal OAuth config stored in the state (derived from connector params)
+type InternalOAuthConfig = {
+  backendUrl: string
+  projectId: string
+}
 
 export type ZeroDevWalletState = {
   // Core
@@ -19,15 +24,15 @@ export type ZeroDevWalletState = {
   session: ZeroDevWalletSession | null
 
   // Multi-chain support
-  chainIds: number[] // [activeChain, ...otherChains]
+  activeChainId: number | null
   kernelAccounts: Map<number, SmartAccount<KernelSmartAccountImplementation>>
   kernelClients: Map<number, KernelAccountClient>
 
   // Session expiry
   isExpiring: boolean
 
-  // OAuth config (optional)
-  oauthConfig: OAuthConfig | null
+  // OAuth config (derived from connector params)
+  oauthConfig: InternalOAuthConfig | null
 
   // Actions
   setWallet: (wallet: ZeroDevWalletSDK) => void
@@ -38,9 +43,9 @@ export type ZeroDevWalletState = {
   ) => void
   setKernelClient: (chainId: number, client: KernelAccountClient) => void
   setSession: (session: ZeroDevWalletSession | null) => void
-  setActiveChain: (chainId: number) => void
+  setActiveChainId: (chainId: number | null) => void
   setIsExpiring: (isExpiring: boolean) => void
-  setOAuthConfig: (config: OAuthConfig | null) => void
+  setOAuthConfig: (config: InternalOAuthConfig | null) => void
   clear: () => void
 }
 
@@ -53,7 +58,7 @@ export const createZeroDevWalletStore = () =>
           wallet: null,
           eoaAccount: null,
           session: null,
-          chainIds: [],
+          activeChainId: null,
           kernelAccounts: new Map(),
           kernelClients: new Map(),
           isExpiring: false,
@@ -78,13 +83,7 @@ export const createZeroDevWalletStore = () =>
 
           setSession: (session) => set({ session }),
 
-          setActiveChain: (chainId) => {
-            const { chainIds } = get()
-            // Move chainId to front, remove duplicates
-            set({
-              chainIds: [chainId, ...chainIds.filter((id) => id !== chainId)],
-            })
-          },
+          setActiveChainId: (chainId) => set({ activeChainId: chainId }),
 
           setIsExpiring: (isExpiring) => set({ isExpiring }),
 
@@ -97,7 +96,7 @@ export const createZeroDevWalletStore = () =>
               kernelAccounts: new Map(),
               kernelClients: new Map(),
               isExpiring: false,
-              chainIds: [],
+              activeChainId: null,
             }),
         }),
         {
@@ -105,7 +104,7 @@ export const createZeroDevWalletStore = () =>
           // Only persist session data, not clients or accounts
           partialize: (state) => ({
             session: state.session,
-            chainIds: state.chainIds,
+            activeChainId: state.activeChainId,
           }),
         },
       ),

package/src/utils/aaUtils.ts

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