Add DTK tutorial for creating an invite link by alexandratran · Pull Request #2289 · MetaMask/metamask-docs

alexandratran · 2025-09-09T18:06:20Z

Description

Add DTK tutorial for creating an invite link.

Issue(s) fixed

Fixes #2209

Preview

https://metamask-docs-i5mlyvk77-consensys-ddffed67.vercel.app/tutorials/create-invite-link/

Checklist

If this PR updates or adds documentation content that changes or adds technical meaning, it has received an approval from an engineer or DevRel from the relevant team.
If this PR updates or adds documentation content, it has received an approval from a technical writer.

Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”>

useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com>

vercel · 2025-09-09T18:06:30Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
metamask-docs	Ready	Preview	Comment	Sep 15, 2025 0:33am

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

* Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com>

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

* Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

…amask-docs into 2209-referral-link-tutorial # Conflicts: # src/pages/tutorials/create-custom-caveat-enforcer.md

bgravenorst

LGTM, some minor feedback added.

src/pages/tutorials/create-invite-link.md

AyushBherwani1998 · 2025-09-12T19:23:53Z

src/pages/tutorials/create-invite-link.md

+import { Implementation, toMetaMaskSmartAccount } from '@metamask/delegation-toolkit';
+import { privateKeyToAccount } from 'viem/accounts';
+
+const account = privateKeyToAccount('0x...');


This should use wagmi hooks.

Updated. Question: do we still need to create the Viem Public Client in Step 2.1. if we're using the Wagmi usePublicClient in this step? It looks like in the Viem Public Client isn't used for the Bundler Client in the gator-example.

src/pages/tutorials/create-invite-link.md

AyushBherwani1998 · 2025-09-12T19:30:10Z

src/pages/tutorials/create-invite-link.md

+Encode the delegation into a shareable URL:
+
+```tsx
+export function encodeDelegation(delegation: Delegation): string {


imports are missing for this step.

AyushBherwani1998 · 2025-09-12T19:31:09Z

src/pages/tutorials/create-invite-link.md

+const urlParams = new URLSearchParams(window.location.search);
+const encodedDelegation = urlParams.get('delegation');
+
+export function decodeDelegation(encodedDelegation: string): Delegation {
+  const decodedDelegationJson = Buffer.from(encodedDelegation, 'base64').toString('utf-8');
+  return JSON.parse(decodedDelegationJson) as Delegation;
+}
+
+const decodedDelegation = decodeDelegation(encodedDelegation);


same, imports are missing. specially for the dtk functions/ classes

Is there anything missing besides Delegation?

I think this covers!

AyushBherwani1998 · 2025-09-12T19:32:44Z

src/pages/tutorials/create-invite-link.md

+[Redeem the delegation](/delegation-toolkit/development/guides/delegation/execute-on-smart-accounts-behalf/#7-redeem-the-delegation) by submitting a user operation from the smart account created in [Step 3](#3-create-a-smart-account) to the `DelegationManager` contract.
+The delegation manager validates the delegation and executes delegated actions.
+In this case, the invitee can spend up to 0.001 ETH when using your dapp.


Maybe we should change the words a bit, and say account be deployed for the first time users, or something? Invitee won't go through the step 3.

AyushBherwani1998 · 2025-09-12T19:34:35Z

src/pages/tutorials/create-invite-link.md

+
+const delegations = [decodedDelegation];
+
+const executions = createExecution({ target: zeroAddress });


This is not correct, this will basically do a 0 value transfer to zeroAddress. You can check this file.
https://github.com/MetaMask/gator-examples/blob/c391305074d1d3faa61e65f3994828bb4f369022/examples/invitation-link-example/src/utils/delegationUtils.ts

AyushBherwani1998 · 2025-09-15T06:13:15Z

src/pages/tutorials/create-invite-link.md

+Create a [Viem Public Client](https://viem.sh/docs/clients/public) using Viem's `createPublicClient` function.
+You will configure a Bundler Client with the Public Client, which you can use to query the signer's account state and interact with the blockchain network.
+
+```tsx
+import { createPublicClient, http } from 'viem';
+import { sepolia as chain } from 'viem/chains';
+
+const publicClient = createPublicClient({
+  chain,
+  transport: http(),
+});
+```


I think you also mentioned about getting this from Wagmi which was good point, this can be skipped and we can use wagmi hooks instead.

Added in the commit.

AyushBherwani1998

LGTM

* Add delegation scopes guide * add delegation scopes guide * minor edits and rename files * add delegation scopes to manual sidebar * restructure and edit * edit to include scopes in guides * address reviewer comments --------- Co-authored-by: “AyushBherwani1998” <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Tran <alexandratran@protonmail.com> * Update dtk tutorial for v0.13 * Update creating delegation references for v0.13 * Minor DTK fixes (#2277) * Minor DTK fixes * Apply suggestions from code review Co-authored-by: Ayush Bherwani <ayush.bherwani1998@gmail.com> --------- Co-authored-by: Ayush Bherwani <ayush.bherwani1998@gmail.com> * Fix broken links (#2278) * update execute on smart accounts behalf guide * add parameters in delegation scopes * update reference docs * update guide: execute-on-smart-accounts-behalf * Apply suggestions from code review Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --------- Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> * Update caveats to use new declarative format * update execution modes * update parametes of caveats to new caveat configs * update caveats api reference to new declarative format * Apply suggestions from code review Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * improve docs --------- Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Adds guide: Check the delegation state * add check delegation state guide * fix typos * minor edits --------- Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Tran <alexandratran@protonmail.com> * Adds guide: Constrain a scope * add constrain a scope documentation * edit guide and fix links * minor edits --------- Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Tran <alexandratran@protonmail.com> * Update reference section * restructure reference docs * add support for caveat enforcer client reference * add delegation api index page, fix links, adjust toc style * revert toc code font size --------- Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Tran <alexandratran@protonmail.com> * Update docs to use signer * update to use signer * revert the ref changes * apply reviewer suggestion Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --------- Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * Add DTK tutorial for creating an invite link (#2289) * Fix typos Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> * Update react-native.md (#2225) useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> * Add DTK tutorial for creating an invite link * Edit the Angular SDK content. (#2287) Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix deeplink urls (#2293) * Edit the embedded wallets React builder component. (#2292) * Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * update tutorial * Add DTK tutorial for creating an invite link * Update react-native.md (#2225) useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> * Edit the Angular SDK content. (#2287) Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Fix deeplink urls (#2293) * update tutorial * Edit the embedded wallets React builder component. (#2292) * Edit the React builder component. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * Typo. Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> * add wagmi step and adjust headings * address reviewer comments * address reviewer comments * minor edits --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> Co-authored-by: Ayush Bherwani <ayush.bherwani1998@gmail.com> Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”> Co-authored-by: Arnav Chhabra <65032719+Halleys123@users.noreply.github.com> Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com> * revert the ew changes * revert ew change * v0.13 changes * v0.13 changes * Apply suggestions from code review Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --------- Co-authored-by: Ayush Bherwani <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> * minor edits * remove todo * use disallows instead of disables * remove 7715 card from intro page * improve delegation scope ref description * add getMultiTokenPeriodEnforcerAvailableAmount action --------- Signed-off-by: bgravenorst <byron.gravenorst@consensys.net> Co-authored-by: “AyushBherwani1998” <“ayush.bherwani1998@gmail.com”> Co-authored-by: Alexandra Tran <alexandratran@protonmail.com> Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> Co-authored-by: Arnav Chhabra <65032719+Halleys123@users.noreply.github.com> Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com> Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com>

AyushBherwani1998 and others added 3 commits September 8, 2025 22:27

Fix typos

740d714

Co-authored-by: AyushBherwani1998 <“ayush.bherwani1998@gmail.com”>

Update react-native.md (#2225)

1486f6d

useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com>

Add DTK tutorial for creating an invite link

3497135

Merge branch 'main' into 2209-referral-link-tutorial

7c28e5c

vercel bot deployed to Preview September 9, 2025 18:14 View deployment

bgravenorst and others added 6 commits September 10, 2025 06:55

Edit the Angular SDK content. (#2287)

ff6ff1f

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

Fix deeplink urls (#2293)

d966333

Merge branch 'main' into 2209-referral-link-tutorial

3b24a89

update tutorial

4dcb4d6

Merge branch 'main' into 2209-referral-link-tutorial

bcdd2ac

alexandratran marked this pull request as ready for review September 10, 2025 21:51

alexandratran requested review from a team as code owners September 10, 2025 21:51

alexandratran and others added 6 commits September 10, 2025 14:53

Add DTK tutorial for creating an invite link

42fe3dd

Update react-native.md (#2225)

fa160d0

useSDK is now modified and connect, terminate options have moved to sdk object inside useSDK function Co-authored-by: Mohammad Shahbaz Alam <shahbaz17@users.noreply.github.com>

Edit the Angular SDK content. (#2287)

8535c5b

Signed-off-by: bgravenorst <byron.gravenorst@consensys.net>

Fix deeplink urls (#2293)

1ba7593

update tutorial

0f24150

vercel bot deployed to Preview September 10, 2025 21:55 View deployment

Merge branch '2209-referral-link-tutorial' of github.com:MetaMask/met…

e2f054d

…amask-docs into 2209-referral-link-tutorial # Conflicts: # src/pages/tutorials/create-custom-caveat-enforcer.md

alexandratran changed the base branch from main to feat/v0.13-dev September 10, 2025 22:03

vercel bot deployed to Preview September 10, 2025 22:06 View deployment

add wagmi step and adjust headings

11b5f01

alexandratran requested a review from AyushBherwani1998 September 11, 2025 20:45

bgravenorst approved these changes Sep 11, 2025

View reviewed changes

address reviewer comments

cf930bc

vercel bot deployed to Preview September 11, 2025 23:26 View deployment

AyushBherwani1998 self-assigned this Sep 12, 2025