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

Particle Auth, Account Abstraction SDK, Next.js, ethers V6, with Kakarot

Table of contents

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

This app allows you to log in using social logins and interact with the Kakarot Sepolia testnet by displaying account information and sending a transfer transaction to an address you can input in the UI. The user can select to send a gasless transaction or pay gas with the native token.

This demo is built in both Next JS and React.

The Next application is within the kakarot-particle-aa-nextjs directory.

Built using:

• Particle Authkit
• Particle AA SDK
• ethers.js V6.x.x
• TypeScript
• Tailwind CSS

What is Kakarot zkEVM

Kakarot zkEVM is a zk-rollup built on the Starknet stack, leveraging CairoVM and StarknetOS runtime for provable execution. Fully compatible with Ethereum, Kakarot benefits from the latest EVM upgrades and innovations in zero-knowledge technology, making it a powerful and seamless platform for dApp development.

🔑 Particle Auth

Particle Auth, a component of Particle Network's Wallet-as-a-Service, enables seamless onboarding to an application-embedded MPC-TSS/AA wallet facilitated by social login, such as Google, GitHub, email, phone number, etc.

👉 Learn more about Particle Auth.

🪪 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 vital functions.

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

👉 Learn more about the Particle AA SDK.

---

👉 Learn more about Particle Network.

🛠️ Quickstart

Clone this repository

git clone https://github.com/Particle-Network/kakarot-auth-aa-demo.git

Move into the app directory (Next JS)

cd kakarot-particle-aa-nextjs

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 Next JS

Particle Auth config is in src/app/layout.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'
}

AA options

You can configure the smart account using the aaOptions object in src/app/page.tsx.

---

• BICONOMY, a Biconomy smart account.
  • version, either 1.0.0 or 2.0.0; both versions of Biconomy's smart account implementation are supported.
  • chainIds, an array of chain IDs in which the smart account is expected to be used.
• CYBERCONNECT, a CyberConnect smart account.
  • version, currently only 1.0.0 is supported for CYBERCONNECT.
  • chainIds, an array of chain IDs in which the smart account is expected to be used.
• SIMPLE, a SimpleAccount implementation.
  • version, either 1.0.0 or 2.0.0 is supported for SIMPLE.
  • chainIds, an array of chain IDs in which the smart account is expected to be used.
• LIGHT, a Light Account implementation by Alchemy.
  • version, currently only 1.0.2 is supported for LIGHT.
  • chainIds, an array of chain IDs in which the smart account is expected to be used.
• XTERIO, a Xterio smart account.
  • version, currently only 1.0.0 is supported for XTERIO.
  • chainIds, an array of chain IDs in which the smart account is expected to be used.

---

  // Set up and configure the smart account
  const smartAccount = new SmartAccount(provider, {
    projectId: process.env.REACT_APP_PROJECT_ID!,
    clientKey: process.env.REACT_APP_CLIENT_KEY!,
    appId: process.env.REACT_APP_APP_ID!,
    aaOptions: {
      accountContracts: {
        SIMPLE: [
          {
            version: "1.0.0", // SIMPLE only allows 1.0.0
            chainIds: [KakarotSepolia.id],
          },
        ],
      },
    },
  });

  // Use this syntax to upadate the smartAccount if you define more that one smart account provider in accountContracts
  //smartAccount.setSmartAccountContract({ name: "SIMPLE", version: "1.0.0" });