Most-work chain

1"use client";
2 
3import {
4  useId,
5  useState,
6  type ComponentProps,
7  type CSSProperties,
8} from "react";
9 
10import {
11  formatBlockHeight,
12  formatTimestamp,
13  truncateMiddle,
14} from "@/lib/bitcoin";
15import { componentClasses } from "@/lib/utils";
16 
17import styles from "./longest-chain.module.css";
18import type { BitcoinVisualProps } from "./shared";
19 
20export type ChainBranchState = "competing" | "stale" | "orphan";
21 
22export type LongestChainBlock = {
23  /** Stable identifier used for selection state. */
24  id: string;
25  height: number;
26  /** Optional real hash supplied by the caller. */
27  hash?: string;
28  timestamp?: number | Date;
29  transactionCount?: number;
30  miner?: string;
31  /** Caller-supplied chainwork or decision note. */
32  work?: string;
33};
34 
35export type LongestChainBranch = {
36  id: string;
37  label: string;
38  state: ChainBranchState;
39  /**
40   * Height on the canonical chain where this branch diverges. Leave empty for
41   * an orphan whose parent is not known to the current view.
42   */
43  forkHeight?: number;
44  /** Places the branch above or below the most-work path. @default "above" */
45  direction?: "above" | "below";
46  blocks: readonly LongestChainBlock[];
47};
48 
49export type LongestChainProps = Omit<ComponentProps<"figure">, "children"> &
50  BitcoinVisualProps & {
51    canonical: readonly LongestChainBlock[];
52    branches?: readonly LongestChainBranch[];
53    /** Pauses the traveling chainwork signal. @default false */
54    paused?: boolean;
55    /** @default "Most-work chain" */
56    title?: string;
57    /** Accessible description of the represented fixture or network snapshot. */
58    description?: string;
59  };
60 
61type PositionedNode = {
62  block: LongestChainBlock;
63  branchId: string;
64  branchLabel: string;
65  direction: "main" | "above" | "below";
66  state: "canonical" | "tip" | ChainBranchState;
67  x: number;
68  y: number;
69};
70 
71type ChainNodeStyle = CSSProperties & {
72  "--chain-x": string;
73  "--chain-y": string;
74};
75 
76const VIEWBOX_WIDTH = 1_000;
77const VIEWBOX_HEIGHT = 360;
78const MAIN_Y = 180;
79const X_START = 88;
80const X_END = 912;
81 
82function pathThrough(points: readonly { x: number; y: number }[]) {
83  if (points.length === 0) return "";
84  if (points.length === 1) {
85    const point = points[0];
86    return `M ${point.x - 54} ${point.y} L ${point.x} ${point.y}`;
87  }
88 
89  return points.slice(1).reduce((path, point, index) => {
90    const previous = points[index];
91    const midpoint = (previous.x + point.x) / 2;
92// … truncated