Connect to MetaMask using JavaScript + Wagmi

Get started with MetaMask SDK in a JavaScript and Wagmi dapp. You can download the quickstart template or manually set up the SDK in an existing dapp.

Prerequisites

Node.js version 19 or later installed.
A package manager installed, such as npm, Yarn, pnpm, or bun.
MetaMask installed in your browser or on mobile.

Set up using a template

Download the MetaMask SDK Wagmi template:

npx degit MetaMask/metamask-sdk-examples/quickstarts/wagmi metamask-wagmi

Navigate into the repository:
```
cd metamask-wagmi
```
Degit vs. Git clone
degit is a tool that enables cloning only the directory structure from a GitHub repository, without retrieving the entire repository.
Alternatively, you can use git clone, which will download the entire repository. To do so, clone the MetaMask SDK examples repository and navigate into the quickstarts/wagmi directory:
git clone https://github.com/MetaMask/metamask-sdk-examples cd metamask-sdk-examples/quickstarts/wagmi
Install dependencies:
```
pnpm install
```
Run the project:
```
pnpm dev
```

Set up manually

1. Install the SDK

Install MetaMask SDK along with its peer dependencies to an existing React project:

npm
Yarn
pnpm
Bun

npm install @metamask/sdk wagmi viem@2.x @tanstack/react-query

yarn add @metamask/sdk wagmi viem@2.x @tanstack/react-query

pnpm add @metamask/sdk wagmi viem@2.x @tanstack/react-query

bun add @metamask/sdk wagmi viem@2.x @tanstack/react-query

2. Import required dependencies

In the root of your project, import the required dependencies:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { http, WagmiProvider, createConfig } from "wagmi"
import { mainnet, linea, lineaSepolia } from "wagmi/chains"
import { metaMask } from "wagmi/connectors"

3. Configure your project

Set up your configuration with the desired chains and connectors. For example:

const config = createConfig({
  ssr: true, // Make sure to enable this for server-side rendering (SSR) applications.
  chains: [mainnet, linea, lineaSepolia],
  connectors: [
    metaMask({
      infuraAPIKey: process.env.NEXT_PUBLIC_INFURA_API_KEY!,
    }),
  ],
  transports: {
    [mainnet.id]: http(),
    [linea.id]: http(),
    [lineaSepolia.id]: http(),
  },
});

4. Set up providers

Wrap your application with the necessary providers:

const client = new QueryClient()

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={client}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </WagmiProvider>
  )
}

5. Add the connect button

Add the wallet connect and disconnect buttons to your application:

import { useAccount, useConnect, useDisconnect } from "wagmi"

export const ConnectButton = () => {
  const { address } = useAccount()
  const { connectors, connect } = useConnect()
  const { disconnect } = useDisconnect()

  return (
    <div>
      {address ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        connectors.map(connector => (
          <button key={connector.uid} onClick={() => connect({ connector })}>
            {connector.name}
          </button>
        ))
      )}
    </div>
  )
}

Once you've added the connect button, you can test your dapp by running pnpm run dev.

Production readiness

tip

For production deployments, it's important to use reliable RPC providers instead of public nodes. We recommend using services like MetaMask Developer to ensure better reliability and performance.

You can configure your RPC endpoints in the Wagmi configuration as follows:

const config = createConfig({
  // ... other config options
  transports: {
    [mainnet.id]: http("https://mainnet.infura.io/v3/<YOUR-API-KEY>"),
    [sepolia.id]: http("https://sepolia.infura.io/v3/<YOUR-API-KEY>"),
  },
})

Next steps

After completing the basic setup, you can follow these guides to add your own functionality: