All files / app/pages/stacking/direct-stacking/components choose-cycles.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
38
39
40
41
42
43
44
45
46
47
48
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { OneCycleDescriptor } from '../../components/one-cycle-descriptor';
import {
  StackingStep as Step,
  StackingStepDescription as Description,
} from '../../components/stacking-form-step';
import { ErrorLabel } from '@components/error-label';
import { ErrorText } from '@components/error-text';
import { Stepper } from '@components/stepper';
import { MAX_STACKING_CYCLES, MIN_STACKING_CYCLES } from '@constants/index';
import { useField } from 'formik';
import React, { FC } from 'react';
 
interface ChooseCycleStepProps {
  cycles: number;
}
 
export const ChooseCycleField: FC<ChooseCycleStepProps> = props => {
  const { cycles } = props;
  const [_field, meta, helpers] = useField('cycles');
 
  return (
    <Step title="Duration">
      <Description>
        Every cycle, each of your reward slots will be eligible for rewards.
      </Description>
 
      <Stepper
        mt="loose"
        amount={cycles}
        onIncrement={cycle => {
          Iif (cycle > MAX_STACKING_CYCLES) return;
          helpers.setValue(cycle);
        }}
        onDecrement={cycle => {
          Iif (cycle < MIN_STACKING_CYCLES) return;
          helpers.setValue(cycle);
        }}
      />
      <OneCycleDescriptor mt="loose" />
      {meta.touched && meta.error && (
        <ErrorLabel>
          <ErrorText>{meta.error}</ErrorText>
        </ErrorLabel>
      )}
    </Step>
  );
};