state/user/hooks#useWatchlistPools TypeScript Examples
The following examples show how to use
state/user/hooks#useWatchlistPools.
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: index.tsx From glide-frontend with GNU General Public License v3.0 | 6 votes |
|
PoolsOverview: React.FC = () => {
const { t } = useTranslation()
// get all the pool datas that exist
const allPoolData = useAllPoolData()
const poolDatas = useMemo(() => {
return Object.values(allPoolData)
.map((pool) => pool.data)
.filter((pool) => pool)
}, [allPoolData])
const [savedPools] = useWatchlistPools()
const watchlistPools = usePoolDatas(savedPools)
return (
<Page>
<Heading scale="lg" mb="16px">
{t('Your Watchlist')}
</Heading>
<Card>
{watchlistPools.length > 0 ? (
<PoolTable poolDatas={watchlistPools} />
) : (
<Text px="24px" py="16px">
{t('Saved pools will appear here')}
</Text>
)}
</Card>
<Heading scale="lg" mt="40px" mb="16px" id="info-pools-title">
{t('All Pools')}
</Heading>
<PoolTable poolDatas={poolDatas} />
</Page>
)
}
Example #2
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 6 votes |
|
PoolsOverview: React.FC = () => {
const { t } = useTranslation()
// get all the pool datas that exist
const allPoolData = useAllPoolData()
const poolDatas = useMemo(() => {
return Object.values(allPoolData)
.map((pool) => pool.data)
.filter((pool) => pool)
}, [allPoolData])
const [savedPools] = useWatchlistPools()
const watchlistPools = usePoolDatas(savedPools)
return (
<Page>
<Heading scale="lg" mb="16px">
{t('Your Watchlist')}
</Heading>
<WatchlistCard justifyContent="center">
{watchlistPools.length > 0 ? (
<PoolTable poolDatas={watchlistPools} />
) : (
<Text px="24px" py="16px" bold>
{t('Saved farms will appear here')}
</Text>
)}
</WatchlistCard>
<Heading scale="lg" mt="40px" mb="16px" id="info-pools-title">
{t('All Farms')}
</Heading>
<PoolTable poolDatas={poolDatas} />
</Page>
)
}
Example #3
| Source File: PoolPage.tsx From glide-frontend with GNU General Public License v3.0 | 4 votes |
|
PoolPage: React.FC<RouteComponentProps<{ address: string }>> = ({
match: {
params: { address: routeAddress },
},
}) => {
const { isXs, isSm } = useMatchBreakpoints()
const { t } = useTranslation()
const [showWeeklyData, setShowWeeklyData] = useState(0)
const { tooltip, tooltipVisible, targetRef } = useTooltip(
t(`Based on last 7 days' performance. Does not account for impermanent loss`),
{},
)
// Needed to scroll up if user comes to this page by clicking on entry in the table
useEffect(() => {
window.scrollTo(0, 0)
}, [])
// In case somebody pastes checksummed address into url (since GraphQL expects lowercase address)
const address = routeAddress.toLowerCase()
const poolData = usePoolDatas([address])[0]
const chartData = usePoolChartData(address)
const transactions = usePoolTransactions(address)
const [watchlistPools, addPoolToWatchlist] = useWatchlistPools()
return (
<Page1 symbol={poolData ? `${poolData?.token0.symbol} / ${poolData?.token1.symbol}` : null}>
{poolData ? (
<>
<Flex justifyContent="space-between" mb="16px" flexDirection={['column', 'column', 'row']}>
<Breadcrumbs mb="32px">
<Link to="/info">
<Text color="primary">{t('Info')}</Text>
</Link>
<Link to="/info/pools">
<Text color="primary">{t('Pools')}</Text>
</Link>
<Flex>
<Text mr="8px">{`${poolData.token0.symbol} / ${poolData.token1.symbol}`}</Text>
</Flex>
</Breadcrumbs>
<Flex justifyContent={[null, null, 'flex-end']} mt={['8px', '8px', 0]}>
<LinkExternal mr="8px" href={getBscScanLink(address, 'address')}>
{t('View on explorer')}
</LinkExternal>
<SaveIcon fill={watchlistPools.includes(address)} onClick={() => addPoolToWatchlist(address)} />
</Flex>
</Flex>
<Flex flexDirection="column">
<Flex alignItems="center" mb={['8px', null]}>
<DoubleCurrencyLogo address0={poolData.token0.address} address1={poolData.token1.address} size={32} />
<Text
ml="38px"
bold
fontSize={isXs || isSm ? '24px' : '40px'}
id="info-pool-pair-title"
>{`${poolData.token0.symbol} / ${poolData.token1.symbol}`}</Text>
</Flex>
<Flex justifyContent="space-between" flexDirection={['column', 'column', 'column', 'row']}>
<Flex flexDirection={['column', 'column', 'row']} mb={['8px', '8px', null]}>
<Link to={`/info/token/${poolData.token0.address}`}>
<TokenButton>
<CurrencyLogo address={poolData.token0.address} size="24px" />
<Text fontSize="16px" ml="4px" style={{ whiteSpace: 'nowrap' }} width="fit-content">
{`1 ${poolData.token0.symbol} = ${formatAmount(poolData.token1Price, {
notation: 'standard',
displayThreshold: 0.001,
tokenPrecision: true,
})} ${poolData.token1.symbol}`}
</Text>
</TokenButton>
</Link>
<Link to={`/info/token/${poolData.token1.address}`}>
<TokenButton ml={[null, null, '10px']}>
<CurrencyLogo address={poolData.token1.address} size="24px" />
<Text fontSize="16px" ml="4px" style={{ whiteSpace: 'nowrap' }} width="fit-content">
{`1 ${poolData.token1.symbol} = ${formatAmount(poolData.token0Price, {
notation: 'standard',
displayThreshold: 0.001,
tokenPrecision: true,
})} ${poolData.token0.symbol}`}
</Text>
</TokenButton>
</Link>
</Flex>
<Flex>
<Link to={`/add/${poolData.token0.address}/${poolData.token1.address}`}>
<Button mr="8px" variant="secondary">
{t('Add Liquidity')}
</Button>
</Link>
<Link to={`/swap?inputCurrency=${poolData.token0.address}&outputCurrency=${poolData.token1.address}`}>
<Button>{t('Trade')}</Button>
</Link>
</Flex>
</Flex>
</Flex>
<ContentLayout>
<Box>
<Card>
<Box p="24px">
<Flex justifyContent="space-between">
<Flex flex="1" flexDirection="column">
<Text color="secondary" bold fontSize="12px" textTransform="uppercase">
{t('Liquidity')}
</Text>
<Text fontSize="24px" bold>
${formatAmount(poolData.liquidityUSD)}
</Text>
<Percent value={poolData.liquidityUSDChange} />
</Flex>
<Flex flex="1" flexDirection="column">
<Text color="secondary" bold fontSize="12px" textTransform="uppercase">
{t('LP reward APR')}
</Text>
<Text fontSize="24px" bold>
{formatAmount(poolData.lpApr7d)}%
</Text>
<Flex alignItems="center">
<span ref={targetRef}>
<HelpIcon color="textSubtle" />
</span>
<Text ml="4px" fontSize="12px" color="textSubtle">
{t('7D performance')}
</Text>
{tooltipVisible && tooltip}
</Flex>
</Flex>
</Flex>
<Text color="secondary" bold mt="24px" fontSize="12px" textTransform="uppercase">
{t('Total Tokens Locked')}
</Text>
<LockedTokensContainer>
<Flex justifyContent="space-between">
<Flex>
<CurrencyLogo address={poolData.token0.address} size="24px" />
<Text small color="textSubtle" ml="8px">
{poolData.token0.symbol}
</Text>
</Flex>
<Text small>{formatAmount(poolData.liquidityToken0)}</Text>
</Flex>
<Flex justifyContent="space-between">
<Flex>
<CurrencyLogo address={poolData.token1.address} size="24px" />
<Text small color="textSubtle" ml="8px">
{poolData.token1.symbol}
</Text>
</Flex>
<Text small>{formatAmount(poolData.liquidityToken1)}</Text>
</Flex>
</LockedTokensContainer>
</Box>
</Card>
<Card mt="16px">
<Flex flexDirection="column" p="24px">
<ButtonMenu
activeIndex={showWeeklyData}
onItemClick={(index) => setShowWeeklyData(index)}
scale="sm"
variant="subtle"
>
<ButtonMenuItem width="100%">{t('24H')}</ButtonMenuItem>
<ButtonMenuItem width="100%">{t('7D')}</ButtonMenuItem>
</ButtonMenu>
<Flex mt="24px">
<Flex flex="1" flexDirection="column">
<Text color="secondary" fontSize="12px" bold textTransform="uppercase">
{showWeeklyData ? t('Volume 7D') : t('Volume 24H')}
</Text>
<Text fontSize="24px" bold>
${showWeeklyData ? formatAmount(poolData.volumeUSDWeek) : formatAmount(poolData.volumeUSD)}
</Text>
<Percent value={showWeeklyData ? poolData.volumeUSDChangeWeek : poolData.volumeUSDChange} />
</Flex>
<Flex flex="1" flexDirection="column">
<Text color="secondary" fontSize="12px" bold textTransform="uppercase">
{showWeeklyData ? t('LP reward fees 7D') : t('LP reward fees 24H')}
</Text>
<Text fontSize="24px" bold>
${showWeeklyData ? formatAmount(poolData.lpFees7d) : formatAmount(poolData.lpFees24h)}
</Text>
<Text color="textSubtle" fontSize="12px">
{t('out of $%totalFees% total fees', {
totalFees: showWeeklyData
? formatAmount(poolData.totalFees7d)
: formatAmount(poolData.totalFees24h),
})}
</Text>
</Flex>
</Flex>
</Flex>
</Card>
</Box>
<ChartCard variant="pool" chartData={chartData} />
</ContentLayout>
<Heading mb="16px" mt="40px" scale="lg">
{t('Transactions')}
</Heading>
<TransactionTable transactions={transactions} />
</>
) : (
<Flex mt="80px" justifyContent="center">
<ButterflyLoader />
</Flex>
)}
</Page1>
)
}
Example #4
| Source File: index.tsx From glide-frontend with GNU General Public License v3.0 | 4 votes |
|
Search = () => {
const history = useHistory()
const { isXs, isSm } = useMatchBreakpoints()
const { t } = useTranslation()
const inputRef = useRef<HTMLInputElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const showMoreRef = useRef<HTMLDivElement>(null)
const [showMenu, setShowMenu] = useState(false)
const [value, setValue] = useState('')
const debouncedSearchTerm = useDebounce(value, 600)
const { tokens, pools, tokensLoading, poolsLoading, error } = useFetchSearchResults(debouncedSearchTerm)
const [tokensShown, setTokensShown] = useState(3)
const [poolsShown, setPoolsShown] = useState(3)
useEffect(() => {
setTokensShown(3)
setPoolsShown(3)
}, [debouncedSearchTerm])
const handleOutsideClick = (e: any) => {
const menuClick = menuRef.current && menuRef.current.contains(e.target)
const inputCLick = inputRef.current && inputRef.current.contains(e.target)
const showMoreClick = showMoreRef.current && showMoreRef.current.contains(e.target)
if (!menuClick && !inputCLick && !showMoreClick) {
setPoolsShown(3)
setTokensShown(3)
setShowMenu(false)
}
}
useEffect(() => {
if (showMenu) {
document.addEventListener('click', handleOutsideClick)
document.querySelector('body').style.overflow = 'hidden'
} else {
document.removeEventListener('click', handleOutsideClick)
document.querySelector('body').style.overflow = 'visible'
}
return () => {
document.removeEventListener('click', handleOutsideClick)
}
}, [showMenu])
// watchlist
const [savedTokens, addSavedToken] = useWatchlistTokens()
const [savedPools, addSavedPool] = useWatchlistPools()
const handleItemClick = (to: string) => {
setShowMenu(false)
setPoolsShown(3)
setTokensShown(3)
history.push(to)
}
// get date for watchlist
const watchListTokenData = useTokenDatas(savedTokens)
const watchListTokenLoading = watchListTokenData.length !== savedTokens.length
const watchListPoolData = usePoolDatas(savedPools)
const watchListPoolLoading = watchListPoolData.length !== savedPools.length
// filter on view
const [showWatchlist, setShowWatchlist] = useState(false)
const tokensForList = useMemo(() => {
if (showWatchlist) {
return watchListTokenData.filter((token) => tokenIncludesSearchTerm(token, value))
}
return tokens.sort((t0, t1) => (t0.volumeUSD > t1.volumeUSD ? -1 : 1))
}, [showWatchlist, tokens, watchListTokenData, value])
const poolForList = useMemo(() => {
if (showWatchlist) {
return watchListPoolData.filter((pool) => poolIncludesSearchTerm(pool, value))
}
return pools.sort((p0, p1) => (p0.volumeUSD > p1.volumeUSD ? -1 : 1))
}, [pools, showWatchlist, watchListPoolData, value])
const contentUnderTokenList = () => {
const isLoading = showWatchlist ? watchListTokenLoading : tokensLoading
const noTokensFound =
tokensForList.length === 0 && !isLoading && debouncedSearchTerm.length >= MINIMUM_SEARCH_CHARACTERS
const noWatchlistTokens = tokensForList.length === 0 && !isLoading
const showMessage = showWatchlist ? noWatchlistTokens : noTokensFound
const noTokensMessage = showWatchlist ? t('Saved tokens will appear here') : t('No results')
return (
<>
{isLoading && <Skeleton />}
{showMessage && <Text>{noTokensMessage}</Text>}
{!showWatchlist && debouncedSearchTerm.length < MINIMUM_SEARCH_CHARACTERS && (
<Text>{t('Search pools or tokens')}</Text>
)}
</>
)
}
const contentUnderPoolList = () => {
const isLoading = showWatchlist ? watchListPoolLoading : poolsLoading
const noPoolsFound =
poolForList.length === 0 && !poolsLoading && debouncedSearchTerm.length >= MINIMUM_SEARCH_CHARACTERS
const noWatchlistPools = poolForList.length === 0 && !isLoading
const showMessage = showWatchlist ? noWatchlistPools : noPoolsFound
const noPoolsMessage = showWatchlist ? t('Saved tokens will appear here') : t('No results')
return (
<>
{isLoading && <Skeleton />}
{showMessage && <Text>{noPoolsMessage}</Text>}
{!showWatchlist && debouncedSearchTerm.length < MINIMUM_SEARCH_CHARACTERS && (
<Text>{t('Search pools or tokens')}</Text>
)}
</>
)
}
return (
<>
{showMenu ? <Blackout /> : null}
<Container>
<StyledInput
type="text"
value={value}
onChange={(e) => {
setValue(e.target.value)
}}
placeholder={t('Search pools or tokens')}
ref={inputRef}
onFocus={() => {
setShowMenu(true)
}}
/>
<Menu hide={!showMenu} ref={menuRef}>
<Flex mb="16px">
<OptionButton enabled={!showWatchlist} onClick={() => setShowWatchlist(false)}>
{t('Search')}
</OptionButton>
<OptionButton enabled={showWatchlist} onClick={() => setShowWatchlist(true)}>
{t('Watchlist')}
</OptionButton>
</Flex>
{error && <Text color="failure">{t('Error occurred, please try again')}</Text>}
<ResponsiveGrid>
<Text bold color="secondary">
{t('Tokens')}
</Text>
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Price')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 24H')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Liquidity')}
</Text>
)}
</ResponsiveGrid>
{tokensForList.slice(0, tokensShown).map((token, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<HoverRowLink onClick={() => handleItemClick(`/info/token/${token.address}`)} key={i}>
<ResponsiveGrid>
<Flex>
<CurrencyLogo address={token.address} />
<Text ml="10px">
<Text>{`${token.name} (${token.symbol})`}</Text>
</Text>
<SaveIcon
id="watchlist-icon"
style={{ marginLeft: '8px' }}
fill={savedTokens.includes(token.address)}
onClick={(e) => {
e.stopPropagation()
addSavedToken(token.address)
}}
/>
</Flex>
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.priceUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.volumeUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.liquidityUSD)}</Text>}
</ResponsiveGrid>
</HoverRowLink>
)
})}
{contentUnderTokenList()}
<HoverText
onClick={() => {
setTokensShown(tokensShown + 5)
}}
hide={tokensForList.length <= tokensShown}
ref={showMoreRef}
>
{t('See more...')}
</HoverText>
<Break />
<ResponsiveGrid>
<Text bold color="secondary" mb="8px">
{t('Pools')}
</Text>
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 24H')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 7D')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Liquidity')}
</Text>
)}
</ResponsiveGrid>
{poolForList.slice(0, poolsShown).map((p, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<HoverRowLink onClick={() => handleItemClick(`/info/pool/${p.address}`)} key={i}>
<ResponsiveGrid>
<Flex>
<DoubleCurrencyLogo address0={p.token0.address} address1={p.token1.address} />
<Text ml="10px" style={{ whiteSpace: 'nowrap' }}>
<Text>{`${p.token0.symbol} / ${p.token1.symbol}`}</Text>
</Text>
<SaveIcon
id="watchlist-icon"
style={{ marginLeft: '10px' }}
fill={savedPools.includes(p.address)}
onClick={(e) => {
e.stopPropagation()
addSavedPool(p.address)
}}
/>
</Flex>
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.volumeUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.volumeUSDWeek)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.liquidityUSD)}</Text>}
</ResponsiveGrid>
</HoverRowLink>
)
})}
{contentUnderPoolList()}
<HoverText
onClick={() => {
setPoolsShown(poolsShown + 5)
}}
hide={poolForList.length <= poolsShown}
ref={showMoreRef}
>
{t('See more...')}
</HoverText>
</Menu>
</Container>
</>
)
}
Example #5
| Source File: PoolPage.tsx From vvs-ui with GNU General Public License v3.0 | 4 votes |
|
PoolPage: React.FC<RouteComponentProps<{ address: string }>> = ({
match: {
params: { address: routeAddress },
},
}) => {
const { isXs, isSm } = useMatchBreakpoints()
const { t } = useTranslation()
const [showWeeklyData, setShowWeeklyData] = useState(0)
const { tooltip, tooltipVisible, targetRef } = useTooltip(
t(`Based on last 7 days' performance. Does not account for impermanent loss`),
{},
)
// Needed to scroll up if user comes to this page by clicking on entry in the table
useEffect(() => {
window.scrollTo(0, 0)
}, [])
// In case somebody pastes checksummed address into url (since GraphQL expects lowercase address)
const address = routeAddress.toLowerCase()
const poolData = usePoolDatas([address])[0]
const chartData = usePoolChartData(address)
const transactions = usePoolTransactions(address)
const [watchlistPools, addPoolToWatchlist] = useWatchlistPools()
return (
<Page symbol={poolData ? `${poolData?.token0.symbol} / ${poolData?.token1.symbol}` : null}>
{poolData ? (
<>
<Flex justifyContent="space-between" mb="16px" flexDirection={['column', 'column', 'row']}>
<Breadcrumbs mb="32px">
<Link to="/info">
<Text color="primary">{t('Info')}</Text>
</Link>
<Link to="/info/farms">
<Text color="primary">{t('Farms')}</Text>
</Link>
<Flex>
<Text mr="8px">{`${poolData.token0.symbol} / ${poolData.token1.symbol}`}</Text>
</Flex>
</Breadcrumbs>
<Flex justifyContent={[null, null, 'flex-end']} mt={['8px', '8px', 0]}>
<LinkExternal mr="8px" href={getExplorerLink(address, 'address')}>
{t('View on Cronos Explorer')}
</LinkExternal>
<SaveIcon fill={watchlistPools.includes(address)} onClick={() => addPoolToWatchlist(address)} />
</Flex>
</Flex>
<Flex flexDirection="column">
<Flex alignItems="center" mb={['8px', null]}>
<DoubleCurrencyLogo address0={poolData.token0.address} address1={poolData.token1.address} size={32} />
<Text
ml="38px"
bold
fontSize={isXs || isSm ? '24px' : '40px'}
id="info-pool-pair-title"
>{`${poolData.token0.symbol} / ${poolData.token1.symbol}`}</Text>
</Flex>
<Flex justifyContent="space-between" flexDirection={['column', 'column', 'column', 'row']}>
<Flex flexDirection={['column', 'column', 'row']} mb={['8px', '8px', null]}>
<Link to={`/info/token/${poolData.token0.address}`}>
<TokenButton>
<CurrencyLogo address={poolData.token0.address} size="24px" />
<Text fontSize="16px" ml="4px" style={{ whiteSpace: 'nowrap' }} width="fit-content">
{`1 ${poolData.token0.symbol} = ${poolData.token0Price.toFixed(7)} ${poolData.token1.symbol}`}
</Text>
</TokenButton>
</Link>
<Link to={`/info/token/${poolData.token1.address}`}>
<TokenButton ml={[null, null, '10px']}>
<CurrencyLogo address={poolData.token1.address} size="24px" />
<Text fontSize="16px" ml="4px" style={{ whiteSpace: 'nowrap' }} width="fit-content">
{`1 ${poolData.token1.symbol} = ${poolData.token1Price.toFixed(7)} ${poolData.token0.symbol}`}
</Text>
</TokenButton>
</Link>
</Flex>
<Flex>
<Link to={`/add/${poolData.token0.address}/${poolData.token1.address}`}>
<Button mr="8px" variant="secondary">
{t('Add Liquidity')}
</Button>
</Link>
<Link to={`/swap?inputCurrency=${poolData.token0.address}&outputCurrency=${poolData.token1.address}`}>
<Button>{t('Trade')}</Button>
</Link>
</Flex>
</Flex>
</Flex>
<ContentLayout>
<Box>
<Card>
<Box p="24px">
<Flex justifyContent="space-between">
<Flex flex="1" flexDirection="column">
<Text color="secondary" bold fontSize="12px" textTransform="uppercase">
{t('Liquidity')}
</Text>
<Text fontSize="24px" bold>
${formatAmount(poolData.liquidityUSD)}
</Text>
<Percent value={poolData.liquidityUSDChange} />
</Flex>
<Flex flex="1" flexDirection="column">
<Text color="secondary" bold fontSize="12px" textTransform="uppercase">
{t('LP reward APR')}
</Text>
<Text fontSize="24px" bold>
{formatAmount(poolData.lpApr7d)}%
</Text>
<Flex alignItems="center">
<span ref={targetRef}>
<HelpIcon color="textSubtle" />
</span>
<Text ml="4px" fontSize="12px" color="textSubtle">
{t('7D performance')}
</Text>
{tooltipVisible && tooltip}
</Flex>
</Flex>
</Flex>
<Text color="secondary" bold mt="24px" fontSize="12px" textTransform="uppercase">
{t('Total Tokens Locked')}
</Text>
<LockedTokensContainer>
<Flex justifyContent="space-between">
<Flex>
<CurrencyLogo address={poolData.token0.address} size="24px" />
<Text small color="textSubtle" ml="8px">
{poolData.token0.symbol}
</Text>
</Flex>
<Text small>{formatAmount(poolData.liquidityToken0)}</Text>
</Flex>
<Flex justifyContent="space-between">
<Flex>
<CurrencyLogo address={poolData.token1.address} size="24px" />
<Text small color="textSubtle" ml="8px">
{poolData.token1.symbol}
</Text>
</Flex>
<Text small>{formatAmount(poolData.liquidityToken1)}</Text>
</Flex>
</LockedTokensContainer>
</Box>
</Card>
<Card mt="16px">
<Flex flexDirection="column" p="24px">
<ButtonMenu
activeIndex={showWeeklyData}
onItemClick={(index) => setShowWeeklyData(index)}
scale="sm"
variant="subtle"
>
<ButtonMenuItem width="100%">{t('24H')}</ButtonMenuItem>
<ButtonMenuItem width="100%">{t('7D')}</ButtonMenuItem>
</ButtonMenu>
<Flex mt="24px">
<Flex flex="1" flexDirection="column">
<Text color="secondary" fontSize="12px" bold textTransform="uppercase">
{showWeeklyData ? t('Volume 7D') : t('Volume 24H')}
</Text>
<Text fontSize="24px" bold>
${showWeeklyData ? formatAmount(poolData.volumeUSDWeek) : formatAmount(poolData.volumeUSD)}
</Text>
<Percent value={showWeeklyData ? poolData.volumeUSDChangeWeek : poolData.volumeUSDChange} />
</Flex>
<Flex flex="1" flexDirection="column">
<Text color="secondary" fontSize="12px" bold textTransform="uppercase">
{showWeeklyData ? t('LP reward fees 7D') : t('LP reward fees 24H')}
</Text>
<Text fontSize="24px" bold>
${showWeeklyData ? formatAmount(poolData.lpFees7d) : formatAmount(poolData.lpFees24h)}
</Text>
<Text color="textSubtle" fontSize="12px">
{t('out of $%totalFees% total fees', {
totalFees: showWeeklyData
? formatAmount(poolData.totalFees7d)
: formatAmount(poolData.totalFees24h),
})}
</Text>
</Flex>
</Flex>
</Flex>
</Card>
</Box>
<ChartCard variant="pool" chartData={chartData} />
</ContentLayout>
<Heading mb="16px" mt="40px" scale="lg">
{t('Transactions')}
</Heading>
<TransactionTable transactions={transactions} />
</>
) : (
<Flex mt="80px" justifyContent="center">
<Spinner />
</Flex>
)}
</Page>
)
}
Example #6
| Source File: index.tsx From vvs-ui with GNU General Public License v3.0 | 4 votes |
|
Search = () => {
const history = useHistory()
const { isXs, isSm } = useMatchBreakpoints()
const { t } = useTranslation()
const inputRef = useRef<HTMLInputElement>(null)
const menuRef = useRef<HTMLDivElement>(null)
const showMoreRef = useRef<HTMLDivElement>(null)
const [showMenu, setShowMenu] = useState(false)
const [value, setValue] = useState('')
const debouncedSearchTerm = useDebounce(value, 600)
const { tokens, pools, tokensLoading, poolsLoading, error } = useFetchSearchResults(debouncedSearchTerm)
const [tokensShown, setTokensShown] = useState(3)
const [poolsShown, setPoolsShown] = useState(3)
useEffect(() => {
setTokensShown(3)
setPoolsShown(3)
}, [debouncedSearchTerm])
const handleOutsideClick = (e: any) => {
const menuClick = menuRef.current && menuRef.current.contains(e.target)
const inputCLick = inputRef.current && inputRef.current.contains(e.target)
const showMoreClick = showMoreRef.current && showMoreRef.current.contains(e.target)
if (!menuClick && !inputCLick && !showMoreClick) {
setPoolsShown(3)
setTokensShown(3)
setShowMenu(false)
}
}
useEffect(() => {
if (showMenu) {
document.addEventListener('click', handleOutsideClick)
document.querySelector('body').style.overflow = 'hidden'
} else {
document.removeEventListener('click', handleOutsideClick)
document.querySelector('body').style.overflow = 'visible'
}
return () => {
document.removeEventListener('click', handleOutsideClick)
document.querySelector('body').style.overflow = 'visible'
}
}, [showMenu])
// watchlist
const [savedTokens, addSavedToken] = useWatchlistTokens()
const [savedPools, addSavedPool] = useWatchlistPools()
const handleItemClick = (to: string) => {
setShowMenu(false)
setPoolsShown(3)
setTokensShown(3)
history.push(to)
}
// get date for watchlist
const watchListTokenData = useTokenDatas(savedTokens)
const watchListTokenLoading = watchListTokenData.length !== savedTokens.length
const watchListPoolData = usePoolDatas(savedPools)
const watchListPoolLoading = watchListPoolData.length !== savedPools.length
// filter on view
const [showWatchlist, setShowWatchlist] = useState(false)
const tokensForList = useMemo(() => {
if (showWatchlist) {
return watchListTokenData.filter((token) => tokenIncludesSearchTerm(token, value))
}
return tokens.sort((t0, t1) => (t0.volumeUSD > t1.volumeUSD ? -1 : 1))
}, [showWatchlist, tokens, watchListTokenData, value])
const poolForList = useMemo(() => {
if (showWatchlist) {
return watchListPoolData.filter((pool) => poolIncludesSearchTerm(pool, value))
}
return pools.sort((p0, p1) => (p0.volumeUSD > p1.volumeUSD ? -1 : 1))
}, [pools, showWatchlist, watchListPoolData, value])
const contentUnderTokenList = () => {
const isLoading = showWatchlist ? watchListTokenLoading : tokensLoading
const noTokensFound =
tokensForList.length === 0 && !isLoading && debouncedSearchTerm.length >= MINIMUM_SEARCH_CHARACTERS
const noWatchlistTokens = tokensForList.length === 0 && !isLoading
const showMessage = showWatchlist ? noWatchlistTokens : noTokensFound
const noTokensMessage = showWatchlist ? t('Saved tokens will appear here') : t('No results')
return (
<>
{isLoading && <Skeleton />}
{showMessage && <Text>{noTokensMessage}</Text>}
{!showWatchlist && debouncedSearchTerm.length < MINIMUM_SEARCH_CHARACTERS && (
<Text>{t('Search farms or tokens')}</Text>
)}
</>
)
}
const contentUnderPoolList = () => {
const isLoading = showWatchlist ? watchListPoolLoading : poolsLoading
const noPoolsFound =
poolForList.length === 0 && !poolsLoading && debouncedSearchTerm.length >= MINIMUM_SEARCH_CHARACTERS
const noWatchlistPools = poolForList.length === 0 && !isLoading
const showMessage = showWatchlist ? noWatchlistPools : noPoolsFound
const noPoolsMessage = showWatchlist ? t('Saved tokens will appear here') : t('No results')
return (
<>
{isLoading && <Skeleton />}
{showMessage && <Text>{noPoolsMessage}</Text>}
{!showWatchlist && debouncedSearchTerm.length < MINIMUM_SEARCH_CHARACTERS && (
<Text>{t('Search farms or tokens')}</Text>
)}
</>
)
}
return (
<>
{showMenu ? <Blackout /> : null}
<Container>
<StyledInput
type="text"
value={value}
onChange={(e) => {
setValue(e.target.value)
}}
placeholder={t('Search farms or tokens')}
ref={inputRef}
onFocus={() => {
setShowMenu(true)
}}
/>
<Menu hide={!showMenu} ref={menuRef}>
<Flex mb="16px">
<OptionButton enabled={!showWatchlist} onClick={() => setShowWatchlist(false)}>
{t('Search')}
</OptionButton>
<OptionButton enabled={showWatchlist} onClick={() => setShowWatchlist(true)}>
{t('Watchlist')}
</OptionButton>
</Flex>
{error && <Text color="failure">{t('Error occurred, please try again')}</Text>}
<ResponsiveGrid>
<Text bold color="secondary">
{t('Tokens')}
</Text>
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Price')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 24H')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Liquidity')}
</Text>
)}
</ResponsiveGrid>
{tokensForList.slice(0, tokensShown).map((token, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<HoverRowLink onClick={() => handleItemClick(`/info/token/${token.address}`)} key={i}>
<ResponsiveGrid>
<Flex>
<CurrencyLogo address={token.address} />
<Text ml="10px">
<Text>{`${token.name} (${token.symbol})`}</Text>
</Text>
<SaveIcon
id="watchlist-icon"
style={{ marginLeft: '8px' }}
fill={savedTokens.includes(token.address)}
onClick={(e) => {
e.stopPropagation()
addSavedToken(token.address)
}}
/>
</Flex>
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.priceUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.volumeUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(token.liquidityUSD)}</Text>}
</ResponsiveGrid>
</HoverRowLink>
)
})}
{contentUnderTokenList()}
<HoverText
onClick={() => {
setTokensShown(tokensShown + 5)
}}
hide={tokensForList.length <= tokensShown}
ref={showMoreRef}
>
{t('See more...')}
</HoverText>
<Break />
<ResponsiveGrid>
<Text bold color="secondary" mb="8px">
Mines
</Text>
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 24H')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Volume 7D')}
</Text>
)}
{!isXs && !isSm && (
<Text textAlign="end" fontSize="12px">
{t('Liquidity')}
</Text>
)}
</ResponsiveGrid>
{poolForList.slice(0, poolsShown).map((p, i) => {
return (
// eslint-disable-next-line react/no-array-index-key
<HoverRowLink onClick={() => handleItemClick(`/info/farm/${p.address}`)} key={i}>
<ResponsiveGrid>
<Flex>
<DoubleCurrencyLogo address0={p.token0.address} address1={p.token1.address} />
<Text ml="10px" style={{ whiteSpace: 'nowrap' }}>
<Text>{`${p.token0.symbol} / ${p.token1.symbol}`}</Text>
</Text>
<SaveIcon
id="watchlist-icon"
style={{ marginLeft: '10px' }}
fill={savedPools.includes(p.address)}
onClick={(e) => {
e.stopPropagation()
addSavedPool(p.address)
}}
/>
</Flex>
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.volumeUSD)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.volumeUSDWeek)}</Text>}
{!isXs && !isSm && <Text textAlign="end">${formatAmount(p.liquidityUSD)}</Text>}
</ResponsiveGrid>
</HoverRowLink>
)
})}
{contentUnderPoolList()}
<HoverText
onClick={() => {
setPoolsShown(poolsShown + 5)
}}
hide={poolForList.length <= poolsShown}
ref={showMoreRef}
>
{t('See more...')}
</HoverText>
</Menu>
</Container>
</>
)
}
