UTXO table

1import type { ComponentProps } from "react";
2 
3import type { BitcoinUtxo } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { BitcoinAmount } from "./bitcoin-amount";
7import { HashDisplay } from "./hash-display";
8import { ScriptBadge } from "./script-badge";
9import { panelStyles, type BitcoinVisualProps } from "./shared";
10 
11export type UtxoTableProps = Omit<ComponentProps<"div">, "children"> &
12  BitcoinVisualProps & {
13    utxos: BitcoinUtxo[];
14    caption?: string;
15    getTransactionHref?: (utxo: BitcoinUtxo) => string | undefined;
16  };
17 
18export function UtxoTable({
19  utxos,
20  caption = "Unspent transaction outputs",
21  getTransactionHref,
22  unstyled,
23  className,
24  ...props
25}: UtxoTableProps) {
26  return (
27    <div
28      data-slot="utxo-table"
29      data-unstyled={unstyled || undefined}
30      className={componentClasses(
31        unstyled,
32        [panelStyles, "max-w-full overflow-x-auto"],
33        className,
34      )}
35      {...props}
36    >
37      <table
38        className={componentClasses(
39          unstyled,
40          "w-full min-w-[44rem] border-collapse text-left text-sm",
41        )}
42      >
43        <caption
44          className={componentClasses(
45            unstyled,
46            "border-b border-[var(--color-rule)] px-4 py-3 text-left text-sm font-medium",
47          )}
48        >
49          {caption}
50        </caption>
51        <thead>
52          <tr
53            className={componentClasses(
54              unstyled,
55              "border-b border-[var(--color-rule-subtle)] text-xs text-[var(--color-muted)]",
56            )}
57          >
58            <th className={componentClasses(unstyled, "px-4 py-3 font-normal")}>
59              Outpoint
60            </th>
61            <th className={componentClasses(unstyled, "px-4 py-3 font-normal")}>
62              Script
63            </th>
64            <th className={componentClasses(unstyled, "px-4 py-3 font-normal")}>
65              Confirmations
66            </th>
67            <th
68              className={componentClasses(
69                unstyled,
70                "px-4 py-3 text-right font-normal",
71              )}
72            >
73              Value
74            </th>
75          </tr>
76        </thead>
77        <tbody>
78          {utxos.map((utxo) => (
79            <tr
80              key={`${utxo.txid}:${utxo.vout}`}
81              data-slot="utxo-table-row"
82              data-spendable={utxo.spendable}
83              className={componentClasses(
84                unstyled,
85// … truncated