Use Dynamic with MetaMask Smart Accounts

Dynamic 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.

info

This guide is targeted towards React and React-based frameworks.

Prerequisites

• Install Node.js v18 or later.
• Install Yarn, npm, or another package manager
• A Dynamic Environment ID

Steps

1. Install dependencies

Install the following dependencies:

• npm
• Yarn
• pnpm
• Bun

npm install @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

yarn add @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

pnpm add @dynamic-labs/ethereum @dynamic-labs/sdk-react-core @dynamic-labs/wagmi-connector @metamask/smart-accounts-kit @tanstack/react-query wagmi viem

bun add @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 component to provide the Dynamic context to your application. You'll also use the DynamicWagmiConnector 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.

• provider.ts
• config.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 (
    <DynamicContextProvider
      settings={{
        // Get your environment id at https://app.dynamic.xyz/dashboard/developer
        environmentId: "<YOUR_DYNAMIC_ENVIRONMENT_ID>",
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>
          <DynamicWagmiConnector>
            {children}
          </DynamicWagmiConnector>
        </WagmiProvider>
      </QueryClientProvider>
    </DynamicContextProvider >
  );
}

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 from Wagmi as the signer to create a MetaMask smart account.

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.
• To sponsor gas for end users, see how to send a gasless transaction.