getting-started.mdx

Getting Started

@zerodev/wallet-react-kit is the React UI layer for the ZeroDev Wallet SDK. It ships an enhanced wagmi connector and drop-in components for the most common wallet flows, built on wagmi so it slots into a standard wagmi setup.

Installation

pnpm add @zerodev/wallet-react-kit wagmi viem @tanstack/react-query

Setup

1. Create a wagmi config with the kit connector

import { zeroDevWallet } from '@zerodev/wallet-react-kit'
import { createConfig, http } from 'wagmi'
import { sepolia } from 'wagmi/chains'

export const config = createConfig({
  chains: [sepolia],
  connectors: [
    zeroDevWallet({
      projectId: 'your-project-id',
      chains: [sepolia],
    }),
  ],
  transports: {
    [sepolia.id]: http(),
  },
})

2. Import the kit's stylesheet

Once, anywhere in your app entry (e.g. main.tsx):

import '@zerodev/wallet-react-kit/styles.css'

This stylesheet contains the styles for the kit's components. Without it, components render unstyled.

3. Wrap your app with providers

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { WagmiProvider } from 'wagmi'
import { config } from './wagmi'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <WagmiProvider config={config}>
        <YourApp />
      </WagmiProvider>
    </QueryClientProvider>
  )
}