From b900df9f99536bfd8e1e9548059d497af03c26e3 Mon Sep 17 00:00:00 2001 From: Mrwicks00 Date: Sat, 30 May 2026 16:39:52 +0100 Subject: [PATCH] fix(frontend): correct formatTokenAmount in IncomingStreams to use Intl.NumberFormat MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The value passed to formatTokenAmount is already a human-scaled token amount (stroops divided by 1e7 in the dashboard mapper). The previous implementation incorrectly passed it through formatAmount(BigInt(Math.floor(value)), 7), re-interpreting it as raw base units and dividing by 1e7 a second time. This caused the Deposited, Withdrawn, and Claimable columns to display wildly wrong (tiny) values — e.g. 10.5 XLM was rendered as 0.0000010. Fix: format the human number directly via Intl.NumberFormat with up to 7 fraction digits, consistent with IncomingStreamCard. Remove the now-unused formatAmount import. Closes #575 --- frontend/src/components/IncomingStreams.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/IncomingStreams.tsx b/frontend/src/components/IncomingStreams.tsx index 982e8dc2..148f341f 100644 --- a/frontend/src/components/IncomingStreams.tsx +++ b/frontend/src/components/IncomingStreams.tsx @@ -4,7 +4,7 @@ import React, { useState } from 'react'; import type { Stream } from '@/lib/dashboard'; import { useStreamingAmount } from '@/hooks/useStreamingAmount'; import toast from 'react-hot-toast'; -import { formatAmount } from '@/lib/amount'; + interface IncomingStreamsProps { streams: Stream[]; @@ -12,9 +12,20 @@ interface IncomingStreamsProps { withdrawingStreamId?: string | null; } -function formatTokenAmount(value: number, decimals: number = 7): string { +/** + * Format an already-human-scaled token amount (e.g. 10.5) for display. + * + * Values coming from the Stream interface have already been divided by 1e7 + * (stroops → token units) by the dashboard mapper, so we must NOT re-scale + * them through formatAmount. Instead we format the number directly using + * Intl.NumberFormat, consistent with IncomingStreamCard. + */ +function formatTokenAmount(value: number, maximumFractionDigits = 7): string { if (!Number.isFinite(value)) return '0.0000000'; - return formatAmount(BigInt(Math.floor(value)), decimals); + return new Intl.NumberFormat('en-US', { + minimumFractionDigits: 0, + maximumFractionDigits, + }).format(value); } const ClaimableAmount: React.FC<{ stream: Stream }> = ({ stream }) => {