All files / app/components/home stacking-rewards-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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Hr } from '../hr';
import { MovementArrow } from '../icons/movement-arrow';
import { features } from '@constants/index';
import { Box, color, Flex, Text } from '@stacks/ui';
import React, { FC } from 'react';
 
interface StackingRewardCardProps {
  lifetime: string;
  lastCycle: string;
}
 
export const StackingRewardCard: FC<StackingRewardCardProps> = ({ lifetime, lastCycle }) => {
  Iif (!features.stacking || !features.lifetimeRewards) return null;
  return (
    <Box
      mt="extra-loose"
      borderRadius="8px"
      boxShadow="0px 1px 2px rgba(0, 0, 0, 0.04);"
      border={`1px solid ${color('border')}`}
    >
      <Flex m="loose" flexDirection="column">
        <Text textStyle="body.small" color={color('text-caption')}>
          Lifetime rewards
        </Text>
        <Flex mt="tight" alignItems="center">
          <MovementArrow mr="tight" />
          <Text textStyle="body.large.medium">{lifetime}</Text>
        </Flex>
      </Flex>
      <Hr />
      <Flex m="loose" flexDirection="column">
        <Text textStyle="body.small" color={color('text-caption')}>
          Last cycle
        </Text>
        <Flex mt="tight" alignItems="center">
          <MovementArrow mr="tight" />
          <Text textStyle="body.large.medium">{lastCycle}</Text>
        </Flex>
      </Flex>
    </Box>
  );
};