1  import { AaveV3Ethereum } from '@bgd-labs/aave-address-book';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Tooltip, Typography, TypographyProps } from '@mui/material';
  4  import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
  5  
  6  import { PopperComponent } from '../ContentWithTooltip';
  7  import GhoBorrowApyRange from '../GhoBorrowApyRange';
  8  import { FormattedNumber } from '../primitives/FormattedNumber';
  9  import { Link } from '../primitives/Link';
 10  import { NoData } from '../primitives/NoData';
 11  import { TokenIcon } from '../primitives/TokenIcon';
 12  import { EthenaIncentivesButton } from './IncentivesButton';
 13  
 14  export interface GhoIncentivesCardProps {
 15    value: string | number;
 16    useApyRange?: boolean;
 17    rangeValues?: [number, number];
 18    stkAaveBalance: string | number;
 19    ghoRoute: string;
 20    userQualifiesForDiscount: boolean;
 21    onMoreDetailsClick?: () => void;
 22    withTokenIcon?: boolean;
 23    forceShowTooltip?: boolean;
 24    variant?: TypographyProps['variant'];
 25    color?: TypographyProps['color'];
 26  }
 27  
 28  export const GhoIncentivesCard = ({
 29    value,
 30    useApyRange,
 31    rangeValues = [0, 0],
 32    ghoRoute,
 33    stkAaveBalance,
 34    userQualifiesForDiscount,
 35    onMoreDetailsClick,
 36    withTokenIcon = false,
 37    forceShowTooltip = false,
 38    variant = 'secondary14',
 39    color = undefined,
 40  }: GhoIncentivesCardProps) => {
 41    const { ghoReserveData } = useAppDataContext();
 42    const stkAaveAmount = Number(stkAaveBalance);
 43  
 44    const minStkAaveBalanceReached =
 45      stkAaveAmount >= ghoReserveData.ghoMinDiscountTokenBalanceForDiscount;
 46  
 47    let toolTipContent = <></>;
 48    const showTooltip = userQualifiesForDiscount || forceShowTooltip;
 49    if (showTooltip) {
 50      toolTipContent = (
 51        <Box
 52          sx={{
 53            py: 4,
 54            px: 6,
 55            fontSize: '12px',
 56            lineHeight: '16px',
 57            a: {
 58              fontSize: '12px',
 59              lineHeight: '16px',
 60              fontWeight: 500,
 61            },
 62          }}
 63        >
 64          <Typography variant="subheader2">
 65            <Trans>
 66              Estimated compounding interest, including discount for Staking{' '}
 67              {minStkAaveBalanceReached ? (
 68                <>
 69                  <FormattedNumber variant="subheader2" value={stkAaveAmount} visibleDecimals={2} />{' '}
 70                </>
 71              ) : null}
 72              AAVE in Safety Module.
 73            </Trans>{' '}
 74            <Link
 75              onClick={onMoreDetailsClick}
 76              href={ghoRoute}
 77              underline="always"
 78              variant="subheader2"
 79            >
 80              <Trans>Learn more</Trans>
 81            </Link>
 82          </Typography>
 83        </Box>
 84      );
 85    }
 86  
 87    return (
 88      <Box
 89        sx={{
 90          display: 'flex',
 91          flexDirection: 'column',
 92          alignItems: { xs: 'flex-end', xsm: 'center' },
 93          justifyContent: 'center',
 94          textAlign: 'center',
 95          flex: '2 1 auto',
 96        }}
 97      >
 98        {value.toString() !== '-1' ? (
 99          <Tooltip
100            enterTouchDelay={0}
101            leaveTouchDelay={0}
102            placement="top"
103            title={toolTipContent}
104            arrow={showTooltip}
105            PopperComponent={PopperComponent}
106          >
107            <Box
108              sx={() => ({
109                display: 'flex',
110                alignItems: 'center',
111              })}
112            >
113              {withTokenIcon && <TokenIcon symbol="stkAAVE" sx={{ height: 14, width: 14, mr: 1 }} />}
114              {useApyRange ? (
115                <GhoBorrowApyRange
116                  percentVariant={variant}
117                  hyphenVariant={variant}
118                  minVal={Math.min(...rangeValues)}
119                  maxVal={Math.max(...rangeValues)}
120                  color={color}
121                />
122              ) : (
123                <FormattedNumber
124                  value={value}
125                  percent
126                  variant={variant}
127                  color={color}
128                  data-cy={'apy'}
129                />
130              )}
131            </Box>
132          </Tooltip>
133        ) : (
134          <NoData variant="secondary14" color="text.secondary" />
135        )}
136        <EthenaIncentivesButton rewardedAsset={AaveV3Ethereum.ASSETS.GHO.V_TOKEN} />
137      </Box>
138    );
139  };