dApp: Tooltip updates

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
 }

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -14,10 +14,11 @@ import {
 } from "@chakra-ui/react"
 import Countdown from "#/components/shared/Countdown"
 import { logPromiseFailure, numberToLocaleString } from "#/utils"
-import { useAcrePoints } from "#/hooks"
+import { useAcrePoints, useWallet } from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
 import { IconInfoCircle } from "@tabler/icons-react"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import InfoTooltip from "#/components/shared/InfoTooltip"
 
 export default function AcrePointsCard(props: CardProps) {
   const {
@@ -29,6 +30,9 @@ export default function AcrePointsCard(props: CardProps) {
     updatePointsData,
     isCalculationInProgress,
   } = useAcrePoints()
+  const { address } = useWallet()
+
+  const isWalletConnected = !!address
 
   const formattedTotalPointsAmount = numberToLocaleString(totalBalance)
   const formattedClaimablePointsAmount = numberToLocaleString(claimableBalance)
@@ -47,10 +51,19 @@ export default function AcrePointsCard(props: CardProps) {
       py={5}
       {...props}
     >
-      <CardHeader p={0} mb={2}>
+      <CardHeader p={0} mb={2} as={HStack} justify="space-between">
         <TextMd fontWeight="bold" color="grey.700">
           Your Acre points balance
         </TextMd>
+
+        <InfoTooltip
+          label={
+            isWalletConnected
+              ? "Your current balance of Acre points collected so far. New points drop daily and are ready to be claimed. Unclaimed points roll over to the next day."
+              : "Total points distributed to Acre users so far. New points drop daily and can be claimed in each user's dashboard."
+          }
+          w={56}
+        />
       </CardHeader>
 
       <CardBody p={0}>

dapp/src/pages/DashboardPage/BeehiveCard.tsx

@@ -33,13 +33,18 @@ export default function BeehiveCard(props: CardProps) {
 
   return (
     <Card p={4} {...props}>
-      <CardHeader p={0} as={Flex} alignItems="center" gap={2}>
+      <CardHeader
+        p={0}
+        as={Flex}
+        alignItems="center"
+        justify="space-between"
+        gap={2}
+      >
         <TextMd fontWeight="bold" color="grey.700">
           L2 Rewards
         </TextMd>
         <InfoTooltip
-          label="Earn rewards from our L2 partners within the Acre Beehive. The rewards are calculated based on amount and time staked. No hassle and automatic participation across each of our launch partners."
-          color="gold.300"
+          label="Acre Beehive automatically collects rewards from our partner projects. Rewards are dropped daily, and your share is calculated based on your deposit amount and how long you HODL."
           w={56}
         />
       </CardHeader>

dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx

@@ -51,6 +51,7 @@ export default function TransactionTable() {
                       amount={activity.amount}
                       currency="bitcoin"
                       withDots
+                      withTooltip
                     />
                   </Flex>
                   <Flex justifyContent="space-between">