@wagmi/connectors

What is @wagmi/connectors?

@wagmi/connectors is a package that provides a set of connectors for integrating with various Ethereum wallets. It is part of the wagmi library, which is designed to make it easier to work with Ethereum in JavaScript and TypeScript applications. The connectors facilitate the connection between your application and different wallet providers, enabling functionalities such as authentication, transaction signing, and more.

What are @wagmi/connectors's main functionalities?

MetaMask Connector

This feature allows you to connect your application to the MetaMask wallet. The MetaMaskConnector can be configured with various options, such as supported chains and whether to shim the disconnect functionality.

const { MetaMaskConnector } = require('@wagmi/connectors');

const metaMaskConnector = new MetaMaskConnector({
  chains: [/* array of supported chains */],
  options: {
    shimDisconnect: true,
  },
});

WalletConnect Connector

This feature allows you to connect your application to wallets that support WalletConnect. The WalletConnectConnector can be configured with options like whether to display a QR code for connection.

const { WalletConnectConnector } = require('@wagmi/connectors');

const walletConnectConnector = new WalletConnectConnector({
  chains: [/* array of supported chains */],
  options: {
    qrcode: true,
  },
});

Coinbase Wallet Connector

This feature allows you to connect your application to the Coinbase Wallet. The CoinbaseWalletConnector can be configured with options such as the name of your application.

const { CoinbaseWalletConnector } = require('@wagmi/connectors');

const coinbaseWalletConnector = new CoinbaseWalletConnector({
  chains: [/* array of supported chains */],
  options: {
    appName: 'MyApp',
  },
});

Other packages similar to @wagmi/connectors

web3modal

Web3Modal is a library that allows developers to easily integrate multiple wallet providers into their applications. It provides a modal component that lets users choose their preferred wallet. Compared to @wagmi/connectors, Web3Modal offers a more user-friendly interface for selecting wallets but may not provide as much granular control over individual connectors.

web3-react

Web3-react is a library for managing Ethereum wallet connections in React applications. It provides hooks and connectors for various wallet providers. Compared to @wagmi/connectors, web3-react is more tightly integrated with React and offers a more React-centric API, whereas @wagmi/connectors can be used in any JavaScript or TypeScript environment.

ethers.js

Ethers.js is a library for interacting with the Ethereum blockchain and its ecosystem. While it is not specifically focused on wallet connectors, it provides utilities for connecting to various providers and signing transactions. Compared to @wagmi/connectors, ethers.js offers a broader range of functionalities beyond just wallet connections.

README

@wagmi/connectors

Collection of connectors for wagmi.

Installation

Install the @wagmi/connectors package.

npm i @wagmi/connectors

Usage

Configure your wagmi client with connectors!

import { configureChains, createClient } from 'wagmi'

import { InjectedConnector } from '@wagmi/connectors/injected'
import { CoinbaseWalletConnector } from '@wagmi/connectors/coinbaseWallet'
import { WalletConnectConnector } from '@wagmi/connectors/walletConnect'

const { chains, provider } = configureChains(...)

const client = createClient({
  connectors: [
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: 'wagmi',
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        qrcode: true,
      },
    }),
    new InjectedConnector({ chains }),
  ],
  provider,
})

If your bundler supports tree-shaking (most likely), only the used connectors will be included in the bundle, so you don't have to worry about bundle size. 😊

Connectors

• CoinbaseWalletConnector
• InjectedConnector
• LedgerConnector
• MetaMaskConnector
• MockConnector
• WalletConnectConnector

Contributing

Want to add another chain to the list? Make sure you read the contributing guide first.