ConnectButton

ConnectButton component renders a <button> which when clicked opens a modal and allows users to connect to various wallets. It is extremely customizable and very easy to use.

To Configure the wallets to show in the ConnectButton Modal, 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 { ConnectButton } 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>
      <ConnectButton client={client} wallets={wallets} />
    </div>
  );
}