Bitcoin explorer

1import type { ComponentProps } from "react";
2 
3import {
4  BitcoinSearch,
5  BlockList,
6  FeeEstimates,
7  MempoolMeter,
8  NetworkBadge,
9  NetworkStats,
10  TransactionRow,
11  type BitcoinSearchSubmit,
12  type NetworkStat,
13} from "@/components/bitcoin";
14import type {
15  BitcoinBlock,
16  BitcoinNetwork,
17  BitcoinTransaction,
18  FeeEstimate,
19} from "@/lib/bitcoin";
20import { cn } from "@/lib/utils";
21 
22export type BitcoinExplorerProps = Omit<ComponentProps<"section">, "children"> & {
23  network: BitcoinNetwork;
24  blocks: BitcoinBlock[];
25  transactions: BitcoinTransaction[];
26  stats: NetworkStat[];
27  feeEstimates: FeeEstimate[];
28  mempool: {
29    size: number;
30    transactionCount: number;
31    medianFeeRate: number;
32    capacity?: number;
33  };
34  onSearch: (search: BitcoinSearchSubmit) => void | Promise<void>;
35  heading?: string;
36  now?: number | Date;
37  unstyled?: boolean;
38};
39 
40/**
41 * A data-source-agnostic block explorer composition.
42 *
43 * Pass data from Bitcoin Core, Esplora, Electrum, or your own indexer. The
44 * block performs no fetching and makes no trust assumptions.
45 */
46export function BitcoinExplorer({
47  network,
48  blocks,
49  transactions,
50  stats,
51  feeEstimates,
52  mempool,
53  onSearch,
54  heading = "Bitcoin explorer",
55  now,
56  unstyled,
57  className,
58  ...props
59}: BitcoinExplorerProps) {
60  return (
61    <section
62      data-slot="bitcoin-explorer"
63      data-unstyled={unstyled || undefined}
64      className={cn(!unstyled && "grid min-w-0 gap-8", className)}
65      {...props}
66    >
67      <header
68        className={cn(
69          !unstyled &&
70            "grid min-w-0 gap-5 border-b border-[var(--color-rule)] pb-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-start",
71        )}
72      >
73        <div>
74          <h1
75            className={cn(
76              !unstyled &&
77                "text-3xl font-medium tracking-[-0.04em] [overflow-wrap:anywhere]",
78            )}
79          >
80            {heading}
81          </h1>
82          <p
83            className={cn(
84              !unstyled && "mt-2 text-sm text-[var(--color-muted)]",
85            )}
86          >
87            Read chain state from your configured source.
88          </p>
89        </div>
90        <NetworkBadge network={network} unstyled={unstyled} />
91      </header>
92 
93      <BitcoinSearch onSearch={onSearch} unstyled={unstyled} />
94      <NetworkStats stats={stats} unstyled={unstyled} />
95 
96      <div
97        className={cn(
98          !unstyled &&
99            "grid min-w-0 gap-6 xl:grid-cols-[minmax(0,1.3fr)_minmax(20rem,0.7fr)]",
100// … truncated