`<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"> // [!code focus]
            Wallet // [!code focus]
          </WalletDropdownLink> // [!code focus]
          <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"
> // [!code focus]
  Base.org // [!code focus]
</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"> // [!code focus]
  <span className="font-bold italic">Profile</span> // [!code focus]
  <span> 🔵 </span> // [!code focus]
</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" > // [!code focus]
  Wallet // [!code focus]
</WalletDropdownLink>

Props

WalletDropdownLinkReact