FormattedFiatAmount.tsx raw

   1  import { Skeleton } from "src/components/ui/skeleton";
   2  import { useBitcoinRate } from "src/hooks/useBitcoinRate";
   3  import { useInfo } from "src/hooks/useInfo";
   4  import { cn } from "src/lib/utils";
   5  
   6  type FormattedFiatAmountProps = {
   7    amountSat: number;
   8    className?: string;
   9    showApprox?: boolean;
  10  };
  11  
  12  export default function FormattedFiatAmount({
  13    amountSat,
  14    className,
  15    showApprox,
  16  }: FormattedFiatAmountProps) {
  17    const { data: info } = useInfo();
  18    const { data: bitcoinRate, error: bitcoinRateError } = useBitcoinRate(
  19      info?.currency
  20    );
  21  
  22    if (info?.currency === "SATS" || bitcoinRateError) {
  23      return null;
  24    }
  25  
  26    return (
  27      <div className={cn("text-sm text-muted-foreground", className)}>
  28        {showApprox && bitcoinRate && "~"}
  29        {!bitcoinRate ? (
  30          <Skeleton className="w-20">&nbsp;</Skeleton>
  31        ) : (
  32          new Intl.NumberFormat("en-US", {
  33            style: "currency",
  34            currency: info?.currency || "usd",
  35          }).format((amountSat / 100_000_000) * bitcoinRate.rate_float)
  36        )}
  37      </div>
  38    );
  39  }
  40