1  import { valueToBigNumber } from '@aave/math-utils';
  2  import { ExternalLinkIcon } from '@heroicons/react/solid';
  3  import { Trans } from '@lingui/macro';
  4  import { Box, Button, SvgIcon, Typography, useMediaQuery, useTheme } from '@mui/material';
  5  import * as React from 'react';
  6  import { ConnectWalletPaper } from 'src/components/ConnectWalletPaper';
  7  import { ListColumn } from 'src/components/lists/ListColumn';
  8  import { ListHeaderTitle } from 'src/components/lists/ListHeaderTitle';
  9  import { ListHeaderWrapper } from 'src/components/lists/ListHeaderWrapper';
 10  import { ListItem } from 'src/components/lists/ListItem';
 11  import { ListWrapper } from 'src/components/lists/ListWrapper';
 12  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 13  import { Link, ROUTES } from 'src/components/primitives/Link';
 14  import { TokenIcon } from 'src/components/primitives/TokenIcon';
 15  import { useAppDataContext } from 'src/hooks/app-data-provider/useAppDataProvider';
 16  import { useWalletBalances } from 'src/hooks/app-data-provider/useWalletBalances';
 17  import { useModalContext } from 'src/hooks/useModal';
 18  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 19  import { useRootStore } from 'src/store/root';
 20  
 21  import { FaucetItemLoader } from './FaucetItemLoader';
 22  import { FaucetMobileItemLoader } from './FaucetMobileItemLoader';
 23  
 24  export default function FaucetAssetsList() {
 25    const { reserves, loading } = useAppDataContext();
 26    const { openFaucet } = useModalContext();
 27    const { currentAccount } = useWeb3Context();
 28    const currentMarket = useRootStore((store) => store.currentMarket);
 29    const currentMarketData = useRootStore((store) => store.currentMarketData);
 30    const { walletBalances } = useWalletBalances(currentMarketData);
 31  
 32    const theme = useTheme();
 33    const downToXSM = useMediaQuery(theme.breakpoints.down('xsm'));
 34  
 35    const listData = reserves
 36      .filter(
 37        (reserve) => !reserve.isWrappedBaseAsset && !reserve.isFrozen && reserve.symbol !== 'GHO'
 38      )
 39      .map((reserve) => {
 40        const walletBalance = valueToBigNumber(
 41          walletBalances[reserve.underlyingAsset]?.amount || '0'
 42        );
 43        return {
 44          ...reserve,
 45          walletBalance,
 46        };
 47      });
 48  
 49    if (!currentAccount) {
 50      return (
 51        <ConnectWalletPaper
 52          description={<Trans>Please connect your wallet to get free testnet assets.</Trans>}
 53        />
 54      );
 55    }
 56  
 57    return (
 58      <ListWrapper
 59        titleComponent={
 60          <Typography component="div" variant="h2" sx={{ mr: 4 }}>
 61            <Trans>Test Assets</Trans>
 62          </Typography>
 63        }
 64      >
 65        <ListHeaderWrapper px={downToXSM ? 4 : 6}>
 66          <ListColumn isRow maxWidth={280}>
 67            <ListHeaderTitle>
 68              <Trans>Asset</Trans>
 69            </ListHeaderTitle>
 70          </ListColumn>
 71  
 72          {!downToXSM && (
 73            <ListColumn>
 74              <ListHeaderTitle>
 75                <Trans>Wallet balance</Trans>
 76              </ListHeaderTitle>
 77            </ListColumn>
 78          )}
 79  
 80          <ListColumn maxWidth={280} />
 81        </ListHeaderWrapper>
 82  
 83        {loading ? (
 84          downToXSM ? (
 85            <>
 86              <FaucetMobileItemLoader />
 87              <FaucetMobileItemLoader />
 88              <FaucetMobileItemLoader />
 89            </>
 90          ) : (
 91            <>
 92              <FaucetItemLoader />
 93              <FaucetItemLoader />
 94              <FaucetItemLoader />
 95              <FaucetItemLoader />
 96              <FaucetItemLoader />
 97            </>
 98          )
 99        ) : (
100          listData.map((reserve) => (
101            <ListItem
102              px={downToXSM ? 4 : 6}
103              key={reserve.symbol}
104              data-cy={`faucetListItem_${reserve.symbol.toUpperCase()}`}
105            >
106              <ListColumn isRow maxWidth={280}>
107                <Link
108                  href={ROUTES.reserveOverview(reserve.underlyingAsset, currentMarket)}
109                  noWrap
110                  sx={{ display: 'inline-flex', alignItems: 'center' }}
111                >
112                  <TokenIcon symbol={reserve.iconSymbol} fontSize="large" />
113                  <Box sx={{ pl: 3.5, overflow: 'hidden' }}>
114                    <Typography variant="h4" noWrap>
115                      {reserve.name}
116                    </Typography>
117                    <Typography variant="subheader2" color="text.muted" noWrap>
118                      {reserve.symbol}
119                    </Typography>
120                  </Box>
121                </Link>
122              </ListColumn>
123  
124              {!downToXSM && (
125                <ListColumn>
126                  <FormattedNumber
127                    compact
128                    value={reserve.walletBalance.toString()}
129                    variant="main16"
130                  />
131                </ListColumn>
132              )}
133  
134              <ListColumn maxWidth={280} align="right">
135                {!currentMarketData.addresses.FAUCET ? (
136                  <Button
137                    href="https://faucet.circle.com/"
138                    component={Link}
139                    variant="contained"
140                    endIcon={
141                      <SvgIcon sx={{ width: 14, height: 14 }}>
142                        <ExternalLinkIcon />
143                      </SvgIcon>
144                    }
145                  >
146                    <Trans>Faucet</Trans>
147                  </Button>
148                ) : (
149                  <Button variant="contained" onClick={() => openFaucet(reserve.underlyingAsset)}>
150                    <Trans>Faucet</Trans>
151                  </Button>
152                )}
153              </ListColumn>
154            </ListItem>
155          ))
156        )}
157      </ListWrapper>
158    );
159  }