/ src / modules / staking / GetABPTokenModal.tsx
GetABPTokenModal.tsx
 1  import { ExternalLinkIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Button, SvgIcon, Typography } from '@mui/material';
 4  import { BasicModal } from 'src/components/primitives/BasicModal';
 5  import { TokenIcon } from 'src/components/primitives/TokenIcon';
 6  import { useRootStore } from 'src/store/root';
 7  import { GENERAL } from 'src/utils/mixPanelEvents';
 8  
 9  type GetABPTokenModalProps = {
10    open: boolean;
11    close: () => void;
12  };
13  
14  export const GetABPTokenModal = ({ open, close }: GetABPTokenModalProps) => {
15    const trackEvent = useRootStore((store) => store.trackEvent);
16  
17    return (
18      <>
19        <BasicModal open={open} setOpen={close}>
20          <Typography variant="h2">
21            <Trans>Get ABP v2 Token</Trans>
22          </Typography>
23          <Typography sx={{ my: 6 }}>
24            <Trans>
25              The Aave Balancer Pool Token (ABPT) is a liquidity pool token. You can receive ABPT by
26              depositing a combination of AAVE + wstETH in the Balancer liquidity pool. You can then
27              stake your BPT in the Safety Module to secure the protocol and earn Safety Incentives.
28            </Trans>
29          </Typography>
30          <Button
31            variant="outlined"
32            size="large"
33            endIcon={
34              <SvgIcon>
35                <ExternalLinkIcon />
36              </SvgIcon>
37            }
38            fullWidth
39            sx={{ px: 4 }}
40            href="https://balancer.fi/pools/ethereum/v2/0x3de27efa2f1aa663ae5d458857e731c129069f29000200000000000000000588"
41            target="_blank"
42            rel="noopener"
43            onClick={() =>
44              trackEvent(GENERAL.EXTERNAL_LINK, {
45                Link: 'Get APBT Tokens',
46              })
47            }
48          >
49            <Box sx={{ display: 'flex', flexGrow: 1 }}>
50              <TokenIcon symbol="BAL" sx={{ mr: 2 }} />
51              <Trans>Go to Balancer Pool</Trans>
52            </Box>
53          </Button>
54        </BasicModal>
55      </>
56    );
57  };