;"> />;
CSS class to apply to the button element
For some CSS properties, you may need to use the !important to override the default styles
<ConnectWallet className="my-custom-class" />;
type className = string;
function detailsModalFooter(props: { close: () => void;}): JSX.Element;
Display the balance of a token instead of the native token in ConnectWallet details button.
type displayBalanceToken = Record<number, string>;
import { Base } from "@thirdweb-dev/chains"; <ConnectWallet balanceToken={{ 1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599" // show USDC balance when connected to Ethereum mainnet [Base.chainId]: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // show Dai stablecoin token balance when connected to Base mainnet }}/>
Hide the "Request Testnet funds" link in ConnectWallet Details Modal when user is connected to a testnet.
By default it is true
, If you want to show the "Request Testnet funds" link when user is connected to a testnet, set this prop to false
type hideTestnetFaucet = boolean;
<ConnectWallet hideTestnetFaucet={false} />;
Set the size of the modal - compact
or wide
on desktop
Modal size is always compact
on mobile
By default it is "wide"
for desktop.
type modalSize = "compact" | "wide";
Change the title of ConnectWallet Modal
The default is "Connect"
type modalTitle = string;
Replace the thirdweb icon next to modalTitle and set your own iconUrl
Set to empty string to hide the icon
type modalTitleIconUrl = string;
customize the Network selector shown
type networkSelector = Omit< "theme" | "onClose" | "chains" | "open">;
CSS styles to apply to the button element
type style = React.CSSProperties;
Customize the tokens shown in the "Send Funds" screen for various networks.
By default, The "Send Funds" screen shows a few popular tokens for default chains and the native token. For other chains it only shows the native token.
supportedTokens prop allows you to customize this list as shown below which shows "Dai Stablecoin" when users wallet is connected to the "Base" mainnet.
import { ConnectWallet } from "@thirdweb-dev/react";import { Base } from "@thirdweb-dev/chains"; function Example() { return ( <ConnectWallet supportedTokens={{ [Base.chainId]: [ { address: "0x50c5725949A6F0c72E6C4a641F24049A917DB0Cb", // token contract address name: "Dai Stablecoin", symbol: "DAI", icon: "https://assets.coingecko.com/coins/images/9956/small/Badge_Dai.png?1687143508", }, ], }} /> );}
Set a custom label for the "Switch Network" button
type switchNetworkBtnTitle = string;
Whether to show "Switch Network" button if the wallet is connected,
but it is not connected to the activeChain
provided in ThirdwebProvider
Please, note that if you support multiple networks in your app this prop should
be set to false
to allow users to switch between networks.
By default it is false
type switchToActiveChain = boolean;
Set the theme for the button and modal.
By default it is set to "dark" if theme
is not set on ThirdwebProvider
If a theme
is set on ThirdwebProvider
then that theme will be used by default which can be overridden by setting theme
prop on ConnectWallet
component
theme can be set to either "dark" or "light" or a custom theme object. You can also import lightTheme
or darkTheme
functions from @thirdweb-dev/react
to use the default themes as base and overrides parts of it.
import { lightTheme } from "@thirdweb-dev/react";const customTheme = lightTheme({ colors: { modalBg: "red", },});
Customize the welcome screen. This prop is only applicable when modalSize prop is set to "wide". On "wide" Modal size, a welcome screen is shown on the right side of the modal.
This screen can be customized in two ways
<ConnectWallet welcomeScreen={{ title: "your title", subtitle: "your subtitle", img: { src: "https://your-image-url.png", width: 300, height: 50, }, }}/>;
<ConnectWallet welcomeScreen={() => { return <YourCustomComponent />; }}/>;