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

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

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