⚡️ 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
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, 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.
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.
git clone https://github.com/Particle-Network/kakarot-auth-aa-demo.git
cd kakarot-particle-aa-nextjs
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 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.
npm run dev
Or
yarn dev
Particle Auth config is in src/app/layout.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 the aaOptions
object in src/app/page.tsx
.
- BICONOMY, a Biconomy smart account.
version
, either1.0.0
or2.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 only1.0.0
is supported forCYBERCONNECT
.chainIds
, an array of chain IDs in which the smart account is expected to be used.
- SIMPLE, a SimpleAccount implementation.
version
, either1.0.0
or2.0.0
is supported forSIMPLE
.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 only1.0.2
is supported forLIGHT
.chainIds
, an array of chain IDs in which the smart account is expected to be used.
- XTERIO, a Xterio smart account.
version
, currently only1.0.0
is supported forXTERIO
.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" });