Quickstart -- React

ZeroDev has two main packages: @zerodev/waas which is designed for React projects, and @zerodev/sdk which is our core SDK that can be used in any JavaScript environment.

If you are building a React project, we recommend starting with @zerodev/waas, which is what we will walk you through in this tutorial. You can always "dropping down" to the core SDK when necessary.

0. Clone the code

Since React has a lot of boilerplate, we will only focus on the ZeroDev-specific code. We recommend cloning the complete quickstart code and refer to it if you get lost as you follow along this tutorial.

1. Create a Next.js project

In this tutorial, we will be using Next.js. Start by creating a Next.js project:

npx create-next-app@latest

2. Install ZeroDev and dependencies

Install @zerodev/waas and its dependencies:

npm

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

3. Setup context provider

Create a provider in typical React style. You will need to create a project ID from the dashboard, and make sure you are using the right chain object corresponding to your ZeroDev project.

Providers.tsx

import { http } from "viem"
import { sepolia } from "viem/chains"
import { ZeroDevProvider, createConfig } from "@zerodev/waas"
 
function Providers({ children }: { children: React.ReactNode}) {
  const PROJECT_ID = '98fd43a8-fb2f-4948-a7ae-069f53969f73'
 
  const config = createConfig({
    chains: [sepolia],
    transports: {
      [sepolia.id]: http()
    },
    projectIds: {
      [sepolia.id]: PROJECT_ID
    }
  })
 
  return (
    <ZeroDevProvider config={config}>
      {children}
    </ZeroDevProvider>
  )
}

4. Use ZeroDev waas

Create a Smart Account

Let's start by creating an account:

page.tsx

import { useCreateKernelClientPasskey } from "@zerodev/waas"
 
function App() {
  const { connectRegister, isPending } = useCreateKernelClientPasskey({ version: "v3" });
 
  return (
    <button
      disabled={isPending}
      onClick={() => {
        connectRegister({ username: "zerodev_quickstart" })
      }} 
    >
      {isPending ? 'Connecting...' : 'Create Smart Account'}
    </button>
  )
}

Get the Smart Account Address

Now you can get the account address as such:

page.tsx

import { useKernelClient } from "@zerodev/waas"
 
function App() {
  const { address } = useKernelClient()
 
  return (
    /* ...Create Smart Account */
    <p>{`Smart Account Address: ${address}`}</p>
  )
}

Send Sponsored User Operation

And here's how you send transactions:

page.tsx

import { parseAbi } from "viem"
import { useKernelClient, useSendUserOperation } from "@zerodev/waas"
 
function App() {
  const { address } = useKernelClient()
  const { data: userOpHash, write, isPending } = useSendUserOperation({
    paymaster: {
      type: "SPONSOR"
    }
  })
  const tokenAddress = "0x3870419Ba2BBf0127060bCB37f69A1b1C090992B"
  const abi = parseAbi(["function mint(address _to, uint256 amount) public"])
 
  return (
    /* ...Create & Get Smart Account */
    <div>
      <button 
        disabled={isPending}
        onClick={() => {
          write([
            {
              address: tokenAddress,
              abi: abi,
              functionName: "mint",
              args: [address, 1],
              value: BigInt(0),
            }
          ])
        }}
      >
        {isPending ? 'Minting...' : 'Mint'}
      </button>
      {userOpHash && <p>{`UserOp Hash: ${userOpHash}`}</p>}
    </div>
  )
}

Interop with the Core SDK

If you ever want to use the Core SDK (perhaps because a feature is only supported in the core SDK but not through the React API), you can "drop down" to the SDK with the useKernelClient hook.

Similarly, if you have created a Kernel client object with the core SDK, you can "embed" it inside the React SDK using the useSetKernelClient hook.

Next Steps

Congrats -- you just sent your first gasless transaction with ZeroDev!

In this example, you used a public ZeroDev API key. Now learn how to set up your own ZeroDev project.