Wallet React Demo

This page demonstrates the @chainlink/wallet-react library, which provides hooks for wallet integration. All wallet functionality is coordinated through the WalletCoordinatorContextProvider, with useWalletContext offering a convenient wrapper that combines all capabilities (WalletConnection, ConnectWalletModal).

Wallet Connection Component

UI components for the wallet connection, showing different configuration options for how the wallet connection button and dropdown can be displayed.

Show full address on hover

Use small size

Allow multiple wallets

This example demonstrates the UI component without a hook for connecting, disconnecting or switching accounts.

Connect Wallet Modal

The useConnectWalletModal hook provides a modal for connecting wallets (ConnectWalletModal). It communicates with the WalletCoordinatorContextProvider to handle wallet discovery and connection processes. This hook focuses exclusively on the connection flow.

import { useConnectWalletModal } from '@chainlink/wallet-react' function ConnectButton() { const { openModal, ConnectWalletModal } = useConnectWalletModal() return ( <> <button onClick={openModal}>Connect Wallet</button> {ConnectWalletModal} </> ) }

Connected Wallets

The useConnectedWallets hook is a low-level hook that provides direct access to the list of connected wallets from the WalletCoordinatorContextProvider. It is useful when you need just the wallet data without the UI components.

No wallets connected

Want to host a demo? Contact the Frontend Engineering team or visit the slack #team-frontend to learn more