dApp: Your balance - tooltip for in progress deposits (#908)

Closes: AENG-47

### Changes
- `useActivities` hook: added status whether at least one of activity is
pending
- `PositionDetails` component: depending on the activities status
conditionally rendered the tooltip
- `Tooltip` component: added `wrapperProps` prop to provide more control
over styling of the component

dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx

@@ -19,7 +19,7 @@ import {
   IconReload,
   IconServerBolt,
 } from "@tabler/icons-react"
-// import InfoTooltip from "#/components/shared/InfoTooltip"
+// import TooltipIcon from "#/components/shared/TooltipIcon"
 
 export default function ServerErrorModal({
   isLoading,
@@ -66,7 +66,7 @@ export default function ServerErrorModal({
           <HStack>
             <TextMd fontWeight="bold">System status</TextMd>
             {/* TODO: ADD a tooltip */}
-            {/* <InfoTooltip label="Tooltip text" placement="top" /> */}
+            {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
           <TextMd color="red.400">Partial Outage</TextMd>
         </Flex>

dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { List } from "@chakra-ui/react"
-import InfoTooltip from "#/components/shared/InfoTooltip"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import { FeesTooltipItem } from "./FeesTooltipItem"
 import { Fee as AcreFee } from "../../../types/fee"
 
@@ -21,7 +21,7 @@ const mapFeeToLabel = (feeId: keyof AcreFee) => {
 
 export function FeesTooltip({ fees }: Props) {
   return (
-    <InfoTooltip
+    <TooltipIcon
       placement="right"
       label={
         <List spacing={0.5} minW={60}>

dapp/src/components/shared/Tooltip.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from "react"
-import { Box, Tooltip as ChakraTooltip, TooltipProps } from "@chakra-ui/react"
+import { Tooltip as ChakraTooltip, TooltipProps, Flex } from "@chakra-ui/react"
 
 export default function Tooltip(props: TooltipProps) {
   const { children, ...restProps } = props
   const [isOpen, setIsOpen] = useState(false)
 
   return (
     <ChakraTooltip isOpen={isOpen} {...restProps}>
-      <Box
+      <Flex
         onMouseEnter={() => setIsOpen(true)}
         onMouseLeave={() => setIsOpen(false)}
         onClick={() => setIsOpen(true)}
       >
         {children}
-      </Box>
+      </Flex>
     </ChakraTooltip>
   )
 }

dapp/src/components/shared/InfoTooltip.tsx → dapp/src/components/shared/TooltipIcon.tsx

@@ -1,16 +1,21 @@
 import React from "react"
-import { IconInfoCircleFilled } from "@tabler/icons-react"
+import { IconInfoCircleFilled, TablerIcon } from "@tabler/icons-react"
 import { Icon, TooltipProps } from "@chakra-ui/react"
 import Tooltip from "./Tooltip"
 
 // TODO: Define in the new color palette
 const ICON_COLOR = "#3A3328"
 
-export default function InfoTooltip(props: Omit<TooltipProps, "children">) {
+type TooltipIconProps = Omit<TooltipProps, "children"> & {
+  icon?: TablerIcon
+}
+
+export default function TooltipIcon(props: TooltipIconProps) {
+  const { icon, ...restProps } = props
   return (
-    <Tooltip placement="bottom" {...props}>
+    <Tooltip placement="bottom" {...restProps}>
       <Icon
-        as={IconInfoCircleFilled}
+        as={icon ?? IconInfoCircleFilled}
         boxSize="1.125rem" // 18px
         cursor="pointer"
         color={ICON_COLOR}

dapp/src/hooks/store/useActivities.ts

@@ -1,6 +1,9 @@
-import { selectActivities } from "#/store/wallet"
+import { selectActivities, selectHasPendingActivities } from "#/store/wallet"
 import { useAppSelector } from "./useAppSelector"
 
 export default function useActivities() {
-  return useAppSelector(selectActivities)
+  const activities = useAppSelector(selectActivities)
+  const hasPendingActivities = useAppSelector(selectHasPendingActivities)
+
+  return { activities, hasPendingActivities }
 }

dapp/src/pages/DashboardPage/AcrePointsCard.tsx

@@ -15,7 +15,7 @@ import { logPromiseFailure, numberToLocaleString } from "#/utils"
 import { useAcrePoints, useWallet } from "#/hooks"
 import Spinner from "#/components/shared/Spinner"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import InfoTooltip from "#/components/shared/InfoTooltip"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import useDebounce from "#/hooks/useDebounce"
 import { ONE_SEC_IN_MILLISECONDS } from "#/constants"
 import acrePointsIllustrationSrc from "#/assets/images/acre-points-illustration.png"
@@ -61,7 +61,7 @@ export default function AcrePointsCard(props: CardProps) {
           {isConnected ? "Your" : "Total"} Acre points
         </TextMd>
 
-        <InfoTooltip
+        <TooltipIcon
           label={
             isConnected
               ? "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."
@@ -94,7 +94,7 @@ export default function AcrePointsCard(props: CardProps) {
                   <HStack spacing={0}>
                     <Spinner mr={3} size="sm" />
                     <TextMd>Your drop is being prepared.</TextMd>
-                    <InfoTooltip
+                    <TooltipIcon
                       label={`
                         We need some time to calculate your points. It may take up to 30 minutes. 
                         ${claimableBalance ? "You can still claim points from previous drops." : ""}

dapp/src/pages/DashboardPage/BeehiveCard.tsx

@@ -1,5 +1,12 @@
 import React from "react"
+import { MezoSignIcon } from "#/assets/icons"
+import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import { H6, TextMd, TextSm } from "#/components/shared/Typography"
+import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
+import { useMats, useModal } from "#/hooks"
+import { MODAL_TYPES } from "#/types"
+import { numberToLocaleString } from "#/utils"
 import {
   Box,
   Button,
@@ -12,13 +19,6 @@ import {
   Image,
   VStack,
 } from "@chakra-ui/react"
-import { MezoSignIcon } from "#/assets/icons"
-import { useMats, useModal } from "#/hooks"
-import { MODAL_TYPES } from "#/types"
-import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg"
-import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
-import { numberToLocaleString } from "#/utils"
-import InfoTooltip from "#/components/shared/InfoTooltip"
 
 export default function BeehiveCard(props: CardProps) {
   const { openModal } = useModal()
@@ -32,7 +32,7 @@ export default function BeehiveCard(props: CardProps) {
     <Card {...props}>
       <CardHeader as={Flex} alignItems="center" justify="space-between" gap={2}>
         <TextMd>Additional rewards</TextMd>
-        <InfoTooltip
+        <TooltipIcon
           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}
         />

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -7,6 +7,7 @@ import {
   useStatistics,
   useWallet,
   useMobileMode,
+  useActivities,
 } from "#/hooks"
 import { ACTION_FLOW_TYPES } from "#/types"
 import {
@@ -21,6 +22,8 @@ import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { featureFlags } from "#/constants"
 import { TextMd } from "#/components/shared/Typography"
+import { IconClockHour5Filled } from "@tabler/icons-react"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
@@ -51,12 +54,21 @@ export default function PositionDetails() {
   const isDisabledForMobileMode =
     isMobileMode && !featureFlags.MOBILE_MODE_ENABLED
 
+  const { hasPendingActivities } = useActivities()
+
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
       <VStack alignItems="start" spacing={0}>
         {/* TODO: Component should be moved to `CardHeader` */}
-        <TextMd>
-          Your Acre balance
+        <HStack>
+          <TextMd>Your Acre balance</TextMd>
+          {hasPendingActivities && (
+            <TooltipIcon
+              icon={IconClockHour5Filled}
+              label="Your balance will update once the pending deposit is finalized."
+              placement="right"
+            />
+          )}
           {/* TODO: Uncomment when position will be implemented */}
           {/* {positionPercentage && (
             <Tag
@@ -73,7 +85,7 @@ export default function PositionDetails() {
               Top {positionPercentage}%
             </Tag>
           )} */}
-        </TextMd>
+        </HStack>
         <UserDataSkeleton>
           <VStack alignItems="start" spacing={0}>
             <CurrencyBalanceWithConversion

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

@@ -20,7 +20,7 @@ import EstimatedDuration from "./EstimatedDuration"
 const BLOCK_EXPLORER_CELL_MIN_WIDTH = 16
 
 export default function TransactionTable() {
-  const activities = useActivities()
+  const { activities } = useActivities()
   const isMobileMode = useMobileMode()
 
   return (

dapp/src/store/wallet/walletSelector.ts

@@ -13,6 +13,15 @@ export const selectActivities = createSelector(
   (activities) => sortActivitiesByTimestamp(activities),
 )
 
+export const selectHasPendingActivities = createSelector(
+  (state: RootState) => state.wallet.activities,
+  (activities) =>
+    activities.some(
+      (activity) =>
+        activity.status === "pending" && activity.type === "deposit",
+    ),
+)
+
 export const selectAllActivitiesCount = createSelector(
   (state: RootState) => state.wallet.activities,
   (activities) => activities.length,