1  import { Trans } from '@lingui/macro';
 2  import { CircularProgress, Grid, Paper, PaperProps, Typography } from '@mui/material';
 3  import { ReactNode } from 'react';
 4  import { StakingPanelNoWallet } from 'src/modules/staking/StakingPanelNoWallet';
 5  
 6  import { ConnectWalletButton } from './WalletConnection/ConnectWalletButton';
 7  
 8  interface ConnectWalletPaperStakingProps extends PaperProps {
 9    loading?: boolean;
10    description?: ReactNode;
11  }
12  
13  export const ConnectWalletPaperStaking = ({
14    loading,
15    description,
16    sx,
17    ...rest
18  }: ConnectWalletPaperStakingProps) => {
19    return (
20      <Paper
21        {...rest}
22        sx={{
23          display: 'flex',
24          flexDirection: 'column',
25          alignItems: 'center',
26          justifyContent: 'center',
27          textAlign: 'center',
28          p: 4,
29          flex: 1,
30          ...sx,
31        }}
32      >
33        <>
34          {loading ? (
35            <CircularProgress />
36          ) : (
37            <>
38              <Typography variant="h2" sx={{ mb: 2 }}>
39                <Trans>Please, connect your wallet</Trans>
40              </Typography>
41              <Typography sx={{ mb: 6 }} color="text.secondary">
42                {description || (
43                  <Trans>
44                    Please connect your wallet to see your supplies, borrowings, and open positions.
45                  </Trans>
46                )}
47              </Typography>
48              <ConnectWalletButton funnel={'Staking page'} />
49              <Grid container spacing={1} pt={6} sx={{ maxWidth: '758px', textAlign: 'right' }}>
50                <Grid item xs={12} md={4}>
51                  <StakingPanelNoWallet stakedToken={'GHO'} icon={'gho'} />
52                </Grid>
53                <Grid item xs={12} md={4}>
54                  <StakingPanelNoWallet stakedToken={'AAVE'} icon={'aave'} />
55                </Grid>
56                <Grid item xs={12} md={4}>
57                  <StakingPanelNoWallet stakedToken={'ABPT V2'} icon={'stkbptv2'} />
58                </Grid>
59              </Grid>
60            </>
61          )}
62        </>
63      </Paper>
64    );
65  };