All files / app/pages/stacking/delegated-stacking/components delegated-stacking-info-card.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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import {
  InfoCard,
  InfoCardLabel as Label,
  InfoCardRow as Row,
  InfoCardGroup as Group,
  InfoCardValue as Value,
  InfoCardSection as Section,
} from '../../../../components/info-card';
import { Hr } from '@components/hr';
import {
  UI_IMPOSED_MAX_STACKING_AMOUNT_USTX,
  POOLED_STACKING_TX_SIZE_BYTES,
} from '@constants/index';
import { useCalculateFee } from '@hooks/use-calculate-fee';
import { useWalletType } from '@hooks/use-wallet-type';
import { DelegationType } from '@models/index';
import { Box, Flex, FlexProps, Text } from '@stacks/ui';
import { selectPoxInfo } from '@store/stacking';
import { parseNumericalFormInput } from '@utils/form/parse-numerical-form-input';
import { formatCycles } from '@utils/stacking';
import { truncateMiddle } from '@utils/tx-utils';
import { stxToMicroStx, toHumanReadableStx } from '@utils/unit-convert';
import React, { FC, useMemo } from 'react';
import { useSelector } from 'react-redux';
 
interface PoolingInfoCardProps extends FlexProps {
  amount: string | number | null;
  poolStxAddress: string | null;
  durationInCycles: number | null;
  delegationType: DelegationType | null;
  burnHeight?: number;
}
 
export const PoolingInfoCard: FC<PoolingInfoCardProps> = props => {
  const { amount, delegationType, poolStxAddress, durationInCycles, burnHeight, ...rest } = props;
 
  const calcFee = useCalculateFee();
  const { whenWallet } = useWalletType();
  const poxInfo = useSelector(selectPoxInfo);
 
  const amountToBeStacked = useMemo(
    () => stxToMicroStx(parseNumericalFormInput(amount)).integerValue(),
    [amount]
  );
 
  const humanReadableAmount = useMemo(() => {
    Iif (amountToBeStacked.isGreaterThan(UI_IMPOSED_MAX_STACKING_AMOUNT_USTX)) {
      return '—';
    }
    return toHumanReadableStx(amountToBeStacked);
  }, [amountToBeStacked]);
 
  return (
    <InfoCard {...rest}>
      <Box mx={['loose', 'extra-loose']}>
        <Flex flexDirection="column" pt="extra-loose" pb="base-loose">
          <Text textStyle="body.large.medium">You&apos;re pooling</Text>
          <Text
            fontSize="24px"
            fontFamily="Open Sauce"
            fontWeight={500}
            letterSpacing="-0.02em"
            mt="extra-tight"
          >
            {humanReadableAmount}
          </Text>
        </Flex>
        <Hr />
        <Group mt="base-loose" mb="extra-loose">
          <Section>
            <Row>
              <Label explainer=" How long you want to delegate to the pool. This is not necessarily the locking duration. However, the locking period cannot be longer than the delegation duration.">
                Type
              </Label>
              <Value>
                {delegationType === null && '—'}
                {delegationType === 'limited' && formatCycles(durationInCycles ?? 0)}
                {delegationType === 'indefinite' && 'Indefinite'}
              </Value>
            </Row>
 
            {burnHeight && (
              <Row>
                <Label>Burn height</Label>
                <Value>{burnHeight}</Value>
              </Row>
            )}
          </Section>
 
          <Section>
            <Row>
              <Label explainer="This address is provided to you by your chosen pool for Stacking delegation specifically.">
                Pool address
              </Label>
              <Value>{poolStxAddress ? truncateMiddle(poolStxAddress) : '—'}</Value>
            </Row>
            <Row>
              <Label
                explainer={whenWallet({
                  software: undefined,
                  ledger: `You'll see this contract address come up when signing the transaction on your Ledger device`,
                })}
              >
                Contract
              </Label>
              <Value>{truncateMiddle(poxInfo?.contract_id ?? '')}</Value>
            </Row>
          </Section>
 
          <Section>
            <Row>
              <Label
                explainer={whenWallet({
                  software: undefined,
                  ledger: `This will appear as ${calcFee(
                    POOLED_STACKING_TX_SIZE_BYTES
                  ).toString()} µSTX on your Ledger device`,
                })}
              >
                Fee
              </Label>
              <Value>{toHumanReadableStx(calcFee(POOLED_STACKING_TX_SIZE_BYTES))}</Value>
            </Row>
          </Section>
        </Group>
      </Box>
    </InfoCard>
  );
};