Set Modal config for the
This is useful if you want to open the Modal using the
useSetIsWalletModalOpen hook and want to configure the Modal before opening it.
Function to set the Modal config
The function takes an object with the following properties
Title of the Modal
theme to use in Modal
theme can be set to either
"light" or a custom theme object. You can also import
darkTheme functions from
@thirdweb-dev/react to use the default themes as base and overrides parts of it.
Set the size of the modal -
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
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
2. Render Custom Component
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
authConfigis set on
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
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