state/user/hooks#useTrackedTokenPairs TypeScript Examples
The following examples show how to use
state/user/hooks#useTrackedTokenPairs.
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: YourLiquidityPools.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
YourLiquidityPools: React.FC = () => {
const classes = useStyles();
const { account } = useActiveWeb3React();
const [openPoolFinder, setOpenPoolFinder] = useState(false);
const trackedTokenPairs = useTrackedTokenPairs();
const tokenPairsWithLiquidityTokens = useMemo(
() =>
trackedTokenPairs.map((tokens) => ({
liquidityToken: toV2LiquidityToken(tokens),
tokens,
})),
[trackedTokenPairs],
);
const liquidityTokens = useMemo(
() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken),
[tokenPairsWithLiquidityTokens],
);
const [
v2PairsBalances,
fetchingV2PairBalances,
] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens,
);
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0'),
),
[tokenPairsWithLiquidityTokens, v2PairsBalances],
);
const v2Pairs = usePairs(
liquidityTokensWithBalances.map(({ tokens }) => tokens),
);
const v2IsLoading =
fetchingV2PairBalances ||
v2Pairs?.length < liquidityTokensWithBalances.length ||
v2Pairs?.some((V2Pair) => !V2Pair);
const allV2PairsWithLiquidity = v2Pairs
.map(([, pair]) => pair)
.filter((v2Pair): v2Pair is Pair => Boolean(v2Pair));
return (
<>
{openPoolFinder && (
<PoolFinderModal
open={openPoolFinder}
onClose={() => setOpenPoolFinder(false)}
/>
)}
<Typography variant='body1' style={{ fontWeight: 600 }}>
Your Liquidity Pools
</Typography>
<Box mt={3}>
{v2IsLoading ? (
<Box width={1}>
<Skeleton width='100%' height={50} />
</Box>
) : allV2PairsWithLiquidity.length > 0 ? (
<Box>
<Typography variant='body2' className={classes.liquidityText}>
Don’t see a pool you joined?{' '}
<span onClick={() => setOpenPoolFinder(true)}>Import it</span>
.<br />
Unstake your LP Tokens from Farms to see them here.
</Typography>
{allV2PairsWithLiquidity.map((pair, ind) => (
<Box key={ind} mt={2}>
<PoolPositionCard
key={pair.liquidityToken.address}
pair={pair}
/>
</Box>
))}
</Box>
) : (
<Box textAlign='center'>
<img
src={NoLiquidity}
alt='No Liquidity'
className={classes.noLiquidityImage}
/>
<Typography variant='body2' className={classes.liquidityText}>
Don’t see a pool you joined?{' '}
<span onClick={() => setOpenPoolFinder(true)}>Import it</span>
.<br />
Unstake your LP Tokens from Farms to see them here.
</Typography>
</Box>
)}
</Box>
</>
);
}
Example #2
| Source File: index.tsx From goose-frontend-amm with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
const hasV1Liquidity = useUserHasLiquidityInAllTokens()
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader title="Liquidity" description="Add liquidity to receive LP tokens">
<Button id="join-pool-button" as={Link} to="/add/ETH">
<TranslatedText translationId={100}>Add Liquidity</TranslatedText>
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>
<TranslatedText translationId={102}>Your Liquidity</TranslatedText>
</Text>
<Question
text={TranslateString(
130,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
Connect to a wallet to view your liquidity.
</Body>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
<Dots>Loading</Dots>
</Body>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
<TranslatedText translationId={104}>No liquidity found.</TranslatedText>
</Body>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{hasV1Liquidity
? 'Uniswap V1 liquidity found!'
: TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to={hasV1Liquidity ? '/migrate/v1' : '/find'}>
{hasV1Liquidity ? 'Migrate now.' : TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
Or, if you staked your LP tokens in a farm, unstake them to see them here.
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</>
)
}
Example #3
| Source File: index.tsx From mozartfinance-swap-interface with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const TranslateString = useI18n()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader
title={TranslateString(262, 'Liquidity')}
description={TranslateString(1168, 'Add liquidity to receive LP tokens')}
>
<Button id="join-pool-button" as={Link} to="/add/BNB">
{TranslateString(168, 'Add Liquidity')}
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
<Question
text={TranslateString(
1170,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(156, 'Connect to a wallet to view your liquidity.')}
</Text>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
<Dots>Loading</Dots>
</Text>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(104, 'No liquidity found.')}
</Text>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(1172, 'Or, if you staked your LP tokens in a farm, unstake them to see them here.')}
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</>
)
}
Example #4
| Source File: SecondCard.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 4 votes |
|
SecondCard = () => {
const { account } = useActiveWeb3React()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<Card>
<CardHeader>
<Text bold>Remove Liquidity</Text>
<Text small color="textSubtle">
Unstake your old LP tokens from the old liquidity pools
</Text>
</CardHeader>
<CardBody>
<Text bold>V1 LP Tokens in wallet</Text>
<Card>
{v2IsLoading ? (
<CardBody>Loading</CardBody>
) : (
<CardBody>
{allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair, index) => (
<Box mb={index < allV2PairsWithLiquidity.length - 1 ? '16px' : 0}>
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
</Box>
))}
</>
) : (
<Text color="textDisabled" textAlign="center">
No liquidity found.
</Text>
)}
<Text mt="16px" textAlign="center">
Don't see a pool you joined?{' '}
<StyledInternalLink id="import-pool-link" to="/find">
Import it
</StyledInternalLink>
</Text>
</CardBody>
)}
</Card>
<ArrowSeparator />
<Text bold>Discontinued V2 LP</Text>
<Card>
<CardBody>
<Text textAlign="center" mb="16px">
If you added liquidity to V2 LPs during the migration attempt on April 23, you need to unstake and remove
liquidity.
</Text>
<Button as={Link} external href="https://hiccup.pancakeswap.finance/#/pool" style={{ width: '100%' }}>
Remove
</Button>
</CardBody>
</Card>
</CardBody>
</Card>
)
}
Example #5
| Source File: index.tsx From pancake-swap-exchange-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const TranslateString = useI18n()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<Container>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader
title={TranslateString(262, 'Liquidity')}
description={TranslateString(1168, 'Add liquidity to receive LP tokens')}
>
<Button id="join-pool-button" as={Link} to="/add/BNB">
{TranslateString(168, 'Add Liquidity')}
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
<Question
text={TranslateString(
1170,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(156, 'Connect to a wallet to view your liquidity.')}
</Text>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
<Dots>Loading</Dots>
</Text>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(104, 'No liquidity found.')}
</Text>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(1172, 'Or, if you staked your LP tokens in a farm, unstake them to see them here.')}
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</Container>
)
}
Example #6
| Source File: index.tsx From pancake-swap-testnet with MIT License | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const TranslateString = useI18n()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader
title={TranslateString(262, 'Liquidity')}
description={TranslateString(1168, 'Add liquidity to receive LP tokens')}
>
<Button id="join-pool-button" as={Link} to="/add/BNB">
{TranslateString(168, 'Add Liquidity')}
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
<Question
text={TranslateString(
1170,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(156, 'Connect to a wallet to view your liquidity.')}
</Text>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
<Dots>Loading</Dots>
</Text>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(104, 'No liquidity found.')}
</Text>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(1172, 'Or, if you staked your LP tokens in a farm, unstake them to see them here.')}
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</>
)
}
Example #7
| Source File: SecondCard.tsx From pancake-swap-interface-v1 with GNU General Public License v3.0 | 4 votes |
|
SecondCard = () => {
const { account } = useActiveWeb3React()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<Card>
<CardHeader>
<Text bold>Remove Liquidity</Text>
<Text small color="textSubtle">
Unstake your old LP tokens from the old liquidity pools
</Text>
</CardHeader>
<CardBody>
<Text bold>V1 LP Tokens in wallet</Text>
<Card>
{v2IsLoading ? (
<CardBody>Loading</CardBody>
) : (
<CardBody>
{allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair, index) => (
<Box mb={index < allV2PairsWithLiquidity.length - 1 ? '16px' : 0}>
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
</Box>
))}
</>
) : (
<Text color="textDisabled" textAlign="center">
No liquidity found.
</Text>
)}
<Text mt="16px" textAlign="center">
Don't see a pool you joined?{' '}
<StyledInternalLink id="import-pool-link" to="/find">
Import it
</StyledInternalLink>
</Text>
</CardBody>
)}
</Card>
<ArrowSeparator />
<Text bold>Discontinued V2 LP</Text>
<Card>
<CardBody>
<Text textAlign="center" mb="16px">
If you added liquidity to V2 LPs during the migration attempt on April 23, you need to unstake and remove
liquidity.
</Text>
<Button as={Link} external href="https://hiccup.pancakeswap.finance/#/pool" style={{ width: '100%' }}>
Remove
</Button>
</CardBody>
</Card>
</CardBody>
</Card>
)
}
Example #8
| Source File: index.tsx From pancake-swap-interface-v1 with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const TranslateString = useI18n()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<Container>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader
title={TranslateString(262, 'Liquidity')}
description={TranslateString(1168, 'Add liquidity to receive LP tokens')}
>
<Button id="join-pool-button" disabled mb="16px">
{TranslateString(168, "You can't add liquidity on V1")}
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
<Question
text={TranslateString(
1170,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(156, 'Connect to a wallet to view your liquidity.')}
</Text>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
<Dots>Loading</Dots>
</Text>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(104, 'No liquidity found.')}
</Text>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(1172, 'Or, if you staked your LP tokens in a farm, unstake them to see them here.')}
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</Container>
)
}
Example #9
| Source File: index.tsx From panther-frontend-dex with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader title="Liquidity" description="Add liquidity to receive PANTHER-LP tokens">
<Button id="join-pool-button" as={Link} to="/add/ETH">
<TranslatedText translationId={100}>Add Liquidity</TranslatedText>
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>
<TranslatedText translationId={102}>Your Liquidity</TranslatedText>
</Text>
<Question
text={TranslateString(
130,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
Connect to a wallet to view your liquidity.
</Body>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
<Dots>Loading</Dots>
</Body>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Body color={theme.colors.textDisabled} textAlign="center">
<TranslatedText translationId={104}>No liquidity found.</TranslatedText>
</Body>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
Or, if you staked your PANTHER-LP tokens in a farm, unstake them to see them here.
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</>
)
}
Example #10
| Source File: index.tsx From pancakeswap-testnet with GNU General Public License v3.0 | 4 votes |
|
export default function Pool() {
const theme = useContext(ThemeContext)
const { account } = useActiveWeb3React()
const TranslateString = useI18n()
// fetch the user's balances of all tracked V2 LP tokens
const trackedTokenPairs = useTrackedTokenPairs()
const tokenPairsWithLiquidityTokens = useMemo(
() => trackedTokenPairs.map((tokens) => ({ liquidityToken: toV2LiquidityToken(tokens), tokens })),
[trackedTokenPairs]
)
const liquidityTokens = useMemo(() => tokenPairsWithLiquidityTokens.map((tpwlt) => tpwlt.liquidityToken), [
tokenPairsWithLiquidityTokens,
])
const [v2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
account ?? undefined,
liquidityTokens
)
// fetch the reserves for all V2 pools in which the user has a balance
const liquidityTokensWithBalances = useMemo(
() =>
tokenPairsWithLiquidityTokens.filter(({ liquidityToken }) =>
v2PairsBalances[liquidityToken.address]?.greaterThan('0')
),
[tokenPairsWithLiquidityTokens, v2PairsBalances]
)
const v2Pairs = usePairs(liquidityTokensWithBalances.map(({ tokens }) => tokens))
const v2IsLoading =
fetchingV2PairBalances || v2Pairs?.length < liquidityTokensWithBalances.length || v2Pairs?.some((V2Pair) => !V2Pair)
const allV2PairsWithLiquidity = v2Pairs.map(([, pair]) => pair).filter((v2Pair): v2Pair is Pair => Boolean(v2Pair))
return (
<>
<CardNav activeIndex={1} />
<AppBody>
<PageHeader
title={TranslateString(262, 'Liquidity')}
description={TranslateString(1168, 'Add liquidity to receive LP tokens')}
>
<Button id="join-pool-button" as={Link} to="/add/BNB">
{TranslateString(168, 'Add Liquidity')}
</Button>
</PageHeader>
<AutoColumn gap="lg" justify="center">
<CardBody>
<AutoColumn gap="12px" style={{ width: '100%' }}>
<RowBetween padding="0 8px">
<Text color={theme.colors.text}>{TranslateString(107, 'Your Liquidity')}</Text>
<Question
text={TranslateString(
1170,
'When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below.'
)}
/>
</RowBetween>
{!account ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(156, 'Connect to a wallet to view your liquidity.')}
</Text>
</LightCard>
) : v2IsLoading ? (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
<Dots>Loading</Dots>
</Text>
</LightCard>
) : allV2PairsWithLiquidity?.length > 0 ? (
<>
{allV2PairsWithLiquidity.map((v2Pair) => (
<FullPositionCard key={v2Pair.liquidityToken.address} pair={v2Pair} />
))}
</>
) : (
<LightCard padding="40px">
<Text color="textDisabled" textAlign="center">
{TranslateString(104, 'No liquidity found.')}
</Text>
</LightCard>
)}
<div>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(106, "Don't see a pool you joined?")}{' '}
<StyledInternalLink id="import-pool-link" to="/find">
{TranslateString(108, 'Import it.')}
</StyledInternalLink>
</Text>
<Text fontSize="14px" style={{ padding: '.5rem 0 .5rem 0' }}>
{TranslateString(1172, 'Or, if you staked your LP tokens in a farm, unstake them to see them here.')}
</Text>
</div>
</AutoColumn>
</CardBody>
</AutoColumn>
</AppBody>
</>
)
}
