Skip to main content

Hooks

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​

Disconnect currently connected account.

const { disconnect } = useDisconnect()

disconnect()

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 usernumber

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

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 { data, isError, isLoading, isSuccess, signMessage } = useSignMessage({
message: 'gm wagmi frens'
})

return (
<div>
<button disabled={isLoading} onClick={() => signMessage()}>
Sign message
</button>
{isSuccess && <div>Signature: {data}</div>}
{isError && <div>Error signing message</div>}
</div>
)
}