Composables
useWeb3Modal​
Control the modal with the useWeb3Modal
function
- Wagmi v1
- Wagmi v2
- Ethers
- Ethers v5
import { useWeb3Modal } from '@web3modal/wagmi/vue'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/wagmi/vue'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/ethers5/vue'
export default function Component() {
const { open, close } = useWeb3Modal()
open()
//...
}
import { useWeb3Modal } from '@web3modal/ethers/vue'
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/vue'
const { open, selectedNetworkId } = useWeb3ModalState()
i1mport { useWeb3ModalState } from '@web3modal/wagmi/vue'
const { open, selectedNetworkId } = useWeb3ModalState()
import { useWeb3ModalState } from '@web3modal/ethers5/vue'
const { open, selectedNetworkId } = useWeb3ModalState()
import { useWeb3ModalState } from '@web3modal/ethers/vue'
const { open, selectedNetworkId } = useWeb3ModalState()
The modal state consists of two reactive values:
Value | 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 { setThemeMode, setThemeVariables, themeMode, themeVariables } = useWeb3ModalTheme()
setThemeMode('dark')
setThemeVariables({
'--w3m-color-mix': '#00BB7F',
'--w3m-color-mix-strength': 40
})
Track modal events​
import { useWeb3ModalEvents } from '@web3modal/wagmi/vue'
const events = useWeb3ModalEvents()
- Wagmi v1
- Wagmi v2
- Ethers
- Ethers v5
You can use Wagmi actions to sign messages, interact with smart contracts, and much more.
getAccount​
Action for accessing account data and connection status.
import { getAccount } from '@wagmi/core'
const account = getAccount()
signMessage​
Action for signing messages with connected account.
import { signMessage } from '@wagmi/core'
const signature = await signMessage({
message: 'gm wagmi frens'
})
You can use Wagmi actions to sign messages, interact with smart contracts, and much more.
getAccount​
Action for accessing account data and connection status.
import { getAccount } from '@wagmi/core'
const account = getAccount()
signMessage​
Action for signing messages with connected account.
import { signMessage } from '@wagmi/core'
const signature = await signMessage({
message: 'gm wagmi frens'
})
useWeb3ModalAccount​
Hook that returns the client's information.
import { useWeb3ModalAccount } from '@web3modal/ethers5/vue'
const { address, chainId, isConnected } = useWeb3ModalAccount()
useWeb3ModalProvider​
Hook that returns the walletProvider
and the WalletProviderType
.
import { ethers } from 'ethers'
import { useWeb3ModalProvider } from '@web3modal/ethers5/vue'
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)
}
useWeb3ModalError​
import { useWeb3ModalError } from '@web3modal/ethers/react'
const { error } = useWeb3ModalError()
useWeb3ModalAccount​
Hook that returns the client's information.
import { useWeb3ModalAccount } from '@web3modal/ethers/vue'
const { address, chainId, isConnected } = useWeb3ModalAccount()
useWeb3ModalProvider​
Hook that returns the walletProvider
and the WalletProviderType
.
import { BrowserProvider } from 'ethers'
import { useWeb3ModalProvider } from '@web3modal/ethers/vue'
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)
}
useWeb3ModalError​
import { useWeb3ModalError } from '@web3modal/ethers/react'
const { error } = useWeb3ModalError()
Was this helpful?