From d2b3f2e4faa963db4a1d87443d15e0a5468eb2f5 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 14:13:17 +0400 Subject: [PATCH 1/5] add dynamic guide --- gator-sidebar.js | 8 ++ .../execute-on-metamask-users-behalf.md | 2 + .../execute-on-metamask-users-behalf.md | 2 + .../guides/smart-accounts/signers/dynamic.md | 128 ++++++++++++++++++ 4 files changed, 140 insertions(+) create mode 100644 smart-accounts-kit/guides/smart-accounts/signers/dynamic.md diff --git a/gator-sidebar.js b/gator-sidebar.js index 0d2bde0c3f3..59ab195f71c 100644 --- a/gator-sidebar.js +++ b/gator-sidebar.js @@ -58,6 +58,14 @@ const sidebar = { 'guides/smart-accounts/send-user-operation', 'guides/smart-accounts/send-gasless-transaction', 'guides/smart-accounts/generate-multisig-signature', + { + type: 'category', + label: 'Configure signers', + collapsed: true, + items: [ + 'guides/smart-accounts/signers/dynamic', + ], + }, ], }, { diff --git a/gator_versioned_docs/version-0.2.0/guides/advanced-permissions/execute-on-metamask-users-behalf.md b/gator_versioned_docs/version-0.2.0/guides/advanced-permissions/execute-on-metamask-users-behalf.md index c54dc919e85..8b1fa43ec66 100644 --- a/gator_versioned_docs/version-0.2.0/guides/advanced-permissions/execute-on-metamask-users-behalf.md +++ b/gator_versioned_docs/version-0.2.0/guides/advanced-permissions/execute-on-metamask-users-behalf.md @@ -21,6 +21,8 @@ In this guide, you'll request an ERC-20 periodic transfer permission from a Meta - [Install and set up the Smart Accounts Kit](../../get-started/install.md) - [Install MetaMask Flask 13.5.0 or later](/snaps/get-started/install-flask) +## Steps + ### 1. Set up a Wallet Client Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will diff --git a/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf.md b/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf.md index c54dc919e85..8b1fa43ec66 100644 --- a/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf.md +++ b/smart-accounts-kit/guides/advanced-permissions/execute-on-metamask-users-behalf.md @@ -21,6 +21,8 @@ In this guide, you'll request an ERC-20 periodic transfer permission from a Meta - [Install and set up the Smart Accounts Kit](../../get-started/install.md) - [Install MetaMask Flask 13.5.0 or later](/snaps/get-started/install-flask) +## Steps + ### 1. Set up a Wallet Client Set up a [Viem Wallet Client](https://viem.sh/docs/clients/wallet) using Viem's `createWalletClient` function. This client will diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md new file mode 100644 index 00000000000..798e70cff9e --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -0,0 +1,128 @@ +--- +description: Learn how to use Dynamic signer with MetaMask Smart Accounts. +sidebar_label: Dynamic +keywords: [dynamic, smart account, signer, metamask samrt account] +--- + +# Use Dynamic with MetaMask Smart Accounts + +[Dynamic](https://www.dynamic.xyz/) is an embedded wallet solution that enables seamless social login and passkey based +wallets, making user onboarding easier. MetaMask Smart Accounts is a signer agnostic implementation +that allows you to use Dynamic's EOA wallet as a signer for MetaMask Smart Accounts. + +View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). + +## Prerequisites + +- Install [Yarn](https://yarnpkg.com/), + [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager +- [Create a Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id) + +## Steps + +### 1. Install dependencies + +Install the following dependencies: + +```bash npm2yarn +npm install @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem +``` + +### 2. Create the Dynamic provider + +In this step, you'll configure the [`DynamicContextProvider`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-context-provider) component to provide the Dynamic context +to your application. You'll also use the [`DynamicWagmiConnector`](https://www.dynamic.xyz/docs/react-sdk/providers/providers-introduction#dynamic-wagmi-connector) to integrate Dynamic with Wagmi. This +connector enables you to use Wagmi hooks with Dynamic. + +Once you have created the `DynamicProvider`, you must wrap it at the root of your application so +that the rest of your application has access to the Dynamic context. + +For the advance configuration, see how to [configure Dynamic & Wagmi](https://www.dynamic.xyz/docs/react-sdk/using-wagmi). + + + + +```ts +import { QueryClientProvider } from "@tanstack/react-query"; +import { WagmiProvider } from "wagmi"; +import { ReactNode } from "react"; +import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; +import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; +import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector"; +import { wagmiConfig, queryClient } from "./config.ts" + +export function DynamicProvider({ children }: { children: ReactNode }) { + return ( + + + + + {children} + + + + + ); +} +``` + + + + + +```ts +import { QueryClient } from "@tanstack/react-query"; +import { createConfig, http } from "wagmi"; +import { sepolia } from "viem/chains"; + +export const queryClient = new QueryClient(); + +export const wagmiConfig = createConfig({ + chains: [sepolia], + ssr: true, + transports: { + [sepolia.id]: http(), + }, +}); +``` + + + + +### 3. Create a smart account + +Once the user has connected their wallet, you can use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a +MetaMask smart account. + +```ts +import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit"; +import { useAccount, usePublicClient, useWalletClient } from "wagmi"; + +const { address } = useAccount(); +const publicClient = usePublicClient(); +const { data: walletClient } = useWalletClient(); + +// Additional check to make sure the Dyanmic wallet is connected +// and values are available. +if (!address || !walletClient || !publicClient ) { + // Handle the error case + } + +const smartAccount = await toMetaMaskSmartAccount({ + client: publicClient, + implementation: Implementation.Hybrid, + deployParams: [address, [], [], []], + deploySalt: "0x", + signer: { walletClient }, +}); +``` + +## Next steps +- See how to [send a user operations](../send-user-operation.md). +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). \ No newline at end of file From 3334767ac74fed676a0e4a7ca6f1949f667f4fcb Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Mon, 8 Dec 2025 20:03:53 +0400 Subject: [PATCH 2/5] Apply suggestions from code review Co-authored-by: m4sterbunny --- .../guides/smart-accounts/signers/dynamic.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md index 798e70cff9e..b55e9e82010 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -16,7 +16,7 @@ View the complete code for this guide at [gator-examples repository](https://git - Install [Yarn](https://yarnpkg.com/), [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager -- [Create a Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id) +- A [Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id) ## Steps @@ -56,7 +56,7 @@ export function DynamicProvider({ children }: { children: ReactNode }) { ", walletConnectors: [EthereumWalletConnectors], }} > @@ -124,5 +124,6 @@ const smartAccount = await toMetaMaskSmartAccount({ ``` ## Next steps -- See how to [send a user operations](../send-user-operation.md). + +- See how to [send a user operation](../send-user-operation.md). - To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). \ No newline at end of file From a51321fdb1ecf73fc1347cdd3c7068eec894aec5 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 20:07:56 +0400 Subject: [PATCH 3/5] update prerequisites --- smart-accounts-kit/guides/smart-accounts/signers/dynamic.md | 1 + 1 file changed, 1 insertion(+) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md index b55e9e82010..12747ec39bb 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -14,6 +14,7 @@ View the complete code for this guide at [gator-examples repository](https://git ## Prerequisites +- 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 - A [Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id) From 5cf4f2e2e8c57a8fd14f9188703e7cb74a4be5c2 Mon Sep 17 00:00:00 2001 From: AyushBherwani1998 Date: Mon, 8 Dec 2025 21:16:41 +0400 Subject: [PATCH 4/5] add guide note --- smart-accounts-kit/guides/smart-accounts/signers/dynamic.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md index 12747ec39bb..b9f2fef5932 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -12,6 +12,10 @@ that allows you to use Dynamic's EOA wallet as a signer for MetaMask Smart Accou View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). +:::info +Please note, this guide is targeted towards React and React-based frameworks. +::: + ## Prerequisites - Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later. From 957880850416fd776dcd091a4d58dd13abf3432e Mon Sep 17 00:00:00 2001 From: Ayush Bherwani Date: Tue, 9 Dec 2025 07:00:40 +0400 Subject: [PATCH 5/5] Apply suggestions from code review Co-authored-by: Byron Gravenorst <50852695+bgravenorst@users.noreply.github.com> --- smart-accounts-kit/guides/smart-accounts/signers/dynamic.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md index b9f2fef5932..10723a10b4b 100644 --- a/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -1,7 +1,7 @@ --- description: Learn how to use Dynamic signer with MetaMask Smart Accounts. sidebar_label: Dynamic -keywords: [dynamic, smart account, signer, metamask samrt account] +keywords: [dynamic, smart account, signer, metamask smart account] --- # Use Dynamic with MetaMask Smart Accounts @@ -13,7 +13,7 @@ that allows you to use Dynamic's EOA wallet as a signer for MetaMask Smart Accou View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). :::info -Please note, this guide is targeted towards React and React-based frameworks. +This guide is targeted towards React and React-based frameworks. ::: ## Prerequisites @@ -102,7 +102,7 @@ export const wagmiConfig = createConfig({ ### 3. Create a smart account -Once the user has connected their wallet, you can use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a +Once the user has connected their wallet, use the [Wallet Client](https://viem.sh/docs/clients/wallet) from Wagmi as the signer to create a MetaMask smart account. ```ts