From 242bd23c3993e7fb85b70f00d9572260465cd20f Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Mon, 5 Aug 2024 16:15:01 -0300 Subject: [PATCH 1/2] Add Particle Network WaaS --- docs/ecosystem/sdks/_category_.json | 9 ++ docs/ecosystem/{sdk.md => sdks/hardhat.md} | 11 +- docs/ecosystem/sdks/particle.md | 137 +++++++++++++++++++++ 3 files changed, 148 insertions(+), 9 deletions(-) create mode 100644 docs/ecosystem/sdks/_category_.json rename docs/ecosystem/{sdk.md => sdks/hardhat.md} (85%) create mode 100644 docs/ecosystem/sdks/particle.md diff --git a/docs/ecosystem/sdks/_category_.json b/docs/ecosystem/sdks/_category_.json new file mode 100644 index 0000000..ddc9f30 --- /dev/null +++ b/docs/ecosystem/sdks/_category_.json @@ -0,0 +1,9 @@ +{ + "label": "SDKs and Libraries", + "position": 3, + "link": { + "type": "generated-index", + "description": "Welcome to the SDKs page! Find useful information about SDKs and Libraries (e.g. Foundry, Viem, Hardhat), such as recommended configuration or known issues." + } + } + \ No newline at end of file diff --git a/docs/ecosystem/sdk.md b/docs/ecosystem/sdks/hardhat.md similarity index 85% rename from docs/ecosystem/sdk.md rename to docs/ecosystem/sdks/hardhat.md index c43189d..186d701 100644 --- a/docs/ecosystem/sdk.md +++ b/docs/ecosystem/sdks/hardhat.md @@ -1,15 +1,8 @@ --- -title: SDKs and Libraries -sidebar_position: 3 +title: Hardhat +sidebar_position: 1 --- -## Overview - -Welcome to the SDKs page! Find useful information about SDKs and Libraries (e.g. -Foundry, Viem, Hardhat), such as recommended configuration or known issues. - -### Hardhat - > [Hardhat](https://hardhat.org/) is a development environment for Ethereum > software. It consists of different components for editing, compiling, > debugging and deploying your smart contracts and dApps, all of which work diff --git a/docs/ecosystem/sdks/particle.md b/docs/ecosystem/sdks/particle.md new file mode 100644 index 0000000..b57c8f4 --- /dev/null +++ b/docs/ecosystem/sdks/particle.md @@ -0,0 +1,137 @@ +--- +title: Particle Network +sidebar_position: 2 +--- + +## Particle Network Wallet-as-a-Service + +Particle Network's Wallet-as-a-Service integrates decentralized wallet functionality with social logins into web applications. With minimal setup, developers can leverage Particle's powerful SDKs to enable 2-click onboarding into smart accounts through social logins. + +## Quickstart Guide + +Integrate Particle Auth with Account Abstraction into your Next.js application in minutes by following these steps: + +### Installation + +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 +``` + +### 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/). + +```jsx +"use client"; +import { Inter } from "next/font/google"; +import "./globals.css"; + +// Particle imports +import { KakarotSepolia } from "@particle-network/chains"; +import { AuthType } from "@particle-network/auth-core"; +import { AuthCoreContextProvider } from "@particle-network/auth-core-modal"; + +const inter = Inter({ subsets: ["latin"] }); + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + {children} + + + + ); +} + +``` + +Once the SDK is configured, you can implement social logins and Account Abstraction (AA) in your application. Particle Auth provides various hooks to facilitate these features. + +### Social Logins + +To enable social logins, use the `useConnect` hook, which provides the `connect` function to streamline the process of creating a wallet through social authentication. The following code demonstrates how to connect a user using the Kakarot Sepolia chain: + +```jsx +import { useConnect } from '@particle-network/auth-core-modal'; +import { KakarotSepolia } from '@particle-network/chains'; + +// Handle user connection +const { connect } = useConnect(); + +await connect({ + chain: KakarotSepolia, +}); + +``` + +### Account Abstraction + +The AA SDK allows you to set up and configure smart accounts. Here's how you can configure a smart account using Particle Network: + +```jsx +import { SmartAccount } from '@particle-network/aa'; +import { KakarotSepolia } from '@particle-network/chains'; + +// Set up and configure the smart account +const smartAccount = new SmartAccount(provider, { + projectId: process.env.NEXT_PUBLIC_PROJECT_ID!, + clientKey: process.env.NEXT_PUBLIC_CLIENT_KEY!, + appId: process.env.NEXT_PUBLIC_APP_ID!, + aaOptions: { + accountContracts: { + SIMPLE: [ + { + version: '2.0.0', + chainIds: [KakarotSepolia.id], + }, + ], + }, + }, +}); + +``` + +In this setup: + +- **SmartAccount**: This class is used to create a smart account that leverages an instance of [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol). +- **aaOptions**: This field specifies the version and chain IDs for the account contracts, allowing you to configure the smart account with specific blockchain settings. Here, we're using version 2.0.0 and targeting the Kakarot Sepolia chain. + +> Find a complete implementation example on the [Kakarot-Particle-AA Demo](https://github.com/Particle-Network/kakarot-auth-aa-demo/blob/main/kakarot-particle-aa-nextjs/src/app/page.tsx). + +Upon logging in, the embedded wallet model included with Particle Auth will be accessible through the button at the bottom right unless otherwise specified through the wallet within `AuthCoreContextProvider`. + +## Learn More + +Explore Particle Network's [documentation](https://docs.particle.network/) to learn more about the Particle SDKs. \ No newline at end of file From 2a982c36958b39b7c2efd0433ed3e304da3a8f3e Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Mon, 5 Aug 2024 19:18:57 -0300 Subject: [PATCH 2/2] Update particle.md --- docs/ecosystem/sdks/particle.md | 40 +++++++++++++++++++++++++++------ 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/docs/ecosystem/sdks/particle.md b/docs/ecosystem/sdks/particle.md index b57c8f4..c2c58a2 100644 --- a/docs/ecosystem/sdks/particle.md +++ b/docs/ecosystem/sdks/particle.md @@ -62,7 +62,7 @@ export default function RootLayout({ // Set to false to remove the embedded wallet modal visible: true, customStyle: { - // Locks the chain selector to IoTeX mainnet and testnet + // Locks the chain selector to Kakarot Sepolia testnet supportChains: [KakarotSepolia], }, }, @@ -77,11 +77,11 @@ export default function RootLayout({ ``` -Once the SDK is configured, you can implement social logins and Account Abstraction (AA) in your application. Particle Auth provides various hooks to facilitate these features. +After configuring the SDK, you can integrate social logins and Account Abstraction (AA) into your application. Particle Auth, in conjunction with Particle’s AA SDK, offers a variety of hooks to streamline the implementation of these features. ### Social Logins -To enable social logins, use the `useConnect` hook, which provides the `connect` function to streamline the process of creating a wallet through social authentication. The following code demonstrates how to connect a user using the Kakarot Sepolia chain: +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'; @@ -100,10 +100,13 @@ await connect({ The AA SDK allows you to set up and configure smart accounts. Here's how you can configure a smart account using Particle Network: -```jsx +```tsx import { SmartAccount } from '@particle-network/aa'; +import { useEthereum } from "@particle-network/auth-core-modal"; import { KakarotSepolia } from '@particle-network/chains'; +const { provider } = useEthereum(); + // Set up and configure the smart account const smartAccount = new SmartAccount(provider, { projectId: process.env.NEXT_PUBLIC_PROJECT_ID!, @@ -120,7 +123,6 @@ const smartAccount = new SmartAccount(provider, { }, }, }); - ``` In this setup: @@ -128,9 +130,33 @@ In this setup: - **SmartAccount**: This class is used to create a smart account that leverages an instance of [SimpleAccount](https://github.com/eth-infinitism/account-abstraction/blob/develop/contracts/samples/SimpleAccount.sol). - **aaOptions**: This field specifies the version and chain IDs for the account contracts, allowing you to configure the smart account with specific blockchain settings. Here, we're using version 2.0.0 and targeting the Kakarot Sepolia chain. -> Find a complete implementation example on the [Kakarot-Particle-AA Demo](https://github.com/Particle-Network/kakarot-auth-aa-demo/blob/main/kakarot-particle-aa-nextjs/src/app/page.tsx). +Upon logging in, the embedded wallet modal included with Particle Auth will be accessible through the button at the bottom right unless otherwise specified through the wallet within `AuthCoreContextProvider`. + +### Use `ethers` to send transactions via the Smart Account + +You can wrap the smart account in an `ethers` instance to facilitate transactions. Here’s an example: + +```tsx +import { AAWrapProvider, SendTransactionMode } from "@particle-network/aa"; +import { ethers, type Eip1193Provider } from "ethers"; + +const ethersProvider = new ethers.BrowserProvider( + new AAWrapProvider(smartAccount, SendTransactionMode.Gasless) as Eip1193Provider, + "any" + ); + +const executeTxEthers = async () => { + const signer = await ethersProvider.getSigner(); + const txResponse = await signer.sendTransaction({ + to: recipientAddress, + value: ethers.parseEther("0.01"), + }); + const txReceipt = await txResponse.wait(); + console.log(txReceipt.hash); +}; +``` -Upon logging in, the embedded wallet model included with Particle Auth will be accessible through the button at the bottom right unless otherwise specified through the wallet within `AuthCoreContextProvider`. +> Find a complete implementation example on the [Kakarot-Particle-AA Demo](https://github.com/Particle-Network/kakarot-auth-aa-demo/blob/main/kakarot-particle-aa-nextjs/src/app/page.tsx). ## Learn More