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,