Skip to main content

JavaScript + Wagmi (recommended)

Get started with MetaMask SDK in your web application.

Setup via template​

Quickly bootstrap a new MetaMask SDK + wagmi + Next.js project using one of these methods:

Download directly from our examples repository:

git clone https://github.com/metamask/sdk-examples.git

Or bootstrap using our creation tool:

npx create-mm-sdk-app
# or
pnpm create mm-sdk-app --example https://github.com/metamask/sdk-examples/tree/main/demo-app
# or
yarn create mm-sdk-app --example https://github.com/metamask/sdk-examples/tree/main/demo-app

This will guide you through creating a new project directory with all necessary dependencies installed.

Manual setup​

Installation​

Install MetaMask SDK along with its peer dependencies:

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

Import required dependencies​

Go to the root of your project and import the required dependencies:

src/pages/_app.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { http, WagmiProvider, createConfig } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';
import { metaMask } from 'wagmi/connectors';

Configure​

Set up your configuration with desired chains and connectors.

src/pages/_app.tsx
const config = createConfig({
  ssr: true, // make sure to enable this for server-side rendering (SSR) applications
  chains: [mainnet, sepolia],
  connectors: [metaMask()],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
});

Set up providers​

Wrap your application with the necessary providers:

src/pages/_app.tsx
const client = new QueryClient();

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

Add connect button​

Add the wallet connect and disconnect buttons to your application:

src/components/ConnectButton.tsx
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 app by running npm run dev or pnpm run dev or yarn dev. It should work with the extension installed or the mobile app.

Production readiness​

tip

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

This is how you can configure your RPC endpoints via the Wagmi config:

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"),
  },
});

Sign up here to Infura for a free account and get your API key.

Add your own functionality​

Now that you have the basic setup complete, check out these guides to add your own functionality:

More examples​

Check out our example implementations for various frameworks: