diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx index 30e12dc78..3f86de165 100644 --- a/dapp/src/components/shared/CurrencyBalance/index.tsx +++ b/dapp/src/components/shared/CurrencyBalance/index.tsx @@ -7,6 +7,7 @@ import { Tooltip, } from "@chakra-ui/react" import { + fixedPointNumberToString, formatTokenAmount, getCurrencyByType, numberToLocaleString, @@ -60,16 +61,24 @@ export function CurrencyBalance({ decimals, desiredDecimals: currencyDesiredDecimals, } = getCurrencyByType(currency) + const desiredDecimals = customDesiredDecimals ?? currencyDesiredDecimals const getBalance = useCallback( - (desiredDecimals: number) => { - const value = amount ?? 0 + (options: { withFullPrecision?: boolean } = {}) => { + const { withFullPrecision } = options + + const value = amount ?? 0n + + if (withFullPrecision) { + return fixedPointNumberToString(BigInt(value), decimals, withRoundUp) + } + if (shouldBeFormatted || typeof value === "bigint") return formatTokenAmount(value, decimals, desiredDecimals, withRoundUp) return numberToLocaleString(value, desiredDecimals) }, - [amount, decimals, shouldBeFormatted, withRoundUp], + [amount, decimals, desiredDecimals, shouldBeFormatted, withRoundUp], ) const content = ( @@ -80,7 +89,7 @@ export function CurrencyBalance({ {...textProps} {...balanceTextProps} > - {getBalance(customDesiredDecimals ?? currencyDesiredDecimals)} + {getBalance()} {withDots && "..."} @@ -90,8 +99,7 @@ export function CurrencyBalance({ ) if (withTooltip) { - const fullPrecisionDecimals = (amount ?? 0).toString().length - const tooltipLabel = `${getBalance(fullPrecisionDecimals)} ${symbol}` + const tooltipLabel = `${getBalance({ withFullPrecision: true })} ${symbol}` return ( diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx index 71a4d1a89..7da2295b8 100644 --- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx +++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx @@ -16,11 +16,17 @@ import { IconArrowUpRight } from "@tabler/icons-react" import { useActivities } from "#/hooks" import { semanticTokens } from "#/theme/utils" import EstimatedDuration from "./EstimatedDuration" +import { createActivity } from "#/tests/factories" const BLOCK_EXPLORER_CELL_MIN_WIDTH = 16 export default function TransactionTable() { - const activities = useActivities() + // const activities = useActivities() + const activities = [ + createActivity({ + amount: 122200000n, + }), + ] return (