Address Display

1"use client";
2 
3import { CheckIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
4import React from "react";
5import { cn } from "@/lib/utils";
6 
7interface AddressDisplayProps {
8  address: string;
9  truncate?: boolean;
10  truncateChars?: [number, number];
11  copyable?: boolean;
12  explorerUrl?: string;
13  className?: string;
14}
15 
16const formatAddress = (
17  address: string,
18  truncate: boolean,
19  chars: [number, number],
20) => {
21  if (!truncate || address.length <= chars[0] + chars[1] + 3) return address;
22  return `${address.slice(0, chars[0])}...${address.slice(-chars[1])}`;
23};
24 
25const AddressDisplay = ({
26  address,
27  truncate = true,
28  truncateChars = [4, 4],
29  copyable = true,
30  explorerUrl,
31  className,
32}: AddressDisplayProps) => {
33  const [copied, setCopied] = React.useState(false);
34 
35  const handleCopy = async () => {
36    try {
37      await navigator.clipboard.writeText(address);
38      setCopied(true);
39      setTimeout(() => setCopied(false), 2000);
40    } catch {
41      console.error("Failed to copy address to clipboard");
42    }
43  };
44 
45  const displayed = formatAddress(address, truncate, truncateChars);
46  const fullUrl = explorerUrl
47    ? `${explorerUrl.replace(/\/+$/, "")}/${address}`
48    : undefined;
49 
50  return (
51    <span className={cn("inline-flex items-center gap-1.5", className)}>
52      <span className="font-mono text-sm text-muted-foreground">
53        {displayed}
54      </span>
55      {copyable && (
56        <button
57          type="button"
58          onClick={handleCopy}
59          className="text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
60          aria-label="Copy address"
61        >
62          {copied ? (
63            <CheckIcon className="size-3.5 text-emerald-500" />
64          ) : (
65            <CopyIcon className="size-3.5" />
66          )}
67        </button>
68      )}
69      {fullUrl && (
70        <a
71          href={fullUrl}
72          target="_blank"
73          rel="noopener noreferrer"
74          className="text-muted-foreground hover:text-foreground transition-colors"
75          aria-label="View in explorer"
76        >
77          <ExternalLinkIcon className="size-3.5" />
78        </a>
79      )}
80    </span>
81  );
82};
83 
84export type { AddressDisplayProps };
85export { AddressDisplay };