Bitcoin search

1"use client";
2 
3import { Search } from "lucide-react";
4import {
5  type ComponentProps,
6  type FormEvent,
7  useId,
8  useState,
9} from "react";
10 
11import {
12  classifyBitcoinQuery,
13  type BitcoinSearchKind,
14} from "@/lib/bitcoin";
15import { componentClasses } from "@/lib/utils";
16 
17import {
18  interactiveStyles,
19  type BitcoinVisualProps,
20} from "./shared";
21 
22export type BitcoinSearchSubmit = {
23  query: string;
24  kind: BitcoinSearchKind;
25};
26 
27export type BitcoinSearchProps = Omit<
28  ComponentProps<"form">,
29  "children" | "onSubmit"
30> &
31  BitcoinVisualProps & {
32    value?: string;
33    defaultValue?: string;
34    onValueChange?: (value: string) => void;
35    onSearch: (search: BitcoinSearchSubmit) => void | Promise<void>;
36    label?: string;
37    placeholder?: string;
38    loading?: boolean;
39    error?: string;
40  };
41 
42export function BitcoinSearch({
43  value,
44  defaultValue = "",
45  onValueChange,
46  onSearch,
47  label = "Search the Bitcoin chain",
48  placeholder = "Block, transaction, or address",
49  loading,
50  error,
51  unstyled,
52  className,
53  ...props
54}: BitcoinSearchProps) {
55  const inputId = useId();
56  const helpId = useId();
57  const [internalValue, setInternalValue] = useState(defaultValue);
58  const [internalError, setInternalError] = useState<string>();
59  const query = value ?? internalValue;
60  const visibleError = error ?? internalError;
61 
62  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
63    event.preventDefault();
64    const normalized = query.trim();
65    const kind = classifyBitcoinQuery(normalized);
66 
67    if (!normalized) {
68      setInternalError("Enter a block height, transaction ID, block hash, or address.");
69      return;
70    }
71 
72    if (kind === "unknown") {
73      setInternalError("That does not look like a Bitcoin identifier.");
74      return;
75    }
76 
77    setInternalError(undefined);
78    await onSearch({ query: normalized, kind });
79  }
80 
81  function updateValue(nextValue: string) {
82    if (value === undefined) setInternalValue(nextValue);
83    setInternalError(undefined);
84    onValueChange?.(nextValue);
85  }
86 
87  return (
88    <form
89      data-slot="bitcoin-search"
90      data-state={visibleError ? "error" : loading ? "loading" : "idle"}
91      data-unstyled={unstyled || undefined}
92      className={componentClasses(
93        unstyled,
94        "grid gap-2",
95        className,
96      )}
97      onSubmit={handleSubmit}
98      aria-busy={loading}
99      {...props}
100    >
101      <label
102        htmlFor={inputId}
103// … truncated