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 };