Update DTK tutorials

* Update DTK tutorials

* update prereqs

Author: alexandratran

src/pages/tutorials/create-custom-caveat-enforcer.md

@@ -18,9 +18,10 @@ In this tutorial, you'll create and apply a caveat enforcer that only allows a d
 
 ## Prerequisites
 
-- [Install and set up the Delegation Toolkit](/delegation-toolkit/get-started/install) in your project.
-- [Configure the Delegation Toolkit.](/delegation-toolkit/development/guides/configure)
-- [Install Foundry and Forge.](https://getfoundry.sh/introduction/installation)
+- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
+- Install [Yarn](https://yarnpkg.com/),
+    [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
+- [Install Foundry and Forge](https://getfoundry.sh/introduction/installation).
 - Get an [Infura API key](/developer-tools/dashboard/get-started/create-api) from the MetaMask Developer dashboard.
 - Have a MetaMask account with some Sepolia ETH to deploy your contract.
   :::note
@@ -29,7 +30,15 @@ In this tutorial, you'll create and apply a caveat enforcer that only allows a d
 
 ## Steps
 
-### 1. Create the caveat enforcer
+### 1. Install the toolkit
+
+Install the [MetaMask Delegation Toolkit](https://www.npmjs.com/package/@metamask/delegation-toolkit) in your project:
+
+```bash npm2yarn
+npm install @metamask/delegation-toolkit
+```
+
+### 2. Create the caveat enforcer
 
 At the root of your project, create a `contracts` directory.
 In that directory, create a new contract named `AfterTimestampEnforcer.sol`.
@@ -75,7 +84,7 @@ contract AfterTimestampEnforcer is CaveatEnforcer {
 }
 ```
 
-### 2. Deploy the caveat enforcer
+### 3. Deploy the caveat enforcer
 
 Deploy your custom caveat enforcer using [Forge](https://book.getfoundry.sh/forge/deploying) to obtain its contract address.
 Replace `<YOUR-API-KEY>` with your Infura API key, and `<YOUR-PRIVATE-KEY>` with the private key of your MetaMask account:
@@ -89,7 +98,7 @@ forge create src/AfterTimestampEnforcer.sol:AfterTimestampEnforcer \
 
 The Forge CLI will display the address of the deployed caveat enforcer.
 
-### 3. Apply the caveat enforcer
+### 4. Apply the caveat enforcer
 
 Specify the address of the deployed `AfterTimestampEnforcer.sol` contract, add it to the caveat builder, and create a delegation.
 Learn more about [applying caveats to a delegation](/delegation-toolkit/development/guides/delegation/restrict-delegation).

src/pages/tutorials/use-erc20-paymaster.md

@@ -19,17 +19,22 @@ This removes the need for users to hold native tokens, allowing them to perform
 
 ## Prerequisites
 
-- [Install and set up the Delegation Toolkit](/delegation-toolkit/get-started/install) in your project.
-- [Configure the Delegation Toolkit](/delegation-toolkit/development/guides/configure).
-- [Create a Hybrid smart account](/delegation-toolkit/development/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.
-  :::
+- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
+- Install [Yarn](https://yarnpkg.com/),
+    [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
 - [Create a Pimlico API key](https://docs.pimlico.io/guides/create-api-key#create-api-key).
 
 ## Steps
 
-### 1. Create a Public Client
+### 1. Install the toolkit
+
+Install the [MetaMask Delegation Toolkit](https://www.npmjs.com/package/@metamask/delegation-toolkit) in your project:
+
+```bash npm2yarn
+npm install @metamask/delegation-toolkit
+```
+
+### 2. 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.
@@ -44,7 +49,7 @@ const publicClient = createPublicClient({
 });
 ```
 
-### 2. Create a Paymaster Client
+### 3. 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.
@@ -59,7 +64,7 @@ const paymasterClient = createPaymasterClient({
 });
 ```
 
-### 3. Create a Bundler Client
+### 4. 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.
 
@@ -81,9 +86,9 @@ const bundlerClient = createBundlerClient({
 });
 ```
 
-### 4. Create a Hybrid smart account
+### 5. Create and fund a smart account
 
-Configure the same [Hybrid smart account](/delegation-toolkit/development/guides/smart-accounts/create-smart-account/#create-a-hybrid-smart-account) that you created and funded as a [prerequisite](#prerequisites).
+Create a [Hybrid smart account](/delegation-toolkit/development/guides/smart-accounts/create-smart-account/#create-a-hybrid-smart-account).
 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
@@ -101,7 +106,13 @@ const smartAccount = await toMetaMaskSmartAccount({
 });
 ```
 
-### 5. Send a user operation
+Fund the account with some Sepolia USDC to pay gas fees.
+
+:::note
+You can use [Circle's faucet](https://faucet.circle.com/) to get Sepolia USDC.
+:::
+
+### 6. Send a user operation
 
 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.
 
@@ -118,7 +129,7 @@ Batch the approve call with other onchain actions you want to perform using the
 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.
+// Appropriate fee per gas must be determined for the bundler being used.
 const maxFeePerGas = 1n;
 const maxPriorityFeePerGas = 1n;
 

src/pages/tutorials/use-passkey-as-backup-signer.md

@@ -23,14 +23,21 @@ This tutorial walks you through adding a passkey signer to an already deployed s
 
 ## Prerequisites
 
-- [Install and set up the Delegation Toolkit](/delegation-toolkit/get-started/install) in your project.
-- [Install Ox SDK](https://oxlib.sh/#installation).
-- [Configure the Delegation Toolkit](/delegation-toolkit/development/guides/configure).
-- [Create and deploy a Hybrid smart account,](/delegation-toolkit/development/guides/smart-accounts/create-smart-account) with a signatory from a private key.
+- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later.
+- Install [Yarn](https://yarnpkg.com/),
+    [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager.
 
 ## Steps
 
-### 1. Create a Public Client
+### 1. Install dependencies
+
+Install the [MetaMask Delegation Toolkit](https://www.npmjs.com/package/@metamask/delegation-toolkit) and [Ox SDK](https://oxlib.sh/#installation) in your project:
+
+```bash npm2yarn
+npm install @metamask/delegation-toolkit ox
+```
+
+### 2. 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.
@@ -45,7 +52,7 @@ const publicClient = createPublicClient({
 })
 ```
 
-### 2. Create a Bundler Client
+### 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.
@@ -59,27 +66,41 @@ const bundlerClient = createBundlerClient({
 })
 ```
 
-### 3. Create a Hybrid smart account
+### 4. Create and deploy a smart account
 
-Configure the same [Hybrid smart account](/delegation-toolkit/development/guides/smart-accounts/create-smart-account/#create-a-hybrid-smart-account) that you created and deployed as a [prerequisite](#prerequisites).
+Create and deploy a [Hybrid smart account](/delegation-toolkit/development/guides/smart-accounts/create-smart-account), with a private key signer.
 The Hybrid implementation supports adding additional passkey signers.
 
 ```typescript
 import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
 import { privateKeyToAccount } from 'viem/accounts'
+import { zeroAddress } from 'viem'
 
 const account = privateKeyToAccount('0x...')
 
+// Create the smart account.
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
   deployParams: [account.address, [], [], []],
   deploySalt: '0x',
   signatory: { account },
 })
+
+// Deploy the smart account by sending a user operation.
+// Appropriate fee per gas must be determined for the bundler being used.
+const maxFeePerGas = 1n;
+const maxPriorityFeePerGas = 1n;
+
+const userOperationHash = await bundlerClient.sendUserOperation({
+  account: smartAccount,
+  calls: [{ to: zeroAddress }],
+  maxFeePerGas,
+  maxPriorityFeePerGas,
+})
 ```
 
-### 4. Create a passkey
+### 5. Create a passkey
 
 To add a passkey signer, use Viem's [`createWebAuthnCredential`](https://viem.sh/account-abstraction/accounts/webauthn/createWebAuthnCredential) function to securely register the passkey (WebAuthn credential).
 
@@ -91,7 +112,7 @@ const credential = await createWebAuthnCredential({
 })
 ```
 
-### 5. Add the passkey as a backup signer
+### 6. Add the passkey as a backup signer
 
 Use the `HybridDeleGator` contract namespace from the Delegation Toolkit to encode the calldata required to add the passkey signer.
 The encoding function needs the X and Y coordinates of the P-256 public key.
@@ -116,7 +137,7 @@ const data = HybridDeleGator.encode.addKey({
   p256Owner,
 })
 
-// Appropriate fee per gas must be determined for the specific bundler being used.
+// Appropriate fee per gas must be determined for the bundler being used.
 const maxFeePerGas = 1n
 const maxPriorityFeePerGas = 1n
 
@@ -133,7 +154,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
 })
 ```
 
-### 6. (Optional) Use the passkey signer
+### 7. (Optional) Use the passkey signer
 
 You can now use the passkey signer to access your smart account and sign transactions.
 If you ever lose your primary signer (private key) used in [Step 3](#3-create-a-hybrid-smart-account), you can use the passkey as a secure backup method to retain access to your smart account.