Skip to main content

Hooks

Hooks are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

useWeb3Modal

Control the modal with the useWeb3Modal hook

import { useWeb3Modal } from '@web3modal/wagmi/react'

export default function Component() {
const { open, close } = useWeb3Modal()

open()

//...
}

You can also select the modal's view when calling the open function

open({ view: 'Account' })

List of views you can select

VariableDescription
ConnectPrincipal view of the modal - default view when disconnected
AccountUser profile - default view when connected
AllWalletsShows the list of all available wallets
NetworksList of available networks - you can select and target a specific network before connecting
WhatIsANetwork"What is a network" onboarding view
WhatIsAWallet"What is a wallet" onboarding view

useDisconnect

const { disconnect } = useDisconnect()

disconnect()

Ethereum Library

You can use Wagmi hooks to sign messages, interact with smart contracts, and much more.

useAccount

Hook for accessing account data and connection status.

import { useAccount } from 'wagmi'

function App() {
const { address, isConnecting, isDisconnected } = useAccount()

if (isConnecting) return <div>Connecting…</div>
if (isDisconnected) return <div>Disconnected</div>
return <div>{address}</div>
}

useSignMessage

Hook for signing messages with connected account.

import { useSignMessage } from 'wagmi'

function App() {
const { signMessage } = useSignMessage()

return <button onClick={() => signMessage({ message: 'hello world' })}>Sign message</button>
}

useWeb3ModalState

Get the current value of the modal's state

import { useWeb3ModalState } from '@web3modal/wagmi/react'

const { open, selectedNetworkId } = useWeb3ModalState()

The modal state consists of two reactive values:

StateDescriptionType
openOpen state will be true when the modal is open and false when closed.
boolean
selectedNetworkIdThe current chain id selected by the user
number

useWeb3ModalTheme

const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useWeb3ModalTheme()

setThemeMode('dark')

setThemeVariables({
'--w3m-color-mix': '#00BB7F',
'--w3m-color-mix-strength': 40
})

Track modal events

import { useWeb3ModalEvents } from '@web3modal/wagmi/react'

const events = useWeb3ModalEvents()