49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { useState } from 'react'
|
|
import clsx from 'clsx'
|
|
|
|
interface AddressProps {
|
|
address: string
|
|
chainId?: number
|
|
showCopy?: boolean
|
|
showENS?: boolean
|
|
truncate?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export function Address({
|
|
address,
|
|
chainId,
|
|
showCopy = true,
|
|
showENS = false,
|
|
truncate = false,
|
|
className,
|
|
}: AddressProps) {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const displayAddress = truncate
|
|
? `${address.slice(0, 6)}...${address.slice(-4)}`
|
|
: address
|
|
|
|
const handleCopy = async () => {
|
|
await navigator.clipboard.writeText(address)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className={clsx('flex items-center gap-2', className)}>
|
|
<span className="font-mono text-sm">{displayAddress}</span>
|
|
{showCopy && (
|
|
<button
|
|
onClick={handleCopy}
|
|
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
|
title="Copy address"
|
|
>
|
|
{copied ? '✓' : '📋'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|