1  import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Skeleton, SvgIcon, Typography } from '@mui/material';
 4  import { ReactNode } from 'react';
 5  import { HealthFactorNumber } from 'src/components/HealthFactorNumber';
 6  import { Row } from 'src/components/primitives/Row';
 7  
 8  interface HFChangeProps {
 9    caption: ReactNode;
10    hfCurrent: string;
11    hfAfter: string;
12    loading?: boolean;
13  }
14  
15  export const HFChange = ({ caption, hfCurrent, hfAfter, loading }: HFChangeProps) => {
16    return (
17      <Row
18        caption={caption}
19        sx={{ mb: { xs: 3, lg: 4 }, '&:last-of-type': { mb: 0 } }}
20        captionVariant={'description'}
21      >
22        <Box sx={{ textAlign: 'right' }}>
23          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
24            {!loading ? <HealthFactorNumber value={hfCurrent} /> : <Skeleton width={50} />}
25            <SvgIcon sx={{ fontSize: '16px', color: 'text.primary', mx: 1 }}>
26              <ArrowNarrowRightIcon />
27            </SvgIcon>
28            {!loading ? <HealthFactorNumber value={hfAfter} /> : <Skeleton width={50} />}
29          </Box>
30          <Typography variant="helperText" color="text.secondary">
31            <Trans>Liquidation at</Trans>
32            {' <1.0'}
33          </Typography>
34        </Box>
35      </Row>
36    );
37  };