Docs

ConnectEmbed

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 authConfig in ThirdwebProvider component and loginOptional prop is either not provided or set to false in ConnectEmbed component

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

Usage

  • Configure supportedWallets in ThirdwebProvider

    To Configure which wallets to show in the ConnectEmbed UI, you need to configure the supportedWallets prop in the ThirdwebProvider component which wraps your entire application.

    To display a Recommended tag below a wallet provider, pass in the recommended: true property in the wallet configurator function.

    import {
      ThirdwebProvider,
      metamaskWallet,
      coinbaseWallet,
      walletConnect,
    } from "@thirdweb-dev/react";
     
    function AppWithProviders() {
      return (
        <ThirdwebProvider
          supportedWallets={[
            metamaskWallet({
              recommended: true,
            }),
            coinbaseWallet(),
            walletConnect(),
          ]}
          clientId="<your_client_id>"
        >
          <App />
        </ThirdwebProvider>
      );
    }

    If supportedWallets is not configured in the ThirdwebProvider, the ConnectWallet Modal show the default wallets:

  • Configure ConnectEmbed

    Render the ConnectEmbed component anywhere in your application. Refer to Props to see the configuration options available

    import { ConnectEmbed } from "@thirdweb-dev/react";
     
    function Example() {
      return (
        <div>
          <ConnectEmbed />
        </div>
      );
    }

    You can use the useShowConnectEmbed hook to check if the ConnectEmbed is rendering a UI or not and render something else if it is not rendering anything. It takes an optional loginOptional boolean 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 )

    import { ConnectEmbed } from "@thirdweb-dev/react";
     
    const loginOptional = false;
     
    function Example() {
      const showConnectEmbed = useShowConnectEmbed(loginOptional);
     
      return (
        <div>
          {showConnectEmbed ? (
            <ConnectEmbed
              auth={{
                loginOptional: loginOptional,
              }}
            />
          ) : (
            <div> ... </div>
          )}
        </div>
      );
    }

Props

Templates

Using ConnectEmbed to create sign-in page in Next.js