Skip to content
Docs
Getting Started

Getting Started

Installation

Install wagmi and its ethers peer dependency.

npm i wagmi ethers

Quick Start

1. Configure chains

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

import { configureChains, chain } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains(
  [chain.mainnet, chain.polygon],
  [publicProvider()],
)

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.

Read more about configuring chains

2. Create a wagmi client

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

import {
  WagmiConfig,
  createClient,
  configureChains,
  defaultChains,
} from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains(
  [chain.mainnet, chain.polygon],
  [publicProvider()],
)

const client = createClient({
  autoConnect: true,
  provider,
  webSocketProvider,
})

Read more about client configuration

3. Wrap app with WagmiConfig

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

const client = createClient({
  autoConnect: true,
  provider,
  webSocketProvider,
})

function App() {
  return (
    <WagmiConfig client={client}>
      <YourRoutes />
    </WagmiConfig>
  )
}

4. 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.

Last updated on September 1, 2022
Library Comparison