ConnectEmbed

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:

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