1  import { DuplicateIcon, XIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Button, Link, SvgIcon, Typography } from '@mui/material';
 4  import { useModalContext } from 'src/hooks/useModal';
 5  import { TxErrorType } from 'src/ui-config/errorMapping';
 6  
 7  export const TxErrorView = ({ txError }: { txError: TxErrorType }) => {
 8    const { close } = useModalContext();
 9  
10    return (
11      <>
12        <Box
13          sx={{
14            display: 'flex',
15            flexDirection: 'column',
16            justifyContent: 'center',
17            alignItems: 'center',
18            mb: '92px',
19          }}
20        >
21          <Box
22            sx={{
23              width: '48px',
24              height: '48px',
25              backgroundColor: 'error.200',
26              borderRadius: '50%',
27              mt: 14,
28              display: 'flex',
29              alignItems: 'center',
30              justifyContent: 'center',
31            }}
32          >
33            <SvgIcon sx={{ color: 'error.main', fontSize: '32px' }}>
34              <XIcon />
35            </SvgIcon>
36          </Box>
37  
38          <Typography sx={{ mt: 2 }} variant="h2">
39            <Trans>Transaction failed</Trans>
40          </Typography>
41  
42          <Typography>
43            <Trans>
44              You can report incident to our{' '}
45              <Link href="https://discord.com/invite/aave">Discord</Link> or
46              <Link href="https://github.com/aave/interface">Github</Link>.
47            </Trans>
48          </Typography>
49  
50          <Button
51            variant="outlined"
52            onClick={() => navigator.clipboard.writeText(txError.rawError.message.toString())}
53            size="small"
54            sx={{ mt: 6 }}
55          >
56            <Trans>Copy error text</Trans>
57  
58            <SvgIcon sx={{ ml: 0.5, fontSize: '12px' }}>
59              <DuplicateIcon />
60            </SvgIcon>
61          </Button>
62        </Box>
63        <Box sx={{ display: 'flex', flexDirection: 'column', mt: 12 }}>
64          <Button onClick={close} variant="contained" size="large" sx={{ minHeight: '44px' }}>
65            <Trans>Close</Trans>
66          </Button>
67        </Box>
68      </>
69    );
70  };