From 65be6d721eec51c4970664d99fb2900c652d4d13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAyushBherwani1998=E2=80=9D?= <“ayush.bherwani1998@gmail.com”> Date: Fri, 29 Aug 2025 21:54:30 +0530 Subject: [PATCH 1/6] add erc-20 paymaster tutorial --- .../tutorials/use-erc20-paymaster.md | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 delegation-toolkit/tutorials/use-erc20-paymaster.md diff --git a/delegation-toolkit/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md new file mode 100644 index 00000000000..283675a1efb --- /dev/null +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -0,0 +1,151 @@ +--- +description: Follow this tutorial to use ERC-20 paymaster. +sidebar_position: 1 +--- + +# Use an ERC-20 paymaster + +This tutorial walks you through using an ERC-20 paymaster with [MetaMask smart account](../concepts/smart-accounts), +enabling users to pay gas fees in USDC. This tutorial focus on Pimlico’s paymaster, but you can use any paymaster of your choice. + +## About ERC-20 paymaster + +The paymaster is an important component in the [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) standard, responsible for abstracting gas for the end user. +There are different types of paymasters, such as gasless paymasters, ERC-20 paymasters, and more. While a gasless +paymaster covers the transaction on behalf of the user, an ERC-20 paymaster allows users to pay gas fees using a +supported ERC-20 token. + +This removes the need for users to hold native tokens and enables a seamless experience, allowing them to perform on +chain actions using only stablecoins. + +## Prerequisites + +- [Install and set up the Delegation Toolkit](../get-started/install) in your project. +- [Configure the Delegation Toolkit](../guides/configure). +- [Create a Hybrid smart account,](../guides/smart-accounts/create-smart-account). +- [Create Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key). +- Have some USDC in smart account to pay gas fees. + :::note + You can use [Circle's Faucet](https://faucet.circle.com/) to get Sepolia USDC. + ::: + +## Steps + +### 1. Create a Public Client + +Create a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. +You will configure a smart account and Bundler Client with the Public Client, which you can use to query the signer's account state and interact with the blockchain network. + +```typescript +import { createPublicClient, http } from "viem"; +import { sepolia as chain } from "viem/chains"; + +const publicClient = createPublicClient({ + chain, + transport: http(), +}); +``` + +### 2. Create a Paymaster Client + +Create a [Viem Paymaster Client](https://viem.sh/account-abstraction/clients/paymaster) +using Viem’s `createPaymasterClient` function. This client interacts with the paymaster service, enabling users to pay gas fees in USDC. + +Replace `` with your Pimlico API key. + +```typescript +import { createPaymasterClient } from "viem/account-abstraction"; + +const bundlerClient = createBundlerClient({ + transport: http("https://api.pimlico.io/v2/11155111/rpc?apikey="), +}); +``` + +### 3. Create a Bundler Client + +Create a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. You can use the bundler service to estimate gas for user operations and submit transactions to the network. + +To use an ERC-20 Paymaster, you need to configure the `paymasterContext` which allows you to specify the ERC-20 token that will be used to pay for the gas fees. For this tutorial, you'll use the USDC token. + +```typescript +import { createBundlerClient } from "viem/account-abstraction"; + +// USDC address on Ethereum Sepolia +const token = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238"; + +const bundlerClient = createBundlerClient({ + client: publicClient, + transport: http("https://your-bundler-rpc.com"), + paymasterContext: { + token, + } +}); +``` + + +### 4. Create a Hybrid smart account + +Configures a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account), which is a flexible smart account implementation +that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. + +See [Create a MetaMask smart account](../guides/smart-accounts/create-smart-account) to learn more about smart account implementations. + +```typescript +import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; +import { privateKeyToAccount } from "viem/accounts"; + +const account = privateKeyToAccount("0x..."); + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [account.address, [], [], []], + deploySalt: "0x", + signatory: { account }, +}); +``` + +### 5. Send a user operation + +ERC-20 paymaster works by transfering the token from the smart account, and reimbursing itself for paying the gas fees +on the user's behalf. To send a user operation using ERC-20 paymaster, you'll first need to approve ERC-20 token to be +used by the paymaster. + +To modify the token allowance for the paymaster, you’ll perform a write operation on the USDC contract. In this tutorial, you set an allowance of 10 USDC tokens. However, in a production dApp, you should first check the existing token allowance and only approve the amount required by the paymaster. + +Now, send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method from Bundler Client. Make sure to batch the approve call with other on chain interactions you want to perform. + +```typescript +// Appropriate fee per gas must be determined for the specific bundler being used. +const maxFeePerGas = 1n; +const maxPriorityFeePerGas = 1n; + +const pimlicoPaymasterAddress = "0x777777777777AeC03fd955926DbF81597e66834C"; + +// 10 USDC in wei format. Since USDC has 6 decimals, the wei value is 10 * 10^6 +const approvalAmount = 10000000n; + +const userOperationHash = await bundlerClient.sendUserOperation({ + account: smartAccount, + calls: [ + // USDC approve call + { + // USDC token address + to: token, + abi: parseAbi(["function approve(address,uint)"]), + functionName: "approve", + args: [pimlicoPaymasterAddress, approvalAmount], + } + { + to: "0x1234567890123456789012345678901234567890", + value: parseEther("1"), + }, + ], + maxFeePerGas, + maxPriorityFeePerGas, +}); +``` + +## Next steps + +- See [Send a gasless transaction](../guides/smart-accounts/send-gasless-transaction.md) to learn how to use gasless paymaster. \ No newline at end of file From 67d2d05b98fff85a12aeb95a59bbe0962f1f0c18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAyushBherwani1998=E2=80=9D?= <“ayush.bherwani1998@gmail.com”> Date: Fri, 29 Aug 2025 21:55:40 +0530 Subject: [PATCH 2/6] merge with main --- delegation-toolkit/tutorials/create-custom-caveat-enforcer.md | 2 +- delegation-toolkit/tutorials/use-erc20-paymaster.md | 2 +- delegation-toolkit/tutorials/use-passkey-as-backup-signer.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/delegation-toolkit/tutorials/create-custom-caveat-enforcer.md b/delegation-toolkit/tutorials/create-custom-caveat-enforcer.md index ab8d24a0774..d96e28b5ab1 100644 --- a/delegation-toolkit/tutorials/create-custom-caveat-enforcer.md +++ b/delegation-toolkit/tutorials/create-custom-caveat-enforcer.md @@ -1,6 +1,6 @@ --- description: Follow this tutorial to create, deploy, and apply a custom caveat enforcer for a delegation. -sidebar_position: 2 +sidebar_position: 3 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md index 283675a1efb..2265e2d3899 100644 --- a/delegation-toolkit/tutorials/use-erc20-paymaster.md +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -1,5 +1,5 @@ --- -description: Follow this tutorial to use ERC-20 paymaster. +description: Follow this tutorial to use ERC-20 paymaster with MetaMask Smart Accounts. sidebar_position: 1 --- diff --git a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md index 4a92bf0374e..b34fd08c5c4 100644 --- a/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md +++ b/delegation-toolkit/tutorials/use-passkey-as-backup-signer.md @@ -1,6 +1,6 @@ --- description: Follow this tutorial to use a passkey as a backup signer with a Hybrid MetaMask smart account. -sidebar_position: 1 +sidebar_position: 2 --- # Use a passkey as a backup signer From d193cffb03eb7b6c0e3aca47912994d749b68fa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAyushBherwani1998=E2=80=9D?= <“ayush.bherwani1998@gmail.com”> Date: Fri, 29 Aug 2025 22:00:32 +0530 Subject: [PATCH 3/6] fix typo --- delegation-toolkit/tutorials/use-erc20-paymaster.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/delegation-toolkit/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md index 2265e2d3899..87d919649ec 100644 --- a/delegation-toolkit/tutorials/use-erc20-paymaster.md +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -56,7 +56,7 @@ Replace `` with your Pimlico API key. ```typescript import { createPaymasterClient } from "viem/account-abstraction"; -const bundlerClient = createBundlerClient({ +const bundlerClient = createPaymasterClient({ transport: http("https://api.pimlico.io/v2/11155111/rpc?apikey="), }); ``` From f5cadc91d30b4f56962f164543b95120f3a3a2b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9CAyushBherwani1998=E2=80=9D?= <“ayush.bherwani1998@gmail.com”> Date: Fri, 29 Aug 2025 22:06:22 +0530 Subject: [PATCH 4/6] improve steps --- delegation-toolkit/tutorials/use-erc20-paymaster.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/delegation-toolkit/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md index 87d919649ec..394ec437209 100644 --- a/delegation-toolkit/tutorials/use-erc20-paymaster.md +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -56,7 +56,7 @@ Replace `` with your Pimlico API key. ```typescript import { createPaymasterClient } from "viem/account-abstraction"; -const bundlerClient = createPaymasterClient({ +const paymasterClient = createPaymasterClient({ transport: http("https://api.pimlico.io/v2/11155111/rpc?apikey="), }); ``` @@ -113,7 +113,9 @@ used by the paymaster. To modify the token allowance for the paymaster, you’ll perform a write operation on the USDC contract. In this tutorial, you set an allowance of 10 USDC tokens. However, in a production dApp, you should first check the existing token allowance and only approve the amount required by the paymaster. -Now, send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method from Bundler Client. Make sure to batch the approve call with other on chain interactions you want to perform. +Now, send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method from Bundler Client. You can provide the `paymasterCient` from [step 2](#2-create-a-paymaster-client) using the paymaster property. + +Make sure to batch the approve call if with other on chain interactions you want to perform. ```typescript // Appropriate fee per gas must be determined for the specific bundler being used. @@ -143,6 +145,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({ ], maxFeePerGas, maxPriorityFeePerGas, + paymaster: paymasterClient, }); ``` From fca3414d1c4951f1c5461b19ed106f3048f8dff5 Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Mon, 1 Sep 2025 13:49:03 -0700 Subject: [PATCH 5/6] edit tutorial --- .../tutorials/use-erc20-paymaster.md | 60 +++++++++---------- 1 file changed, 28 insertions(+), 32 deletions(-) diff --git a/delegation-toolkit/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md index 394ec437209..b94d3383bdd 100644 --- a/delegation-toolkit/tutorials/use-erc20-paymaster.md +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -5,29 +5,22 @@ sidebar_position: 1 # Use an ERC-20 paymaster -This tutorial walks you through using an ERC-20 paymaster with [MetaMask smart account](../concepts/smart-accounts), -enabling users to pay gas fees in USDC. This tutorial focus on Pimlico’s paymaster, but you can use any paymaster of your choice. +This tutorial walks you through using an ERC-20 paymaster with [MetaMask Smart Accounts](../concepts/smart-accounts), enabling users to pay gas fees in USDC. +This tutorial uses Pimlico's paymaster, but you can use any paymaster of your choice. -## About ERC-20 paymaster +## About paymasters -The paymaster is an important component in the [ERC-4337](https://eips.ethereum.org/EIPS/eip-4337) standard, responsible for abstracting gas for the end user. -There are different types of paymasters, such as gasless paymasters, ERC-20 paymasters, and more. While a gasless -paymaster covers the transaction on behalf of the user, an ERC-20 paymaster allows users to pay gas fees using a -supported ERC-20 token. - -This removes the need for users to hold native tokens and enables a seamless experience, allowing them to perform on -chain actions using only stablecoins. +A paymaster is an important component of the [account abstraction (ERC-4337)](../concepts/smart-accounts.md) standard, responsible for abstracting gas fees for end users. +There are different types of paymasters, such as gasless paymasters and ERC-20 paymasters. +While a gasless paymaster covers the transaction on behalf of the user, an ERC-20 paymaster allows users to pay gas fees using a supported ERC-20 token. +This removes the need for users to hold native tokens, allowing them to perform onchain actions using only stablecoins. ## Prerequisites - [Install and set up the Delegation Toolkit](../get-started/install) in your project. - [Configure the Delegation Toolkit](../guides/configure). -- [Create a Hybrid smart account,](../guides/smart-accounts/create-smart-account). -- [Create Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key). -- Have some USDC in smart account to pay gas fees. - :::note - You can use [Circle's Faucet](https://faucet.circle.com/) to get Sepolia USDC. - ::: +- [Create a Hybrid smart account](../guides/smart-accounts/create-smart-account), and fund it with some Sepolia USDC to pay gas fees. +- [Create a Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key). ## Steps @@ -49,9 +42,9 @@ const publicClient = createPublicClient({ ### 2. Create a Paymaster Client Create a [Viem Paymaster Client](https://viem.sh/account-abstraction/clients/paymaster) -using Viem’s `createPaymasterClient` function. This client interacts with the paymaster service, enabling users to pay gas fees in USDC. +using Viem's `createPaymasterClient` function. This client interacts with the paymaster service, enabling users to pay gas fees in USDC. -Replace `` with your Pimlico API key. +Replace `` with your Pimlico API key: ```typescript import { createPaymasterClient } from "viem/account-abstraction"; @@ -65,12 +58,13 @@ const paymasterClient = createPaymasterClient({ Create a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. You can use the bundler service to estimate gas for user operations and submit transactions to the network. -To use an ERC-20 Paymaster, you need to configure the `paymasterContext` which allows you to specify the ERC-20 token that will be used to pay for the gas fees. For this tutorial, you'll use the USDC token. +To use the ERC-20 paymaster, configure the `paymasterContext` with the ERC-20 token you wish to use to pay for gas fees. +For this tutorial, specify the Sepolia USDC token address. ```typescript import { createBundlerClient } from "viem/account-abstraction"; -// USDC address on Ethereum Sepolia +// USDC address on Ethereum Sepolia. const token = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238"; const bundlerClient = createBundlerClient({ @@ -82,14 +76,11 @@ const bundlerClient = createBundlerClient({ }); ``` - ### 4. Create a Hybrid smart account -Configures a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account), which is a flexible smart account implementation +Configure a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account), which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. -See [Create a MetaMask smart account](../guides/smart-accounts/create-smart-account) to learn more about smart account implementations. - ```typescript import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; import { privateKeyToAccount } from "viem/accounts"; @@ -107,15 +98,18 @@ const smartAccount = await toMetaMaskSmartAccount({ ### 5. Send a user operation -ERC-20 paymaster works by transfering the token from the smart account, and reimbursing itself for paying the gas fees -on the user's behalf. To send a user operation using ERC-20 paymaster, you'll first need to approve ERC-20 token to be -used by the paymaster. +The ERC-20 paymaster works by transferring the token from the smart account, and reimbursing itself for paying the gas fees on the user's behalf. -To modify the token allowance for the paymaster, you’ll perform a write operation on the USDC contract. In this tutorial, you set an allowance of 10 USDC tokens. However, in a production dApp, you should first check the existing token allowance and only approve the amount required by the paymaster. +To send a user operation with the ERC-20 paymaster, use the [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method from the Bundler Client. +You must include a call approving the ERC-20 token to be used by the paymaster. +To modify the token allowance for the paymaster, perform a write operation on the USDC contract. +For this tutorial, set an allowance of 10 USDC tokens. -Now, send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method from Bundler Client. You can provide the `paymasterCient` from [step 2](#2-create-a-paymaster-client) using the paymaster property. +:::note +In a production dapp, you should first check the existing token allowance and only approve the amount required by the paymaster. +::: -Make sure to batch the approve call if with other on chain interactions you want to perform. +Batch the approve call with other onchain actions you want to perform, and provide the `paymasterClient` from [Step 2](#2-create-a-paymaster-client) using the `paymaster` property. ```typescript // Appropriate fee per gas must be determined for the specific bundler being used. @@ -124,7 +118,7 @@ const maxPriorityFeePerGas = 1n; const pimlicoPaymasterAddress = "0x777777777777AeC03fd955926DbF81597e66834C"; -// 10 USDC in wei format. Since USDC has 6 decimals, the wei value is 10 * 10^6 +// 10 USDC in wei format. Since USDC has 6 decimals, the wei value is 10 * 10^6. const approvalAmount = 10000000n; const userOperationHash = await bundlerClient.sendUserOperation({ @@ -138,6 +132,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({ functionName: "approve", args: [pimlicoPaymasterAddress, approvalAmount], } + // Batch the approve call with other onchain actions. { to: "0x1234567890123456789012345678901234567890", value: parseEther("1"), @@ -151,4 +146,5 @@ const userOperationHash = await bundlerClient.sendUserOperation({ ## Next steps -- See [Send a gasless transaction](../guides/smart-accounts/send-gasless-transaction.md) to learn how to use gasless paymaster. \ No newline at end of file +- See [Create a MetaMask smart account](../guides/smart-accounts/create-smart-account.md) to learn more about smart account implementations. +- See [Send a gasless transaction](../guides/smart-accounts/send-gasless-transaction.md) to learn how to use gasless paymaster. From 35321cfb926828915c9666c5dd9129b54bd1dbec Mon Sep 17 00:00:00 2001 From: Alexandra Tran Date: Tue, 2 Sep 2025 15:03:43 -0700 Subject: [PATCH 6/6] edit tutorial and change to manual sidebar --- delegation-toolkit/concepts/_category_.json | 4 - .../concepts/delegation/caveat-enforcers.md | 1 - .../concepts/delegation/index.md | 1 - delegation-toolkit/concepts/environment.md | 1 - delegation-toolkit/concepts/smart-accounts.md | 1 - .../erc-7710-redeem-delegations.md | 1 - .../erc-7715-request-permissions.md | 1 - .../store-retrieve-delegations.md | 2 - .../get-started/_category_.json | 4 - .../get-started/erc7715-quickstart.md | 1 - delegation-toolkit/get-started/install.md | 1 - .../smart-account-quickstart/eip7702.md | 1 - .../smart-account-quickstart/index.md | 1 - .../get-started/supported-networks.md | 1 - delegation-toolkit/get-started/use-the-cli.md | 1 - delegation-toolkit/guides/_category_.json | 4 - delegation-toolkit/guides/configure.md | 1 - .../guides/delegation/_category_.json | 4 - .../execute-on-smart-accounts-behalf.md | 1 - .../guides/delegation/restrict-delegation.md | 1 - .../guides/smart-accounts/_category_.json | 4 - .../smart-accounts/create-smart-account.md | 1 - .../generate-multisig-signature.md | 1 - .../send-gasless-transaction.md | 1 - .../smart-accounts/send-user-operation.md | 1 - delegation-toolkit/index.md | 1 - delegation-toolkit/reference/_category_.json | 4 - .../reference/api/_category_.json | 4 - .../reference/api/delegation.md | 1 - .../api/experimental-actions/_category_.json | 4 - .../experimental-actions/bundler-client.md | 1 - .../api/experimental-actions/wallet-client.md | 1 - .../reference/api/smart-account.md | 1 - delegation-toolkit/reference/caveats.md | 1 - .../tutorials/use-erc20-paymaster.md | 13 +- gator-sidebar.js | 133 +++++++++++++++++- vercel.json | 2 +- 37 files changed, 137 insertions(+), 70 deletions(-) delete mode 100644 delegation-toolkit/concepts/_category_.json delete mode 100644 delegation-toolkit/get-started/_category_.json delete mode 100644 delegation-toolkit/guides/_category_.json delete mode 100644 delegation-toolkit/guides/delegation/_category_.json delete mode 100644 delegation-toolkit/guides/smart-accounts/_category_.json delete mode 100644 delegation-toolkit/reference/_category_.json delete mode 100644 delegation-toolkit/reference/api/_category_.json delete mode 100644 delegation-toolkit/reference/api/experimental-actions/_category_.json rename {src/pages => delegation-toolkit}/tutorials/use-erc20-paymaster.md (89%) diff --git a/delegation-toolkit/concepts/_category_.json b/delegation-toolkit/concepts/_category_.json deleted file mode 100644 index 8a0f6ef3ba0..00000000000 --- a/delegation-toolkit/concepts/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Concepts", - "position": 3 -} \ No newline at end of file diff --git a/delegation-toolkit/concepts/delegation/caveat-enforcers.md b/delegation-toolkit/concepts/delegation/caveat-enforcers.md index 88c8ce6e147..c46efc0ab03 100644 --- a/delegation-toolkit/concepts/delegation/caveat-enforcers.md +++ b/delegation-toolkit/concepts/delegation/caveat-enforcers.md @@ -1,6 +1,5 @@ --- description: Learn about caveat enforcers and how they restrict delegations. -sidebar_position: 2 --- # Caveat enforcers diff --git a/delegation-toolkit/concepts/delegation/index.md b/delegation-toolkit/concepts/delegation/index.md index 9f4ee8e4fdb..4c47510f2fb 100644 --- a/delegation-toolkit/concepts/delegation/index.md +++ b/delegation-toolkit/concepts/delegation/index.md @@ -1,6 +1,5 @@ --- description: Learn about delegation, the delegation lifecycle, and the Delegation Framework. -sidebar_position: 2 toc_max_heading_level: 2 --- diff --git a/delegation-toolkit/concepts/environment.md b/delegation-toolkit/concepts/environment.md index fe4c046db78..b5198bfee73 100644 --- a/delegation-toolkit/concepts/environment.md +++ b/delegation-toolkit/concepts/environment.md @@ -1,6 +1,5 @@ --- description: Learn about the delegator environment object `DeleGatorEnvironment` and how to use it. -sidebar_position: 3 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/concepts/smart-accounts.md b/delegation-toolkit/concepts/smart-accounts.md index a57bf44e3d3..d40cbfc7bd5 100644 --- a/delegation-toolkit/concepts/smart-accounts.md +++ b/delegation-toolkit/concepts/smart-accounts.md @@ -1,6 +1,5 @@ --- description: Learn about MetaMask Smart Accounts. -sidebar_position: 1 --- # MetaMask Smart Accounts diff --git a/delegation-toolkit/experimental/erc-7710-redeem-delegations.md b/delegation-toolkit/experimental/erc-7710-redeem-delegations.md index d72d8bf76bf..36d7b6ded0a 100644 --- a/delegation-toolkit/experimental/erc-7710-redeem-delegations.md +++ b/delegation-toolkit/experimental/erc-7710-redeem-delegations.md @@ -1,6 +1,5 @@ --- description: Learn how to redeem ERC-7710 delegations with a smart contract account or an externally owned account (EOA). -sidebar_position: 3 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/experimental/erc-7715-request-permissions.md b/delegation-toolkit/experimental/erc-7715-request-permissions.md index 5002ca73d90..4b47d770c8d 100644 --- a/delegation-toolkit/experimental/erc-7715-request-permissions.md +++ b/delegation-toolkit/experimental/erc-7715-request-permissions.md @@ -1,6 +1,5 @@ --- description: Learn how to request ERC-7715 permissions. -sidebar_position: 2 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/experimental/store-retrieve-delegations.md b/delegation-toolkit/experimental/store-retrieve-delegations.md index 56f56315d9e..8de881b95d3 100644 --- a/delegation-toolkit/experimental/store-retrieve-delegations.md +++ b/delegation-toolkit/experimental/store-retrieve-delegations.md @@ -1,8 +1,6 @@ --- description: Store and retrieve delegations using the `DelegationStorageClient`. -sidebar_position: 1 toc_max_heading_level: 2 -sidebar_class_name: hidden --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/get-started/_category_.json b/delegation-toolkit/get-started/_category_.json deleted file mode 100644 index 8575aa96bf6..00000000000 --- a/delegation-toolkit/get-started/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Get started", - "position": 2 -} \ No newline at end of file diff --git a/delegation-toolkit/get-started/erc7715-quickstart.md b/delegation-toolkit/get-started/erc7715-quickstart.md index 8907abdeac2..b7a7b4c172f 100644 --- a/delegation-toolkit/get-started/erc7715-quickstart.md +++ b/delegation-toolkit/get-started/erc7715-quickstart.md @@ -1,6 +1,5 @@ --- description: Learn how to use ERC-7715 to request permissions. -sidebar_position: 3 sidebar_label: ERC-7715 quickstart --- diff --git a/delegation-toolkit/get-started/install.md b/delegation-toolkit/get-started/install.md index d54dbbdbf66..f737e2572af 100644 --- a/delegation-toolkit/get-started/install.md +++ b/delegation-toolkit/get-started/install.md @@ -1,7 +1,6 @@ --- sidebar_label: Install and set up description: Learn how to install and set up the MetaMask Delegation Toolkit. -sidebar_position: 1 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/get-started/smart-account-quickstart/eip7702.md b/delegation-toolkit/get-started/smart-account-quickstart/eip7702.md index dd0929ce487..a67fdf38a41 100644 --- a/delegation-toolkit/get-started/smart-account-quickstart/eip7702.md +++ b/delegation-toolkit/get-started/smart-account-quickstart/eip7702.md @@ -1,6 +1,5 @@ --- description: Upgrade an externally owned account (EOA) to a smart account -sidebar_position: 1 sidebar_label: EIP-7702 quickstart --- diff --git a/delegation-toolkit/get-started/smart-account-quickstart/index.md b/delegation-toolkit/get-started/smart-account-quickstart/index.md index 3cab237b061..46b12562f8e 100644 --- a/delegation-toolkit/get-started/smart-account-quickstart/index.md +++ b/delegation-toolkit/get-started/smart-account-quickstart/index.md @@ -1,6 +1,5 @@ --- description: Get started quickly with the MetaMask Smart Accounts -sidebar_position: 2 sidebar_label: Smart account quickstart --- diff --git a/delegation-toolkit/get-started/supported-networks.md b/delegation-toolkit/get-started/supported-networks.md index 480bbf7b924..992a761f6ea 100644 --- a/delegation-toolkit/get-started/supported-networks.md +++ b/delegation-toolkit/get-started/supported-networks.md @@ -2,7 +2,6 @@ title: Supported networks sidebar_label: Supported networks description: Supported networks for Delegation Toolkit. -sidebar_position: 5 --- The following tables display the networks supported by each version of the MetaMask Delegation Toolkit. diff --git a/delegation-toolkit/get-started/use-the-cli.md b/delegation-toolkit/get-started/use-the-cli.md index fd6becd6c39..518fe72aa11 100644 --- a/delegation-toolkit/get-started/use-the-cli.md +++ b/delegation-toolkit/get-started/use-the-cli.md @@ -1,6 +1,5 @@ --- description: Get started with the MetaMask Delegation Toolkit using the `@metamask/create-gator-app` CLI. -sidebar_position: 4 sidebar_label: Use the CLI --- diff --git a/delegation-toolkit/guides/_category_.json b/delegation-toolkit/guides/_category_.json deleted file mode 100644 index 7d7d2086985..00000000000 --- a/delegation-toolkit/guides/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Guides", - "position": 4 -} \ No newline at end of file diff --git a/delegation-toolkit/guides/configure.md b/delegation-toolkit/guides/configure.md index b12e70d6851..57fa1e728b9 100644 --- a/delegation-toolkit/guides/configure.md +++ b/delegation-toolkit/guides/configure.md @@ -1,6 +1,5 @@ --- description: Learn how to configure the MetaMask Delegation Toolkit using Viem. -sidebar_position: 1 sidebar_label: Configure the toolkit --- diff --git a/delegation-toolkit/guides/delegation/_category_.json b/delegation-toolkit/guides/delegation/_category_.json deleted file mode 100644 index b304d543be5..00000000000 --- a/delegation-toolkit/guides/delegation/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Delegation", - "position": 3 -} \ No newline at end of file diff --git a/delegation-toolkit/guides/delegation/execute-on-smart-accounts-behalf.md b/delegation-toolkit/guides/delegation/execute-on-smart-accounts-behalf.md index 39666994b62..2e067e886d3 100644 --- a/delegation-toolkit/guides/delegation/execute-on-smart-accounts-behalf.md +++ b/delegation-toolkit/guides/delegation/execute-on-smart-accounts-behalf.md @@ -1,6 +1,5 @@ --- description: Use delegations to perform executions on a smart account's behalf. -sidebar_position: 1 sidebar_label: Execute on a smart account's behalf --- diff --git a/delegation-toolkit/guides/delegation/restrict-delegation.md b/delegation-toolkit/guides/delegation/restrict-delegation.md index d02b1a1fd7c..d78aa669c67 100644 --- a/delegation-toolkit/guides/delegation/restrict-delegation.md +++ b/delegation-toolkit/guides/delegation/restrict-delegation.md @@ -1,6 +1,5 @@ --- description: Learn how to restrict a delegation using caveat enforcers, and the available caveat types. -sidebar_position: 2 toc_max_heading_level: 3 --- diff --git a/delegation-toolkit/guides/smart-accounts/_category_.json b/delegation-toolkit/guides/smart-accounts/_category_.json deleted file mode 100644 index 7fca24aaf9d..00000000000 --- a/delegation-toolkit/guides/smart-accounts/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "MetaMask Smart Accounts", - "position": 2 -} \ No newline at end of file diff --git a/delegation-toolkit/guides/smart-accounts/create-smart-account.md b/delegation-toolkit/guides/smart-accounts/create-smart-account.md index db5573d4880..9d9468b30c4 100644 --- a/delegation-toolkit/guides/smart-accounts/create-smart-account.md +++ b/delegation-toolkit/guides/smart-accounts/create-smart-account.md @@ -1,6 +1,5 @@ --- description: Learn how to create a MetaMask smart account using Delegation Toolkit. -sidebar_position: 1 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/guides/smart-accounts/generate-multisig-signature.md b/delegation-toolkit/guides/smart-accounts/generate-multisig-signature.md index e53ef71d18d..416dff7cd8a 100644 --- a/delegation-toolkit/guides/smart-accounts/generate-multisig-signature.md +++ b/delegation-toolkit/guides/smart-accounts/generate-multisig-signature.md @@ -1,6 +1,5 @@ --- description: Learn how to generate a Multisig signature. -sidebar_position: 4 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/guides/smart-accounts/send-gasless-transaction.md b/delegation-toolkit/guides/smart-accounts/send-gasless-transaction.md index f8fac6c0e45..708573ffb60 100644 --- a/delegation-toolkit/guides/smart-accounts/send-gasless-transaction.md +++ b/delegation-toolkit/guides/smart-accounts/send-gasless-transaction.md @@ -1,6 +1,5 @@ --- description: Learn how to send a gasless transaction -sidebar_position: 3 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/guides/smart-accounts/send-user-operation.md b/delegation-toolkit/guides/smart-accounts/send-user-operation.md index ff016f5f18a..767685d1403 100644 --- a/delegation-toolkit/guides/smart-accounts/send-user-operation.md +++ b/delegation-toolkit/guides/smart-accounts/send-user-operation.md @@ -1,6 +1,5 @@ --- description: Learn how to send an ERC-4337 user operation using Viem. -sidebar_position: 2 --- import Tabs from "@theme/Tabs"; diff --git a/delegation-toolkit/index.md b/delegation-toolkit/index.md index 17994f81fa0..cbad5cbcd7f 100644 --- a/delegation-toolkit/index.md +++ b/delegation-toolkit/index.md @@ -2,7 +2,6 @@ title: Delegation Toolkit introduction sidebar_label: Introduction description: High-level overview of Smart Accounts and the Delegation Toolkit. -sidebar_position: 1 --- import CardList from "@site/src/components/CardList" diff --git a/delegation-toolkit/reference/_category_.json b/delegation-toolkit/reference/_category_.json deleted file mode 100644 index 2c35925a576..00000000000 --- a/delegation-toolkit/reference/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Reference", - "position": 6 -} \ No newline at end of file diff --git a/delegation-toolkit/reference/api/_category_.json b/delegation-toolkit/reference/api/_category_.json deleted file mode 100644 index d1c6bf9f032..00000000000 --- a/delegation-toolkit/reference/api/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Delegation Toolkit API", - "position": 2 -} \ No newline at end of file diff --git a/delegation-toolkit/reference/api/delegation.md b/delegation-toolkit/reference/api/delegation.md index 705a97afb8c..254eb890a60 100644 --- a/delegation-toolkit/reference/api/delegation.md +++ b/delegation-toolkit/reference/api/delegation.md @@ -1,7 +1,6 @@ --- description: Delegation-related API methods reference. sidebar_label: Delegation -sidebar_position: 1 toc_max_heading_level: 2 --- diff --git a/delegation-toolkit/reference/api/experimental-actions/_category_.json b/delegation-toolkit/reference/api/experimental-actions/_category_.json deleted file mode 100644 index a3d5bdb6929..00000000000 --- a/delegation-toolkit/reference/api/experimental-actions/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Experimental actions", - "position": 3 -} \ No newline at end of file diff --git a/delegation-toolkit/reference/api/experimental-actions/bundler-client.md b/delegation-toolkit/reference/api/experimental-actions/bundler-client.md index b39fc55f15e..196e3a732ee 100644 --- a/delegation-toolkit/reference/api/experimental-actions/bundler-client.md +++ b/delegation-toolkit/reference/api/experimental-actions/bundler-client.md @@ -1,7 +1,6 @@ --- description: Bundler Client API methods reference. sidebar_label: Bundler Client -sidebar_position: 1 toc_max_heading_level: 2 --- diff --git a/delegation-toolkit/reference/api/experimental-actions/wallet-client.md b/delegation-toolkit/reference/api/experimental-actions/wallet-client.md index 3707bdeea4d..ccbaeb20fa8 100644 --- a/delegation-toolkit/reference/api/experimental-actions/wallet-client.md +++ b/delegation-toolkit/reference/api/experimental-actions/wallet-client.md @@ -1,7 +1,6 @@ --- description: Wallet Client API methods reference. sidebar_label: Wallet Client -sidebar_position: 2 toc_max_heading_level: 2 --- diff --git a/delegation-toolkit/reference/api/smart-account.md b/delegation-toolkit/reference/api/smart-account.md index e1b053a5b40..7ef02dc7041 100644 --- a/delegation-toolkit/reference/api/smart-account.md +++ b/delegation-toolkit/reference/api/smart-account.md @@ -1,7 +1,6 @@ --- description: MetaMask Smart Accounts-related API methods reference. sidebar_label: MetaMask Smart Accounts -sidebar_position: 2 toc_max_heading_level: 2 --- diff --git a/delegation-toolkit/reference/caveats.md b/delegation-toolkit/reference/caveats.md index 6e2c63d8805..d1a2c7b1d45 100644 --- a/delegation-toolkit/reference/caveats.md +++ b/delegation-toolkit/reference/caveats.md @@ -1,6 +1,5 @@ --- description: Caveat enforcers reference. -sidebar_position: 1 toc_max_heading_level: 2 --- diff --git a/src/pages/tutorials/use-erc20-paymaster.md b/delegation-toolkit/tutorials/use-erc20-paymaster.md similarity index 89% rename from src/pages/tutorials/use-erc20-paymaster.md rename to delegation-toolkit/tutorials/use-erc20-paymaster.md index b94d3383bdd..efc05035f86 100644 --- a/src/pages/tutorials/use-erc20-paymaster.md +++ b/delegation-toolkit/tutorials/use-erc20-paymaster.md @@ -1,6 +1,5 @@ --- -description: Follow this tutorial to use ERC-20 paymaster with MetaMask Smart Accounts. -sidebar_position: 1 +description: Follow this tutorial to use an ERC-20 paymaster with MetaMask Smart Accounts. --- # Use an ERC-20 paymaster @@ -20,6 +19,9 @@ This removes the need for users to hold native tokens, allowing them to perform - [Install and set up the Delegation Toolkit](../get-started/install) in your project. - [Configure the Delegation Toolkit](../guides/configure). - [Create a Hybrid smart account](../guides/smart-accounts/create-smart-account), and fund it with some Sepolia USDC to pay gas fees. + :::note + You can use [Circle's faucet](https://faucet.circle.com/) to get Sepolia USDC. + ::: - [Create a Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key). ## Steps @@ -78,8 +80,8 @@ const bundlerClient = createBundlerClient({ ### 4. Create a Hybrid smart account -Configure a [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account), which is a flexible smart account implementation -that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. +Configure the same [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) that you created and funded as a [prerequisite](#prerequisites). +A Hybrid smart account is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of passkey (WebAuthn) signers. ```typescript import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit"; @@ -109,7 +111,8 @@ For this tutorial, set an allowance of 10 USDC tokens. In a production dapp, you should first check the existing token allowance and only approve the amount required by the paymaster. ::: -Batch the approve call with other onchain actions you want to perform, and provide the `paymasterClient` from [Step 2](#2-create-a-paymaster-client) using the `paymaster` property. +Batch the approve call with other onchain actions you want to perform using the ERC-20 paymaster. +Pass the `paymasterClient` from [Step 2](#2-create-a-paymaster-client) to the `paymaster` property. ```typescript // Appropriate fee per gas must be determined for the specific bundler being used. diff --git a/gator-sidebar.js b/gator-sidebar.js index a4e0f72b40e..879740e6dcb 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -1,10 +1,133 @@ -const sidebars = { +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebar = { gatorSidebar: [ { - type: "autogenerated", - dirName: ".", + type: 'doc', + label: 'Introduction', + id: "index", + }, + { + type: 'category', + label: 'Get started', + collapsed: false, + items: [ + 'get-started/install', + { + type: 'category', + label: 'Smart account quickstart', + collapsed: false, + link: { type: "doc", id: "get-started/smart-account-quickstart/index" }, + items: [ + 'get-started/smart-account-quickstart/eip7702', + ], + }, + 'get-started/erc7715-quickstart', + 'get-started/use-the-cli', + 'get-started/supported-networks', + ], + }, + { + type: 'category', + label: 'Concepts', + collapsed: false, + items: [ + 'concepts/smart-accounts', + { + type: 'category', + label: 'Delegation', + collapsed: false, + link: { type: "doc", id: "concepts/delegation/index" }, + items: [ + 'concepts/delegation/caveat-enforcers', + ], + }, + 'concepts/environment', + ], + }, + { + type: 'category', + label: 'Guides', + collapsed: false, + items: [ + 'guides/configure', + { + type: 'category', + label: 'MetaMask Smart Accounts', + collapsed: false, + items: [ + 'guides/smart-accounts/create-smart-account', + 'guides/smart-accounts/send-user-operation', + 'guides/smart-accounts/send-gasless-transaction', + 'guides/smart-accounts/generate-multisig-signature', + ], + }, + { + type: 'category', + label: 'Delegation', + collapsed: false, + items: [ + 'guides/delegation/execute-on-smart-accounts-behalf', + 'guides/delegation/restrict-delegation', + ], + }, + ], + }, + { + type: 'category', + label: 'Experimental', + collapsed: false, + items: [ + 'experimental/erc-7715-request-permissions', + 'experimental/erc-7710-redeem-delegations', + ], + }, + { + type: 'category', + label: 'Tutorials', + collapsed: false, + items: [ + 'tutorials/use-erc20-paymaster', + { + type: "link", + label: "Use a passkey as a backup signer", + href: "/tutorials/use-passkey-as-backup-signer" + }, + { + type: "link", + label: "Create a custom caveat enforcer", + href: "/tutorials/create-custom-caveat-enforcer" + }, + ], + }, + { + type: 'category', + label: 'Reference', + collapsed: false, + items: [ + 'reference/caveats', + { + type: 'category', + label: 'Delegation Toolkit API', + collapsed: false, + items: [ + 'reference/api/delegation', + 'reference/api/smart-account', + { + type: 'category', + label: 'Experimental actions', + collapsed: false, + items: [ + 'reference/api/experimental-actions/bundler-client', + 'reference/api/experimental-actions/wallet-client', + ], + }, + ], + }, + ], }, ], -}; +} -module.exports = sidebars; +module.exports = sidebar; diff --git a/vercel.json b/vercel.json index d94959734fd..be7e1698659 100644 --- a/vercel.json +++ b/vercel.json @@ -756,7 +756,7 @@ }, { "source": "/delegation-toolkit/development/how-to/create-delegation/create-custom-caveat-enforcer/", - "destination": "/delegation-toolkit/development/tutorials/create-custom-caveat-enforcer/" + "destination": "/tutorials/create-custom-caveat-enforcer/" }, { "source": "/delegation-toolkit/development/concepts/caveat-enforcers/",