utils/wrappedCurrency#unwrappedToken TypeScript Examples
The following examples show how to use
utils/wrappedCurrency#unwrappedToken.
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: hooks.ts From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
export function useTotalRewardsDistributed() {
const { chainId } = useActiveWeb3React();
const syrupRewardsInfo = chainId ? returnSyrupInfo()[chainId] ?? [] : [];
const dualStakingRewardsInfo = chainId
? returnDualStakingInfo()[chainId] ?? []
: [];
const stakingRewardsInfo = chainId ? returnStakingInfo()[chainId] ?? [] : [];
const syrupTokenPairs = usePairs(
syrupRewardsInfo.map((item) => [
unwrappedToken(item.token),
unwrappedToken(item.baseToken),
]),
);
const syrupUSDBaseTokenPrices = useUSDCPrices(
syrupRewardsInfo.map((item) => unwrappedToken(item.baseToken)),
);
const syrupRewardsUSD = syrupRewardsInfo.reduce((total, item, index) => {
const [, syrupTokenPair] = syrupTokenPairs[index];
const tokenPairPrice = syrupTokenPair?.priceOf(item.token);
const usdPriceBaseToken = syrupUSDBaseTokenPrices[index];
const priceOfRewardTokenInUSD =
Number(tokenPairPrice?.toSignificant()) *
Number(usdPriceBaseToken?.toSignificant());
return total + priceOfRewardTokenInUSD * item.rate;
}, 0);
const rewardTokenAPrices = useUSDCPricesToken(
dualStakingRewardsInfo.map((item) => item.rewardTokenA),
);
const rewardTokenBPrices = useUSDCPricesToken(
dualStakingRewardsInfo.map((item) => item.rewardTokenB),
);
const dualStakingRewardsUSD = dualStakingRewardsInfo.reduce(
(total, item, index) =>
total +
item.rateA * rewardTokenAPrices[index] +
item.rateB * rewardTokenBPrices[index],
0,
);
const rewardTokenPrices = useUSDCPricesToken(
stakingRewardsInfo.map((item) => item.rewardToken),
);
const stakingRewardsUSD = stakingRewardsInfo.reduce(
(total, item, index) => total + item.rate * rewardTokenPrices[index],
0,
);
return syrupRewardsUSD + dualStakingRewardsUSD + stakingRewardsUSD;
}
Example #2
| Source File: FarmCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FarmCard: React.FC<{
stakingInfo: StakingInfo | DualStakingInfo;
stakingAPY: number;
isLPFarm?: boolean;
}> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [isExpandCard, setExpandCard] = useState(false);
const lpStakingInfo = stakingInfo as StakingInfo;
const dualStakingInfo = stakingInfo as DualStakingInfo;
const token0 = stakingInfo.tokens[0];
const token1 = stakingInfo.tokens[1];
const currency0 = unwrappedToken(token0);
const currency1 = unwrappedToken(token1);
const stakedAmounts = getStakedAmountStakingInfo(stakingInfo);
let apyWithFee: number | string = 0;
if (stakingAPY && stakingAPY > 0 && stakingInfo.perMonthReturnInRewards) {
apyWithFee = formatAPY(
getAPYWithFee(stakingInfo.perMonthReturnInRewards, stakingAPY),
);
}
const tvl = getTVLStaking(
stakedAmounts?.totalStakedUSD,
stakedAmounts?.totalStakedBase,
);
const lpPoolRate = getRewardRate(
lpStakingInfo.totalRewardRate,
lpStakingInfo.rewardToken,
);
const dualPoolRateA = getRewardRate(
dualStakingInfo.totalRewardRateA,
dualStakingInfo.rewardTokenA,
);
const dualPoolRateB = getRewardRate(
dualStakingInfo.totalRewardRateB,
dualStakingInfo.rewardTokenB,
);
const earnedUSDStr = isLPFarm
? getEarnedUSDLPFarm(lpStakingInfo)
: getEarnedUSDDualFarm(dualStakingInfo);
const lpRewards = lpStakingInfo.rewardTokenPrice * lpStakingInfo.rate;
const dualRewards =
dualStakingInfo.rateA * dualStakingInfo.rewardTokenAPrice +
dualStakingInfo.rateB * dualStakingInfo.rewardTokenBPrice;
const renderPool = (width: number) => (
<Box display='flex' alignItems='center' width={width}>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
size={28}
/>
<Box ml={1.5}>
<Typography variant='body2'>
{currency0.symbol} / {currency1.symbol} LP
</Typography>
</Box>
</Box>
);
return (
<Box
className={cx(
classes.farmLPCard,
isExpandCard && classes.highlightedCard,
)}
>
<Box
className={classes.farmLPCardUp}
onClick={() => setExpandCard(!isExpandCard)}
>
{isMobile ? (
<>
{renderPool(isExpandCard ? 0.95 : 0.7)}
{!isExpandCard && (
<Box width={0.25}>
<Box display='flex' alignItems='center'>
<Typography variant='caption' color='textSecondary'>
APY
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box mt={0.5} color={palette.success.main}>
<Typography variant='body2'>{apyWithFee}%</Typography>
</Box>
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{isExpandCard ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
{renderPool(0.3)}
<Box width={0.2} textAlign='center'>
<Typography variant='body2'>{tvl}</Typography>
</Box>
<Box width={0.25} textAlign='center'>
<Typography variant='body2'>
${(isLPFarm ? lpRewards : dualRewards).toLocaleString()} / day
</Typography>
{isLPFarm ? (
<Typography variant='body2'>{lpPoolRate}</Typography>
) : (
<>
<Typography variant='body2'>{dualPoolRateA}</Typography>
<Typography variant='body2'>{dualPoolRateB}</Typography>
</>
)}
</Box>
<Box
width={0.15}
display='flex'
justifyContent='center'
alignItems='center'
color={palette.success.main}
>
<Typography variant='body2'>{apyWithFee}%</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box width={0.2} textAlign='right'>
<Typography variant='body2'>{earnedUSDStr}</Typography>
{isLPFarm ? (
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={lpStakingInfo.rewardToken}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(lpStakingInfo.earnedAmount)}
<span> {lpStakingInfo.rewardToken.symbol}</span>
</Typography>
</Box>
) : (
<>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenA)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountA)}
<span> {dualStakingInfo.rewardTokenA.symbol}</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenB)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountB)}
<span> {dualStakingInfo.rewardTokenB.symbol}</span>
</Typography>
</Box>
</>
)}
</Box>
</>
)}
</Box>
{isExpandCard && (
<FarmCardDetails
stakingInfo={stakingInfo}
stakingAPY={stakingAPY}
isLPFarm={isLPFarm}
/>
)}
</Box>
);
}
Example #3
| Source File: FarmCardDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FarmCardDetails: React.FC<{
stakingInfo: StakingInfo | DualStakingInfo;
stakingAPY: number;
isLPFarm?: boolean;
}> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
const classes = useStyles();
const { t } = useTranslation();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [stakeAmount, setStakeAmount] = useState('');
const [attemptStaking, setAttemptStaking] = useState(false);
const [attemptUnstaking, setAttemptUnstaking] = useState(false);
const [attemptClaiming, setAttemptClaiming] = useState(false);
const [approving, setApproving] = useState(false);
const [unstakeAmount, setUnStakeAmount] = useState('');
const lpStakingInfo = stakingInfo as StakingInfo;
const dualStakingInfo = stakingInfo as DualStakingInfo;
const token0 = stakingInfo ? stakingInfo.tokens[0] : undefined;
const token1 = stakingInfo ? stakingInfo.tokens[1] : undefined;
const { account, library } = useActiveWeb3React();
const addTransaction = useTransactionAdder();
const currency0 = token0 ? unwrappedToken(token0) : undefined;
const currency1 = token1 ? unwrappedToken(token1) : undefined;
const userLiquidityUnstaked = useTokenBalance(
account ?? undefined,
stakingInfo.stakedAmount?.token,
);
const stakedAmounts = getStakedAmountStakingInfo(
stakingInfo,
userLiquidityUnstaked,
);
let apyWithFee: number | string = 0;
if (
stakingInfo &&
stakingInfo.perMonthReturnInRewards &&
stakingAPY &&
stakingAPY > 0
) {
apyWithFee = formatAPY(
getAPYWithFee(stakingInfo.perMonthReturnInRewards, stakingAPY),
);
}
const stakingContract = useStakingContract(stakingInfo?.stakingRewardAddress);
const { parsedAmount: unstakeParsedAmount } = useDerivedStakeInfo(
unstakeAmount,
stakingInfo.stakedAmount?.token,
stakingInfo.stakedAmount,
);
const onWithdraw = async () => {
if (stakingInfo && stakingContract && unstakeParsedAmount) {
setAttemptUnstaking(true);
await stakingContract
.withdraw(`0x${unstakeParsedAmount.raw.toString(16)}`, {
gasLimit: 300000,
})
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: t('withdrawliquidity'),
});
try {
await response.wait();
setAttemptUnstaking(false);
} catch (error) {
setAttemptUnstaking(false);
}
})
.catch((error: any) => {
setAttemptUnstaking(false);
console.log(error);
});
}
};
const onClaimReward = async () => {
if (stakingContract && stakingInfo && stakingInfo.stakedAmount) {
setAttemptClaiming(true);
await stakingContract
.getReward({ gasLimit: 350000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: t('claimrewards'),
});
try {
await response.wait();
setAttemptClaiming(false);
} catch (error) {
setAttemptClaiming(false);
}
})
.catch((error: any) => {
setAttemptClaiming(false);
console.log(error);
});
}
};
const { parsedAmount } = useDerivedStakeInfo(
stakeAmount,
stakingInfo.stakedAmount?.token,
userLiquidityUnstaked,
);
const deadline = useTransactionDeadline();
const [approval, approveCallback] = useApproveCallback(
parsedAmount,
stakingInfo?.stakingRewardAddress,
);
const dummyPair = stakingInfo
? new Pair(
new TokenAmount(stakingInfo.tokens[0], '0'),
new TokenAmount(stakingInfo.tokens[1], '0'),
)
: null;
const pairContract = usePairContract(
stakingInfo && stakingInfo.lp && stakingInfo.lp !== ''
? stakingInfo.lp
: dummyPair?.liquidityToken.address,
);
const onStake = async () => {
if (stakingContract && parsedAmount && deadline) {
setAttemptStaking(true);
stakingContract
.stake(`0x${parsedAmount.raw.toString(16)}`, {
gasLimit: 350000,
})
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: t('depositliquidity'),
});
try {
await response.wait();
setAttemptStaking(false);
} catch (error) {
setAttemptStaking(false);
}
})
.catch((error: any) => {
setAttemptStaking(false);
console.log(error);
});
} else {
throw new Error(t('stakewithoutapproval'));
}
};
const onAttemptToApprove = async () => {
if (!pairContract || !library || !deadline)
throw new Error(t('missingdependencies'));
const liquidityAmount = parsedAmount;
if (!liquidityAmount) throw new Error(t('missingliquidity'));
setApproving(true);
try {
await approveCallback();
setApproving(false);
} catch (e) {
setApproving(false);
}
};
const earnedUSDStr = isLPFarm
? getEarnedUSDLPFarm(lpStakingInfo)
: getEarnedUSDDualFarm(dualStakingInfo);
const tvl = getTVLStaking(
stakedAmounts?.totalStakedUSD,
stakedAmounts?.totalStakedBase,
);
const lpRewards = lpStakingInfo.rate * lpStakingInfo.rewardTokenPrice;
const lpPoolRate = getRewardRate(
lpStakingInfo.totalRewardRate,
lpStakingInfo.rewardToken,
);
const dualRewards =
dualStakingInfo.rateA * dualStakingInfo.rewardTokenAPrice +
dualStakingInfo.rateB * Number(dualStakingInfo.rewardTokenBPrice);
const dualPoolRateA = getRewardRate(
dualStakingInfo.totalRewardRateA,
dualStakingInfo.rewardTokenA,
);
const dualPoolRateB = getRewardRate(
dualStakingInfo.totalRewardRateB,
dualStakingInfo.rewardTokenB,
);
const mainRewardRate = isLPFarm
? lpStakingInfo.rewardRate
: dualStakingInfo.rewardRateA;
const stakeEnabled =
!approving &&
!attemptStaking &&
Number(stakeAmount) > 0 &&
Number(stakeAmount) <= getExactTokenAmount(userLiquidityUnstaked);
const unstakeEnabled =
!attemptUnstaking &&
Number(unstakeAmount) > 0 &&
Number(unstakeAmount) <= getExactTokenAmount(stakingInfo.stakedAmount);
const claimEnabled =
!attemptClaiming &&
(isLPFarm
? lpStakingInfo.earnedAmount &&
lpStakingInfo.earnedAmount.greaterThan('0')
: dualStakingInfo.earnedAmountA &&
dualStakingInfo.earnedAmountA.greaterThan('0'));
return (
<>
<Box
width='100%'
p={2}
display='flex'
flexDirection='row'
flexWrap='wrap'
borderTop='1px solid #444444'
alignItems='center'
justifyContent={stakingInfo?.ended ? 'flex-end' : 'space-between'}
>
{stakingInfo && (
<>
{isMobile && (
<>
<Box
mt={2}
width={1}
display='flex'
justifyContent='space-between'
>
<Typography variant='body2' color='textSecondary'>
{t('tvl')}
</Typography>
<Typography variant='body2'>{tvl}</Typography>
</Box>
<Box
mt={2}
width={1}
display='flex'
justifyContent='space-between'
>
<Typography variant='body2' color='textSecondary'>
{t('rewards')}
</Typography>
<Box textAlign='right'>
<Typography variant='body2'>
${(isLPFarm ? lpRewards : dualRewards).toLocaleString()} /
{t('day')}
</Typography>
{isLPFarm ? (
<Typography variant='body2'>{lpPoolRate}</Typography>
) : (
<>
<Typography variant='body2'>{dualPoolRateA}</Typography>
<Typography variant='body2'>{dualPoolRateB}</Typography>
</>
)}
</Box>
</Box>
<Box
mt={2}
width={1}
display='flex'
justifyContent='space-between'
>
<Box display='flex' alignItems='center'>
<Typography variant='body2' color='textSecondary'>
{t('apy')}
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box color={palette.success.main}>
<Typography variant='body2'>{apyWithFee}%</Typography>
</Box>
</Box>
</>
)}
{!stakingInfo.ended && (
<Box className={classes.buttonWrapper} mt={isMobile ? 2 : 0}>
<Box display='flex' justifyContent='space-between'>
<Typography variant='body2'>{t('inwallet')}:</Typography>
<Box
display='flex'
flexDirection='column'
alignItems='flex-end'
justifyContent='flex-start'
>
<Typography variant='body2'>
{formatTokenAmount(userLiquidityUnstaked)} {t('lp')}{' '}
<span>({getUSDString(stakedAmounts?.unStakedUSD)})</span>
</Typography>
<Link
to={`/pools?currency0=${getTokenAddress(
token0,
)}¤cy1=${getTokenAddress(token1)}`}
style={{ color: palette.primary.main }}
>
{t('get')} {currency0?.symbol} / {currency1?.symbol}{' '}
{t('lp')}
</Link>
</Box>
</Box>
<Box className={classes.inputVal} mb={2} mt={2} p={2}>
<NumericalInput
placeholder='0.00'
value={stakeAmount}
fontSize={16}
onUserInput={(value) => {
setStakeAmount(value);
}}
/>
<Typography
variant='body2'
style={{
color:
userLiquidityUnstaked &&
userLiquidityUnstaked.greaterThan('0')
? palette.primary.main
: palette.text.hint,
}}
onClick={() => {
if (
userLiquidityUnstaked &&
userLiquidityUnstaked.greaterThan('0')
) {
setStakeAmount(userLiquidityUnstaked.toExact());
} else {
setStakeAmount('');
}
}}
>
{t('max')}
</Typography>
</Box>
<Box
className={
stakeEnabled ? classes.buttonClaim : classes.buttonToken
}
mt={2}
p={2}
onClick={async () => {
if (stakeEnabled) {
if (approval === ApprovalState.APPROVED) {
onStake();
} else {
onAttemptToApprove();
}
}
}}
>
<Typography variant='body1'>
{attemptStaking
? t('stakingLPTokens')
: approval === ApprovalState.APPROVED
? t('stakeLPTokens')
: approving
? t('approving')
: t('approve')}
</Typography>
</Box>
</Box>
)}
<Box className={classes.buttonWrapper} mx={isMobile ? 0 : 2} my={2}>
<Box display='flex' justifyContent='space-between'>
<Typography variant='body2'>{t('mydeposits')}:</Typography>
<Typography variant='body2'>
{formatTokenAmount(stakingInfo.stakedAmount)} {t('lp')}{' '}
<span>({getUSDString(stakedAmounts?.myStakedUSD)})</span>
</Typography>
</Box>
<Box className={classes.inputVal} mb={2} mt={4.5} p={2}>
<NumericalInput
placeholder='0.00'
value={unstakeAmount}
fontSize={16}
onUserInput={(value) => {
setUnStakeAmount(value);
}}
/>
<Typography
variant='body2'
style={{
color:
stakingInfo.stakedAmount &&
stakingInfo.stakedAmount.greaterThan('0')
? palette.primary.main
: palette.text.hint,
}}
onClick={() => {
if (
stakingInfo.stakedAmount &&
stakingInfo.stakedAmount.greaterThan('0')
) {
setUnStakeAmount(stakingInfo.stakedAmount.toExact());
} else {
setUnStakeAmount('');
}
}}
>
{t('max')}
</Typography>
</Box>
<Box
className={
unstakeEnabled ? classes.buttonClaim : classes.buttonToken
}
mt={2}
p={2}
onClick={() => {
if (unstakeEnabled) {
onWithdraw();
}
}}
>
<Typography variant='body1'>
{attemptUnstaking
? t('unstakingLPTokens')
: t('unstakeLPTokens')}
</Typography>
</Box>
</Box>
<Box className={classes.buttonWrapper}>
<Box
display='flex'
flexDirection='column'
alignItems='center'
justifyContent='space-between'
>
<Box mb={1}>
<Typography variant='body2'>
{t('unclaimedRewards')}:
</Typography>
</Box>
{isLPFarm ? (
<>
<Box mb={1}>
<CurrencyLogo currency={lpStakingInfo.rewardToken} />
</Box>
<Box mb={1} textAlign='center'>
<Typography variant='body1' color='textSecondary'>
{formatTokenAmount(lpStakingInfo.earnedAmount)}
<span> {lpStakingInfo.rewardToken.symbol}</span>
</Typography>
<Typography variant='body2'>{earnedUSDStr}</Typography>
</Box>
</>
) : (
<>
<Box mb={1} display='flex'>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenA)}
/>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenB)}
/>
</Box>
<Box mb={1} textAlign='center'>
<Typography variant='body1'>{earnedUSDStr}</Typography>
<Typography variant='body1' color='textSecondary'>
{formatTokenAmount(dualStakingInfo.earnedAmountA)}
<span> {dualStakingInfo.rewardTokenA.symbol}</span>
</Typography>
<Typography variant='body1' color='textSecondary'>
{formatTokenAmount(dualStakingInfo.earnedAmountB)}
<span> {dualStakingInfo.rewardTokenB.symbol}</span>
</Typography>
</Box>
</>
)}
</Box>
<Box
className={
claimEnabled ? classes.buttonClaim : classes.buttonToken
}
p={2}
onClick={() => {
if (claimEnabled) {
onClaimReward();
}
}}
>
<Typography variant='body1'>
{attemptClaiming ? t('claiming') : t('claim')}
</Typography>
</Box>
</Box>
</>
)}
</Box>
{mainRewardRate?.greaterThan('0') && (
<Box className={classes.dailyRateWrapper}>
<Box
display='flex'
alignItems='center'
justifyContent={isMobile ? 'space-between' : 'flex-start'}
mr={isMobile ? 0 : 1.5}
width={isMobile ? 1 : 'auto'}
mb={isMobile ? 1 : 0}
flexWrap='wrap'
>
<Box display='flex' mr={1}>
<Typography variant='body2' color='textSecondary'>
{t('yourRate', {
symbol: isLPFarm ? '' : dualStakingInfo.rewardTokenA.symbol,
})}
:
</Typography>
</Box>
<Typography variant='body2' color='textPrimary'>
{formatMulDivTokenAmount(
mainRewardRate,
GlobalConst.utils.ONEDAYSECONDS,
)}{' '}
{isLPFarm
? lpStakingInfo.rewardToken.symbol
: dualStakingInfo.rewardTokenA.symbol}{' '}
/ {t('day')}
</Typography>
</Box>
{!isLPFarm && (
<Box
display='flex'
alignItems='center'
justifyContent={isMobile ? 'space-between' : 'flex-start'}
mr={isMobile ? 0 : 1.5}
width={isMobile ? 1 : 'auto'}
mb={isMobile ? 1 : 0}
flexWrap='wrap'
>
<Box display='flex' mr={1}>
<Typography variant='body2' color='textSecondary'>
{t('yourRate', {
symbol: dualStakingInfo.rewardTokenB.symbol,
})}
:
</Typography>
</Box>
<Typography variant='body2' color='textPrimary'>
{formatMulDivTokenAmount(
dualStakingInfo.rewardRateB,
GlobalConst.utils.ONEDAYSECONDS,
)}{' '}
{dualStakingInfo.rewardTokenB.symbol} / {t('day')}
</Typography>
</Box>
)}
<Box
display='flex'
justifyContent={isMobile ? 'space-between' : 'flex-start'}
alignItems='center'
width={isMobile ? 1 : 'auto'}
flexWrap='wrap'
>
<Box display='flex' mr={1}>
<Typography variant='body2' color='textSecondary'>
{t('yourFees')}:
</Typography>
</Box>
<Typography variant='body2' color='textPrimary'>
${formatNumber(stakingInfo.accountFee)} / {t('day')}
</Typography>
</Box>
</Box>
)}
</>
);
}
Example #4
| Source File: PoolPositionCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
PoolPositionCard: React.FC<{ pair: Pair }> = ({ pair }) => {
const [bulkPairData, setBulkPairData] = useState<any>(null);
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const currency0 = unwrappedToken(pair.token0);
const currency1 = unwrappedToken(pair.token1);
const stakingInfos = useStakingInfo(pair);
const dualStakingInfos = useDualStakingInfo(pair);
const stakingInfo = useMemo(
() =>
stakingInfos && stakingInfos.length > 0
? stakingInfos[0]
: dualStakingInfos && dualStakingInfos.length > 0
? dualStakingInfos[0]
: null,
[stakingInfos, dualStakingInfos],
);
const pairId = pair.liquidityToken.address;
useEffect(() => {
const pairLists = [pairId];
getBulkPairData(pairLists).then((data) => setBulkPairData(data));
return () => setBulkPairData(null);
}, [pairId]);
const [showMore, setShowMore] = useState(false);
const apyWithFee = useMemo(() => {
if (stakingInfo && bulkPairData) {
const dayVolume = bulkPairData[stakingInfo.pair]?.oneDayVolumeUSD;
const reserveUSD = bulkPairData[stakingInfo.pair]?.reserveUSD;
const oneYearFee =
dayVolume && reserveUSD ? getOneYearFee(dayVolume, reserveUSD) : 0;
return formatAPY(
getAPYWithFee(stakingInfo.perMonthReturnInRewards ?? 0, oneYearFee),
);
}
}, [stakingInfo, bulkPairData]);
return (
<Box
width={1}
border={`1px solid ${palette.secondary.dark}`}
borderRadius={10}
bgcolor={showMore ? palette.secondary.dark : 'transparent'}
style={{ overflow: 'hidden' }}
>
<Box
paddingX={isMobile ? 1.5 : 3}
paddingY={isMobile ? 2 : 3}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
margin={true}
size={28}
/>
<Typography
variant='h6'
style={{ color: palette.text.primary, marginLeft: 16 }}
>
{!currency0 || !currency1
? 'Loading'
: `${currency0.symbol}/${currency1.symbol}`}
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
color={palette.primary.main}
style={{ cursor: 'pointer' }}
onClick={() => setShowMore(!showMore)}
>
<Typography variant='body1' style={{ marginRight: 8 }}>
Manage
</Typography>
{showMore ? <ChevronUp size='20' /> : <ChevronDown size='20' />}
</Box>
</Box>
{showMore && <PoolPositionCardDetails pair={pair} />}
{stakingInfo && !stakingInfo.ended && apyWithFee && (
<Box bgcolor='#404557' paddingY={0.75} paddingX={isMobile ? 2 : 3}>
<Typography variant='body2'>
Earn{' '}
<span style={{ color: palette.success.main }}>
{apyWithFee}% APY
</span>{' '}
by staking your LP tokens in {currency0.symbol?.toUpperCase()} /{' '}
{currency1.symbol?.toUpperCase()} Farm
</Typography>
</Box>
)}
</Box>
);
}
Example #5
| Source File: PoolPositionCardDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
PoolPositionCardDetails: React.FC<{ pair: Pair }> = ({ pair }) => {
const classes = useStyles();
const history = useHistory();
const { breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const { account } = useActiveWeb3React();
const [openRemoveModal, setOpenRemoveModal] = useState(false);
const currency0 = unwrappedToken(pair.token0);
const currency1 = unwrappedToken(pair.token1);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<>
<Box px={isMobile ? 1.5 : 3} mb={3}>
<Box className={classes.cardRow}>
<Typography variant='body2'>Your pool tokens:</Typography>
<Typography variant='body2'>
{formatTokenAmount(userPoolBalance)}
</Typography>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Pooled {currency0.symbol}:</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body2' style={{ marginRight: 10 }}>
{formatTokenAmount(token0Deposited)}
</Typography>
<CurrencyLogo size='20px' currency={currency0} />
</Box>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Pooled {currency1.symbol}:</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body2' style={{ marginRight: 10 }}>
{formatTokenAmount(token1Deposited)}
</Typography>
<CurrencyLogo size='20px' currency={currency1} />
</Box>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Your pool share:</Typography>
<Typography variant='body2'>
{poolTokenPercentage
? poolTokenPercentage.toSignificant() + '%'
: '-'}
</Typography>
</Box>
<Box className={classes.poolButtonRow}>
<Button
variant='outlined'
onClick={() =>
history.push(`/analytics/pair/${pair.liquidityToken.address}`)
}
>
<Typography variant='body2'>View Analytics</Typography>
</Button>
<Button
variant='contained'
onClick={() => {
history.push(
`/pools?currency0=${currencyId(
currency0,
)}¤cy1=${currencyId(currency1)}`,
);
}}
>
<Typography variant='body2'>Add</Typography>
</Button>
<Button
variant='contained'
onClick={() => {
setOpenRemoveModal(true);
}}
>
<Typography variant='body2'>Remove</Typography>
</Button>
</Box>
</Box>
{openRemoveModal && (
<RemoveLiquidityModal
currency0={currency0}
currency1={currency1}
open={openRemoveModal}
onClose={() => setOpenRemoveModal(false)}
/>
)}
</>
);
}
Example #6
| Source File: PositionCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
MinimalPositionCard: React.FC<PositionCardProps> = ({
pair,
border,
showUnwrapped = false,
}) => {
const { account } = useActiveWeb3React();
const classes = useStyles();
const currency0 = showUnwrapped ? pair.token0 : unwrappedToken(pair.token0);
const currency1 = showUnwrapped ? pair.token1 : unwrappedToken(pair.token1);
const [showMore, setShowMore] = useState(false);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<Box className={classes.minimalCardWrapper} border={border}>
{userPoolBalance &&
JSBI.greaterThan(userPoolBalance.raw, JSBI.BigInt(0)) ? (
<Box>
<Typography>Your position</Typography>
<Box
mt={0.75}
display='flex'
justifyContent='space-between'
onClick={() => setShowMore(!showMore)}
>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
margin={true}
size={20}
/>
<Typography style={{ marginLeft: 6 }}>
{currency0.symbol}/{currency1.symbol}
</Typography>
</Box>
<Typography>{formatTokenAmount(userPoolBalance)}</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>Your pool share:</Typography>
<Typography>
{poolTokenPercentage ? poolTokenPercentage.toFixed(6) + '%' : '-'}
</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>{currency0.symbol}:</Typography>
<Typography>{formatTokenAmount(token0Deposited)}</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>{currency1.symbol}:</Typography>
<Typography>{formatTokenAmount(token1Deposited)}</Typography>
</Box>
</Box>
) : (
<Typography>
<span role='img' aria-label='wizard-icon'>
⭐️
</span>{' '}
By adding liquidity you'll earn 0.25% of all trades on this pair
proportional to your share of the pool. Fees are added to the pool,
accrue in real time and can be claimed by withdrawing your liquidity.
</Typography>
)}
</Box>
);
}
Example #7
| Source File: PositionCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FullPositionCard: React.FC<PositionCardProps> = ({ pair }) => {
const { account } = useActiveWeb3React();
const currency0 = unwrappedToken(pair.token0);
const currency1 = unwrappedToken(pair.token1);
const [showMore, setShowMore] = useState(false);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<Box>
<Box>
<Box>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
margin={true}
size={20}
/>
<Typography>
{!currency0 || !currency1 ? (
<Typography>Loading</Typography>
) : (
`${currency0.symbol}/${currency1.symbol}`
)}
</Typography>
</Box>
<Button onClick={() => setShowMore(!showMore)}>
{showMore ? (
<>
{' '}
Manage
<ChevronUp size='20' style={{ marginLeft: '10px' }} />
</>
) : (
<>
Manage
<ChevronDown size='20' style={{ marginLeft: '10px' }} />
</>
)}
</Button>
</Box>
{showMore && (
<Box>
<Box>
<Typography>Your pool tokens:</Typography>
<Typography>{formatTokenAmount(userPoolBalance)}</Typography>
</Box>
<Box>
<Typography>Pooled {currency0.symbol}:</Typography>
<Box>
<Typography>{formatTokenAmount(token0Deposited)}</Typography>
<CurrencyLogo
size='20px'
style={{ marginLeft: '8px' }}
currency={currency0}
/>
</Box>
</Box>
<Box>
<Typography>Pooled {currency1.symbol}:</Typography>
<Box>
<Typography>{formatTokenAmount(token1Deposited)}</Typography>
<CurrencyLogo
size='20px'
style={{ marginLeft: '8px' }}
currency={currency1}
/>
</Box>
</Box>
<Box>
<Typography>Your pool share:</Typography>
<Typography>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
</Typography>
</Box>
<Button>
<a
style={{ width: '100%', textAlign: 'center' }}
href={`https://info.quickswap.exchange/account/${account}`}
target='_blank'
rel='noopener noreferrer'
>
View accrued fees and analytics
<span style={{ fontSize: '11px' }}>↗</span>
</a>
</Button>
<Box display='flex'>
<Box width='48%'>
<Link
to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}
>
Add
</Link>
</Box>
<Box width='48%'>
<Link
to={`/remove/${currencyId(currency0)}/${currencyId(currency1)}`}
>
Remove
</Link>
</Box>
</Box>
</Box>
)}
</Box>
);
}
Example #8
| Source File: SwapTokenDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SwapTokenDetails: React.FC<{
token: Token;
}> = ({ token }) => {
const classes = useStyles();
const currency = unwrappedToken(token);
const tokenAddress = token.address;
const { palette } = useTheme();
const latestBlock = useBlockNumber();
const { tokenDetails, updateTokenDetails } = useTokenDetails();
const [tokenData, setTokenData] = useState<any>(null);
const [priceData, setPriceData] = useState<any>(null);
const priceUp = Number(tokenData?.priceChangeUSD) > 0;
const priceUpPercent = Number(tokenData?.priceChangeUSD).toFixed(2);
const [isCopied, setCopied] = useCopyClipboard();
const prices = priceData ? priceData.map((price: any) => price.close) : [];
useEffect(() => {
async function fetchTokenData() {
const tokenDetail = tokenDetails.find(
(item) => item.address === tokenAddress,
);
setTokenData(tokenDetail?.tokenData);
setPriceData(tokenDetail?.priceData);
const currentTime = dayjs.utc();
const startTime = currentTime
.subtract(1, 'day')
.startOf('hour')
.unix();
const tokenPriceData = await getIntervalTokenData(
tokenAddress,
startTime,
3600,
latestBlock,
);
setPriceData(tokenPriceData);
const [newPrice, oneDayPrice] = await getEthPrice();
const tokenInfo = await getTokenInfo(newPrice, oneDayPrice, tokenAddress);
if (tokenInfo) {
const token0 = tokenInfo[0];
setTokenData(token0);
const tokenDetailToUpdate = {
address: tokenAddress,
tokenData: token0,
priceData: tokenPriceData,
};
updateTokenDetails(tokenDetailToUpdate);
}
}
fetchTokenData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [tokenAddress]);
return (
<Box>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
px={2}
py={1.5}
>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='28px' />
<Box ml={1}>
<Typography variant='body2'>{currency.symbol}</Typography>
{tokenData ? (
<Box display='flex' alignItems='center'>
<Typography variant='body2'>
${formatNumber(tokenData.priceUSD)}
</Typography>
<Box
ml={0.5}
display='flex'
alignItems='center'
className={priceUp ? classes.success : classes.danger}
>
{priceUp ? <ArrowDropUp /> : <ArrowDropDown />}
<Typography variant='body2'>{priceUpPercent}%</Typography>
</Box>
</Box>
) : (
<Skeleton variant='rect' width={100} height={20} />
)}
</Box>
</Box>
{tokenData && priceData ? (
<Box width={88} height={47} position='relative'>
<Box position='absolute' top={-30} width={1}>
{prices.length > 0 && (
<LineChart
data={prices}
width='100%'
height={120}
color={priceUp ? palette.success.main : palette.error.main}
/>
)}
</Box>
</Box>
) : (
<Skeleton variant='rect' width={88} height={47} />
)}
</Box>
<Box
borderTop={`1px solid ${palette.secondary.light}`}
borderBottom={`1px solid ${palette.secondary.light}`}
px={2}
>
<Grid container>
<Grid item xs={6}>
<Box borderRight={`1px solid ${palette.secondary.light}`} py={1}>
{tokenData ? (
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
TVL: {formatCompact(tokenData?.totalLiquidityUSD)}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={16} />
)}
</Box>
</Grid>
<Grid item xs={6}>
<Box py={1} pl={2}>
{tokenData ? (
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
24h VOL: {formatCompact(tokenData?.oneDayVolumeUSD)}
</Typography>
) : (
<Skeleton variant='rect' width={100} height={16} />
)}
</Box>
</Grid>
</Grid>
</Box>
<Box
display='flex'
justifyContent='space-between'
alignItems='center'
py={1}
px={2}
>
<a
href={`https://polygonscan.com/token/${tokenAddress}`}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}
>
<Typography variant='body2' style={{ color: palette.primary.main }}>
{shortenAddress(tokenAddress)}
</Typography>
</a>
<Box
display='flex'
style={{ cursor: 'pointer', opacity: isCopied ? 0.5 : 1 }}
onClick={() => {
setCopied(tokenAddress);
}}
>
<CopyIcon />
</Box>
</Box>
</Box>
);
}
Example #9
| Source File: SyrupCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const currency = unwrappedToken(syrup.token);
const depositAmount = syrup.valueOfTotalStakedAmountInUSDC
? `$${syrup.valueOfTotalStakedAmountInUSDC.toLocaleString()}`
: `${formatTokenAmount(syrup.totalStakedAmount)} ${
syrup.stakingToken.symbol
}`;
return (
<Box className={classes.syrupCard}>
<Box
display='flex'
flexWrap='wrap'
alignItems='center'
width={1}
padding={2}
style={{ cursor: 'pointer' }}
onClick={() => setExpanded(!expanded)}
>
{isMobile ? (
<>
<Box
display='flex'
alignItems='center'
width={expanded ? 0.95 : 0.5}
>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
</Box>
</Box>
{!expanded && (
<Box width={0.45}>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{expanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
<Box width={0.3} display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}
<span style={{ color: palette.text.secondary }}>
{' '}
/ day
</span>
</Typography>
</Box>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
$
{syrup.rewardTokenPriceinUSD
? (
syrup.rate * syrup.rewardTokenPriceinUSD
).toLocaleString()
: '-'}{' '}
<span style={{ color: palette.text.secondary }}>/ day</span>
</Typography>
</Box>
</Box>
</Box>
<Box width={0.3}>
<Typography variant='body2'>{depositAmount}</Typography>
</Box>
<Box width={0.2} textAlign='left'>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
<Box width={0.2} textAlign='right'>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
mb={0.25}
>
<CurrencyLogo currency={currency} size='16px' />
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(syrup.earnedAmount)}
</Typography>
</Box>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{getEarnedUSDSyrup(syrup)}
</Typography>
</Box>
</>
)}
</Box>
{expanded && syrup && (
<SyrupCardDetails syrup={syrup} dQUICKAPY={dQUICKAPY} />
)}
</Box>
);
}
Example #10
| Source File: SyrupCardDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const syrupCurrency = unwrappedToken(syrup.token);
const { palette, breakpoints } = useTheme();
const { t } = useTranslation();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [attemptingClaim, setAttemptingClaim] = useState(false);
const [attemptingUnstake, setAttemptingUnstake] = useState(false);
const [openStakeModal, setOpenStakeModal] = useState(false);
const classes = useStyles();
const stakingTokenPrice = useUSDCPriceToken(syrup.stakingToken);
const stakingContract = useStakingContract(syrup?.stakingRewardAddress);
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const { account } = useActiveWeb3React();
const currency = syrup ? unwrappedToken(syrup.token) : undefined;
const userLiquidityUnstaked = useTokenBalance(
account ?? undefined,
syrup.stakedAmount?.token,
);
const exactEnd = syrup ? syrup.periodFinish : 0;
const depositAmount =
syrup && syrup.valueOfTotalStakedAmountInUSDC
? `$${Number(syrup.valueOfTotalStakedAmountInUSDC).toLocaleString()}`
: `${formatTokenAmount(syrup?.totalStakedAmount)} ${
syrup?.stakingToken.symbol
}`;
const onClaimReward = async () => {
if (syrup && stakingContract && syrup.stakedAmount) {
setAttemptingClaim(true);
await stakingContract
.getReward({ gasLimit: 350000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
});
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
});
setAttemptingClaim(false);
} catch (e) {
setAttemptingClaim(false);
}
})
.catch((error: any) => {
setAttemptingClaim(false);
console.log(error);
});
}
};
const onWithdraw = async () => {
if (syrup && stakingContract && syrup.stakedAmount) {
setAttemptingUnstake(true);
await stakingContract
.exit({ gasLimit: 300000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Withdraw deposited liquidity`,
});
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Withdraw deposited dQUICK`,
});
setAttemptingUnstake(false);
} catch (e) {
setAttemptingUnstake(false);
}
})
.catch((error: any) => {
setAttemptingUnstake(false);
console.log(error);
});
}
};
const StakeButton = () => (
<Box
className={classes.syrupButton}
onClick={() => setOpenStakeModal(true)}
>
<Typography variant='body2'>Stake</Typography>
</Box>
);
const UnstakeButton = () => (
<Box
className={classes.syrupButton}
style={{ opacity: attemptingUnstake ? 0.6 : 1 }}
onClick={() => {
if (!attemptingUnstake) {
onWithdraw();
}
}}
>
<Typography variant='body2'>
{attemptingUnstake ? 'Unstaking...' : 'Unstake'}
</Typography>
</Box>
);
const ClaimButton = () => (
<Box
className={classes.syrupButton}
style={{ opacity: attemptingClaim ? 0.6 : 1 }}
onClick={() => {
if (!attemptingClaim) {
onClaimReward();
}
}}
>
<Typography variant='body2'>
{attemptingClaim ? 'Claiming...' : 'Claim'}
</Typography>
</Box>
);
return (
<>
{openStakeModal && syrup && (
<StakeSyrupModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
syrup={syrup}
/>
)}
{syrup && (
<>
<Divider />
<Box padding={3}>
{isMobile && (
<Box mb={3}>
<Box display='flex' justifyContent='space-between' mb={2}>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{syrup.stakingToken.symbol} {t('deposits')}:
</Typography>
<Typography variant='body2'>{depositAmount}</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mb={2}>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('dailyRewards')}:
</Typography>
<Typography variant='body2'>
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}{' '}
{syrup.token.symbol}
<span style={{ color: palette.text.secondary }}>
{' '}
/ {t('day')}
</span>
</Typography>
</Box>
<Box mb={2}>
<SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
</Box>
<Box display='flex' justifyContent='space-between' mb={3}>
<Box display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
APR:
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box textAlign='right'>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
</Box>
<Divider />
</Box>
)}
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={1}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('inwallet')}
</Typography>
<Typography variant='body2'>
<span style={{ color: palette.text.primary }}>
{userLiquidityUnstaked
? formatTokenAmount(userLiquidityUnstaked)
: 0}{' '}
{syrup.stakingToken.symbol}
</span>
<span style={{ color: palette.text.secondary, marginLeft: 4 }}>
$
{userLiquidityUnstaked
? (
stakingTokenPrice *
Number(userLiquidityUnstaked.toExact())
).toLocaleString()
: 0}
</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={1}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('staked')}
</Typography>
<Typography variant='body2'>
<span style={{ color: palette.text.primary }}>
{formatTokenAmount(syrup.stakedAmount)}{' '}
{syrup.stakingToken.symbol}
</span>
<span style={{ color: palette.text.secondary, marginLeft: 4 }}>
{syrup.stakedAmount
? `$${(
stakingTokenPrice * Number(syrup.stakedAmount.toExact())
).toLocaleString()}`
: '-'}
</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={2}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('earned')} {currency?.symbol}
</Typography>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='16px' />
<Typography variant='body2' style={{ marginLeft: 4 }}>
<span style={{ color: palette.text.primary }}>
{formatTokenAmount(syrup.earnedAmount)}
</span>
<span
style={{ color: palette.text.secondary, marginLeft: 4 }}
>
{getEarnedUSDSyrup(syrup)}
</span>
</Typography>
</Box>
</Box>
<Box
display='flex'
flexWrap='wrap'
alignItems='center'
justifyContent='space-between'
>
{!isMobile && (
<SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
)}
{isMobile ? (
<>
{syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
<Box
width={1}
mb={1.5}
display='flex'
justifyContent='flex-end'
>
<ClaimButton />
</Box>
)}
<Box
width={1}
mb={1.5}
display='flex'
justifyContent={
syrup.stakedAmount && syrup.stakedAmount.greaterThan('0')
? 'space-between'
: 'flex-end'
}
>
{!syrup.ended && <StakeButton />}
{syrup.stakedAmount &&
syrup.stakedAmount.greaterThan('0') && <UnstakeButton />}
</Box>
</>
) : (
<Box display='flex' flexWrap='wrap' my={1}>
{!syrup.ended && <StakeButton />}
{syrup.stakedAmount && syrup.stakedAmount.greaterThan('0') && (
<Box ml={1}>
<UnstakeButton />
</Box>
)}
{syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
<Box ml={1}>
<ClaimButton />
</Box>
)}
</Box>
)}
</Box>
{syrup.rewardRate?.greaterThan('0') && (
<Box className={classes.dailyRateWrapper}>
<Box
display='flex'
alignItems='center'
justifyContent={isMobile ? 'space-between' : 'flex-start'}
width={isMobile ? 1 : 'auto'}
flexWrap='wrap'
>
<Box display='flex' mr={1}>
<Typography variant='body2' color='textSecondary'>
{t('yourRate')}:
</Typography>
</Box>
<Typography variant='body2' color='textPrimary'>
{formatMulDivTokenAmount(
syrup.rewardRate,
GlobalConst.utils.ONEDAYSECONDS,
)}{' '}
{syrupCurrency.symbol} / {t('day')}
</Typography>
</Box>
</Box>
)}
</Box>
</>
)}
</>
);
}
Example #11
| Source File: hooks.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
export function useSyrupInfo(
tokenToFilterBy?: Token | null,
startIndex?: number,
endIndex?: number,
filter?: { search: string; isStaked: boolean },
): SyrupInfo[] {
const { chainId, account } = useActiveWeb3React();
const currentTimestamp = dayjs().unix();
const info = useMemo(
() =>
chainId
? returnSyrupInfo()
[chainId]?.slice(startIndex, endIndex)
.filter(
(syrupInfo) =>
syrupInfo.ending > currentTimestamp &&
(tokenToFilterBy === undefined || tokenToFilterBy === null
? getSearchFiltered(syrupInfo, filter ? filter.search : '')
: tokenToFilterBy.equals(syrupInfo.token)),
) ?? []
: [],
[chainId, tokenToFilterBy, startIndex, endIndex, filter, currentTimestamp],
);
const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
const rewardsAddresses = useMemo(
() => info.map(({ stakingRewardAddress }) => stakingRewardAddress),
[info],
);
const accountArg = useMemo(() => [account ?? undefined], [account]);
// get all the info from the staking rewards contracts
const balances = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'balanceOf',
accountArg,
);
const earnedAmounts = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'earned',
accountArg,
);
const totalSupplies = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'totalSupply',
);
const rewardRates = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'rewardRate',
undefined,
NEVER_RELOAD,
);
const stakingTokenPairs = usePairs(
info.map((item) => [
unwrappedToken(item.token),
unwrappedToken(item.baseToken),
]),
);
const usdBaseTokenPrices = useUSDCPrices(
info.map((item) => unwrappedToken(item.baseToken)),
);
const stakingTokenPrices = useUSDCPricesToken(
info.map((item) => item.stakingToken),
);
return useMemo(() => {
if (!chainId || !uni) return [];
return rewardsAddresses.reduce<SyrupInfo[]>(
(memo, rewardsAddress, index) => {
// these two are dependent on account
const balanceState = balances[index];
const earnedAmountState = earnedAmounts[index];
const stakingTokenPrice = stakingTokenPrices[index];
// these get fetched regardless of account
const totalSupplyState = totalSupplies[index];
const rewardRateState = rewardRates[index];
const syrupInfo = info[index];
if (
// these may be undefined if not logged in
!balanceState?.loading &&
!earnedAmountState?.loading &&
// always need these
totalSupplyState &&
!totalSupplyState.loading &&
rewardRateState &&
!rewardRateState.loading
) {
// get the LP token
const token = syrupInfo.token;
const [, stakingTokenPair] = stakingTokenPairs[index];
const tokenPairPrice = stakingTokenPair?.priceOf(token);
const usdPriceBaseToken = usdBaseTokenPrices[index];
const priceOfRewardTokenInUSD =
tokenPairPrice && usdPriceBaseToken
? Number(tokenPairPrice.toSignificant()) *
Number(usdPriceBaseToken.toSignificant())
: undefined;
const rewards = syrupInfo.rate * (priceOfRewardTokenInUSD ?? 0);
// check for account, if no account set to 0
const rate = web3.utils.toWei(syrupInfo.rate.toString());
const syrupToken = getSyrupLPToken(syrupInfo);
const stakedAmount = initTokenAmountFromCallResult(
syrupToken,
balanceState,
);
const totalStakedAmount = initTokenAmountFromCallResult(
syrupToken,
totalSupplyState,
);
const totalRewardRate = new TokenAmount(token, JSBI.BigInt(rate));
//const pair = info[index].pair.toLowerCase();
//const fees = (pairData && pairData[pair] ? pairData[pair].oneDayVolumeUSD * 0.0025: 0);
const rewardRate = initTokenAmountFromCallResult(
token,
rewardRateState,
);
const getHypotheticalRewardRate = (
stakedAmount?: TokenAmount,
totalStakedAmount?: TokenAmount,
): TokenAmount | undefined => {
if (!stakedAmount || !totalStakedAmount || !rewardRate) return;
return new TokenAmount(
token,
JSBI.greaterThan(totalStakedAmount.raw, JSBI.BigInt(0))
? JSBI.divide(
JSBI.multiply(rewardRate.raw, stakedAmount.raw),
totalStakedAmount.raw,
)
: JSBI.BigInt(0),
);
};
const individualRewardRate = getHypotheticalRewardRate(
stakedAmount,
totalStakedAmount,
);
const periodFinishMs = syrupInfo.ending;
memo.push({
stakingRewardAddress: rewardsAddress,
token: syrupInfo.token,
ended: syrupInfo.ended,
name: syrupInfo.name,
lp: syrupInfo.lp,
periodFinish: periodFinishMs,
earnedAmount: initTokenAmountFromCallResult(
token,
earnedAmountState,
),
rewardRate: individualRewardRate,
totalRewardRate: totalRewardRate,
stakedAmount: stakedAmount,
totalStakedAmount: totalStakedAmount,
getHypotheticalRewardRate,
baseToken: syrupInfo.baseToken,
rate: syrupInfo.rate,
rewardTokenPriceinUSD: priceOfRewardTokenInUSD,
rewards,
stakingToken: syrupInfo.stakingToken,
valueOfTotalStakedAmountInUSDC: totalStakedAmount
? Number(totalStakedAmount.toExact()) * stakingTokenPrice
: undefined,
});
}
return memo;
},
[],
);
}, [
balances,
chainId,
earnedAmounts,
info,
rewardsAddresses,
totalSupplies,
uni,
rewardRates,
stakingTokenPairs,
usdBaseTokenPrices,
stakingTokenPrices,
]).filter((syrupInfo) =>
filter && filter.isStaked
? syrupInfo.stakedAmount && syrupInfo.stakedAmount.greaterThan('0')
: true,
);
}
Example #12
| Source File: hooks.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
export function useOldSyrupInfo(
tokenToFilterBy?: Token | null,
startIndex?: number,
endIndex?: number,
filter?: { search: string; isStaked: boolean },
): SyrupInfo[] {
const { chainId, account } = useActiveWeb3React();
const currentTimestamp = dayjs().unix();
const info = useMemo(() => {
if (!chainId) return [];
const endedSyrupInfos =
returnSyrupInfo(false)[chainId]?.filter(
(syrupInfo) => syrupInfo.ending <= currentTimestamp,
) ?? [];
const oldSyrupInfos = returnSyrupInfo(true)[chainId] ?? [];
const allOldSyrupInfos = endedSyrupInfos.concat(oldSyrupInfos);
return allOldSyrupInfos
.slice(startIndex, endIndex)
.filter((syrupInfo) =>
tokenToFilterBy === undefined || tokenToFilterBy === null
? getSearchFiltered(syrupInfo, filter ? filter.search : '')
: tokenToFilterBy.equals(syrupInfo.token),
);
}, [
chainId,
tokenToFilterBy,
startIndex,
endIndex,
filter,
currentTimestamp,
]);
const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
const rewardsAddresses = useMemo(
() => info.map(({ stakingRewardAddress }) => stakingRewardAddress),
[info],
);
const accountArg = useMemo(() => [account ?? undefined], [account]);
// get all the info from the staking rewards contracts
const balances = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'balanceOf',
accountArg,
);
const earnedAmounts = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'earned',
accountArg,
);
const totalSupplies = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'totalSupply',
);
const rewardRates = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'rewardRate',
undefined,
NEVER_RELOAD,
);
const stakingTokenPairs = usePairs(
info.map((item) => [
unwrappedToken(item.token),
unwrappedToken(item.baseToken),
]),
);
const usdBaseTokenPrices = useUSDCPrices(
info.map((item) => unwrappedToken(item.baseToken)),
);
const stakingTokenPrices = useUSDCPricesToken(
info.map((item) => item.stakingToken),
);
return useMemo(() => {
if (!chainId || !uni) return [];
return rewardsAddresses.reduce<SyrupInfo[]>(
(memo, rewardsAddress, index) => {
// these two are dependent on account
const balanceState = balances[index];
const earnedAmountState = earnedAmounts[index];
// these get fetched regardless of account
const totalSupplyState = totalSupplies[index];
const rewardRateState = rewardRates[index];
const syrupInfo = info[index];
const stakingTokenPrice = stakingTokenPrices[index];
if (
// these may be undefined if not logged in
!balanceState?.loading &&
!earnedAmountState?.loading &&
// always need these
totalSupplyState &&
!totalSupplyState.loading &&
rewardRateState &&
!rewardRateState.loading
) {
// get the LP token
const token = syrupInfo.token;
// check for account, if no account set to 0
const rate = web3.utils.toWei(syrupInfo.rate.toString());
const stakedAmount = initTokenAmountFromCallResult(
getSyrupLPToken(syrupInfo),
balanceState,
);
const totalStakedAmount = initTokenAmountFromCallResult(
getSyrupLPToken(syrupInfo),
totalSupplyState,
);
const totalRewardRate = new TokenAmount(token, JSBI.BigInt(rate));
//const pair = info[index].pair.toLowerCase();
//const fees = (pairData && pairData[pair] ? pairData[pair].oneDayVolumeUSD * 0.0025: 0);
const rewardRate = initTokenAmountFromCallResult(
token,
rewardRateState,
);
const getHypotheticalRewardRate = (
stakedAmount?: TokenAmount,
totalStakedAmount?: TokenAmount,
): TokenAmount | undefined => {
if (!stakedAmount || !totalStakedAmount || !rewardRate) return;
return new TokenAmount(
token,
JSBI.greaterThan(totalStakedAmount.raw, JSBI.BigInt(0))
? JSBI.divide(
JSBI.multiply(rewardRate.raw, stakedAmount.raw),
totalStakedAmount.raw,
)
: JSBI.BigInt(0),
);
};
const individualRewardRate = getHypotheticalRewardRate(
stakedAmount,
totalStakedAmount,
);
const periodFinishMs = syrupInfo.ending;
const [, stakingTokenPair] = stakingTokenPairs[index];
const tokenPairPrice = stakingTokenPair?.priceOf(token);
const usdPriceBaseToken = usdBaseTokenPrices[index];
const priceOfRewardTokenInUSD =
Number(tokenPairPrice?.toSignificant()) *
Number(usdPriceBaseToken?.toSignificant());
memo.push({
stakingRewardAddress: rewardsAddress,
token: syrupInfo.token,
ended: true,
name: syrupInfo.name,
lp: syrupInfo.lp,
periodFinish: periodFinishMs,
earnedAmount: initTokenAmountFromCallResult(
token,
earnedAmountState,
),
rewardRate: individualRewardRate,
totalRewardRate: totalRewardRate,
stakedAmount: stakedAmount,
totalStakedAmount: totalStakedAmount,
getHypotheticalRewardRate,
baseToken: syrupInfo.baseToken,
rate: 0,
rewardTokenPriceinUSD: priceOfRewardTokenInUSD,
stakingToken: syrupInfo.stakingToken,
valueOfTotalStakedAmountInUSDC: totalStakedAmount
? Number(totalStakedAmount.toExact()) * stakingTokenPrice
: undefined,
});
}
return memo;
},
[],
);
}, [
balances,
chainId,
earnedAmounts,
info,
rewardsAddresses,
totalSupplies,
uni,
rewardRates,
stakingTokenPairs,
usdBaseTokenPrices,
stakingTokenPrices,
]).filter((syrupInfo) =>
filter && filter.isStaked
? syrupInfo.stakedAmount && syrupInfo.stakedAmount.greaterThan('0')
: true,
);
}
Example #13
| Source File: hooks.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
// gets the dual rewards staking info from the network for the active chain id
export function useDualStakingInfo(
pairToFilterBy?: Pair | null,
startIndex?: number,
endIndex?: number,
filter?: { search: string; isStaked: boolean },
): DualStakingInfo[] {
const { chainId, account } = useActiveWeb3React();
const info = useMemo(
() =>
chainId
? returnDualStakingInfo()
[chainId]?.slice(startIndex, endIndex)
?.filter((stakingRewardInfo) =>
pairToFilterBy === undefined || pairToFilterBy === null
? getSearchFiltered(
stakingRewardInfo,
filter ? filter.search : '',
)
: pairToFilterBy.involvesToken(stakingRewardInfo.tokens[0]) &&
pairToFilterBy.involvesToken(stakingRewardInfo.tokens[1]),
) ?? []
: [],
[chainId, pairToFilterBy, startIndex, endIndex, filter],
);
const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
const rewardsAddresses = useMemo(
() => info.map(({ stakingRewardAddress }) => stakingRewardAddress),
[info],
);
// const pairAddresses = useMemo(() => info.map(({ pair }) => pair), [info]);
// useEffect(() => {
// getDualBulkPairData(pairAddresses);
// }, [pairAddresses]);
const accountArg = useMemo(() => [account ?? undefined], [account]);
// get all the info from the staking rewards contracts
const balances = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'balanceOf',
accountArg,
);
const earnedAAmounts = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'earnedA',
accountArg,
);
const earnedBAmounts = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'earnedB',
accountArg,
);
const totalSupplies = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'totalSupply',
);
const rewardRatesA = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'rewardRateA',
undefined,
NEVER_RELOAD,
);
const rewardRatesB = useMultipleContractSingleData(
rewardsAddresses,
STAKING_DUAL_REWARDS_INTERFACE,
'rewardRateB',
undefined,
NEVER_RELOAD,
);
const baseTokens = info.map((item) => {
const unwrappedCurrency = unwrappedToken(item.baseToken);
const empty = unwrappedToken(returnTokenFromKey('EMPTY'));
return unwrappedCurrency === empty ? item.tokens[0] : item.baseToken;
});
const usdPrices = useUSDCPrices(baseTokens);
const totalSupplys = useTotalSupplys(
info.map((item) => getFarmLPToken(item)),
);
const stakingPairs = usePairs(info.map((item) => item.tokens));
const rewardTokenAPrices = useUSDCPricesToken(
info.map((item) => item.rewardTokenA),
);
const rewardTokenBPrices = useUSDCPricesToken(
info.map((item) => item.rewardTokenB),
);
return useMemo(() => {
if (!chainId || !uni) return [];
return rewardsAddresses.reduce<DualStakingInfo[]>(
(memo, rewardsAddress, index) => {
// these two are dependent on account
const balanceState = balances[index];
const earnedAAmountState = earnedAAmounts[index];
const earnedBAmountState = earnedBAmounts[index];
// these get fetched regardless of account
const totalSupplyState = totalSupplies[index];
const rewardRateAState = rewardRatesA[index];
const rewardRateBState = rewardRatesB[index];
const stakingInfo = info[index];
const rewardTokenAPrice = rewardTokenAPrices[index];
const rewardTokenBPrice = rewardTokenBPrices[index];
if (
// these may be undefined if not logged in
!balanceState?.loading &&
!earnedAAmountState?.loading &&
!earnedBAmountState?.loading &&
// always need these
totalSupplyState &&
!totalSupplyState.loading &&
rewardRateAState &&
!rewardRateAState.loading &&
rewardRateBState &&
!rewardRateBState.loading
) {
const rateA = web3.utils.toWei(stakingInfo.rateA.toString());
const rateB = web3.utils.toWei(stakingInfo.rateB.toString());
const stakedAmount = initTokenAmountFromCallResult(
getFarmLPToken(stakingInfo),
balanceState,
);
const totalStakedAmount = initTokenAmountFromCallResult(
getFarmLPToken(stakingInfo),
totalSupplyState,
);
const totalRewardRateA = new TokenAmount(uni, JSBI.BigInt(rateA));
const totalRewardRateB = new TokenAmount(uni, JSBI.BigInt(rateB));
//const pair = info[index].pair.toLowerCase();
//const fees = (pairData && pairData[pair] ? pairData[pair].oneDayVolumeUSD * 0.0025: 0);
const totalRewardRateA01 = initTokenAmountFromCallResult(
uni,
rewardRateAState,
);
const totalRewardRateB01 = initTokenAmountFromCallResult(
uni,
rewardRateBState,
);
const getHypotheticalRewardRate = (
stakedAmount?: TokenAmount,
totalStakedAmount?: TokenAmount,
totalRewardRate?: TokenAmount,
): TokenAmount | undefined => {
if (!stakedAmount || !totalStakedAmount || !totalRewardRate) return;
return new TokenAmount(
uni,
JSBI.greaterThan(totalStakedAmount.raw, JSBI.BigInt(0))
? JSBI.divide(
JSBI.multiply(totalRewardRate.raw, stakedAmount.raw),
totalStakedAmount.raw,
)
: JSBI.BigInt(0),
);
};
const individualRewardRateA = getHypotheticalRewardRate(
stakedAmount,
totalStakedAmount,
totalRewardRateA01,
);
const individualRewardRateB = getHypotheticalRewardRate(
stakedAmount,
totalStakedAmount,
totalRewardRateB01,
);
const { oneDayFee, accountFee } = getStakingFees(
stakingInfo,
balanceState,
totalSupplyState,
);
let valueOfTotalStakedAmountInBaseToken: TokenAmount | undefined;
const [, stakingTokenPair] = stakingPairs[index];
const totalSupply = totalSupplys[index];
const usdPrice = usdPrices[index];
if (
totalSupply &&
stakingTokenPair &&
baseTokens[index] &&
totalStakedAmount
) {
// take the total amount of LP tokens staked, multiply by ETH value of all LP tokens, divide by all LP tokens
valueOfTotalStakedAmountInBaseToken = new TokenAmount(
baseTokens[index],
JSBI.divide(
JSBI.multiply(
JSBI.multiply(
totalStakedAmount.raw,
stakingTokenPair.reserveOf(baseTokens[index]).raw,
),
JSBI.BigInt(2), // this is b/c the value of LP shares are ~double the value of the WETH they entitle owner to
),
totalSupply.raw,
),
);
}
const valueOfTotalStakedAmountInUSDC =
valueOfTotalStakedAmountInBaseToken &&
usdPrice?.quote(valueOfTotalStakedAmountInBaseToken);
const tvl = valueOfTotalStakedAmountInUSDC
? valueOfTotalStakedAmountInUSDC.toExact()
: valueOfTotalStakedAmountInBaseToken?.toExact();
const perMonthReturnInRewards =
((stakingInfo.rateA * rewardTokenAPrice +
stakingInfo.rateB * rewardTokenBPrice) *
(getDaysCurrentYear() / 12)) /
Number(valueOfTotalStakedAmountInUSDC?.toExact());
memo.push({
stakingRewardAddress: rewardsAddress,
tokens: stakingInfo.tokens,
ended: stakingInfo.ended,
name: stakingInfo.name,
lp: stakingInfo.lp,
earnedAmountA: initTokenAmountFromCallResult(
uni,
earnedAAmountState,
),
earnedAmountB: initTokenAmountFromCallResult(
uni,
earnedBAmountState,
),
rewardRateA: individualRewardRateA,
rewardRateB: individualRewardRateB,
totalRewardRateA: totalRewardRateA,
totalRewardRateB: totalRewardRateB,
stakedAmount: stakedAmount,
totalStakedAmount: totalStakedAmount,
getHypotheticalRewardRate,
baseToken: stakingInfo.baseToken,
pair: stakingInfo.pair,
rateA: stakingInfo.rateA,
rateB: stakingInfo.rateB,
rewardTokenA: stakingInfo.rewardTokenA,
rewardTokenB: stakingInfo.rewardTokenB,
rewardTokenBBase: stakingInfo.rewardTokenBBase,
rewardTokenAPrice,
rewardTokenBPrice,
tvl,
perMonthReturnInRewards,
totalSupply,
usdPrice,
stakingTokenPair,
oneDayFee,
accountFee,
});
}
return memo;
},
[],
);
}, [
balances,
chainId,
earnedAAmounts,
earnedBAmounts,
info,
rewardsAddresses,
totalSupplies,
uni,
rewardRatesA,
rewardRatesB,
baseTokens,
totalSupplys,
usdPrices,
stakingPairs,
rewardTokenAPrices,
rewardTokenBPrices,
]).filter((stakingInfo) =>
filter && filter.isStaked
? stakingInfo.stakedAmount && stakingInfo.stakedAmount.greaterThan('0')
: true,
);
}
Example #14
| Source File: hooks.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
// gets the staking info from the network for the active chain id
export function useStakingInfo(
pairToFilterBy?: Pair | null,
startIndex?: number,
endIndex?: number,
filter?: { search: string; isStaked: boolean },
): StakingInfo[] {
const { chainId, account } = useActiveWeb3React();
const info = useMemo(
() =>
chainId
? returnStakingInfo()
[chainId]?.slice(startIndex, endIndex)
?.filter((stakingRewardInfo) =>
pairToFilterBy === undefined || pairToFilterBy === null
? getSearchFiltered(
stakingRewardInfo,
filter ? filter.search : '',
)
: pairToFilterBy.involvesToken(stakingRewardInfo.tokens[0]) &&
pairToFilterBy.involvesToken(stakingRewardInfo.tokens[1]),
) ?? []
: [],
[chainId, pairToFilterBy, startIndex, endIndex, filter],
);
const uni = chainId ? GlobalValue.tokens.UNI[chainId] : undefined;
const rewardsAddresses = useMemo(
() => info.map(({ stakingRewardAddress }) => stakingRewardAddress),
[info],
);
// const pairAddresses = useMemo(() => info.map(({ pair }) => pair), [info]);
// useEffect(() => {
// getBulkPairData(allPairAddress);
// }, [allPairAddress]);
const accountArg = useMemo(() => [account ?? undefined], [account]);
// get all the info from the staking rewards contracts
const balances = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'balanceOf',
accountArg,
);
const earnedAmounts = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'earned',
accountArg,
);
const totalSupplies = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'totalSupply',
);
const rewardRates = useMultipleContractSingleData(
rewardsAddresses,
STAKING_REWARDS_INTERFACE,
'rewardRate',
undefined,
NEVER_RELOAD,
);
const baseTokens = info.map((item) => {
const unwrappedCurrency = unwrappedToken(item.baseToken);
const empty = unwrappedToken(returnTokenFromKey('EMPTY'));
return unwrappedCurrency === empty ? item.tokens[0] : item.baseToken;
});
const rewardTokens = info.map((item) => item.rewardToken);
const usdPrices = useUSDCPrices(baseTokens);
const usdPricesRewardTokens = useUSDCPricesToken(rewardTokens);
const totalSupplys = useTotalSupplys(
info.map((item) => {
const lp = item.lp;
const dummyPair = new Pair(
new TokenAmount(item.tokens[0], '0'),
new TokenAmount(item.tokens[1], '0'),
);
return lp && lp !== ''
? new Token(137, lp, 18, 'SLP', 'Staked LP')
: dummyPair.liquidityToken;
}),
);
const stakingPairs = usePairs(info.map((item) => item.tokens));
return useMemo(() => {
if (!chainId || !uni) return [];
return rewardsAddresses.reduce<StakingInfo[]>(
(memo, rewardsAddress, index) => {
// these two are dependent on account
const balanceState = balances[index];
const earnedAmountState = earnedAmounts[index];
// these get fetched regardless of account
const totalSupplyState = totalSupplies[index];
const rewardRateState = rewardRates[index];
const stakingInfo = info[index];
const rewardTokenPrice = usdPricesRewardTokens[index];
if (
// these may be undefined if not logged in
!balanceState?.loading &&
!earnedAmountState?.loading &&
// always need these
totalSupplyState &&
!totalSupplyState.loading &&
rewardRateState &&
!rewardRateState.loading
) {
// get the LP token
const tokens = stakingInfo.tokens;
const dummyPair = new Pair(
new TokenAmount(tokens[0], '0'),
new TokenAmount(tokens[1], '0'),
);
// check for account, if no account set to 0
const lp = stakingInfo.lp;
const rate = web3.utils.toWei(stakingInfo.rate.toString());
const stakedAmount = initTokenAmountFromCallResult(
getFarmLPToken(stakingInfo),
balanceState,
);
const totalStakedAmount = initTokenAmountFromCallResult(
getFarmLPToken(stakingInfo),
totalSupplyState,
);
const totalRewardRate = new TokenAmount(uni, JSBI.BigInt(rate));
//const pair = info[index].pair.toLowerCase();
//const fees = (pairData && pairData[pair] ? pairData[pair].oneDayVolumeUSD * 0.0025: 0);
const totalRewardRate01 = initTokenAmountFromCallResult(
uni,
rewardRateState,
);
const getHypotheticalRewardRate = (
stakedAmount?: TokenAmount,
totalStakedAmount?: TokenAmount,
totalRewardRate?: TokenAmount,
): TokenAmount | undefined => {
if (!stakedAmount || !totalStakedAmount || !totalRewardRate) return;
return new TokenAmount(
uni,
JSBI.greaterThan(totalStakedAmount.raw, JSBI.BigInt(0))
? JSBI.divide(
JSBI.multiply(totalRewardRate.raw, stakedAmount.raw),
totalStakedAmount.raw,
)
: JSBI.BigInt(0),
);
};
const individualRewardRate = getHypotheticalRewardRate(
stakedAmount,
totalStakedAmount,
totalRewardRate01,
);
const { oneYearFeeAPY, oneDayFee, accountFee } = getStakingFees(
stakingInfo,
balanceState,
totalSupplyState,
);
let valueOfTotalStakedAmountInBaseToken: TokenAmount | undefined;
const [, stakingTokenPair] = stakingPairs[index];
const totalSupply = totalSupplys[index];
const usdPrice = usdPrices[index];
if (
totalSupply &&
stakingTokenPair &&
baseTokens[index] &&
totalStakedAmount
) {
// take the total amount of LP tokens staked, multiply by ETH value of all LP tokens, divide by all LP tokens
valueOfTotalStakedAmountInBaseToken = new TokenAmount(
baseTokens[index],
JSBI.divide(
JSBI.multiply(
JSBI.multiply(
totalStakedAmount.raw,
stakingTokenPair.reserveOf(baseTokens[index]).raw,
),
JSBI.BigInt(2), // this is b/c the value of LP shares are ~double the value of the WETH they entitle owner to
),
totalSupply.raw,
),
);
}
const valueOfTotalStakedAmountInUSDC =
valueOfTotalStakedAmountInBaseToken &&
usdPrice?.quote(valueOfTotalStakedAmountInBaseToken);
const tvl = valueOfTotalStakedAmountInUSDC
? valueOfTotalStakedAmountInUSDC.toExact()
: valueOfTotalStakedAmountInBaseToken?.toExact();
const perMonthReturnInRewards =
(Number(stakingInfo.rate) *
rewardTokenPrice *
(getDaysCurrentYear() / 12)) /
Number(valueOfTotalStakedAmountInUSDC?.toExact());
memo.push({
stakingRewardAddress: rewardsAddress,
tokens: stakingInfo.tokens,
ended: stakingInfo.ended,
name: stakingInfo.name,
lp: stakingInfo.lp,
rewardToken: stakingInfo.rewardToken,
rewardTokenPrice,
earnedAmount: initTokenAmountFromCallResult(uni, earnedAmountState),
rewardRate: individualRewardRate,
totalRewardRate: totalRewardRate,
stakedAmount: stakedAmount,
totalStakedAmount: totalStakedAmount,
getHypotheticalRewardRate,
baseToken: stakingInfo.baseToken,
pair: stakingInfo.pair,
rate: stakingInfo.rate,
oneYearFeeAPY: oneYearFeeAPY,
oneDayFee,
accountFee,
tvl,
perMonthReturnInRewards,
valueOfTotalStakedAmountInBaseToken,
usdPrice,
stakingTokenPair,
totalSupply,
});
}
return memo;
},
[],
);
}, [
balances,
chainId,
earnedAmounts,
info,
rewardsAddresses,
totalSupplies,
uni,
rewardRates,
usdPricesRewardTokens,
baseTokens,
totalSupplys,
usdPrices,
stakingPairs,
]).filter((stakingInfo) =>
filter && filter.isStaked
? stakingInfo.stakedAmount && stakingInfo.stakedAmount.greaterThan('0')
: true,
);
}
