150 lines
4.8 KiB
TypeScript
150 lines
4.8 KiB
TypeScript
// 'use client'
|
|
|
|
// import { Button } from '@workspace/ui/components/button'
|
|
// import {
|
|
// DropdownMenu,
|
|
// DropdownMenuContent,
|
|
// DropdownMenuItem,
|
|
// DropdownMenuTrigger
|
|
// } from '@workspace/ui/components/dropdown-menu'
|
|
// import { cn } from '@workspace/ui/lib/utils'
|
|
// import { ChevronDown, LogOut } from 'lucide-react'
|
|
// import { useState } from 'react'
|
|
|
|
// interface WalletSessionBadgeProps {
|
|
// address: string
|
|
// className?: string
|
|
// }
|
|
|
|
// export function WalletSessionBadge({
|
|
// address,
|
|
// className
|
|
// }: WalletSessionBadgeProps) {
|
|
// const [isConnected, setIsConnected] = useState(true)
|
|
|
|
// return (
|
|
// <DropdownMenu>
|
|
// <DropdownMenuTrigger asChild>
|
|
// <Button
|
|
// variant="outline"
|
|
// className={cn(
|
|
// 'flex items-center space-x-2 rounded-md border px-3 py-1.5 text-sm font-medium',
|
|
// 'hover:bg-accent hover:text-accent-foreground',
|
|
// 'dark:bg-accent/5 dark:hover:bg-accent/10',
|
|
// className
|
|
// )}
|
|
// >
|
|
// <span className="relative flex h-2 w-2">
|
|
// <span
|
|
// className={cn(
|
|
// 'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
|
|
// isConnected ? 'bg-green-400' : 'bg-red-400'
|
|
// )}
|
|
// />
|
|
|
|
// <span
|
|
// className={cn(
|
|
// 'relative inline-flex h-2 w-2 rounded-full',
|
|
// isConnected ? 'bg-green-500' : 'bg-red-500'
|
|
// )}
|
|
// />
|
|
// </span>
|
|
// <span>{address}</span>
|
|
// <ChevronDown className="h-4 w-4" />
|
|
// </Button>
|
|
// </DropdownMenuTrigger>
|
|
// <DropdownMenuContent align="end">
|
|
// <DropdownMenuItem
|
|
// className="flex cursor-pointer items-center text-destructive focus:text-destructive"
|
|
// onClick={() => setIsConnected(false)}
|
|
// >
|
|
// <LogOut className="mr-2 h-4 w-4" />
|
|
// <span>Disconnect</span>
|
|
// </DropdownMenuItem>
|
|
// </DropdownMenuContent>
|
|
// </DropdownMenu>
|
|
// )
|
|
// }
|
|
|
|
'use client'
|
|
import { useWallet } from '@/context/WalletContext'
|
|
import { Button } from '@workspace/ui/components/button'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger
|
|
} from '@workspace/ui/components/dropdown-menu'
|
|
import { cn } from '@workspace/ui/lib/utils'
|
|
import { ChevronDown, LogOut } from 'lucide-react'
|
|
|
|
export function WalletSessionBadge() {
|
|
const { wallet, isConnected, connect, disconnect } = useWallet()
|
|
|
|
// Format address for display
|
|
const formatAddress = (address?: string) => {
|
|
if (!address) return 'Connect Wallet'
|
|
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className={cn(
|
|
'flex items-center space-x-2 rounded-md border px-3 py-1.5 text-sm font-medium',
|
|
'hover:bg-accent hover:text-accent-foreground',
|
|
'dark:bg-accent/5 dark:hover:bg-accent/10'
|
|
)}
|
|
>
|
|
<span className="relative flex h-2 w-2 mr-2">
|
|
<span
|
|
className={cn(
|
|
'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
|
|
isConnected ? 'bg-green-400' : 'bg-red-400'
|
|
)}
|
|
/>
|
|
|
|
<span
|
|
className={cn(
|
|
'relative inline-flex h-2 w-2 rounded-full',
|
|
isConnected ? 'bg-green-500' : 'bg-red-500'
|
|
)}
|
|
/>
|
|
</span>
|
|
<span>{isConnected && wallet?.address
|
|
? formatAddress(wallet.address)
|
|
: 'Connect Wallet'}</span>
|
|
<ChevronDown className="h-4 w-4 ml-2" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
{isConnected ? (
|
|
<>
|
|
<div className="px-2 py-1.5">
|
|
<p className="text-sm font-medium">Connected Wallet</p>
|
|
<p className="text-xs text-muted-foreground font-mono truncate max-w-[200px]">
|
|
{wallet?.address}
|
|
</p>
|
|
</div>
|
|
<DropdownMenuItem
|
|
className="flex cursor-pointer items-center text-destructive focus:text-destructive"
|
|
onClick={disconnect}
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
<span>Disconnect</span>
|
|
</DropdownMenuItem>
|
|
</>
|
|
) : (
|
|
<DropdownMenuItem
|
|
className="flex cursor-pointer items-center"
|
|
onClick={connect}
|
|
>
|
|
<span>Connect Wallet</span>
|
|
</DropdownMenuItem>
|
|
)}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
} |