Getting Started

ZeroDev's React SDK is called @zerodev/waas, which stands for Wallet-as-a-Service. This is to signal that the React SDK provides higher-level abstractions over the low-level SDK.

The relationship between @zerodev/waas and @zerodev/sdk is similar to the relationship between Wagmi and Viem. We recommend using @zerodev/waas in all React projects, and you can always "drop down" to the SDK if you want lower-level control.

Installation

npm

npm i @zerodev/waas wagmi viem@2.x @tanstack/react-query

Setup

In typical React pattern, @zerodev/waas is set up via a provider. A typical setup may look like this:

import { ZeroDevProvider, createConfig as createZdConfig } from "@zerodev/waas"
import { WagmiProvider, createConfig, http } from "wagmi"
import { sepolia, arbitrum } from "wagmi/chains"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 
export default function Providers({ children }: { children: React.ReactNode }) {  
  const wagmiConfig = createConfig({
    chains: [arbitrum, sepolia],
    transports: {
      [arbitrum.id]: http(),
      [sepolia.id]: http(),
    },
  })
  const zdConfig = createZdConfig({
    chains: [arbitrum, sepolia],
    transports: {
      [arbitrum.id]: http(),
      [sepolia.id]: http(),
    },
    projectIds: {
      [arbitrum.id]: ZERODEV_ARB_PROJECT_ID,
      [sepolia.id]: ZERODEV_SEPOLIA_PROJECT_ID
    } 
  })
  const queryClient = new QueryClient()
 
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <ZeroDevProvider config={zdConfig}>
          {children}
        </ZeroDevProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Next Steps

The best way to learn how to use @zerodev/waas is by looking at the examples and browsing the hooks on the sidebar.