ConnectButton_connectModalOptions

URL of the "privacy policy" page

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

type privacyPolicyUrl = string;

<ConnectButton connectModal={{
 privacyPolicyUrl="https://your-privacy-policy-url.com"
}} />

By default ConnectButton 's Modal shows "Powered by Thirdweb" branding at the bottom of the Modal.

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

type showThirdwebBranding = boolean;

<ConnectButton
  connectModal={{
    showThirdwebBranding: false,
  }}
/>;

Set the size of the connect modal on desktop - "compact" or "wide"

Modal size is always compact on mobile

By default it is "wide" for desktop.

type size = "compact" | "wide";

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;

<ConnectButton
  connectModal={{
    termsOfServiceUrl: "https://your-terms-of-service-url.com",
  }}
/>;

Title to show in ConnectButton 's Modal

The default is "Connect"

type title = string;

Replace the default thirdweb icon next to Modal title with your own icon

Set to empty string ("" ) to hide the icon

type titleIcon = string;

<ConnectButton
  modal={{
    titleIconUrl: "https://your-icon-url.png",
  }}
/>;

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

const welcomeScreen = {
 title: "your title",
 subtitle: "your subtitle",
 img: {
  src: "https://your-image-url.png",
  width: 300,
  height: 50,
 },
}
 
<ConnectButton connectModal={{
 welcomeScreen: welcomeScreen,
}} />

<ConnectButton
  connectModal={{
    welcomeScreen: () => <YourCustomComponent />,
  }}
/>;

type welcomeScreen = WelcomeScreen;