Address display

1import type { ComponentProps } from "react";
2 
3import type { BitcoinNetwork, ScriptType } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { HashDisplay } from "./hash-display";
7import { NetworkBadge } from "./network-badge";
8import { ScriptBadge } from "./script-badge";
9import { type BitcoinVisualProps } from "./shared";
10 
11export type AddressDisplayProps = Omit<ComponentProps<"div">, "children"> &
12  BitcoinVisualProps & {
13    address: string;
14    network?: BitcoinNetwork;
15    scriptType?: ScriptType;
16    label?: string;
17    href?: string;
18    copyable?: boolean;
19  };
20 
21export function AddressDisplay({
22  address,
23  network,
24  scriptType,
25  label,
26  href,
27  copyable = true,
28  unstyled,
29  className,
30  ...props
31}: AddressDisplayProps) {
32  return (
33    <div
34      data-slot="address-display"
35      data-unstyled={unstyled || undefined}
36      className={componentClasses(unstyled, "grid min-w-0 gap-2", className)}
37      {...props}
38    >
39      {label ? (
40        <span
41          data-slot="address-display-label"
42          className={componentClasses(
43            unstyled,
44            "text-xs text-[var(--color-muted)]",
45          )}
46        >
47          {label}
48        </span>
49      ) : null}
50      <HashDisplay
51        value={address}
52        label="Address"
53        href={href}
54        copyable={copyable}
55        startCharacters={12}
56        endCharacters={8}
57        unstyled={unstyled}
58      />
59      {network || scriptType ? (
60        <div
61          data-slot="address-display-meta"
62          className={componentClasses(unstyled, "flex flex-wrap gap-2")}
63        >
64          {network ? (
65            <NetworkBadge network={network} unstyled={unstyled} />
66          ) : null}
67          {scriptType ? (
68            <ScriptBadge type={scriptType} unstyled={unstyled} />
69          ) : null}
70        </div>
71      ) : null}
72    </div>
73  );
74}