Hash display

1"use client";
2 
3import { Check, Copy, ExternalLink, X } from "lucide-react";
4import {
5  type ComponentProps,
6  type MouseEvent,
7  useEffect,
8  useRef,
9  useState,
10} from "react";
11 
12import { truncateMiddle } from "@/lib/bitcoin";
13import { componentClasses } from "@/lib/utils";
14 
15import {
16  interactiveStyles,
17  monoStyles,
18  type BitcoinVisualProps,
19} from "./shared";
20 
21type CopyState = "idle" | "loading" | "success" | "error";
22 
23export type HashDisplayProps = Omit<ComponentProps<"span">, "children"> &
24  BitcoinVisualProps & {
25    value: string;
26    label?: string;
27    href?: string;
28    copyable?: boolean;
29    startCharacters?: number;
30    endCharacters?: number;
31    /** Shows the entire value instead of truncating it. @default false */
32    full?: boolean;
33  };
34 
35export function HashDisplay({
36  value,
37  label = "Hash",
38  href,
39  copyable = true,
40  startCharacters = 8,
41  endCharacters = 8,
42  full = false,
43  unstyled,
44  className,
45  ...props
46}: HashDisplayProps) {
47  const [copyState, setCopyState] = useState<CopyState>("idle");
48  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
49 
50  useEffect(
51    () => () => {
52      if (resetTimer.current) clearTimeout(resetTimer.current);
53    },
54    [],
55  );
56 
57  async function handleCopy(event: MouseEvent<HTMLButtonElement>) {
58    event.preventDefault();
59    event.stopPropagation();
60    setCopyState("loading");
61 
62    try {
63      await navigator.clipboard.writeText(value);
64      setCopyState("success");
65    } catch {
66      setCopyState("error");
67    }
68 
69    if (resetTimer.current) clearTimeout(resetTimer.current);
70    resetTimer.current = setTimeout(() => setCopyState("idle"), 1_800);
71  }
72 
73  const visibleValue = full
74    ? value
75    : truncateMiddle(value, startCharacters, endCharacters);
76  const statusLabel = {
77    idle: `Copy ${label.toLowerCase()}`,
78    loading: `Copying ${label.toLowerCase()}`,
79    success: `${label} copied`,
80    error: `Could not copy ${label.toLowerCase()}`,
81  }[copyState];
82  const StatusIcon =
83    copyState === "success" ? Check : copyState === "error" ? X : Copy;
84 
85  return (
86    <span
87      data-slot="hash-display"
88      data-state={copyState}
89      data-unstyled={unstyled || undefined}
90      className={componentClasses(
91        unstyled,
92        "inline-flex min-w-0 max-w-full items-center gap-1.5",
93        className,
94      )}
95      {...props}
96    >
97      {href ? (
98        <a
99          data-slot="hash-display-link"
100          href={href}
101          title={value}
102// … truncated