@particle-network/connectkit @particle-network/aa Demo Application

Particle Connect, Account Abstraction SDK, Next.js, & ethers V6 on the Arbitrum Chain

⚡️ Basic demo application using @particle-network/connectkit and @particle-network/aa to initiate social login and send transactions via an account abstraction smart account on the Arbitrum Chain.

Note that Account Abstraction is included within the new connectkit package. @particle-network/aa is required when using an EIP 1193 provider like ehter.js.

This app allows you to log in using social logins and interact with Arbitrum by displaying account information and sending a gasless transfer transaction to an address you can input in the UI.

Built using:

• Particle Connect SDK
• Particle AA SDK
• ethers.js V6.x.x

🔑 Particle Connect

Particle Connect enables a unified modal driving connection with social logins (through Particle Auth) and standard Web3 wallets, creating an equally accessible experience for Web3 natives and traditional consumers. Particle Connect is an all-in-one SDK capable of handling end-to-end onboarding and wallet connection.

This app enables you to log in using social logins or Web3 methods via Particle Connect and interact with the Ethereum Sepolia, Base Sepolia, and Avalanche Fuji testnets. You can view your account information and send transfer transactions to any address you input in the UI.

👉 Learn more about Particle Connect.

🪪 Account Abstraction SDK

Particle Network natively supports and facilitates the end-to-end utilization of ERC-4337 account abstraction. This is primarily done through the account abstraction SDK, which can construct, sponsor, and send UserOperations, deploy smart accounts, retrieve fee quotes, and perform other key functions.

Every gasless transaction is automatically sponsored on testnet. On mainnet, you'll need to deposit USDT in the Paymaster.

👉 Learn more about the Particle AA SDK.

What is Arbitrum

Arbitrum is a scaling solution for Ethereum, designed to improve transaction speed and reduce fees while maintaining a high level of security through Ethereum’s infrastructure. Arbitrum leverages roll-up technology, where multiple transactions are bundled off-chain and then submitted to the Ethereum blockchain in a compressed format.

---

👉 Learn more about Particle Network.

🛠️ Quickstart

Clone this repository

git clone https://github.com/Particle-Network/connect-arbitrum-tutorial

Install dependencies

yarn install

Or

npm install

Set environment variables

This project requires several keys from Particle Network to be defined in .env. The following should be defined:

• NEXT_PUBLIC_PROJECT_ID, the ID of the corresponding application in your Particle Network dashboard.
• NEXT_PUBLIC_CLIENT_KEY, the ID of the corresponding project in your Particle Network dashboard.
• NEXT_PUBLIC_APP_ID, the client key of the corresponding project in your Particle Network dashboard.
• NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID='WALLETCONNECT_PROJECT_ID, retrieved from https://cloud.walletconnect.com

Start the project

npm run dev

Or

yarn dev

Development

Particle Connect config is in src/components/ConnectKit.tsx.

Config social logins

List of available social logins:

{
  email: 'email',
  phone: 'phone',
  facebook: 'facebook',
  google: 'google',
  apple: 'apple',
  twitter: 'twitter',
  discord: 'discord',
  github: 'github',
  twitch: 'twitch',
  microsoft: 'microsoft',
  linkedin: 'linkedin',
  jwt: 'jwt'
}

Smart Account (AA) Options

You can configure the smart account using the aa plugin located in src/components/ConnectKit.tsx. Below is an example configuration:

plugins: [
  // Smart Account (AA) configuration
  aa({
    name: "SIMPLE",
    version: "2.0.0",
  }),
],

Available Smart Accounts

Here is a list of supported smart accounts and their corresponding versions and chain IDs:

• BICONOMY: A Biconomy Smart Account.

  • Versions: 1.0.0, 2.0.0
  • Chain IDs: Specify relevant chain IDs as needed.

• CYBERCONNECT: A CyberConnect Smart Account.

  • Version: 1.0.0
  • Chain IDs: Specify relevant chain IDs as needed.

• SIMPLE: A SimpleAccount Implementation.

  • Versions: 1.0.0, 2.0.0
  • Chain IDs: Specify relevant chain IDs as needed.

• LIGHT: A Light Account Implementation by Alchemy.

  • Version: 1.0.2
  • Chain IDs: Specify relevant chain IDs as needed.

• XTERIO: A Xterio Smart Account.

  • Version: 1.0.0
  • Chain IDs: Specify relevant chain IDs as needed.

Check the Particle AA Docs to verify up to date information.

Sending AA Transactions

You can send gasless transactions using the native smartAccount instance provided by Particle Connect.

This does not require the Particle AA ADK.

Here’s an example from the demo:

import { useSmartAccount } from "@particle-network/connectkit";
const smartAccount = useSmartAccount();

/**
 * Sends a transaction using the native AA Particle provider with gasless mode.
 */
const executeTxNative = async () => {
  setIsSending(true);
  try {
    const tx = {
      to: recipientAddress,
      value: parseEther("0.01").toString(),
      data: "0x",
    };

    // Fetch fee quotes and use verifyingPaymasterGasless for a gasless transaction
    const feeQuotesResult = await smartAccount?.getFeeQuotes(tx);
    const { userOp, userOpHash } =
      feeQuotesResult?.verifyingPaymasterGasless || {};

    if (userOp && userOpHash) {
      const txHash =
        (await smartAccount?.sendUserOperation({
          userOp,
          userOpHash,
        })) || null;

      setTransactionHash(txHash);
      console.log("Transaction sent:", txHash);
    } else {
      console.error("User operation is undefined");
    }
  } catch (error) {
    console.error("Failed to send transaction:", error);
  } finally {
    setIsSending(false);
  }
};

For users using an EIP1193 provider such as ethers.js, you'll need to leverage the Particle AA SDK. Install it with the following command:

yarn add @particle-network/aa

Here’s how to use it with ethers.js:

// Initialize custom provider with gasless transaction mode
const customProvider = smartAccount
  ? new ethers.BrowserProvider(
      new AAWrapProvider(
        smartAccount,
        SendTransactionMode.Gasless
      ) as Eip1193Provider,
      "any"
    )
  : null;

/**
 * Sends a transaction using the ethers.js library.
 * This transaction is gasless since the customProvider is initialized as gasless.
 */
const executeTxEthers = async () => {
  if (!customProvider) return;

  const signer = await customProvider.getSigner();
  setIsSending(true);
  try {
    const tx = {
      to: recipientAddress,
      value: parseEther("0.01").toString(),
    };

    const txResponse = await signer.sendTransaction(tx);
    const txReceipt = await txResponse.wait();

    setTransactionHash(txReceipt?.hash || null);
  } catch (error) {
    console.error("Failed to send transaction using ethers.js:", error);
  } finally {
    setIsSending(false);
  }
};