1  import { ExclamationIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { SvgIcon } from '@mui/material';
 4  
 5  import { ContentWithTooltip } from '../ContentWithTooltip';
 6  import { CapType } from './helper';
 7  
 8  interface CapsTooltipProps {
 9    availableValue: number;
10    isUSD?: boolean;
11    capType: CapType;
12  }
13  
14  export const CapsTooltip = ({ availableValue, isUSD, capType }: CapsTooltipProps) => {
15    const messageValue = isUSD ? `${availableValue}$` : availableValue;
16  
17    let message = undefined;
18    if (availableValue > 0) {
19      message =
20        capType === CapType.supplyCap ? (
21          <Trans>
22            This asset has almost reached its supply cap. There can only be {messageValue} supplied to
23            this market.
24          </Trans>
25        ) : (
26          <Trans>
27            This asset has almost reached its borrow cap. There is only {messageValue} available to be
28            borrowed from this market.
29          </Trans>
30        );
31    } else if (availableValue <= 0) {
32      message =
33        capType === CapType.supplyCap ? (
34          <Trans>
35            This asset has reached its supply cap. Nothing is available to be supplied from this
36            market.
37          </Trans>
38        ) : (
39          <Trans>
40            This asset has reached its borrow cap. Nothing is available to be borrowed from this
41            market.
42          </Trans>
43        );
44    }
45  
46    return (
47      <ContentWithTooltip tooltipContent={<>{message || ''}</>}>
48        <SvgIcon sx={{ fontSize: '14px', color: 'error.main' }}>
49          <ExclamationIcon />
50        </SvgIcon>
51      </ContentWithTooltip>
52    );
53  };