diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 2fc4dcc7b..25e0bd84b 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/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({
System status
{/* TODO: ADD a tooltip */}
- {/* */}
+ {/* */}
Partial Outage
diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx
index d976bf810..4c630bbbd 100644
--- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltip.tsx
+++ b/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 (
-
diff --git a/dapp/src/components/shared/Tooltip.tsx b/dapp/src/components/shared/Tooltip.tsx
index 924e0e950..6c6944593 100644
--- a/dapp/src/components/shared/Tooltip.tsx
+++ b/dapp/src/components/shared/Tooltip.tsx
@@ -1,5 +1,5 @@
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
@@ -7,13 +7,13 @@ export default function Tooltip(props: TooltipProps) {
return (
- setIsOpen(true)}
onMouseLeave={() => setIsOpen(false)}
onClick={() => setIsOpen(true)}
>
{children}
-
+
)
}
diff --git a/dapp/src/components/shared/InfoTooltip.tsx b/dapp/src/components/shared/TooltipIcon.tsx
similarity index 50%
rename from dapp/src/components/shared/InfoTooltip.tsx
rename to dapp/src/components/shared/TooltipIcon.tsx
index a9394b460..1ef97745f 100644
--- a/dapp/src/components/shared/InfoTooltip.tsx
+++ b/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) {
+type TooltipIconProps = Omit & {
+ icon?: TablerIcon
+}
+
+export default function TooltipIcon(props: TooltipIconProps) {
+ const { icon, ...restProps } = props
return (
-
+
-
Your drop is being prepared.
-
Additional rewards
-
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index db3dbdb06..d1839940a 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/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 (
{/* TODO: Component should be moved to `CardHeader` */}
-
- Your Acre balance
+
+ Your Acre balance
+ {hasPendingActivities && (
+
+ )}
{/* TODO: Uncomment when position will be implemented */}
{/* {positionPercentage && (
)} */}
-
+
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,