Merge pull request #963 from Web3Auth/gasless-guide

[AA] Add gasless transaction guide

src/pages/guides/sending-gasless-transaction.mdx

@@ -0,0 +1,208 @@
+---
+title: Send your first gasless transaction
+image: "guides-banners/gasless-transaction.png"
+description: Learn how to use gasless paymaster with Web3Auth Native Account Abstraction.
+type: guide
+tags: [pnp, account abstraction, web, paymaster, erc4337]
+date: October 22, 2024
+author: Web3Auth Team
+---
+
+import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx";
+import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
+import AASendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
+
+import SEO from "@site/src/components/SEO";
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
+<SEO
+  title="Send your first gasless transaction"
+  description="Learn how to use gasless paymaster with Web3Auth Native Account Abstraction."
+  image="https://web3auth.io/docs/guides-banners/gasless-transaction.png"
+  slug="/guides/sending-gassless-transaction"
+/>
+
+A paymaster is a vital component in the ERC-4337 standard, responsible for covering transaction
+costs on behalf of the user. There are various types of paymasters, such as gasless paymasters,
+ERC-20 paymasters, and more.
+
+In this guide, we'll talk about how you can use the Pimlico gasless Paymaster with Web3Auth Account
+Abstraction Provider to sponsor the transaction for your users without requiring the user to pay gas
+fees.
+
+For those who want to skip straight to the code, you can find it on
+[GitHub](https://github.com/Web3Auth/web3auth-pnp-examples/tree/main/web-modal-sdk/account-abstraction-examples/aa-modal-quick-start).
+
+## Prerequisites
+
+- Pimlico Account: Since we'll be using the Pimlico paymaster, you'll need to have an API key from
+  Pimlico. You can get a free API key from [Pimlico Dashboard](https://dashboard.pimlico.io/).
+- Web3Auth Dashboard: If you haven't already, sign up on the Web3Auth platform. It is free and gives
+  you access to the Web3Auth's base plan. Head to Web3Auth's documentation page for detailed
+  [instructions on setting up the Web3Auth Dashboard](docs/dashboard-setup).
+- Web3Auth PnP Web SDK: This guide assumes that you already know how to integrate the PnP Web SDK in
+  your project. If not, you can learn how to
+  [integrate Web3Auth in your Web app](/docs/sdk/pnp/web/).
+
+## Integrate AccountAbstractionProvider
+
+Once, you have set up the Web3Auth Dashboard, and created a new project, it's time to integrate
+Web3Auth Account Abstraction Provider in your Web application. For the implementation, we'll use the
+[@web3auth/account-abstraction-provider](https://www.npmjs.com/package/@web3auth/account-abstraction-provider).
+The provider simplifies the entire process by managing the complex logic behind configuring the
+account abstraction provider, bundler, and preparing user operations.
+
+If you are already using the Web3Auth Pnp SDK in your project, you just need to configure the
+AccountAbstractionProvider with the paymaster details, and pass it to the Web3Auth instance. No
+other changes are required.
+
+### Installation
+
+```bash
+npm install --save @web3auth/account-abstraction-provider
+```
+
+### Configure Paymaster
+
+The AccountAbstractionProvider requires specific configurations to function correctly. One key
+configuration is the paymaster. Web3Auth supports custom paymaster configurations, allowing you to
+deploy your own paymaster and integrate it with the provider.
+
+You can choose from a variety of paymaster services available in the ecosystem. In this guide, we'll
+be configuring the Pimlico's paymaster. However, it's important to note that paymaster support is
+not limited to the Pimlico, giving you the flexibility to integrate any compatible paymaster service
+that suits your requirements.
+
+For the simplicity, we have only use `SafeSmartAccount`, but you choose your favorite smart account
+provider from the available ones.
+[Learn how to configure the smart account](/docs/sdk/pnp/web/providers/aa-provider#configure-smart-account).
+
+```ts
+// focus-start
+import {
+  AccountAbstractionProvider,
+  SafeSmartAccount,
+} from "@web3auth/account-abstraction-provider";
+// focus-end
+
+const chainConfig = {
+  chainNamespace: CHAIN_NAMESPACES.EIP155,
+  chainId: "0xaa36a7",
+  rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+  displayName: "Ethereum Sepolia Testnet",
+  blockExplorerUrl: "https://sepolia.etherscan.io",
+  ticker: "ETH",
+  tickerName: "Ethereum",
+  logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+};
+
+// focus-start
+const accountAbstractionProvider = new AccountAbstractionProvider({
+  config: {
+    chainConfig,
+    bundlerConfig: {
+      // Get the pimlico API Key from dashboard.pimlico.io
+      url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`,
+    },
+    smartAccountInit: new SafeSmartAccount(),
+    paymasterConfig: {
+      // Get the pimlico API Key from dashboard.pimlico.io
+      url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`,
+    },
+  },
+});
+// focus-end
+```
+
+## Configure Web3Auth
+
+Once you have configured your `AccountAbstractionProvider`, you can now plug it in your Web3Auth
+Modal/No Modal instance. If you are using the external wallets like MetaMask, Coinbase, etc, you can
+define whether you want to use the AccountAbstractionProvider, or EthereumPrivateKeyProvider by
+setting the `useAAWithExternalWallet` in `IWeb3AuthCoreOptions`.
+
+If you are setting `useAAWithExternalWallet` to `true`, it'll create a new Smart Account for your
+user, where the signer/creator of the Smart Account would be the external wallet.
+
+If you are setting `useAAWithExternalWallet` to `false`, it'll skip creating a new Smart Account,
+and directly use the external wallet to sign the transactions.
+
+<Tabs
+  defaultValue="modal"
+  values={[
+    { label: "PnP Modal SDK", value: "modal" },
+    { label: "PnP No Modal SDK", value: "no-modal" },
+  ]}
+>
+
+<TabItem value="modal">
+
+```ts
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { Web3Auth } from "@web3auth/modal";
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  // Use the chain config we declared earlier
+  config: { chainConfig },
+});
+
+const web3auth = new Web3Auth({
+  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+  privateKeyProvider,
+  // Use the account abstraction provider we configured earlier
+  accountAbstractionProvider
+  // This will allow you to use EthereumPrivateKeyProvider for
+  // external wallets, while use the AccountAbstractionProvider
+  // for Web3Auth embedded wallets.
+  useAAWithExternalWallet: false,
+});
+```
+
+</TabItem>
+
+<TabItem value="no-modal">
+
+```ts
+import { Web3AuthNoModal } from "@web3auth/no-modal";
+import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
+import { AuthAdapter } from "@web3auth/auth-adapter";
+
+const privateKeyProvider = new EthereumPrivateKeyProvider({
+  config: { chainConfig },
+});
+
+const web3auth = new Web3AuthNoModal({
+  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
+  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
+  privateKeyProvider,
+  // Use the account abstraction provider we configured earlier
+  accountAbstractionProvider
+  // This will allow you to use EthereumPrivateKeyProvider for
+  // external wallets, while use the AccountAbstractionProvider
+  // for Web3Auth embedded wallets.
+  useAAWithExternalWallet: false,
+});
+
+const authadapter = new AuthAdapter();
+web3auth.configureAdapter(authadapter);
+```
+
+</TabItem>
+</Tabs>
+
+## Configure Signer
+
+<ConfigureSigners />
+
+## Send a transaction
+
+<AASendTransaction />
+
+## Conclusion
+
+Voila, you have successfully sent your first gasless transaction using the Pimlico paymaster with
+Web3Auth Account Abstraction Provider. To learn more about advance features of the Account
+Abstraction Provider like performing batch transactions, using ERC-20 paymaster you can refer to the
+[Account Abstraction Provider](/docs/sdk/pnp/web/providers/aa-provider) documentation.