> For the complete documentation index, see [llms.txt](/llms.txt).

# Use Dynamic with MetaMask Smart Accounts

[Dynamic](https://www.dynamic.xyz/) is an embedded wallet solution that enables seamless social sign-in 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 [smart accounts](/smart-accounts-kit/development/reference/glossary#metamask-smart-account)**MetaMask smart account** A smart contract account created using the Smart Accounts Kit that supports programmable behavior, flexible signing options, and ERC-7710 delegations..

info

This guide supports React and React-based frameworks.

## Prerequisites[​](#prerequisites "Direct link to 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.
- Create a [Dynamic Environment ID](https://www.dynamic.xyz/docs/developer-dashboard/tokens-api-keys#environment-id).

## Steps[​](#steps "Direct link to Steps")

### 1. Install dependencies[​](#1-install-dependencies "Direct link to 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[​](#2-create-the-dynamic-provider "Direct link to 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 Dynamic's 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's context.

For an advanced configuration, see how to [configure Dynamic and Wagmi](https://www.dynamic.xyz/docs/react-sdk/using-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[​](#3-create-a-smart-account "Direct link to 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](/smart-accounts-kit/development/reference/glossary#metamask-smart-account)**MetaMask smart account** A smart contract account created using the Smart Accounts Kit that supports programmable behavior, flexible signing options, and ERC-7710 delegations..

```
import { Implementation, toMetaMaskSmartAccount } from '@metamask/smart-accounts-kit'
import { useConnection, usePublicClient, useWalletClient } from 'wagmi'

const { address } = useConnection()
const publicClient = usePublicClient()
const { data: walletClient } = useWalletClient()

// Additional check to make sure the Dyanmic 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[​](#next-steps "Direct link to Next steps")

- See how to [send a user operation](/smart-accounts-kit/development/guides/smart-accounts/send-user-operation/).
- To sponsor gas for end users, see how to [send a gasless transaction](/smart-accounts-kit/development/guides/smart-accounts/send-gasless-transaction/).