Components

caution

This documentation is for Web3Modal v2. You can find Web3Modal v3 docs here

Web3Modal

Core component that should be placed at the root of your app. See options docs for available props. Additionally to configuration props, this component also requires ethereumClient prop which references wagmi client.

import { Web3Modal } from "@web3modal/react";

return <Web3Modal projectId="..." ethereumClient={...} />;

Web3Button

Pre-styled connect/disconnect button that reacts to modal's theme changes.

import { Web3Button } from '@web3modal/react'

interface Props {
  icon?: 'show' | 'hide'
  label?: string
  balance?: 'show' | 'hide'
}

return <Web3Button />

Web3NetworkSwitch

Pre-styled network switch button that reacts to modal's theme and network changes.

import { Web3NetworkSwitch } from '@web3modal/react'

return <Web3NetworkSwitch />

W3mQrCode

WalletConnect styled QRCode that allows for an image in the center

import { W3mQrCode } from '@web3modal/react'

return <W3mQrCode size={200} imageUrl="url/to/image" uri="data" />