1  import { Trans } from '@lingui/macro';
  2  import { Box, Stack, Typography } from '@mui/material';
  3  import React from 'react';
  4  import { MeritIncentivesButton } from 'src/components/incentives/IncentivesButton';
  5  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
  6  import { Link } from 'src/components/primitives/Link';
  7  import { TokenIcon } from 'src/components/primitives/TokenIcon';
  8  import { TextWithTooltip } from 'src/components/TextWithTooltip';
  9  import { StakeTokenFormatted, useGeneralStakeUiData } from 'src/hooks/stake/useGeneralStakeUiData';
 10  import { useRootStore } from 'src/store/root';
 11  import { CustomMarket } from 'src/ui-config/marketsConfig';
 12  
 13  export interface StakingPanelNoWalletProps {
 14    description?: React.ReactNode;
 15    headerAction?: React.ReactNode;
 16    stakedToken: string;
 17    icon: string;
 18  }
 19  
 20  export const StakingPanelNoWallet: React.FC<StakingPanelNoWalletProps> = ({
 21    stakedToken,
 22    icon,
 23  }) => {
 24    const currentMarketData = useRootStore((store) => store.currentMarketData);
 25    let stakingAPY = '';
 26  
 27    const { data: stakeGeneralResult } = useGeneralStakeUiData(currentMarketData);
 28  
 29    let stkAave: StakeTokenFormatted | undefined;
 30    let stkBpt: StakeTokenFormatted | undefined;
 31    let stkGho: StakeTokenFormatted | undefined;
 32    let stkBptV2: StakeTokenFormatted | undefined;
 33    if (stakeGeneralResult && Array.isArray(stakeGeneralResult)) {
 34      [stkAave, stkBpt, stkGho, stkBptV2] = stakeGeneralResult;
 35    }
 36  
 37    if (stakedToken == 'AAVE') stakingAPY = stkAave?.stakeApy || '0';
 38    if (stakedToken == 'ABPT') stakingAPY = stkBpt?.stakeApy || '0';
 39    if (stakedToken == 'GHO') stakingAPY = stkGho?.stakeApy || '0';
 40    if (stakedToken == 'ABPT V2') stakingAPY = stkBptV2?.stakeApy || '0';
 41  
 42    const distributionEnded = Date.now() / 1000 > Number(stkGho?.distributionEnd);
 43  
 44    return (
 45      <Box
 46        sx={(theme) => ({
 47          display: 'flex',
 48          justifyContent: 'space-between',
 49          alignItems: 'center',
 50          flexDirection: 'row',
 51          borderRadius: '6px',
 52          border: `1px solid ${theme.palette.divider}`,
 53          p: 4,
 54          background: theme.palette.background.paper,
 55          width: '250px',
 56          height: '68px',
 57          margin: '0 auto',
 58          position: 'relative',
 59          '&:after': {
 60            content: "''",
 61            position: 'absolute',
 62            bottom: 0,
 63            left: '0px',
 64            width: 'calc(100% + 32px)',
 65            height: '1px',
 66            bgcolor: 'transparent',
 67          },
 68        })}
 69      >
 70        <Box
 71          sx={{
 72            display: 'flex',
 73            justifyContent: 'space-between',
 74            alignItems: 'center',
 75          }}
 76        >
 77          <TokenIcon symbol={icon} />
 78          <Stack direction="column" alignItems="start">
 79            <Typography variant="subheader1" color="text.primary" ml={2}>
 80              {stakedToken}
 81            </Typography>
 82            {stakedToken === 'GHO' && (
 83              <Box sx={{ mx: 2 }}>
 84                <MeritIncentivesButton symbol={stakedToken} market={CustomMarket.proto_mainnet_v3} />
 85              </Box>
 86            )}
 87          </Stack>
 88        </Box>
 89        <Box
 90          sx={{
 91            display: 'block',
 92            width: { xs: '100%', xsm: 'unset' },
 93            justifyContent: 'space-between',
 94            alignItems: 'center',
 95          }}
 96        >
 97          <Box display={'flex'} alignItems={'center'}>
 98            <Typography variant="subheader2" color="text.secondary">
 99              <Trans>Staking APR</Trans>
100            </Typography>
101  
102            {distributionEnded && stakedToken === 'GHO' && (
103              <TextWithTooltip wrapperProps={{ marginBottom: '1px' }} iconColor="warning.main">
104                <Trans>
105                  The current incentives period, decided on by the Aave community, has ended.
106                  Governance is in the process on renewing, check for updates.{' '}
107                  <Link
108                    href="https://governance.aave.com"
109                    sx={{ textDecoration: 'underline' }}
110                    variant="caption"
111                    color="text.secondary"
112                  >
113                    Learn more
114                  </Link>
115                  .
116                </Trans>
117              </TextWithTooltip>
118            )}
119          </Box>
120  
121          <FormattedNumber
122            value={parseFloat(stakingAPY || '0') / 10000}
123            percent
124            variant="secondary14"
125            color="text.primary"
126          />
127        </Box>
128      </Box>
129    );
130  };