diff --git a/nym-wallet/src/pages/delegation/index.tsx b/nym-wallet/src/pages/delegation/index.tsx index f2a668e59e..5f581dd967 100644 --- a/nym-wallet/src/pages/delegation/index.tsx +++ b/nym-wallet/src/pages/delegation/index.tsx @@ -18,7 +18,7 @@ import { DelegationListItemActions } from '../../components/Delegation/Delegatio import { RedeemModal } from '../../components/Rewards/RedeemModal'; import { DelegationModal, DelegationModalProps } from '../../components/Delegation/DelegationModal'; import { backDropStyles, modalStyles } from '../../../.storybook/storiesStyles'; -import { toPercentIntegerString } from '../../utils'; +import { toPercentIntegerString, getIntervalAsDate } from 'src/utils'; const storybookStyles = (theme: Theme, isStorybook?: boolean, backdropProps?: object) => isStorybook @@ -36,6 +36,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => { const [confirmationModalProps, setConfirmationModalProps] = useState(); const [currentDelegationListActionItem, setCurrentDelegationListActionItem] = useState(); const [saturationError, setSaturationError] = useState<{ action: 'compound' | 'delegate'; saturation: string }>(); + const [nextEpoch, setNextEpoch] = useState(); const theme = useTheme(); @@ -75,6 +76,15 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => { }; }; + const getNextInterval = async () => { + try { + const { nextEpoch } = await getIntervalAsDate(); + setNextEpoch(nextEpoch); + } catch { + setNextEpoch(Error()); + } + }; + // Refresh the rewards and delegations periodically when page is mounted useEffect(() => { const timer = setInterval(refresh, 1 * 60 * 1000); // every 1 minute @@ -83,6 +93,7 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => { useEffect(() => { refresh(); + getNextInterval(); }, [clientDetails, confirmationModalProps]); const handleDelegationItemActionClick = (item: DelegationWithEverything, action: DelegationListItemActions) => { @@ -332,35 +343,42 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => { <> - - - Delegations - - {!!delegations?.length && ( - - )} - + + Delegations + {!!delegations?.length && ( - - - + + {!!delegations?.length && ( + + )} + + + + + {nextEpoch instanceof Error ? null : ( + + Next epoch starts at {nextEpoch} + + )} + )} {delegationsComponent(delegations)}