Hooks
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.
useAppKit
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.
Use Cases
- Opening the modal when a user clicks a “Connect Wallet” button
- Closing the modal after a successful connection
- Opening specific views of the modal (e.g., account view, connect view)
- Handling custom wallet connection flows
Returns
open
: Function to open the modalclose
: Function to close the modal
Parameters
You can also select the modal’s view when calling the open
function
List of views you can select
useAppKitAccount
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.
Use Cases
- Displaying the connected wallet address in your UI
- Checking if a user is connected before showing certain features
- Getting user information for embedded wallets
- Handling multi-chain scenarios where you need account info for specific chains
Hook for accessing account data and connection status for each namespace when working in a multi-chain environment.
Returns
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 information
useAppKitNetwork
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.
Use Cases
- Displaying the current network/chain in your UI
- Switching networks when a user selects a different chain
- Validating if a user is on the correct network for your dApp
- Handling network-specific features or contracts
Returns
caipNetwork
: The current network objectcaipNetworkId
: The current network id in CAIP formatchainId
: The current chain idswitchNetwork
: Function to switch the network. Accepts acaipNetwork
object as argument.
See how to import or use custom networks here.
useAppKitState
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.
Use Cases
- Syncing your UI with the modal’s open/closed state
- Tracking which network the user has selected
- Creating custom UI elements that respond to modal state changes
- Implementing custom loading states based on modal state
Returns
open
: Boolean that indicates if the modal is openselectedNetworkId
: The current chain id selected by the user
useAppKitTheme
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.
Use Cases
- Implementing dark/light mode in your dApp
- Customizing the modal’s appearance to match your brand
- Creating theme-specific UI elements
- Syncing the modal’s theme with your app’s theme
useAppKitEvents
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.
Use Cases
- Tracking user interactions with the modal
- Implementing analytics for wallet connections
- Creating custom notifications for connection events
- Handling specific wallet events in your application
useDisconnect
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.
Use Cases
- Implementing a “Disconnect Wallet” button
- Handling logout flows in your application
- Cleaning up resources when a user disconnects
- Resetting application state after disconnection
useWalletInfo
Hook for accessing wallet information.
Use Cases
- Displaying wallet-specific information in your UI
- Implementing wallet-specific features
- Showing wallet icons or branding
- Handling wallet-specific behaviors
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:
Then you have to import the hook in your project:
And finally, you can use the hook in your project:
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 |
Use Cases
useAppKitWallet
enables:
-
Direct Wallet Integration
- Direct connection to specific wallets (e.g., MetaMask, Coinbase)
- Streamlined connection flow without modal
-
Social Authentication
- Social login options (Google, GitHub, etc.)
- Email-based authentication
-
Custom Wallet Selection
- Branded wallet selection interface
- Custom styling and filtering options
-
Network-Specific Access
- Chain-specific wallet options
- Conditional wallet availability
-
Enhanced UX
- Loading states and error handling
- Custom notifications
- Responsive connection states
Ethereum/Solana Library
useAppKitAccount
Hook that returns the client’s information.
useSignMessage
Hook for signing messages with connected account.
Learn More
useAppKitAccount
Hook that returns the client’s information.
useSignMessage
Hook for signing messages with connected account.
Learn More
useAppKitAccount
Hook that returns the client’s information.
switchNetwork
useAppKitProvider
Hook that returns the walletProvider
and the WalletProviderType
.
getError
Learn More About Ethers
switchNetwork
useAppKitProvider
Hook that returns the walletProvider
and the WalletProviderType
.
getError
Learn More About Ethers
useAppKitAccount
Hook that returns the client’s information.
useAppKitProvider
Hook that returns the walletProvider
and the WalletProviderType
.
useAppKitConnection
Hook that returns the connection object. More info about Connection Class
Was this page helpful?