​

Account Abstraction on Base using Biconomy

This page will guide you through the process of implementing Account Abstraction in your Base projects using Biconomy paymasters, bundlers, and smart accounts.

​

Objectives

By the end of this tutorial you should be able to do the following:

• Set up a smart contract project for Base using Foundry
• Set up a Next.js frontend project using create next-app
• Setup user login and authentication using Particle Network
• Setup a Biconomy paymaster and bundler
• Create a gasless transaction

​

Prerequisites

​

Foundry

This tutorial requires you to have Foundry installed.

• From the command-line (terminal), run: curl -L https://foundry.paradigm.xyz | bash
• Then run foundryup, to install the latest (nightly) build of Foundry

For more information, see the Foundry Book installation guide.

​

Coinbase Wallet

This tutorial requires you to have a wallet. You can create a wallet by downloading the Coinbase Wallet browser extension:

• Download Coinbase Wallet

​

Wallet funds

To complete this tutorial, you will need to fund a wallet with ETH on Base Goerli.

The ETH is required for covering gas fees associated with deploying smart contracts to the network.

• To fund your wallet with ETH on Base Goerli, visit a faucet listed on the Base Faucets page.

​

What is Biconomy?

Biconomy is a toolkit that offers a full-stack solution for Account Abstraction, including smart accounts, paymasters for sponsoring gas fees, and bundlers for bundling user operations into a single transaction.

​

High-level concepts

​

Account Abstraction

Account Abstraction (ERC-4337) allows users to use Smart Contract wallets instead of traditional Externally Owned Account (EOA) wallets.

​

Smart Accounts

A smart account (also known as a smart contract wallet) is a wallet that stores and manages digital assets (ERC-20 tokens, NFTs, etc.) using a smart contract.

​

User Operations

A user operation is a pseudo-transaction object sent by a smart account that describes a transaction to be sent. Multiple user operations are eventually bundled together and initiated as a single real transaction by a bundler.

​

Paymaster

A paymaster is a special smart contract that allows applications to “sponsor user operations”, meaning it will pay for the gas fees associated with the resulting transaction.

​

Bundler

A special node that monitors a mempool of user operations and bundles multiple user operations into a single transaction.

​

Creating and deploying a smart contract

Before you begin, you need to set up a smart contract development environment using Foundry.

To create a new project, first create a new directory named myproject, and change it to your current working directory:

mkdir myproject
cd myproject

​

Creating a Foundry project

Next, within the myproject directory create a new directory named contracts, and change it to your current working directory:

mkdir contracts
cd contracts

Then create a new Foundry project by running the following command:

forge init

This will create a Foundry project with the following basic layout:

.
├── foundry.toml
├── script
├── src
└── test

​

Compiling the smart contract

Compile the smart contract to ensure it builds without any errors.

To compile your smart contract, run:

forge build

​

Setting up a wallet as the deployer

Before you can deploy your smart contract to various chains you will need to set up a wallet to be used as the deployer.

To do so, you can use the cast wallet import command to import the private key of the wallet into Foundry’s securely encrypted keystore:

cast wallet import deployer --interactive

After running the command above, you will be prompted to enter your private key, as well as a password for signing transactions.

To confirm that the wallet was imported as the deployer account in your Foundry project, run:

cast wallet list

​

Deploying the smart contract

To deploy the smart contract, you can use the forge create command. The command requires you to specify the smart contract you want to deploy, an RPC URL of the network you want to deploy to, and the account you want to deploy with.

To deploy the smart contract to the Base Goerli testnet, run the following command:

forge create ./src/Counter.sol:Counter --rpc-url https://goerli.base.org --account deployer

When prompted, enter the password that you set earlier, when you imported your wallet’s private key.

After running the command above, the contract will be deployed on the Base Goerli test network. You can view the deployment status and contract by using a [block explorer]: /docs/chain/block-explorers.

​

Setting up the Paymaster and Bundler

To setup the paymaster and bundler for your project, you will need to visit the Biconomy Dashboard and complete the following steps.

​

Registering a paymaster

Add and register a Paymaster by completing the following steps:

1. Visit the sign in to the Biconomy Dashboard
2. From the dashboard, select the Paymasters tab and click Add your first Paymaster
3. Provide a Name for your paymaster
4. Select Base Goerli from the Network dropdown
5. Click Register

You should now have a registered Biconomy paymaster.

​

Setting up the paymaster gas tank

Set up and fund the paymaster’s gas tank by completing the following steps:

1. From the dashboard, navigate to the Paymasters tab
2. Click Setup gas tank on the paymaster
3. Navigate to Gas-Tank > Deposit, and click Set up gas tank
4. Sign the message with your connected wallet to set up the gas tank
5. Click Go to deposit
6. Enter the amount of ETH you wish to deposit
7. Click Deposit

ETH should now be deposited into the gas tank for your paymaster. You can visit the Withdraw tab at a later time if you wish to withdraw the funds.

​

Setting up the paymaster policies

Set up and fund the paymaster’s gas tank by completing the following steps:

1. From the dashboard, navigate to the Paymasters tab
2. Select the paymaster to configure
3. Navigate to Policies > Contracts, and click Add your first contract
4. Add the Name and the Smart contract address for your contract
5. Select the increment and setNumber write methods as methods to sponsor
6. Click Add Smart Contract

​

Setting up a bundler

1. Visit the sign in to the Biconomy Dashboard
2. From the dashboard, select the Bundlers tab

​

Setting up the frontend

​

Creating a Next.js project

After you set up your paymaster and bundler from the Biconomy Dashboard, the next step is to create a Next.js project for your app’s frontend.

From the root of the myproject directory of your project, create a new Next.js project by running the following command:

yarn create next-app
cd my-app

​

Installing the dependencies

To use the paymaster and bundler that were setup from the Biconomy Dashboard, you will need to add a few dependencies to your Next.js project.

To install Biconomy as a dependency to your project, run the following command:

yarn add @biconomy/account @biconomy/bundler @biconomy/common @biconomy/core-types @biconomy/paymaster ethers@5.7.2

Creating Biconomy smart accounts requires a signer from an EIP-1193 provider. Biconomy works with a variety of different social login and embedded wallet onboarding solutions that provide access to a signer that can be used for creating smart accounts. In this tutorial, you will use Particle Network for user authentication and getting a smart account signer.

To install Particle Network as a dependency to your project, run the following command:

yarn add @biconomy/particle-auth

​

Updating the boilerplate code

The main page (page.tsx) of the Next.js project created when running the yarn create next-app command contains a Home component. This component comes with a lot of code that is unnecessary for this tutorial.

Replace the content of the page.tsx file with the following simplified code:

'use client';

import styles from './page.module.css';

export default function Home() {
  return (
    <main className={styles.main}>
      <div></div>
    </main>
  );
}

​

Adding social login using Particle Network

​

Setting up Particle Network

To get started adding social login into the app using Particle Network, import and initialize the Biconomy Particle Auth module in the page.tsx file as shown below:

'use client';

import styles from './page.module.css';
import { ParticleAuthModule, ParticleProvider } from '@biconomy/particle-auth';

const PARTICLE_PROJECT_ID = 'YOUR_PARTICLE_PROJECT_ID';
const PARTICLE_CLIENT_ID = 'YOUR_PARTICLE_CLIENT_ID';
const PARTICLE_APP_ID = 'YOUR_PARTICLE_APP_ID';

const particle = new ParticleAuthModule.ParticleNetwork({
  projectId: PARTICLE_PROJECT_ID,
  clientKey: PARTICLE_CLIENT_ID,
  appId: PARTICLE_APP_ID,
  wallet: {
    displayWalletEntry: true,
  },
});

export default function Home() {
  return (
    <main className={styles.main}>
      <div></div>
    </main>
  );
}