From 0fe5facbce4928e895ff896ccdfed17d40383275 Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Tue, 3 Sep 2024 12:16:51 -0300 Subject: [PATCH 1/3] Add Particle to AA section --- .../ecosystem/account-abstraction/particle.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 docs/ecosystem/account-abstraction/particle.md diff --git a/docs/ecosystem/account-abstraction/particle.md b/docs/ecosystem/account-abstraction/particle.md new file mode 100644 index 0000000..5d62906 --- /dev/null +++ b/docs/ecosystem/account-abstraction/particle.md @@ -0,0 +1,26 @@ +--- +title: Particle Network +sidebar_position: 2 +--- + +## Account Abstraction with Particle Network + +**Particle Network** offers a streamlined, full-stack implementation of **ERC-4337** account abstraction, empowering developers to build sophisticated decentralized applications (dApps) with smart accounts. With Particle Network’s Account Abstraction SDK, developers can seamlessly create, sponsor, and execute `UserOperations`, simplifying the complexities of interacting with smart contracts. + +Account abstraction allows developers to leverage advanced features such as gasless transactions, multi-sig, social recovery, and batched transactions by embedding custom logic within Ethereum accounts. Particle Network's SDK enables easy integration of these features, providing a robust infrastructure for building secure and flexible smart accounts. + +At the core of Particle Network’s infrastructure is the Account Abstraction SDK, which supports end-to-end interactions between Externally Owned Accounts (EOAs) generated by MPC-TSS (Multi-Party Computation Threshold Signature Scheme) and the corresponding Smart Accounts. Whether you are using Particle Auth or integrating with external systems, Particle Network offers the tools necessary to optimize your dApp’s account management capabilities. + +## Integrating Account Abstraction with Particle Network + +Particle Network provides two distinct methods to integrate Account Abstraction (AA) into your dApps: + +1. **[Particle Connect](https://developers.particle.network/api-reference/connect/introduction)** — Particle Connect combines Social and Web3 logins with built-in Account Abstraction support, all within a single SDK. This approach allows you to simplify user onboarding while directly incorporating AA features into your dApp. + +2. **[Particle Auth](https://developers.particle.network/api-reference/auth/introduction) with [Particle AA SDK](https://developers.particle.network/api-reference/aa/introduction)** — For a more modular approach, Particle Auth enables the integration of social logins into your dApp. By pairing it with the Particle AA SDK, you can unlock the full range of Account Abstraction capabilities. + +### Getting Started + +To begin integrating with Particle Connect, refer to the [Quickstart Guide](https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart) available in the [Particle Network Documentation](https://developers.particle.network/landing/introduction). + +Those looking to implement Particle Auth can find the relevant Quickstart Guide and repository directly in the [Kakarot Documentation](/ecosystem/sdks/particle). \ No newline at end of file From c70b293eb36fb1eb532bb9af5c99bdf6995443ca Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Tue, 3 Sep 2024 15:55:03 -0300 Subject: [PATCH 2/3] Update particle.md Update to Authkit --- docs/ecosystem/sdks/particle.md | 127 ++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 40 deletions(-) diff --git a/docs/ecosystem/sdks/particle.md b/docs/ecosystem/sdks/particle.md index c2c58a2..84a9628 100644 --- a/docs/ecosystem/sdks/particle.md +++ b/docs/ecosystem/sdks/particle.md @@ -16,60 +16,107 @@ Integrate Particle Auth with Account Abstraction into your Next.js application i Install the necessary Particle Network packages using npm: ```bash -npm install @particle-network/auth-core-modal @particle-network/auth-core @particle-network/chains @particle-network/aa ethers +npm install @particle-network/authkit @particle-network/wallet viem@2 @particle-network/auth-core @particle-network/aa ethers ``` ### Configuration Configure Particle Auth in your application using the `AuthCoreContextProvider` component. Obtain your `projectId`, `clientKey`, and `appId` from the [Particle Dashboard](https://dashboard.particle.network/). +The `AuthCoreContextProvider` component manages the setup for Particle Auth. A recommended approach is to create a separate `AuthKit.tsx` file in the `src` directory, where you can configure and export a component to wrap your application with. + +After setting it up, use the exported component to wrap your main `App` component, ensuring that authentication is accessible across your entire application. + +Below is an example of configuring `AuthCoreContextProvider` and exporting the `ParticleAuthKit` component. + ```jsx "use client"; -import { Inter } from "next/font/google"; -import "./globals.css"; // Particle imports -import { KakarotSepolia } from "@particle-network/chains"; +import { kakarotSepolia } from "@particle-network/authkit/chains"; // Chains are imported here import { AuthType } from "@particle-network/auth-core"; -import { AuthCoreContextProvider } from "@particle-network/auth-core-modal"; +import { + AuthCoreContextProvider, + PromptSettingType, +} from "@particle-network/authkit"; +import { EntryPosition } from "@particle-network/wallet"; + +export const ParticleAuthkit = ({ children }: React.PropsWithChildren) => { + return ( + + {children} + + ); +}; + +``` + +After configuring the `ParticleAuthKit` component, integrate it into your `layout.tsx` or `index.tsx` file: + +```tsx +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; +import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); +import { ParticleAuthkit } from "./components/AuthKit"; + +export const metadata: Metadata = { + title: "Particle Auth app", + description: "App leveraging Particle Auth for social logins.", +}; + export default function RootLayout({ children, -}: { +}: Readonly<{ children: React.ReactNode; -}) { +}>) { return ( - - {children} - + {children} ); @@ -84,14 +131,14 @@ After configuring the SDK, you can integrate social logins and Account Abstracti To enable social logins, use the `useConnect` hook, which provides the `connect()` function to simplify the process of generating a wallet through a selected social login method. The following code snippet demonstrates how to connect a user to an application built on Kakarot Sepolia: ```jsx -import { useConnect } from '@particle-network/auth-core-modal'; -import { KakarotSepolia } from '@particle-network/chains'; +import { useConnect } from "@particle-network/authkit"; +import { kakarotSepolia } from "@particle-network/authkit/chains"; // Handle user connection const { connect } = useConnect(); await connect({ - chain: KakarotSepolia, + chain: kakarotSepolia, }); ``` @@ -102,8 +149,8 @@ The AA SDK allows you to set up and configure smart accounts. Here's how you can ```tsx import { SmartAccount } from '@particle-network/aa'; -import { useEthereum } from "@particle-network/auth-core-modal"; -import { KakarotSepolia } from '@particle-network/chains'; +import { useEthereum } from "@particle-network/authkit"; +import { kakarotSepolia } from "@particle-network/authkit/chains"; const { provider } = useEthereum(); @@ -117,7 +164,7 @@ const smartAccount = new SmartAccount(provider, { SIMPLE: [ { version: '2.0.0', - chainIds: [KakarotSepolia.id], + chainIds: [kakarotSepolia.id], }, ], }, From 98db701017d1a894e5fe7fe1fe47ad2a100a96d4 Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Thu, 5 Sep 2024 10:27:27 -0300 Subject: [PATCH 3/3] Update particle.md --- docs/ecosystem/account-abstraction/particle.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/ecosystem/account-abstraction/particle.md b/docs/ecosystem/account-abstraction/particle.md index 5d62906..2ddd2a2 100644 --- a/docs/ecosystem/account-abstraction/particle.md +++ b/docs/ecosystem/account-abstraction/particle.md @@ -5,22 +5,22 @@ sidebar_position: 2 ## Account Abstraction with Particle Network -**Particle Network** offers a streamlined, full-stack implementation of **ERC-4337** account abstraction, empowering developers to build sophisticated decentralized applications (dApps) with smart accounts. With Particle Network’s Account Abstraction SDK, developers can seamlessly create, sponsor, and execute `UserOperations`, simplifying the complexities of interacting with smart contracts. +**Particle Network** offers a streamlined, full-stack implementation of **ERC-4337** account abstraction, empowering developers to build sophisticated decentralized applications (dApps) with smart accounts. With Particle Network’s [Account Abstraction SDK](https://developers.particle.network/api-reference/aa/introduction), developers can seamlessly create, sponsor, and execute `UserOperations`. -Account abstraction allows developers to leverage advanced features such as gasless transactions, multi-sig, social recovery, and batched transactions by embedding custom logic within Ethereum accounts. Particle Network's SDK enables easy integration of these features, providing a robust infrastructure for building secure and flexible smart accounts. - -At the core of Particle Network’s infrastructure is the Account Abstraction SDK, which supports end-to-end interactions between Externally Owned Accounts (EOAs) generated by MPC-TSS (Multi-Party Computation Threshold Signature Scheme) and the corresponding Smart Accounts. Whether you are using Particle Auth or integrating with external systems, Particle Network offers the tools necessary to optimize your dApp’s account management capabilities. +**Account abstraction** allows developers to leverage advanced features such as gasless transactions, multi-sig, social recovery, and batched transactions by embedding custom logic within their accounts. ## Integrating Account Abstraction with Particle Network -Particle Network provides two distinct methods to integrate Account Abstraction (AA) into your dApps: +Particle Network provides three distinct methods to integrate Account Abstraction (AA) into your dApps: 1. **[Particle Connect](https://developers.particle.network/api-reference/connect/introduction)** — Particle Connect combines Social and Web3 logins with built-in Account Abstraction support, all within a single SDK. This approach allows you to simplify user onboarding while directly incorporating AA features into your dApp. 2. **[Particle Auth](https://developers.particle.network/api-reference/auth/introduction) with [Particle AA SDK](https://developers.particle.network/api-reference/aa/introduction)** — For a more modular approach, Particle Auth enables the integration of social logins into your dApp. By pairing it with the Particle AA SDK, you can unlock the full range of Account Abstraction capabilities. +3. If your authentication needs are already covered, you can also use the **Particle AA SDK** as a stand-alone tool to integrate Account Abstraction with an existing application. + ### Getting Started -To begin integrating with Particle Connect, refer to the [Quickstart Guide](https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart) available in the [Particle Network Documentation](https://developers.particle.network/landing/introduction). +To start integrating with Particle Connect, follow the steps in the [Quickstart Guide](https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart) provided in the [Particle Network Documentation](https://developers.particle.network/landing/introduction). For a complete Account Abstraction (AA) implementation, explore the [Demo repository](https://github.com/Particle-Network/connectkit-aa-usage). Those looking to implement Particle Auth can find the relevant Quickstart Guide and repository directly in the [Kakarot Documentation](/ecosystem/sdks/particle). \ No newline at end of file