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" });

// to connect and show multi wallets view
open({ view: "Connect" });

// to connect and show only solana wallets
open({ view: "Connect", namespace: "solana" });

// to connect and show only bitcoin wallets
open({ view: "Connect", namespace: "bip122" });

// to connect and show only ethereum wallets
open({ view: "Connect", namespace: "eip155" });

// to open swap with arguments
open({
  view: 'Swap',
  arguments: {
    amount: '321.123',
    fromToken: 'USDC',
    toToken: 'ETH'
  }
})

List of views you can select

useAppKitAccount

Hook for accessing account data and connection status.

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

const { address, isConnected, caipAddress, status, embeddedWalletInfo } =
  useAppKitAccount();

Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.

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

const eip155Account = useAppKitAccount({ namespace: "eip155" }); // for EVM chains
const solanaAccount = useAppKitAccount({ namespace: "solana" });
const bip122Account = useAppKitAccount({ namespace: "bip122" }); // for bitcoin

Returns

allAccounts: A list of connected accounts
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
embeddedWalletInfo: The current embedded wallet information

type EmbeddedWalletInfo {
  user: {
    username: string
    email: string
  },
  accountType: 'eoa' | 'smartAccount',
  authProvider: 'google' | 'apple' | 'facebook' | 'x' | 'discord' | 'farcaster' | 'github' | 'email',
  isSmartAccountDeployed: boolean
}

type ConnectionStatus = 'connected' | 'disconnected' | 'connecting' | 'reconnecting'

type UseAppKitAccountReturnType = {
  isConnected: boolean
  allAccounts: Account[]
  status?: ConnectionStatus
  address?: string
  caipAddress?: `${string}:${string}`
  embeddedWalletInfo?: EmbeddedWalletInfo
}

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.

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 (Demo in our Lab), 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 install @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`, `xverse`, `okx`, `bitget`, `leather`, `binance`, `uniswap`, `safepal`, `bybit`, `phantom`, `ledger`, `timeless-x`, `safe`, `zerion`, `oneinch`, `crypto-com`, `imtoken`, `kraken`, `ronin`, `robinhood`, `exodus`, `argent`, and `tokenpocket`
Social logins	`google`, `github`, `apple`, `facebook`, `x`, `discord`, and `farcaster`

Ethereum/Solana Library

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

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

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

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

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

Core

Early Access

Transactions

Notifications

Cloud

useAppKit

Returns

Parameters

useAppKitAccount

Returns

useAppKitNetwork

Returns

useAppKitState

Returns

useAppKitTheme

useAppKitEvents

useDisconnect

useWalletInfo

useAppKitWallet

Options for the connect parameter

Ethereum/Solana Library

useAppKitAccount

useSignMessage

Learn More

useAppKitAccount

useSignMessage

Learn More

useAppKitAccount

switchNetwork

useAppKitProvider

getError

Learn More About Ethers

switchNetwork

useAppKitProvider

getError

Learn More About Ethers

useAppKitAccount

useAppKitProvider

useAppKitConnection

Core

Early Access

Transactions

Notifications

Cloud

​useAppKit

​Returns

​Parameters

​useAppKitAccount

​Returns

​useAppKitNetwork

​Returns

​useAppKitState

​Returns

​useAppKitTheme

​useAppKitEvents

​useDisconnect

​useWalletInfo

​useAppKitWallet

​Options for the connect parameter

​Ethereum/Solana Library

​useAppKitAccount

​useSignMessage

Learn More

​useAppKitAccount

​useSignMessage

Learn More

​useAppKitAccount

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

​switchNetwork

​useAppKitProvider

​getError

Learn More About Ethers

​useAppKitAccount

​useAppKitProvider

​useAppKitConnection

useAppKit

Returns

Parameters

useAppKitAccount

Returns

useAppKitNetwork

Returns

useAppKitState

Returns

useAppKitTheme

useAppKitEvents

useDisconnect

useWalletInfo

useAppKitWallet

Options for the connect parameter

Ethereum/Solana Library

useAppKitAccount

useSignMessage

useAppKitAccount

useSignMessage

useAppKitAccount

switchNetwork

useAppKitProvider

getError

switchNetwork

useAppKitProvider

getError

useAppKitAccount

useAppKitProvider

useAppKitConnection