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

Particle Connect, Account Abstraction SDK, Next.js, & ethers V6 on the Zircuit Testnet

⚡️ 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 Zircuit Testnet

Note that Account Abstraction is included wihint the new connectkit package. @particle-network/aa is required when using an EIP 1193 provider like ehter.js. This demo showcases both options.

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

Built using create @particle-network/connectkit

npm init @particle-network/connectkit@latest
# or
pnpm create @particle-network/connectkit@latest
# or
yarn create @particle-network/connectkit

Follow the instructions:

Note: This implementation demonstrates Passkey Authentication. You must use a Biconomy or Coinbase smart account. For a complete list of smart accounts, refer to the AA SDK page.

🤩 Welcome to Particle Network!

✔ What is the name of your project? … connectkit-aa-usage

✔ What is the template of your project? › create-next-app
✔ Which chains does your app support?​ › EVM
✔ Which ERC-4337 Contract does your app support?​ › SIMPLE-2.0.0
✔ Does it support an embedded wallet?​ … yes

Plus:

• 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 Zircuit

Zircuit is an EVM-compatible zero-knowledge rollup Layer 2 network. It combines existing infrastructure with zero-knowledge proofs in a hybrid architecture, focusing on sequencer-level security by monitoring the mempool for malicious transactions to prevent their block inclusion.

Involved in research areas like rollup security tooling, rollup compression, and scaling cryptography, Zircuit has received multiple Layer 2 research grants from the Ethereum Foundation. The network aims to provide developers with a platform for building decentralized applications featuring faster transactions and reduced fees.

---

👉 Learn more about Particle Network.

🛠️ Quickstart

Clone this repository

git clone https://github.com/Particle-Network/zircuit-aa-connect

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.

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);
  }
};