Skip to content

Quickstart

Get up and running in 5 minutes

Installation

npm
npm i @zerodev/wallet-react @zerodev/sdk wagmi viem @tanstack/react-query

1. Configure Wagmi

Create a Wagmi config with the zeroDevWallet connector:

import { createConfig, http } from 'wagmi'
import { sepolia } from 'wagmi/chains'
import { zeroDevWallet } from '@zerodev/wallet-react'
 
export const config = createConfig({
  chains: [sepolia],
  connectors: [
    zeroDevWallet({
      projectId: 'YOUR_ZERODEV_PROJECT_ID',
      chains: [sepolia],
    }),
  ],
  transports: {
    [sepolia.id]: http(),
  },
})

Get your project ID from the ZeroDev Dashboard.

2. Wrap your app

Wrap your application with WagmiProvider and QueryClientProvider:

import { WagmiProvider } from 'wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { config } from './wagmi-config'
 
const queryClient = new QueryClient()
 
export default function App({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </WagmiProvider>
  )
}

3. Add authentication

Here's a basic example with passkey registration and login:

import { useAccount, useDisconnect } from 'wagmi'
import { useRegisterPasskey, useLoginPasskey } from '@zerodev/wallet-react'
 
function AuthPage() {
  const { address, isConnected } = useAccount()
  const { disconnectAsync } = useDisconnect()
  const registerPasskey = useRegisterPasskey()
  const loginPasskey = useLoginPasskey()
 
  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={() => disconnectAsync()}>
          Logout
        </button>
      </div>
    )
  }
 
  return (
    <div>
      <button
        onClick={() => registerPasskey.mutateAsync()}
        disabled={registerPasskey.isPending}
      >
        {registerPasskey.isPending ? 'Registering...' : 'Register with Passkey'}
      </button>
 
      <button
        onClick={() => loginPasskey.mutateAsync()}
        disabled={loginPasskey.isPending}
      >
        {loginPasskey.isPending ? 'Logging in...' : 'Login with Passkey'}
      </button>
    </div>
  )
}

After authentication, the user's wallet is available through standard Wagmi hooks like useAccount, useSendTransaction, and useSignMessage.

Next Steps