Improve delegation quickstarts (#2184)

* Improve delegation quickstarts

* address some reviewer comments

* updates

* streamline delegation quickstart intro

* minor fixes

* their -> its

Author: alexandratran

delegation-toolkit/concepts/delegation.md

@@ -6,7 +6,7 @@ sidebar_position: 2
 # Delegation
 
 *Delegation* is the ability for a [MetaMask smart account](smart-accounts.md) to grant permission to another smart account
-or externally owned account (EOA) to perform specific executions on their behalf, under defined rules and restrictions.
+or externally owned account (EOA) to perform specific executions on its behalf, under defined rules and restrictions.
 The account that grants the permission is called the *delegator account*, while the account that receives the permission
 is called the *delegate account*.
 

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

@@ -27,7 +27,7 @@ Upon installation, you'll be asked the following prompts:
   vite-react
 ? Pick a template: (Use arrow keys)
 ❯ MetaMask Smart Accounts Starter
-  MetaMask Smart Accounts & Delegation Starter
+  MetaMask Smart Accounts & Delegation Starter
   Experimental: ERC7715 Permissions starter
 ? Pick a package manager: (Use arrow keys)
 ❯ npm 

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

@@ -4,9 +4,13 @@ sidebar_position: 3
 sidebar_label: Delegation quickstart
 ---
 
-# Delegation Toolkit quickstart
+# Delegation quickstart
 
-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).
+[Delegation](../concepts/delegation.md) is the ability for a [MetaMask smart account](../concepts/smart-accounts.md) to grant permission to another account to perform executions on its behalf.
+
+In this quickstart, you will create a *delegator account* (the account that grants the permission) and *delegate account* (the account that receives the permission), and complete the delegation lifecycle (create, sign, and redeem a delegation).
+
+This quickstart will refer to the delegator account as "Alice," who grants permission to "Bob," the delegate account, to perform executions on her behalf.
 
 ## Prerequisites
 
@@ -43,9 +47,11 @@ const bundlerClient = createBundlerClient({
 
 ### 3. Create a delegator account
 
-[Create a delegator smart account](../how-to/create-smart-account/index.md) to set up a delegation.
+Create an account to represent Alice, the delegator who will create a delegation.
+The delegator must be a [smart account](../how-to/create-smart-account/index.md).
 
-This example configures a [Hybrid](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account) delegator account:
+This example configures a [Hybrid](../concepts/smart-accounts.md#hybrid-smart-account) smart account,
+which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of P256 (passkey) signers:
 
 ```typescript
 import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
@@ -62,11 +68,15 @@ const delegatorSmartAccount = await toMetaMaskSmartAccount({
 })
 ```
 
+:::note
+See [how to configure other smart account types](../how-to/create-smart-account/configure-accounts-signers.md).
+:::
+
 ### 4. Create a delegate account
 
-Create a delegate account to receive the delegation. The delegate can be either a smart account or an externally owned account (EOA).
+Create an account to represent Bob, the delegate who will receive the delegation. The delegate can be a smart account or an externally owned account (EOA).
 
-This example uses a smart account:
+This example configures a Hybrid smart account:
 
 ```typescript
 import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
@@ -85,13 +95,16 @@ const delegateSmartAccount = await toMetaMaskSmartAccount({
 
 ### 5. Create a delegation
 
-[Create a root delegation](../how-to/create-delegation/index.md#create-a-root-delegation) from the delegator account to the delegate account.
+[Create a root delegation](../how-to/create-delegation/index.md#create-a-root-delegation) from Alice to Bob.
+A root delegation is a delegation that doesn't derive its authority from another delegation.
+Alice is delegating her own authority away, as opposed to *redelegating* permissions she received from a previous delegation.
 
-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.
+This example passes an empty `caveats` array, which means Bob can perform any action on Alice's behalf. We recommend [restricting the delegation](../how-to/create-delegation/restrict-delegation.md) by adding caveat enforcers.
+For example, Alice can delegate the ability to sepnd her USDC to Bob, limiting the amount to 100 USDC.
 
 :::warning Important
 
-Before creating a delegation, ensure that the delegator account has been deployed. If the account is not deployed, redeeming the delegation will fail.
+Before creating a delegation, ensure that the delegator account (in this example, Alice's account) has been deployed. If the account is not deployed, redeeming the delegation will fail.
 
 :::
 
@@ -107,7 +120,7 @@ const delegation = createDelegation({
 
 ### 6. Sign the delegation
 
-[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.
+[Sign the delegation](../how-to/create-delegation/index.md#sign-a-delegation) with Alice's account, 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. Bob will later use the signed delegation to perform actions on Alice's behalf.
 
 ```typescript
 const signature = await delegatorSmartAccount.signDelegation({
@@ -122,7 +135,7 @@ const signedDelegation = {
 
 ### 7. Redeem the delegation
 
-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.
+Bob 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 Alice's behalf.
 
 To prepare the calldata for the redeem transaction, use the [`redeemDelegation`](../reference/api/delegation.md#redeemdelegation) utility function from the Delegation Toolkit.
 
@@ -154,3 +167,8 @@ const userOperationHash = await bundlerClient.sendUserOperation({
   maxPriorityFeePerGas: 1n,
 })
 ```
+
+:::note
+If Bob's account (the delegate account) is an externally owned account (EOA) instead of a smart account,
+see [how to redeem the delegation with an EOA](../how-to/redeem-delegation.md#redeem-with-an-eoa).
+:::

…oolkit/get-started/eip7715-quickstart.md …oolkit/get-started/erc7715-quickstart.mddelegation-toolkit/get-started/eip7715-quickstart.md renamed to delegation-toolkit/get-started/erc7715-quickstart.md delegation-toolkit/get-started/eip7715-quickstart.md renamed to delegation-toolkit/get-started/erc7715-quickstart.md

@@ -1,18 +1,18 @@
 ---
 description: Learn how to use ERC-7715 to request permissions.
 sidebar_position: 5
-sidebar_label: EIP-7715 quickstart
+sidebar_label: ERC-7715 quickstart
 ---
 
-# EIP-7715 quickstart
+# ERC-7715 quickstart
 
 This page demonstrates how to use [ERC-7715](https://eips.ethereum.org/EIPS/eip-7715) to request permissions 
 from a wallet, and execute transactions on a user's behalf. 
 
 ## Prerequisites
 
 - [Install and set up the Delegation Toolkit.](install.md)
-- [Install MetaMask Flask 12.14.2 or later](/snaps/get-started/install-flask.md).
+- [Install MetaMask Flask 12.14.2 or later](/snaps/get-started/install-flask).
 
 ## Steps
 

delegation-toolkit/get-started/quickstart.md

@@ -1,12 +1,12 @@
 ---
 description: Get started quickly with the MetaMask Smart Accounts
 sidebar_position: 2
-sidebar_label: Quickstart
+sidebar_label: Smart account quickstart
 ---
 
 # MetaMask Smart Accounts quickstart
 
-This page demonstrates how to get started quickly with MetaMask Smart Accounts, and send the first user operation.
+This page demonstrates how to get started quickly with [MetaMask Smart Accounts](../concepts/smart-accounts.md), and send the first user operation.
 
 ## Prerequisites
 
@@ -45,7 +45,8 @@ const bundlerClient = createBundlerClient({
 
 [Create a MetaMask smart account](../how-to/create-smart-account/index.md) to send the first user operation.
 
-This example configures a [Hybrid](../how-to/create-smart-account/configure-accounts-signers.md#configure-a-hybrid-smart-account) smart account:
+This example configures a [Hybrid](../concepts/smart-accounts.md#hybrid-smart-account) smart account,
+which is a flexible smart account implementation that supports both an externally owned account (EOA) owner and any number of P256 (passkey) signers:
 
 ```typescript
 import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit";
@@ -62,6 +63,10 @@ const smartAccount = await toMetaMaskSmartAccount({
 });
 ```
 
+:::note
+See [how to configure other smart account types](../how-to/create-smart-account/configure-accounts-signers.md).
+:::
+
 ### 4. Send a user operation
 
 Send a user operation using Viem's [`sendUserOperation`](https://viem.sh/account-abstraction/actions/bundler/sendUserOperation) method.

delegation-toolkit/how-to/configure.md

@@ -18,7 +18,7 @@ The MetaMask Delegation Toolkit provides custom middleware for [Pimlico's](https
 ## Prerequisites
 
 - [Install and set up the Delegation Toolkit](../get-started/install.md).
-- Optionally, complete the [Delegation Toolkit quickstart](../get-started/quickstart.md) to
+- Optionally, complete the [smart account quickstart](../get-started/quickstart.md) or [delegation quickstart](../get-started/delegation-quickstart.md) to
   familiarize yourself with the toolkit's capabilities.
 
 ## Viem's Account Abstraction API

delegation-toolkit/index.md

@@ -47,8 +47,28 @@ Check out the following guides to get started with the MetaMask Delegation Toolk
     },
     {
       href: "get-started/quickstart",
-      title: "Quickstart",
+      title: "MetaMask Smart Accounts quickstart",
       description: "Create a MetaMask smart account and send a user operation.",
+    },
+    {
+      href: "get-started/delegation-quickstart",
+      title: "Delegation quickstart",
+      description: "Create, sign, and redeem a delegation.",
+    },
+    {
+      href: "get-started/eip7702-quickstart",
+      title: "EIP-7702 quickstart",
+      description: "Upgrade an externally owned account to a smart account.",
+    },
+    {
+      href: "get-started/erc7715-quickstart",
+      title: "ERC-7715 quickstart",
+      description: "Request permissions from MetaMask and execute transactions on a user's behalf.",
+    },
+    {
+      href: "get-started/cli-quickstart",
+      title: "CLI quickstart",
+      description: "Use the Delegation Toolkit CLI to bootstrap a project.",
     }
   ]}
 />