`<WalletDropdownLink />`

The WalletDropdownLink component creates customizable, interactive links within the wallet dropdown menu.

Usage

import {
  Address,
  Avatar,
  Name,
  Identity,
  EthBalance,
} from '@coinbase/onchainkit/identity';
import { color } from '@coinbase/onchainkit/theme';
import {
  ConnectWallet,
  Wallet,
  WalletDropdown, 
  WalletDropdownLink, 
  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>
          <WalletDropdownLink icon="wallet" href="https://keys.coinbase.com">
            Wallet
          </WalletDropdownLink>
          <WalletDropdownDisconnect />
        </WalletDropdown>
      </Wallet>
    </div>
  );
}

Custom link

Add a custom link to the wallet dropdown menu, allowing users to navigate to external resources directly from the wallet interface.

// omitted for brevity
<WalletDropdownLink
  icon={BaseIcon}
  href="https://www.base.org/"
  rel="noopener noreferrer"
>
  Base.org
</WalletDropdownLink>

Custom children components

Accepts React children, enabling the use of custom elements, styled text, icons, and complex components. This allows for diverse customizations, including complex layouts and conditional rendering based on your app's state.

// omitted for brevity
<WalletDropdownLink icon="wallet" href="https://keys.coinbase.com">
  <span className="font-bold italic">Profile</span>
  <span> 🔵 </span>
</WalletDropdownLink>

Override styles

You can override component styles using className.

// omitted for brevity
<WalletDropdownLink className="hover:bg-red-500" icon="wallet" href="https://keys.coinbase.com" >
  Wallet
</WalletDropdownLink>

Props

WalletDropdownLinkReact