Refactor tooltip balance value

thesis · Nov 6, 2024 · 9d13616 · 9d13616
1 parent 0fe9988
commit 9d13616
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git 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 && "..."}
       </Box>
       <Box as="span" __css={styles.symbol} {...textProps} {...symbolTextProps}>
@@ -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 (
       <Tooltip label={tooltipLabel} shouldWrapChildren>

diff --git 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 (
     <Pagination data={activities} pageSize={10} spacing={6}>