Repository files navigation

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

⚡️ Basic demo application using@particle-network/connectkit and@particle-network/aa to showcase how to leverage a Coinbase smart account with Passkey for onboarding and signing.

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

This app lets you log in using Passkey, view account information, and send a gasless transfer to an address entered in the UI.

What is Passkey?
Passkey is a passwordless authentication method that enables users to log in securely using biometric data, device PINs, or other forms of strong authentication, providing a simpler and more secure onboarding experience.

Learn more about integratingAuthentication via Passkey on the Particle docs.

The Next application is within theconnectkit-aa-usage directory.

Built usingcreate @particle-network/connectkit

npm init @particle-network/connectkit@latest# orpnpm create @particle-network/connectkit@latest# oryarn create @particle-network/connectkit

Follow the instructions:

🤩 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?​ › BICONOMY-2.0.0✔ Does it support an embedded wallet?​ … yes

Plus:

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

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 aboutParticle Connect.

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 theParticle AA SDK.

👉 Learn more aboutParticle Network.

git clone https://github.com/soos3d/particle-auth-nextjs-aa

cd connectkit-aa-usage

yarn install

Or

npm install

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 yourParticle Network dashboard.
• NEXT_PUBLIC_CLIENT_KEY, the ID of the corresponding project in yourParticle Network dashboard.
• NEXT_PUBLIC_APP_ID, the client key of the corresponding project in yourParticle Network dashboard.

npm run dev

Or

yarn dev

Particle Connect config is insrc/components/ConnectKit.tsx.

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'}

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

plugins:[// Smart Account (AA) configurationaa({name:"COINBASE",version:"1.0.0",}),],

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

• BICONOMY: ABiconomy Smart Account.

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

• CYBERCONNECT: ACyberConnect Smart Account.

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

• SIMPLE: ASimpleAccount Implementation.

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

• LIGHT: ALight Account Implementation by Alchemy.

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

• XTERIO: AXterio Smart Account.

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

Check theParticle AA Docs to verify up to date information.

You can send gasless transactions using the nativesmartAccount 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";constsmartAccount=useSmartAccount();/** * Sends a transaction using the native AA Particle provider with gasless mode. */constexecuteTxNative=async()=>{setIsSending(true);try{consttx={to:recipientAddress,value:parseEther("0.01").toString(),data:"0x",};// Fetch fee quotes and use verifyingPaymasterGasless for a gasless transactionconstfeeQuotesResult=awaitsmartAccount?.getFeeQuotes(tx);const{ userOp, userOpHash}=feeQuotesResult?.verifyingPaymasterGasless||{};if(userOp&&userOpHash){consttxHash=(awaitsmartAccount?.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 utilizing an EIP1193 provider such asethers.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 withethers.js:

// Initialize custom provider with gasless transaction modeconstcustomProvider=smartAccount  ?newethers.BrowserProvider(newAAWrapProvider(smartAccount,SendTransactionMode.Gasless)asEip1193Provider,"any")  :null;/** * Sends a transaction using the ethers.js library. * This transaction is gasless since the customProvider is initialized as gasless. */constexecuteTxEthers=async()=>{if(!customProvider)return;constsigner=awaitcustomProvider.getSigner();setIsSending(true);try{consttx={to:recipientAddress,value:parseEther("0.01").toString(),};consttxResponse=awaitsigner.sendTransaction(tx);consttxReceipt=awaittxResponse.wait();setTransactionHash(txReceipt?.hash||null);}catch(error){console.error("Failed to send transaction using ethers.js:",error);}finally{setIsSending(false);}};