Skip to content
Examples
/
Connect Wallet

Connect Wallet

Connecting wallets to your app is extremely simple when you use wagmi. It takes less than five minutes to get up and running with MetaMask, WalletConnect, and Coinbase Wallet!

The example below uses useConnect and useAccount to allow you to connect a wallet and view ENS information for the connected account. Try it out before moving on.

Step 1: Configuring Connectors

First, we want to set up our Provider with the Injected (MetaMask), WalletConnect, and Coinbase Wallet connectors:

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

import { Example } from './components'

// API key for Ethereum node
// Two popular services are Infura (infura.io) and Alchemy (alchemy.com)
const infuraId = process.env.INFURA_ID

// Chains for connectors to support
const chains = defaultChains

// Set up connectors
const connectors = ({ chainId }) => {
  const rpcUrl =
    chains.find((x) => x.id === chainId)?.rpcUrls?.[0] ??
    chain.mainnet.rpcUrls[0]
  return [
    new InjectedConnector({
      chains,
      options: { shimDisconnect: true },
    }),
    new WalletConnectConnector({
      options: {
        infuraId,
        qrcode: true,
      },
    }),
    new CoinbaseWalletConnector({
      options: {
        appName: 'My wagmi app',
        jsonRpcUrl: `${rpcUrl}/${infuraId}`,
      },
    }),
  ]
}

const App = () => (
  <Provider autoConnect connectors={connectors}>
    <Example />
  </Provider>
)

Step 2: Display Wallet Options

Now that our connectors are set up, we want users to be able to choose a connector to connect their wallets using useConnect.

import { useConnect } from 'wagmi'

export const Example = () => {
  const [{ data, error }, connect] = useConnect()

  return (
    <div>
      {data.connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect(connector)}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
        </button>
      ))}

      {error && <div>{error?.message ?? 'Failed to connect'}</div>}
    </div>
  )
}

Step 3: Display Connected Account

Lastly, if an account is connected, we want to show some basic information, like the ENS name and avatar, using useAccount.

import { useAccount, useConnect } from 'wagmi'

export const Example = () => {
  const [{ data: connectData, error: connectError }, connect] = useConnect()
  const [{ data: accountData }, disconnect] = useAccount({
    fetchEns: true,
  })

  if (accountData) {
    return (
      <div>
        <img src={accountData.ens?.avatar} alt="ENS Avatar" />
        <div>
          {accountData.ens?.name
            ? `${accountData.ens?.name} (${accountData.address})`
            : accountData.address}
        </div>
        <div>Connected to {accountData.connector.name}</div>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    )
  }

  return ...
}

Wrap Up

That's it! You now have a way for users to connect wallets and view information about the connected account. Bonus: wagmi also listens for account (and chain changes) to keep connections and information up-to-date.

Sign Message