Skip to content

Commit b05ca30

Browse files
authored
Merge branch 'main' into add-sol
2 parents 74b9534 + c778eda commit b05ca30

File tree

85 files changed

+2420
-131
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+2420
-131
lines changed

.github/CODEOWNERS

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,7 @@
22
# so the listed codeowners apply only if there is no later match.
33

44
# Default owner for all other files
5-
* @MetaMask/dashboard @MetaMask/tech-writers
6-
7-
# All other Markdown files
8-
*.md @MetaMask/tech-writers
9-
*.mdx @MetaMask/tech-writers
5+
* @MetaMask/dashboard @MetaMask/tech-writers @MetaMask/delegation-devrel @MetaMask/embedded-wallets-devrel @MetaMask/sdk-devrel
106

117
# Developer tools documentation
128
/developer-tools/ @MetaMask/tech-writers

delegation-toolkit/get-started/cli-quickstart.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
description: Get started with the MetaMask Delegation Toolkit using the `@metamask/create-gator-app` CLI.
3-
sidebar_position: 5
3+
sidebar_position: 6
44
sidebar_label: CLI quickstart
55
---
66

@@ -26,15 +26,17 @@ Upon installation, you'll be asked the following prompts:
2626
❯ nextjs
2727
vite-react
2828
? Pick a template: (Use arrow keys)
29-
❯ Basic Delegator app with NextJS
30-
Experimental: Basic Gator app to try out ERC7715 Permissions
29+
❯ MetaMask Smart Accounts Starter
30+
MetaMask Smart Accounts & Delegation Starter
31+
Experimental: ERC7715 Permissions starter
3132
? Pick a package manager: (Use arrow keys)
3233
❯ npm
3334
yarn
3435
pnpm
3536
```
3637

37-
Once you've answered the prompts with the required configuration and selected a template, the CLI will create the project using the specified name and settings.
38+
Once you've answered the prompts with the required configuration and selected a template, the CLI will create the
39+
project using the specified name and settings.
3840
See the following section to learn more about available CLI configurations.
3941

4042
## Options
@@ -46,14 +48,15 @@ The CLI provides the following options to display CLI details, and further custo
4648
| `-v` or `--version` | Check the current version of the `@metamask/create-gator-app` CLI. |
4749
| `-h` or `--help` | Display the available options. |
4850
| `--skip-install` | Skip the installation of dependencies. |
49-
| `--add-web3auth` | Add Web3Auth Embedded Wallet as a signer for the delegator account. <br/>Supported templates: <ul><li>Next.js starter</li><li> Vite React starter</li></ul> |
50-
| `--add-llm-rules` | Add LLM rules for your IDE. Supported templates: <ul><li>Next.js ERC-7715 starter</li></ul> |
51+
| `--add-web3auth` | Add [Web3Auth Embedded Wallet](https://web3auth.io/docs) as a signer for the delegator account.<br/>Supported templates:<br/>- MetaMask Smart Accounts Starter<br/>- MetaMask Smart Accounts & Delegation Starter |
52+
| `--add-llm-rules` | Add LLM rules for your IDE. Supported in the Experimental: ERC7715 Permissions Starter template. |
5153

5254
## Examples
5355

5456
### Web3Auth configuration
5557

56-
To create a project that uses [Web3Auth](https://web3auth.io/docs/) Embedded Wallet as the signer for your delegator account, use the `--add-web3auth` option with `@metamask/create-gator-app`:
58+
To create a project that uses [Web3Auth](https://web3auth.io/docs/) Embedded Wallet as the signer for your delegator
59+
account, use the `--add-web3auth` option with `@metamask/create-gator-app`:
5760

5861
```bash
5962
npx @metamask/create-gator-app --add-web3auth
@@ -89,5 +92,6 @@ Currently, only Cursor and Windsurf are supported.
8992
9093
| Template | Next.js | Vite React |
9194
|----------------------------------------------------|---------|------------|
92-
| Basic dapp with delegation and redeem flow | ✅ | ✅ |
93-
| Experimental: Basic dapp with ERC-7715 permissions | ✅ | |
95+
| MetaMask Smart Accounts Starter | ✅ | ✅ |
96+
| MetaMask Smart Accounts &amp; Delegation Starter | ✅ | ✅ |
97+
| Experimental: ERC7715 Permissions starter | ✅ | |
Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
---
2+
description: Learn how to use ERC-7715 to request permisisons.
3+
sidebar_position: 5
4+
sidebar_label: EIP-7715 quickstart
5+
---
6+
7+
# EIP-7715 quickstart
8+
9+
This page demonstrates how to use [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715) to request permissions
10+
from a wallet, and execute transactions on a user's behalf.
11+
12+
## Prerequisites
13+
14+
- [Install and set up the Delegation Toolkit.](install.md)
15+
- [Install MetaMask Flask 12.14.2 or later](/snaps/get-started/install-flask.md).
16+
17+
## Steps
18+
19+
### 1. Set up a Wallet Client
20+
21+
Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will help you interact with MetaMask Flask.
22+
23+
Then, extend the Wallet Client functionality
24+
using `erc7715ProviderActions`. These actions enable you to request ERC-7715
25+
permissions from the user.
26+
27+
```typescript
28+
import { createWalletClient, custom } from "viem";
29+
import { erc7715ProviderActions } from "@metamask/delegation-toolkit/experimental";
30+
31+
const walletClient = createWalletClient({
32+
transport: custom(window.ethereum),
33+
}).extend(erc7715ProviderActions());
34+
```
35+
36+
### 2. Set up a Public Client
37+
38+
Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function.
39+
This client will help you query the account state and interact with blockchain networks.
40+
41+
```typescript
42+
import { createPublicClient, http } from "viem";
43+
import { sepolia as chain } from "viem/chains";
44+
45+
const publicClient = createPublicClient({
46+
chain,
47+
transport: http(),
48+
});
49+
```
50+
51+
### 3. Set up a session account
52+
53+
Set up a session account which can either be a smart account or an externally owned
54+
account (EOA) to request ERC-7715 permissions. This account is responsible
55+
for executing transactions on behalf of the user.
56+
57+
This example uses [MetaMask Smart Accounts](../concepts/smart-accounts.md) as a session account.
58+
59+
```typescript
60+
import { privateKeyToAccount } from "viem/accounts";
61+
import {
62+
toMetaMaskSmartAccount,
63+
Implementation
64+
} from "@metamask/delegation-toolkit";
65+
66+
const privateKey = "0x...";
67+
const account = privateKeyToAccount(privateKey);
68+
69+
const sessionAccount = await toMetaMaskSmartAccount({
70+
client: publicClient,
71+
implementation: Implementation.Hybrid,
72+
deployParams: [account.address, [], [], []],
73+
deploySalt: "0x",
74+
signatory: { account },
75+
});
76+
```
77+
78+
### 4. Request ERC-7715 permissions
79+
80+
Request ERC-7715 permissions from the user. Currently, only the
81+
`native-token-stream` permission type is supported, which allows the dapp to stream
82+
native tokens from the user's wallet.
83+
84+
```typescript
85+
const expiry = Math.floor(Date.now() / 1000 + 604_800); // 1 week from now.
86+
const currentTime = Math.floor(Date.now() / 1000); // now
87+
88+
const grantedPermissions = await walletClient.grantPermissions([{
89+
chainId: chain.id,
90+
expiry,
91+
signer: {
92+
type: "account",
93+
data: {
94+
address: sessionAccount.address,
95+
},
96+
},
97+
permission: {
98+
type: "native-token-stream",
99+
data: {
100+
initialAmount: 1n, // 1 wei
101+
amountPerSecond: 1n, // 1 wei per second
102+
maxAmount: 10n, // 10 wei
103+
startTime: currentTime,
104+
justification: "Payment for a week long subscription",
105+
},
106+
},
107+
}]);
108+
```
109+
110+
### 5. Set up a Bundler Client
111+
112+
Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler)
113+
using Viem's `createBundlerClient` function. This lets you use the bundler service
114+
to estimate gas for user operations and submit transactions to the network.
115+
116+
Then, extend the Bundler Client
117+
functionality using `erc7710BundlerActions`. These actions enable you to redeem ERC-7715 permissions, and execute transactions on a user's behalf.
118+
119+
```typescript
120+
import { createBundlerClient } from "viem/account-abstraction";
121+
import { erc7710BundlerActions } from "@metamask/delegation-toolkit/experimental";
122+
123+
const bundlerClient = createBundlerClient({
124+
client: publicClient,
125+
transport: http("https://your-bundler-rpc.com"),
126+
// Allows you to use the same Bundler Client as paymaster.
127+
paymaster: true
128+
}).extend(erc7710BundlerActions());
129+
```
130+
131+
### 6. Redeem ERC-7715 permissions
132+
133+
The session account can now [redeem the delegation](../how-to/redeem-delegation.md). The redeem transaction is sent to the `DelegationManager` contract, which validates the delegation and executes actions on the user's behalf.
134+
135+
To redeem the permissions, you can use the `sendUserOperationWithDelegation` bundler client action.
136+
137+
```typescript
138+
// These properties must be extracted from the permission response.
139+
const permissionsContext = grantedPermissions[0].context;
140+
const delegationManager = grantedPermissions[0].signerMeta.delegationManager;
141+
const accountMetadata = grantedPermissions[0].accountMeta;
142+
143+
// Calls without permissionsContext and delegationManager will be executed
144+
// as a normal user operation.
145+
const userOperationHash = await bundlerClient.sendUserOperationWithDelegation({
146+
publicClient,
147+
account: sessionAccount,
148+
calls: [
149+
{
150+
to: sessionAccount.address,
151+
data: "0x",
152+
value: 1n,
153+
permissionsContext,
154+
delegationManager,
155+
},
156+
],
157+
// Appropriate values must be used for fee-per-gas.
158+
maxFeePerGas: 1n,
159+
maxPriorityFeePerGas: 1n
160+
accountMetadata,
161+
});
162+
```

delegation-toolkit/get-started/supported-networks.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Supported networks
33
sidebar_label: Supported networks
44
description: Supported networks for Delegation Toolkit.
5-
sidebar_position: 6
5+
sidebar_position: 7
66
---
77

88
The following tables display the networks supported by each version of the MetaMask Delegation Toolkit.

delegation-toolkit/how-to/redeem-delegation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
6666
account: delegateSmartAccount,
6767
calls: [
6868
{
69-
to: "<DELEGATOR-SMART-ACCOUNT-ADDRESS>",
69+
to: delegateSmartAccount.address,
7070
data: redeemDelegationCalldata
7171
}
7272
],
@@ -256,7 +256,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
256256
account: delegateSmartAccount,
257257
calls: [
258258
{
259-
to: "<DELEGATOR-SMART-ACCOUNT-ADDRESS>",
259+
to: delegateSmartAccount.address,
260260
data: redeemDelegationCalldata
261261
}
262262
],

docusaurus.config.js

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,69 @@ const embedDropdown = fs.readFileSync('./src/components/NavDropdown/EmbedMetaMas
2121
const extendDropdown = fs.readFileSync('./src/components/NavDropdown/ExtendScale.html', 'utf-8')
2222
const npm2yarnPlugin = [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]
2323
/** @type {import('@docusaurus/types').Config} */
24+
const siteUrl = 'https://docs.metamask.io'
25+
const baseUrl = process.env.DEST || '/'
26+
const fullUrl = new URL(baseUrl, siteUrl).toString()
2427
const config = {
2528
title: 'MetaMask developer documentation',
2629
// tagline: '',
2730
url: 'https://docs.metamask.io',
2831
baseUrl: process.env.DEST || '/', // overwritten in github action for staging / latest
2932
onBrokenLinks: 'warn',
3033
onBrokenMarkdownLinks: 'warn',
31-
favicon: 'img/metamask-fox.svg',
34+
favicon: 'img/favicons/favicon-96x96.png',
35+
36+
headTags: [
37+
{
38+
tagName: 'link',
39+
attributes: {
40+
rel: 'icon',
41+
type: 'image/png',
42+
sizes: '96x96',
43+
href: 'img/favicons/favicon-96x96.png',
44+
},
45+
},
46+
{
47+
tagName: 'link',
48+
attributes: {
49+
rel: 'icon',
50+
type: 'image/png',
51+
sizes: '192x192',
52+
href: 'img/favicons/web-app-manifest-192x192.png',
53+
},
54+
},
55+
{
56+
tagName: 'link',
57+
attributes: {
58+
rel: 'icon',
59+
type: 'image/png',
60+
sizes: '512x512',
61+
href: 'img/favicons/web-app-manifest-512x512.png',
62+
},
63+
},
64+
{
65+
tagName: 'link',
66+
attributes: {
67+
rel: 'apple-touch-icon',
68+
sizes: '180x180',
69+
href: 'img/favicons/apple-touch-icon.png',
70+
},
71+
},
72+
{
73+
tagName: 'script',
74+
attributes: {
75+
type: 'application/ld+json',
76+
},
77+
innerHTML: `
78+
{
79+
"@context": "https://schema.org",
80+
"@type": "Organization",
81+
"url": "${fullUrl}",
82+
"logo": "${new URL('img/favicons/favicon-96x96.png', fullUrl).toString()}"
83+
}
84+
`,
85+
},
86+
],
3287

3388
// GitHub pages deployment config.
3489
// If you aren't using GitHub pages, you don't need these.

gator_versioned_docs/version-0.10.1/concepts/environment.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ import {
206206
// remove-end
207207

208208
// add-start
209-
+ const evniroment: DeleGatorEnvironment = {
209+
+ const environment: DeleGatorEnvironment = {
210210
+ SimpleFactory: "0x124..",
211211
+ // ...
212212
+ implementations: {

gator_versioned_docs/version-0.10.1/how-to/configure-delegator-accounts-signers.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ For example:
237237
<TabItem value="example.ts">
238238

239239
```typescript
240-
import { publiClient } from "./client.ts";
240+
import { publicClient } from "./client.ts";
241241
import { account, walletClient } from "./signers.ts";
242242
import {
243243
Implementation,
@@ -285,8 +285,8 @@ const privateKey = generatePrivateKey();
285285
export const account = privateKeyToAccount(privateKey);
286286

287287
// This private key will be used to generate the second signer.
288-
const walletClientPivatekey = generatePrivateKey();
289-
const walletClientAccount = privateKeyToAccount(walletClientPivatekey);
288+
const walletClientPrivatekey = generatePrivateKey();
289+
const walletClientAccount = privateKeyToAccount(walletClientPrivatekey);
290290

291291
export const walletClient = createWalletClient({
292292
account: walletClientAccount,

gator_versioned_docs/version-0.10.1/how-to/send-user-operation.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
5656
}
5757
],
5858
maxFeePerGas,
59-
maxPriortyFeePerGas
59+
maxPriorityFeePerGas
6060
});
6161
```
6262

@@ -134,7 +134,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
134134
],
135135
// remove-start
136136
- maxFeePerGas,
137-
- maxPriortyFeePerGas
137+
- maxPriorityFeePerGas
138138
// remove-end
139139
// add-next-line
140140
+ ...fee

gator_versioned_docs/version-0.10.2/concepts/environment.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ import {
206206
// remove-end
207207

208208
// add-start
209-
+ const evniroment: DeleGatorEnvironment = {
209+
+ const environment: DeleGatorEnvironment = {
210210
+ SimpleFactory: "0x124..",
211211
+ // ...
212212
+ implementations: {

0 commit comments

Comments
 (0)