From a704c2f63468c5278c6b788ed0d08ea9b0e48339 Mon Sep 17 00:00:00 2001 From: Soos3D <99700157+soos3d@users.noreply.github.com> Date: Fri, 25 Oct 2024 11:44:54 -0300 Subject: [PATCH] Update 4_account-abstraction-with-particle-network.md --- ...count-abstraction-with-particle-network.md | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/apps/base-docs/tutorials/docs/4_account-abstraction-with-particle-network.md b/apps/base-docs/tutorials/docs/4_account-abstraction-with-particle-network.md index efcc7b430c..fb2187a39b 100644 --- a/apps/base-docs/tutorials/docs/4_account-abstraction-with-particle-network.md +++ b/apps/base-docs/tutorials/docs/4_account-abstraction-with-particle-network.md @@ -99,7 +99,7 @@ The Particle Connect SDK simplifies wallet creation, user login, and interaction ### Create a New Next Project -First, create a new [Next.js](https://nextjs.org/docs/getting-started/installation) project by following the instructions in the Next.js CLI. Use the default settings, enabling TypeScript and Tailwind CSS. +First, create a new [Next.js] project by following the instructions in the Next.js CLI. Use the default settings, enabling TypeScript and Tailwind CSS. ```sh $ npx create-next-app@latest @@ -131,7 +131,7 @@ This command installs the latest version of the Particle Connect SDK along with Particle Connect comes with built-in Account Abstraction functionality, making it the only Particle package you'll need to install. -If you prefer, you can still use EIP-1193 providers like ethers, but you'll need to integrate the [Particle AA SDK](https://developers.particle.network/api-reference/aa/sdks/desktop/web) for that. For more details, refer to the [Particle Docs](https://developers.particle.network/api-reference/connect/desktop/web#use-eip-1193-provider-ethers-web3-js). +If you prefer, you can still use EIP-1193 providers like ethers, but you'll need to integrate the [Particle AA SDK] for that. For more details, refer to the [Particle Docs]. ::: ### Configure Particle Connect @@ -140,7 +140,7 @@ Once the dependencies are installed, you must create a project and an applicatio Steps to follow: -1. Go to the [Particle Dashboard](https://dashboard.particle.network) and login using your email. +1. Go to the [Particle Dashboard] and login using your email. 2. Click **Add New Project** and enter a name for your project. 3. Copy and save the **Project ID** and **Client Key**. 4. Create a new application by selecting **Web** as the platform. @@ -192,8 +192,6 @@ This file now exports the `ParticleConnectKit` component, where you input the pr In this example, we load the API keys from the `.env` file, enable social logins through `authWalletConnectors`, set up the `COINBASE` smart account, and restrict the available chains to Base and Base Sepolia. -Here is a breakdown: - This `config` object holds the Particle Connect SDK's settings: - **projectId, clientKey, appId**: These values are loaded from environment variables (`.env` file). @@ -203,7 +201,7 @@ This `config` object holds the Particle Connect SDK's settings: :::info -This example provides a minimal version of the `ConnectKit.tsx` file to help you get started. For detailed configuration options and full implementation guidelines, refer to the [Particle Network documentation](https://developers.particle.network/api-reference/connect/desktop/web#configuration). +This example provides a minimal version of the `ConnectKit.tsx` file to help you get started. For detailed configuration options and full implementation guidelines, refer to the [Particle Connect documentation]. ::: ### Integrate the `ParticleConnectKit` Component in Your App @@ -264,7 +262,9 @@ export const App = () => { }; ``` -Here is a code breakdown: +This code snippet creates a simple interface for logging in and connecting users to your application. Once they are authenticated, it displays their wallet address and the connected blockchain’s chain ID. + +Here’s a breakdown of how each part works: 1. **Imports**: @@ -283,7 +283,7 @@ Here is a code breakdown: 3. **Conditional Rendering**: - The `isConnected` flag ensures that the account information (address and chain ID) is only shown when a user is successfully connected. Until a connection is established, only the `ConnectButton` is visible. -To manage interactions at the application level after onboarding, `@particle-network/connectkit` offers a variety of hooks. You can explore all [available hooks](https://developers.particle.network/api-reference/connect/desktop/web#key-react-hooks-for-particle-connect) in the Particle Connect SDK documentation. +To manage interactions at the application level after onboarding, `@particle-network/connectkit` offers a variety of hooks. You can explore all [available hooks] in the Particle Connect SDK documentation. ## Sending a Gasless Transaction @@ -305,11 +305,7 @@ import { parseEther } from 'viem'; // To be used in the transaction function const smartAccount = useSmartAccount(); ``` -#### Code Breakdown: - -- **`useSmartAccount()`**: This hook provides access to the smart account instance that you'll use as the transaction signer. - ---- +This code initializes a `smartAccount` instance, which serves as the primary signer for executing transactions through Particle Connect. ### Step 2: Execute a Gasless Transaction @@ -320,7 +316,6 @@ const executeTxNative = async () => { const tx = { to: recipientAddress, // Recipient's address value: parseEther('0.01').toString(), // Amount to send (in ETH) - data: '0x', // No additional data }; // Fetch fee quotes and set up the transaction for gasless execution @@ -334,12 +329,13 @@ const executeTxNative = async () => { }; ``` -Here is a breakdown: +This code demonstrates executing a gasless transaction by building a `UserOp` and using the `smartAccount` instance as the signer. + +Here’s a detailed look at each part of the process: - **`tx` Object**: This defines the transaction parameters. - `to`: The recipient's address where the 0.01 ETH will be sent. - `value`: The amount of ETH to transfer (in this case, 0.01 ETH). It is converted to the correct format using `parseEther` from Viem. - - `data`: This is set to `'0x'` since there is no additional data needed for a simple transfer. - **`getFeeQuotes(tx)`**: This method returns an array of `UserOperation` objects and hashes derived from a standard transaction object. One of the quotes returned will be the `verifyingPaymasterGasless` option, which facilitates gasless transactions by sponsoring the transaction fee. - **`userOp` and `userOpHash`**: These values are extracted from the gasless fee quote. The `userOp` is the gasless operation to be sent, and `userOpHash` is its hash. @@ -419,7 +415,7 @@ export const App = () => { }; ``` -### Code Breakdown: +This code creates a simple interface to send gasless transactions with an input field for the recipient's address and displays the transaction hash once the transaction is sent successfully. Follows a detailed code breakdown: 1. **State Management**: @@ -439,8 +435,6 @@ export const App = () => { - **Button**: Triggers the gasless transaction when clicked. - **Transaction Hash Display**: Shows the transaction hash after sending the transaction. -This code creates a simple interface to send gasless transactions with an input field for the recipient's address and displays the transaction hash once the transaction is sent successfully. - With everything set up, you're now ready to run your application and test it. Follow these steps: 1. Navigate to your project’s root directory. @@ -452,7 +446,7 @@ With everything set up, you're now ready to run your application and test it. Fo ### Quickstart Guide -For a complete step-by-step guide to starting and configuring a new project with Particle Connect, check out the [Particle Connect Quickstart](https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart) in the Particle Network documentation. +For a complete step-by-step guide to starting and configuring a new project with Particle Connect, check out the [Particle Connect Quickstart] in the Particle Network documentation. ## Conclusion @@ -467,7 +461,6 @@ To learn more about using Particle Network on Base, take a look at the following --- -[create-react-app]: https://create-react-app.dev [Base Faucets]: https://docs.base.org/tools/network-faucets [Web3Auth]: https://web3auth.io [Privy]: https://docs.base.org/tutorials/account-abstraction-with-privy-and-base-paymaster/ @@ -481,3 +474,9 @@ To learn more about using Particle Network on Base, take a look at the following [Account Abstraction on Base]: https://docs.base.org/tools/account-abstraction [Particle Network Documentation]: https://developers.particle.network [Particle Network 101: Developer Experience]: https://blog.particle.network/particle-network-101-developer-experience-edition +[Next.js]: https://nextjs.org/docs/getting-started/installation +[Particle AA SDK]: https://developers.particle.network/api-reference/aa/sdks/desktop/web +[Particle Docs]: https://developers.particle.network/api-reference/connect/desktop/web#use-eip-1193-provider-ethers-web3-js +[Particle Connect documentation]: https://developers.particle.network/api-reference/connect/desktop/web#configuration +[available hooks]: https://developers.particle.network/api-reference/connect/desktop/web#key-react-hooks-for-particle-connect +[Particle Connect Quickstart]: https://developers.particle.network/guides/wallet-as-a-service/waas/connect/web-quickstart