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 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'
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' })
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 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)
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)
Was this helpful?