Merge pull request #1017 from Web3Auth/paymaster-context

Add Paymaster Context documentation

Author: yashovardhan

docs/sdk/pnp/web/modal/account-abstraction.mdx

@@ -11,6 +11,7 @@ import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-a
 import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
 import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
 import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
+import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx";
 import AAModalSetup from "@site/src/common/sdk/pnp/web/_aa-modal-setup.mdx";
 import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
 import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
@@ -50,6 +51,10 @@ You can configure the paymaster of your choice to sponsor gas fees for your user
 paymaster context. The paymaster context lets you set additional parameters, such as choosing the
 token for ERC-20 paymasters, defining gas policies, and more.
 
+### Configure Paymaster Context
+
+<ConfigurePaymasterContext />
+
 ### Sponsored Paymaster
 
 <ConfigureSponsoredPaymaster />

docs/sdk/pnp/web/no-modal/account-abstraction.mdx

@@ -10,6 +10,7 @@ import AAProviderConfiguration from "@site/src/common/sdk/pnp/web/_aa-provider-c
 import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx";
 import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
 import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
+import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx";
 import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
 import AANoModalSetup from "@site/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx";
 import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
@@ -50,6 +51,9 @@ You can configure the paymaster of your choice to sponsor gas fees for your user
 paymaster context. The paymaster context lets you set additional parameters, such as choosing the
 token for ERC-20 paymasters, defining gas policies, and more.
 
+### Configure Paymaster Context
+
+<ConfigurePaymasterContext />
 ### Sponsored Paymaster
 
 <ConfigureSponsoredPaymaster />

src/common/sdk/pnp/web/_paymaster-context.mdx

@@ -0,0 +1,50 @@
+You can send additional metadata in the paymaster context to supply whatever information the
+Paymaster needs to process user operations. For instance, you might include the type of Paymaster
+(e.g., a Sponsored Paymaster versus an ERC-20-based Paymaster), references to specific tokens used
+for gas sponsorship, custom gas policies or limits, and any other parameters relevant to your
+sponsorship logic.
+
+To configure the paymaster context, you can use the `paymasterContext` property in the
+`bundlerConfig`.
+
+```ts
+import {
+  AccountAbstractionProvider,
+  SafeSmartAccount,
+} from "@web3auth/account-abstraction-provider";
+
+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",
+};
+
+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}`,
+      // focus-start
+      // This is just an example of how you can configure the paymaster context.
+      // Please refer to the documentation of the paymaster you are using
+      // to understand the required parameters.
+      paymasterContext: {
+        token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
+        sponsorshipPolicyId: "sp_my_policy_id",
+      },
+      // focus-end
+    },
+    smartAccountInit: new SafeSmartAccount(),
+    paymasterConfig: {
+      // Get the pimlico API Key from dashboard.pimlico.io
+      url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`,
+    },
+  },
+});
+```

src/common/sdk/providers/_aa-provider.mdx

@@ -7,6 +7,7 @@ import ConfigureSmartAccountProvider from "@site/src/common/sdk/pnp/web/_smart-a
 import ConfigureBundler from "@site/src/common/sdk/pnp/web/_bundler-configuration.mdx";
 import ConfigureSponsoredPaymaster from "@site/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx";
 import ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx";
+import ConfigurePaymasterContext from "@site/src/common/sdk/pnp/web/_paymaster-context.mdx";
 import AANoModalSetup from "@site/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx";
 import AAModalSetup from "@site/src/common/sdk/pnp/web/_aa-modal-setup.mdx";
 import AARNBareSetup from "@site/src/common/sdk/pnp/react-native/_aa-rn-setup.mdx";
@@ -47,6 +48,10 @@ You can configure the paymaster of your choice to sponsor gas fees for your user
 paymaster context. The paymaster context lets you set additional parameters, such as choosing the
 token for ERC-20 paymasters, defining gas policies, and more.
 
+### Configure Paymaster Context
+
+<ConfigurePaymasterContext />
+
 ### Sponsored Paymaster
 
 <ConfigureSponsoredPaymaster />