Getting Started

Quick setup

It is recommended to set up your wagmi app using the create-wagmi command line interface (CLI). This will set up a new wagmi app using TypeScript and install the required dependencies:

npm init wagmi

When the setup is complete, you can start your app by running npm run dev and then navigating to http://localhost:3000.

Want to learn more? Check out the create-wagmi CLI docs.

Manual setup

Installation

Install wagmi and its viem peer dependency.

npm i wagmi viem

Configure chains

First, configure your desired chains to be used by wagmi, and the providers you want to use.

import { configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)

This example uses the Ethereum Mainnet chain (mainnet) from wagmi, however, you can also pass in any EVM-compatible chain.

Note: In a production app, it is not recommended to only pass publicProvider to configureChains as you will probably face rate-limiting on the public provider endpoints. It is recommended to also pass an alchemyProvider or infuraProvider as well.

Create a wagmi config

Next, create a wagmi config instance using createConfig, and pass the result from configureChains to it.

import { WagmiConfig, createConfig, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()],
)
 
const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})

Wrap app with `WagmiConfig`

Finally, wrap your app with the WagmiConfig component, passing config to it.

const config = createConfig({
  autoConnect: true,
  publicClient,
  webSocketPublicClient,
})
 
function App() {
  return (
    <WagmiConfig config={config}>
      <YourRoutes />
    </WagmiConfig>
  )
}

You're good to go!

Use hooks! Every component inside the WagmiConfig is now set up to use the wagmi hooks.

import { useAccount, useConnect, useEnsName } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
 
function Profile() {
  const { address, isConnected } = useAccount()
  const { data: ensName } = useEnsName({ address })
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
 
  if (isConnected) return <div>Connected to {ensName ?? address}</div>
  return <button onClick={() => connect()}>Connect Wallet</button>
}

Want to learn more? Check out the examples to learn how to use wagmi in real-world scenarios or continue on reading the documentation.

Library Comparison