Connect to MetaMask using Wagmi

Wagmi is a powerful and efficient React Hooks library designed to streamline dapp development by simplifying Ethereum interactions.

You can integrate MetaMask SDK into your dapp alongside Wagmi, using the MetaMask connector with Wagmi, to enable your users to seamlessly and securely connect to the MetaMask browser extension and MetaMask Mobile.

Prerequisites

• Node.js version 20+
• npm version 9+
• A text editor (for example, VS Code)
• The MetaMask extension or MetaMask Flask installed
• Basic knowledge of React

Steps

1. Set up the project

If you don't have an existing Wagmi project, create a new project directory using Wagmi's create wagmi command with the vite-react template:

npm create wagmi@latest  --template vite-react

This prompts you for a project name. For example, use mmsdk-wagmi. Once your project is created, navigate into it and install the node module dependencies:

cd mmsdk-wagmi && npm install

2. Configure the MetaMask connector

In wagmi.ts, configure the MetaMask connector with any parameters. Specify dappMetadata, including the name, url, and iconUrl, to help identify your dapp within the MetaMask ecosystem.

wagmi.ts

import { metaMask } from "wagmi/connectors"

export const config = createConfig({
  chains: [mainnet, sepolia],
  connectors: [
    metaMask({
      dappMetadata: {
        name: "Example Wagmi dapp",
        url: "https://wagmi.io",
        iconUrl: "https://wagmi.io/favicon.ico",
      },
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

note

By default, if the EIP-6963 MetaMask injected provider is detected, this connector will replace it. See Wagmi's rdns property for more information.

3. Run the dapp

Start the development server:

npm run dev

Navigate to the displayed localhost URL to view and test your dapp.

Next steps

See the Create a React dapp with the SDK and Wagmi tutorial for more information about configuring the SDK with Wagmi, and how the dapp behaves out of the box.