fix: improve timing communication, closes #470

app/pages/stacking/components/next-cycle-info.tsx

@@ -21,7 +21,7 @@ export const NextCycleInfo: FC<NextCycleInfoProps> = ({ timeUntilNextCycle, ...p
     <CalendarIcon display={['none', 'flex']} mr="base" />
     <Flex flexDirection="column" justifyContent="space-evenly">
       <Text display="block" textStyle="body.large.medium" lineHeight="20px">
-        Next cycle starts in {timeUntilNextCycle}
+        Next cycle starts in about {timeUntilNextCycle}
       </Text>
       <Text display="block" textStyle="body.small" color="ink.600" mt="extra-tight">
         Lock your STX for a chance to earn Bitcoin when the next cycle starts

app/pages/stacking/components/stacking-info-card.tsx

@@ -63,7 +63,7 @@ export const StackingInfoCard: FC<StackingInfoCardProps> = props => {
               The duration is an estimation that varies depending on the Bitcoin block time
             </ExplainerTooltip>
           </Flex>
-          <Text textAlign="right">{duration}</Text>
+          <Text textAlign="right">≈{duration}</Text>
         </Flex>
         <Flex justifyContent="space-between" mt="tight">
           <Text textStyle="body.large.medium">Start date</Text>

app/pages/stacking/components/stacking-terms.tsx

@@ -16,7 +16,7 @@ export const StackingTerms: FC<StackingTermsProps> = props => {
           <EncryptionIcon width={['12px', '16px']} />
         </Box>
         <Text>
-          Your STX will be locked for {estimatedDuration}, starting in {timeUntilNextCycle}
+          Your STX will be locked for ≈{estimatedDuration}, starting in about {timeUntilNextCycle}
         </Text>
       </Flex>
       <Flex alignItems="center" mt="base-loose">

app/pages/stacking/stacking.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback } from 'react';
+import React, { FC, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { BigNumber } from 'bignumber.js';
 
@@ -9,7 +9,7 @@ import { RootState } from '@store/index';
 import { selectWalletType } from '@store/keys';
 import { selectActiveNodeApi } from '@store/stacks-node';
 import {
-  selectEstimatedStackingCycleDuration,
+  selectEstimatedStackingDuration,
   selectNextCycleInfo,
   selectPoxInfo,
 } from '@store/stacking';
@@ -53,18 +53,13 @@ export const Stacking: FC = () => {
     (state: RootState) => ({
       walletType: selectWalletType(state),
       activeNode: selectActiveNodeApi(state),
-      stackingCycleDuration: selectEstimatedStackingCycleDuration(state),
+      stackingCycleDuration: selectEstimatedStackingDuration(cycles)(state),
       availableBalance: selectAvailableBalance(state),
       nextCycleInfo: selectNextCycleInfo(state),
       poxInfo: selectPoxInfo(state),
     })
   );
 
-  const calcStackingDuration = useCallback(() => stackingCycleDuration * cycles, [
-    stackingCycleDuration,
-    cycles,
-  ]);
-
   const updateStep = (step: Step, to: StepState) =>
     setStepConfirmation(state => ({ ...state, [step]: to }));
 
@@ -73,8 +68,6 @@ export const Stacking: FC = () => {
   const formComplete =
     [Step.ChooseAmount, Step.ChooseCycles, Step.ChooseBtcAddress].every(isComplete) && !!btcAddress;
 
-  const estimatedStackingDuration = '~' + (calcStackingDuration() / 60 / 60).toString() + ' hours';
-
   const balance = availableBalance === null ? new BigNumber(0) : new BigNumber(availableBalance);
 
   if (nextCycleInfo === null || poxInfo === null) return null;
@@ -89,7 +82,7 @@ export const Stacking: FC = () => {
       balance={amount}
       startDate={nextCycleInfo.nextCycleStartingAt}
       blocksPerCycle={poxInfo.reward_cycle_length}
-      duration={estimatedStackingDuration}
+      duration={stackingCycleDuration}
     />
   );
 
@@ -124,7 +117,7 @@ export const Stacking: FC = () => {
       <ConfirmAndLockStep
         id={Step.ConfirmAndLock}
         formComplete={formComplete}
-        estimatedDuration={estimatedStackingDuration}
+        estimatedDuration={stackingCycleDuration}
         timeUntilNextCycle={nextCycleInfo.formattedTimeToNextCycle}
         onConfirmAndLock={() => setModalOpen(true)}
       />

app/pages/stacking/step/choose-cycles.tsx

@@ -27,7 +27,7 @@ export const ChooseCycleStep: FC<ChooseCycleStepProps> = props => {
       <StackingStepDescription>
         Choose the amount of cycles to lock your STX. One cycle typically lasts between 6 and 8
         days, depending on the Bitcoin block time. At the end of each cycle, you'll have the chance
-        to earn Bitcoin.
+        to earn bitcoin.
       </StackingStepDescription>
       <Stepper
         mt="loose"

app/store/stacking/stacking.reducer.ts

@@ -8,6 +8,7 @@ import { createSlice, PayloadAction, createSelector } from '@reduxjs/toolkit';
 import { RootState } from '..';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { NETWORK } from '@constants/index';
 import { selectIsStackingCallPending } from '@store/pending-transaction';
 import {
@@ -21,6 +22,9 @@ import {
 import { stxToMicroStx } from '@utils/unit-convert';
 import { StackerInfo as StackerInfoFromClient } from '@stacks/stacking';
 
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+
 export enum StackingStatus {
   NotStacking = 'NotStacking',
   StackedPreCycle = 'StackedPreCycle',
@@ -203,30 +207,29 @@ export const selectNextCycleInfo = createSelector(
       ((coreNodeInfo.burn_block_height - poxInfo.first_burnchain_block_height - 1) %
         poxInfo.reward_cycle_length);
 
+    console.log(blockTimeInfo[NETWORK].target_block_time);
     const secondsToNextCycle = blocksToNextCycle * blockTimeInfo[NETWORK].target_block_time;
 
     const nextCycleStartingAt = new Date();
     nextCycleStartingAt.setSeconds(nextCycleStartingAt.getSeconds() + secondsToNextCycle);
-    dayjs.extend(duration);
 
-    const timeUntilCycle = {
-      hours: dayjs.duration(secondsToNextCycle, 'seconds').asHours(),
-      days: dayjs.duration(secondsToNextCycle, 'seconds').asDays(),
-      weeks: dayjs.duration(secondsToNextCycle, 'seconds').asWeeks(),
-    };
+    const now = dayjs();
+    const timeOfNextCycle = now.add(secondsToNextCycle, 'second');
+    const formattedTimeToNextCycle = dayjs().to(timeOfNextCycle, true);
+
+    const estimateCycleDurationSeconds =
+      poxInfo.reward_cycle_length * blockTimeInfo[NETWORK].target_block_time;
 
-    const formattedTimeToNextCycle =
-      timeUntilCycle.weeks > 1
-        ? '~' + Math.ceil(timeUntilCycle.weeks).toString() + ' weeks'
-        : timeUntilCycle.days < 1
-        ? '~' + Math.ceil(timeUntilCycle.hours).toString() + ' hours'
-        : '~' + Math.ceil(timeUntilCycle.days).toString() + ' days';
+    const estimateCycleDuration = dayjs
+      .duration(estimateCycleDurationSeconds, 'seconds')
+      .humanize();
 
     return {
       nextCycleStartBlock,
       secondsToNextCycle,
+      estimateCycleDurationSeconds,
+      estimateCycleDuration,
       nextCycleStartingAt,
-      timeUntilCycle,
       formattedTimeToNextCycle,
       blocksToNextCycle,
       isStackingCallPending,
@@ -238,10 +241,13 @@ export const selectNextCycleInfo = createSelector(
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export const stackingWillBeExecuted = createSelector(selectStackingState, () => {});
 
-export const selectEstimatedStackingCycleDuration = createSelector(
-  selectStackingState,
-  ({ poxInfo, blockTimeInfo }) => {
-    if (poxInfo === null || blockTimeInfo === null) return 0;
-    return poxInfo.reward_cycle_length * blockTimeInfo[NETWORK].target_block_time;
-  }
-);
+export const selectEstimatedStackingDuration = (cycles: number) =>
+  createSelector(selectStackingState, ({ poxInfo, blockTimeInfo }) => {
+    if (poxInfo === null || blockTimeInfo === null) return '—';
+    return dayjs
+      .duration(
+        poxInfo.reward_cycle_length * blockTimeInfo[NETWORK].target_block_time * cycles,
+        'seconds'
+      )
+      .humanize();
+  });