All files / app/modals/send-stx/steps preview-transaction.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { ErrorLabel } from '@components/error-label';
import { ErrorText } from '@components/error-text';
import { Flex, Text, Box, color } from '@stacks/ui';
import { toHumanReadableStx } from '@utils/unit-convert';
import React, { FC } from 'react';
 
export const TxModalPreview: FC = ({ children }) => (
  <Flex flexDirection="column" fontSize="14px" mx="extra-loose" mt="tight">
    {children}
  </Flex>
);
 
interface TxModalPreviewItemProps {
  label: string;
}
 
export const TxModalPreviewItem: FC<TxModalPreviewItemProps> = ({ label, children }) => (
  <Flex alignItems="center" height="64px" borderBottom={`1px solid ${color('border')}`}>
    <Text textStyle="body.small.medium" width="70px">
      {label}
    </Text>
    <Text>{children}</Text>
  </Flex>
);
 
interface PreviewTransactionProps {
  recipient: string;
  amount: string;
  total: string;
  fee: string;
  nonce: number;
  memo?: string;
  totalExceedsBalance: boolean;
}
 
export const PreviewTransaction: FC<PreviewTransactionProps> = props => {
  const { recipient, amount, total, fee, memo, nonce, totalExceedsBalance } = props;
 
  return (
    <TxModalPreview>
      <TxModalPreviewItem label="To">
        <Text fontSize="13px">{recipient}</Text>
      </TxModalPreviewItem>
      <TxModalPreviewItem label="Amount">{toHumanReadableStx(amount)}</TxModalPreviewItem>
      <TxModalPreviewItem label="Fee">{toHumanReadableStx(fee)}</TxModalPreviewItem>
      <TxModalPreviewItem label="Total">{toHumanReadableStx(total)}</TxModalPreviewItem>
      <TxModalPreviewItem label="Nonce">{nonce}</TxModalPreviewItem>
      {memo && <TxModalPreviewItem label="Memo">{memo}</TxModalPreviewItem>}
      <Box minHeight="24px">
        {totalExceedsBalance && (
          <ErrorLabel size="md" my="base-loose">
            <ErrorText fontSize="14px" lineHeight="20px">
              You have insufficient balance to complete this transfer.
            </ErrorText>
          </ErrorLabel>
        )}
      </Box>
    </TxModalPreview>
  );
};