Transaction flow

1import { ArrowDown, ArrowRight } from "lucide-react";
2import type { ComponentProps } from "react";
3 
4import type { TransactionEndpoint } from "@/lib/bitcoin";
5import { componentClasses } from "@/lib/utils";
6 
7import { BitcoinAmount } from "./bitcoin-amount";
8import { HashDisplay } from "./hash-display";
9import { ScriptBadge } from "./script-badge";
10import { panelStyles, type BitcoinVisualProps } from "./shared";
11 
12export type TransactionFlowProps = Omit<
13  ComponentProps<"section">,
14  "children"
15> &
16  BitcoinVisualProps & {
17    inputs: TransactionEndpoint[];
18    outputs: TransactionEndpoint[];
19    fee?: bigint | number | string;
20  };
21 
22export function TransactionFlow({
23  inputs,
24  outputs,
25  fee,
26  unstyled,
27  className,
28  ...props
29}: TransactionFlowProps) {
30  return (
31    <section
32      data-slot="transaction-flow"
33      data-unstyled={unstyled || undefined}
34      aria-label="Transaction flow"
35      className={componentClasses(
36        unstyled,
37        [
38          panelStyles,
39          "grid min-w-0 gap-4 p-4 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center",
40        ],
41        className,
42      )}
43      {...props}
44    >
45      <EndpointGroup
46        label="Inputs"
47        endpoints={inputs}
48        unstyled={unstyled}
49      />
50      <div
51        data-slot="transaction-flow-direction"
52        className={componentClasses(
53          unstyled,
54          "flex items-center justify-center text-[var(--color-muted)]",
55        )}
56        aria-hidden="true"
57      >
58        <ArrowDown className="size-4 md:hidden" />
59        <ArrowRight className="hidden size-4 md:block" />
60      </div>
61      <EndpointGroup
62        label="Outputs"
63        endpoints={outputs}
64        unstyled={unstyled}
65      />
66      {fee !== undefined ? (
67        <footer
68          data-slot="transaction-flow-fee"
69          className={componentClasses(
70            unstyled,
71            "flex items-center justify-between gap-4 border-t border-[var(--color-rule-subtle)] pt-4 text-xs md:col-span-3",
72          )}
73        >
74          <span className={componentClasses(unstyled, "text-[var(--color-muted)]")}>
75            Miner fee
76          </span>
77          <BitcoinAmount value={fee} unit="sat" unstyled={unstyled} />
78        </footer>
79      ) : null}
80    </section>
81  );
82}
83 
84function EndpointGroup({
85  label,
86  endpoints,
87  unstyled,
88}: {
89  label: string;
90  endpoints: TransactionEndpoint[];
91  unstyled?: boolean;
92}) {
93  return (
94    <div data-slot={`transaction-${label.toLowerCase()}`}>
95      <h3
96// … truncated