Hooks are React functions that provide access to wallet connection features, modal controls, blockchain interactions, and wallet event subscriptions. They enable you to manage wallet connections, handle user authentication, interact with smart contracts, and respond to wallet events in your application.
AppKit provides a comprehensive set of React hooks that work together to provide a complete wallet connection and blockchain interaction experience. These hooks can be categorized into several functional groups:
useAppKit
, useAppKitAccount
, useDisconnect
)useAppKitNetwork
)useAppKitState
, useAppKitTheme
)useAppKitBalance
, useWalletInfo
)useAppKitEvents
)The diagram below illustrates how these hooks relate to each other and to the core AppKit functionality:
These hooks provide a modular way to integrate wallet functionality into your application, allowing you to use only the features you need.
The primary hook for controlling the modal’s visibility and behavior. Use this hook when you need to programmatically open or close the modal, or when you want to show specific views like the connection screen or account details.
open
: Function to open the modalclose
: Function to close the modalYou can also select the modal’s view when calling the open
function
Available namespaces for the Connect view:
Namespace | Description |
---|---|
solana | For connecting to Solana wallets |
bip122 | For connecting to Bitcoin wallets |
eip155 | For connecting to Ethereum wallets |
List of views you can select:
Variable | Description |
---|---|
Connect | Principal view of the modal - default view when disconnected. A namespace can be selected to connect to a specific network (solana, bip122 or eip155) |
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 |
The essential hook for accessing wallet connection state and user information. Use this hook whenever you need to know if a user is connected, get their wallet address, or access their embedded wallet details.
Related hooks: useAppKitWallet, useDisconnect
Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.
allAccounts
: A list of connected accountsaddress
: The current account addresscaipAddress
: The current account address in CAIP formatisConnected
: Boolean that indicates if the user is connectedstatus
: The current connection statusembeddedWalletInfo
: The current embedded wallet informationWhen working with Bitcoin accounts, you can extract public keys from the connected accounts:
This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.
The direct wallet connection hook that enables connectivity to specific wallets without opening the modal. Use this hook when you want to provide direct wallet buttons, create a customized wallet selection interface, or implement social login options.
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:
Then you have to import the hook in your project:
And finally, you can use the hook in your project:
AppKit supports the top 32 wallets, WalletConnect, social logins, and email authentication:
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 |
email |
useAppKitWallet
enables:
Direct Wallet Integration
Social Authentication
Custom Wallet Selection
Network-Specific Access
Enhanced UX
The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.
Related hooks: useAppKitBalance, useWalletInfo
caipNetwork
: The current network objectcaipNetworkId
: The current network id in CAIP formatchainId
: The current chain idswitchNetwork
: Function to switch the network. Accepts a caipNetwork
object as argument.See how to import or use custom networks here.
The balance management hook that provides functions to fetch the native token balance of the connected wallet. Use this hook when you need to display the user’s balance, check if they have sufficient funds for a transaction, or track balance changes.
Related hooks: useAppKitAccount, useAppKitNetwork
fetchBalance
: Async function that returns the current balance of the connected wallet
The state management hook that provides real-time access to the modal’s current state. Use this hook when you need to react to modal state changes or synchronize your UI with the modal’s status.
initialized
: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is readyloading
: Boolean that indicates if AppKit is loadingopen
: Boolean that indicates if the modal is openselectedNetworkId
: The current chain id selected by the user in CAIP-2 formatactiveChain
: The active chain namespace (e.g., ‘eip155’, ‘solana’, ‘bip122’)The theming hook that controls the visual appearance of the modal. Use this hook when you need to customize the modal’s colors, implement dark/light mode, or match the modal’s appearance with your application’s theme.
The event subscription hook that allows you to listen to modal and wallet events. Use this hook when you need to track user interactions, implement analytics, or respond to specific wallet events in your application.
The session management hook that handles wallet disconnection. Use this hook when implementing logout functionality or when you need to clean up resources after a user disconnects their wallet.
namespace
(optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.Hook for accessing wallet information.
Hook that returns the walletProvider
and the WalletProviderType
for interacting with the connected wallet across different blockchain adapters.
walletProvider
: The wallet provider instance for the specified chain namespacewalletProviderType
: The type of wallet provider currently connectedHook that returns the client’s information.
Hook for signing messages with connected account.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook for signing messages with connected account.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the connection object. More info about Connection Class
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.
Hooks are React functions that provide access to wallet connection features, modal controls, blockchain interactions, and wallet event subscriptions. They enable you to manage wallet connections, handle user authentication, interact with smart contracts, and respond to wallet events in your application.
AppKit provides a comprehensive set of React hooks that work together to provide a complete wallet connection and blockchain interaction experience. These hooks can be categorized into several functional groups:
useAppKit
, useAppKitAccount
, useDisconnect
)useAppKitNetwork
)useAppKitState
, useAppKitTheme
)useAppKitBalance
, useWalletInfo
)useAppKitEvents
)The diagram below illustrates how these hooks relate to each other and to the core AppKit functionality:
These hooks provide a modular way to integrate wallet functionality into your application, allowing you to use only the features you need.
The primary hook for controlling the modal’s visibility and behavior. Use this hook when you need to programmatically open or close the modal, or when you want to show specific views like the connection screen or account details.
open
: Function to open the modalclose
: Function to close the modalYou can also select the modal’s view when calling the open
function
Available namespaces for the Connect view:
Namespace | Description |
---|---|
solana | For connecting to Solana wallets |
bip122 | For connecting to Bitcoin wallets |
eip155 | For connecting to Ethereum wallets |
List of views you can select:
Variable | Description |
---|---|
Connect | Principal view of the modal - default view when disconnected. A namespace can be selected to connect to a specific network (solana, bip122 or eip155) |
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 |
The essential hook for accessing wallet connection state and user information. Use this hook whenever you need to know if a user is connected, get their wallet address, or access their embedded wallet details.
Related hooks: useAppKitWallet, useDisconnect
Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.
allAccounts
: A list of connected accountsaddress
: The current account addresscaipAddress
: The current account address in CAIP formatisConnected
: Boolean that indicates if the user is connectedstatus
: The current connection statusembeddedWalletInfo
: The current embedded wallet informationWhen working with Bitcoin accounts, you can extract public keys from the connected accounts:
This is particularly useful when you need to access Bitcoin public keys for transaction signing or address derivation.
The direct wallet connection hook that enables connectivity to specific wallets without opening the modal. Use this hook when you want to provide direct wallet buttons, create a customized wallet selection interface, or implement social login options.
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:
Then you have to import the hook in your project:
And finally, you can use the hook in your project:
AppKit supports the top 32 wallets, WalletConnect, social logins, and email authentication:
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 |
email |
useAppKitWallet
enables:
Direct Wallet Integration
Social Authentication
Custom Wallet Selection
Network-Specific Access
Enhanced UX
The network management hook that provides access to chain information and network switching capabilities. Use this hook when you need to display the current network, switch between networks, or validate network compatibility.
Related hooks: useAppKitBalance, useWalletInfo
caipNetwork
: The current network objectcaipNetworkId
: The current network id in CAIP formatchainId
: The current chain idswitchNetwork
: Function to switch the network. Accepts a caipNetwork
object as argument.See how to import or use custom networks here.
The balance management hook that provides functions to fetch the native token balance of the connected wallet. Use this hook when you need to display the user’s balance, check if they have sufficient funds for a transaction, or track balance changes.
Related hooks: useAppKitAccount, useAppKitNetwork
fetchBalance
: Async function that returns the current balance of the connected wallet
The state management hook that provides real-time access to the modal’s current state. Use this hook when you need to react to modal state changes or synchronize your UI with the modal’s status.
initialized
: Boolean that indicates if AppKit has been initialized. This sets to true when all controllers, adapters and internal state is readyloading
: Boolean that indicates if AppKit is loadingopen
: Boolean that indicates if the modal is openselectedNetworkId
: The current chain id selected by the user in CAIP-2 formatactiveChain
: The active chain namespace (e.g., ‘eip155’, ‘solana’, ‘bip122’)The theming hook that controls the visual appearance of the modal. Use this hook when you need to customize the modal’s colors, implement dark/light mode, or match the modal’s appearance with your application’s theme.
The event subscription hook that allows you to listen to modal and wallet events. Use this hook when you need to track user interactions, implement analytics, or respond to specific wallet events in your application.
The session management hook that handles wallet disconnection. Use this hook when implementing logout functionality or when you need to clean up resources after a user disconnects their wallet.
namespace
(optional): The specific chain namespace to disconnect from. If not provided, disconnects from all connected namespaces.Hook for accessing wallet information.
Hook that returns the walletProvider
and the WalletProviderType
for interacting with the connected wallet across different blockchain adapters.
walletProvider
: The wallet provider instance for the specified chain namespacewalletProviderType
: The type of wallet provider currently connectedHook that returns the client’s information.
Hook for signing messages with connected account.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook for signing messages with connected account.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.
Hook that returns the connection object. More info about Connection Class
Hook that returns the client’s information.
Hook that returns the walletProvider
and the WalletProviderType
.