Mempool meter

1import type { ComponentProps } from "react";
2 
3import { clampPercent, formatBytes, formatFeeRate } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { panelStyles, type BitcoinVisualProps } from "./shared";
7 
8export type MempoolMeterProps = Omit<ComponentProps<"section">, "children"> &
9  BitcoinVisualProps & {
10    size: number;
11    transactionCount: number;
12    medianFeeRate: number;
13    /** Scale ceiling in bytes. @default 300_000_000 */
14    capacity?: number;
15  };
16 
17export function MempoolMeter({
18  size,
19  transactionCount,
20  medianFeeRate,
21  capacity = 300_000_000,
22  unstyled,
23  className,
24  ...props
25}: MempoolMeterProps) {
26  const percent = clampPercent((Math.max(size, 0) / Math.max(capacity, 1)) * 100);
27 
28  return (
29    <section
30      data-slot="mempool-meter"
31      data-unstyled={unstyled || undefined}
32      aria-label="Mempool status"
33      className={componentClasses(
34        unstyled,
35        [panelStyles, "grid gap-5 p-5"],
36        className,
37      )}
38      {...props}
39    >
40      <header
41        data-slot="mempool-meter-header"
42        className={componentClasses(
43          unstyled,
44          "flex min-w-0 items-start justify-between gap-4",
45        )}
46      >
47        <div>
48          <h3
49            className={componentClasses(
50              unstyled,
51              "text-sm font-medium tracking-[-0.01em]",
52            )}
53          >
54            Mempool
55          </h3>
56          <p
57            className={componentClasses(
58              unstyled,
59              "mt-1 text-xs text-[var(--color-muted)]",
60            )}
61          >
62            {new Intl.NumberFormat("en-US").format(transactionCount)} transactions
63          </p>
64        </div>
65        <span
66          className={componentClasses(
67            unstyled,
68            "font-mono text-sm font-medium tabular-nums",
69          )}
70        >
71          {formatBytes(size)}
72        </span>
73      </header>
74      <div
75        data-slot="mempool-meter-track"
76        role="progressbar"
77        aria-label="Mempool size"
78        aria-valuemin={0}
79        aria-valuemax={capacity}
80        aria-valuenow={Math.min(Math.max(size, 0), capacity)}
81        aria-valuetext={`${formatBytes(size)}, ${Math.round(percent)} percent of display capacity`}
82        className={componentClasses(
83          unstyled,
84          "h-2 overflow-hidden rounded-[var(--radius-full)] bg-[var(--color-surface-active)]",
85        )}
86      >
87        <span
88          data-slot="mempool-meter-value"
89// … truncated