Feat/add particle aa (#73)

* Add Particle to AA section

* Update particle.md

Update to Authkit

* Update particle.md

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](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 their accounts.
+
+## Integrating Account Abstraction with Particle Network
+
+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 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).

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 (
+    <AuthCoreContextProvider
+      options={{
+        projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
+        clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
+        appId: process.env.NEXT_PUBLIC_APP_ID!,
+        authTypes: [
+          AuthType.email,
+          AuthType.google,
+          AuthType.twitter,
+          AuthType.github,
+          AuthType.discord,
+        ],
+        themeType: "dark",
+
+        // List the chains you want to include
+        chains: [kakarotSepolia],
+
+        // Optionally, switches the embedded wallet modal to reflect a smart account
+        erc4337: {
+          name: "SIMPLE",
+          version: "2.0.0",
+        },
+
+        // You can prompt the user to set up extra security measures upon login or other interactions
+        promptSettingConfig: {
+          promptPaymentPasswordSettingWhenSign: PromptSettingType.first,
+          promptMasterPasswordSettingWhenLogin: PromptSettingType.first,
+        },
+
+        wallet: {
+          themeType: "dark", // Wallet modal theme
+          entryPosition: EntryPosition.TR,
+
+          // Set to false to remove the embedded wallet modal
+          visible: true,
+          customStyle: {
+            supportUIModeSwitch: true,
+            supportLanguageSwitch: false,
+          },
+        },
+      }}
+    >
+      {children}
+    </AuthCoreContextProvider>
+  );
+};
+
+```
+
+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 (
     <html lang="en">
       <body className={inter.className}>
-        <AuthCoreContextProvider
-          options={{
-            // All env variable must be defined at runtime
-            projectId: process.env.NEXT_PUBLIC_PROJECT_ID!,
-            clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!,
-            appId: process.env.NEXT_PUBLIC_APP_ID!,
-            themeType: "dark",
-            fiatCoin: "USD",
-            language: "en",
-
-            // Define UI elements for the smart account
-            erc4337: {
-              name: "SIMPLE",
-              version: "2.0.0",
-            },
-            wallet: {
-              // Set to false to remove the embedded wallet modal
-              visible: true,
-              customStyle: {
-                // Locks the chain selector to Kakarot Sepolia testnet
-                supportChains: [KakarotSepolia],
-              },
-            },
-          }}
-        >
-          {children}
-        </AuthCoreContextProvider>
+        <ParticleAuthkit>{children}</ParticleAuthkit>
       </body>
     </html>
   );
@@ -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],
         },
       ],
     },