Fix/yoext 784/nan days staking

packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/EpochProgressCard.js

@@ -7,8 +7,8 @@ type Props = {|
   +percentage: number,
   +days: string,
   +currentEpoch: number,
-  +startEpochDate: string,
-  +endEpochDate: string,
+  +startEpochDate: string | Date,
+  +endEpochDate: string | Date,
 |};
 
 export function EpochProgressCard({
@@ -50,7 +50,7 @@ const Title = ({ label, value }: TitleProps): Node => {
 
 type InfoColumnProps = {|
   +label: string,
-  +value: string | number,
+  +value: string | number | Date,
 |};
 const LabelWithValue = ({ label, value }: InfoColumnProps): Node => {
   return (

packages/yoroi-extension/app/components/wallet/staking/dashboard-revamp/EpochProgressWrapper.js

@@ -1,19 +1,20 @@
 // @flow
 import type { ComponentType, Node } from 'react';
+import type { $npm$ReactIntl$IntlShape } from 'react-intl';
 import { Box, styled } from '@mui/system';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { injectIntl } from 'react-intl';
-import type { $npm$ReactIntl$IntlShape } from 'react-intl';
-import globalMessages from '../../../../i18n/global-messages';
 import { EpochProgressCard } from './EpochProgressCard';
+import globalMessages from '../../../../i18n/global-messages';
 import moment from 'moment';
 
 type Props = {|
   epochProgress: {|
     currentEpoch: number,
-    startEpochDate: string,
-    endEpochDate: string,
+    startEpochDate: string | Date,
+    endEpochDate: string | Date,
+    endEpochDateTime: Date,
     percentage: number,
   |},
 |};
@@ -23,6 +24,8 @@ type Intl = {|
 |};
 
 function EpochProgressWrapper({ epochProgress, intl }: Props & Intl): Node {
+  const days = moment(epochProgress.endEpochDateTime).diff(moment(), 'days');
+
   return (
     <Card>
       <Box
@@ -38,7 +41,7 @@ function EpochProgressWrapper({ epochProgress, intl }: Props & Intl): Node {
       <Box sx={{ padding: '24px' }}>
         <EpochProgressCard
           percentage={epochProgress.percentage}
-          days={moment(epochProgress.endEpochDate).diff(moment(), 'days')}
+          days={days}
           currentEpoch={epochProgress.currentEpoch}
           startEpochDate={epochProgress.startEpochDate}
           endEpochDate={epochProgress.endEpochDate}

packages/yoroi-extension/app/containers/wallet/staking/StakingPageContent.js

@@ -261,7 +261,7 @@ class StakingPageContent extends Component<AllProps> {
     const currentEpoch = currTimeRequests.currentEpoch;
     const epochLength = getEpochLength();
 
-    const getDateFromEpoch = epoch => {
+    const getDateFromEpoch = (epoch, returnEpochTime = false) => {
       const epochTime = toRealTime({
         absoluteSlotNum: toAbsoluteSlot({
           epoch,
@@ -270,11 +270,15 @@ class StakingPageContent extends Component<AllProps> {
         }),
         timeSinceGenesisFunc: timeSinceGenesis,
       });
+
+      if (returnEpochTime) return epochTime;
+
       const epochMoment = moment(epochTime).format('lll');
       return epochMoment;
     };
 
     const endEpochDate = getDateFromEpoch(currentEpoch);
+    const endEpochDateTime = getDateFromEpoch(currentEpoch, true);
     const previousEpochDate = getDateFromEpoch(currentEpoch - 1);
 
     return (
@@ -283,6 +287,7 @@ class StakingPageContent extends Component<AllProps> {
           startEpochDate: previousEpochDate,
           currentEpoch,
           endEpochDate,
+          endEpochDateTime,
           percentage: Math.floor((100 * currTimeRequests.currentSlot) / epochLength),
         }}
       />