shift dtk tutorials

Author: yashovardhan

delegation-toolkit/tutorials/_category_.json

@@ -1,23 +1,25 @@
 ---
-description: Follow this tutorial to create, deploy, and apply a custom caveat enforcer for a delegation.
-sidebar_position: 2
+title: Create a custom caveat enforcer
+image: 'img/guides/guides-banners/custom-caveat-enforcer.png'
+description: Create, deploy, and apply a custom caveat enforcer for a delegation.
+tags: [delegation toolkit, caveat enforcer, smart contracts, ethereum]
+date: Aug 27, 2025
+author: MetaMask Developer Relations
 ---
 
-import Tabs from "@theme/Tabs"; 
+import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 
-# Create a custom caveat enforcer
+This tutorial walks you through creating a custom [caveat enforcer](/delegation-toolkit/concepts/delegation/caveat-enforcers) and applying it to a [delegation](/delegation-toolkit/concepts/delegation/).
 
-This tutorial walks you through creating a custom [caveat enforcer](../concepts/delegation/caveat-enforcers.md) and applying it to a [delegation](../concepts/delegation/index.md).
-
-The MetaMask Delegation Toolkit includes [out-of-the-box caveat enforcers](../reference/caveats.md) that define rules and restrictions for common use cases.
+The MetaMask Delegation Toolkit includes [out-of-the-box caveat enforcers](/delegation-toolkit/reference/caveats) that define rules and restrictions for common use cases.
 For more specific control or other use cases, you can create custom caveat enforcers.
 In this tutorial, you'll create and apply a caveat enforcer that only allows a delegation to be redeemed after a specific timestamp.
 
 ## Prerequisites
 
-- [Install and set up the Delegation Toolkit](../get-started/install.md) in your project.
-- [Configure the Delegation Toolkit.](../guides/configure.md)
+- [Install and set up the Delegation Toolkit](/delegation-toolkit/get-started/install) in your project.
+- [Configure the Delegation Toolkit.](/delegation-toolkit/guides/configure)
 - [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.
@@ -41,7 +43,7 @@ interface and only allows a delegation to be redeemed after a specific timestamp
 pragma solidity 0.8.23;
 
 import { CaveatEnforcer } from "@delegator/src/enforcers/CaveatEnforcer.sol";
-import { ModeCode } from "../utils/Types.sol";
+import { ModeCode } from "/delegation-toolkit/utils/Types.sol";
 
 contract AfterTimestampEnforcer is CaveatEnforcer {
   /**
@@ -90,7 +92,7 @@ The Forge CLI will display the address of the deployed caveat enforcer.
 ### 3. 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](../guides/delegation/restrict-delegation.md).
+Learn more about [applying caveats to a delegation](/delegation-toolkit/guides/delegation/restrict-delegation).
 
 The following code snippet uses the custom caveat enforcer to create a delegation granting
 a 1,000,000 wei allowance that becomes spendable one hour after it is created:
@@ -99,63 +101,55 @@ a 1,000,000 wei allowance that becomes spendable one hour after it is created:
 <TabItem value="delegation.ts">
 
 ```typescript
-import {
-  createCaveatBuilder,
-  createDelegation,
-} from "@metamask/delegation-toolkit";
-import { toHex } from "viem";
-import { delegatorSmartAccount } from "./config.ts";
+import { createCaveatBuilder, createDelegation } from '@metamask/delegation-toolkit'
+import { toHex } from 'viem'
+import { delegatorSmartAccount } from './config.ts'
 
-const environment = delegatorSmartAccount.environment;
+const environment = delegatorSmartAccount.environment
 
 // Replace this with the address of the deployed AfterTimestampEnforcer.sol contract.
-const afterTimestampEnforcer = "0x22Ae4c4919C3aB4B5FC309713Bf707569B74876F";
+const afterTimestampEnforcer = '0x22Ae4c4919C3aB4B5FC309713Bf707569B74876F'
 
-const caveatBuilder = createCaveatBuilder(environment);
+const caveatBuilder = createCaveatBuilder(environment)
 
-const tenAM = 10 * 60 * 60; // 10:00 AM as seconds since midnight.
+const tenAM = 10 * 60 * 60 // 10:00 AM as seconds since midnight.
 
-const caveats = caveatBuilder
-  .addCaveat("nativeTokenTransferAmount", 1_000_000)
-  .addCaveat({
-    enforcer: afterTimestampEnforcer,
-    terms: toHex(tenAm)
-  });
+const caveats = caveatBuilder.addCaveat('nativeTokenTransferAmount', 1_000_000).addCaveat({
+  enforcer: afterTimestampEnforcer,
+  terms: toHex(tenAm),
+})
 
 const delegation = createDelegation({
   to: delegate,
   from: delegatorSmartAccount.address,
-  caveats
-});
+  caveats,
+})
 ```
 
 </TabItem>
 
 <TabItem value="config.ts">
 
 ```typescript
-import { createPublicClient, http } from "viem";
-import { sepolia as chain } from "viem/chains";
-import { 
-  Implementation, 
-  toMetaMaskSmartAccount,
-} from "@metamask/delegation-toolkit";
+import { createPublicClient, http } from 'viem'
+import { sepolia as chain } from 'viem/chains'
+import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
 
 const publicClient = createPublicClient({
   chain,
-  transport: http()
-});
+  transport: http(),
+})
 
-const privateKey = generatePrivateKey(); 
-const account = privateKeyToAccount(privateKey);
+const privateKey = generatePrivateKey()
+const account = privateKeyToAccount(privateKey)
 
 export const delegatorSmartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
   deployParams: [account.address, [], [], []],
-  deploySalt: "0x",
+  deploySalt: '0x',
   signatory: { account },
-});
+})
 ```
 
 </TabItem>
@@ -164,4 +158,4 @@ export const delegatorSmartAccount = await toMetaMaskSmartAccount({
 You've successfully created, deployed, and applied a custom caveat enforcer!
 
 For production use cases, you might need to add additional caveats to restrict the delegation further.
-Learn more about [caveat enforcers](../concepts/delegation/caveat-enforcers.md).
+Learn more about [caveat enforcers](/delegation-toolkit/concepts/delegation/caveat-enforcers).

delegation-toolkit/tutorials/create-custom-caveat-enforcer.md renamed to src/pages/tutorials/create-custom-caveat-enforcer.md

@@ -1,30 +1,33 @@
 ---
-description: Follow this tutorial to use a passkey as a backup signer with a Hybrid MetaMask smart account.
 sidebar_position: 1
+title: Use a passkey as a backup signer
+image: 'img/guides/guides-banners/dtk-passkey-backup.png'
+description: Use a passkey as a backup signer with a Hybrid MetaMask smart account.
+tags: [delegation toolkit, passkey, backup, signer, smart account]
+date: Aug 27, 2025
+author: MetaMask Developer Relations
 ---
 
-# Use a passkey as a backup signer
-
-This tutorial walks you through using a passkey as a backup signer for your [MetaMask smart account](../concepts/smart-accounts).
+This tutorial walks you through using a passkey as a backup signer for your [MetaMask smart account](/delegation-toolkit/concepts/smart-accounts.md).
 
 ## About passkeys
 
 An externally owned account (EOA) uses the secp256k1 elliptic curve to generate key pairs and signatures.
 In contrast, a passkey (WebAuthn credential) uses the secp256r1 (P-256) elliptic curve to generate key pairs and signatures.
 Passkeys eliminate the need for traditional seed phrases that are difficult to remember, enabling a more seamless and secure way for users to access their web3 wallets.
 
-MetaMask Smart Accounts offer a [Hybrid implementation](../concepts/smart-accounts.md#hybrid-smart-account), which supports signature validation for both secp256k1 and secp256r1 curves.
+MetaMask Smart Accounts offer a [Hybrid implementation](/delegation-toolkit/concepts/smart-accounts.md#hybrid-smart-account), which supports signature validation for both secp256k1 and secp256r1 curves.
 This allows you to add a passkey as a backup signer for your smart account.
 
 You can add passkeys during smart account creation or after the account has been deployed.
 This tutorial walks you through adding a passkey signer to an already deployed smart account.
 
 ## Prerequisites
 
-- [Install and set up the Delegation Toolkit](../get-started/install) in your project.
+- [Install and set up the Delegation Toolkit](/delegation-toolkit/get-started/install.md) in your project.
 - [Install Ox SDK](https://oxlib.sh/#installation).
-- [Configure the Delegation Toolkit](../guides/configure).
-- [Create and deploy a Hybrid smart account,](../guides/smart-accounts/create-smart-account) with a signatory from a private key.
+- [Configure the Delegation Toolkit](/delegation-toolkit/guides/configure.md).
+- [Create and deploy a Hybrid smart account,](/delegation-toolkit/guides/smart-accounts/create-smart-account.md) with a signatory from a private key.
 
 ## Steps
 
@@ -34,13 +37,13 @@ Create a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's
 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";
+import { createPublicClient, http } from 'viem'
+import { sepolia as chain } from 'viem/chains'
 
 const publicClient = createPublicClient({
   chain,
   transport: http(),
-});
+})
 ```
 
 ### 2. Create a Bundler Client
@@ -49,46 +52,44 @@ Create a [Viem Bundler Client](https://viem.sh/account-abstraction/clients/bundl
 You can use the bundler service to estimate gas for user operations and submit transactions to the network.
 
 ```typescript
-import { createBundlerClient } from "viem/account-abstraction";
+import { createBundlerClient } from 'viem/account-abstraction'
 
 const bundlerClient = createBundlerClient({
   client: publicClient,
-  transport: http("https://your-bundler-rpc.com"),
-});
+  transport: http('https://your-bundler-rpc.com'),
+})
 ```
 
 ### 3. Create a Hybrid smart account
 
-Configure the same [Hybrid smart account](../guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) that you created and deployed as a [prerequisite](#prerequisites).
+Configure the same [Hybrid smart account](/delegation-toolkit/guides/smart-accounts/create-smart-account.md#create-a-hybrid-smart-account) that you created and deployed as a [prerequisite](#prerequisites).
 The Hybrid implementation supports adding additional passkey signers.
 
 ```typescript
-import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit";
-import { privateKeyToAccount } from "viem/accounts";
+import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
+import { privateKeyToAccount } from 'viem/accounts'
 
-const account = privateKeyToAccount("0x...");
+const account = privateKeyToAccount('0x...')
 
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
   deployParams: [account.address, [], [], []],
-  deploySalt: "0x",
+  deploySalt: '0x',
   signatory: { account },
-});
+})
 ```
 
 ### 4. 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).
 
 ```ts
-import { 
-  createWebAuthnCredential,
-} from "viem/account-abstraction";
-  
+import { createWebAuthnCredential } from 'viem/account-abstraction'
+
 const credential = await createWebAuthnCredential({
-  name: "MetaMask Smart Account",
-});
+  name: 'MetaMask Smart Account',
+})
 ```
 
 ### 5. Add the passkey as a backup signer
@@ -100,11 +101,11 @@ Since WebAuthn credentials store a compressed public key, you need to use the [O
 Once the calldata is prepared, send it to your smart account address to register the passkey as a backup signer.
 
 ```ts
-import { PublicKey } from "ox";
-import { HybridDeleGator, P256Owner } from "@metamask/delegation-toolkit/contracts";
+import { PublicKey } from 'ox'
+import { HybridDeleGator, P256Owner } from '@metamask//delegation-toolkit/contracts'
 
 // Deserialize the compressed public key.
-const publicKey = PublicKey.fromHex(credential.publicKey);
+const publicKey = PublicKey.fromHex(credential.publicKey)
 
 const p256Owner: P256Owner = {
   keyId: credential.id,
@@ -114,11 +115,11 @@ const p256Owner: P256Owner = {
 
 const data = HybridDeleGator.encode.addKey({
   p256Owner,
-});
+})
 
 // Appropriate fee per gas must be determined for the specific bundler being used.
-const maxFeePerGas = 1n;
-const maxPriorityFeePerGas = 1n;
+const maxFeePerGas = 1n
+const maxPriorityFeePerGas = 1n
 
 const userOperationHash = await bundlerClient.sendUserOperation({
   account: smartAccount,
@@ -130,7 +131,7 @@ const userOperationHash = await bundlerClient.sendUserOperation({
   ],
   maxFeePerGas,
   maxPriorityFeePerGas,
-});
+})
 ```
 
 ### 6. (Optional) Use the passkey signer
@@ -141,27 +142,27 @@ If you ever lose your primary signer (private key) used in [Step 3](#3-create-a-
 Use the [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) to configure your passkey as a MetaMask smart account signer.
 
 ```ts
-import { Address } from "ox";
-import { toWebAuthnAccount } from "viem/account-abstraction";
-import { toHex } from "viem";
-import { Implementation, toMetaMaskSmartAccount } from "@metamask/delegation-toolkit";
+import { Address } from 'ox'
+import { toWebAuthnAccount } from 'viem/account-abstraction'
+import { toHex } from 'viem'
+import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit'
 
 // Use the deserialized public key from the previous step.
-const owner = Address.fromPublicKey(publicKey);
+const owner = Address.fromPublicKey(publicKey)
 
 // Use the credential from the previous step.
-const webAuthnAccount = toWebAuthnAccount({ credential });
+const webAuthnAccount = toWebAuthnAccount({ credential })
 
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
   deployParams: [owner, [credential.id], [publicKey.x], [publicKey.y]],
-  deploySalt: "0x",
+  deploySalt: '0x',
   signatory: { webAuthnAccount, keyId: toHex(credential.id) },
-});
+})
 ```
 
 ## Next steps
 
-- 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 sponsor gas fees when adding a passkey as a backup signer.
+- See [Create a MetaMask smart account](/delegation-toolkit/guides/smart-accounts/create-smart-account.md) to learn more about smart account implementations.
+- See [Send a gasless transaction](/delegation-toolkit/guides/smart-accounts/send-gasless-transaction.md) to learn how to sponsor gas fees when adding a passkey as a backup signer.