Refactor useActivities hook

dapp/src/hooks/store/useActivities.ts

@@ -1,13 +1,9 @@
-import { selectActivities } from "#/store/wallet"
+import { selectActivities, selectHasPendingActivities } from "#/store/wallet"
 import { useAppSelector } from "./useAppSelector"
 
 export default function useActivities() {
-  const data = useAppSelector(selectActivities)
-  const status: "pending" | "idle" = data.some(
-    (activity) => activity.status === "pending",
-  )
-    ? "pending"
-    : "idle"
+  const activities = useAppSelector(selectActivities)
+  const hasPendingActivities = useAppSelector(selectHasPendingActivities)
 
-  return { data, status }
+  return { activities, hasPendingActivities }
 }

dapp/src/pages/DashboardPage/BeehiveCard.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import { MezoSignIcon } from "#/assets/icons"
 import beehiveIllustrationSrc from "#/assets/images/beehive-illustration.svg"
 import TooltipIcon from "#/components/shared/TooltipIcon"

dapp/src/pages/DashboardPage/PositionDetails.tsx

@@ -15,16 +15,15 @@ import {
   ButtonProps,
   Flex,
   HStack,
-  Icon,
   // Tag,
   VStack,
 } from "@chakra-ui/react"
 import ArrivingSoonTooltip from "#/components/ArrivingSoonTooltip"
 import UserDataSkeleton from "#/components/shared/UserDataSkeleton"
 import { featureFlags } from "#/constants"
 import { TextMd } from "#/components/shared/Typography"
-import Tooltip from "#/components/shared/Tooltip"
 import { IconClockHour5Filled } from "@tabler/icons-react"
+import TooltipIcon from "#/components/shared/TooltipIcon"
 import AcreTVLMessage from "./AcreTVLMessage"
 
 const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED
@@ -39,9 +38,6 @@ const buttonStyles: ButtonProps = {
   h: "auto",
 }
 
-// TODO: Define in the new color palette
-const TOOLTIP_ICON_COLOR = "#3A3328"
-
 export default function PositionDetails() {
   const { data } = useBitcoinPosition()
   const bitcoinAmount = data?.estimatedBitcoinBalance ?? 0n
@@ -58,25 +54,20 @@ export default function PositionDetails() {
   const isDisabledForMobileMode =
     isMobileMode && !featureFlags.MOBILE_MODE_ENABLED
 
-  const activities = useActivities()
+  const { hasPendingActivities } = useActivities()
 
   return (
     <Flex w="100%" flexDirection="column" gap={5}>
       <VStack alignItems="start" spacing={0}>
         {/* TODO: Component should be moved to `CardHeader` */}
         <HStack>
           <TextMd>Your Acre balance</TextMd>
-          {activities.status === "pending" && (
-            <Tooltip
+          {!hasPendingActivities && (
+            <TooltipIcon
+              icon={IconClockHour5Filled}
               label="Your balance will update once the pending deposit is finalized."
               placement="right"
-            >
-              <Icon
-                as={IconClockHour5Filled}
-                color={TOOLTIP_ICON_COLOR}
-                opacity={0.25}
-              />
-            </Tooltip>
+            />
           )}
           {/* TODO: Uncomment when position will be implemented */}
           {/* {positionPercentage && (

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

@@ -20,15 +20,11 @@ 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 (
-    <Pagination
-      data={activities.data}
-      pageSize={isMobileMode ? 5 : 10}
-      spacing={6}
-    >
+    <Pagination data={activities} pageSize={isMobileMode ? 5 : 10} spacing={6}>
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
           pageData.map((activity) => (

dapp/src/store/wallet/walletSelector.ts

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