1  import { XIcon } from '@heroicons/react/outline';
 2  import { Box, IconButton, Modal, Paper, SvgIcon } from '@mui/material';
 3  import React from 'react';
 4  
 5  export interface BasicModalProps {
 6    open: boolean;
 7    children: React.ReactNode;
 8    setOpen: (value: boolean) => void;
 9    withCloseButton?: boolean;
10    contentMaxWidth?: number;
11    closeCallback?: () => void;
12    disableEnforceFocus?: boolean;
13  }
14  
15  export const BasicModal = ({
16    open,
17    setOpen,
18    withCloseButton = true,
19    contentMaxWidth = 420,
20    children,
21    closeCallback,
22    disableEnforceFocus,
23    ...props
24  }: BasicModalProps) => {
25    const handleClose = () => {
26      if (closeCallback) closeCallback();
27      setOpen(false);
28    };
29  
30    return (
31      <Modal
32        open={open}
33        onClose={handleClose}
34        disableEnforceFocus={disableEnforceFocus} // Used for wallet modal connection
35        sx={{
36          display: 'flex',
37          flexDirection: 'column',
38          alignItems: 'center',
39          justifyContent: 'center',
40          '.MuiPaper-root': {
41            outline: 'none',
42          },
43        }}
44        onClick={(e) => {
45          e.stopPropagation();
46        }}
47        {...props}
48        data-cy={'Modal'}
49      >
50        <Paper
51          sx={{
52            position: 'relative',
53            margin: '10px',
54            overflowY: 'auto',
55            width: '100%',
56            maxWidth: { xs: '359px', xsm: `${contentMaxWidth}px` },
57            maxHeight: 'calc(100vh - 20px)',
58            p: 6,
59          }}
60        >
61          {children}
62  
63          {withCloseButton && (
64            <Box sx={{ position: 'absolute', top: '24px', right: '50px', zIndex: 5 }}>
65              <IconButton
66                sx={{
67                  borderRadius: '50%',
68                  p: 0,
69                  minWidth: 0,
70                  position: 'absolute',
71                  bgcolor: 'background.paper',
72                }}
73                onClick={handleClose}
74                data-cy={'close-button'}
75              >
76                <SvgIcon sx={{ fontSize: '28px', color: 'text.primary' }}>
77                  <XIcon data-cy={'CloseModalIcon'} />
78                </SvgIcon>
79              </IconButton>
80            </Box>
81          )}
82        </Paper>
83      </Modal>
84    );
85  };