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 by embedding the UI for connecting wallets directly in the page instead of showing inside a modal.

It only renders UI if wallet is not connected, Once the wallet is connected, it renders nothing.

To Configure the wallets to show in the ConnectEmbed, configure the wallets prop

To mark a wallet as Recommended, pass in the recommended: true property in the wallet config function.

Refer to Props to see all the available configuration options

import { ConnectEmbed } from "thirdweb/react";
import { createWallet, inAppWallet } from "thirdweb/wallets";
 
const wallets = [
  inAppWallet(),
  createWallet("io.metamask"),
  createWallet("com.coinbase.wallet"),
  createWallet("me.rainbow"),
];
 
function Example() {
  return (
    <div>
      <ConnectEmbed client={client} wallets={wallets} />
    </div>
  );
}