Using Hooks


Hook to programmatically control the modal. Useful when you want to use your own UI elements and subscribe to modals state.
import { useWeb3Modal } from "@web3modal/react";
const { isOpen, open, close, setDefaultChain } = useWeb3Modal();
// Modal's open state
// Open modal
interface Options {
route?: "Account" | "ConnectWallet" | "Help" | "SelectNetwork";
await open(options?: Options);
// Close modal
// Sets the default chain BEFORE user is connected.
// Use wagmi network get / switch action AFTER user is connected.
// Default chain will be `mainnet` or first wagmi chain in config if `mainnet` is not available.


Hook to set or update theme options like themeColor, themeMode and themeBackground.
import { useWeb3ModalTheme } from "@web3modal/react";
const { theme, setTheme } = useWeb3ModalTheme();
// Modal's theme object
// Set modal theme
themeMode: "dark",
themeColor: "orange",
themeBackground: "gradient",

Wagmi Hooks

Wagmi react has a collection of Hooks containing everything you need to start working with Ethereum. wagmi makes it easy to display ENS and balance information, sign messages, interact with contracts, and much more — all with caching, request deduplication, and persistence.
See wagmi docs for more information.