1  import { ChainId } from '@aave/contract-helpers';
 2  import { ExternalLinkIcon } from '@heroicons/react/outline';
 3  import { Trans } from '@lingui/macro';
 4  import { Box, Button, SvgIcon, Typography, useMediaQuery, useTheme } from '@mui/material';
 5  import * as React from 'react';
 6  import { ChainAvailabilityText } from 'src/components/ChainAvailabilityText';
 7  import { Link } from 'src/components/primitives/Link';
 8  import { useRootStore } from 'src/store/root';
 9  import { GENERAL } from 'src/utils/mixPanelEvents';
10  
11  import { TopInfoPanel } from '../../components/TopInfoPanel/TopInfoPanel';
12  
13  interface ExternalLinkProps {
14    text: string;
15    href: string;
16  }
17  
18  function ExternalLink({ text, href }: ExternalLinkProps) {
19    const trackEvent = useRootStore((store) => store.trackEvent);
20  
21    return (
22      <Button
23        variant="surface"
24        size="small"
25        sx={{ minWidth: 'unset' }}
26        component={Link}
27        href={href}
28        target="_blank"
29        rel="noopener"
30        onClick={() => trackEvent(GENERAL.EXTERNAL_LINK, { Link: text })}
31      >
32        <Box sx={{ display: 'flex', alignItems: 'center' }}>
33          {text}
34          <SvgIcon sx={{ ml: 1, fontSize: 14 }}>
35            <ExternalLinkIcon />
36          </SvgIcon>
37        </Box>
38      </Button>
39    );
40  }
41  
42  export const GovernanceTopPanel = () => {
43    const theme = useTheme();
44    const upToLG = useMediaQuery(theme.breakpoints.up('lg'));
45    const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
46    const trackEvent = useRootStore((store) => store.trackEvent);
47  
48    return (
49      <TopInfoPanel
50        titleComponent={
51          <Box mb={4}>
52            <ChainAvailabilityText wrapperSx={{ mb: 4 }} chainId={ChainId.mainnet} />
53            <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
54              {/* <img src={`/aave.svg`} width="32px" height="32px" alt="" /> */}
55              <Typography
56                variant={downToXSM ? 'h2' : upToLG ? 'display1' : 'h1'}
57                sx={{ ml: 2, mr: 3 }}
58              >
59                <Trans>Aave Governance</Trans>
60              </Typography>
61            </Box>
62  
63            <Typography sx={{ color: '#8E92A3', maxWidth: '824px' }}>
64              <Trans>
65                Aave is a fully decentralized, community governed protocol by the AAVE token-holders.
66                AAVE token-holders collectively discuss, propose, and vote on upgrades to the
67                protocol. AAVE token-holders (Ethereum network only) can either vote themselves on new
68                proposals or delagate to an address of choice. To learn more check out the Governance
69              </Trans>{' '}
70              <Link
71                onClick={() => trackEvent(GENERAL.EXTERNAL_LINK, { Link: 'FAQ Docs Governance' })}
72                href="https://docs.aave.com/faq/governance"
73                sx={{ textDecoration: 'underline', color: '#8E92A3' }}
74              >
75                <Trans>documentation</Trans>
76              </Link>
77              .
78            </Typography>
79          </Box>
80        }
81      >
82        <Box
83          sx={{
84            display: 'flex',
85            alignItems: 'center',
86            gap: '16px',
87            flexWrap: 'wrap',
88            maxWidth: 'sm',
89          }}
90        >
91          <ExternalLink text="SNAPSHOTS" href="https://snapshot.org/#/aave.eth" />
92          <ExternalLink text="FORUM" href="https://governance.aave.com/" />
93          <ExternalLink text="FAQ" href="https://docs.aave.com/faq/governance" />
94          <ExternalLink text="GOVERNANCE V2" href="https://governance-v2.aave.com/" />
95        </Box>
96      </TopInfoPanel>
97    );
98  };