Confirmation progress

1import type { ComponentProps } from "react";
2 
3import { clampPercent } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import type { BitcoinVisualProps } from "./shared";
7 
8export type ConfirmationProgressProps = Omit<
9  ComponentProps<"div">,
10  "children"
11> &
12  BitcoinVisualProps & {
13    confirmations: number;
14    /** Confirmation target used for the progress calculation. @default 6 */
15    target?: number;
16    /** Shows the confirmation count beneath the track. @default true */
17    showLabel?: boolean;
18  };
19 
20export function ConfirmationProgress({
21  confirmations,
22  target = 6,
23  showLabel = true,
24  unstyled,
25  className,
26  ...props
27}: ConfirmationProgressProps) {
28  const safeTarget = Math.max(1, target);
29  const safeConfirmations = Math.max(0, confirmations);
30  const percent = clampPercent((safeConfirmations / safeTarget) * 100);
31  const complete = safeConfirmations >= safeTarget;
32  const label = complete
33    ? `${safeConfirmations} confirmations, final`
34    : `${safeConfirmations} of ${safeTarget} confirmations`;
35 
36  return (
37    <div
38      data-slot="confirmation-progress"
39      data-state={complete ? "complete" : "confirming"}
40      data-unstyled={unstyled || undefined}
41      className={componentClasses(
42        unstyled,
43        "grid min-w-32 gap-1.5",
44        className,
45      )}
46      {...props}
47    >
48      <div
49        data-slot="confirmation-progress-track"
50        role="progressbar"
51        aria-label="Transaction confirmations"
52        aria-valuemin={0}
53        aria-valuemax={safeTarget}
54        aria-valuenow={Math.min(safeConfirmations, safeTarget)}
55        aria-valuetext={label}
56        className={componentClasses(
57          unstyled,
58          "h-1.5 overflow-hidden rounded-[var(--radius-full)] bg-[var(--color-surface-active)]",
59        )}
60      >
61        <span
62          data-slot="confirmation-progress-value"
63          aria-hidden="true"
64          className={componentClasses(
65            unstyled,
66            "block h-full rounded-[var(--radius-full)] bg-[var(--color-bitcoin)]",
67          )}
68          style={{ width: `${percent}%` }}
69        />
70      </div>
71      {showLabel ? (
72        <span
73          data-slot="confirmation-progress-label"
74          className={componentClasses(
75            unstyled,
76            "text-xs text-[var(--color-muted)]",
77          )}
78        >
79          {complete
80            ? `${safeConfirmations} confirmations`
81            : `${safeConfirmations} / ${safeTarget} confirmations`}
82// … truncated