​
Using Particle’s Web AA SDK

The Particle Web AA SDK makes it simple to integrate account abstraction into your web apps. It streamlines smart account management, bundling transactions, and sponsoring gas fees—enhancing user experience and flexibility.
This guide shows how to initialize and configure the AA SDK in a web app using Particle Authkit as the authentication layer.

​
Getting Started

  1. Clone the Particle Authkit starter.
  2. Follow the README instructions to set it up.
This guide uses the Next.js version of the starter repo.
Once your Authkit project is running, install the AA SDK: 
yarn add @particle-network/aa

​
Configuring the Smart Account

If you’re using Authkit, you can enable smart accounts in the authkit.tsx file:
authkit.tsx
erc4337: {
    name: "SIMPLE",
    version: "2.0.0",
},
  • Contract options: BICONOMY, CYBERCONNECT, SIMPLE, LIGHT, COINBASE
  • Versions: 1.0.0 or 2.0.0 (recommended for better gas efficiency)
Here is an example of the full configuration file:
authkit.tsx
"use client";

// Particle imports
import {
  AuthCoreContextProvider,
  PromptSettingType,
} from "@particle-network/authkit";
import { AuthType } from "@particle-network/auth-core";
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => {
  return (
    <AuthCoreContextProvider
      options={{
        // All env variable must be defined at runtime
        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
        appId: process.env.NEXT_PUBLIC_APP_ID!,

        // This is how you limit the options available.
        // Remove the authTypes array to display all options available
        authTypes: [
          AuthType.email,
          AuthType.google,
          AuthType.twitter,
          AuthType.github,
          AuthType.discord,
        ],
        // Locks the chain selector to Base Sepolia and Ethereum Sepolia
        chains: [baseSepolia, sepolia],

        // Optionally, switches the embedded wallet modal to reflect a smart account
        erc4337: {
          name: "SIMPLE",
          version: "2.0.0",
        },
        themeType: "dark",
        // You can prompt the user to set up extra security measure upon login or other interactions
        promptSettingConfig: {
          promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
          promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
        },
        wallet: {
          // Set to false to remove the embedded wallet modal
          visible: true,
          customStyle: {
            supportUIModeSwitch: true,
            supportLanguageSwitch: false,
          },
        },
      }}
    >
      {children}
    </AuthCoreContextProvider>
  );
};
This is only a UI configuration for Authkit’s embedded wallet modal.
Next, configure the smart account itself in your app, in this case in page.tsx:
page.tsx
import { SmartAccount } from '@particle-network/aa';
import { baseSepolia, sepolia } from "@particle-network/authkit/chains";

const smartAccount = new SmartAccount(provider, {
  projectId: 'PROJECT_ID',
  clientKey: 'CLIENT_KEY',
  appId: 'APP_ID',
  aaOptions: {
    accountContracts: {
      SIMPLE: [
        {
          version: '2.0.0',
          chainIds: [baseSepolia.id, sepolia.id],
        }
      ],
    }
  },
});
Now the smart account is initialized and ready to be used.

​
Using with ethers.js

To use the smart account in ethers, wrap it with AAWrapProvider and select the transaction mode:
In this example we use ethers.js as the provider, but you can also use the AA SDK directly like shown in the AA SDK reference.
page.tsx
import { AAWrapProvider, SendTransactionMode } from '@particle-network/aa';
import { ethers, type Eip1193Provider } from "ethers";

const createEthersProvider = () => {
  return new ethers.BrowserProvider(
    new AAWrapProvider(smartAccount, SendTransactionMode.Gasless) as Eip1193Provider, // options: .gasless, .userPaidNative
    "any"
  );
};
Here we use Gasless mode to sponsor the transaction.

​
Sending a Transaction

Every transaction sent through the this ethers provider will automatically be gasless, and you can use the ethers.js API as usual.
page.tsx
const executeTxEthers = async () => {
  const ethersProvider = createEthersProvider();
  const signer = await ethersProvider.getSigner();
  const tx = {
    to: recipientAddress,
    value: ethers.parseEther("0.1"), // 0.1 ETH
  };
  const txResponse = await signer.sendTransaction(tx);
  const txReceipt = await txResponse.wait();
  console.log("Transaction receipt:", txReceipt);
};
Now you only need to wire this function to a button or UI element, and the transaction will be sent through the smart account. The original EOA remains the onwer of the smart account and will be used to sign the UserOperation.
See a complete demo in this repository.