Connect to MetaMask using JavaScript + ConnectKit

Get started with MetaMask SDK in a JavaScript and ConnectKit 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.
• A WalletConnect project ID from the Reown dashboard.

Set up using a template

1. Download the MetaMask SDK ConnectKit template:

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

2. Navigate into the repository:

   cd metamask-connectkit

   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/connectkit directory:

   git clone https://github.com/MetaMask/metamask-sdk-examples
   cd metamask-sdk-examples/quickstarts/connectkit

3. Install dependencies:

   pnpm install

4. Create a .env.local file:

   touch .env.local

5. In .env.local, add a VITE_WALLETCONNECT_PROJECT_ID environment variable, replacing <YOUR-PROJECT-ID> with your WalletConnect project ID:

   .env.local

   VITE_WALLETCONNECT_PROJECT_ID=<YOUR-PROJECT-ID>

6. 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 connectkit wagmi viem@2.x @tanstack/react-query

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

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

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

2. Import required dependencies

In the root of your project, import the required ConnectKit, Wagmi, and TanStack Query dependencies:

import { ConnectKitProvider, getDefaultConfig } from 'connectkit'
import { createConfig, http, WagmiProvider } from 'wagmi'
import { mainnet, linea, sepolia, lineaSepolia } from 'wagmi/chains'
import { QueryClientProvider, QueryClient } from '@tanstack/react-query'

3. Configure your project

Set up your configuration with the desired chains and wallets. In the following example, add your WalletConnect project ID:

const config = createConfig(
  getDefaultConfig({
    // Your dApps chains
    chains: [mainnet, linea, sepolia, lineaSepolia],
    transports: {
      // RPC URL for each chain
      [mainnet.id]: http(),
    },

    // Required API Keys
    walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,

    // Required App Info
    appName: 'MetaMask SDK ConnectKit Quickstart',
  })
)

4. Set up providers

Wrap your application with the WagmiProvider, QueryClientProvider, and ConnectKitProvider providers:

const queryClient = new QueryClient()

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider theme="rounded">
          <App />
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </StrictMode>
);

5. Add the connect button

Import and render the ConnectKitButton component:

import { ConnectKitButton } from 'connectkit'

function App() {
  return <ConnectKitButton />
}

export default App

You can now test your dapp by running pnpm run dev.

Live example