useSetWalletModalConfig

Function to set the Modal config

The function takes an object with the following properties

Title of the Modal

theme to use in 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",
  },
});

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.

URL of the "terms of service" page

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

URL of the "privacy policy" page

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

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

function Example() {
  const setModalConfig = useSetWalletModalConfig();
  const setIsWalletModalOpen = useSetIsWalletModalOpen();
  function openModal() {
    setIsWalletModalOpen(true);
    setModalConfig({
      welcomeScreen: {
        title: "your title",
        subtitle: "your subtitle",
        img: {
          src: "https://your-image-url.png",
          width: 300,
          height: 50,
        },
      },
    });
  }
  return <button onClick={openModal}> Open Modal </button>;
}

function Example() {
  const setModalConfig = useSetWalletModalConfig();
  const setIsWalletModalOpen = useSetIsWalletModalOpen();
  function openModal() {
    setIsWalletModalOpen(true);
    setModalConfig({
      welcomeScreen() {
        return <YourCustomComponent />;
      },
    });
  }
  return <button onClick={openModal}> Open Modal </button>;
}

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

The object contains the following properties to customize the authentication

• loginOptional - specify whether signing in is optional or not. By default it is false ( Sign in is required ) if authConfig is set on ThirdwebProvider

• onLogin - Callback to be called after user signs in with their wallet

• onLogout - Callback to be called after user signs out

Callback to be called on successful connection of wallet

function Example() {
  const setModalConfig = useSetWalletModalConfig();
  const setIsWalletModalOpen = useSetIsWalletModalOpen();
  function openModal() {
    setIsWalletModalOpen(true);
    setModalConfig({
      onConnect() {
        console.log("wallet connected");
      },
    });
  }
  return <button onClick={openModal}> Open Modal </button>;
}

Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use auth.onLogin prop instead

function Example() {
  const setModalConfig = useSetWalletModalConfig();
  const setIsWalletModalOpen = useSetIsWalletModalOpen();
  function openModal() {
    setIsWalletModalOpen(true);
    setModalConfig({
      auth: {
        onLogin() {
          console.log("wallet connected and signed in");
        },
      },
    });
  }
  return <button onClick={openModal}> Open Modal </button>;
}