​

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

​

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

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 providerToSmartAccountSigner method from permissionless to create a SmartAccountSigner. This signer corresponds to the user’s embedded wallet and authorizes actions for the user’s smart account.

import { providerToSmartAccountSigner } from 'permissionless';
...
// Use the EIP1193 `provider` from Privy to create a `SmartAccountSigner`
const smartAccountSigner = await providerToSmartAccountSigner(provider);

Finally, using the smartAccountSigner from above, initialize a Kernel (ZeroDev) smart account 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: smartAccountSigner,
  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.

​

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 Safe

Safe Smart Accounts is a product by Safe for creating ERC-4337-compatible smart accounts for your users, using the user’s EOA as the smart account’s signer. The product builds off of the smart contract infrastructure powering the widely-used Safe wallet and allows you to easily add Account Abstraction and other Safe features into your app.

To create Safe smart accounts for your users, simply follow our Pimlico integration guide. Safe does not operate its own paymaster and bundler infrastructure, and developers generally compose the Safe smart account with paymasters or bundlers from Pimlico.

When integrating Safe alongside Pimlico, the only change from the default Pimlico setup is to replace the signerToSimpleSmartAccount method with signerToSafeSmartAccount. This modifies the setup to deploy a Safe smart account for the user instead of a simple smart account.

For example, when initializing the smart account from a viem wallet client for the user’s Privy embedded wallet, you should update your code as follows:

import {
  createSmartAccountClient,
  walletClientToCustomSigner,
  ENTRYPOINT_ADDRESS_V07
} from 'permissionless';
import {signerToSimpleSmartAccount} from 'permissionless/accounts'; // Remove
import {signerToSafeSmartAccount} from 'permissionless/accounts'; // Add

import {createPimlicoPaymasterClient} from 'permissionless/clients/pimlico';
import {createPublicClient, http} from 'viem';

// The `privyClient` is simply a viem Wallet Client for the user's embedded wallet
const customSigner = walletClientToCustomSigner(privyClient);

// Create a viem public client for RPC calls
const publicClient = createPublicClient({
  chain: sepolia, // Replace this with the chain of your app
  transport: http()
});

// Initialize the smart account for the user
// Remove
const simpleSmartAccount = await signerToSimpleSmartAccount(publicClient, {
  entryPoint: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
  signer: customSigner,
  factoryAddress: '0x9406Cc6185a346906296840746125a0E44976454'
});

// Add
const safeSmartAccount = await signerToSafeSmartAccount(publicClient, {
  signer: customSigner,
  safeVersion: '1.4.1',
  entryPoint: ENTRYPOINT_ADDRESS_V07
});

// Create the Paymaster for gas sponsorship using the API key from your Pimlico dashboard
const pimlicoPaymaster = createPimlicoPaymasterClient({
  transport: http('https://api.pimlico.io/v2/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY')
});

// Create the SmartAccountClient for requesting signatures and transactions (RPCs)
const smartAccountClient = createSmartAccountClient({
  account: simpleSmartAccount, // Remove
  account: safeSmartAccount, // Add
  chain: sepolia, // Replace this with the chain for your app
  transport: http('https://api.pimlico.io/v1/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY'),
  sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation // If your app uses a paymaster for gas sponsorship
});

​

Account Abstraction with permissionless.js and Pimlico

permissionless.js is a modular and extensible TypeScript library originally created by Pimlico for deploying and managing ERC-4337 smart accounts. You can use this library for all major smart account implementations, including Safe, Kernel, Biconomy, SimpleAccount, and more.

You can easily integrate permissionless.js 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.

Just follow the steps below!

​

1. Install Privy and permissionless.js

In your project, install the necessary dependencies from Privy, Pimlico, and viem:

npm i @privy-io/react-auth permissionless viem

​

2. Sign up for a Pimlico account and create an API key.

To send transactions from smart accounts, you will need access to a bundler. We also recommend using paymaster to sponsor your user’s transactions.

To get a bundler and paymaster for your application, sign up for a Pimlico account and copy down your API key for the rest of this guide!

​

3. Configure your app’s PrivyProvider

First, follow the instructions in the Privy Quickstart to get your app set up with Privy.

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 UserOperations they sign.

Then, 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={{
        /* Replace this with your desired login methods */
        loginMethods: ['email', 'wallet'],
        /* Replace this with your desired appearance configuration */
        appearance: {
            theme: 'light',
            accentColor: '#676FFF',
            logo: 'your-logo-url'
        }
        embeddedWallets: {
            createOnLogin: 'users-without-wallets',
            showWalletUIs: false
        }
    }}
>
    {/* Your app's components */}
</PrivyProvider>

​

4. 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, find the user’s embedded wallet from Privy’s useWallets hook, and create a viem WalletClient for it. 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 eip1193provider = await embeddedWallet.getEthereumProvider();

// Create a viem WalletClient from the embedded wallet's EIP1193 provider
// This will be used as the signer for the user's smart account
const privyClient = createWalletClient({
    account: embeddedWallet.address,
    chain: sepolia, // Replace this with the chain used by your application
    transport: custom(eip1193provider)
});

Next, using the privyClient from above, create a SmartAccountClient which represents the user’s smart account. In creating the smart account, you can also specify which smart account implementation you’d like to use. Possible options include: Safe, Kernel, Biconomy, and SimpleAccount (the original smart account implementation).

If your app also uses a paymaster to sponsor gas on behalf of users, you can also specify which paymaster to use by calling the createPimlicoPaymasterClient method from permissionless with the RPC URL in your Pimlico Dashboard.

import {createSmartAccountClient, walletClientToCustomSigner} from 'permissionless';
import {signerToSimpleSmartAccount} from 'permissionless/accounts';
import {createPimlicoPaymasterClient} from 'permissionless/clients/pimlico';
import {createPublicClient, http} from 'viem';

// The `privyClient` comes from the snippet above
const customSigner = walletClientToCustomSigner(privyClient);

// Create a viem public client for RPC calls
const publicClient = createPublicClient({
  chain: sepolia, // Replace this with the chain of your app
  transport: http()
});

// Initialize the smart account for the user
const simpleSmartAccount = await signerToSimpleSmartAccount(publicClient, {
  entryPoint: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789',
  signer: customSigner,
  factoryAddress: '0x9406Cc6185a346906296840746125a0E44976454'
});

// Create the Paymaster for gas sponsorship using the API key from your Pimlico dashboard
const pimlicoPaymaster = createPimlicoPaymasterClient({
  transport: http('https://api.pimlico.io/v2/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY')
});

// Create the SmartAccountClient for requesting signatures and transactions (RPCs)
const smartAccountClient = createSmartAccountClient({
  account: simpleSmartAccount,
  chain: sepolia, // Replace this with the chain for your app
  transport: http('https://api.pimlico.io/v1/sepolia/rpc?apikey=YOUR_PIMLICO_API_KEY'),
  sponsorUserOperation: pimlicoPaymaster.sponsorUserOperation // If your app uses a paymaster for gas sponsorship
});

When using the snippets above, make sure replace YOUR_PIMLICO_API_KEY with your Pimlico API key that you created in step 2!

​

5. Send transactions from the smart account

You can now send transactions using the sendTransaction method on the SmartAccountClient object, like so:

const txHash = await smartAccountClient.sendTransaction({
  account: smartAccountClient.account,
  to: zeroAddress,
  data: '0x',
  value: BigInt(0)
});

You can also request signatures, typed data signatures, and more from the smart account! The SmartAccountClient functions as a drop-in replacement for viem’s wallet client - you can use the same interfaces with the SmartAccountClient object!

That’s it! Once you’ve created smart accounts for your users, you can easily add AA features into your application like gas sponsorship, batched transactions, and more. 🎉

​

Account abstraction with Biconomy

Biconomy is a toolkit for creating ERC-4337-compatible smart accounts for your users, using the user’s EOA as the smart account’s signer. This allows you to easily add Account Abstraction features into your app.

You can easily integrate Biconomy alongside Privy to create smart wallets from your user’s embedded or external wallets, allowing you to enhance your app with gas sponsorship and more!

Read below to learn how to configure your app to create smart wallets for all your users!

​

1. Install Privy and Biconomy

In your app’s repository, install the @privy-io/react-auth SDK from Privy and the @biconomy/account SDK from Biconomy:

npm i @privy-io/react-auth @biconomy/account

​

2. Configure your app’s PrivyProvider

First, follow the instructions in the Privy Quickstart to get your app set up with Privy.

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 UserOperations they sign.

Then, 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. Configure your Biconomy bundler and paymaster

Go to the Biconomy Dashboard and configure a Paymaster and a Bundler for your app. Make sure these correspond to the desired network for your user’s smart accounts.

Once you’ve configured a Paymaster, you can also deposit funds into your app’s gas tank and configure specific policies for gas sponsorship.

Save the bundler URL and paymaster API key for your project, as you will need those values later.

​

4. Initialize your users’ smart accounts

When users log into your app, Privy provisions each user an embedded wallet, which is an EOA. In order to leverage the features of Biconomy’s account abstraction, each user also needs a Biconomy smart account. You can provision Biconomy smart accounts for each user by assigning their embedded wallet as a signer for their smart account.

To start, after a user logs in, find the user’s embedded wallet from Privy’s useWallets hook, and switch its network to your app’s target network. 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';
...
// Find the embedded wallet
const {wallets} = useWallets();
const embeddedWallet = wallets.find((wallet) => (wallet.walletClientType === 'privy'));
// Switch the embedded wallet to your target network
// Replace '80001' with your desired chain ID.
await embeddedWallet.switchChain(80001);

Next, using your paymaster API key and bundler URL from the Biconomy Dashboard, initialize the user’s smart account using Biconomy’s createSmartAccountClient method:

import { createSmartAccountClient } from "@biconomy/account";
...
// Get an ethers provider and signer for the user's embedded wallet
const provider = await embeddedWallet.getEthereumProvider();
const ethersProvider = new ethers.providers.Web3Provider(provider);
const ethersSigner = ethersProvider.getSigner()

const smartAccount = await createSmartAccountClient({
    signer: ethersSigner,
    bundlerUrl: 'your-bundler-url-from-the-biconomy-dashboard',
    biconomyPaymasterApiKey: 'your-paymaster-api-key-from-the-biconomy-dashboard'
});

​

5. Send transactions from the smart account

Now that your users have Biconomy smart accounts, they can now send transaction from their smart account.

To send a transaction from a user’s smart account, use Biconomy’s sendTransaction method. An example of sending a transaction to mint an NFT gaslessly is below:

// Initialize an ethers JsonRpcProvider for your network
const provider = new ethers.providers.JsonRpcProvider(`insert-rpc-url-for-your-network`);
// Initialize an ethers contract instance for your NFT
const nft = new ethers.Contract('insert-your-NFT-address', insertYourNftAbi, provider);

// Construct a Transaction for the minting transaction
const mintTransaction = await nft.populateTransaction.mint!('insert-the-smart-account-address');
// `smartAccount` is the Biconomy smart account we initialized above
const mintTx = {
  to: 'insert-your-NFT-address',
  data: mintTransaction.data
};

// Send transaction to mempool, to mint NFT gaslessly
const userOpResponse = await smartAccount.sendTransaction(mintTx, {
  paymasterServiceData: {mode: PaymasterMode.SPONSORED}
});

const {transactionHash} = await userOpResponse.waitForTxHash();
console.log('Transaction Hash', transactionHash);

const userOpReceipt = await userOpResponse.wait();
if (userOpReceipt.success == 'true') {
  console.log('UserOp receipt', userOpReceipt);
  console.log('Transaction receipt', userOpReceipt.receipt);
}

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 and more. 🎉

​

Account Abstraction with AccountKit

AccountKit is a toolkit by Alchemy for creating ERC-4337-compatible smart accounts for your users, using the user’s EOA as the smart account’s signer. This allows you to easily add Account Abstraction features into your app.

You can easily integrate AccountKit 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 Privy and AccountKit

Install the @privy-io/react-auth SDK from Privy, the @alchemy/{aa-core, aa-alchemy} SDKs from Alchemy, and viem:

npm i @privy-io/react-auth @alchemy/aa-core @alchemy/aa-alchemy @alchemy/aa-accounts viem

​

2. Configure your app’s PrivyProvider

First, follow the instructions in the Privy Quickstart to get your app set up with Privy.

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 UserOperations they sign.

Then, 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={{
        /* Replace this with your desired login methods */
        loginMethods: ['email', 'wallet'],
        /* Replace this with your desired appearance configuration */
        appearance: {
            theme: 'light',
            accentColor: '#676FFF',
            logo: 'your-logo-url'
        }
        embeddedWallets: {
            createOnLogin: 'users-without-wallets',
            showWalletUIs: false
        },
        // Import your desired chain from `viem/chains` and pass it to `defaultChain`
        defaultChain: sepolia,
    }}
>
    {/* Your app's components */}
</PrivyProvider>

​

3. Initialize your users’ smart accounts

When users log into your app, Privy provisions each user an embedded wallet, which is an EOA. In order to leverage the features of Alchemy’s account abstraction, each user also needs a smart account from AccountKit. You can provision smart accounts with AccountKit for each user by assigning their embedded wallet as a signer for their smart account.

To start, after a user logs in, find the user’s embedded wallet from Privy’s useWallets hook, and create a viem WalletClient for it. 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';
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 eip1193provider = await embeddedWallet.getEthereumProvider();

// Create a viem WalletClient from the embedded wallet's EIP1193 provider
const privyClient = createWalletClient({
    account: embeddedWallet.address,
    chain: sepolia,
    transport: custom(eip1193provider)
});

Then, from the embedded wallet’s WalletClient, initialize an AccountKit SmartAccountSigner, like below. This configures the user’s embedded wallet (EOA, from Privy) to be the signer for their smart account (contract account, from AccountKit).

import { WalletClientSigner, type SmartAccountSigner } from "@alchemy/aa-core";

...

// Create an AccountKit SmartAccountSigner from the embedded wallet
const privySigner: SmartAccountSigner = new WalletClientSigner(
    privyClient,
    "json-rpc"
);

Lastly, with the user’s SmartAccountSigner, initialize an instance of an AlchemySmartAccountClient. You will later use this smart account client to send transactions from the user’s smart account.

import { createLightAccountAlchemyClient } from "@alchemy/aa-alchemy";

...

// Create an Alchemy Light Account Client with the `privySigner`
export const smartAccountClient = await createLightAccountAlchemyClient({
  account: {
    signer: privySigner,
  },
  chain: sepolia,
  apiKey: "YOUR_ALCHEMY_API_KEY",
});

​

5. Send UserOperations from the smart account

Now that your users have AccountKit smart accounts, they can now send user operations 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 AlchemySmartAccountClient’s sendUserOperation method.

As a parameter to this method, you should pass an object containing a uo field with the desired user operation as the value.

// this is an example ABI for a contract with a "mint" function
const ABI = [
  {
    inputs: [{internalType: 'address', name: 'recipient', type: 'address'}],
    name: 'mint',
    outputs: [],
    stateMutability: 'nonpayable',
    type: 'function'
  }
];

// Using `encodeFunctionData` from `viem`
const uoCallData = encodeFunctionData({
  abi: ABI,
  functionName: 'mint',
  args: [smartAccountClient.getAddress()]
});

const uo = await smartAccountClient.sendUserOperation({
  uo: {
    target: '0xTARGET_ADDRESS',
    data: uoCallData
  }
});
const txHash = await smartAccountClient.waitForUserOperationTransaction(uo);
console.log(txHash);

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. 🎉