Fee estimates

1"use client";
2 
3import { Check } from "lucide-react";
4import {
5  type ComponentProps,
6  type KeyboardEvent,
7  useId,
8  useMemo,
9  useRef,
10  useState,
11} from "react";
12 
13import { formatFeeRate, type FeeEstimate } from "@/lib/bitcoin";
14import { componentClasses } from "@/lib/utils";
15 
16import {
17  interactiveStyles,
18  panelStyles,
19  type BitcoinVisualProps,
20} from "./shared";
21 
22export type FeeEstimatesProps = Omit<ComponentProps<"div">, "children"> &
23  BitcoinVisualProps & {
24    estimates: FeeEstimate[];
25    selectedBlocks?: number;
26    defaultSelectedBlocks?: number;
27    onSelectionChange?: (estimate: FeeEstimate) => void;
28    disabled?: boolean;
29  };
30 
31export function FeeEstimates({
32  estimates,
33  selectedBlocks,
34  defaultSelectedBlocks,
35  onSelectionChange,
36  disabled,
37  unstyled,
38  className,
39  ...props
40}: FeeEstimatesProps) {
41  const groupLabelId = useId();
42  const initial = defaultSelectedBlocks ?? estimates[0]?.blocks;
43  const [internalSelection, setInternalSelection] = useState(initial);
44  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
45  const currentSelection = selectedBlocks ?? internalSelection;
46  const sorted = useMemo(
47    () => [...estimates].sort((a, b) => a.blocks - b.blocks),
48    [estimates],
49  );
50 
51  function chooseEstimate(estimate: FeeEstimate) {
52    if (disabled) return;
53    if (selectedBlocks === undefined) setInternalSelection(estimate.blocks);
54    onSelectionChange?.(estimate);
55  }
56 
57  function handleOptionKeyDown(
58    event: KeyboardEvent<HTMLButtonElement>,
59    index: number,
60  ) {
61    if (disabled || sorted.length === 0) return;
62 
63    let nextIndex: number;
64    switch (event.key) {
65      case "ArrowDown":
66      case "ArrowRight":
67        nextIndex = (index + 1) % sorted.length;
68        break;
69      case "ArrowUp":
70      case "ArrowLeft":
71        nextIndex = (index - 1 + sorted.length) % sorted.length;
72        break;
73      case "Home":
74        nextIndex = 0;
75        break;
76      case "End":
77        nextIndex = sorted.length - 1;
78        break;
79      default:
80        return;
81    }
82 
83    event.preventDefault();
84    chooseEstimate(sorted[nextIndex]);
85    optionRefs.current[nextIndex]?.focus();
86  }
87 
88  return (
89    <div
90      data-slot="fee-estimates"
91      data-disabled={disabled || undefined}
92      data-unstyled={unstyled || undefined}
93      className={componentClasses(
94        unstyled,
95        [panelStyles, "grid gap-1 p-1"],
96        className,
97      )}
98      role="radiogroup"
99      aria-labelledby={groupLabelId}
100// … truncated