ModalConfigOptions
type ModalConfigOptions = { auth?: { loginOptional?: boolean; onLogin?: (token: string) => void; onLogout?: () => void; }; modalSize: "wide" | "compact"; onConnect?: () => void; privacyPolicyUrl?: string; showThirdwebBranding?: boolean; termsOfServiceUrl?: string; title?: string; titleIconUrl?: string;};
The object contains the following properties to customize the authentication
loginOptional- specify whether signing in is optional or not. By default it isfalse( Sign in is required ) ifauthConfigis set onThirdwebProvideronLogin- Callback to be called after user signs in with their walletonLogout- Callback to be called after user signs out
type auth = { loginOptional?: boolean; onLogin?: (token: string) => void; onLogout?: () => void;};
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 = "wide" | "compact";
URL of the "privacy policy" page
If provided, Modal will show a Privacy Policy message at the bottom with below link
type privacyPolicyUrl = string;
By default the ConnectWallet Modal shows "powered by thirdweb" branding at the bottom of the modal.
If you want to hide the branding, set this to false
type showThirdwebBranding = 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;
Set the theme for the 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
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", },});
Title of the Modal
type title = string;
Replace the thirdweb icon next to modalTitle and set your own iconUrl
type titleIconUrl = string;
Customize the welcome screen. This is only applicable when modalSize 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
1. Customize Metadata and Image
const welcomeScreen = { title: "your title", subtitle: "your subtitle", img: { src: "https://your-image-url.png", width: 300, height: 50, },};
2. Render Custom Component
const welcomeScreen = () => { return <YourCustomComponent />;};