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..fb59c8e84 --- /dev/null +++ b/docs/sdk/pnp/web/modal/account-abstraction.mdx @@ -0,0 +1,120 @@ +--- +title: Account Abstraction +sidebar_label: 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. + +```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 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 + + + +## Advanced Smart Account Operations + +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 new file mode 100644 index 000000000..f60df184d --- /dev/null +++ b/docs/sdk/pnp/web/no-modal/account-abstraction.mdx @@ -0,0 +1,120 @@ +--- +title: Account Abstraction +sidebar_label: 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. + +```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 + + + +### Configure Signer + + + +## Smart Account Address + + + +## Send Transaction + + + +## Advanced Smart Account Operations + +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 92c46b3a0..7a5d0f32c 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", @@ -1151,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-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..b93b42764 --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-modal-setup.mdx @@ -0,0 +1,47 @@ +```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 }, +}); + + +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 +}); +``` 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..7415cdf42 --- /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 }, +}); + +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 +}); + + 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..802d08292 --- /dev/null +++ b/src/common/sdk/pnp/web/_aa-provider-installation.mdx @@ -0,0 +1,9 @@ +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/_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..322f59715 --- /dev/null +++ b/src/common/sdk/pnp/web/_account-abstraction-description.mdx @@ -0,0 +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. 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. 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](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 new file mode 100644 index 000000000..bdfada308 --- /dev/null +++ b/src/common/sdk/pnp/web/_bundler-configuration.mdx @@ -0,0 +1,122 @@ +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 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, + // 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 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, + // 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 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, + // 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..67d2eced7 --- /dev/null +++ b/src/common/sdk/pnp/web/_erc20-paymaster-configuration.mdx @@ -0,0 +1,111 @@ +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 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 + 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 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 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..9c6bae6ab --- /dev/null +++ b/src/common/sdk/pnp/web/_smart-account-provider-configuration.mdx @@ -0,0 +1,117 @@ +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 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/11155111/rpc?apikey=${pimlicoAPIKey}`, + }, + // focus-next-line + smartAccountInit: new SafeSmartAccount(), + }, +}); +``` + + + + + +```ts +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, + 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 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/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..64d4d89ed --- /dev/null +++ b/src/common/sdk/pnp/web/_sponsored-paymaster-configuration.mdx @@ -0,0 +1,135 @@ +import TabItem from "@theme/TabItem"; +import Tabs from "@theme/Tabs"; + + + + + +```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}`, + }, + 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 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 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 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 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 + }, +}); +``` + + + + 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`;