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,