Actions

Open and close the modal

const modal = createWeb3Modal({ wagmiConfig, projectId })

modal.open()

modal.close()

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

modal.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

Disconnect

Disconnect currently connected account.

modal.disconnect()

Modal State

Get the current value of the modal's state

const modal = createWeb3Modal({ wagmiConfig, projectId })

const { open, selectedNetworkId } = modal.getState()

The modal state is an object of two properties:

Property	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

You can also subscribe to the modal's state changes.

const modal = createWeb3Modal({ wagmiConfig, projectId })

modal.subscribeState(newState => console.log(newState))

ThemeMode

Set the themeMode after creating the modal

const modal = createWeb3Modal({ wagmiConfig, projectId })

modal.setThemeMode('dark')

Get the current themeMode value by calling the getThemeMode function

const modal = createWeb3Modal({ wagmiConfig, projectId })

const themeMode = modal.getThemeMode()

themeVariables

Set the themeVariables after creating the modal

const modal = createWeb3Modal({ wagmiConfig, projectId })

modal.setThemeVariables({ ... })

Get the current themeVariables value by calling the getThemeVariables function

const modal = createWeb3Modal({ wagmiConfig, projectId })

const themeMode = modal.getThemeVariables()

Subscribe to theme changes

const unsubscribe = modal.subscribeTheme(newTheme => console.log(newTheme))

Track modal events

modal.getEvent() // get last event
modal.subscribeEvents(event => console.log(event)) // subscribe to events

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'
import { wagmiConfig } from './main'

const account = getAccount(wagmiConfig)

signMessage

Action for signing messages with connected account.

import { signMessage } from '@wagmi/core'
import { wagmiConfig } from './main'

await signMessage(wagmiConfig, { message: 'hello world' })

Learn More

Wagmi v1

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

You can use the following methods to get data and subscribe to changes:

getAddress

const address = modal.getAddress()

getError

const error = modal.getError()

getChainId

const chainId = modal.getChainId()

getIsConnected

const isConnected = modal.getIsConnected()

getWalletProvider

The wallet provider.

const walletProvider = modal.getWalletProvider()

getWalletProviderType

The wallet or protocol of the walletProvider.

const walletProviderType = modal.getWalletProviderType()

subscribeProvider

subscribe to chainId, address, provider changes.

function handleChange({ provider, providerType, address, error, chainId, isConnected }) {
  //...
}

modal.subscribeProvider(handleChange)

Learn More

Ethers v5

You can use the following methods to get data and subscribe to changes:

getAddress

const address = modal.getAddress()

getError

const error = modal.getError()

getChainId

const chainId = modal.getChainId()

getIsConnected

const isConnected = modal.getIsConnected()

getWalletProvider

The wallet provider.

const walletProvider = modal.getWalletProvider()

getWalletProviderType

The wallet or protocol of the walletProvider.

const walletProviderType = modal.getWalletProviderType()

subscribeProvider

subscribe to chainId, address, provider changes.

function handleChange({ provider, providerType, address, error, chainId, isConnected }) {
  //...
}

modal.subscribeProvider(handleChange)

Learn More