Type alias ConnectWalletProps

ConnectWalletProps: {
    auth?: {
        loginOptional?: boolean;
        onLogin?: ((token) => void);
        onLogout?: (() => void);
    };
    btnTitle?: string;
    className?: string;
    detailsBtn?: (() => JSX.Element);
    displayBalanceToken?: Record<number, string>;
    dropdownPosition?: DropDownPosition;
    hideSwitchToPersonalWallet?: boolean;
    hideTestnetFaucet?: boolean;
    modalSize?: "compact" | "wide";
    modalTitle?: string;
    modalTitleIconUrl?: string;
    networkSelector?: Omit<NetworkSelectorProps, "theme" | "onClose" | "chains" | "open">;
    privacyPolicyUrl?: string;
    style?: React.CSSProperties;
    supportedTokens?: SupportedTokens;
    switchToActiveChain?: boolean;
    termsOfServiceUrl?: string;
    theme?: "dark" | "light" | Theme;
    welcomeScreen?: WelcomeScreen;
}

Type declaration

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

        • Parameters

          • token: string

          Returns void

    • Optional onLogout?: (() => void)
        • (): void

        • Returns void

  • Optional btnTitle?: string
  • Optional className?: string
  • Optional detailsBtn?: (() => JSX.Element)
      • (): JSX.Element

      • render a custom button to display the connected wallet details instead of the default button

        Returns JSX.Element

  • Optional displayBalanceToken?: Record<number, string>

    Show balance of ERC20 token instead of the native token in the "Connected" button when connected to certain network

    Example

    <ConnectWallet balanceToken={{
     1: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599" // show USDC balance when connected to Ethereum mainnet
    }} />
  • Optional dropdownPosition?: DropDownPosition
  • Optional hideSwitchToPersonalWallet?: boolean

    Hide the "switch to Personal wallet" option in the dropdown which is shown when wallet is connected to either Smart Wallet or Safe

    Default Value

    false
  • Optional hideTestnetFaucet?: boolean

    Hide option to request testnet funds for testnets in dropdown

    Default Value

    false
  • Optional modalSize?: "compact" | "wide"

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

    Modal size is always compact on mobile

    Default Value

    "wide"
  • Optional modalTitle?: string

    Set a custom title for the modal

    Default Value

    "Connect"
  • Optional modalTitleIconUrl?: string

    Replace the thirdweb icon next to modalTitle and set your own iconUrl

    Set to empty string to hide the icon

  • Optional networkSelector?: Omit<NetworkSelectorProps, "theme" | "onClose" | "chains" | "open">
  • Optional privacyPolicyUrl?: string

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

  • Optional style?: React.CSSProperties
  • Optional supportedTokens?: SupportedTokens

    Override the default supported tokens for each network

    These tokens will be displayed in "Send Funds" Modal

  • Optional switchToActiveChain?: boolean

    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.

    Default Value

    false
  • Optional termsOfServiceUrl?: string

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

  • Optional theme?: "dark" | "light" | Theme
  • Optional welcomeScreen?: WelcomeScreen

    Customize the welcome screen

    Either provide a component to replace the default screen entirely

    or an object with title, subtitle and imgSrc to change the content of the default screen

Settings

Member Visibility

Theme

Generated using TypeDoc