Bitcoin amount

1import type { ComponentProps } from "react";
2 
3import {
4  formatBtc,
5  formatSats,
6  resolveAmountUnit,
7  type AmountUnit,
8  type SatoshiValue,
9} from "@/lib/bitcoin";
10import { componentClasses } from "@/lib/utils";
11 
12import type { BitcoinVisualProps } from "./shared";
13 
14export type BitcoinAmountProps = Omit<ComponentProps<"span">, "children"> &
15  BitcoinVisualProps & {
16    /** Amount in satoshis. bigint is recommended for exact values. */
17    value: SatoshiValue;
18    /**
19     * Display unit. `auto` switches to BTC at 1,000,000 sats.
20     * @default "auto"
21     */
22    unit?: AmountUnit;
23    /** Includes the visible unit label. @default true */
24    showUnit?: boolean;
25    /** Smallest number of BTC decimal places to preserve. @default 0 */
26    minimumFractionDigits?: number;
27    /** Largest number of BTC decimal places to preserve. @default 8 */
28    maximumFractionDigits?: number;
29  };
30 
31export function BitcoinAmount({
32  value,
33  unit = "auto",
34  showUnit = true,
35  minimumFractionDigits = 0,
36  maximumFractionDigits = 8,
37  unstyled,
38  className,
39  ...props
40}: BitcoinAmountProps) {
41  const resolvedUnit = resolveAmountUnit(value, unit);
42  const amount =
43    resolvedUnit === "btc"
44      ? formatBtc(value, { minimumFractionDigits, maximumFractionDigits })
45      : formatSats(value);
46 
47  return (
48    <span
49      data-slot="bitcoin-amount"
50      data-unit={resolvedUnit}
51      data-unstyled={unstyled || undefined}
52      className={componentClasses(
53        unstyled,
54        "inline-flex items-baseline gap-1 whitespace-nowrap font-mono text-sm font-medium tabular-nums tracking-[-0.02em]",
55        className,
56      )}
57      {...props}
58    >
59      <span data-slot="bitcoin-amount-value">{amount}</span>
60      {showUnit ? (
61        <span
62          data-slot="bitcoin-amount-unit"
63          className={componentClasses(
64            unstyled,
65            "font-sans text-[0.72em] font-medium tracking-normal text-[var(--color-muted)]",
66          )}
67        >
68          {resolvedUnit === "btc" ? "BTC" : "sat"}
69        </span>
70      ) : null}
71    </span>
72  );
73}