Docs

ConnectEmbed

ConnectEmbed component renders a UI to connect to various wallets. It renders the same UI as the ConnectButton 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 wallets in ThirdwebProvider

    To Configure which wallets to show in the ConnectButton Modal, configure the wallets 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,
      metamaskConfig,
      coinbaseConfig,
      walletConnectConfig,
    } from "thirdweb-dev/react";
     
    function AppWithProviders() {
      return (
        <ThirdwebProvider
          client={client}
          wallets={[
            metamaskConfig({
              recommended: true,
            }),
            coinbaseConfig(),
            walletConnectConfig(),
          ]}
        >
          <App />
        </ThirdwebProvider>
      );
    }

    Supported Wallets

    If wallets is not configured in the ThirdwebProvider, the ConnectButton Modal shows 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/react";
     
    function Example() {
      return (
        <div>
          <ConnectEmbed />
        </div>
      );
    }

Props

ConnectEmbedProps