1  import { Trans } from '@lingui/macro';
  2  import { Box, Typography } from '@mui/material';
  3  import { ExtendedReserveIncentiveResponse } from 'src/hooks/useZkSyncIgniteIncentives';
  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 ZkSyncIgniteIncentivesTooltipContent = ({
 12    zkSyncIgniteIncentives,
 13  }: {
 14    zkSyncIgniteIncentives: ExtendedReserveIncentiveResponse;
 15  }) => {
 16    const typographyVariant = 'secondary12';
 17  
 18    const zkSyncIgniteIncentivesFormatted = getSymbolMap(zkSyncIgniteIncentives);
 19  
 20    return (
 21      <Box
 22        sx={{
 23          display: 'flex',
 24          justifyContent: 'center',
 25          alignItems: 'start',
 26          flexDirection: 'column',
 27        }}
 28      >
 29        <img src={`/icons/other/zksync-ignite.svg`} width="100px" height="40px" alt="" />
 30  
 31        <Typography variant="caption" color="text.primary" mb={3}>
 32          <Trans>Eligible for the ZKSync Ignite program.</Trans>
 33        </Typography>
 34  
 35        <Typography variant="caption" color="text.secondary" mb={3}>
 36          <Trans>
 37            This is a program initiated and implemented by the decentralised ZKSync community. Aave
 38            Labs does not guarantee the program and accepts no liability.
 39          </Trans>{' '}
 40          <Link
 41            href={'https://zksyncignite.xyz/'}
 42            sx={{ textDecoration: 'underline' }}
 43            variant="caption"
 44            color="text.secondary"
 45          >
 46            Learn more
 47          </Link>
 48        </Typography>
 49  
 50        <Typography variant="caption" color="text.secondary" mb={3}>
 51          <Trans>ZKSync Ignite Program rewards are claimed through the</Trans>{' '}
 52          <Link
 53            href="https://app.zksyncignite.xyz/users/"
 54            sx={{ textDecoration: 'underline' }}
 55            variant="caption"
 56            color="text.secondary"
 57          >
 58            official app
 59          </Link>
 60          {'.'}
 61        </Typography>
 62        {zkSyncIgniteIncentives.customMessage ? (
 63          <Typography variant="caption" color="text.strong" mb={3}>
 64            <Trans>{zkSyncIgniteIncentives.customMessage}</Trans>
 65          </Typography>
 66        ) : null}
 67  
 68        <Box sx={{ width: '100%' }}>
 69          <Row
 70            height={32}
 71            caption={
 72              <Box
 73                sx={{
 74                  display: 'flex',
 75                  alignItems: 'center',
 76                  mb: 0,
 77                }}
 78              >
 79                <TokenIcon
 80                  aToken={zkSyncIgniteIncentivesFormatted.aToken}
 81                  symbol={zkSyncIgniteIncentivesFormatted.tokenIconSymbol}
 82                  sx={{ fontSize: '20px', mr: 1 }}
 83                />
 84                <Typography variant={typographyVariant}>
 85                  {zkSyncIgniteIncentivesFormatted.symbol}
 86                </Typography>
 87              </Box>
 88            }
 89            width="100%"
 90          >
 91            <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
 92              <FormattedNumber
 93                value={+zkSyncIgniteIncentivesFormatted.incentiveAPR}
 94                percent
 95                variant={typographyVariant}
 96              />
 97              <Typography variant={typographyVariant} sx={{ ml: 1 }}>
 98                <Trans>APR</Trans>
 99              </Typography>
100            </Box>
101          </Row>
102        </Box>
103      </Box>
104    );
105  };