AddressBlockedModal.tsx
1 import { ExclamationCircleIcon, LogoutIcon } from '@heroicons/react/outline'; 2 import { Trans } from '@lingui/macro'; 3 import { Box, Button, SvgIcon, Typography } from '@mui/material'; 4 5 import { BasicModal } from './primitives/BasicModal'; 6 import { Link } from './primitives/Link'; 7 8 export interface AddressBlockedProps { 9 address: string; 10 onDisconnectWallet: () => void; 11 } 12 13 export const AddressBlockedModal = ({ address, onDisconnectWallet }: AddressBlockedProps) => { 14 // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars 15 const setOpen = (_value: boolean) => {}; // ignore, we want the modal to not be dismissable 16 17 return ( 18 <BasicModal open={true} withCloseButton={false} setOpen={setOpen}> 19 <Box 20 sx={{ 21 display: 'flex', 22 flexDirection: 'column', 23 justifyContent: 'center', 24 alignItems: 'center', 25 }} 26 > 27 <SvgIcon sx={{ fontSize: '24px', color: 'warning.main', mb: 2 }}> 28 <ExclamationCircleIcon /> 29 </SvgIcon> 30 <Typography variant="h2"> 31 <Trans>Blocked Address</Trans> 32 </Typography> 33 <Typography variant="helperText" sx={{ my: 4 }}> 34 {address} 35 </Typography> 36 <Typography variant="description" sx={{ textAlign: 'center', mb: 4 }}> 37 <Trans> 38 This address is blocked on app.aave.com because it is associated with one or more 39 </Trans>{' '} 40 <Link href="https://docs.aave.com/faq/#address-screening" underline="always"> 41 <Trans>blocked activities</Trans> 42 </Link> 43 {'.'} 44 </Typography> 45 <Button variant="contained" onClick={onDisconnectWallet}> 46 <SvgIcon fontSize="small" sx={{ mx: 1 }}> 47 <LogoutIcon /> 48 </SvgIcon> 49 <Trans>Disconnect Wallet</Trans> 50 </Button> 51 </Box> 52 </BasicModal> 53 ); 54 };