Wallet Dropdown

1'use client';
2 
3import {
4  DropdownMenu,
5  DropdownMenuContent,
6  DropdownMenuItem,
7  DropdownMenuSeparator,
8  DropdownMenuTrigger,
9} from '@/registry/wallet-ui/ui/dropdown-menu';
10import * as React from 'react';
11import { ellipsify, UiWallet, useWalletUi, useWalletUiWallet } from '@wallet-ui/react';
12import { Button } from '@/registry/wallet-ui/ui/button';
13import { Avatar, AvatarFallback, AvatarImage } from '@/registry/wallet-ui/ui/avatar';
14import { cn } from '@/lib/utils';
15 
16function WalletAvatar({ className, wallet }: { className?: string; wallet: UiWallet }) {
17  return (
18    <Avatar className={cn('rounded-md h-6 w-6', className)}>
19      <AvatarImage src={wallet.icon} alt={wallet.name} />
20      <AvatarFallback>{wallet.name[0]}</AvatarFallback>
21    </Avatar>
22  );
23}
24 
25function WalletDropdownItem({ wallet }: { wallet: UiWallet }) {
26  const { connect } = useWalletUiWallet({ wallet });
27 
28  return (
29    <DropdownMenuItem
30      className='cursor-pointer'
31      key={wallet.name}
32      onClick={() => {
33        return connect();
34      }}
35    >
36      {wallet.icon ? <WalletAvatar wallet={wallet} /> : null}
37      {wallet.name}
38    </DropdownMenuItem>
39  );
40}
41 
42function WalletDropdown() {
43  const { account, connected, copy, disconnect, wallet, wallets } = useWalletUi();
44  return (
45    <DropdownMenu>
46      <DropdownMenuTrigger asChild>
47        <Button variant="outline" className='cursor-pointer'>
48          {wallet?.icon ? <WalletAvatar wallet={wallet} /> : null}
49          {connected ? (account ? ellipsify(account.address) : wallet?.name) : 'Select Wallet'}
50        </Button>
51      </DropdownMenuTrigger>
52      <DropdownMenuContent>
53        {account ? (
54          <>
55            <DropdownMenuItem className='cursor-pointer' onClick={copy}>Copy address</DropdownMenuItem>
56            <DropdownMenuItem className='cursor-pointer' onClick={disconnect}>Disconnect</DropdownMenuItem>
57            <DropdownMenuSeparator />
58          </>
59        ) : null}
60        {wallets.length ? wallets.map(wallet => (
61          <WalletDropdownItem key={wallet.name} wallet={wallet} />
62        )) : (
63          <DropdownMenuItem className='cursor-pointer' asChild>
64            <a href='https://solana.com/solana-wallets' target='_blank' rel='noopener noreferrer'>
65              Get a Solana wallet to connect.
66            </a>
67          </DropdownMenuItem>
68        )}
69      </DropdownMenuContent>
70    </DropdownMenu>
71  );
72}
73 
74 
75export { WalletDropdown }