`<WalletDropdownBasename />`

The WalletDropdownBasename component adds a Basename tab to the Wallet Component. This tab serves two purposes:

For users with a Basename: It provides a link to their Basename profile page.
For users without a Basename: It provides a link to a page where they can create one.

This component enhances the wallet interface by providing easy access to Basename functionality, whether for viewing an existing profile or setting up a new one.

Usage

import {
  Address,
  Avatar,
  Name,
  Identity,
  EthBalance,
} from '@coinbase/onchainkit/identity';
import { color } from '@coinbase/onchainkit/theme';
import {
  ConnectWallet,
  Wallet,
  WalletDropdown,
  WalletDropdownBasename, 
  WalletDropdownDisconnect,
} from '@coinbase/onchainkit/wallet';
 
export function WalletComponents() {
  return (
    <div className="flex justify-end">
      <Wallet>
        <ConnectWallet>
          <Avatar className="h-6 w-6" />
          <Name />
        </ConnectWallet>
        <WalletDropdown>
          <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick>
            <Avatar />
            <Name />
            <Address className={color.foregroundMuted} />
            <EthBalance />
          </Identity>
          <WalletDropdownBasename />
          <WalletDropdownDisconnect />
        </WalletDropdown>
      </Wallet>
    </div>
  );
}

Override styles

You can override component styles using className.

// omitted for brevity
 
<WalletDropdownBasename className="hover:bg-red-500" />

Props

WalletDropdownBasenameReact