Get Started

Install necessary dependencies

pnpm i react w3r-modal @web3-react/core@beta @web3-react/types@beta

Install wallets connectors by your choice

pnpm i @web3-react/metamask@beta @web3-react/walletconnect@beta

Initialize connectors:

import { MetaMask } from '@web3-react/metamask'
import { WalletConnect } from '@web3-react/walletconnect'
import { prepareConnectors } from 'w3r-modal'

export const connectors = prepareConnectors(
  [MetaMask, [WalletConnect, { rpc: { 1: 'https://cloudflare-eth.com' } }]],
  [1]
)

Initialize wallets (with names, connectors and icons):

import type { Wallet } from 'w3r-modal'
import { connectors } from './connectors'

export const wallets: Wallet[] = [
  {
    name: 'MetaMask',
    connector: connectors[0],
    logoURI: 'https://www.genie.xyz/logos/metamask.png'
  },
  {
    name: 'WalletConnect',
    connector: connectors[1],
    logoURI: 'https://www.genie.xyz/logos/wc.png'
  }
]

Create an _app.jsx file and setup a modal theme by serializing it into a CSS string:

import React from 'react'
import 'w3r-modal/style.css'
import { cssStringFromTheme, defaultTheme } from 'w3r-modal'

const theme = cssStringFromTheme(defaultTheme)

const App = ({ pageProps, Component }) => {
  return (
    <>
      <style jsx global>
        {`
          :root {
            ${theme}
          }
        `}
      </style>
      <Component {...pageProps} />
    </>
  )
}

export default App

Now the library is ready to use! Initialize w3r-modal hooks in your app:

import { Modal, initWalletHooks, useLastWallet } from 'w3r-modal'
import { useMemo } from 'react'
import { wallets } from '../wallets'

const { useWalletModal } = initWalletHooks({ wallets })

export default function Page() {
  const { isConnected, isConnecting, setConnecting, connect, disconnect, address, connector, ens } = useWalletModal()
  const wallet = useLastWallet((s) => s.lastWallet)

  return (
    <main>
      <button
        onClick={async () => {
          if (isConnected) disconnect()
          else setConnecting(true)
        }}
      >
        {isConnected ? 'disconnect' : 'connect'}
      </button>
      {isConnected ? (
        <p>
          Connected to {ens || address.slice(0, 8)} with {wallet.name}
        </p>
      ) : null}

      {isConnecting && <Modal {...{ isConnecting, setConnecting, connect, wallets }} />}
    </main>
  )
}