JiffyLabs Bundlers are types-safe ERC-4337 bundler written in Typescript.

Our focus is on providing the best developer experience for teams building on Account Abstraction with transaction inclusion speed, full type safety, and transaction inclusion dependability.

Lets get you started to setup your Bundler using JiffyLabs.

You can take the reference of JiffyLabs Demo repo here

​
Bundler Setup

​
0. Refer the repo

Since React has a lot of boilerplate, we will only focus on the JiffyLabs related code. We recommend refer to quickstart code 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. Configure your Auth provider

When building a web3 application, it’s crucial to have a robust and user-friendly authentication system. Two popular options for this are Privy and Web3Auth. Both services offer easy-to-integrate solutions for web3 authentication and wallet management. Let’s explore how to use either of these services in your project. You can go through the guide for Privy or Web3Auth to setup your Auth Provider

​
3. Install necessary dependencies

In your project, install the necessary dependencies from Pimlico, Privy, wagmi and viem & Jiffscan

npm i permissionless viem wagmi @privy-io/wagmi
pnpm i jiffy-labs/web3a
  1. Get the API key from JiffyLabs (You can obtain this from dashboard.jiffyscan.xyz) or follow the steps in Jiffyscan Dashboard. Save the API key in a .env file.

​
Configuration

First, let’s set up the necessary imports and configurations:

import { ENTRYPOINT_ADDRESS_V06, createSmartAccountClient } from "permissionless";
import { createPimlicoBundlerClient } from "permissionless/clients/pimlico";
import { fuse } from "viem/chains";
import { http } from "wagmi";

const jiffyscanKey = process.env.NEXT_PUBLIC_JIFFYSCAN_API_KEY as string;
const bundlerUrl = process.env.NEXT_PUBLIC_BUNDLER_URL as string;

export const CHAINS = [
    {
        name: "Fuse",
        chain: fuse,
        bundlerUrl: bundlerUrl,
        explorerUrl: "https://explorer.fuse.io/tx/",
    },
];

​
Setting up the Bundler Client

Now, let’s create the Bundler client:

const bundlerTransport = http(selectedChain.bundlerUrl, {
    fetchOptions: {
        headers: { "x-api-key": jiffyscanKey },
    },
});

const bundlerClient = createPimlicoBundlerClient({
    transport: bundlerTransport,
    entryPoint: ENTRYPOINT_ADDRESS_V06,
});

​
Integrating the Bundler with Smart Account Client

Finally, we’ll integrate the Bundler with the Smart Account client:

const smartAccountClient = createSmartAccountClient({
    account: simpleSmartAccountClient,
    entryPoint: ENTRYPOINT_ADDRESS_V06,
    chain: selectedChain.chain,
    bundlerTransport: bundlerTransport,
    middleware: {
        gasPrice: async () => (await bundlerClient.getUserOperationGasPrice()).fast,
        // ... other middleware options
    },
});
Jiffyscan DashBoardPaymaster