Composables

Composables 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 function

Wagmi

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

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

  open()

  //...
}

Ethers

import { useWeb3Modal } from '@web3modal/ethers5/vue'

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

  open()

  //...
}

Ethers v5

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
OnRampProviders	"OnRamp main view

useDisconnect

const { disconnect } = useDisconnect()

disconnect()

useWalletInfo

Metadata information from the connected wallet

import { useWalletInfo } from '@web3modal/wagmi/vue'

const { walletInfo } = useWalletInfo()

console.log(walletInfo.name, walletInfo.icon)

Ethereum Library

Wagmi

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'
})

Learn More

Ethers

useWeb3ModalAccount

Hook that returns the client's information.

import { useWeb3ModalAccount } from '@web3modal/ethers/vue'

const { address, chainId, isConnected } = useWeb3ModalAccount()

useSwitchNetwork

import { useSwitchNetwork } from '@web3modal/ethers/vue'

const chainId = 137

const { switchNetwork } = useSwitchNetwork()

switchNetwork(chainId)

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

Learn More About Ethers

useWeb3ModalState

Get the current value of the modal's state

Wagmi

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

const { open, selectedNetworkId } = useWeb3ModalState()

Ethers

import { useWeb3ModalState } from '@web3modal/ethers5/vue'

const { open, selectedNetworkId } = useWeb3ModalState()

Ethers v5

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