All files / app/pages/stacking/delegated-stacking/components choose-pooling-amount.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
49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 { useBalance } from '@hooks/use-balance';
import { Box, Button, color, Input } from '@stacks/ui';
import { microStxToStx, toHumanReadableStx } from '@utils/unit-convert';
import { useField } from 'formik';
import React, { FC, useRef } from 'react';
 
export const ChoosePoolingAmountField: FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [field, meta, helpers] = useField('amount');
 
  const { availableBalance } = useBalance();
 
  return (
    <Step title="Amount">
      <Description>Choose how much you’ll pool. Your pool may require a minimum.</Description>
      <Box position="relative" maxWidth="400px">
        <Input
          id="stxAmount"
          mt="loose"
          placeholder="Amount of STX to Stack"
          ref={inputRef}
          {...field}
        />
        {meta.touched && meta.error && (
          <ErrorLabel>
            <ErrorText>{meta.error}</ErrorText>
          </ErrorLabel>
        )}
      </Box>
      <Box textStyle="body.small" color={color('text-caption')} mt="base-tight">
        Available balance:{' '}
        <Button
          variant="link"
          type="button"
          onClick={() => helpers.setValue(microStxToStx(availableBalance))}
        >
          {toHumanReadableStx(availableBalance)}
        </Button>
      </Box>
    </Step>
  );
};