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..10723a10b4b --- /dev/null +++ b/smart-accounts-kit/guides/smart-accounts/signers/dynamic.md @@ -0,0 +1,134 @@ +--- +description: Learn how to use Dynamic signer with MetaMask Smart Accounts. +sidebar_label: Dynamic +keywords: [dynamic, smart account, signer, metamask smart 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). + +:::info +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. +- 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) + +## 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 ( + ", + walletConnectors: [EthereumWalletConnectors], + }} + > + + + + {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, 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 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