Provider

The Provider manages configuration for all hooks using React Context.

import { Provider } 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 wagmiWallet. Should be unique so it doesn't get overwritten by other libraries.

import { Provider } from 'wagmi'

const App = () => (
  <Provider connectorStorageKey="mirrorWagmiWallet">
    <YourRoutes />
  </Provider>
)

connectors (optional)#

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

import {
  InjectedConnector,
  Provider,
  WalletConnectConnector,
  defaultChains,
} from 'wagmi'

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

ethers.js interface for connecting to 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 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 provider = ({ chainId }) =>
  new providers.InfuraWebSocketProvider(chainId, 'Your infura id')

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