1  import { ChainId } from '@aave/contract-helpers';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
  4  import { ChainAvailabilityText } from 'src/components/ChainAvailabilityText';
  5  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
  6  import { Row } from 'src/components/primitives/Row';
  7  import { TextWithTooltip } from 'src/components/TextWithTooltip';
  8  import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
  9  import { useRootStore } from 'src/store/root';
 10  import { GENERAL } from 'src/utils/mixPanelEvents';
 11  
 12  import { Link } from '../../components/primitives/Link';
 13  import { TopInfoPanelItem } from '../../components/TopInfoPanel/TopInfoPanelItem';
 14  
 15  interface StakingHeaderProps {
 16    tvl: {
 17      [key: string]: number;
 18    };
 19    stkEmission: string;
 20    loading: boolean;
 21  }
 22  
 23  export const StakingHeader: React.FC<StakingHeaderProps> = ({ tvl, stkEmission, loading }) => {
 24    const theme = useTheme();
 25    const upToLG = useMediaQuery(theme.breakpoints.up('lg'));
 26    const downToSM = useMediaQuery(theme.breakpoints.down('sm'));
 27    const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
 28  
 29    const valueTypographyVariant = downToSM ? 'main16' : 'main21';
 30    const symbolsTypographyVariant = downToSM ? 'secondary16' : 'secondary21';
 31    const trackEvent = useRootStore((store) => store.trackEvent);
 32  
 33    const total = Object.values(tvl || {}).reduce((acc, item) => acc + item, 0);
 34  
 35    const TotalFundsTooltip = () => {
 36      return (
 37        <TextWithTooltip>
 38          <Box>
 39            {Object.entries(tvl)
 40              .sort((a, b) => b[1] - a[1])
 41              .map(([key, value]) => (
 42                <Row key={key} caption={key} captionVariant="caption">
 43                  <FormattedNumber value={value} symbol="USD" visibleDecimals={2} variant="caption" />
 44                </Row>
 45              ))}
 46          </Box>
 47        </TextWithTooltip>
 48      );
 49    };
 50  
 51    return (
 52      <TopInfoPanel
 53        titleComponent={
 54          <Box mb={4}>
 55            <ChainAvailabilityText wrapperSx={{ mb: 4 }} chainId={ChainId.mainnet} />
 56            <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
 57              {/* <img src={`/aave-logo-purple.svg`} width="64px" height="64px" alt="" /> */}
 58              <Typography
 59                variant={downToXSM ? 'h2' : upToLG ? 'display1' : 'h1'}
 60                sx={{ ml: 2, mr: 3 }}
 61              >
 62                <Trans>Staking</Trans>
 63              </Typography>
 64            </Box>
 65  
 66            <Typography sx={{ color: '#8E92A3', maxWidth: '824px' }}>
 67              <Trans>
 68                AAVE, GHO, and ABPT holders (Ethereum network only) can stake their assets in the
 69                Safety Module to add more security to the protocol and earn Safety Incentives. In the
 70                case of a shortfall event, your stake can be slashed to cover the deficit, providing
 71                an additional layer of protection for the protocol.
 72              </Trans>{' '}
 73              <Link
 74                href="https://docs.aave.com/faq/migration-and-staking"
 75                sx={{ textDecoration: 'underline', color: '#8E92A3' }}
 76                onClick={() =>
 77                  trackEvent(GENERAL.EXTERNAL_LINK, {
 78                    Link: 'Staking Risks',
 79                  })
 80                }
 81              >
 82                <Trans>Learn more about risks involved</Trans>
 83              </Link>
 84            </Typography>
 85          </Box>
 86        }
 87      >
 88        <TopInfoPanelItem
 89          hideIcon
 90          title={
 91            <Stack direction="row" alignItems="center">
 92              <Trans>Funds in the Safety Module</Trans>
 93              <TotalFundsTooltip />
 94            </Stack>
 95          }
 96          loading={loading}
 97        >
 98          <FormattedNumber
 99            value={total}
100            symbol="USD"
101            variant={valueTypographyVariant}
102            symbolsVariant={symbolsTypographyVariant}
103            symbolsColor="#A5A8B6"
104            visibleDecimals={2}
105          />
106        </TopInfoPanelItem>
107  
108        <TopInfoPanelItem hideIcon title={<Trans>Total emission per day</Trans>} loading={loading}>
109          <FormattedNumber
110            value={stkEmission || 0}
111            symbol="AAVE"
112            variant={valueTypographyVariant}
113            symbolsVariant={symbolsTypographyVariant}
114            symbolsColor="#A5A8B6"
115            visibleDecimals={2}
116          />
117        </TopInfoPanelItem>
118      </TopInfoPanel>
119    );
120  };