From 956581426ec410edbf8769ff4860bdf774163e53 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Fri, 11 Oct 2024 11:05:40 +0530 Subject: [PATCH 1/2] add native account abstraction --- .../sdk/pnp/web/modal/account-abstraction.mdx | 84 +++++++++++++++ .../pnp/web/no-modal/account-abstraction.mdx | 84 +++++++++++++++ sidebars.ts | 2 + src/common/sdk/pnp/web/_aa-address.mdx | 47 ++++++++ src/common/sdk/pnp/web/_aa-modal-setup.mdx | 46 ++++++++ src/common/sdk/pnp/web/_aa-no-modal-setup.mdx | 49 +++++++++ .../sdk/pnp/web/_aa-provider-installation.mdx | 8 ++ .../sdk/pnp/web/_aa-send-transaction.mdx | 76 +++++++++++++ .../web/_account-abstraction-description.mdx | 14 +++ .../sdk/pnp/web/_bundler-configuration.mdx | 89 +++++++++++++++ .../sdk/pnp/web/_configure-aa-signers.mdx | 59 ++++++++++ .../web/_erc20-paymaster-configuration.mdx | 89 +++++++++++++++ .../_smart-account-provider-configuration.mdx | 82 ++++++++++++++ .../_sponsored-paymaster-configuration.mdx | 102 ++++++++++++++++++ 14 files changed, 831 insertions(+) create mode 100644 docs/sdk/pnp/web/modal/account-abstraction.mdx create mode 100644 docs/sdk/pnp/web/no-modal/account-abstraction.mdx create mode 100644 src/common/sdk/pnp/web/_aa-address.mdx create mode 100644 src/common/sdk/pnp/web/_aa-modal-setup.mdx create mode 100644 src/common/sdk/pnp/web/_aa-no-modal-setup.mdx create mode 100644 src/common/sdk/pnp/web/_aa-provider-installation.mdx create mode 100644 src/common/sdk/pnp/web/_aa-send-transaction.mdx create mode 100644 src/common/sdk/pnp/web/_account-abstraction-description.mdx create mode 100644 src/common/sdk/pnp/web/_bundler-configuration.mdx create mode 100644 src/common/sdk/pnp/web/_configure-aa-signers.mdx create mode 100644 src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx create mode 100644 src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx create mode 100644 src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx diff --git a/docs/sdk/pnp/web/modal/account-abstraction.mdx b/docs/sdk/pnp/web/modal/account-abstraction.mdx new file mode 100644 index 000000000..b753b8562 --- /dev/null +++ b/docs/sdk/pnp/web/modal/account-abstraction.mdx @@ -0,0 +1,84 @@ +--- +title: Native Account Abstraction +sidebar_label: Native Account Abstraction +description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx"; +import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx"; +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 ConfigureERC20Paymaster from "@site/src/common/sdk/pnp/web/_erc20-paymaster-configuration.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"; +import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx"; + +import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; + + + + +## Installation + + + +## Configure + +When instantiating the Account Abstraction Provider, you can pass configuration objects to the +constructor. These configuration options allow you to select the desired Account Abstraction (AA) +provider, as well as configure the bundler and paymaster, giving you flexibility and control over +the provider. + +Please note this is the important step for setting the Web3Auth account abstraction provider. + +## Configure Smart Account Provider + + + +## Configure Bundler + + + +## Configure Paymaster + +You can configure the paymaster of your choice to sponsor gas fees for your users, along with the +paymaster context. The paymaster context lets you set additional parameters, such as choosing the +token for ERC-20 paymasters, defining gas policies, and more. + +### Sponsored Paymaster + + + +### ERC-20 Paymaster + + + +## Set up + +Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth Modal +instance. If you are also using the external wallets, you can define whether you want to use the +AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the `useAAWithExternalWallet` +in `Web3AuthOptions`. + +### Configure Web3Auth Instance + + + +### Configure Signer + + + +## Smart Account Address + + + +## Send Transaction + + + +## Advance + +To learn more about supported transaction methods, and how to perform batch transactions, checkout +our detailed documentation of AccountAbstractionProvider. diff --git a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx new file mode 100644 index 000000000..f3267633a --- /dev/null +++ b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx @@ -0,0 +1,84 @@ +--- +title: Native Account Abstraction +sidebar_label: Native Account Abstraction +description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx"; +import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx"; +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 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"; +import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx"; +import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx"; + +import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; + + + + +## Installation + + + +## Configure + +When instantiating the Account Abstraction Provider, you can pass configuration objects to the +constructor. These configuration options allow you to select the desired Account Abstraction (AA) +provider, as well as configure the bundler and paymaster, giving you flexibility and control over +the provider. + +Please note this is the important step for setting the Web3Auth account abstraction provider. + +## Configure Smart Account Provider + + + +## Configure Bundler + + + +## Configure Paymaster + +You can configure the paymaster of your choice to sponsor gas fees for your users, along with the +paymaster context. The paymaster context lets you set additional parameters, such as choosing the +token for ERC-20 paymasters, defining gas policies, and more. + +### Sponsored Paymaster + + + +### ERC-20 Paymaster + + + +## Set up + +Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth No +Modal instance. If you are also using the external wallets, you can define whether you want to use +the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the +`useAAWithExternalWallet` in `IWeb3AuthCoreOptions`. + +### Configure Web3Auth Instance + + + +### Configure Signer + + + +## Smart Account Address + + + +## Send Transaction + + + +## Advance + +To learn more about supported transaction methods, and how to perform batch transactions, checkout +our detailed documentation of AccountAbstractionProvider. diff --git a/sidebars.ts b/sidebars.ts index 92c46b3a0..9f002f983 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1088,6 +1088,7 @@ const sidebars: SidebarsConfig = { collapsed: false, label: "Additional Settings", items: [ + "sdk/pnp/web/modal/account-abstraction", "sdk/pnp/web/modal/whitelabel", "sdk/pnp/web/modal/custom-authentication", "sdk/pnp/web/modal/mfa", @@ -1113,6 +1114,7 @@ const sidebars: SidebarsConfig = { collapsed: false, label: "Additional Settings", items: [ + "sdk/pnp/web/no-modal/account-abstraction", "sdk/pnp/web/no-modal/whitelabel", "sdk/pnp/web/no-modal/custom-authentication", "sdk/pnp/web/no-modal/mfa", diff --git a/src/common/sdk/pnp/web/_aa-address.mdx b/src/common/sdk/pnp/web/_aa-address.mdx new file mode 100644 index 000000000..031ddd644 --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-address.mdx @@ -0,0 +1,47 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Once, you have set up the signer, you can use it to retreive the user's smart account address. + + + + + +```tsx +// Use walletClient instance from previous step +const addresses = await walletClient.getAddresses(); + +const smartAccountAddress = addresses[0]; +const eoaAddress = addresses[1]; +``` + + + + + +```tsx +// User signer from previous step +const smartAccountAddress = signer.getAddress(); +``` + + + + + +```tsx +// Use web3 instance from previous step +const addresses = await web3.eth.getAccounts(); + +const smartAccountAddress = addresses[0]; +const eoaAddress = addresses[1]; +``` + + + diff --git a/src/common/sdk/pnp/web/_aa-modal-setup.mdx b/src/common/sdk/pnp/web/_aa-modal-setup.mdx new file mode 100644 index 000000000..d940376cc --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-modal-setup.mdx @@ -0,0 +1,46 @@ +```ts +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; +import { AccountAbstractionProvider, SafeSmartAccount } from "@web3auth/account-abstraction-provider"; +import { Web3Auth } from "@web3auth/modal"; + +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/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + smartAccountInit: new SafeSmartAccount(), + } +}); +// focus-end + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +// focus-start +const web3auth = new Web3Auth({ + clientId: "YOUR_WEB3AUTH_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, + accountAbstractionProvider + // This will allow you to use EthereumPrivateKeyProvider for + // external wallets, while use the AccountAbstractionProvider + // for Web3Auth embedded wallets. + useAAWithExternalWallet: false, +}); + // focus-end +``` diff --git a/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx b/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx new file mode 100644 index 000000000..ac00d590f --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx @@ -0,0 +1,49 @@ +```ts +import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; +import { AccountAbstractionProvider, SafeSmartAccount } from "@web3auth/account-abstraction-provider"; +import { Web3AuthNoModal } from "@web3auth/no-modal"; + +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/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + smartAccountInit: new SafeSmartAccount(), + } +}); +// focus-end + +const privateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + +// focus-start +const web3auth = new Web3AuthNoModal({ + clientId: "YOUR_WEB3AUTH_CLIENT_ID", + web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, + privateKeyProvider, + accountAbstractionProvider + // This will allow you to use EthereumPrivateKeyProvider for + // external wallets, while use the AccountAbstractionProvider + // for Web3Auth embedded wallets. + useAAWithExternalWallet: false, +}); + // focus-end + + const authadapter = new AuthAdapter(); +web3auth.configureAdapter(authadapter); +``` diff --git a/src/common/sdk/pnp/web/_aa-provider-installation.mdx b/src/common/sdk/pnp/web/_aa-provider-installation.mdx new file mode 100644 index 000000000..5149493a0 --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-provider-installation.mdx @@ -0,0 +1,8 @@ +To use native account abstraction, you'll need to install the account-abstraction-provider, which +allows you to create and interact with Smart Contract Wallets (SCWs). This provider simplifies the +entire process by managing the complex logic behind configuring the account abstraction provider, +bundler, and preparing user operations. + +```bash npm2yarn +npm install --save @web3auth/account-abstraction-provider +``` diff --git a/src/common/sdk/pnp/web/_aa-send-transaction.mdx b/src/common/sdk/pnp/web/_aa-send-transaction.mdx new file mode 100644 index 000000000..ddf83dc17 --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-send-transaction.mdx @@ -0,0 +1,76 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +You can use your signer to submit on-chain transactions, while the Account Abstraction Provider +handles the creation and submission of the UserOperation. You only need to pass `to`, `data`, and +`value`; other parameters will be discarded and overridden by the provider. + +The bundler client determines `maxFeePerGas` and `maxPriorityFeePerGas` to prevent transaction +rejections. If you'd like to specify custom values, you can use +`AccountAbstractionProvider.bundlerClient` to create and send the transaction. + +Smart Accounts are basically smart contract deployed on chain. Therefore, the user's first +transaction also deploys the smart contract for their wallet. + + + + + +```tsx +// Convert 1 ether to WEI format +const amount = web3.utils.toWei(1); + +// Submits a user operation to the blockchain +const receipt = await web3.eth.sendTransaction({ + to: "DESTINATION_ADDRESS", + value: amount, + // This will perform the transfer of ETH + data: "0x", +}); +``` + + + + +```tsx +// Convert 1 ether to WEI format +const amount = ethers.parseEther("1.0"); + +// Submits a user operation to the blockchain +const transaction = await signer.sendTransaction({ + to: "DESTINATION_ADDRESS", + value: amount, + // This will perform the transfer of ETH + data: "0x", +}); + +// Wait for the transaction to be mined +const receipt = await transaction.wait(); +``` + + + + +```tsx +// Convert 1 ether to WEI format +const amount = parseEther("1"); + +// Submits a user operation to the blockchain +const hash = await walletClient.sendTransaction({ + to: "DESTINATION_ADDRESS", + value: amount, +}); + +// Wait for the transaction to be mined +const receipt = await publicClient.waitForTransactionReceipt({ hash }); +``` + + + diff --git a/src/common/sdk/pnp/web/_account-abstraction-description.mdx b/src/common/sdk/pnp/web/_account-abstraction-description.mdx new file mode 100644 index 000000000..d1fdc13d3 --- /dev/null +++ b/src/common/sdk/pnp/web/_account-abstraction-description.mdx @@ -0,0 +1,14 @@ +Web3Auth offers seamless integration of Account Abstraction with just a few lines of code, making it +easier than ever to onboard users into decentralized applications. Our goal is to simplify and +streamline the entire process while ensuring users benefit from advanced functionality. With native +support for Account Abstraction, you can effortlessly create ERC-4337 compatible Smart Contract +Wallets (SCWs), giving users the ability to perform batch transactions and efficiently manage gas +sponsorship. + +Additionally, SCWs unlock advanced control and programmability for users. They enable the automation +of tasks such as swapping ETH to USDT when the price reaches $2,700, setting spending limits, and +utilizing multi-signature accounts for enhanced security. + +Web3Auth's native account abstraction gives you the flexibility to choose your preferred account +abstraction provider, configure your bundler client, and integrate your paymaster. For more insights +into how ERC-4337 works and its components, check out our detailed blog post. diff --git a/src/common/sdk/pnp/web/_bundler-configuration.mdx b/src/common/sdk/pnp/web/_bundler-configuration.mdx new file mode 100644 index 000000000..940a6f42f --- /dev/null +++ b/src/common/sdk/pnp/web/_bundler-configuration.mdx @@ -0,0 +1,89 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Web3Auth enables you to configure your bundler and define the paymaster context. The bundler +aggregates the UserOperations and submits them on-chain via a global entry point contract. + +Bundler support is not limited to the examples below—you can use any bundler of your choice. + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + // focus-start + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-end + smartAccountInit: new SafeSmartAccount(), + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + KernelSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + // focus-start + bundlerConfig: { + url: `https://rpc.zerodev.app/api/v2/bundler/${projectId}`, + }, + // focus-end + smartAccountInit: new KernelSmartAccount(), + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + // focus-start + bundlerConfig: { + // Get the Stackup API from app.stackup.sh + url: `https://public.stackup.sh/api/v1/node/ethereum-sepolia`, + }, + // focus-end + smartAccountInit: new SafeSmartAccount(), + }, +}); +``` + + + + diff --git a/src/common/sdk/pnp/web/_configure-aa-signers.mdx b/src/common/sdk/pnp/web/_configure-aa-signers.mdx new file mode 100644 index 000000000..0085705bc --- /dev/null +++ b/src/common/sdk/pnp/web/_configure-aa-signers.mdx @@ -0,0 +1,59 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +The Web3Auth AccountAbstractionProvider is compatible with popular signer SDKs, including ethers, +web3, and viem. You can choose your preferred package to configure the signer. + +You can retreive the provider to configure the signer from Web3Auth instance. + + + + + +```tsx +import { createWalletClient } from "viem"; + +// Use your Web3Auth instance to retreive the provider. +const provider = web3auth.provider; + +const walletClient = createWalletClient({ + transport: custom(provider), +}); +``` + + + + + +```tsx +import { ethers } from "ethers"; + +// Use your Web3Auth instance to retreive the provider. +const provider = web3auth.provider; + +const ethersProvider = new ethers.providers.Web3Provider(provider); +const signer = await ethersProvider.getSigner(); +``` + + + + + +```tsx +import Web3 from "web3"; + +// Use your Web3Auth instance to retreive the provider. +const provider = web3auth.provider; + +const web3 = new Web3(provider); +``` + + + diff --git a/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx b/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx new file mode 100644 index 000000000..838ff3788 --- /dev/null +++ b/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx @@ -0,0 +1,89 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +When using an ERC-20 paymaster, ensure you include the approval transaction, as Web3Auth does not +handle the approval internall. + + + + + +For Pimlico, you can specify the token you want to use in the paymasterContext. If you want to set +up sponsorship policies, you can define those in the paymasterContext as well. +[Checkout the supported tokens for ERC-20 Paymaster on Pimlico](https://docs.pimlico.io/infra/paymaster/erc20-paymaster/supported-tokens). + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +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 + paymasterContext: { + token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS", + }, + // focus-end + }, + smartAccountInit: new SafeSmartAccount(), + // focus-start + paymasterConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-end + }, +}); +``` + + + + + +For Stackup, you need to explicitly specify the type of paymaster you want to use in the +paymasterContext. +[Checkout the supported tokens for ERC-20 Paymaster on Stackup](https://docs.stackup.sh/docs/supported-erc-20-tokens). + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the Stackup API from app.stackup.sh + url: `https://public.stackup.sh/api/v1/node/ethereum-sepolia`, + // focus-start + paymasterContext: { + type: "erc20token", + token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS", + }, + // focus-end + }, + smartAccountInit: new SafeSmartAccount(), + // focus-start + paymasterConfig: { + // Get the Stackup API key from app.stackup.sh + url: `https://api.stackup.sh/v1/paymaster/${apiKey}`, + }, + // focus-end + }, +}); +``` + + + diff --git a/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx b/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx new file mode 100644 index 000000000..f08835671 --- /dev/null +++ b/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx @@ -0,0 +1,82 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +Web3Auth offers the flexibility to choose your preferred Account Abstraction (AA) provider. +Currently, we support Safe, Kernel, and Biconomy. + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-next-line + smartAccountInit: new SafeSmartAccount(), + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + KernelSmartAccount, +} from "@web3auth/account-abstraction-provider"; +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-next-line + smartAccountInit: new KernelSmartAccount(), + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + BiconomySmartAccount, +} from "@web3auth/account-abstraction-provider"; +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-next-line + smartAccountInit: new BiconomySmartAccount(), + }, +}); +``` + + + diff --git a/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx b/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx new file mode 100644 index 000000000..ae2be9835 --- /dev/null +++ b/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx @@ -0,0 +1,102 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +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(), + // focus-start + paymasterConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/${chainId}/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-end + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the ZeroDev API from https://dashboard.zerodev.app/ + url: `https://rpc.zerodev.app/api/v2/bundler/${projectId}`, + }, + smartAccountInit: new SafeSmartAccount(), + // focus-start + paymasterConfig: { + // Get the ZeroDev API from https://dashboard.zerodev.app/ + url: `https://rpc.zerodev.app/api/v2/paymaster/${projectId}`, + }, + // focus-end + }, +}); +``` + + + + + +```ts +import { + AccountAbstractionProvider, + SafeSmartAccount, +} from "@web3auth/account-abstraction-provider"; + +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the Stackup API from app.stackup.sh + url: `https://public.stackup.sh/api/v1/node/ethereum-sepolia`, + // focus-start + paymasterContext: { + type: "payg", + }, + // focus-start + }, + smartAccountInit: new SafeSmartAccount(), + // focus-start + paymasterConfig: { + // Get the Stackup API key from app.stackup.sh + url: `https://api.stackup.sh/v1/paymaster/${apiKey}`, + }, + // focus-end + }, +}); +``` + + + + From 9737aa5d7a30b42856c4113e2cff5b43afd87240 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Fri, 11 Oct 2024 16:25:23 +0530 Subject: [PATCH 2/2] improve aa provider docs --- .../sdk/pnp/web/modal/account-abstraction.mdx | 46 ++- .../pnp/web/no-modal/account-abstraction.mdx | 46 ++- docs/sdk/pnp/web/providers/aa-provider.mdx | 339 ++++++++++++++++++ sidebars.ts | 1 + src/common/sdk/pnp/web/_aa-modal-setup.mdx | 5 +- src/common/sdk/pnp/web/_aa-no-modal-setup.mdx | 4 +- .../sdk/pnp/web/_aa-provider-installation.mdx | 9 +- .../web/_account-abstraction-description.mdx | 18 +- .../sdk/pnp/web/_bundler-configuration.mdx | 33 ++ .../web/_erc20-paymaster-configuration.mdx | 22 ++ .../_smart-account-provider-configuration.mdx | 35 ++ .../_sponsored-paymaster-configuration.mdx | 33 ++ src/common/versions.ts | 2 +- 13 files changed, 566 insertions(+), 27 deletions(-) create mode 100644 docs/sdk/pnp/web/providers/aa-provider.mdx diff --git a/docs/sdk/pnp/web/modal/account-abstraction.mdx b/docs/sdk/pnp/web/modal/account-abstraction.mdx index b753b8562..fb59c8e84 100644 --- a/docs/sdk/pnp/web/modal/account-abstraction.mdx +++ b/docs/sdk/pnp/web/modal/account-abstraction.mdx @@ -1,6 +1,6 @@ --- -title: Native Account Abstraction -sidebar_label: Native Account Abstraction +title: Account Abstraction +sidebar_label: Account Abstraction description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth" --- @@ -31,8 +31,44 @@ constructor. These configuration options allow you to select the desired Account provider, as well as configure the bundler and paymaster, giving you flexibility and control over the provider. +```tsx +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", +}; + +// focus-start +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + smartAccountInit: new SafeSmartAccount(), + }, +}); +// focus-end +``` + Please note this is the important step for setting the Web3Auth account abstraction provider. +- [Configure Smart Account provider](#configure-smart-account-provider) +- [Configure Bundler](configure-bundler) +- [Configure Sponsored Paymaster](#sponsored-paymaster) +- [Configure ERC-20 Paymaster](#erc20-paymaster) + ## Configure Smart Account Provider @@ -78,7 +114,7 @@ in `Web3AuthOptions`. -## Advance +## Advanced Smart Account Operations -To learn more about supported transaction methods, and how to perform batch transactions, checkout -our detailed documentation of AccountAbstractionProvider. +To learn more about supported transaction methods, and how to perform batch transactions, +[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider). diff --git a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx index f3267633a..f60df184d 100644 --- a/docs/sdk/pnp/web/no-modal/account-abstraction.mdx +++ b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx @@ -1,6 +1,6 @@ --- -title: Native Account Abstraction -sidebar_label: Native Account Abstraction +title: Account Abstraction +sidebar_label: Account Abstraction description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth" --- @@ -31,8 +31,44 @@ constructor. These configuration options allow you to select the desired Account provider, as well as configure the bundler and paymaster, giving you flexibility and control over the provider. +```tsx +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", +}; + +// focus-start +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + smartAccountInit: new SafeSmartAccount(), + }, +}); +// focus-end +``` + Please note this is the important step for setting the Web3Auth account abstraction provider. +- [Configure Smart Account provider](#configure-smart-account-provider) +- [Configure Bundler](configure-bundler) +- [Configure Sponsored Paymaster](#sponsored-paymaster) +- [Configure ERC-20 Paymaster](#erc20-paymaster) + ## Configure Smart Account Provider @@ -78,7 +114,7 @@ the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the -## Advance +## Advanced Smart Account Operations -To learn more about supported transaction methods, and how to perform batch transactions, checkout -our detailed documentation of AccountAbstractionProvider. +To learn more about supported transaction methods, and how to perform batch transactions, +[checkout our detailed documentation of AccountAbstractionProvider](/docs/sdk/pnp/web/providers/aa-provider). diff --git a/docs/sdk/pnp/web/providers/aa-provider.mdx b/docs/sdk/pnp/web/providers/aa-provider.mdx new file mode 100644 index 000000000..386a6ec8b --- /dev/null +++ b/docs/sdk/pnp/web/providers/aa-provider.mdx @@ -0,0 +1,339 @@ +--- +title: Account Abstraction Provider +sidebar_label: Account Abstraction Provider +description: "@web3auth/no-modal Native Account Abstraction | Documentation - Web3Auth" +--- + +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + +import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx"; +import AccountAbstractionProviderInstallation from "@site/src/common/sdk/pnp/web/_aa-provider-installation.mdx"; +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 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 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"; +import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx"; + +import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx"; + +## Installation + + + +## Configure + +When instantiating the Account Abstraction Provider, you can pass configuration objects to the +constructor. These configuration options allow you to select the desired Account Abstraction (AA) +provider, as well as configure the bundler and paymaster, giving you flexibility and control over +the provider. + +```tsx +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", +}; + +// focus-start +const accountAbstractionProvider = new AccountAbstractionProvider({ + config: { + chainConfig, + bundlerConfig: { + // Get the pimlico API Key from dashboard.pimlico.io + url: `https://api.pimlico.io/v2/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + smartAccountInit: new SafeSmartAccount(), + }, +}); +// focus-end +``` + +Please note this is the important step for setting the Web3Auth account abstraction provider. + +- [Configure Smart Account provider](#configure-smart-account-provider) +- [Configure Bundler](configure-bundler) +- [Configure Sponsored Paymaster](#sponsored-paymaster) +- [Configure ERC-20 Paymaster](#erc20-paymaster) + +## Configure Smart Account Provider + + + +## Configure Bundler + + + +## Configure Paymaster + +You can configure the paymaster of your choice to sponsor gas fees for your users, along with the +paymaster context. The paymaster context lets you set additional parameters, such as choosing the +token for ERC-20 paymasters, defining gas policies, and more. + +### Sponsored Paymaster + + + +### ERC-20 Paymaster + + + +## Set up + +Once you have configured your AccountAbstractionProvider, you can now plug it in your Web3Auth No +Modal instance. If you are also using the external wallets, you can define whether you want to use +the AccountAbstractionProvider, or EthereumPrivateKeyProvider by setting the +`useAAWithExternalWallet` in `IWeb3AuthCoreOptions`. + +### Configure Web3Auth Instance + +Once, you have set up the signer, you can use it to retreive the user's smart account address. + + + + + + + + + + + + + + + + +### Configure Signer + + + +## Usage + +### Smart Account Address + + + +### Send Transaction + + + +### Sign transaction + +You can choose to sign a transaction without sending it. If it's the user's first transaction, the +calldata generated for the `UserOperation` will also include the necessary data to deploy a new +smart account for the user. + + + + + +```tsx +// Convert 1 ether to WEI format +const amount = web3.utils.toWei(1); + +const signature = await web3.eth.signTransaction({ + from: "YOUR_ACCOUNT_ADDRESS", + to: "DESTINATION_ADDRESS", + value: amount, +}); +``` + + + + +```tsx +// Convert 1 ether to WEI format +const amount = parseEther("1"); + +const signature = await signer.signTransaction({ + to: "DESTINATION_ADDRESS", + value: amount, +}); +``` + + + + +```tsx +// Convert 1 ether to WEI format +const amount = parseEther("1"); +const addresses = await walletClient.getAddresses(); + +const request = await walletClient.prepareTransactionRequest({ + account: addresses[0], + to: "DESTINATION_ADDRESS", + value: amount, +}); + +const signature = await walletClient.signTransaction(request as any); +``` + + + + +### Sign Message + +You can also sign messages using a smart account, though the signature and verification process +differs from EOA wallets. Smart accounts follow the EIP 1271 standard for verification, using the +`isValidSignature` method of the smart contract wallet, instead of the `ecrecover` function used by +EOAs. + +[Learn more about EIP 1271](https://eips.ethereum.org/EIPS/eip-1271). + + + + + +```tsx +const addresses = await web3.eth.getAccounts(); + +const originalMessage = "YOUR_MESSAGE"; + +const signedMessage = await web3.eth.personal.sign(originalMessage, addresses[0]); +``` + + + + +```tsx +const originalMessage = "YOUR_MESSAGE"; + +// Sign the message +const signedMessage = await signer.signMessage(originalMessage); +``` + + + + +```tsx +const originalMessage = "YOUR_MESSAGE"; + +const addresses = await walletClient.getAddresses(); + +const signedMessage = await walletClient.signMessage({ + account: address[0], + message: originalMessage, +}); +``` + + + + +### Send Batch Transaction + +One of the most exciting features of Smart Accounts is the ability to perform batch transactions. +Currently, if a user wants to swap Token A for Token B, they must first approve Token A and then +complete the swap. With the batch transaction functionality of Smart Accounts, both steps can be +combined into a single operation. + +Performing a batch transaction differs slightly from the normal flow. To execute a batch +transaction, you'll need to use the `BundlerClient` generated by the `AccountAbstractionProvider`. +The Web3Auth instance provider can't be used for this, as it's a proxy provider designed to ensure +compatibility with your preferred signer package for basic operations. + +```ts +// Use the same accountAbstractionProvider we created earlier. +const bundlerClient = accountAbstractionProvider.bundlerClient!; +const smartAccount = accountAbstractionProvider.smartAccount!; + +const amount = ethers.parseEther("0.00001"); + +const userOperationHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + ], +}); +``` + +### Send transaction using ERC-20 Paymaster + +To submit the transaction using ERC-20 paymaster, we'll require to first need to approve ERC-20 +token to be used by the paymaster. Ideally, we should first check the token allowance, and only +provide approve allowance to be used by the paymaster. + +To modify the token allowance, you'll need to perform a write operation on the ERC-20 contract. In +the example below, we're using Pimlico, but be sure to update the paymaster and ERC-20 token +addresses according to your specific case. For using ERC-20 Paymaster, refer to the configuration +for [Pimlico's ERC-20 paymaster in the AccountAbstractionProvider](/#erc-20-paymaster). + +```ts +// Use the same accountAbstractionProvider we created earlier. +const bundlerClient = accountAbstractionProvider.bundlerClient!; +const smartAccount = accountAbstractionProvider.smartAccount!; + +// Pimlico's ERC-20 Paymaster address +const pimlicoPaymasterAddress = "0x0000000000000039cd5e8aE05257CE51C473ddd1"; + +// USDC address on Ethereum Sepolia +const usdcAddress = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238"; + +const amount = ethers.parseEther("0.00001"); + +const tx = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + // Approve USDC on Sepolia chain for Pimlico's ERC 20 Paymaster + { + to: usdcAddress, + abi: parseAbi(["function approve(address,uint)"]), + functionName: "approve", + args: [pimlicoPaymasterAddress, maxUint256], + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + { + to: "DESTINATION_ADDRESS", + value: amount, + data: "0x", + }, + ], +}); +``` diff --git a/sidebars.ts b/sidebars.ts index 9f002f983..7a5d0f32c 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1153,6 +1153,7 @@ const sidebars: SidebarsConfig = { items: [ "sdk/pnp/web/providers/providers", "sdk/pnp/web/providers/evm", + "sdk/pnp/web/providers/aa-provider", "sdk/pnp/web/providers/solana", "sdk/pnp/web/providers/xrpl", "sdk/pnp/web/providers/common", diff --git a/src/common/sdk/pnp/web/_aa-modal-setup.mdx b/src/common/sdk/pnp/web/_aa-modal-setup.mdx index d940376cc..b93b42764 100644 --- a/src/common/sdk/pnp/web/_aa-modal-setup.mdx +++ b/src/common/sdk/pnp/web/_aa-modal-setup.mdx @@ -31,16 +31,17 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig }, }); -// focus-start + const web3auth = new Web3Auth({ clientId: "YOUR_WEB3AUTH_CLIENT_ID", web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, privateKeyProvider, + // focus-start accountAbstractionProvider // This will allow you to use EthereumPrivateKeyProvider for // external wallets, while use the AccountAbstractionProvider // for Web3Auth embedded wallets. useAAWithExternalWallet: false, + // focus-end }); - // focus-end ``` diff --git a/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx b/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx index ac00d590f..7415cdf42 100644 --- a/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx +++ b/src/common/sdk/pnp/web/_aa-no-modal-setup.mdx @@ -31,18 +31,18 @@ const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig }, }); -// focus-start const web3auth = new Web3AuthNoModal({ clientId: "YOUR_WEB3AUTH_CLIENT_ID", web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET, privateKeyProvider, + // focus-start accountAbstractionProvider // This will allow you to use EthereumPrivateKeyProvider for // external wallets, while use the AccountAbstractionProvider // for Web3Auth embedded wallets. useAAWithExternalWallet: false, + // focus-end }); - // focus-end const authadapter = new AuthAdapter(); web3auth.configureAdapter(authadapter); diff --git a/src/common/sdk/pnp/web/_aa-provider-installation.mdx b/src/common/sdk/pnp/web/_aa-provider-installation.mdx index 5149493a0..802d08292 100644 --- a/src/common/sdk/pnp/web/_aa-provider-installation.mdx +++ b/src/common/sdk/pnp/web/_aa-provider-installation.mdx @@ -1,7 +1,8 @@ -To use native account abstraction, you'll need to install the account-abstraction-provider, which -allows you to create and interact with Smart Contract Wallets (SCWs). This provider simplifies the -entire process by managing the complex logic behind configuring the account abstraction provider, -bundler, and preparing user operations. +To use native account abstraction, you'll need to install the +[@web3auth/account-abstraction-provider](https://www.npmjs.com/package/@web3auth/account-abstraction-provider), +which allows you to create and interact with Smart Contract Wallets (SCWs). This provider simplifies +the entire process by managing the complex logic behind configuring the account abstraction +provider, bundler, and preparing user operations. ```bash npm2yarn npm install --save @web3auth/account-abstraction-provider diff --git a/src/common/sdk/pnp/web/_account-abstraction-description.mdx b/src/common/sdk/pnp/web/_account-abstraction-description.mdx index d1fdc13d3..322f59715 100644 --- a/src/common/sdk/pnp/web/_account-abstraction-description.mdx +++ b/src/common/sdk/pnp/web/_account-abstraction-description.mdx @@ -1,14 +1,16 @@ Web3Auth offers seamless integration of Account Abstraction with just a few lines of code, making it easier than ever to onboard users into decentralized applications. Our goal is to simplify and -streamline the entire process while ensuring users benefit from advanced functionality. With native -support for Account Abstraction, you can effortlessly create ERC-4337 compatible Smart Contract -Wallets (SCWs), giving users the ability to perform batch transactions and efficiently manage gas -sponsorship. +streamline the entire process while ensuring users benefit from advanced functionality. Web3Auth +native account abstraction, we allow you to create and manage smart accounts using your favorite +libraries like Viem, Ethers, and Web3.js. With this, you don't need to rely on third party packages +to effortlessly create ERC-4337 compatible Smart Contract Wallets (SCWs), and give users the ability +to perform batch transactions and efficiently manage gas sponsorship. -Additionally, SCWs unlock advanced control and programmability for users. They enable the automation -of tasks such as swapping ETH to USDT when the price reaches $2,700, setting spending limits, and -utilizing multi-signature accounts for enhanced security. +Additionally, SCWs unlock advanced control and programmability for users. For instance, user can +automate tranaction such as swapping ETH to USDT when the price limit of ETH reaches $2,700, setting +spending limits, and utilizing multi-signature accounts for enhanced security. Web3Auth's native account abstraction gives you the flexibility to choose your preferred account abstraction provider, configure your bundler client, and integrate your paymaster. For more insights -into how ERC-4337 works and its components, check out our detailed blog post. +into how ERC-4337 works and its components, +[check out our detailed blog post](https://blog.web3auth.io/an-ultimate-guide-to-web3-wallets-externally-owned-account-and-smart-contract-wallet/#introduction-to-eip-4337). diff --git a/src/common/sdk/pnp/web/_bundler-configuration.mdx b/src/common/sdk/pnp/web/_bundler-configuration.mdx index 940a6f42f..bdfada308 100644 --- a/src/common/sdk/pnp/web/_bundler-configuration.mdx +++ b/src/common/sdk/pnp/web/_bundler-configuration.mdx @@ -23,6 +23,17 @@ import { 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, @@ -47,6 +58,17 @@ import { KernelSmartAccount, } 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, @@ -70,6 +92,17 @@ import { 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, diff --git a/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx b/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx index 838ff3788..67d2eced7 100644 --- a/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx +++ b/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx @@ -24,6 +24,17 @@ import { 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, @@ -61,6 +72,17 @@ import { 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, diff --git a/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx b/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx index f08835671..9c6bae6ab 100644 --- a/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx +++ b/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx @@ -21,6 +21,17 @@ import { 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, @@ -43,6 +54,18 @@ import { AccountAbstractionProvider, KernelSmartAccount, } 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, @@ -65,6 +88,18 @@ import { AccountAbstractionProvider, BiconomySmartAccount, } 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, diff --git a/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx b/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx index ae2be9835..64d4d89ed 100644 --- a/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx +++ b/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx @@ -18,6 +18,17 @@ import { 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, @@ -46,6 +57,17 @@ import { 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, @@ -74,6 +96,17 @@ import { 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, diff --git a/src/common/versions.ts b/src/common/versions.ts index 351e3ca4b..31cdf1e9c 100644 --- a/src/common/versions.ts +++ b/src/common/versions.ts @@ -1,4 +1,4 @@ -export const pnpWebVersion = `9.0.x`; +export const pnpWebVersion = `9.2.x`; export const pnpAndroidVersion = `8.0.3`; export const pnpIOSVersion = `9.0.0`; export const pnpRNVersion = `7.0.x`;