All files / app/pages/stacking/direct-stacking/components direct-stacking-intro.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { EstimatedMinimumLabel } from '../../components/estimated-minimum-label';
import { NextCycleStartTime } from '../../components/next-cycle-start-time';
import { StackingDescription } from '../../components/stacking-description';
import { Title } from '@components/title';
import { Flex } from '@stacks/ui';
import { toHumanReadableStx } from '@utils/unit-convert';
import React, { FC } from 'react';
 
interface StackingIntroProps {
  timeUntilNextCycle: string;
  estimatedStackingMinimum: string;
}
export const DirectStackingIntro: FC<StackingIntroProps> = props => {
  const { timeUntilNextCycle, estimatedStackingMinimum } = props;
  return (
    <>
      <Title>Stack by yourself</Title>
      <StackingDescription mt="base-loose">
        When you stack by yourself, you’ll get the chance to earn Bitcoin each cycle for every
        reward slot that you hold.
      </StackingDescription>
      <StackingDescription mt="base">
        The STX required per reward slot can fluctuate from cycle to cycle. If you’re close to the
        current minimum, consider pooling instead to help make sure you don’t end up without
        rewards.
      </StackingDescription>
      <Flex alignItems="baseline">
        <NextCycleStartTime nextCycleStartsIn={timeUntilNextCycle} mt="40px" />
        <EstimatedMinimumLabel
          ml="extra-loose"
          estimatedStackingMinimum={toHumanReadableStx(estimatedStackingMinimum)}
        />
      </Flex>
    </>
  );
};