API

prepareConnectors

Simplifies the process of initializing web3-react connectors. It is also possible to pass connector's options in an array where first value is the connector and the other is it's options.

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

initWalletHooks

Statically initializes useWalletModal and useWeb3State hooks.

import { initWalletHooks } from 'w3r-modal'

import { wallets } from './wallets'

export const { useWalletModal, useWeb3State } = initWalletHooks({ wallets })

Options

• wallets - array of wallets to be pick from
• autoConnect (optional) - connect on page load
• ensProvider (optional) - custom ENS provider. if undefined, then web3 provider is used

useWalletModal

Web3 wallet hook to manage the connection process. Can be used with any modal.

import { useWalletModal } from '../hooks'
import { wallets } from '../wallets'
import { Modal } from 'my-custom-modal'

export default function Page() {
  const { isConnected, isConnecting, setConnecting, connect, disconnect, address, connector, ens } = useWalletModal()

  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 {connector.constructor.name}
        </p>
      ) : null}
      {isConnecting && <Modal {...{ setConnecting, connect, wallets }} />}
    </main>
  )
}

useWeb3State

Web3 state hook without the modal functionality, only to get the state. If autoConnect is enabled, state is set on page load.

import { useWeb3State } from '../hooks'

export default function Page() {
  const { isConnected, address, ens, ...state } = useWeb3State()

  return <>{isConnected ? ens || address : null}</>
}

useLastWallet

A Zustand hook that contains the last selected wallet information (name and logo) and is used by useWeb3State for auto connecting.

import { useLastWallet } from 'w3r-modal'

export default function Page() {
  const { isConnected } = useWeb3State()
  const wallet = useLastWallet((s) => s.lastWallet)

  return <>{isConnected ? <>{wallet.name}</> : 'N/A'}</>
}

You can also manually save a wallet:

import { useLastWallet } from 'w3r-modal'

export default function Page() {
  const { isConnected } = useWeb3State()
  const setLastWallet = useLastWallet((s) => s.setLastWallet)

  return (
    <>{isConnected ? <button onClick={() => setLastWallet({ name: 'MetaMask' })}>Remember MetaMask</button> : 'N/A'}</>
  )
}