1  import { Trans } from '@lingui/macro';
  2  import { Box, Typography, useTheme } from '@mui/material';
  3  import { ExtendedReserveIncentiveResponse } from 'src/hooks/useMeritIncentives';
  4  
  5  import { FormattedNumber } from '../primitives/FormattedNumber';
  6  import { Link } from '../primitives/Link';
  7  import { Row } from '../primitives/Row';
  8  import { TokenIcon } from '../primitives/TokenIcon';
  9  import { getSymbolMap } from './IncentivesTooltipContent';
 10  
 11  export const MeritIncentivesTooltipContent = ({
 12    meritIncentives,
 13  }: {
 14    meritIncentives: ExtendedReserveIncentiveResponse;
 15  }) => {
 16    const theme = useTheme();
 17  
 18    const typographyVariant = 'secondary12';
 19  
 20    const meritIncentivesFormatted = getSymbolMap(meritIncentives);
 21  
 22    return (
 23      <Box
 24        sx={{
 25          display: 'flex',
 26          justifyContent: 'center',
 27          alignItems: 'start',
 28          flexDirection: 'column',
 29          gap: '10px',
 30        }}
 31      >
 32        <img
 33          src={
 34            theme.palette.mode === 'dark'
 35              ? `/icons/other/aci-white.svg`
 36              : `/icons/other/aci-black.svg`
 37          }
 38          width="100px"
 39          height="40px"
 40          alt=""
 41        />
 42  
 43        <Typography variant="caption" color="text.primary" fontSize={13}>
 44          <Trans>Eligible for the Merit program.</Trans>
 45        </Typography>
 46  
 47        <Typography variant="caption" color="text.secondary">
 48          <Trans>
 49            This is a program initiated and implemented by the Aave Chan Initiative (ACI). Aave Labs
 50            does not guarantee the program and accepts no liability.
 51          </Trans>{' '}
 52          <Link
 53            href={
 54              meritIncentives.customForumLink
 55                ? meritIncentives.customForumLink
 56                : 'https://governance.aave.com/t/arfc-set-aci-as-emission-manager-for-liquidity-mining-programs/17898'
 57            }
 58            sx={{ textDecoration: 'underline' }}
 59            variant="caption"
 60            color="text.secondary"
 61          >
 62            Learn more
 63          </Link>
 64        </Typography>
 65  
 66        {meritIncentives.customMessage ? (
 67          <Typography variant="caption" color="text.secondary">
 68            <Trans>{meritIncentives.customMessage}</Trans>
 69          </Typography>
 70        ) : null}
 71  
 72        <Typography variant="caption" color="text.primary" fontSize={13} fontWeight={'600'}>
 73          <Trans>Merit Program rewards are claimed through the</Trans>
 74          <Link
 75            href={`https://apps.aavechan.com/merit/${meritIncentives.action}`}
 76            sx={{ textDecoration: 'underline', ml: 1 }}
 77            variant="caption"
 78          >
 79            <span
 80              style={{
 81                fontSize: '13px',
 82                fontWeight: '600',
 83              }}
 84            >
 85              {'Aave Chan Initiative interface'}
 86            </span>
 87          </Link>
 88          <span
 89            style={{
 90              fontSize: '13px',
 91              fontWeight: '600',
 92            }}
 93          >
 94            {'.'}
 95          </span>
 96        </Typography>
 97  
 98        <Box sx={{ width: '100%' }}>
 99          <Row
100            height={32}
101            caption={
102              <Box
103                sx={{
104                  display: 'flex',
105                  alignItems: 'center',
106                  mb: 0,
107                }}
108              >
109                <TokenIcon
110                  aToken={meritIncentivesFormatted.aToken}
111                  symbol={meritIncentivesFormatted.tokenIconSymbol}
112                  sx={{ fontSize: '20px', mr: 1 }}
113                />
114                <Typography variant={typographyVariant}>{meritIncentivesFormatted.symbol}</Typography>
115              </Box>
116            }
117            width="100%"
118          >
119            <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
120              <FormattedNumber
121                value={+meritIncentivesFormatted.incentiveAPR}
122                percent
123                variant={typographyVariant}
124              />
125              <Typography variant={typographyVariant} sx={{ ml: 1 }}>
126                <Trans>APR</Trans>
127              </Typography>
128            </Box>
129          </Row>
130        </Box>
131      </Box>
132    );
133  };