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]}
- {formatters?.data ? formatters.data(payload[0].value!) : payload[0].value}
+ {formatters?.data ? formatters.data(payload[0].value!, payload[0].payload.payload) : payload[0].value}
)
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 = ({ accou
return
}
+ // 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 = ({ 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 = ({ 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,