Client

The wagmi Client is a framework agnostic (Vanilla JS) client that manages wallet connection state and configuration, such as: auto-connection, connectors, and ethers providers.

import { createClient } from 'wagmi'

Usage

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { provider, webSocketProvider } = configureChains(
  [mainnet],
  [publicProvider()],
)
 
const client = createClient({
  provider,
  webSocketProvider,
})

Configuration

autoConnect (optional)

Enables reconnecting to last used connector on mount. Defaults to false.

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { provider } = configureChains([mainnet], [publicProvider()])
 
const client = createClient({
  autoConnect: true,
  provider,
})

connectors (optional)

Connectors used for linking accounts. Defaults to [new InjectedConnector()].

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'
 
const { chains, provider } = configureChains([mainnet], [publicProvider()])
 
const client = createClient({
  connectors: [
    new InjectedConnector({ chains }),
    new WalletConnectConnector({
      chains,
      options: {
        projectId: '...',
      },
    }),
  ],
  provider,
})

logger (optional)

Adds the ability to provide a custom logger to override how logs are broadcasted in wagmi. Defaults to console logging.

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
import { logWarn } from './logger'
 
const { provider } = configureChains([mainnet], [publicProvider()])
 
const client = createClient({
  logger: {
    warn: (message) => logWarn(message),
  },
  provider,
})

You can also disable a logger by passing null as the value.

// ...
 
const client = createClient({
  logger: {
    warn: null,
  },
  provider,
})

provider

ethers interface for connecting to the Ethereum network.

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { provider } = configureChains([mainnet], [publicProvider()])
 
const client = createClient({
  provider,
})

You can create a "chain-aware" provider by using the configureChains API or passing a function that updates based on chainId.

storage (optional)

The default strategy to persist and cache data. Defaults to window.localStorage.

import { createClient, createStorage, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { provider } = configureChains([mainnet], [publicProvider()])
 
const client = createClient({
  provider,
  storage: createStorage({ storage: window.localStorage }),
})

webSocketProvider (optional)

ethers WebSocket interface for connecting to the Ethereum network. If you provide a WebSocket provider, it will be used instead of polling in certain instances.

import { createClient, configureChains, mainnet } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'
 
const { provider, webSocketProvider } = configureChains(
  [mainnet],
  [publicProvider()],
)
 
const client = createClient({
  provider,
  webSocketProvider,
})

You can create a "chain-aware" webSocketProvider by using the configureChains API or passing a function that updates based on chainId.

TypeScript WagmiConfig