From c901a229a9851b4d3be98971da0451de9460dc9c Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Sun, 10 Jan 2021 14:14:54 +0100 Subject: [PATCH] fix: improve timing communication, closes #470 --- .../stacking/components/next-cycle-info.tsx | 2 +- .../components/stacking-info-card.tsx | 2 +- .../stacking/components/stacking-terms.tsx | 2 +- app/pages/stacking/stacking.tsx | 17 ++----- app/pages/stacking/step/choose-cycles.tsx | 2 +- app/store/stacking/stacking.reducer.ts | 46 +++++++++++-------- 6 files changed, 35 insertions(+), 36 deletions(-) diff --git a/app/pages/stacking/components/next-cycle-info.tsx b/app/pages/stacking/components/next-cycle-info.tsx index 62034685f..fd2216112 100644 --- a/app/pages/stacking/components/next-cycle-info.tsx +++ b/app/pages/stacking/components/next-cycle-info.tsx @@ -21,7 +21,7 @@ export const NextCycleInfo: FC = ({ timeUntilNextCycle, ...p - Next cycle starts in {timeUntilNextCycle} + Next cycle starts in about {timeUntilNextCycle} Lock your STX for a chance to earn Bitcoin when the next cycle starts diff --git a/app/pages/stacking/components/stacking-info-card.tsx b/app/pages/stacking/components/stacking-info-card.tsx index f5421064b..be972138d 100644 --- a/app/pages/stacking/components/stacking-info-card.tsx +++ b/app/pages/stacking/components/stacking-info-card.tsx @@ -63,7 +63,7 @@ export const StackingInfoCard: FC = props => { The duration is an estimation that varies depending on the Bitcoin block time - {duration} + ≈{duration} Start date diff --git a/app/pages/stacking/components/stacking-terms.tsx b/app/pages/stacking/components/stacking-terms.tsx index 90517dd73..62aefb319 100644 --- a/app/pages/stacking/components/stacking-terms.tsx +++ b/app/pages/stacking/components/stacking-terms.tsx @@ -16,7 +16,7 @@ export const StackingTerms: FC = props => { - Your STX will be locked for {estimatedDuration}, starting in {timeUntilNextCycle} + Your STX will be locked for ≈{estimatedDuration}, starting in about {timeUntilNextCycle} diff --git a/app/pages/stacking/stacking.tsx b/app/pages/stacking/stacking.tsx index fdc4539fb..ba3244a07 100644 --- a/app/pages/stacking/stacking.tsx +++ b/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 = () => { setModalOpen(true)} /> diff --git a/app/pages/stacking/step/choose-cycles.tsx b/app/pages/stacking/step/choose-cycles.tsx index b946b3f8d..04175b9f3 100644 --- a/app/pages/stacking/step/choose-cycles.tsx +++ b/app/pages/stacking/step/choose-cycles.tsx @@ -27,7 +27,7 @@ export const ChooseCycleStep: FC = props => { 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. 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(); + });