Skip to content
Documentation
/
Provider

Provider

The Provider manages configuration for all hooks using React Context.

import { Provider } from 'wagmi'

To help avoid conflicts with other providers in your app, the Provider is also aliased as WagmiProvider.

import { WagmiProvider } from 'wagmi'

Usage

import { Provider } from 'wagmi'

const App = () => (
  <Provider>
    <YourRoutes />
  </Provider>
)

Configuration

autoConnect (optional)

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

import { Provider } from 'wagmi'

const App = () => (
  <Provider autoConnect>
    <YourRoutes />
  </Provider>
)

connectorStorageKey (optional)

Key for saving connector preference to browser. Defaults to wagmi.connector. Should be unique so it doesn't get overwritten by other libraries.

import { Provider } from 'wagmi'

const App = () => (
  <Provider connectorStorageKey="mirror.wallet">
    <YourRoutes />
  </Provider>
)

connectors (optional)

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

import { Provider, defaultChains } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

const connectors = [
  new InjectedConnector({ chains: defaultChains }),
  new WalletConnectConnector({
    chains: defaultChains,
    options: {
      infuraId: 'Your infura id',
      qrcode: true,
    },
  }),
]

const App = () => (
  <Provider connectors={connectors}>
    <YourRoutes />
  </Provider>
)
💡

Learn more about wagmi's built-in connectors or how to create a custom connector here.

provider (optional)

ether.js interface for connecting to a network. Defaults to getDefaultProvider().

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

const provider = ({ chainId }) =>
  new providers.InfuraProvider(chainId, 'Your infura id')

const App = () => (
  <Provider provider={provider}>
    <YourRoutes />
  </Provider>
)
💡

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

webSocketProvider (optional)

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

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

const webSocketProvider = ({ chainId }) =>
  new providers.InfuraWebSocketProvider(chainId, 'Your infura id')

const App = () => (
  <Provider webSocketProvider={webSocketProvider}>
    <YourRoutes />
  </Provider>
)
Library Comparison
Injected