utils#getBulkPairData TypeScript Examples
The following examples show how to use
utils#getBulkPairData.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AnalyticsPairs.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
AnalyticsPairs: React.FC = () => {
const classes = useStyles();
const [topPairs, updateTopPairs] = useState<any[] | null>(null);
useEffect(() => {
const fetchTopPairs = async () => {
updateTopPairs(null);
const [newPrice] = await getEthPrice();
const pairs = await getTopPairs(500);
const formattedPairs = pairs
? pairs.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTopPairs(pairData);
}
};
fetchTopPairs();
}, [updateTopPairs]);
return (
<Box width='100%' mb={3}>
<Typography>All Pairs</Typography>
<Box mt={4} className={classes.panel}>
{topPairs ? (
<PairTable data={topPairs} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</Box>
);
}
Example #2
| Source File: AnalyticsOverview.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsOverview: React.FC = () => {
const classes = useStyles();
const history = useHistory();
const { breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const { globalData, updateGlobalData } = useGlobalData();
const [topTokens, updateTopTokens] = useState<any[] | null>(null);
const [topPairs, updateTopPairs] = useState<any[] | null>(null);
useEffect(() => {
const fetchGlobalData = async () => {
const [newPrice, oneDayPrice] = await getEthPrice();
const globalData = await getGlobalData(newPrice, oneDayPrice);
if (globalData) {
updateGlobalData({ data: globalData });
}
};
const fetchTopTokens = async () => {
updateTopTokens(null);
const [newPrice, oneDayPrice] = await getEthPrice();
const topTokensData = await getTopTokens(
newPrice,
oneDayPrice,
GlobalConst.utils.ROWSPERPAGE,
);
if (topTokensData) {
updateTopTokens(topTokensData);
}
};
const fetchTopPairs = async () => {
updateTopPairs(null);
const [newPrice] = await getEthPrice();
const pairs = await getTopPairs(GlobalConst.utils.ROWSPERPAGE);
const formattedPairs = pairs
? pairs.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTopPairs(pairData);
}
};
fetchGlobalData();
fetchTopTokens();
fetchTopPairs();
}, [updateGlobalData, updateTopTokens, updateTopPairs]);
return (
<Box width='100%' mb={3}>
<Grid container spacing={4}>
<Grid item xs={12} sm={12} md={6}>
<Box className={classes.panel} padding={isMobile ? 1.5 : 3} width={1}>
<AnalyticsLiquidityChart />
</Box>
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box
className={classes.panel}
padding={isMobile ? 1.5 : 3}
width={1}
height={1}
display='flex'
flexDirection='column'
justifyContent='space-between'
>
<AnalyticsVolumeChart />
</Box>
</Grid>
</Grid>
<Box mt={4}>
<Box
display='flex'
flexWrap='wrap'
paddingX={4}
paddingY={1.5}
className={classes.panel}
>
{globalData ? (
<AnalyticsInfo data={globalData} />
) : (
<Skeleton width='100%' height={20} />
)}
</Box>
</Box>
<Box mt={4}>
<Box display='flex' justifyContent='space-between' alignItems='center'>
<Box className={classes.headingWrapper}>
<Typography variant='h6'>Top Tokens</Typography>
</Box>
<Box
className={classes.headingWrapper}
style={{ cursor: 'pointer' }}
onClick={() => history.push(`/analytics/tokens`)}
>
<Typography variant='h6'>See All</Typography>
<ArrowForwardIos />
</Box>
</Box>
</Box>
<Box
mt={3}
paddingX={isMobile ? 1.5 : 4}
paddingY={isMobile ? 1.5 : 3}
className={classes.panel}
>
{topTokens ? (
<TokensTable data={topTokens} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
<Box mt={4}>
<Box display='flex' justifyContent='space-between' alignItems='center'>
<Box className={classes.headingWrapper}>
<Typography variant='h6'>Top Pairs</Typography>
</Box>
<Box
className={classes.headingWrapper}
style={{ cursor: 'pointer' }}
onClick={() => history.push(`/analytics/pairs`)}
>
<Typography variant='h6'>See All</Typography>
<ArrowForwardIos />
</Box>
</Box>
</Box>
<Box
mt={3}
paddingX={isMobile ? 1.5 : 4}
paddingY={isMobile ? 1.5 : 3}
className={classes.panel}
>
{topPairs ? (
<PairTable data={topPairs} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</Box>
);
}
Example #3
| Source File: AnalyticsPairDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsPairDetails: React.FC = () => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const history = useHistory();
const match = useRouteMatch<{ id: string }>();
const pairAddress = match.params.id;
const [pairData, setPairData] = useState<any>(null);
const [pairTransactions, setPairTransactions] = useState<any>(null);
const pairTransactionsList = useMemo(() => {
if (pairTransactions) {
const mints = pairTransactions.mints.map((item: any) => {
return { ...item, type: TxnType.ADD };
});
const swaps = pairTransactions.swaps.map((item: any) => {
const amount0 = item.amount0Out > 0 ? item.amount0Out : item.amount1Out;
const amount1 = item.amount0In > 0 ? item.amount0In : item.amount1In;
const token0 =
item.amount0Out > 0 ? item.pair.token0 : item.pair.token1;
const token1 =
item.amount0Out > 0 ? item.pair.token1 : item.pair.token0;
return {
...item,
amount0,
amount1,
pair: { token0, token1 },
type: TxnType.SWAP,
};
});
const burns = pairTransactions.burns.map((item: any) => {
return { ...item, type: TxnType.REMOVE };
});
return mints.concat(swaps).concat(burns);
} else {
return null;
}
}, [pairTransactions]);
const { chainId } = useActiveWeb3React();
const currency0 = pairData
? new Token(
ChainId.MATIC,
getAddress(pairData.token0.id),
pairData.token0.decimals,
)
: undefined;
const currency1 = pairData
? new Token(
ChainId.MATIC,
getAddress(pairData.token1.id),
pairData.token1.decimals,
)
: undefined;
const token0Rate =
pairData && pairData.reserve0 && pairData.reserve1
? Number(pairData.reserve1) / Number(pairData.reserve0) >= 0.0001
? (Number(pairData.reserve1) / Number(pairData.reserve0)).toFixed(
Number(pairData.reserve1) / Number(pairData.reserve0) > 1 ? 2 : 4,
)
: '< 0.0001'
: '-';
const token1Rate =
pairData && pairData.reserve0 && pairData.reserve1
? Number(pairData.reserve0) / Number(pairData.reserve1) >= 0.0001
? (Number(pairData.reserve0) / Number(pairData.reserve1)).toFixed(
Number(pairData.reserve0) / Number(pairData.reserve1) > 1 ? 2 : 4,
)
: '< 0.0001'
: '-';
const usingUtVolume =
pairData &&
pairData.oneDayVolumeUSD === 0 &&
!!pairData.oneDayVolumeUntracked;
const fees =
pairData && (pairData.oneDayVolumeUSD || pairData.oneDayVolumeUSD === 0)
? usingUtVolume
? (
Number(pairData.oneDayVolumeUntracked) *
GlobalConst.utils.FEEPERCENT
).toLocaleString()
: (
Number(pairData.oneDayVolumeUSD) * GlobalConst.utils.FEEPERCENT
).toLocaleString()
: '-';
useEffect(() => {
async function checkEthPrice() {
const [newPrice] = await getEthPrice();
const pairInfo = await getBulkPairData([pairAddress], newPrice);
if (pairInfo && pairInfo.length > 0) {
setPairData(pairInfo[0]);
}
}
async function fetchTransctions() {
const transactions = await getPairTransactions(pairAddress);
if (transactions) {
setPairTransactions(transactions);
}
}
checkEthPrice();
fetchTransctions();
}, [pairAddress]);
return (
<>
<AnalyticsHeader type='pair' data={pairData} />
{pairData ? (
<>
<Box
width={1}
display='flex'
flexWrap='wrap'
justifyContent='space-between'
>
<Box>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
size={32}
/>
<Box ml={1}>
<Typography className={classes.heading2}>
<Link to={`/analytics/token/${pairData.token0.id}`}>
{pairData.token0.symbol}
</Link>{' '}
/{' '}
<Link to={`/analytics/token/${pairData.token1.id}`}>
{pairData.token1.symbol}
</Link>
</Typography>
</Box>
</Box>
<Box mt={2} display='flex'>
<Box
paddingY={0.75}
paddingX={1.5}
borderRadius={20}
display='flex'
alignItems='center'
bgcolor={palette.grey.A700}
>
<CurrencyLogo currency={currency0} size='16px' />
<Typography
variant='body2'
color='textPrimary'
style={{ marginLeft: 6 }}
>
1 {pairData.token0.symbol} = {token0Rate}{' '}
{pairData.token1.symbol}
</Typography>
</Box>
<Box
padding={0.75}
paddingX={1.5}
ml={2}
borderRadius={20}
display='flex'
alignItems='center'
bgcolor={palette.grey.A700}
>
<CurrencyLogo currency={currency1} size='16px' />
<Typography
variant='body2'
color='textPrimary'
style={{ marginLeft: 6 }}
>
1 {pairData.token1.symbol} = {token1Rate}{' '}
{pairData.token0.symbol}
</Typography>
</Box>
</Box>
</Box>
<Box my={2} display='flex'>
<Box
className={classes.button}
mr={1.5}
border={`1px solid ${palette.primary.main}`}
onClick={() => {
history.push(
`/pools?currency0=${pairData.token0.id}¤cy1=${pairData.token1.id}`,
);
}}
>
<Typography variant='body2'>Add Liquidity</Typography>
</Box>
<Box
className={cx(classes.button, classes.filledButton)}
onClick={() => {
history.push(
`/swap?currency0=${pairData.token0.id}¤cy1=${pairData.token1.id}`,
);
}}
>
<Typography variant='body2'>Swap</Typography>
</Box>
</Box>
</Box>
<Box width={1} className={classes.panel} mt={4}>
<Grid container>
<Grid item xs={12} sm={12} md={6}>
<AnalyticsPairChart pairData={pairData} />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box
my={2}
height={1}
display='flex'
justifyContent='center'
alignItems='center'
>
<Box
width={isMobile ? 1 : 0.8}
display='flex'
justifyContent='space-between'
>
<Box width={212}>
<Box>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
TOTAL TOKENS LOCKED
</Typography>
<Box
mt={1.5}
bgcolor={palette.grey.A400}
borderRadius={8}
padding={1.5}
>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency0} size='16px' />
<Typography
variant='caption'
color='textPrimary'
style={{ marginLeft: 6 }}
>
{pairData.token0.symbol} :
</Typography>
</Box>
<Typography variant='caption' color='textPrimary'>
{Number(pairData.reserve0).toLocaleString()}
</Typography>
</Box>
<Box
mt={1}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency1} size='16px' />
<Typography
variant='caption'
color='textPrimary'
style={{ marginLeft: 6 }}
>
{pairData.token1.symbol} :
</Typography>
</Box>
<Typography variant='caption' color='textPrimary'>
{Number(pairData.reserve1).toLocaleString()}
</Typography>
</Box>
</Box>
</Box>
<Box mt={4}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
7d Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${pairData.oneWeekVolumeUSD.toLocaleString()}
</Typography>
</Box>
<Box mt={4}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h FEES
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${fees}
</Typography>
</Box>
</Box>
<Box width={140}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
TOTAL LIQUIDITY
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
$
{Number(
pairData.reserveUSD
? pairData.reserveUSD
: pairData.trackedReserveUSD,
).toLocaleString()}
</Typography>
<Box mt={4}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${pairData.oneDayVolumeUSD.toLocaleString()}
</Typography>
</Box>
<Box mt={4}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
Contract Address
</Typography>
<Typography
variant='h5'
style={{ color: palette.primary.main }}
>
{chainId ? (
<a
href={getEtherscanLink(
chainId,
pairData.id,
'address',
)}
target='_blank'
rel='noopener noreferrer'
style={{
color: palette.primary.main,
textDecoration: 'none',
}}
>
{shortenAddress(pairData.id)}
</a>
) : (
shortenAddress(pairData.id)
)}
</Typography>
</Box>
</Box>
</Box>
</Box>
</Grid>
</Grid>
</Box>
<Box width={1} mt={5}>
<Typography variant='body1'>Transactions</Typography>
</Box>
<Box width={1} className={classes.panel} mt={4}>
{pairTransactionsList ? (
<TransactionsTable data={pairTransactionsList} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</>
) : (
<Skeleton width='100%' height={100} />
)}
</>
);
}
Example #4
| Source File: AnalyticsTokenDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AnalyticsTokenDetails: React.FC = () => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const history = useHistory();
const match = useRouteMatch<{ id: string }>();
const tokenAddress = match.params.id;
const [token, setToken] = useState<any>(null);
const { chainId } = useActiveWeb3React();
const currency = token
? new Token(ChainId.MATIC, getAddress(token.id), token.decimals)
: undefined;
const [tokenPairs, updateTokenPairs] = useState<any>(null);
const {
bookmarkTokens,
addBookmarkToken,
removeBookmarkToken,
} = useBookmarkTokens();
useEffect(() => {
async function fetchTokenInfo() {
const [newPrice, oneDayPrice] = await getEthPrice();
const tokenInfo = await getTokenInfo(newPrice, oneDayPrice, tokenAddress);
if (tokenInfo) {
setToken(tokenInfo[0]);
}
}
fetchTokenInfo();
}, [tokenAddress]);
useEffect(() => {
async function fetchTokenPairs() {
const [newPrice] = await getEthPrice();
const tokenPairs = await getTokenPairs2(tokenAddress);
const formattedPairs = tokenPairs
? tokenPairs.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTokenPairs(pairData);
}
}
fetchTokenPairs();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [updateTokenPairs, tokenAddress]);
const tokenPercentColor = getPriceColor(
token ? Number(token.priceChangeUSD) : 0,
palette,
);
return (
<>
<AnalyticsHeader type='token' data={token} />
{token ? (
<>
<Box
width={1}
display='flex'
flexWrap='wrap'
justifyContent='space-between'
>
<Box display='flex'>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Box display='flex' alignItems='center'>
<Box display='flex' alignItems='flex-end' mr={0.5}>
<Typography className={classes.heading1}>
{token.name}{' '}
</Typography>
<Typography className={classes.heading2}>
({token.symbol})
</Typography>
</Box>
{bookmarkTokens.includes(token.id) ? (
<StarChecked
onClick={() => removeBookmarkToken(token.id)}
/>
) : (
<StarUnchecked onClick={() => addBookmarkToken(token.id)} />
)}
</Box>
<Box mt={1.25} display='flex' alignItems='center'>
<Typography
variant='h5'
style={{ color: palette.text.primary }}
>
${formatNumber(token.priceUSD)}
</Typography>
<Box
className={classes.priceChangeWrapper}
ml={2}
bgcolor={tokenPercentColor.bgColor}
color={tokenPercentColor.textColor}
>
<Typography variant='body2'>
{getFormattedPrice(Number(token.priceChangeUSD))}%
</Typography>
</Box>
</Box>
</Box>
</Box>
<Box my={2} display='flex'>
<Box
className={classes.button}
mr={1.5}
border={`1px solid ${palette.primary.main}`}
onClick={() => {
history.push(`/pools?currency0=${token.id}¤cy1=ETH`);
}}
>
<Typography variant='body2'>Add Liquidity</Typography>
</Box>
<Box
className={cx(classes.button, classes.filledButton)}
onClick={() => {
history.push(`/swap?currency0=${token.id}¤cy1=ETH`);
}}
>
<Typography variant='body2'>Swap</Typography>
</Box>
</Box>
</Box>
<Box width={1} className={classes.panel} mt={4}>
<Grid container>
<Grid item xs={12} sm={12} md={6}>
<AnalyticsTokenChart token={token} />
</Grid>
<Grid item xs={12} sm={12} md={6}>
<Box
my={2}
height={1}
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='center'
>
<Box
width={isMobile ? 1 : 0.8}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
TOTAL LIQUIDITY
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.totalLiquidityUSD.toLocaleString()}
</Typography>
</Box>
<Box width={140}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
7d Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.oneWeekVolumeUSD.toLocaleString()}
</Typography>
</Box>
</Box>
<Box
width={isMobile ? 1 : 0.8}
mt={4}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h Trading Vol
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
${token.oneDayVolumeUSD.toLocaleString()}
</Typography>
</Box>
<Box width={140}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
24h FEES
</Typography>
<Typography variant={isMobile ? 'body1' : 'h5'}>
$
{(
token.oneDayVolumeUSD * GlobalConst.utils.FEEPERCENT
).toLocaleString()}
</Typography>
</Box>
</Box>
<Box
width={isMobile ? 1 : 0.8}
mt={4}
display='flex'
justifyContent='space-between'
>
<Box width={180}>
<Typography
variant='caption'
style={{ color: palette.text.disabled }}
>
Contract Address
</Typography>
<Typography
variant='h5'
style={{ color: palette.primary.main }}
>
{chainId ? (
<a
href={getEtherscanLink(
chainId,
token.id,
'address',
)}
target='_blank'
rel='noopener noreferrer'
style={{
color: palette.primary.main,
textDecoration: 'none',
}}
>
{shortenAddress(token.id)}
</a>
) : (
shortenAddress(token.id)
)}
</Typography>
</Box>
</Box>
</Box>
</Grid>
</Grid>
</Box>
<Box width={1} mt={5}>
<Typography variant='body1'>{token.symbol} Pools</Typography>
</Box>
<Box width={1} className={classes.panel} mt={4}>
{tokenPairs ? (
<PairTable data={tokenPairs} />
) : (
<Skeleton variant='rect' width='100%' height={150} />
)}
</Box>
</>
) : (
<Skeleton width='100%' height={100} />
)}
</>
);
}
Example #5
| Source File: LiquidityPools.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
LiquidityPools: React.FC<{
token1: Token;
token2: Token;
}> = ({ token1, token2 }) => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [liquidityPoolClosed, setLiquidityPoolClosed] = useState(false);
const [liquidityFilterIndex, setLiquidityFilterIndex] = useState(0);
const [tokenPairs, updateTokenPairs] = useState<any[] | null>(null);
const token1Address = token1.address.toLowerCase();
const token2Address = token2.address.toLowerCase();
const allTokenList = useAllTokens();
const liquidityPairs = useMemo(
() =>
tokenPairs
? tokenPairs
.filter((pair: any) => {
if (liquidityFilterIndex === 0) {
return true;
} else if (liquidityFilterIndex === 1) {
return (
pair.token0.id === token1Address ||
pair.token1.id === token1Address
);
} else {
return (
pair.token0.id === token2Address ||
pair.token1.id === token2Address
);
}
})
.slice(0, 5)
: [],
[tokenPairs, liquidityFilterIndex, token1Address, token2Address],
);
const whiteListAddressList = useMemo(
() => Object.keys(allTokenList).map((item) => item.toLowerCase()),
[allTokenList],
);
useEffect(() => {
async function fetchTokenPairs() {
const [newPrice] = await getEthPrice();
const tokenPairs = await getTokenPairs(token1Address, token2Address);
const formattedPairs = tokenPairs
? tokenPairs
.filter((pair: any) => {
return (
whiteListAddressList.includes(pair?.token0?.id) &&
whiteListAddressList.includes(pair?.token1?.id)
);
})
.map((pair: any) => {
return pair.id;
})
: [];
const pairData = await getBulkPairData(formattedPairs, newPrice);
if (pairData) {
updateTokenPairs(pairData);
}
}
fetchTokenPairs();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [token1Address, token2Address, whiteListAddressList]);
return (
<>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
marginBottom={liquidityPoolClosed ? 0 : '20px'}
>
<Box display='flex' alignItems='center'>
<Typography
variant='h6'
style={{ color: palette.text.primary, marginRight: 8 }}
>
Liquidity Pools{' '}
</Typography>
<Typography variant='body2' style={{ color: palette.text.secondary }}>
({token1.symbol?.toUpperCase()}, {token2.symbol?.toUpperCase()})
</Typography>
</Box>
<Box
display='flex'
style={{ cursor: 'pointer', color: palette.text.secondary }}
onClick={() => setLiquidityPoolClosed(!liquidityPoolClosed)}
>
{liquidityPoolClosed ? <KeyboardArrowDown /> : <KeyboardArrowUp />}
</Box>
</Box>
{!liquidityPoolClosed && (
<>
<Divider />
<Box width={1}>
<Box display='flex' padding={2} className={classes.liquidityMain}>
<Box
display='flex'
width={0.5}
className={classes.liquidityFilter}
>
<Typography
variant='body2'
className={liquidityFilterIndex === 0 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(0)}
>
All
</Typography>
<Typography
variant='body2'
className={liquidityFilterIndex === 1 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(1)}
>
{token1.symbol?.toUpperCase()}
</Typography>
<Typography
variant='body2'
className={liquidityFilterIndex === 2 ? 'active' : ''}
onClick={() => setLiquidityFilterIndex(2)}
>
{token2.symbol?.toUpperCase()}
</Typography>
</Box>
{!isMobile && (
<>
<Box width={0.2}>
<Typography variant='body2' align='left'>
TVL
</Typography>
</Box>
<Box width={0.15}>
<Typography variant='body2' align='left'>
24h Volume
</Typography>
</Box>
<Box width={0.15}>
<Typography variant='body2' align='right'>
APY
</Typography>
</Box>
</>
)}
</Box>
{liquidityPairs.map((pair: any, ind: any) => (
<LiquidityPoolRow pair={pair} key={ind} />
))}
</Box>
</>
)}
</>
);
}
