1  import { ChevronRightIcon } from '@heroicons/react/solid';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Button, Typography, useMediaQuery, useTheme } from '@mui/material';
  4  import { Link, ROUTES } from 'src/components/primitives/Link';
  5  import { useRootStore } from 'src/store/root';
  6  import { CustomMarket, marketsData } from 'src/ui-config/marketsConfig';
  7  
  8  export const GhoDiscountProgram = () => {
  9    const { breakpoints } = useTheme();
 10    const downToXsm = useMediaQuery(breakpoints.down('xsm'));
 11    const currentMarket = useRootStore((store) => store.currentMarket);
 12  
 13    const ghoTokenAddress = marketsData[
 14      CustomMarket.proto_mainnet_v3
 15    ].addresses.GHO_TOKEN_ADDRESS?.toLowerCase() as string;
 16  
 17    return (
 18      <Box
 19        sx={{
 20          overflow: 'hidden',
 21          height: {
 22            xs: 132,
 23            xsm: 124,
 24          },
 25          display: 'flex',
 26        }}
 27      >
 28        <Box
 29          sx={{
 30            width: '100%',
 31            marginTop: 'auto',
 32            p: 4,
 33            borderRadius: {
 34              xs: 0,
 35              xsm: 4,
 36            },
 37            display: 'flex',
 38            flexDirection: 'column',
 39            alignItems: {
 40              xs: 'flex-start',
 41              // xsm: 'center',
 42            },
 43            height: {
 44              xs: 120,
 45              xsm: 104,
 46            },
 47            backgroundColor: '#9C93B338',
 48            position: 'relative',
 49          }}
 50        >
 51          {/* <Box
 52            component="img"
 53            src="/illustration-green.svg"
 54            sx={{
 55              position: 'absolute',
 56              left: -40,
 57              top: -33,
 58              width: 100,
 59              height: 100,
 60              overflow: 'hidden',
 61              display: {
 62                xs: 'none',
 63                xsm: 'block',
 64              },
 65              transform: 'matrix(1, -0.14, 0.14, 1, 0, 0)',
 66            }}
 67            width={220}
 68            height={220}
 69            alt="gho coin"
 70          /> */}
 71          <Box display="flex" flexDirection="column" alignItems={['flex-start']} gap={3}>
 72            <Typography
 73              variant="subheader1"
 74              color="text.primary"
 75              width={['221px', '400px']}
 76              textAlign={['left']}
 77            >
 78              {downToXsm ? (
 79                <Trans>stkAAVE holders get a discount on GHO borrow rate</Trans>
 80              ) : (
 81                <Trans>Holders of stkAAVE receive a discount on the GHO borrowing rate</Trans>
 82              )}
 83            </Typography>
 84            <Button
 85              variant="contained"
 86              component={Link}
 87              href={ROUTES.reserveOverview(ghoTokenAddress, currentMarket)}
 88              size={downToXsm ? 'medium' : 'small'}
 89              sx={{
 90                alignItems: 'center',
 91                display: 'flex',
 92                gap: [2, 1],
 93              }}
 94            >
 95              <Trans>{downToXsm ? 'View details' : 'VIEW DETAILS'}</Trans>
 96              <ChevronRightIcon width={downToXsm ? 20 : 12} height={downToXsm ? 20 : 12} />
 97            </Button>
 98          </Box>
 99          <Box
100            component="img"
101            src="/illustration-green.svg"
102            sx={{
103              position: 'absolute',
104              // left: -40,
105              top: -20,
106  
107              right: 8,
108              width: 120,
109              height: 120,
110              overflow: 'hidden',
111              display: {
112                // xs: 'none',
113                xsm: 'block',
114              },
115              transform: 'matrix(1, -0.14, 0.14, 1, 0, 0)',
116            }}
117            width={220}
118            height={220}
119            alt="gho coin"
120          />
121          {/* <Box
122            component="img"
123            src="/illustration_friendly_ghost.png"
124            sx={{
125              position: 'absolute',
126              right: [-200, -190],
127              bottom: [-265, -270],
128              overflow: 'hidden',
129              transform: 'scaleY(0.5) scaleX(0.5)',
130            }}
131            alt="gho ghost"
132          /> */}
133        </Box>
134      </Box>
135    );
136  };