Implement CurrencyBalance tooltip

thesis · Nov 4, 2024 · de3a485 · de3a485
1 parent 5b24de4
commit de3a485
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/dapp/src/components/shared/CurrencyBalance/index.tsx b/dapp/src/components/shared/CurrencyBalance/index.tsx
@@ -4,8 +4,10 @@ import {
   useMultiStyleConfig,
   TextProps,
   ResponsiveValue,
+  Tooltip,
 } from "@chakra-ui/react"
 import {
+  bigIntToUserAmount,
   formatTokenAmount,
   getCurrencyByType,
   numberToLocaleString,
@@ -29,6 +31,7 @@ export type CurrencyBalanceProps = {
   withDots?: boolean
   balanceTextProps?: TextProps
   symbolTextProps?: TextProps
+  withTooltip?: boolean
 } & TextProps
 
 export function CurrencyBalance({
@@ -44,6 +47,7 @@ export function CurrencyBalance({
   as,
   balanceTextProps,
   symbolTextProps,
+  withTooltip = false,
   ...textProps
 }: CurrencyBalanceProps) {
   const styles = useMultiStyleConfig("CurrencyBalance", {
@@ -67,7 +71,7 @@ export function CurrencyBalance({
     return numberToLocaleString(value, desiredDecimals)
   }, [amount, decimals, desiredDecimals, shouldBeFormatted, withRoundUp])
 
-  return (
+  const content = (
     <Box as={as} __css={styles.container}>
       <Box
         as="span"
@@ -76,11 +80,23 @@ export function CurrencyBalance({
         {...balanceTextProps}
       >
         {balance}
-        {withDots && ".."}
+        {withDots && "..."}
       </Box>
       <Box as="span" __css={styles.symbol} {...textProps} {...symbolTextProps}>
         {symbol}
       </Box>
     </Box>
   )
+
+  if (withTooltip) {
+    const tooltipLabel = `${bigIntToUserAmount(BigInt(amount ?? 0), decimals, decimals)} ${symbol}`
+
+    return (
+      <Tooltip label={tooltipLabel} shouldWrapChildren>
+        {content}
+      </Tooltip>
+    )
+  }
+
+  return content
 }
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -1,5 +1,13 @@
 import React from "react"
-import { HStack, Card, CardBody, Box, Flex, Icon } from "@chakra-ui/react"
+import {
+  HStack,
+  Card,
+  CardBody,
+  Box,
+  Flex,
+  Icon,
+  Tooltip,
+} from "@chakra-ui/react"
 import {
   Pagination,
   PaginationButton,
@@ -9,7 +17,12 @@ import {
 } from "#/components/shared/Pagination"
 import { TextSm } from "#/components/shared/Typography"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
-import { displayBlockTimestamp, getActivityTimestamp } from "#/utils"
+import {
+  bigIntToUserAmount,
+  displayBlockTimestamp,
+  getActivityTimestamp,
+  getCurrencyByType,
+} from "#/utils"
 import { Activity } from "#/types"
 import BlockExplorerLink from "#/components/shared/BlockExplorerLink"
 import { IconArrowUpRight } from "@tabler/icons-react"
@@ -22,6 +35,8 @@ const BLOCK_EXPLORER_CELL_MIN_WIDTH = 16
 export default function TransactionTable() {
   const activities = useActivities()
 
+  const currency = getCurrencyByType("bitcoin")
+
   return (
     <Pagination data={activities} pageSize={10} spacing={6}>
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
@@ -51,6 +66,7 @@ export default function TransactionTable() {
                       amount={activity.amount}
                       currency="bitcoin"
                       withDots
+                      withTooltip
                     />
                   </Flex>
                   <Flex justifyContent="space-between">