Skip to content

Commit f10e8e4

Browse files
AyushBherwani1998AyushBherwani1998
authored
Add MetaMask Smart Accounts quickstart
* add smart account quickstart * resolve review comments
1 parent e08c9c5 commit f10e8e4

File tree

5 files changed

+190
-115
lines changed

5 files changed

+190
-115
lines changed

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

Lines changed: 1 addition & 1 deletion
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: 4
3+
sidebar_position: 5
44
sidebar_label: CLI quickstart
55
---
66

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

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
---
2+
description: Get started quickly with the MetaMask Delegation Toolkit.
3+
sidebar_position: 3
4+
sidebar_label: Delegation quickstart
5+
---
6+
7+
# Delegation Toolkit quickstart
8+
9+
This page demonstrates how to get started quickly with the MetaMask Delegation Toolkit, by creating a delegator account and completing the delegation lifecycle (creating, signing, and redeeming a delegation).
10+
11+
## Prerequisites
12+
13+
[Install and set up the Delegation Toolkit.](install.md)
14+
15+
## Steps
16+
17+
### 1. Set up a Public Client
18+
19+
Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. This client will let the delegator account query the signer's account state and interact with smart contracts.
20+
21+
```typescript
22+
import { createPublicClient, http } from 'viem'
23+
import { sepolia as chain } from 'viem/chains'
24+
25+
const publicClient = createPublicClient({
26+
chain,
27+
transport: http(),
28+
})
29+
```
30+
31+
### 2. Set up a Bundler Client
32+
33+
Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. This lets you use the bundler service to estimate gas for user operations and submit transactions to the network.
34+
35+
```typescript
36+
import { createBundlerClient } from 'viem/account-abstraction'
37+
38+
const bundlerClient = createBundlerClient({
39+
client: publicClient,
40+
transport: http('https://your-bundler-rpc.com'),
41+
})
42+
```
43+
44+
### 3. Create a delegator account
45+
46+
[Create a delegator smart account](../how-to/create-smart-account/index.md) to set up a delegation.
47+
48+
This example configures a [Hybrid](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account) delegator account:
49+
50+
```typescript
51+
import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
52+
import { privateKeyToAccount } from 'viem/accounts'
53+
54+
const delegatorAccount = privateKeyToAccount('0x...')
55+
56+
const delegatorSmartAccount = await toMetaMaskSmartAccount({
57+
client: publicClient,
58+
implementation: Implementation.Hybrid,
59+
deployParams: [delegatorAccount.address, [], [], []],
60+
deploySalt: '0x',
61+
signatory: { account: delegatorAccount },
62+
})
63+
```
64+
65+
### 4. Create a delegate account
66+
67+
Create a delegate account to receive the delegation. The delegate can be either a smart account or an externally owned account (EOA).
68+
69+
This example uses a smart account:
70+
71+
```typescript
72+
import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
73+
import { privateKeyToAccount } from 'viem/accounts'
74+
75+
const delegateAccount = privateKeyToAccount('0x...')
76+
77+
const delegateSmartAccount = await toMetaMaskSmartAccount({
78+
client: publicClient,
79+
implementation: Implementation.Hybrid,
80+
deployParams: [delegateAccount.address, [], [], []],
81+
deploySalt: '0x',
82+
signatory: { account: delegateAccount },
83+
})
84+
```
85+
86+
### 5. Create a delegation
87+
88+
[Create a root delegation](../how-to/create-delegation/index.md#create-a-root-delegation) from the delegator account to the delegate account.
89+
90+
This example passes an empty `caveats` array, which means the delegate can perform any action on the delegator's behalf. We recommend [restricting the delegation](../how-to/create-delegation/restrict-delegation.md) by adding caveat enforcers.
91+
92+
:::warning Important
93+
94+
Before creating a delegation, ensure that the delegator account has been deployed. If the account is not deployed, redeeming the delegation will fail.
95+
96+
:::
97+
98+
```typescript
99+
import { createDelegation } from '@metamask/delegation-toolkit'
100+
101+
const delegation = createDelegation({
102+
to: delegateSmartAccount.address,
103+
from: delegatorSmartAccount.address,
104+
caveats: [], // Empty caveats array - we recommend adding appropriate restrictions.
105+
})
106+
```
107+
108+
### 6. Sign the delegation
109+
110+
[Sign the delegation](../how-to/create-delegation/index.md#sign-a-delegation) using the [`signDelegation`](../reference/api/smart-account.md#signdelegation) method from `MetaMaskSmartAccount`. Alternatively, you can use the Delegation Toolkit's [`signDelegation`](../reference/api/delegation.md#signdelegation) utility. The signed delegation will be used later to perform actions on behalf of the delegator.
111+
112+
```typescript
113+
const signature = await delegatorSmartAccount.signDelegation({
114+
delegation,
115+
})
116+
117+
const signedDelegation = {
118+
...delegation,
119+
signature,
120+
}
121+
```
122+
123+
### 7. Redeem the delegation
124+
125+
The delegate 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 delegator's behalf.
126+
127+
To prepare the calldata for the redeem transaction, use the [`redeemDelegation`](../reference/api/delegation.md#redeemdelegation) utility function from the Delegation Toolkit.
128+
129+
```typescript
130+
import { createExecution } from '@metamask/delegation-toolkit'
131+
import { DelegationManager } from '@metamask/delegation-toolkit/contracts'
132+
import { SINGLE_DEFAULT_MODE } from '@metamask/delegation-toolkit/utils'
133+
import { zeroAddress } from 'viem'
134+
135+
const delegations = [signedDelegation]
136+
137+
const executions = createExecution({ target: zeroAddress })
138+
139+
const redeemDelegationCalldata = DelegationManager.encode.redeemDelegations({
140+
delegations: [delegations],
141+
modes: [SINGLE_DEFAULT_MODE],
142+
executions: [executions],
143+
})
144+
145+
const userOperationHash = await bundlerClient.sendUserOperation({
146+
account: delegateSmartAccount,
147+
calls: [
148+
{
149+
to: delegateSmartAccount.address,
150+
data: redeemDelegationCalldata,
151+
},
152+
],
153+
maxFeePerGas: 1n,
154+
maxPriorityFeePerGas: 1n,
155+
})
156+
```

‎delegation-toolkit/get-started/eip7702-quickstart.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
description: Upgrade an externally owned account (EOA) to a smart account
3-
sidebar_position: 3
3+
sidebar_position: 4
44
sidebar_label: EIP-7702 quickstart
55
---
66

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

Lines changed: 31 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
---
2-
description: Get started quickly with the MetaMask Delegation Toolkit.
2+
description: Get started quickly with the MetaMask Smart Accounts
33
sidebar_position: 2
44
sidebar_label: Quickstart
55
---
66

7-
# Delegation Toolkit quickstart
7+
# MetaMask Smart Accounts quickstart
88

9-
This page demonstrates how to get started quickly with the MetaMask Delegation Toolkit,
10-
by creating a delegator account and completing the delegation lifecycle (creating, signing, and redeeming a delegation).
9+
This page demonstrates how to get started quickly with MetaMask Smart Accounts, and send the first user operation.
1110

1211
## Prerequisites
1312

@@ -17,13 +16,12 @@ by creating a delegator account and completing the delegation lifecycle (creatin
1716

1817
### 1. Set up a Public Client
1918

20-
Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function.
21-
This client will let the delegator account query the signer's account state and interact with smart contracts.
19+
Set up a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function. This client will let the smart account query the signer's account state and interact with blockchain network.
2220

2321
```typescript
2422
import { createPublicClient, http } from "viem";
2523
import { sepolia as chain } from "viem/chains";
26-
24+
2725
const publicClient = createPublicClient({
2826
chain,
2927
transport: http(),
@@ -32,8 +30,7 @@ const publicClient = createPublicClient({
3230

3331
### 2. Set up a Bundler Client
3432

35-
Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function.
36-
This lets you use the bundler service to estimate gas for user operations and submit transactions to the network.
33+
Set up a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundler) using Viem's `createBundlerClient` function. This lets you use the bundler service to estimate gas for user operations and submit transactions to the network.
3734

3835
```typescript
3936
import { createBundlerClient } from "viem/account-abstraction";
@@ -44,130 +41,52 @@ const bundlerClient = createBundlerClient({
4441
});
4542
```
4643

47-
### 3. Create a delegator account
48-
49-
[Create a delegator smart account](../how-to/create-smart-account/index.md) to set up a delegation.
50-
51-
This example configures a [Hybrid](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account) delegator account:
52-
53-
```typescript
54-
import {
55-
Implementation,
56-
toMetaMaskSmartAccount,
57-
} from "@metamask/delegation-toolkit";
58-
import { privateKeyToAccount } from "viem/accounts";
59-
60-
const delegatorAccount = privateKeyToAccount("0x...");
61-
62-
const delegatorSmartAccount = await toMetaMaskSmartAccount({
63-
client: publicClient,
64-
implementation: Implementation.Hybrid,
65-
deployParams: [delegatorAccount.address, [], [], []],
66-
deploySalt: "0x",
67-
signatory: { account: delegatorAccount },
68-
});
69-
```
70-
71-
### 4. Create a delegate account
44+
### 3. Create a MetaMask smart account
7245

73-
Create a delegate account to receive the delegation.
74-
The delegate can be either a smart account or an externally owned account (EOA).
46+
[Create a MetaMask smart account](../how-to/create-smart-account/index.md) to send the first user operation.
7547

76-
This example uses a smart account:
48+
This example configures a [Hybrid](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account) smart account:
7749

7850
```typescript
79-
import {
80-
Implementation,
81-
toMetaMaskSmartAccount,
82-
} from "@metamask/delegation-toolkit";
51+
import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit";
8352
import { privateKeyToAccount } from "viem/accounts";
8453

85-
const delegateAccount = privateKeyToAccount("0x...");
54+
const account = privateKeyToAccount("0x...");
8655

87-
const delegateSmartAccount = await toMetaMaskSmartAccount({
56+
const smartAccount = await toMetaMaskSmartAccount({
8857
client: publicClient,
8958
implementation: Implementation.Hybrid,
90-
deployParams: [delegateAccount.address, [], [], []],
59+
deployParams: [account.address, [], [], []],
9160
deploySalt: "0x",
92-
signatory: { account: delegateAccount },
93-
});
94-
```
95-
96-
### 5. Create a delegation
97-
98-
[Create a root delegation](../how-to/create-delegation/index.md#create-a-root-delegation) from the
99-
delegator account to the delegate account.
100-
101-
This example passes an empty `caveats` array, which means the delegate can perform any action on the delegator's behalf.
102-
We recommend [restricting the delegation](../how-to/create-delegation/restrict-delegation.md) by adding caveat enforcers.
103-
104-
:::warning Important
105-
106-
Before creating a delegation, ensure that the delegator account has
107-
been deployed. If the account is not deployed, redeeming the delegation will fail.
108-
109-
:::
110-
111-
```typescript
112-
import { createDelegation } from "@metamask/delegation-toolkit";
113-
114-
const delegation = createDelegation({
115-
to: delegateSmartAccount.address,
116-
from: delegatorSmartAccount.address,
117-
caveats: [] // Empty caveats array - we recommend adding appropriate restrictions.
118-
});
119-
```
120-
121-
### 6. Sign the delegation
122-
123-
[Sign the delegation](../how-to/create-delegation/index.md#sign-a-delegation) using the [`signDelegation`](../reference/api/smart-account.md#signdelegation) method from `MetaMaskSmartAccount`.
124-
Alternatively, you can use the Delegation Toolkit's [`signDelegation`](../reference/api/delegation.md#signdelegation) utility.
125-
The signed delegation will be used later to perform actions on behalf of the delegator.
126-
127-
```typescript
128-
const signature = await delegatorSmartAccount.signDelegation({
129-
delegation
61+
signatory: { account },
13062
});
131-
132-
const signedDelegation = {
133-
...delegation,
134-
signature,
135-
};
13663
```
13764

138-
### 7. Redeem the delegation
65+
### 4. Send a user operation
13966

140-
The delegate account can now [redeem the delegation](../how-to/redeem-delegation.md).
141-
The redeem transaction is sent to the `DelegationManager` contract, which validates the delegation and
142-
executes actions on the delegator's behalf.
67+
Send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method.
14368

144-
To prepare the calldata for the redeem transaction, use the [`redeemDelegation`](../reference/api/delegation.md#redeemdelegation) utility function from the Delegation Toolkit.
69+
See [send user operation](./../how-to/send-user-operation.md) to learn how to estimate fee per gas, and wait for the transaction receipt.
14570

146-
```typescript
147-
import { createExecution } from "@metamask/delegation-toolkit";
148-
import { DelegationManager } from "@metamask/delegation-toolkit/contracts";
149-
import { SINGLE_DEFAULT_MODE } from "@metamask/delegation-toolkit/utils";
150-
import { zeroAddress } from "viem";
151-
152-
const delegations = [ signedDelegation ];
71+
The smart account will remain counterfactual until the first user operation. If the smart account is not
72+
deployed, it will be automatically deployed upon the sending first user operation.
15373

154-
const executions = createExecution({ target: zeroAddress });
74+
```ts
75+
import { parseEther } from "viem";
15576

156-
const redeemDelegationCalldata = DelegationManager.encode.redeemDelegations({
157-
delegations: [ delegations ],
158-
modes: [ SINGLE_DEFAULT_MODE ],
159-
executions: [ executions ]
160-
});
77+
// Appropriate fee per gas must be determined for the specific bundler being used.
78+
const maxFeePerGas = 1n;
79+
const maxPriorityFeePerGas = 1n;
16180

16281
const userOperationHash = await bundlerClient.sendUserOperation({
163-
account: delegateSmartAccount,
82+
account: smartAccount,
16483
calls: [
16584
{
166-
to: delegateSmartAccount.address,
167-
data: redeemDelegationCalldata
168-
}
85+
to: "0x1234567890123456789012345678901234567890",
86+
value: parseEther("1"),
87+
},
16988
],
170-
maxFeePerGas: 1n,
171-
maxPriorityFeePerGas: 1n,
89+
maxFeePerGas,
90+
maxPriorityFeePerGas,
17291
});
173-
```
92+
```

‎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: 5
5+
sidebar_position: 6
66
---
77

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

0 commit comments

Comments
 (0)