ConnectWalletProps

Enforce that users must sign in with their wallet using auth after connecting their wallet.

This requires the authConfig prop to be set on the ThirdwebProvider component.

type auth = {
  loginOptional?: boolean;
  onLogin?: (token: string) => void;
  onLogout?: () => void;
};

set custom label for the button.

The default is "Connect"

type btnTitle = string;

<ConnectWallet btnTitle="Sign in" />;

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;

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 "Buy" button in the ConnectWallet Details Modal to allow users to Buy tokens using other tokens (Swap) or using their Credit/Debit card (Fiat onramp)

By default it is false - Buy button is shown

type hideBuyButton = boolean;

<ConnectWallet hideBuyButton={true} />;

Hide the "Disconnect Wallet" button in the ConnectWallet Details Modal.

By default it is false

type hideDisconnect = boolean;

<ConnectWallet hideDisconnect={true} />;

Hide the "Receive" button in the ConnectWallet Details Modal

By default it is false - Receive button is shown

type hideReceiveButton = boolean;

<ConnectWallet hideReceiveButton={true} />;

Hide the "Send" button in the ConnectWallet Details Modal

By default it is false - Send button is shown

type hideSendButton = boolean;

<ConnectWallet hideSendButton={true} />;

Hide the "Switch to Personal wallet" option in the wallet modal which is shown when wallet is connected to either Smart Account or Safe.

By default it is false

type hideSwitchToPersonalWallet = boolean;

<ConnectWallet hideSwitchToPersonalWallet={true} />;

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<
  NetworkSelectorProps,
  "theme" | "onClose" | "chains" | "open"
>;

URL of the "privacy policy" page

If provided, Modal will show a Privacy Policy message at the bottom with below link

type privacyPolicyUrl = string;

<ConnectWallet privacyPolicyUrl="https://your-privacy-policy-url.com" />;

By default ConnectWallet shows "Powered by Thirdweb" branding at the bottom of the ConnectWallet Modal.

If you want to hide the branding, set this prop to false

type showThirdwebBranding = boolean;

<ConnectWallet showThirdwebBranding={false} />;

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.

type supportedTokens = SupportedTokens;

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;

URL of the "terms of service" page

If provided, Modal will show a Terms of Service message at the bottom with below link

type termsOfServiceUrl = string;

<ConnectWallet termsOfServiceUrl="https://your-terms-of-service-url.com" />;

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.

type theme = "dark" | "light" | Theme;

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 />;
  }}
/>;

type welcomeScreen = WelcomeScreen;