Merkle proof

1import { CornerDownRight, ShieldCheck } from "lucide-react";
2import type { ComponentProps } from "react";
3 
4import { componentClasses } from "@/lib/utils";
5 
6import { HashDisplay } from "./hash-display";
7import { panelStyles, type BitcoinVisualProps } from "./shared";
8 
9export interface MerkleProofNode {
10  hash: string;
11  side: "left" | "right";
12}
13 
14export type MerkleProofProps = Omit<ComponentProps<"section">, "children"> &
15  BitcoinVisualProps & {
16    transactionId: string;
17    merkleRoot: string;
18    proof: MerkleProofNode[];
19    verified?: boolean;
20  };
21 
22export function MerkleProof({
23  transactionId,
24  merkleRoot,
25  proof,
26  verified,
27  unstyled,
28  className,
29  ...props
30}: MerkleProofProps) {
31  return (
32    <section
33      data-slot="merkle-proof"
34      data-state={verified ? "verified" : "unverified"}
35      data-unstyled={unstyled || undefined}
36      aria-label="Merkle proof"
37      className={componentClasses(
38        unstyled,
39        [panelStyles, "grid min-w-0 gap-5 p-5"],
40        className,
41      )}
42      {...props}
43    >
44      <header
45        className={componentClasses(
46          unstyled,
47          "flex items-center justify-between gap-4",
48        )}
49      >
50        <h3 className={componentClasses(unstyled, "text-sm font-medium")}>
51          Merkle proof
52        </h3>
53        {verified ? (
54          <span
55            className={componentClasses(
56              unstyled,
57              "inline-flex items-center gap-1.5 text-xs font-medium text-[var(--color-success)]",
58            )}
59          >
60            <ShieldCheck aria-hidden="true" className="size-3.5" />
61            Verified
62          </span>
63        ) : null}
64      </header>
65      <div>
66        <p
67          className={componentClasses(
68            unstyled,
69            "mb-1 text-xs text-[var(--color-muted)]",
70          )}
71        >
72          Transaction
73        </p>
74        <HashDisplay
75          value={transactionId}
76          label="Transaction ID"
77          unstyled={unstyled}
78        />
79      </div>
80      <ol
81        data-slot="merkle-proof-path"
82        className={componentClasses(
83          unstyled,
84          "m-0 grid list-none gap-2 border-l border-[var(--color-rule)] p-0 pl-4",
85        )}
86      >
87        {proof.map((node, index) => (
88          <li
89            key={`${node.hash}-${index}`}
90            className={componentClasses(
91              unstyled,
92              "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-2",
93            )}
94          >
95            <span
96// … truncated