Transaction row

1import type { ComponentProps } from "react";
2 
3import {
4  feeRateFrom,
5  formatFeeRate,
6  formatRelativeTime,
7  toDate,
8  type BitcoinTransaction,
9} from "@/lib/bitcoin";
10import { componentClasses } from "@/lib/utils";
11 
12import { BitcoinAmount } from "./bitcoin-amount";
13import { ConfirmationProgress } from "./confirmation-progress";
14import { HashDisplay } from "./hash-display";
15import { type BitcoinVisualProps } from "./shared";
16import { StatusBadge } from "./status-badge";
17 
18export type TransactionRowProps = Omit<ComponentProps<"article">, "children"> &
19  BitcoinVisualProps & {
20    transaction: BitcoinTransaction;
21    href?: string;
22    now?: number | Date;
23  };
24 
25export function TransactionRow({
26  transaction,
27  href,
28  now,
29  unstyled,
30  className,
31  ...props
32}: TransactionRowProps) {
33  const feeRate = feeRateFrom(transaction.fee, transaction.vsize);
34 
35  return (
36    <article
37      data-slot="transaction-row"
38      data-state={transaction.state}
39      data-unstyled={unstyled || undefined}
40      className={componentClasses(
41        unstyled,
42        "grid min-w-0 gap-4 border-b border-[var(--color-rule-subtle)] py-4 last:border-b-0 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center",
43        className,
44      )}
45      {...props}
46    >
47      <div className="grid min-w-0 gap-2">
48        <HashDisplay
49          value={transaction.txid}
50          label="Transaction ID"
51          href={href}
52          unstyled={unstyled}
53        />
54        <div
55          className={componentClasses(
56            unstyled,
57            "flex flex-wrap items-center gap-x-3 gap-y-2",
58          )}
59        >
60          <StatusBadge state={transaction.state} unstyled={unstyled} />
61          <span
62            className={componentClasses(
63              unstyled,
64              "font-mono text-xs tabular-nums text-[var(--color-muted)]",
65            )}
66          >
67            {formatFeeRate(feeRate)}
68          </span>
69          {transaction.timestamp ? (
70            <time
71              dateTime={toDate(transaction.timestamp).toISOString()}
72              className={componentClasses(
73                unstyled,
74                "text-xs text-[var(--color-muted)]",
75              )}
76            >
77              {formatRelativeTime(transaction.timestamp, now)}
78            </time>
79          ) : null}
80        </div>
81      </div>
82      <div
83        className={componentClasses(
84          unstyled,
85          "grid justify-items-start gap-2 sm:justify-items-end",
86        )}
87      >
88// … truncated