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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerodev/wallet-react",
-  "version": "0.0.1-alpha.0",
+  "version": "0.0.1-alpha.10",
   "description": "React hooks for ZeroDev Wallet SDK",
   "sideEffects": false,
   "main": "./dist/_cjs/index.js",
@@ -30,7 +30,7 @@
     "wagmi": "^3.0.0",
     "zustand": "^5.0.3",
     "ox": "^0.3.0",
-    "@zerodev/wallet-core": "0.0.1-alpha.4"
+    "@zerodev/wallet-core": "0.0.1-alpha.9"
   },
   "devDependencies": {
     "@types/react": "^19",

package/src/actions.ts

@@ -1,11 +1,15 @@
 import type { Config, Connector } from '@wagmi/core'
 import { connect as wagmiConnect } from '@wagmi/core/actions'
+import {
+  createIframeStamper,
+  exportPrivateKey as exportPrivateKeySdk,
+  exportWallet as exportWalletSdk,
+} from '@zerodev/wallet-core'
 import type { OAuthProvider } from './oauth.js'
 import {
-  buildOAuthUrl,
-  generateOAuthNonce,
+  buildBackendOAuthUrl,
+  listenForOAuthMessage,
   openOAuthPopup,
-  pollOAuthPopup,
 } from './oauth.js'
 
 /**
@@ -111,12 +115,12 @@ export declare namespace loginPasskey {
 
 /**
  * Authenticate with OAuth (opens popup)
+ * Uses backend OAuth flow where the backend handles PKCE and token exchange
  */
 export async function authenticateOAuth(
   config: Config,
   parameters: {
     provider: OAuthProvider
-    clientId?: string
     connector?: Connector
   },
 ): Promise<void> {
@@ -129,38 +133,23 @@ export async function authenticateOAuth(
 
   if (!wallet) throw new Error('Wallet not initialized')
   if (!oauthConfig) {
-    throw new Error(
-      'OAuth is not configured. Please provide oauthConfig to zeroDevWallet connector.',
-    )
-  }
-
-  // Get client ID for the provider
-  let clientId = parameters.clientId
-  if (!clientId) {
-    clientId = oauthConfig.googleClientId
-  }
-
-  if (!clientId) {
-    throw new Error(`Client ID not configured for ${parameters.provider}`)
+    throw new Error('Wallet not initialized. Please wait for connector setup.')
   }
 
-  if (!oauthConfig.redirectUri) {
-    throw new Error('OAuth redirect URI is not configured.')
-  }
-
-  // Generate nonce from wallet public key
+  // Get wallet public key for the OAuth flow
   const publicKey = await wallet.getPublicKey()
   if (!publicKey) {
     throw new Error('Failed to get wallet public key')
   }
-  const nonce = generateOAuthNonce(publicKey)
 
-  // Build OAuth URL
-  const oauthUrl = buildOAuthUrl({
+  // Build OAuth URL that redirects to backend
+  // Use current origin as redirect - SDK auto-detects callback on any page
+  const oauthUrl = buildBackendOAuthUrl({
     provider: parameters.provider,
-    clientId,
-    redirectUri: oauthConfig.redirectUri,
-    nonce,
+    backendUrl: oauthConfig.backendUrl,
+    projectId: oauthConfig.projectId,
+    publicKey,
+    returnTo: `${window.location.origin}?oauth_success=true&oauth_provider=${parameters.provider}`,
   })
 
   // Open popup
@@ -170,18 +159,18 @@ export async function authenticateOAuth(
     throw new Error(`Failed to open ${parameters.provider} login window.`)
   }
 
-  // Poll for OAuth completion
+  // Listen for OAuth completion via postMessage
   return new Promise<void>((resolve, reject) => {
-    pollOAuthPopup(
+    const cleanup = listenForOAuthMessage(
       authWindow,
       window.location.origin,
-      async (idToken) => {
+      async () => {
         try {
           // Complete OAuth authentication with wallet-core
+          // The backend has stored the OAuth session in a cookie
           await wallet.auth({
             type: 'oauth',
             provider: parameters.provider,
-            credential: idToken,
           })
 
           const [session, eoaAccount] = await Promise.all([
@@ -200,7 +189,10 @@ export async function authenticateOAuth(
           reject(err)
         }
       },
-      reject,
+      (error) => {
+        cleanup()
+        reject(error)
+      },
     )
   })
 }
@@ -208,7 +200,6 @@ export async function authenticateOAuth(
 export declare namespace authenticateOAuth {
   type Parameters = {
     provider: OAuthProvider
-    clientId?: string
     connector?: Connector
   }
   type ReturnType = void
@@ -225,7 +216,7 @@ export async function sendOTP(
     emailCustomization?: { magicLinkTemplate?: string }
     connector?: Connector
   },
-): Promise<{ otpId: string; subOrganizationId: string }> {
+): Promise<{ otpId: string }> {
   const connector = parameters.connector ?? getZeroDevConnector(config)
 
   // @ts-expect-error - getStore is a custom method
@@ -246,7 +237,6 @@ export async function sendOTP(
 
   return {
     otpId: result.otpId,
-    subOrganizationId: result.subOrganizationId,
   }
 }
 
@@ -256,7 +246,7 @@ export declare namespace sendOTP {
     emailCustomization?: { magicLinkTemplate?: string }
     connector?: Connector
   }
-  type ReturnType = { otpId: string; subOrganizationId: string }
+  type ReturnType = { otpId: string }
   type ErrorType = Error
 }
 
@@ -268,7 +258,6 @@ export async function verifyOTP(
   parameters: {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   },
 ): Promise<void> {
@@ -285,7 +274,6 @@ export async function verifyOTP(
     mode: 'verifyOtp',
     otpId: parameters.otpId,
     otpCode: parameters.code,
-    subOrganizationId: parameters.subOrganizationId,
   })
 
   const [session, eoaAccount] = await Promise.all([
@@ -304,7 +292,6 @@ export declare namespace verifyOTP {
   type Parameters = {
     code: string
     otpId: string
-    subOrganizationId: string
     connector?: Connector
   }
   type ReturnType = void
@@ -344,6 +331,44 @@ export declare namespace refreshSession {
   type ErrorType = Error
 }
 
+/**
+ * Get user email
+ */
+export async function getUserEmail(config: Config): Promise<{ email: string }> {
+  const connector = getZeroDevConnector(config)
+
+  // @ts-expect-error - getStore is a custom method
+  const store = await connector.getStore()
+  const wallet = store.getState().wallet
+
+  if (!wallet) throw new Error('Wallet not initialized')
+
+  const oauthConfig = store.getState().oauthConfig
+  if (!oauthConfig) {
+    throw new Error('Wallet not initialized. Please wait for connector setup.')
+  }
+
+  const session = store.getState().session
+  if (!session) {
+    throw new Error('No active session')
+  }
+
+  // Call the core SDK method
+  return await wallet.client.getUserEmail({
+    organizationId: session.organizationId,
+    projectId: oauthConfig.projectId,
+    token: session.token,
+  })
+}
+
+export declare namespace getUserEmail {
+  type Parameters = {
+    connector?: Connector
+  }
+  type ReturnType = { email: string }
+  type ErrorType = Error
+}
+
 /**
  * Export wallet
  */
@@ -362,10 +387,6 @@ export async function exportWallet(
 
   if (!wallet) throw new Error('Wallet not initialized')
 
-  const { exportWallet: exportWalletSdk, createIframeStamper } = await import(
-    '@zerodev/wallet-core'
-  )
-
   const iframeContainer = document.getElementById(parameters.iframeContainerId)
   if (!iframeContainer) {
     throw new Error('Iframe container not found')
@@ -400,3 +421,62 @@ export declare namespace exportWallet {
   type ReturnType = void
   type ErrorType = Error
 }
+
+/**
+ * Export private key
+ */
+export async function exportPrivateKey(
+  config: Config,
+  parameters: {
+    iframeContainerId: string
+    address?: string
+    keyFormat?: 'Hexadecimal' | 'Solana'
+    connector?: Connector
+  },
+): Promise<void> {
+  const connector = parameters.connector ?? getZeroDevConnector(config)
+
+  // @ts-expect-error - getStore is a custom method
+  const store = await connector.getStore()
+  const wallet = store.getState().wallet
+
+  if (!wallet) throw new Error('Wallet not initialized')
+
+  const iframeContainer = document.getElementById(parameters.iframeContainerId)
+  if (!iframeContainer) {
+    throw new Error('Iframe container not found')
+  }
+
+  const iframeStamper = await createIframeStamper({
+    iframeUrl: 'https://export.turnkey.com',
+    iframeContainer,
+    iframeElementId: 'export-private-key-iframe',
+  })
+
+  const publicKey = await iframeStamper.init()
+  const { exportBundle, organizationId } = await exportPrivateKeySdk({
+    wallet,
+    targetPublicKey: publicKey,
+    ...(parameters.address && { address: parameters.address }),
+  })
+
+  const success = await iframeStamper.injectKeyExportBundle(
+    exportBundle,
+    organizationId,
+    parameters.keyFormat ?? 'Hexadecimal',
+  )
+  if (success !== true) {
+    throw new Error('Failed to inject export bundle')
+  }
+}
+
+export declare namespace exportPrivateKey {
+  type Parameters = {
+    iframeContainerId: string
+    address?: string
+    keyFormat?: 'Hexadecimal' | 'Solana'
+    connector?: Connector
+  }
+  type ReturnType = void
+  type ErrorType = Error
+}

package/src/connector.ts

@@ -6,24 +6,81 @@ import {
 } 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 { createZeroDevWallet, KMS_SERVER_URL } from '@zerodev/wallet-core'
 import { type Chain, createPublicClient, http } from 'viem'
-import type { OAuthConfig } from './oauth.js'
+import { handleOAuthCallback, type OAuthProvider } from './oauth.js'
 import { createProvider } from './provider.js'
 import { createZeroDevWalletStore } from './store.js'
 import { getAAUrl } from './utils/aaUtils.js'
 
+// OAuth URL parameter used to detect callback
+const OAUTH_SUCCESS_PARAM = 'oauth_success'
+const OAUTH_PROVIDER_PARAM = 'oauth_provider'
+
+/**
+ * Detect OAuth callback from URL params and handle it.
+ * - If in popup: sends postMessage to opener and closes
+ * - If not in popup: completes auth directly
+ */
+async function detectAndHandleOAuthCallback(
+  wallet: Awaited<ReturnType<typeof createZeroDevWallet>>,
+  store: ReturnType<typeof createZeroDevWalletStore>,
+): Promise<boolean> {
+  if (typeof window === 'undefined') return false
+
+  const params = new URLSearchParams(window.location.search)
+  const isOAuthCallback = params.get(OAUTH_SUCCESS_PARAM) === 'true'
+
+  if (!isOAuthCallback) return false
+
+  // If in popup, use the existing handler to notify opener
+  if (window.opener) {
+    handleOAuthCallback(OAUTH_SUCCESS_PARAM)
+    return true
+  }
+
+  // Not in popup - complete auth directly (redirect flow)
+  console.log('OAuth callback detected, completing authentication...')
+  const provider = (params.get(OAUTH_PROVIDER_PARAM) ||
+    'google') as OAuthProvider
+
+  try {
+    await wallet.auth({ type: 'oauth', provider })
+
+    const [session, eoaAccount] = await Promise.all([
+      wallet.getSession(),
+      wallet.toAccount(),
+    ])
+
+    store.getState().setEoaAccount(eoaAccount)
+    store.getState().setSession(session || null)
+
+    // Clean up URL params
+    params.delete(OAUTH_SUCCESS_PARAM)
+    params.delete(OAUTH_PROVIDER_PARAM)
+    const newUrl = params.toString()
+      ? `${window.location.pathname}?${params.toString()}`
+      : window.location.pathname
+    window.history.replaceState({}, '', newUrl)
+
+    console.log('OAuth authentication completed')
+    return true
+  } catch (error) {
+    console.error('OAuth authentication failed:', error)
+    return false
+  }
+}
+
 export type ZeroDevWalletConnectorParams = {
   projectId: string
   organizationId?: string
   proxyBaseUrl?: string
-  aaUrl: string // Bundler/paymaster URL
+  aaUrl?: string // Bundler/paymaster URL
   chains: readonly Chain[]
   rpId?: string
   sessionStorage?: StorageAdapter
   autoRefreshSession?: boolean
   sessionWarningThreshold?: number
-  oauthConfig?: OAuthConfig
 }
 
 export function zeroDevWallet(
@@ -50,62 +107,57 @@ export function zeroDevWallet(
   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
+      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)
+
+      // Store OAuth config - uses proxyBaseUrl and projectId from params
+      store.getState().setOAuthConfig({
+        backendUrl: params.proxyBaseUrl || `${KMS_SERVER_URL}/api/v1`,
+        projectId: params.projectId,
+      })
+
+      // 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)
+      }
+
+      // Auto-detect OAuth callback (when popup redirects back with ?oauth_success=true)
+      await detectAndHandleOAuthCallback(wallet, store)
+
+      console.log('ZeroDevWallet connector initialized')
     }
 
     return {
@@ -137,10 +189,8 @@ export function zeroDevWallet(
         const state = store.getState()
 
         // Determine active chain
-        const activeChainId = chainId || state.chainIds[0]
-        if (!activeChainId) {
-          throw new Error('No chain configured')
-        }
+        const activeChainId =
+          chainId ?? state.activeChainId ?? params.chains[0].id
 
         // If reconnecting and already have kernel account, return immediately
         if (isReconnecting && state.kernelAccounts.has(activeChainId)) {
@@ -187,19 +237,23 @@ export function zeroDevWallet(
           // 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)
         }
 
         // Set as active chain
-        store.getState().setActiveChain(activeChainId)
+        store.getState().setActiveChainId(activeChainId)
 
         // Get fresh state after updates
         const freshState = store.getState()
@@ -230,7 +284,7 @@ export function zeroDevWallet(
 
       async getAccounts() {
         if (!store) return []
-        const { eoaAccount, kernelAccounts, chainIds } = store.getState()
+        const { eoaAccount, kernelAccounts, activeChainId } = store.getState()
 
         // Return EOA address if we have it (EIP-7702: EOA address = kernel address)
         if (eoaAccount) {
@@ -238,24 +292,25 @@ export function zeroDevWallet(
         }
 
         // Fallback: check kernel accounts
-        const activeAccount = chainIds[0]
-          ? kernelAccounts.get(chainIds[0])
+        const activeAccount = activeChainId
+          ? kernelAccounts.get(activeChainId)
           : null
         return activeAccount ? [activeAccount.address] : []
       },
 
       async getChainId() {
         if (!store) return params.chains[0].id
-        return store.getState().chainIds[0] || params.chains[0].id
+        return store.getState().activeChainId ?? params.chains[0].id
       },
 
       async getProvider() {
-        await initialize()
+        if (!provider) {
+          await initialize()
+        }
         return provider
       },
 
       async switchChain({ chainId }) {
-        await initialize()
         console.log(`Switching to chain ${chainId}...`)
         const state = store.getState()
 
@@ -264,7 +319,7 @@ export function zeroDevWallet(
         }
 
         // Update active chain
-        store.getState().setActiveChain(chainId)
+        store.getState().setActiveChainId(chainId)
 
         // Create kernel account for new chain if doesn't exist
         if (!state.kernelAccounts.has(chainId)) {
@@ -290,17 +345,22 @@ export function zeroDevWallet(
           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)
         }
 
+        wagmiConfig.emitter.emit('change', { chainId })
         return params.chains.find((c) => c.id === chainId)!
       },
 

package/src/constants.ts

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