counterweight
e8d0ee2eca
Replace 'import React from "react"' with direct imports of CSSProperties and ChangeEvent. This eliminates unused imports and follows modern React patterns where the namespace import is not required for JSX (React 17+).
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { CSSProperties } from "react";
|
|
|
|
/**
|
|
* Format satoshi amount with styled components.
|
|
* Leading zeros are subtle, main digits are prominent.
|
|
* e.g., 1876088 -> "₿ 0.01" (subtle) + "876 088 sats" (prominent)
|
|
*/
|
|
export function SatsDisplay({ sats }: { sats: number }) {
|
|
const btc = sats / 100_000_000;
|
|
const btcStr = btc.toFixed(8);
|
|
const [whole, decimal] = btcStr.split(".");
|
|
|
|
// Group decimal into chunks: first 2, then two groups of 3
|
|
const part1 = decimal.slice(0, 2);
|
|
const part2 = decimal.slice(2, 5);
|
|
const part3 = decimal.slice(5, 8);
|
|
|
|
// Find where meaningful digits start (first non-zero after decimal)
|
|
const fullDecimal = part1 + part2 + part3;
|
|
let firstNonZero = fullDecimal.length;
|
|
for (let i = 0; i < fullDecimal.length; i++) {
|
|
if (fullDecimal[i] !== "0") {
|
|
firstNonZero = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
// Build the display with subtle leading zeros and prominent digits
|
|
const subtleStyle: CSSProperties = {
|
|
opacity: 0.45,
|
|
fontWeight: 400,
|
|
};
|
|
|
|
// Determine which parts are subtle vs prominent
|
|
const renderPart = (part: string, startIdx: number) => {
|
|
return part.split("").map((char, i) => {
|
|
const globalIdx = startIdx + i;
|
|
const isSubtle = globalIdx < firstNonZero;
|
|
return (
|
|
<span key={globalIdx} style={isSubtle ? subtleStyle : undefined}>
|
|
{char}
|
|
</span>
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<span style={{ fontFamily: "'DM Mono', monospace" }}>
|
|
<span style={subtleStyle}>₿</span>
|
|
<span style={subtleStyle}> {whole}.</span>
|
|
{renderPart(part1, 0)}
|
|
<span> </span>
|
|
{renderPart(part2, 2)}
|
|
<span> </span>
|
|
{renderPart(part3, 5)}
|
|
<span> sats</span>
|
|
</span>
|
|
);
|
|
}
|