ConnectEmbed component renders a UI to connect to various wallets. it renders the same UI as the
ConnectWallet component's Modal UI.
This is really useful for Implementing a "Sign in" page.
It also renders a UI to Sign in with wallet if it is enabled by setting
ThirdwebProvider component and
loginOptional prop is either not provided or set to
Because of this use case, It only renders UI if either one of the following conditions are true:
wallet is not connected
wallet is connected but the user is not signed in and sign in is required
Configure supportedWallets in ThirdwebProvider
To Configure which wallets to show in the
ConnectEmbedUI, you need to configure the
supportedWalletsprop in the
ThirdwebProvidercomponent which wraps your entire application.
To display a
Recommendedtag below a wallet provider, pass in the
recommended: trueproperty in the wallet configurator function.
supportedWalletsis not configured in the
ThirdwebProvider, the ConnectWallet Modal show the default wallets:
ConnectEmbedcomponent anywhere in your application. Refer to Props to see the configuration options available
You can use the
useShowConnectEmbedhook to check if the
ConnectEmbedis rendering a UI or not and render something else if it is not rendering anything. It takes an optional
loginOptionalboolean argument to specify whether the
<ConnectEmbed />you want to render has auth enabled or not. If not specified, it is assumed to be
false( sign in is required )