@zerodev/wallet-react 0.0.1-alpha.0

package/dist/_esm/connector.js

@@ -0,0 +1,248 @@
+import { createConnector } from '@wagmi/core';
+import { createKernelAccount, createKernelAccountClient, createZeroDevPaymasterClient, } from '@zerodev/sdk';
+import { getEntryPoint, KERNEL_V3_3 } from '@zerodev/sdk/constants';
+import { createZeroDevWallet } from '@zerodev/wallet-core';
+import { createPublicClient, http } from 'viem';
+import { createProvider } from './provider.js';
+import { createZeroDevWalletStore } from './store.js';
+import { getAAUrl } from './utils/aaUtils.js';
+export function zeroDevWallet(params) {
+    return createConnector((wagmiConfig) => {
+        let store;
+        let provider;
+        let initPromise;
+        // 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',
+            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],
+                            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]),
+                    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/dist/_esm/constants.js

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

package/dist/_esm/hooks/useAuthenticateOAuth.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { authenticateOAuth } from '../actions.js';
+/**
+ * Hook to authenticate with OAuth (opens popup)
+ */
+export function useAuthenticateOAuth(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return authenticateOAuth(config, variables);
+        },
+        mutationKey: ['authenticateOAuth'],
+    });
+}

package/dist/_esm/hooks/useExportWallet.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { exportWallet } from '../actions.js';
+/**
+ * Hook to export wallet seed phrase
+ */
+export function useExportWallet(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return exportWallet(config, variables);
+        },
+        mutationKey: ['exportWallet'],
+    });
+}

package/dist/_esm/hooks/useLoginPasskey.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { loginPasskey } from '../actions.js';
+/**
+ * Hook to login with passkey
+ */
+export function useLoginPasskey(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return loginPasskey(config, variables);
+        },
+        mutationKey: ['loginPasskey'],
+    });
+}

package/dist/_esm/hooks/useRefreshSession.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { refreshSession } from '../actions.js';
+/**
+ * Hook to manually refresh session
+ */
+export function useRefreshSession(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return refreshSession(config, variables);
+        },
+        mutationKey: ['refreshSession'],
+    });
+}

package/dist/_esm/hooks/useRegisterPasskey.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { registerPasskey } from '../actions.js';
+/**
+ * Hook to register with passkey
+ */
+export function useRegisterPasskey(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return registerPasskey(config, variables);
+        },
+        mutationKey: ['registerPasskey'],
+    });
+}

package/dist/_esm/hooks/useSendOTP.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { sendOTP } from '../actions.js';
+/**
+ * Hook to send OTP via email
+ */
+export function useSendOTP(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return sendOTP(config, variables);
+        },
+        mutationKey: ['sendOTP'],
+    });
+}

package/dist/_esm/hooks/useVerifyOTP.js

@@ -0,0 +1,18 @@
+'use client';
+import { useMutation, } from '@tanstack/react-query';
+import { useConfig } from 'wagmi';
+import { verifyOTP } from '../actions.js';
+/**
+ * Hook to verify OTP code
+ */
+export function useVerifyOTP(parameters = {}) {
+    const { mutation } = parameters;
+    const config = useConfig(parameters);
+    return useMutation({
+        ...mutation,
+        async mutationFn(variables) {
+            return verifyOTP(config, variables);
+        },
+        mutationKey: ['verifyOTP'],
+    });
+}

package/dist/_esm/index.js

@@ -0,0 +1,10 @@
+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 { OAUTH_PROVIDERS } from './oauth.js';
+export { createZeroDevWalletStore } from './store.js';

package/dist/_esm/oauth.js

@@ -0,0 +1,77 @@
+import { sha256 } from 'viem';
+export const OAUTH_PROVIDERS = {
+    GOOGLE: 'google',
+};
+const GOOGLE_AUTH_URL = 'https://accounts.google.com/o/oauth2/v2/auth';
+const POPUP_WIDTH = 500;
+const POPUP_HEIGHT = 600;
+export function buildOAuthUrl(params) {
+    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) {
+    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) {
+    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, originUrl, onSuccess, onError) {
+    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) {
+    return sha256(publicKey).replace(/^0x/, '');
+}

package/dist/_esm/package.json

@@ -0,0 +1 @@
+{"type": "module","sideEffects":false}

package/dist/_esm/provider.js

@@ -0,0 +1,169 @@
+import { normalizeTimestamp } from '@zerodev/wallet-core';
+import { Provider } from 'ox';
+const SESSION_WARNING_THRESHOLD_MS = 60 * 1000; // 1 minute before expiry
+export function createProvider({ store, config, }) {
+    const emitter = Provider.createEmitter();
+    let sessionRefreshTimer = 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 }) {
+            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 = 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 = 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}`);
+            }
+        },
+    };
+}