[Delegation Toolkit] Improve code snippets

delegation-toolkit/get-started/quickstart.md

@@ -146,11 +146,7 @@ import { zeroAddress } from "viem";
 
 const delegations = [ signedDelegation ];
 
-const executions = [{
-  target: zeroAddress,  
-  value: 0n, 
-  callData: "0x"
-}];
+const executions = createExecution(zeroAddress);
 
 const redeemDelegationCalldata = DelegationFramework.encode.redeemDelegations({
   delegations: [ delegations ],

delegation-toolkit/how-to/create-smart-account/configure-accounts-signers.md

@@ -48,7 +48,7 @@ This example creates a signatory from a private key using Viem's [`privateKeyToA
 
 ```typescript
 import { publicClient } from "./client.ts"
-import { signatory } from "./signatory.ts";
+import { account } from "./signatory.ts";
 import { 
   Implementation, 
   toMetaMaskSmartAccount,
@@ -57,9 +57,9 @@ import {
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
-  deployParams: [owner, p256KeyIds, p256XValues, p256YValues],
+  deployParams: [account.address, [], [], []],
   deploySalt: "0x",
-  signatory,
+  signatory: { account },
 });
 ```
 
@@ -86,9 +86,7 @@ export const publicClient = createPublicClient({
 import { privateKeyToAccount, generatePrivateKey } from "viem/accounts";
 
 const privateKey = generatePrivateKey(); 
-const account = privateKeyToAccount(privateKey);
-
-export const signatory = { account };
+export const account = privateKeyToAccount(privateKey);
 ```
 
 </TabItem>
@@ -104,18 +102,21 @@ using Viem's `createWalletClient` function.
 
 ```typescript
 import { publicClient } from "./client.ts"
-import { signatory } from "./signatory.ts";
+import { walletClient } from "./signatory.ts";
 import { 
   Implementation, 
   toMetaMaskSmartAccount,
 } from "@metamask/delegation-toolkit";
 
+const addresses = await walletClient.getAddresses();
+const owner = addresses[0];
+
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
-  deployParams: [owner, p256KeyIds, p256XValues, p256YValues],
+  deployParams: [owner, [], [], []],
   deploySalt: "0x",
-  signatory,
+  signatory: { walletClient },
 });
 ```
 
@@ -146,13 +147,11 @@ import { http, createWalletClient } from "viem";
 const privateKey = generatePrivateKey(); 
 const account = privateKeyToAccount(privateKey);
 
-const walletClient = createWalletClient({
+export const walletClient = createWalletClient({
   account,
   chain,
   transport: http()
 })
-
-export const signatory = { walletClient };
 ```
 
 </TabItem>
@@ -163,23 +162,37 @@ export const signatory = { walletClient };
 This example creates a [Viem WebAuthn Account](https://viem.sh/account-abstraction/accounts/webauthn) as the signatory,
 using Viem's `toWebAuthnAccount` function.
 
+:::info Installation required
+
+To work with WebAuthn, we’ll be using the [Ox](https://oxlib.sh/) SDK. Please ensure that the SDK is installed.
+
+:::
+
 <Tabs>
 <TabItem value="example.ts">
 
 ```typescript
 import { publicClient } from "./client.ts"
-import { signatory } from "./signatory.ts";
+import { webAuthnAccount, credential } from "./signatory.ts";
 import { 
   Implementation, 
   toMetaMaskSmartAccount,
 } from "@metamask/delegation-toolkit";
+import { Address, PublicKey } from "ox";
+import { toHex } from "viem";
+
+// Deserialize compressed public key
+const publicKey = PublicKey.fromHex(credential.publicKey);
+
+// Convert public key to address
+const owner = Address.fromPublicKey(publicKey);
 
 const smartAccount = await toMetaMaskSmartAccount({
   client: publicClient,
   implementation: Implementation.Hybrid,
-  deployParams: [owner, p256KeyIds, p256XValues, p256YValues],
+  deployParams: [owner, [credential.id], [publicKey.x], [publicKey.y]],
   deploySalt: "0x",
-  signatory,
+  signatory: { webAuthnAccount, keyId: toHex(credential.id) },
 });
 ```
 
@@ -203,15 +216,16 @@ export const publicClient = createPublicClient({
 <TabItem value="signatory.ts">
 
 ```typescript
-import { createCredential, parsePublicKey } from "webauthn-p256";
-import { toWebAuthnAccount } from "viem/account-abstraction";
-import { toHex } from "viem";
-
-const credential = await createCredential({ name: "Your Delegator Passkey" });
-const webAuthnAccount = toWebAuthnAccount({ credential });
-const keyId = toHex("my-key-id");
+import { 
+  createWebAuthnCredential, 
+  toWebAuthnAccount, 
+} from "viem/account-abstraction";
 
-const signatory = { webAuthnAccount, keyId };
+export const credential = await createWebAuthnCredential({
+  name: "MetaMask Smart Account",
+});
+
+export const webAuthnAccount = toWebAuthnAccount({ credential });
 ```
 
 </TabItem>

delegation-toolkit/how-to/send-user-operation.md

@@ -109,6 +109,12 @@ The following example updates the previous example to estimate the fees.
 This example uses constant values, but the [Hello Gator example](https://github.com/MetaMask/hello-gator) uses Pimlico's Alto bundler,
 which fetches user operation gas price using the RPC method [`pimlico_getUserOperationPrice`](https://docs.pimlico.io/infra/bundler/endpoints/pimlico_getUserOperationGasPrice).
 
+:::info Installation required
+
+To estimate the gas fee, we'll use the [permissionless.js](https://docs.pimlico.io/references/permissionless/) SDK. Please make sure the SDK is installed.
+
+:::
+
 ```typescript title="example.ts"
 // add-next-line
 + import { createPimlicoClient } from "permissionless/clients/pimlico";