All files / app/pages/stacking/delegated-stacking/components choose-pool-stx-address.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 { CryptoAddressInput } from '../../components/crypto-address-form';
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 { ExternalLink } from '@components/external-link';
import { Text } from '@stacks/ui';
import { useField } from 'formik';
import React, { FC, useRef } from 'react';
 
export const ChoosePoolStxAddressField: FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
 
  const [field, meta] = useField('stxAddress');
 
  return (
    <Step title="Pool address">
      <Description>
        <Text>
          Enter the STX address of the pool with which you’d like to Stack without your STX leaving
          your wallet.
        </Text>
        <Text>
          The pool will provide this address for you. Pools can have different addresses that
          correspond to particular durations.
        </Text>
        <ExternalLink href="https://stacks.co/stacking#services">
          Discover pools on stacks.co
        </ExternalLink>
      </Description>
      <CryptoAddressInput
        ref={inputRef}
        fieldName="stxAddress"
        placeholder="Pool address"
        {...field}
      >
        {meta.touched && meta.error && (
          <ErrorLabel>
            <ErrorText>{meta.error}</ErrorText>
          </ErrorLabel>
        )}
      </CryptoAddressInput>
    </Step>
  );
};