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

await disconnect()

useWalletInfo

Hook for accessing wallet information.

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


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

useAppKitWallet

Using the wallet button hooks, you can directly connect to the top 20 wallets, WalletConnect QR and also all the social logins. This hook allows to customize dApps, enabling users to connect their wallets effortlessly, all without the need to open the traditional modal. Execute this command to install the library for use it:

npm

npm i @reown/appkit-wallet-button

Yarn

yarn add @reown/appkit-wallet-button

Bun

bun a @reown/appkit-wallet-button

pnpm

pnpm add @reown/appkit-wallet-button

Then you have to import the hook in your project:

import { useAppKitWallet } from '@reown/appkit-wallet-button/react'

And finally, you can use the hook in your project:

const { isReady, isPending, connect } = useAppKitWallet({
    onSuccess() {
      // ...
    },
    onError(error) {
      // ...
    }
  })

...

// Connect to a wallet
<Button onClick={() => connect("walletConnect")} />

Options for the connect parameter

Type	Options
QR Code	walletConnect
Wallets	metamask, trust, coinbase, rainbow, jupiter, solflare, coin98, magic-eden, backpack, frontier and phantom
Social logins	google, github, apple, facebook, x, discord and farcaster

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