Hooks
useWeb3Modalβ
Control the modal with the useWeb3Modal
hook
- Wagmi v1
- Wagmi v2
- Ethers
- Ethers v5
import { useWeb3Modal } from '@web3modal/wagmi/react'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/wagmi/react'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/ethers5/react'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/ethers/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
Variable | Description |
---|---|
Connect | Principal view of the modal - default view when disconnected |
Account | User profile - default view when connected |
AllWallets | Shows the list of all available wallets |
Networks | List 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
- Wagmi v1
- Wagmi v2
- Ethers
- Ethers v5
import { useWeb3ModalState } from '@web3modal/wagmi/react'
const { open, selectedNetworkId } = useWeb3ModalState()
import { useWeb3ModalState } from '@web3modal/wagmi/react'
const { open, selectedNetworkId } = useWeb3ModalState()
import { useWeb3ModalState } from '@web3modal/ethers5/react'
const { open, selectedNetworkId } = useWeb3ModalState()
import { useWeb3ModalState } from '@web3modal/ethers/react'
const { open, selectedNetworkId } = useWeb3ModalState()
The modal state consists of two reactive values:
State | Description | Type |
---|---|---|
open | Open state will be true when the modal is open and false when closed. | boolean |
selectedNetworkId | The 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()
Ethereum Libraryβ
- Wagmi v1
- Wagmi v2
- Ethers
- Ethers v5
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>
}
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>
)
}
useWeb3ModalAccountβ
Hook that returns the client's information.
import { useWeb3ModalAccount } from '@web3modal/ethers5/react'
function Components() {
const { address, chainId, isConnected } = useWeb3ModalAccount()
//...
}
useWeb3ModalProviderβ
Hook that returns the walletProvider
and the WalletProviderType
.
import { ethers } from 'ethers'
import { useWeb3ModalProvider } from '@web3modal/ethers5/react'
function Components() {
const { walletProvider } = useWeb3ModalProvider()
async function onSignMessage() {
const provider = new ethers.providers.Web3Provider(walletProvider)
const signer = provider.getSigner()
const signature = await signer?.signMessage('Hello Web3Modal Ethers')
console.log(signature)
}
return <button onClick={() => onSignMessage()}>Sign Message</button>
}
useWeb3ModalErrorβ
import { useWeb3ModalError } from '@web3modal/ethers/react'
function Components() {
const { error } = useWeb3ModalError()
//...
}
useWeb3ModalAccountβ
Hook that returns the client's information.
import { useWeb3ModalAccount } from '@web3modal/ethers/react'
function Components() {
const { address, chainId, isConnected } = useWeb3ModalAccount()
//...
}
useWeb3ModalProviderβ
Hook that returns the walletProvider
and the WalletProviderType
.
import { BrowserProvider } from 'ethers'
import { useWeb3ModalProvider } from '@web3modal/ethers/react'
function Components() {
const { walletProvider } = useWeb3ModalProvider()
async function onSignMessage() {
const provider = new BrowserProvider(walletProvider)
const signer = await provider.getSigner()
const signature = await signer?.signMessage('Hello Web3Modal Ethers')
console.log(signature)
}
return <button onClick={() => onSignMessage()}>Sign Message</button>
}
useWeb3ModalErrorβ
import { useWeb3ModalError } from '@web3modal/ethers/react'
function Components() {
const { error } = useWeb3ModalError()
//...
}
Was this helpful?