Hooks

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

useAppKit

Hook for controlling the modal.

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

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

Returns

• open: Function to open the modal
• close: Function to close the modal

Parameters

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

useAppKitAccount

Hook for accessing account data and connection status.

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

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

Returns

• address: The current account address
• caipAddress: The current account address in CAIP format
• isConnected: Boolean that indicates if the user is connected
• status: The current connection status

useAppKitNetwork

Hook for accessing network data and methods.

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

export default Component(){
  const { caipNetwork, caipNetworkId, chainId, switchNetwork } = useAppKitNetwork()
}

Returns

• caipNetwork: The current network object
• caipNetworkId: The current network id in CAIP format
• chainId: The current chain id
• switchNetwork: Function to switch the network. Accepts a caipNetwork object as argument.

info

See how to import or create a networks here.

useAppKitState

Hook for getting the current value of the modal's state.

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

const { open, selectedNetworkId } = useAppKitState()

Returns

• open: Boolean that indicates if the modal is open
• selectedNetworkId: The current chain id selected by the user

useAppKitTheme

Hook for controlling the modal's theme.

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

setThemeMode('dark')

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

useAppKitEvents

Hook for subscribing to modal events.

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

const events = useAppKitEvents()

useDisconnect

Hook for disconnecting the session.

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

const { disconnect } = useDisconnect()

disconnect()

useWalletInfo

Hook for accessing wallet information.

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


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

Ethereum/Solana Library

Wagmi

useAppKitAccount

Hook that returns the client's information.

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

function Components() {
  const { address, caipAddress, isConnected } = useAppKitAccount();

  //...
}

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

useAppKitAccount

Hook that returns the client's information.

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

function Components() {
  const { address, caipAddress, isConnected } = useAppKitAccount();

  //...
}

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

  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

Ethers v5

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 { useAppKitAccount, useAppKitProvider, useAppKitNetwork  } from '@reown/appkit/react'
import { ethers } from 'ethers'
import { useAppKitProvider } from '@reown/appkit/react'

function Components() {
  const { walletProvider } = useAppKitProvider('eip155')
  const { address } = useAppKitAccount()
  const { chainId } = useAppKitNetwork()

  async function onSignMessage() {
    const provider = new ethers.providers.Web3Provider(walletProvider, chainId)
    const signer = provider.getSigner(address)
    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

Solana

useAppKitAccount

Hook that returns the client's information.

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

function Components() {
  const { address, caipAddress, isConnected } = useAppKitAccount();

  //...
}

useAppKitProvider

Hook that returns the walletProvider and the WalletProviderType.

import { useAppKitAccount, useAppKitProvider } from '@reown/appkit/react'
import type { Provider } from '@reown/appkit-adapter-solana'

function SignMessage() {
  // 0. Get account and provider
  const { address } = useAppKitAccount()
  const { walletProvider } = useAppKitProvider<Provider>('solana')

  // 1. Create a function to sign a message
  async function onSignMessage() {
    try {
      if (!walletProvider || !address) {
        throw Error('user is disconnected')
      }

      // 2. Encode message and sign it
      const encodedMessage = new TextEncoder().encode('Hello from AppKit')
      const signature = await walletProvider.signMessage(encodedMessage)

      console.log(signature)
    } catch (err) {
      // Handle Error Here
    }
  }

  // 3. Create a button to trigger the function
  return <button onClick={onSignMessage}>Sign Message</button>
}

useAppKitConnection

Hook that returns the connection object. More info about Connection Class

import { useAppKitConnection } from '@reown/appkit-adapter-solana/react'

...

const { connection } = useAppKitConnection()