1  import { ExternalLinkIcon } from '@heroicons/react/solid';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Button, Divider, SvgIcon, Typography } from '@mui/material';
  4  import { Link } from 'src/components/primitives/Link';
  5  import { ComputedReserveData } from 'src/hooks/app-data-provider/useAppDataProvider';
  6  
  7  import { ReserveEModePanel } from '../ReserveEModePanel';
  8  import { PanelRow, PanelTitle } from '../ReservePanels';
  9  import { GhoBorrowInfo } from './GhoBorrowInfo';
 10  import { GhoDiscountCalculator } from './GhoDiscountCalculator';
 11  
 12  type GhoReserveConfigurationProps = {
 13    reserve: ComputedReserveData;
 14  };
 15  
 16  export const GhoReserveConfiguration: React.FC<GhoReserveConfigurationProps> = ({ reserve }) => {
 17    return (
 18      <>
 19        <PanelRow>
 20          <PanelTitle>
 21            <Trans>About GHO</Trans>
 22          </PanelTitle>
 23          <Box>
 24            <Typography gutterBottom>
 25              <Trans>
 26                GHO is a native decentralized, collateral-backed digital asset pegged to USD. It is
 27                created by users via borrowing against multiple collateral. When user repays their GHO
 28                borrow position, the protocol burns that user&apos;s GHO. All the interest payments
 29                accrued by minters of GHO would be directly transferred to the AaveDAO treasury.
 30              </Trans>
 31            </Typography>
 32            <Box
 33              sx={{
 34                display: 'flex',
 35                alignItems: 'center',
 36                flexWrap: 'wrap',
 37              }}
 38            >
 39              <Button
 40                component={Link}
 41                variant="outlined"
 42                size="small"
 43                href="https://github.com/aave/gho/blob/main/techpaper/GHO_Technical_Paper.pdf"
 44                sx={{ p: '2px 4px', mt: 2, mr: 2, minWidth: 0 }}
 45              >
 46                <Typography sx={{ mr: 1, fontSize: '10px' }}>
 47                  <Trans>Techpaper</Trans>
 48                </Typography>
 49                <SvgIcon sx={{ fontSize: 14 }}>
 50                  <ExternalLinkIcon />
 51                </SvgIcon>
 52              </Button>
 53              <Button
 54                component={Link}
 55                variant="outlined"
 56                size="small"
 57                href="https://gho.xyz"
 58                sx={{ p: '2px 4px', mt: 2, mr: 2, minWidth: 0 }}
 59              >
 60                <Typography sx={{ mr: 1, fontSize: '10px' }}>
 61                  <Trans>Website</Trans>
 62                </Typography>
 63                <SvgIcon sx={{ fontSize: 14 }}>
 64                  <ExternalLinkIcon />
 65                </SvgIcon>
 66              </Button>
 67              <Button
 68                component={Link}
 69                variant="outlined"
 70                size="small"
 71                href="https://docs.gho.xyz/concepts/faq"
 72                sx={{ p: '2px 4px', mt: 2, mr: 2, minWidth: 0 }}
 73              >
 74                <Typography sx={{ mr: 1, fontSize: '10px' }}>
 75                  <Trans>FAQ</Trans>
 76                </Typography>
 77                <SvgIcon sx={{ fontSize: 14 }}>
 78                  <ExternalLinkIcon />
 79                </SvgIcon>
 80              </Button>
 81            </Box>
 82          </Box>
 83        </PanelRow>
 84        <Divider sx={{ my: { xs: 6, sm: 10 } }} />
 85        <PanelRow>
 86          <PanelTitle>
 87            <Trans>Borrow info</Trans>
 88          </PanelTitle>
 89          <Box sx={{ flexGrow: 1, minWidth: 0, maxWidth: '100%', width: '100%' }}>
 90            <GhoBorrowInfo reserve={reserve} />
 91            <Box sx={{ mt: 8 }}>
 92              <GhoDiscountCalculator />
 93            </Box>
 94          </Box>
 95        </PanelRow>
 96        {reserve.eModes.length > 0 && (
 97          <>
 98            <Divider sx={{ my: { xs: 6, sm: 10 } }} />
 99            <ReserveEModePanel reserve={reserve} />
100          </>
101        )}
102      </>
103    );
104  };