|
| 1 | +--- |
| 2 | +description: Learn how to use Dynamic signer with MetaMask Smart Accounts. |
| 3 | +sidebar_label: Dynamic |
| 4 | +keywords: [dynamic, smart account, signer, metamask smart account] |
| 5 | +--- |
| 6 | + |
| 7 | +# Use Dynamic with MetaMask Smart Accounts |
| 8 | + |
| 9 | +[Dynamic](https://www.dynamic.xyz/) is an embedded wallet solution that enables seamless social login and passkey based |
| 10 | +wallets, making user onboarding easier. MetaMask Smart Accounts is a signer agnostic implementation |
| 11 | +that allows you to use Dynamic's EOA wallet as a signer for MetaMask Smart Accounts. |
| 12 | + |
| 13 | +View the complete code for this guide at [gator-examples repository](https://github.com/MetaMask/gator-examples/tree/main/examples/smart-accounts/signers/dynamic). |
| 14 | + |
| 15 | +:::info |
| 16 | +This guide is targeted towards React and React-based frameworks. |
| 17 | +::: |
| 18 | + |
| 19 | +## Prerequisites |
| 20 | + |
| 21 | +- Install [Node.js](https://nodejs.org/en/blog/release/v18.18.0) v18 or later. |
| 22 | +- Install [Yarn](https://yarnpkg.com/), |
| 23 | + [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), or another package manager |
| 24 | +- A [Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id) |
| 25 | + |
| 26 | +## Steps |
| 27 | + |
| 28 | +### 1. Install dependencies |
| 29 | + |
| 30 | +Install the following dependencies: |
| 31 | + |
| 32 | +```bash npm2yarn |
| 33 | +npm install @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem |
| 34 | +``` |
| 35 | + |
| 36 | +### 2. Create the Dynamic provider |
| 37 | + |
| 38 | +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 |
| 39 | +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 |
| 40 | +connector enables you to use Wagmi hooks with Dynamic. |
| 41 | + |
| 42 | +Once you have created the `DynamicProvider`, you must wrap it at the root of your application so |
| 43 | +that the rest of your application has access to the Dynamic context. |
| 44 | + |
| 45 | +For the advance configuration, see how to [configure Dynamic & Wagmi](https://www.dynamic.xyz/docs/react-sdk/using-wagmi). |
| 46 | + |
| 47 | +<Tabs> |
| 48 | +<TabItem value = "provider.ts"> |
| 49 | + |
| 50 | +```ts |
| 51 | +import { QueryClientProvider } from "@tanstack/react-query"; |
| 52 | +import { WagmiProvider } from "wagmi"; |
| 53 | +import { ReactNode } from "react"; |
| 54 | +import { EthereumWalletConnectors } from "@dynamic-labs/ethereum"; |
| 55 | +import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core"; |
| 56 | +import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector"; |
| 57 | +import { wagmiConfig, queryClient } from "./config.ts" |
| 58 | + |
| 59 | +export function DynamicProvider({ children }: { children: ReactNode }) { |
| 60 | + return ( |
| 61 | + <DynamicContextProvider |
| 62 | + settings={{ |
| 63 | + // Get your environment id at https://app.dynamic.xyz/dashboard/developer |
| 64 | + environmentId: "<YOUR_DYNAMIC_ENVIRONMENT_ID>", |
| 65 | + walletConnectors: [EthereumWalletConnectors], |
| 66 | + }} |
| 67 | + > |
| 68 | + <QueryClientProvider client={queryClient}> |
| 69 | + <WagmiProvider config={wagmiConfig}> |
| 70 | + <DynamicWagmiConnector> |
| 71 | + {children} |
| 72 | + </DynamicWagmiConnector> |
| 73 | + </WagmiProvider> |
| 74 | + </QueryClientProvider> |
| 75 | + </DynamicContextProvider > |
| 76 | + ); |
| 77 | +} |
| 78 | +``` |
| 79 | + |
| 80 | +</TabItem> |
| 81 | + |
| 82 | +<TabItem value = "config.ts"> |
| 83 | + |
| 84 | +```ts |
| 85 | +import { QueryClient } from "@tanstack/react-query"; |
| 86 | +import { createConfig, http } from "wagmi"; |
| 87 | +import { sepolia } from "viem/chains"; |
| 88 | + |
| 89 | +export const queryClient = new QueryClient(); |
| 90 | + |
| 91 | +export const wagmiConfig = createConfig({ |
| 92 | + chains: [sepolia], |
| 93 | + ssr: true, |
| 94 | + transports: { |
| 95 | + [sepolia.id]: http(), |
| 96 | + }, |
| 97 | +}); |
| 98 | +``` |
| 99 | + |
| 100 | +</TabItem> |
| 101 | +</Tabs> |
| 102 | + |
| 103 | +### 3. Create a smart account |
| 104 | + |
| 105 | +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 |
| 106 | +MetaMask smart account. |
| 107 | + |
| 108 | +```ts |
| 109 | +import { Implementation, toMetaMaskSmartAccount } from "@metamask/smart-accounts-kit"; |
| 110 | +import { useAccount, usePublicClient, useWalletClient } from "wagmi"; |
| 111 | + |
| 112 | +const { address } = useAccount(); |
| 113 | +const publicClient = usePublicClient(); |
| 114 | +const { data: walletClient } = useWalletClient(); |
| 115 | + |
| 116 | +// Additional check to make sure the Dyanmic wallet is connected |
| 117 | +// and values are available. |
| 118 | +if (!address || !walletClient || !publicClient ) { |
| 119 | + // Handle the error case |
| 120 | + } |
| 121 | + |
| 122 | +const smartAccount = await toMetaMaskSmartAccount({ |
| 123 | + client: publicClient, |
| 124 | + implementation: Implementation.Hybrid, |
| 125 | + deployParams: [address, [], [], []], |
| 126 | + deploySalt: "0x", |
| 127 | + signer: { walletClient }, |
| 128 | +}); |
| 129 | +``` |
| 130 | + |
| 131 | +## Next steps |
| 132 | + |
| 133 | +- See how to [send a user operation](../send-user-operation.md). |
| 134 | +- To sponsor gas for end users, see how to [send a gasless transaction](../send-gasless-transaction.md). |
0 commit comments