useSetWalletModalConfig

Defined in

Set Modal config for the ConnectWallet Modal. This is useful if you want to open the Modal using the useSetIsWalletModalOpen hook and want to configure the Modal before opening it.

Example


function Example() {
  const setModalConfig = useSetWalletModalConfig();
  const setIsWalletModalOpen = useSetIsWalletModalOpen();
 
  function openModal() {
    setIsWalletModalOpen(true);
    setModalConfig({
      modalSize: "compact",
      theme: "light",
    });
  }
 
  return <button onClick={openModal}> Open Modal </button>;
}

Returns

Function to set the Modal config

The function takes an object with the following properties

title

Title of the Modal

theme

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",
  },
});

modalSize

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.

termsOfServiceUrl

URL of the "terms of service" page

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

privacyPolicyUrl

URL of the "privacy policy" page

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

welcomeScreen

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


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

2. Render Custom Component


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

titleIconUrl

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

auth

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

onConnect

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