1  import { DuplicateIcon, RefreshIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Button, Link, Paper, SvgIcon, Typography, useTheme } from '@mui/material';
 4  import { useEffect } from 'react';
 5  import { ContentContainer } from 'src/components/ContentContainer';
 6  import { TopInfoPanel } from 'src/components/TopInfoPanel/TopInfoPanel';
 7  import { MainLayout } from 'src/layouts/MainLayout';
 8  import { useRootStore } from 'src/store/root';
 9  
10  export default function Aave500Page() {
11    const theme = useTheme();
12  
13    const handleCopyError = () => {
14      console.log('copying error to clipboard');
15    };
16    const trackEvent = useRootStore((store) => store.trackEvent);
17  
18    useEffect(() => {
19      trackEvent('Page Viewed', {
20        'Page Name': '500 Error',
21      });
22    }, [trackEvent]);
23    return (
24      <>
25        <TopInfoPanel />
26        <ContentContainer>
27          <Paper
28            sx={{
29              display: 'flex',
30              flexDirection: 'column',
31              alignItems: 'center',
32              justifyContent: 'center',
33              textAlign: 'center',
34              p: 4,
35              flex: 1,
36              backgroundColor: theme.palette.mode === 'dark' ? 'transparent' : '',
37            }}
38          >
39            <Typography variant="display1" sx={{ mt: 8, mb: 3 }}>
40              <Trans>Something went wrong</Trans>
41            </Typography>
42            <Typography sx={{ mt: 2, mb: 5, maxWidth: 480 }}>
43              <Trans>
44                Sorry, an unexpected error happened. In the meantime you may try reloading the page,
45                or come back later.
46              </Trans>
47            </Typography>
48            <Button
49              variant="outlined"
50              color="primary"
51              startIcon={
52                <SvgIcon>
53                  <RefreshIcon />
54                </SvgIcon>
55              }
56              onClick={() => window.location.reload()}
57              sx={{ mb: 10 }}
58            >
59              <Trans>Reload the page</Trans>
60            </Button>
61            <Box
62              display="flex"
63              alignItems="center"
64              justifyContent="center"
65              flexDirection="column"
66              mt={10}
67            >
68              <Typography sx={{ mb: 4 }}>
69                <Trans>
70                  If the error continues to happen,
71                  <br /> you may report it to this
72                </Trans>{' '}
73                <Link href="https://discord.com/invite/aave" color="inherit" target="_blank">
74                  <Trans>Discord channel</Trans>
75                </Link>
76                .
77              </Typography>
78              <Button
79                color="primary"
80                startIcon={
81                  <SvgIcon>
82                    <DuplicateIcon />
83                  </SvgIcon>
84                }
85                onClick={handleCopyError}
86              >
87                <Trans>Copy error message</Trans>
88              </Button>
89            </Box>
90          </Paper>
91        </ContentContainer>
92      </>
93    );
94  }
95  
96  Aave500Page.getLayout = function getLayout(page: React.ReactElement) {
97    return <MainLayout>{page}</MainLayout>;
98  };