1  import { Trans } from '@lingui/macro';
 2  import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 3  import * as React from 'react';
 4  import { Link } from 'src/components/primitives/Link';
 5  import { PageTitle } from 'src/components/TopInfoPanel/PageTitle';
 6  import { useRootStore } from 'src/store/root';
 7  
 8  import { TopInfoPanel } from '../../components/TopInfoPanel/TopInfoPanel';
 9  
10  export const FaucetTopPanel = () => {
11    const { breakpoints } = useTheme();
12    const md = useMediaQuery(breakpoints.down('md'));
13    const xsm = useMediaQuery(breakpoints.down('xsm'));
14    const currentMarketData = useRootStore((store) => store.currentMarketData);
15    return (
16      <TopInfoPanel
17        pageTitle={<></>}
18        titleComponent={
19          <Box>
20            <PageTitle
21              pageTitle={<Trans>{currentMarketData.marketTitle} Faucet</Trans>}
22              withMarketSwitcher={true}
23            />
24            <Box sx={{ width: md ? (xsm ? '320px' : '540px') : '860px' }}>
25              <Typography variant="description" color="#A5A8B6">
26                <Trans>
27                  With testnet Faucet you can get free assets to test the Aave Protocol. Make sure to
28                  switch your wallet provider to the appropriate testnet network, select desired
29                  asset, and click ‘Faucet’ to get tokens transferred to your wallet. The assets on a
30                  testnet are not “real,” meaning they have no monetary value.{' '}
31                  <Link
32                    color="#A5A8B6"
33                    href="https://docs.aave.com/developers/guides/testing-guide"
34                    sx={{ textDecoration: 'underline' }}
35                  >
36                    Learn more
37                  </Link>
38                </Trans>
39              </Typography>
40            </Box>
41          </Box>
42        }
43      />
44    );
45  };