Hooks

Hooks are functions that will help you control the modal, subscribe to wallet events and interact with them and smart contracts.

useAppKitAccount

Hook for accessing account data and connection status.

List of possible status: "reconnecting" | "connected" | "disconnected" | "connecting" | undefined

The caipAddress is composed by network:chainId:address. An Example for an Ethereum mainnet address is eip155:1:0xab16a96D359eC26a11e2C2b3d8f8B8942d5Bfcdb

import { useAppKitAccount } from "@reown/appkit/react";

export default Component(){
  const { address, isConnected, caipAddress, status } = useAppKitAccount()
}

useAppKit

Control the modal with the useAppKit hook

import { useAppKit } from '@reown/appkit/react';

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

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	"On-Ramp main view
Swap	"Swap main view

useDisconnect

Wagmi

To disconnect the session call the wagmi hook:

import { useDisconnect } from 'wagmi'

const { disconnect } = useDisconnect()

disconnect()

Ethers

To disconnect the session call:

import { useDisconnect } from '@reown/appkit/react'

const { disconnect } = useDisconnect()

disconnect()

Ethers v5

To disconnect the session call:

import { useDisconnect } from '@reown/appkit/react'

const { disconnect } = useDisconnect()

disconnect()

Solana

To disconnect the session call:

import { useDisconnect } from '@reown/appkit/react'

const { disconnect } = useDisconnect()

disconnect()

useWalletInfo

Metadata information from the connected wallet

import { useWalletInfo } from '@reown/appkit/react'


export default Component(){
  const { walletInfo } = useWalletInfo()

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

  //...
}

Ethereum Library

Wagmi

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

Learn More

Ethers

switchNetwork

import { createAppKit } from '@reown/appkit/react'
import { mainnet, arbitrum, polygon } from '@reown/appkit/networks'

const modal = createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: [mainnet, arbitrum],
  metadata: metadata,
  features: {
    analytics: true,
  }
})

modal.switchNetwork(polygon)

useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.

import { BrowserProvider } from 'ethers'
import { useAppKitProvider } from '@reown/appkit/react'

function Components() {
  const { walletProvider } = useAppKitProvider()

  async function onSignMessage() {
    const provider = new BrowserProvider(walletProvider)
    const signer = await provider.getSigner()
    const signature = await signer?.signMessage('Hello AppKit Ethers')
    console.log(signature)
  }

  return <button onClick={() => onSignMessage()}>Sign Message</button>
}

getError

function Components() {
  const error = modal.getError();
  //...
}

Learn More About Ethers

useAppKitState

Get the current value of the modal's state

Wagmi

import { useAppKitState } from '@reown/appkit/react'

const { open, selectedNetworkId } = useAppKitState()

Wagmi v1

import { useAppKitState } from '@reown/appkit/react'

const { open, selectedNetworkId } = useAppKitState()

Ethers

import { useAppKitState } from '@reown/appkit/react'

const { open, selectedNetworkId } = useAppKitState()

Ethers v5

import { useAppKitState } from '@reown/appkit/react'

const { open, selectedNetworkId } = useAppKitState()

Solana

import { useAppKitState } from '@reown/appkit/react'

const { open, selectedNetworkId } = useAppKitState()

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

useAppKitTheme

import { useAppKitTheme } from '@reown/appkit/react'
const { themeMode, themeVariables, setThemeMode, setThemeVariables } = useAppKitTheme()

setThemeMode('dark')

setThemeVariables({
  '--w3m-color-mix': '#00BB7F',
  '--w3m-color-mix-strength': 40
})

Track modal events

import { useAppKitEvents } from '@reown/appkit/react'

const events = useAppKitEvents()