Custom account abstraction implementation

Account abstraction with ZeroDev

ZeroDev is a toolkit for creating ERC-4337-compatible smart wallets for your users, using the user’s EOA as the smart wallet’s signer. This allows you to easily add Account Abstraction features into your app.You can easily integrate ZeroDev alongside Privy to create smart wallets from your user’s embedded or external wallets, allowing you to enhance your app with gas sponsorship, batched transactions, and more!Read below to learn how to configure your app to create smart wallets for all your users!

1. Install the required dependencies from Privy and ZeroDev

In your app’s repository, install the required dependencies from Privy and ZeroDev, as well as the permissionless, and viem libraries:

npm i @privy-io/react-auth @zerodev/sdk @zerodev/ecdsa-validator permissionless viem

Visit the ZeroDev dashboard and sign up for a new account if you do not have one already. Set up a new project for your required chain(s) and retrieve your ZeroDev project ID, as well as your paymaster and bundler URLs for the project.Within this Dashboard, you can also configure settings for gas sponsorship and other ZeroDev features!

2. Configure your app’s Privy settings

First, follow the instructions in the Privy Quickstart to get your app set up with a basic Privy integration.Next, set Add confirmation modals to “off” in your app’s [Embedded wallets] page in the Privy dashboard. This will configure Privy to not show its default UIs when your user must sign messages or send transactions. Instead, we recommend you use your own custom UIs for showing users the user operationss they sign.Lastly, update the config.embeddedWallets.createOnLogin property of your PrivyProvider to 'users-without-wallets'.This will configure Privy to create an embedded wallet for users logging in via a web2 method (email, phone, socials), ensuring that all of your users have a wallet that can be used as an EOA.Your PrivyProvider should then look like:

<PrivyProvider
    appId='insert-your-privy-app-id'
    config={{
        embeddedWallets: {
            createOnLogin: 'users-without-wallets',
        }
        ...insertTheRestOfYourPrivyProviderConfig
    }}
>
    {/* Your app's components */}
</PrivyProvider>

3. Create a smart account for your user

You’ll now create a smart account for your user, using the Privy embedded wallet (an EOA) as the signer.To do so, when the user logs in, first find the user’s embedded wallet from Privy’s useWallets hook, and get its EIP1193 provider. You can find embedded wallet by finding the only entry in the useWallets array with a walletClientType of 'privy'.

import {useWallets} from '@privy-io/react-auth';
import {sepolia} from 'viem/chains'; // Replace this with the chain used by your application
import {createWalletClient, custom} from 'viem';
...
// Find the embedded wallet and get its EIP1193 provider
const {wallets} = useWallets();
const embeddedWallet = wallets.find((wallet) => (wallet.walletClientType === 'privy'));
const provider = await embeddedWallet.getEthereumProvider();

Next, pass the returned EIP1193 provider to the toSimpleSmartAccount method from permissionless to create a SmartAccount. This signer corresponds to the user’s embedded wallet and authorizes actions for the user’s smart account.

import {createSmartAccountClient} from 'permissionless';
import {toSimpleSmartAccount} from 'permissionless/accounts';
import {createPublicClient, http, zeroAddress} from 'viem';
import {sepolia} from 'viem/chains';
import {createPimlicoClient} from 'permissionless/clients/pimlico';
import {entryPoint07Address} from 'viem/account-abstraction';

const publicClient = createPublicClient({
  chain: sepolia, // or whatever chain you are using
  transport: http()
});

const pimlicoUrl = `https://api.pimlico.io/v2/sepolia/rpc?apikey=<PIMLICO_API_KEY>`;
const pimlicoClient = createPimlicoClient({
  transport: http(pimlicoUrl),
  entryPoint: {
    address: entryPoint07Address,
    version: '0.7'
  }
});

// Use the EIP1193 `provider` from Privy to create a `SmartAccount`
const kernelSmartAccount = await toKernelSmartAccount({
  owners: [provider],
  client: publicClient,
  entryPoint: {
    address: entryPoint07Address,
    version: '0.7'
  }
});

Finally, using the SmartAccount from above, initialize a smart account client for the user like so:

import {sepolia} from 'viem/chains'; // Replace this with the chain used by your application
import {createPublicClient, http} from 'viem';
import {ENTRYPOINT_ADDRESS_V07} from 'permissionless';
import {createZeroDevPaymasterClient, createKernelAccount, createKernelAccountClient} from "@zerodev/sdk";
import {signerToEcdsaValidator} from "@zerodev/ecdsa-validator";

...

// Initialize a viem public client on your app's desired network
const publicClient = createPublicClient({
  transport: http(sepolia.rpcUrls.default.http[0]),
})

// Create a ZeroDev ECDSA validator from the `smartAccountSigner` from above and your `publicClient`
const ecdsaValidator = await signerToEcdsaValidator(publicClient, {
  signer: kernelSmartAccount,
  entryPoint: ENTRYPOINT_ADDRESS_V07,
})

// Create a Kernel account from the ECDSA validator
const account = await createKernelAccount(publicClient, {
  plugins: {
    sudo: ecdsaValidator,
  },
  entryPoint: ENTRYPOINT_ADDRESS_V07,
});

// Create a Kernel account client to send user operations from the smart account
const kernelClient = createKernelAccountClient({
  account,
  chain: sepolia,
  entryPoint: ENTRYPOINT_ADDRESS_V07,
  bundlerTransport: http('insert-your-bundler-RPC-from-the-dashboard'),
  middleware: {
    sponsorUserOperation: async ({ userOperation }) => {
      const zerodevPaymaster = createZeroDevPaymasterClient({
        chain: sepolia,
        entryPoint: ENTRYPOINT_ADDRESS_V07,
        transport: http('insert-your-paymaster-RPC-to-the-dashboard'),
      })
      return zerodevPaymaster.sponsorUserOperation({
        userOperation,
        entryPoint: ENTRYPOINT_ADDRESS_V07,
      })
    }
  }
})

The kernelClient is a drop-in replacement for a viem Wallet Client, and requests to the smart account can be made using viem’s API.

You can also store the user’s smart account address on Privy’s user object. See this guide for more.

4. Send user operations (transactions) from the smart account

Now that your users have Kernel (ZeroDev) smart accounts, they can now send UserOperations from their smart account. This is the AA analog to sending a transaction.To send a user operation from a user’s smart account, use the Kernel client’s sendTransaction method.

const txHash = await kernelClient.sendTransaction({
  to: 'TO_ADDRESS',
  value: VALUE, // default to 0
  data: '0xDATA' // default to 0x
});

This is a drop-in replacement for viem’s sendTransaction method, and will automatically apply any smart account configurations (e.g. gas sponsorship) you configure in the middleware before sending the transaction.That’s it! You’ve configured your app to create smart wallets for all of your users, and can seamlessly add in AA features like gas sponsorship, batched transactions, and more. 🎉

​Account abstraction with ZeroDev

​1. Install the required dependencies from Privy and ZeroDev

​2. Sign up for a ZeroDev account and get your project ID

​2. Configure your app’s Privy settings

​3. Create a smart account for your user

​4. Send user operations (transactions) from the smart account

Account abstraction with ZeroDev

1. Install the required dependencies from Privy and ZeroDev

2. Sign up for a ZeroDev account and get your project ID

2. Configure your app’s Privy settings

3. Create a smart account for your user

4. Send user operations (transactions) from the smart account