Skip to content
Docs
/
Client

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.js providers.

import { createClient } from 'wagmi'

To help avoid conflicts with other libraries in your app, createClient is also aliased as createWagmiClient.

import { createWagmiClient } from 'wagmi'

Usage

import { createClient } from 'wagmi'

const client = createClient()

Configuration

autoConnect (optional)

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

import { createClient } from 'wagmi'

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

connectors (optional)

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

import { createClient } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

const client = createClient({
  connectors: [
    new InjectedConnector(),
    new WalletConnectConnector({
      options: {
        qrcode: true,
      },
    }),
  ],
})

connectors also accepts a function that receives basic data about the current connection. For example, this is useful if you want to make your connectors aware of the active chain.

import { createClient } from 'wagmi'
import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'

const client = createClient({
  connectors(config) {
    return [
      new InjectedConnector(),
      new CoinbaseWalletConnector({
        options: {
          appName: 'wagmi',
          chainId: config.chainId,
        },
      }),
    ]
  },
})

provider (optional)

ethers.js interface for connecting to the Ethereum network. Defaults to (config) => getDefaultProvider(config.chainId).

import { providers } from 'ethers'
import { createClient } from 'wagmi'

const client = createClient({
  provider(config) {
    return new providers.AlchemyProvider(config.chainId, 'Your Alchemy ID')
  },
})

provider also accepts an ethers.js provider directly instead of using a function, but you likely want to use the function approach instead so your provider is aware of the active chain.

💡

When using getDefaultProvider(), you likely want to provide an API key for each service to minimize disruptions. By default getDefaultProvider falls back to ethers.js shared API keys.

storage (optional)

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

import { createClient, createStorage } from 'wagmi'

const client = createClient({
  storage: createStorage({ storage: window.localStorage }),
})

webSocketProvider (optional)

ethers.js 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 { providers } from 'ethers'
import { createClient } from 'wagmi'

const client = createClient({
  webSocketProvider(config) {
    return new providers.AlchemyWebSocketProvider(
      config.chainId,
      'Your Alchemy ID',
    )
  },
})

webSocketProvider also accepts an ethers.js WebSocket provider directly instead of using a function, but you likely want to use the function approach instead so your WebSocket provider is aware of the active chain.

Migrating to 0.3.0
Provider