Chainlink Demos

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 Context
The useWalletContext hook provides a unified API that combines functionality from both useWalletConnection and useConnectWalletModal, offering a convenient single-import solution for wallet integration.

No wallets connected

import { WalletProvider, useWalletContext } from '@chainlink/wallet-react' function App() { const [allowMultipleWallets, setAllowMultipleWallets] = useState(true) return ( <WalletProvider allowMultipleWallets={allowMultipleWallets}> <MyWalletComponent setAllowMultipleWallets={setAllowMultipleWallets} allowMultipleWallets={allowMultipleWallets} /> </WalletProvider> ) } function MyWalletComponent({ allowMultipleWallets, setAllowMultipleWallets }) { const [showFullAddressOnHover, setShowFullAddressOnHover] = useState(true) const [useSmallSize, setUseSmallSize] = useState(false) const { wallets, activeWallet, activeAddress, disconnect, WalletConnection, ConnectWalletModal } = useWalletContext() return ( <> <WalletConnection showFullAddressOnHover={showFullAddressOnHover} size={useSmallSize ? 'sm' : 'default'} /> <ConnectWalletModal /> </> ) }

Wallet Connection
The useWalletConnection hook provides a higher-level abstraction for wallet integration, with convenient configuration options.

No wallets connected

import { useWalletConnection, useConnectWalletModal } from '@chainlink/wallet-react' function MyWalletComponent() { const [showFullAddressOnHover, setShowFullAddressOnHover] = useState(true) const [useSmallSize, setUseSmallSize] = useState(false) const [allowMultipleWallets, setAllowMultipleWallets] = useState(true) const { openModal, ConnectWalletModal } = useConnectWalletModal() const { activeWallet, activeAddress, disconnect, WalletConnection } = useWalletConnection({ allowMultipleWallets, onConnect: openModal }) return ( <> <WalletConnection showFullAddressOnHover={showFullAddressOnHover} size={useSmallSize ? 'sm' : 'default'} /> <ConnectWalletModal /> </> ) }

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