Connectors

Connectors allow users to securly connect their wallet to your app. When using wagmi, you configure whatever connectors you want to use and wagmi handles the rest!

Built-in Connectors#

The following built-in connectors are part of wagmi's core and support most wallets out in the wild.

Injected (MetaMask, etc.)#

The InjectedConnector supports wallets that inject an Ethereum provider into the browser or window. The MetaMask browser extension is the most popular example of this.

import { InjectedConnector } from 'wagmi'

Usage#

import { InjectedConnector } from 'wagmi'

const connector = new InjectedConnector()

Configuration#

Chains (optional)#

Chains supported by app. Defaults to defaultChains.

import { InjectedConnector, defaultChains, defaultL2Chains } from 'wagmi'

const connector = new InjectedConnector({
  chains: [...defaultChains, ...defaultL2Chains],
})

WalletConnect (Rainbow, etc.)#

The WalletConnectConnector wraps the WalletConnect Ethereum provider and supports its configuration options. This is a great option for adding support for many wallets to your app.

import { WalletConnectConnector } from 'wagmi'

Usage#

Install peer dependency:

yarn add @walletconnect/ethereum-provider

Or with npm:

npm install @walletconnect/ethereum-provider

import { WalletConnectConnector } from 'wagmi'

const connector = new WalletConnectConnector({
  options: {
    qrcode: true,
  },
})

Configuration#

Chains (optional)#

Chains supported by app. Defaults to defaultChains.

import { WalletConnectConnector, defaultChains, defaultL2Chains } from 'wagmi'

const connector = new WalletConnectConnector({
  chains: [...defaultChains, ...defaultL2Chains],
})

Options#

Options to pass to the WalletConnect Ethereum Provider.

import { WalletConnectConnector } from 'wagmi'

const connector = new WalletConnectConnector({
  options: {
    qrcode: true,
  },
})

WalletLink (Coinbase Wallet)#

The WalletLinkConnector wraps the WalletLink provider and supports connecting with Coinbase Wallet.

import { WalletLinkConnector } from 'wagmi'

Usage#

Install peer dependency:

yarn add walletlink

Or with npm:

npm install walletlink

import { WalletLinkConnector } from 'wagmi'

const connector = new WalletLinkConnector({
  options: {
    appName: 'Mirror.xyz',
    jsonRpcUrl: 'https://mainnet.infura.io/v3',
  },
})

Configuration#

Chains (optional)#

Chains supported by app. Defaults to defaultChains.

import { WalletLinkConnector, defaultChains, defaultL2Chains } from 'wagmi'

const connector = new WalletLinkConnector({
  chains: [...defaultChains, ...defaultL2Chains],
})

Options#

Options to pass to the WalletConnect Ethereum Provider.

import { WalletLinkConnector } from 'wagmi'

const connector = new WalletLinkConnector({
  options: {
    appName: 'Mirror.xyz',
    jsonRpcUrl: 'https://mainnet.infura.io/v3',
  },
})

Creating A Custom Connector#

If none of the built-in connectors work for your app, you can create a custom connector by extending the Connector class:

import { Connector } from 'wagmi'

export class CoolL2CustomConnector extends Connector {
  name = 'My Cool Custom Connector for L2s'

  constructor(config) {
    super(config)
  }

  // Implement other methods
}

Then, use it just like any other connector:

import { defaultL2Chains } from 'wagmi'

import { CoolL2CustomConnector } from './CoolL2CustomConnector'

const connector = new CoolL2CustomConnector({
  chains: defaultL2Chains,
  options: {
    // Custom connector options
  },
})