Difficulty adjustment

1import type { ComponentProps } from "react";
2 
3import { clampPercent, formatBlockHeight } from "@/lib/bitcoin";
4import { componentClasses } from "@/lib/utils";
5 
6import { panelStyles, type BitcoinVisualProps } from "./shared";
7 
8export type DifficultyAdjustmentProps = Omit<
9  ComponentProps<"section">,
10  "children"
11> &
12  BitcoinVisualProps & {
13    currentHeight: number;
14    epochStartHeight: number;
15    projectedChange: number;
16    remainingBlocks: number;
17    estimatedTime?: string;
18  };
19 
20export function DifficultyAdjustment({
21  currentHeight,
22  epochStartHeight,
23  projectedChange,
24  remainingBlocks,
25  estimatedTime,
26  unstyled,
27  className,
28  ...props
29}: DifficultyAdjustmentProps) {
30  const elapsedBlocks = Math.max(0, currentHeight - epochStartHeight);
31  const percent = clampPercent((elapsedBlocks / 2_016) * 100);
32  const changeLabel = `${projectedChange >= 0 ? "+" : ""}${projectedChange.toFixed(2)}%`;
33 
34  return (
35    <section
36      data-slot="difficulty-adjustment"
37      data-direction={projectedChange >= 0 ? "up" : "down"}
38      data-unstyled={unstyled || undefined}
39      aria-label="Difficulty adjustment"
40      className={componentClasses(
41        unstyled,
42        [panelStyles, "grid gap-5 p-5"],
43        className,
44      )}
45      {...props}
46    >
47      <div
48        className={componentClasses(
49          unstyled,
50          "flex items-baseline justify-between gap-4",
51        )}
52      >
53        <div>
54          <h3
55            className={componentClasses(unstyled, "text-sm font-medium")}
56          >
57            Difficulty epoch
58          </h3>
59          <p
60            className={componentClasses(
61              unstyled,
62              "mt-1 font-mono text-xs tabular-nums text-[var(--color-muted)]",
63            )}
64          >
65            Block {formatBlockHeight(currentHeight)}
66          </p>
67        </div>
68        <span
69          data-slot="difficulty-adjustment-change"
70          className={componentClasses(
71            unstyled,
72            [
73              "font-mono text-lg font-medium tabular-nums",
74              projectedChange >= 0
75                ? "text-[var(--color-success)]"
76                : "text-[var(--color-danger)]",
77            ],
78          )}
79        >
80          {changeLabel}
81        </span>
82      </div>
83      <div
84        role="progressbar"
85        aria-label="Difficulty epoch progress"
86        aria-valuemin={0}
87        aria-valuemax={2016}
88        aria-valuenow={Math.min(elapsedBlocks, 2016)}
89// … truncated