<WalletDropdownLink />

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>
  );
}

// @noErrors: 2304 Cannot find name 'BaseIcon'
import {
  WalletDropdownLink,
} from '@coinbase/onchainkit/wallet';
// ---cut-before---
// omitted for brevity
<WalletDropdownLink
  icon={BaseIcon}
  href="https://www.base.org/"
  rel="noopener noreferrer"
>
  Base.org
</WalletDropdownLink>

// @noErrors: 2322 - type 'Element' is not assignable to type 'string'
import {
  WalletDropdownLink,
} from '@coinbase/onchainkit/wallet';
// ---cut-before---
// omitted for brevity
<WalletDropdownLink icon="wallet" href="https://keys.coinbase.com">
  <span className="font-bold italic">Profile</span>
  <span> 🔵 </span>
</WalletDropdownLink>

import {
  WalletDropdownLink,
} from '@coinbase/onchainkit/wallet';
// ---cut-before---
// omitted for brevity
<WalletDropdownLink className="hover:bg-red-500" icon="wallet" href="https://keys.coinbase.com" >
  Wallet
</WalletDropdownLink>