Skip to content

Commit afccd31

Browse files
AyushBherwani1998yashovardhan
AyushBherwani1998
authored and
yashovardhan
committed
update aa docs
1 parent 973bae5 commit afccd31

11 files changed

Lines changed: 408 additions & 44 deletions

File tree

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Overview
3+
sidebar_label: Overview
4+
description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
5+
---
6+
7+
import AccountAbstractionDescription from "@site/src/common/sdk/pnp/web/_account-abstraction-description.mdx";
8+
import GrowthPlanNote from "@site/src/common/docs/_growth_plan_note.mdx";
9+
10+
<AccountAbstractionDescription />
11+
<GrowthPlanNote />

‎docs/sdk/pnp/web/modal/account-abstraction/configure/dashboard.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Configure Dashboard
3+
sidebar_label: Configure Dashboard
4+
description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
5+
---
6+
7+
To enable the Smart Accounts feature, navigate to the Smart Accounts section in the Web3Auth
8+
dashboard, and enable the Set up Smart Accounts toggle. Web3Auth currently supports
9+
[MetaMaskSmartAccount](https://docs.gator.metamask.io/how-to/create-delegator-account#create-a-metamasksmartaccount)
10+
as a Smart Account provider.
11+
12+
![Enable Smart Accounts](/images/dashboard/smart-account/enable-smart-account.jpeg)
13+
14+
## Wallet configuration
15+
16+
Once Smart Accounts are enabled, the wallet configurations can be customized. By default,
17+
`All supported wallets` is selected, allowing users to also create Smart Accounts using external
18+
wallets.
19+
20+
To restrict this behavior, the configuration can be set to `Embedded wallets only`.
21+
22+
## Configure Bundler
23+
24+
Web3Auth allows developers to configure a custom bundler, which aggregates UserOperations and
25+
submits them on-chain via the global EntryPoint contract.
26+
27+
To define a paymaster context for an ERC-20 paymaster or to set specific paymaster policies, refer
28+
to the documentation on configuring the bundler through the code.
29+
30+
To configure the bundler, navigate to the `Bundler & Paymaster` tab within the `Smart Accounts`
31+
section. The bundler url must be added for each supported chain.
32+
33+
![Configure Bundler](/images/dashboard/smart-account/configure-bundler.jpeg)
34+
35+
## Configure Paymaster
36+
37+
Web3Auth allows developers to configure a paymaster of their choice to sponsor gas fees on behalf of
38+
users. To define a paymaster context or set additional parameters, such as selecting the token for
39+
ERC-20 paymasters, specifying gas policies, and more, refer to the documentation on configuring the
40+
paymaster through code.
41+
42+
To configure a paymaster via the dashboard, navigate to the `Bundler & Paymaster` tab under the
43+
`Smart Accounts` section. The paymaster url must be added for each supported chain.
44+
45+
:::info
46+
47+
Currently, the sponsored paymaster can only be configured via the dashboard. For ERC-20 paymaster,
48+
refer to the documentation on configuring the paymaster through code.
49+
50+
:::
51+
52+
![Configure Paymaster](/images/dashboard/smart-account/configure-paymaster.jpeg)

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Configure SDK
3+
sidebar_label: Configure SDK
4+
description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
5+
---
6+
7+
While the dashboard provides a convenient way to configure Smart Accounts, the SDK offers greater
8+
flexibility by allowing developers to override these settings. It supports advanced configurations
9+
such as specifying an ERC-20 paymaster, defining the paymaster context, and setting additional
10+
parameters like sponsorship policies.
11+
12+
## Override Paymaster Context
13+
14+
The Web3Auth SDK allows developers to override the paymaster context defined in the dashboard for
15+
specified chains. This is particularly useful when the selected paymaster requires a custom
16+
paymaster context with additional settings.
17+
18+
Developers can pass metadata within the paymaster context to provide the information needed to
19+
process UserOperations. This may include the type of paymaster (e.g., Sponsored or ERC-20-based),
20+
token references for gas sponsorship, custom gas policies or limits, and any other parameters
21+
relevant to the sponsorship logic.
22+
23+
:::info
24+
25+
Please note that the paymaster context must be manually configured for each chain that needs to be
26+
supported.
27+
28+
:::
29+
30+
```ts
31+
import { WEB3AUTH_NETWORK, Web3AuthOptions } from "@web3auth/modal";
32+
33+
const web3AuthOptions: Web3AuthOptions = {
34+
clientId: "YOUR_CLIENT_ID",
35+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
36+
// focus-start
37+
accountAbstractionConfig: {
38+
smartAccountType: "metamask",
39+
chains: [
40+
{
41+
chainId: "0x1",
42+
bundlerConfig: {
43+
url: "YOUR_BUNDLER_URL",
44+
// This is just an example of how you can configure the paymaster context.
45+
// Please refer to the documentation of the paymaster you are using
46+
// to understand the required parameters.
47+
paymasterContext: {
48+
token: "SUPPORTED_TOKEN_CONTRACT_ADDRESS",
49+
sponsorshipPolicyId: "sp_my_policy_id",
50+
},
51+
},
52+
},
53+
],
54+
},
55+
// focus-end
56+
};
57+
```

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

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
---
2+
title: Usage
3+
sidebar_label: Usage
4+
description: "@web3auth/modal Native Account Abstraction | Documentation - Web3Auth"
5+
---
6+
7+
import Tabs from "@theme/Tabs";
8+
import TabItem from "@theme/TabItem";
9+
10+
import ConfigureSigners from "@site/src/common/sdk/pnp/web/_configure-aa-signers.mdx";
11+
import SmartAccountAddress from "@site/src/common/sdk/pnp/web/_aa-address.mdx";
12+
import SmartAccountSendTransaction from "@site/src/common/sdk/pnp/web/_aa-send-transaction.mdx";
13+
14+
// TODO: Add section that Wagmi doesn't require any configuration for signer.
15+
16+
### Configure Signer
17+
18+
<ConfigureSigners />
19+
20+
## Smart Account Address
21+
22+
<SmartAccountAddress />
23+
24+
## Send Transaction
25+
26+
<SmartAccountSendTransaction />
27+
28+
## Sign transaction
29+
30+
Developers have the option to sign a transaction without immediately sending it. If it is the user's
31+
first transaction, the `UserOperation` calldata will automatically include the required deployment
32+
data to create the user's Smart Account on-chain.
33+
34+
:::info
35+
36+
Wagmi doesn't have hooks for signing transactions yet.
37+
38+
:::
39+
40+
<Tabs
41+
defaultValue="viem"
42+
values={[
43+
{ label: "Viem", value: "viem" },
44+
{ label: "Ethers", value: "ethers" },
45+
]}
46+
>
47+
48+
<TabItem value="ethers">
49+
50+
```tsx
51+
// Convert 1 ether to WEI format
52+
const amount = parseEther("1");
53+
54+
const signature = await signer.signTransaction({
55+
to: "DESTINATION_ADDRESS",
56+
value: amount,
57+
});
58+
```
59+
60+
</TabItem>
61+
<TabItem value="viem">
62+
63+
```tsx
64+
// Convert 1 ether to WEI format
65+
const amount = parseEther("1");
66+
const addresses = await walletClient.getAddresses();
67+
68+
const request = await walletClient.prepareTransactionRequest({
69+
account: addresses[0],
70+
to: "DESTINATION_ADDRESS",
71+
value: amount,
72+
});
73+
74+
const signature = await walletClient.signTransaction(request as any);
75+
```
76+
77+
</TabItem>
78+
</Tabs>
79+
80+
## Sign Message
81+
82+
Message signing is also supported with Smart Accounts; however, the signature and verification
83+
process differs from that of Externally Owned Accounts (EOAs). Smart Accounts adhere to the EIP-1271
84+
standard for signature verification, utilizing the isValidSignature method defined in the smart
85+
contract wallet, rather than relying on the ecrecover function used by EOAs.
86+
87+
[Learn more about EIP 1271](https://eips.ethereum.org/EIPS/eip-1271).
88+
89+
<Tabs
90+
defaultValue="viem"
91+
values={[
92+
{ label: "Viem", value: "viem" },
93+
{ label: "Ethers", value: "ethers" },
94+
{ label: "Wagmi", value: "wagmi" },
95+
]}
96+
>
97+
98+
<TabItem value="wagmi">
99+
100+
```tsx
101+
import { useSignMessage } from "wagmi";
102+
const { data: signature, signMessage } = useSignMessage();
103+
104+
const message = "YOUR_MESSAGE";
105+
106+
signMessage({ message });
107+
108+
// Use signature as needed
109+
```
110+
111+
</TabItem>
112+
<TabItem value="ethers">
113+
114+
```tsx
115+
const originalMessage = "YOUR_MESSAGE";
116+
117+
// Sign the message
118+
const signedMessage = await signer.signMessage(originalMessage);
119+
```
120+
121+
</TabItem>
122+
<TabItem value="viem">
123+
124+
```tsx
125+
const originalMessage = "YOUR_MESSAGE";
126+
127+
const addresses = await walletClient.getAddresses();
128+
129+
const signedMessage = await walletClient.signMessage({
130+
account: address[0],
131+
message: originalMessage,
132+
});
133+
```
134+
135+
</TabItem>
136+
</Tabs>
137+
138+
## Send Batch Transaction
139+
140+
One of the key features of Smart Accounts is the ability to perform batch transactions.
141+
Traditionally, if a user wants to swap Token A for Token B, they must first approve Token A and then
142+
execute the swap in a separate transaction. With batch transaction support in Smart Accounts, both
143+
steps can be combined into a single UserOperation.
144+
145+
Executing a batch transaction differs slightly from the standard transaction flow. To perform it,
146+
developers must use the `BundlerClient` provided by Web3Auth. The default Web3Auth provider instance
147+
cannot be used for this purpose, as it is a proxy designed to work seamlessly with common signer
148+
libraries for basic operations.
149+
150+
When calling `sendUserOperation`, it returns a UserOperation hash, which is the keccak256 hash of
151+
the entire user operation, not the transaction hash. To retrieve the final transaction details,
152+
developers must use the `waitForUserOperationReceipt` method. This function waits for the
153+
UserOperation to be included in a block and returns a complete receipt, including the entryPoint,
154+
blockNumber, blockHash, and the actual transactionHash.
155+
156+
```ts
157+
// Use your Web3Auth instance
158+
const accountAbstractionProvider = web3auth.accountAbstractionProvider;
159+
// Use the same accountAbstractionProvider we created earlier.
160+
const bundlerClient = accountAbstractionProvider.bundlerClient!;
161+
const smartAccount = accountAbstractionProvider.smartAccount!;
162+
163+
// 0.00001 ETH in WEI format
164+
const amount = 10000000000000n;
165+
166+
const userOpHash = await bundlerClient.sendUserOperation({
167+
account: smartAccount,
168+
calls: [
169+
{
170+
to: "DESTINATION_ADDRESS",
171+
value: amount,
172+
data: "0x",
173+
},
174+
{
175+
to: "DESTINATION_ADDRESS",
176+
value: amount,
177+
data: "0x",
178+
},
179+
],
180+
});
181+
182+
// Retrieve user operation receipt
183+
const receipt = await bundlerClient.waitForUserOperationReceipt({
184+
hash: userOpHash,
185+
});
186+
187+
const transactionHash = receipt.receipt.transactionHash;
188+
```
189+
190+
## Send transaction using ERC-20 Paymaster
191+
192+
To submit a transaction using an ERC-20 paymaster, the associated ERC-20 token must first be
193+
approved for use by the paymaster. Ideally, the application should first check the existing token
194+
allowance and only initiate an approval transaction if the allowance is insufficient.
195+
196+
Modifying the token allowance requires a write operation on the ERC-20 token contract. In the
197+
example below, Pimlico is used as the paymaster, but developers should update the paymaster and
198+
ERC-20 token addresses to match their specific implementation. To use an ERC-20 paymaster, refer to
199+
the configuration guide for
200+
[ERC-20 paymaster context.](/docs/sdk/pnp/web/modal/account-abstraction/configure/sdk).
201+
202+
```ts
203+
// Use your Web3Auth instance
204+
const accountAbstractionProvider = web3auth.accountAbstractionProvider;
205+
206+
// Use the same accountAbstractionProvider we created earlier.
207+
const bundlerClient = accountAbstractionProvider.bundlerClient!;
208+
const smartAccount = accountAbstractionProvider.smartAccount!;
209+
210+
// Pimlico's ERC-20 Paymaster address
211+
const pimlicoPaymasterAddress = "0x0000000000000039cd5e8aE05257CE51C473ddd1";
212+
213+
// USDC address on Ethereum Sepolia
214+
const usdcAddress = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238";
215+
216+
// 0.00001 ETH in WEI format
217+
const amount = 10000000000000n;
218+
219+
// 10 USDC in WEI format. Since USDC has 6 decimals, 10 * 10^6
220+
const approvalAmount = 10000000n;
221+
222+
const userOpHash = await bundlerClient.sendUserOperation({
223+
account: smartAccount,
224+
calls: [
225+
// Approve USDC on Sepolia chain for Pimlico's ERC 20 Paymaster
226+
{
227+
to: usdcAddress,
228+
abi: parseAbi(["function approve(address,uint)"]),
229+
functionName: "approve",
230+
args: [pimlicoPaymasterAddress, approvalAmount],
231+
},
232+
{
233+
to: "DESTINATION_ADDRESS",
234+
value: amount,
235+
data: "0x",
236+
},
237+
{
238+
to: "DESTINATION_ADDRESS",
239+
value: amount,
240+
data: "0x",
241+
},
242+
],
243+
});
244+
245+
// Retrieve user operation receipt
246+
const receipt = await bundlerClient.waitForUserOperationReceipt({
247+
hash: userOpHash,
248+
});
249+
250+
const transactionHash = receipt.receipt.transactionHash;
251+
```

0 commit comments

Comments
 (0)