All files / app/pages/stacking/direct-stacking/components choose-btc-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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 { ExplainerLabel } from '@components/tooltip';
import { STACKING_ADDRESS_FORMAT_HELP_URL } from '@constants/index';
import { useField } from 'formik';
import React, { FC } from 'react';
 
const StackingAddressErrorExplainer = () => (
  <>
    Please use a
    <ExplainerLabel text="Legacy, or P2PKH, Bitcoin addresses begin with the number 1">
      Legacy
    </ExplainerLabel>
    ,
    <ExplainerLabel text="SegWit (Segregated Witness), or P2SH, Bitcoin addresses begin with the number 3">
      SegWit
    </ExplainerLabel>
    ,
    <ExplainerLabel text='Native SegWit, or P2WPKH, Bitcoin addresses begin with "bc1q"'>
      Native SegWit
    </ExplainerLabel>
    or
    <ExplainerLabel text='Taproot, or P2TR, Bitcoin addresses begin with "bc1p"'>
      Taproot
    </ExplainerLabel>
    address.
    <ExternalLink
      href={STACKING_ADDRESS_FORMAT_HELP_URL}
      textDecoration="underline"
      display="inline-block"
      ml="extra-tight"
    >
      Learn more
    </ExternalLink>
  </>
);
 
export const ChooseBtcAddressField: FC = () => {
  const [field, meta] = useField('btcAddress');
 
  const errors = meta.error ? (
    <ErrorLabel maxWidth="430px">
      <ErrorText lineHeight="18px">
        {meta.error === 'is-bech32' ? <StackingAddressErrorExplainer /> : meta.error}
      </ErrorText>
    </ErrorLabel>
  ) : null;
 
  return (
    <Step title="Bitcoin address">
      <Description>
        Enter the Bitcoin address where you&apos;d like to receive your rewards.
      </Description>
      <CryptoAddressInput
        fieldName="btcAddress"
        placeholder="Bitcoin address (Legacy, Native SegWit or Taproot)"
        {...field}
      >
        {meta.touched && errors}
      </CryptoAddressInput>
    </Step>
  );
};