From 632e51a4e1e71d65a72125b2126bcd61d091179d Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 30 Oct 2024 14:14:23 +0100
Subject: [PATCH] Show precise balance in chart tooltip

---
 .changelog/1600.bugfix.md                                 | 1 +
 src/app/components/charts/Tooltip.tsx                     | 5 ++---
 .../ConsensusAccountDetailsPage/BalanceDistribution.tsx   | 8 ++++++--
 .../ValidatorDetailsPage/BalanceDistributionCard.tsx      | 7 +++++--
 4 files changed, 14 insertions(+), 7 deletions(-)
 create mode 100644 .changelog/1600.bugfix.md

diff --git a/.changelog/1600.bugfix.md b/.changelog/1600.bugfix.md
new file mode 100644
index 000000000..7a7509129
--- /dev/null
+++ b/.changelog/1600.bugfix.md
@@ -0,0 +1 @@
+Show precise balance in chart tooltip
diff --git a/src/app/components/charts/Tooltip.tsx b/src/app/components/charts/Tooltip.tsx
index 816d53348..fda25f476 100644
--- a/src/app/components/charts/Tooltip.tsx
+++ b/src/app/components/charts/Tooltip.tsx
@@ -17,7 +17,7 @@ export const StyledPaper = styled(Paper)(({ theme }) => ({
 
 export type Formatters = {
   formatters?: {
-    data?: (value: number) => string
+    data?: (value: number, payload?: { [key: string]: string | number }) => string
     label?: (value: string) => string
   }
 }
@@ -36,7 +36,6 @@ export const TooltipContent = ({
   if (!active || !payload || !payload.length) {
     return null
   }
-
   const { [payload[0].dataKey!]: value, ...rest } = payload[0].payload
   const labelKey = dataLabelKey || Object.keys(rest)[0]
 
@@ -46,7 +45,7 @@ export const TooltipContent = ({
         {formatters?.label ? formatters.label(payload[0].payload[labelKey]) : payload[0].payload[labelKey]}
       </Typography>
       <Typography paragraph={false} sx={{ fontSize: 12, fontWeight: 600 }}>
-        {formatters?.data ? formatters.data(payload[0].value!) : payload[0].value}
+        {formatters?.data ? formatters.data(payload[0].value!, payload[0].payload.payload) : payload[0].value}
       </Typography>
     </StyledPaper>
   )
diff --git a/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx b/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
index fe449c1c2..47fc9ebe1 100644
--- a/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
+++ b/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
@@ -53,17 +53,21 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
     return <ConsensusAccountCardEmptyState label={t('account.noBalances')} />
   }
 
+  // value props have rounding issues. Avoid displaying in text, but they are fine for visualization
   const data = [
     {
       label: t('account.available'),
+      preciseValue: account.available,
       value: Number(account.available),
     },
     {
       label: t('common.staked'),
+      preciseValue: account.delegations_balance,
       value: Number(account.delegations_balance),
     },
     {
       label: t('account.debonding'),
+      preciseValue: account.debonding_delegations_balance,
       value: Number(account.debonding_delegations_balance),
     },
   ]
@@ -88,9 +92,9 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
           data={data}
           dataKey="value"
           formatters={{
-            data: (value: number) =>
+            data: (value, payload) =>
               t('common.valueInToken', {
-                ...getPreciseNumberFormat(value.toString()),
+                ...getPreciseNumberFormat(String(payload!.preciseValue)),
                 ticker: account.ticker,
               }),
             label: (label: string) => label,
diff --git a/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx b/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx
index 761bfd81a..9fc77ab21 100644
--- a/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx
+++ b/src/app/pages/ValidatorDetailsPage/BalanceDistributionCard.tsx
@@ -20,13 +20,16 @@ function chartData(t: TFunction, validator: Validator | undefined) {
     return []
   }
 
+  // value props have rounding issues. Avoid displaying in text, but they are fine for visualization
   return [
     {
       label: t('validator.self'),
+      preciseValue: validator.escrow.self_delegation_balance,
       value: Number(validator.escrow.self_delegation_balance),
     },
     {
       label: t('validator.others'),
+      preciseValue: validator.escrow.self_delegation_balance,
       value: Number(validator.escrow.otherBalance),
     },
   ]
@@ -59,9 +62,9 @@ export const BalanceDistributionCard: FC<BalanceDistributionCardProps> = ({ vali
           data={chartData(t, validator)}
           dataKey="value"
           formatters={{
-            data: (value: number) =>
+            data: (value, payload) =>
               t('common.valueInToken', {
-                ...getPreciseNumberFormat(value.toString()),
+                ...getPreciseNumberFormat(String(payload!.preciseValue)),
                 ticker: validator.ticker,
               }),
             label: (label: string) => label,