fix: align stacking est. times, closes #340

leather-io · Dec 2, 2020 · 76ff82c · 76ff82c
1 parent 470a5ec
commit 76ff82c
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 106 deletions.
diff --git a/app/modals/stacking/stacking-modal-last-step.tsx b/app/modals/stacking/stacking-modal-last-step.tsx
diff --git a/app/modals/stacking/stacking-modal.tsx b/app/modals/stacking/stacking-modal.tsx
@@ -40,12 +40,10 @@ import {
 import { DecryptWalletForm } from './steps/decrypt-wallet-form';
 import { SignTxWithLedger } from './steps/sign-tx-with-ledger';
 import { FailedBroadcastError } from './steps/failed-broadcast-error';
-import { StackingSuccess } from './steps/stacking-success';
 
 enum StackingModalStep {
   DecryptWalletAndSend,
   SignWithLedgerAndSend,
-  StackingSuccess,
   FailedContractCall,
 }
 
@@ -290,18 +288,6 @@ export const StackingModal: FC<StackingModalProps> = ({ onClose, numCycles, poxA
       ),
     }),
 
-    [StackingModalStep.StackingSuccess]: () => ({
-      header: <StackingModalHeader onSelectClose={onClose} />,
-      body: <StackingSuccess cycles={numCycles} />,
-      footer: (
-        <StackingModalFooter>
-          <StackingModalButton onClick={() => (onClose(), history.push(routes.HOME))}>
-            Close
-          </StackingModalButton>
-        </StackingModalFooter>
-      ),
-    }),
-
     [StackingModalStep.FailedContractCall]: () => ({
       header: <StackingModalHeader onSelectClose={onClose} />,
       body: <FailedBroadcastError>{'Failed to call stacking contract'}</FailedBroadcastError>,

diff --git a/app/modals/stacking/steps/stacking-success.tsx b/app/modals/stacking/steps/stacking-success.tsx
diff --git a/app/pages/stacking/components/stacking-terms.tsx b/app/pages/stacking/components/stacking-terms.tsx
@@ -5,26 +5,32 @@ import { RewindArrow } from '../../../components/icons/rewind-arrow';
 
 interface StackingTermsProps {
   timeUntilNextCycle: string;
+  estimatedDuration: string;
 }
-export const StackingTerms: FC<StackingTermsProps> = ({ timeUntilNextCycle }) => (
-  <Box textStyle={['body.small', 'body.large']} mt="loose">
-    <Flex alignItems="center">
-      <Box width={['12px', '16px']} mr="base-tight">
-        <EncryptionIcon width={['12px', '16px']} />
-      </Box>
-      <Text>Your STX will be locked for ~2 weeks, starting in {timeUntilNextCycle}</Text>
-    </Flex>
-    <Flex alignItems="center" mt="base-loose">
-      <Box width={['12px', '16px']} mr="base-tight">
-        <ClockIcon />
-      </Box>
-      <Text>The duration can vary depending on the Bitcoin block time</Text>
-    </Flex>
-    <Flex alignItems="center" mt="base-loose">
-      <Box width={['12px', '16px']} mr="base-tight">
-        <RewindArrow />
-      </Box>
-      <Text>This transaction can not be reversed</Text>
-    </Flex>
-  </Box>
-);
+export const StackingTerms: FC<StackingTermsProps> = props => {
+  const { timeUntilNextCycle, estimatedDuration } = props;
+  return (
+    <Box textStyle={['body.small', 'body.large']} mt="loose">
+      <Flex alignItems="center">
+        <Box width={['12px', '16px']} mr="base-tight">
+          <EncryptionIcon width={['12px', '16px']} />
+        </Box>
+        <Text>
+          Your STX will be locked for {estimatedDuration}, starting in {timeUntilNextCycle}
+        </Text>
+      </Flex>
+      <Flex alignItems="center" mt="base-loose">
+        <Box width={['12px', '16px']} mr="base-tight">
+          <ClockIcon />
+        </Box>
+        <Text>The duration can vary depending on the Bitcoin block time</Text>
+      </Flex>
+      <Flex alignItems="center" mt="base-loose">
+        <Box width={['12px', '16px']} mr="base-tight">
+          <RewindArrow />
+        </Box>
+        <Text>This transaction can not be reversed</Text>
+      </Flex>
+    </Box>
+  );
+};
diff --git a/app/pages/stacking/stacking.tsx b/app/pages/stacking/stacking.tsx
@@ -61,6 +61,8 @@ export const Stacking: FC = () => {
 
   const formComplete = [Step.ChooseCycles, Step.ChooseBtcAddress].every(isComplete) && !!btcAddress;
 
+  const estimatedStackingDuration = '~' + (calcStackingDuration() / 60 / 60).toString() + ' hours';
+
   if (nextCycleInfo === null) return null;
 
   const stackingIntro = (
@@ -72,7 +74,7 @@ export const Stacking: FC = () => {
       cycles={cycles}
       balance={balance}
       startDate={nextCycleInfo.nextCycleStartingAt}
-      duration={'~' + (calcStackingDuration() / 60 / 60).toString() + ' hours'}
+      duration={estimatedStackingDuration}
     />
   );
 
@@ -98,6 +100,7 @@ export const Stacking: FC = () => {
       <ConfirmAndLockStep
         id={Step.ConfirmAndLock}
         formComplete={formComplete}
+        estimatedDuration={estimatedStackingDuration}
         timeUntilNextCycle={nextCycleInfo.formattedTimeToNextCycle}
         onConfirmAndLock={() => setModalOpen(true)}
       />

diff --git a/app/pages/stacking/step/confirm-and-lock.tsx b/app/pages/stacking/step/confirm-and-lock.tsx
@@ -12,11 +12,12 @@ interface ConfirmAndLockStepProps {
   formComplete: boolean;
   step?: number;
   timeUntilNextCycle: string;
+  estimatedDuration: string;
   onConfirmAndLock(): void;
 }
 
 export const ConfirmAndLockStep: FC<ConfirmAndLockStepProps> = props => {
-  const { step, id, formComplete, timeUntilNextCycle, onConfirmAndLock } = props;
+  const { step, id, formComplete, timeUntilNextCycle, estimatedDuration, onConfirmAndLock } = props;
 
   return (
     <StackingStep title={id} step={step} isComplete={false} mb="300px">
@@ -25,7 +26,10 @@ export const ConfirmAndLockStep: FC<ConfirmAndLockStepProps> = props => {
         <br />
         Please keep in mind that:
       </StackingStepDescription>
-      <StackingTerms timeUntilNextCycle={timeUntilNextCycle} />
+      <StackingTerms
+        timeUntilNextCycle={timeUntilNextCycle}
+        estimatedDuration={estimatedDuration}
+      />
       <StackingStepAction onClick={onConfirmAndLock} isDisabled={!formComplete}>
         Confirm and lock
       </StackingStepAction>