1  import { Trans } from '@lingui/macro';
 2  import { Box, CircularProgress, Paper, PaperProps, Typography } from '@mui/material';
 3  import { useModal } from 'connectkit';
 4  import { ReactNode } from 'react';
 5  
 6  import LandingGhost from '/public/resting-gho-hat-purple.svg';
 7  
 8  import { ConnectWalletButton } from './WalletConnection/ConnectWalletButton';
 9  
10  interface ConnectWalletPaperProps extends PaperProps {
11    description?: ReactNode;
12  }
13  
14  export const ConnectWalletPaper = ({ description, sx, ...rest }: ConnectWalletPaperProps) => {
15    const { open } = useModal();
16  
17    return (
18      <Paper
19        {...rest}
20        sx={{
21          display: 'flex',
22          flexDirection: 'column',
23          alignItems: 'center',
24          justifyContent: 'center',
25          textAlign: 'center',
26          p: 4,
27          flex: 1,
28          ...sx,
29        }}
30      >
31        <Box>
32          <LandingGhost />
33        </Box>
34        <>
35          {open ? (
36            <CircularProgress />
37          ) : (
38            <>
39              <Typography variant="h2" sx={{ mb: 2 }}>
40                <Trans>Please, connect your wallet</Trans>
41              </Typography>
42              <Typography sx={{ mb: 6 }} color="text.secondary">
43                {description || (
44                  <Trans>
45                    Please connect your wallet to see your supplies, borrowings, and open positions.
46                  </Trans>
47                )}
48              </Typography>
49              <ConnectWalletButton />
50            </>
51          )}
52        </>
53      </Paper>
54    );
55  };