1  import { ReserveIncentiveResponse } from '@aave/math-utils/dist/esm/formatters/incentive/calculate-reserve-incentives';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Typography } from '@mui/material';
  4  
  5  import { FormattedNumber } from '../primitives/FormattedNumber';
  6  import { Row } from '../primitives/Row';
  7  import { TokenIcon } from '../primitives/TokenIcon';
  8  
  9  const IncentivesSymbolMap: {
 10    [key: string]: {
 11      tokenIconSymbol: string;
 12      symbol: string;
 13      aToken: boolean;
 14    };
 15  } = {
 16    aEthLidoWETH: {
 17      tokenIconSymbol: 'WETH',
 18      symbol: 'aWETH',
 19      aToken: true,
 20    },
 21    aBasUSDC: {
 22      tokenIconSymbol: 'usdc',
 23      symbol: 'aUSDC',
 24      aToken: true,
 25    },
 26    aEthUSDS: {
 27      tokenIconSymbol: 'usds',
 28      symbol: 'aUSDS',
 29      aToken: true,
 30    },
 31    aEthLidowstETH: {
 32      tokenIconSymbol: 'wstETH',
 33      symbol: 'awstETH',
 34      aToken: true,
 35    },
 36    aEthUSDC: {
 37      tokenIconSymbol: 'USDC',
 38      symbol: 'aUSDC',
 39      aToken: true,
 40    },
 41    aEthUSDT: {
 42      tokenIconSymbol: 'USDT',
 43      symbol: 'aUSDT',
 44      aToken: true,
 45    },
 46    aEthPYUSD: {
 47      tokenIconSymbol: 'PYUSD',
 48      symbol: 'aPYUSD',
 49      aToken: true,
 50    },
 51    aArbWETH: {
 52      tokenIconSymbol: 'WETH',
 53      symbol: 'aWETH',
 54      aToken: true,
 55    },
 56    aArbwstETH: {
 57      tokenIconSymbol: 'wstETH',
 58      symbol: 'awstETH',
 59      aToken: true,
 60    },
 61    aBaswstETH: {
 62      tokenIconSymbol: 'wstETH',
 63      symbol: 'awstETH',
 64      aToken: true,
 65    },
 66    aBasEURC: {
 67      tokenIconSymbol: 'EURC',
 68      symbol: 'aEURC',
 69      aToken: true,
 70    },
 71    aBasGHO: {
 72      tokenIconSymbol: 'GHO',
 73      symbol: 'aGHO',
 74      aToken: true,
 75    },
 76    aAvaSAVAX: {
 77      tokenIconSymbol: 'sAVAX',
 78      symbol: 'asAVAX',
 79      aToken: true,
 80    },
 81    aEthRLUSD: {
 82      tokenIconSymbol: 'RLUSD',
 83      symbol: 'aRLUSD',
 84      aToken: true,
 85    },
 86    aSonwS: {
 87      tokenIconSymbol: 'wS',
 88      symbol: 'awS',
 89      aToken: true,
 90    },
 91    aBasweETH: {
 92      tokenIconSymbol: 'weETH',
 93      symbol: 'aweETH',
 94      aToken: true,
 95    },
 96    aGnoEURe: {
 97      tokenIconSymbol: 'EURe',
 98      symbol: 'aEURe',
 99      aToken: true,
100    },
101  };
102  
103  interface IncentivesTooltipContentProps {
104    incentives: ReserveIncentiveResponse[];
105    incentivesNetAPR: 'Infinity' | number;
106    symbol: string;
107  }
108  
109  export const getSymbolMap = (incentive: ReserveIncentiveResponse) => {
110    const rewardTokenSymbol = incentive.rewardTokenSymbol;
111  
112    return IncentivesSymbolMap[rewardTokenSymbol]
113      ? {
114          ...IncentivesSymbolMap[rewardTokenSymbol],
115          rewardTokenAddress: incentive.rewardTokenAddress,
116          incentiveAPR: incentive.incentiveAPR,
117        }
118      : {
119          ...incentive,
120          tokenIconSymbol: rewardTokenSymbol,
121          symbol: rewardTokenSymbol,
122          aToken: false,
123        };
124  };
125  
126  export const IncentivesTooltipContent = ({
127    incentives,
128    incentivesNetAPR,
129    symbol,
130  }: IncentivesTooltipContentProps) => {
131    const typographyVariant = 'secondary12';
132  
133    const Number = ({ incentiveAPR }: { incentiveAPR: 'Infinity' | number | string }) => {
134      return (
135        <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
136          {incentiveAPR !== 'Infinity' ? (
137            <>
138              <FormattedNumber value={+incentiveAPR} percent variant={typographyVariant} />
139              <Typography variant={typographyVariant} sx={{ ml: 1 }}>
140                <Trans>APR</Trans>
141              </Typography>
142            </>
143          ) : (
144            <>
145              <Typography variant={typographyVariant}>∞ %</Typography>
146              <Typography variant={typographyVariant} sx={{ ml: 1 }}>
147                <Trans>APR</Trans>
148              </Typography>
149            </>
150          )}
151        </Box>
152      );
153    };
154  
155    return (
156      <Box
157        sx={{
158          display: 'flex',
159          justifyContent: 'center',
160          alignItems: 'center',
161          flexDirection: 'column',
162        }}
163      >
164        <Typography variant="caption" color="text.secondary" mb={3}>
165          <Trans>Participating in this {symbol} reserve gives annualized rewards.</Trans>
166        </Typography>
167  
168        <Box sx={{ width: '100%' }}>
169          {incentives.map(getSymbolMap).map((incentive) => {
170            return (
171              <Row
172                height={32}
173                caption={
174                  <Box
175                    sx={{
176                      display: 'flex',
177                      alignItems: 'center',
178                      mb: incentives.length > 1 ? 2 : 0,
179                    }}
180                  >
181                    <TokenIcon
182                      aToken={incentive.aToken}
183                      symbol={incentive.tokenIconSymbol}
184                      sx={{ fontSize: '20px', mr: 1 }}
185                    />
186                    <Typography variant={typographyVariant}>{incentive.symbol}</Typography>
187                  </Box>
188                }
189                key={incentive.rewardTokenAddress}
190                width="100%"
191              >
192                <Number incentiveAPR={incentive.incentiveAPR} />
193              </Row>
194            );
195          })}
196  
197          {incentives.length > 1 && (
198            <Box sx={() => ({ pt: 1, mt: 1 })}>
199              <Row caption={<Trans>Net APR</Trans>} height={32}>
200                <Number incentiveAPR={incentivesNetAPR} />
201              </Row>
202            </Box>
203          )}
204        </Box>
205      </Box>
206    );
207  };