utils#getExactTokenAmount TypeScript Examples
The following examples show how to use
utils#getExactTokenAmount.
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: 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 #2
| Source File: StakeSyrupModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
StakeSyrupModal: React.FC<StakeSyrupModalProps> = ({
open,
onClose,
syrup,
}) => {
const classes = useStyles();
const { palette } = useTheme();
const [attempting, setAttempting] = useState(false);
const [hash, setHash] = useState('');
const { account, chainId, library } = useActiveWeb3React();
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const userLiquidityUnstaked = useTokenBalance(
account ?? undefined,
syrup.stakedAmount?.token,
);
const [typedValue, setTypedValue] = useState('');
const [stakePercent, setStakePercent] = useState(0);
const [approving, setApproving] = useState(false);
const maxAmountInput = maxAmountSpend(userLiquidityUnstaked);
const { parsedAmount, error } = useDerivedSyrupInfo(
typedValue,
syrup.stakedAmount?.token,
userLiquidityUnstaked,
);
const parsedAmountWrapped = wrappedCurrencyAmount(parsedAmount, chainId);
let hypotheticalRewardRate = syrup.rewardRate
? new TokenAmount(syrup.rewardRate.token, '0')
: undefined;
if (parsedAmountWrapped && parsedAmountWrapped.greaterThan('0')) {
hypotheticalRewardRate =
syrup.stakedAmount && syrup.totalStakedAmount
? syrup.getHypotheticalRewardRate(
syrup.stakedAmount.add(parsedAmountWrapped),
syrup.totalStakedAmount.add(parsedAmountWrapped),
)
: undefined;
}
const deadline = useTransactionDeadline();
const [approval, approveCallback] = useApproveCallback(
parsedAmount,
syrup.stakingRewardAddress,
);
const [signatureData, setSignatureData] = useState<{
v: number;
r: string;
s: string;
deadline: number;
} | null>(null);
const stakingContract = useStakingContract(syrup.stakingRewardAddress);
const onAttemptToApprove = async () => {
if (!library || !deadline) throw new Error('missing dependencies');
const liquidityAmount = parsedAmount;
if (!liquidityAmount) throw new Error('missing liquidity amount');
return approveCallback();
};
const onStake = async () => {
setAttempting(true);
if (stakingContract && parsedAmount && deadline) {
if (approval === ApprovalState.APPROVED) {
stakingContract
.stake(`0x${parsedAmount.raw.toString(16)}`, { gasLimit: 350000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Deposit ${syrup.stakingToken.symbol}`,
});
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Deposit ${syrup.stakingToken.symbol}`,
});
setAttempting(false);
setStakePercent(0);
setTypedValue('');
} catch (e) {
setAttempting(false);
setStakePercent(0);
setTypedValue('');
}
})
.catch((error: any) => {
setAttempting(false);
console.log(error);
});
} else if (signatureData) {
stakingContract
.stakeWithPermit(
`0x${parsedAmount.raw.toString(16)}`,
signatureData.deadline,
signatureData.v,
signatureData.r,
signatureData.s,
{ gasLimit: 350000 },
)
.then((response: TransactionResponse) => {
addTransaction(response, {
summary: `Deposit liquidity`,
});
setHash(response.hash);
})
.catch((error: any) => {
setAttempting(false);
console.log(error);
});
} else {
setAttempting(false);
throw new Error(
'Attempting to stake without approval or a signature. Please contact support.',
);
}
}
};
return (
<CustomModal open={open} onClose={onClose}>
<Box paddingX={3} paddingY={4}>
<Box display='flex' alignItems='center' justifyContent='space-between'>
<Typography variant='h5'>
Stake {syrup.stakingToken.symbol}
</Typography>
<CloseIcon style={{ cursor: 'pointer' }} onClick={onClose} />
</Box>
<Box
mt={3}
bgcolor={palette.background.default}
border='1px solid rgba(105, 108, 128, 0.12)'
borderRadius='10px'
padding='16px'
>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body2'>{syrup.stakingToken.symbol}</Typography>
<Typography variant='body2'>
Balance: {formatTokenAmount(maxAmountInput)}
</Typography>
</Box>
<Box mt={2} display='flex' alignItems='center'>
<NumericalInput
placeholder='0'
value={typedValue}
fontSize={28}
onUserInput={(value) => {
setSignatureData(null);
const totalBalance = getExactTokenAmount(maxAmountInput);
const exactTypedValue = getValueTokenDecimals(
value,
syrup.stakedAmount?.token,
);
// this is to avoid input amount more than balance
if (Number(exactTypedValue) <= totalBalance) {
setTypedValue(exactTypedValue);
setStakePercent(
totalBalance > 0
? (Number(exactTypedValue) / totalBalance) * 100
: 0,
);
}
}}
/>
<Typography
variant='caption'
style={{
color: palette.primary.main,
fontWeight: 'bold',
cursor: 'pointer',
}}
onClick={() => {
setTypedValue(maxAmountInput ? maxAmountInput.toExact() : '0');
setStakePercent(100);
}}
>
MAX
</Typography>
</Box>
<Box display='flex' alignItems='center'>
<Box flex={1} mr={2} mt={0.5}>
<ColoredSlider
min={1}
max={100}
step={1}
value={stakePercent}
onChange={(_, value) => {
const percent = value as number;
setStakePercent(percent);
setTypedValue(getPartialTokenAmount(percent, maxAmountInput));
}}
/>
</Box>
<Typography variant='body2'>
{Math.min(stakePercent, 100).toLocaleString()}%
</Typography>
</Box>
</Box>
<Box
mt={2}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body1'>Daily Rewards</Typography>
<Typography variant='body1'>
{hypotheticalRewardRate
? formatNumber(
Number(hypotheticalRewardRate.toExact()) * getSecondsOneDay(),
)
: '-'}{' '}
{syrup.token.symbol} / day
</Typography>
</Box>
<Box
mt={3}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Button
className={classes.stakeButton}
disabled={approving || approval !== ApprovalState.NOT_APPROVED}
onClick={async () => {
setApproving(true);
try {
await onAttemptToApprove();
setApproving(false);
} catch (e) {
setApproving(false);
}
}}
>
{approving ? 'Approving...' : 'Approve'}
</Button>
<Button
className={classes.stakeButton}
disabled={
!!error || attempting || approval !== ApprovalState.APPROVED
}
onClick={onStake}
>
{attempting ? 'Staking...' : 'Stake'}
</Button>
</Box>
</Box>
</CustomModal>
);
}
Example #3
| Source File: DragonsSyrup.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
DragonsSyrup: React.FC = () => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [isEndedSyrup, setIsEndedSyrup] = useState(false);
const [pageIndex, setPageIndex] = useState(0);
const [sortBy, setSortBy] = useState(0);
const [sortDesc, setSortDesc] = useState(false);
const [stakedOnly, setStakeOnly] = useState(false);
const [syrupSearch, setSyrupSearch] = useState('');
const [syrupSearchInput, setSyrupSearchInput] = useDebouncedChangeHandler(
syrupSearch,
setSyrupSearch,
);
const lairInfo = useLairInfo();
const dQUICKAPY = useLairDQUICKAPY(lairInfo);
const addedStakingSyrupInfos = useSyrupInfo(
null,
isEndedSyrup ? 0 : undefined,
isEndedSyrup ? 0 : undefined,
{ search: syrupSearch, isStaked: stakedOnly },
);
const addedOldSyrupInfos = useOldSyrupInfo(
null,
isEndedSyrup ? undefined : 0,
isEndedSyrup ? undefined : 0,
{ search: syrupSearch, isStaked: stakedOnly },
);
const addedSyrupInfos = isEndedSyrup
? addedOldSyrupInfos
: addedStakingSyrupInfos;
const sortIndex = sortDesc ? 1 : -1;
const sortByToken = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const syrupStrA = a.token.symbol ?? '';
const syrupStrB = b.token.symbol ?? '';
return (syrupStrA > syrupStrB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByDeposit = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const depositA =
a.valueOfTotalStakedAmountInUSDC ??
getExactTokenAmount(a.totalStakedAmount);
const depositB =
b.valueOfTotalStakedAmountInUSDC ??
getExactTokenAmount(b.totalStakedAmount);
return (depositA > depositB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByAPR = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
return (getTokenAPRSyrup(a) > getTokenAPRSyrup(b) ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByEarned = useCallback(
(a: SyrupInfo, b: SyrupInfo) => {
const earnedUSDA =
getExactTokenAmount(a.earnedAmount) * (a.rewardTokenPriceinUSD ?? 0);
const earnedUSDB =
getExactTokenAmount(b.earnedAmount) * (b.rewardTokenPriceinUSD ?? 0);
return (earnedUSDA > earnedUSDB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortedSyrupInfos = useMemo(() => {
return addedSyrupInfos.sort((a, b) => {
if (sortBy === TOKEN_COLUMN) {
return sortByToken(a, b);
} else if (sortBy === DEPOSIT_COLUMN) {
return sortByDeposit(a, b);
} else if (sortBy === APR_COLUMN) {
return sortByAPR(a, b);
} else if (sortBy === EARNED_COLUMN) {
return sortByEarned(a, b);
}
return 1;
});
}, [
addedSyrupInfos,
sortBy,
sortByToken,
sortByDeposit,
sortByAPR,
sortByEarned,
]);
const syrupRewardAddress = useMemo(
() =>
sortedSyrupInfos
.map((syrupInfo) => syrupInfo.stakingRewardAddress.toLowerCase())
.reduce((totStr, str) => totStr + str, ''),
[sortedSyrupInfos],
);
useEffect(() => {
setPageIndex(0);
}, [syrupRewardAddress]);
const syrupInfos = useMemo(() => {
return sortedSyrupInfos
? sortedSyrupInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADSYRUP_COUNT),
)
: null;
}, [sortedSyrupInfos, pageIndex]);
const loadNext = () => {
setPageIndex(pageIndex + 1);
};
const { loadMoreRef } = useInfiniteLoading(loadNext);
const renderStakedOnly = () => (
<Box display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Staked Only
</Typography>
<ToggleSwitch
toggled={stakedOnly}
onToggle={() => setStakeOnly(!stakedOnly)}
/>
</Box>
);
const syrupStatusItems = [
{
text: 'Active',
onClick: () => setIsEndedSyrup(false),
condition: !isEndedSyrup,
},
{
text: 'Ended',
onClick: () => setIsEndedSyrup(true),
condition: isEndedSyrup,
},
];
const sortColumns = [
{
text: 'Earn',
index: TOKEN_COLUMN,
width: 0.3,
},
{
text: 'Deposits',
index: DEPOSIT_COLUMN,
width: 0.3,
},
{
text: 'APR',
index: APR_COLUMN,
width: 0.2,
},
{
text: 'Earned',
index: EARNED_COLUMN,
width: 0.2,
justify: 'flex-end',
},
];
const sortByDesktopItems = sortColumns.map((item) => {
return {
...item,
onClick: () => {
if (sortBy === item.index) {
setSortDesc(!sortDesc);
} else {
setSortBy(item.index);
setSortDesc(false);
}
},
};
});
const sortByMobileItems = sortColumns.map((item) => {
return { text: item.text, onClick: () => setSortBy(item.index) };
});
return (
<>
<Box display='flex' flexWrap='wrap' alignItems='center' mb={3.5}>
<Box
display='flex'
justifyContent='space-between'
width={returnFullWidthMobile(isMobile)}
flex={isMobile ? 'unset' : 1}
>
<Box width={isMobile ? 'calc(100% - 150px)' : 1} mr={2} my={2}>
<SearchInput
placeholder={
isMobile ? 'Search' : 'Search name, symbol or paste address'
}
value={syrupSearchInput}
setValue={setSyrupSearchInput}
/>
</Box>
{isMobile && renderStakedOnly()}
</Box>
<Box
width={returnFullWidthMobile(isMobile)}
display='flex'
flexWrap='wrap'
alignItems='center'
>
<Box mr={2}>
<CustomSwitch width={160} height={40} items={syrupStatusItems} />
</Box>
{isMobile ? (
<>
<Box height={40} flex={1}>
<CustomMenu title='Sort By' menuItems={sortByMobileItems} />
</Box>
<Box mt={2} width={1} display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Sort {sortDesc ? 'Desc' : 'Asc'}
</Typography>
<ToggleSwitch
toggled={sortDesc}
onToggle={() => setSortDesc(!sortDesc)}
/>
</Box>
</>
) : (
renderStakedOnly()
)}
</Box>
</Box>
<Divider />
{!isMobile && (
<Box mt={2.5} display='flex' paddingX={2}>
{sortByDesktopItems.map((item) => (
<Box
key={item.index}
display='flex'
alignItems='center'
width={item.width}
style={{ cursor: 'pointer' }}
justifyContent={item.justify}
onClick={item.onClick}
color={
sortBy === item.index
? palette.text.primary
: palette.text.secondary
}
>
<Typography variant='body2'>{item.text}</Typography>
<Box display='flex' ml={0.5}>
{sortBy === item.index && sortDesc ? (
<ArrowDown size={20} />
) : (
<ArrowUp size={20} />
)}
</Box>
</Box>
))}
</Box>
)}
{syrupInfos ? (
syrupInfos.map((syrup, ind) => (
<SyrupCard key={ind} syrup={syrup} dQUICKAPY={dQUICKAPY} />
))
) : (
<>
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
<Skeleton width='100%' height={120} />
</>
)}
<div ref={loadMoreRef} />
</>
);
}
Example #4
| Source File: FarmsList.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FarmsList: React.FC<FarmsListProps> = ({ bulkPairs, farmIndex }) => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [pageIndex, setPageIndex] = useState(0);
const [pageloading, setPageLoading] = useState(false); //this is used for not loading farms immediately when user is on farms page
const [isEndedFarm, setIsEndedFarm] = useState(false);
const [sortBy, setSortBy] = useState(0);
const [sortDesc, setSortDesc] = useState(false);
const [stakedOnly, setStakeOnly] = useState(false);
const [farmSearch, setFarmSearch] = useState('');
const [farmSearchInput, setFarmSearchInput] = useDebouncedChangeHandler(
farmSearch,
setFarmSearch,
);
const addedLPStakingInfos = useStakingInfo(
null,
pageloading ||
farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
isEndedFarm
? 0
: undefined,
pageloading ||
farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
isEndedFarm
? 0
: undefined,
{ search: farmSearch, isStaked: stakedOnly },
);
const addedLPStakingOldInfos = useOldStakingInfo(
null,
pageloading ||
farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
!isEndedFarm
? 0
: undefined,
pageloading ||
farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX ||
!isEndedFarm
? 0
: undefined,
{ search: farmSearch, isStaked: stakedOnly },
);
const addedDualStakingInfos = useDualStakingInfo(
null,
pageloading || farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
? 0
: undefined,
pageloading || farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
? 0
: undefined,
{ search: farmSearch, isStaked: stakedOnly },
);
const sortIndex = sortDesc ? 1 : -1;
const sortByToken = useCallback(
(a: CommonStakingInfo, b: CommonStakingInfo) => {
const tokenStrA = a.tokens[0].symbol + '/' + a.tokens[1].symbol;
const tokenStrB = b.tokens[0].symbol + '/' + b.tokens[1].symbol;
return (tokenStrA > tokenStrB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByTVL = useCallback(
(a: CommonStakingInfo, b: CommonStakingInfo) => {
return (Number(a.tvl ?? 0) > Number(b.tvl ?? 0) ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByRewardLP = useCallback(
(a: StakingInfo, b: StakingInfo) => {
return (
(getExactTokenAmount(a.totalRewardRate) >
getExactTokenAmount(b.totalRewardRate)
? -1
: 1) * sortIndex
);
},
[sortIndex],
);
const sortByRewardDual = useCallback(
(a: DualStakingInfo, b: DualStakingInfo) => {
const aRewards =
a.rateA * a.rewardTokenAPrice + a.rateB * a.rewardTokenBPrice;
const bRewards =
b.rateA * b.rewardTokenAPrice + b.rateB * b.rewardTokenBPrice;
return (aRewards > bRewards ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortByAPY = useCallback(
(a: CommonStakingInfo, b: CommonStakingInfo) => {
let aYearFee = 0;
let bYearFee = 0;
if (bulkPairs) {
const aDayVolume = bulkPairs[a.pair]?.oneDayVolumeUSD;
const aReserveUSD = bulkPairs[a.pair]?.reserveUSD;
const bDayVolume = bulkPairs[b.pair]?.oneDayVolumeUSD;
const bReserveUSD = bulkPairs[b.pair]?.reserveUSD;
if (aDayVolume && aReserveUSD) {
aYearFee = getOneYearFee(aDayVolume, aReserveUSD);
}
if (bDayVolume && bReserveUSD) {
bYearFee = getOneYearFee(bDayVolume, bReserveUSD);
}
}
const aAPYwithFee = getAPYWithFee(
a.perMonthReturnInRewards ?? 0,
aYearFee,
);
const bAPYwithFee = getAPYWithFee(
b.perMonthReturnInRewards ?? 0,
bYearFee,
);
return (aAPYwithFee > bAPYwithFee ? -1 : 1) * sortIndex;
},
[sortIndex, bulkPairs],
);
const sortByEarnedLP = useCallback(
(a: StakingInfo, b: StakingInfo) => {
return (
(getExactTokenAmount(a.earnedAmount) >
getExactTokenAmount(b.earnedAmount)
? -1
: 1) * sortIndex
);
},
[sortIndex],
);
const sortByEarnedDual = useCallback(
(a: DualStakingInfo, b: DualStakingInfo) => {
const earnedA =
getExactTokenAmount(a.earnedAmountA) * a.rewardTokenAPrice +
getExactTokenAmount(a.earnedAmountB) * a.rewardTokenBPrice;
const earnedB =
getExactTokenAmount(b.earnedAmountA) * b.rewardTokenAPrice +
getExactTokenAmount(b.earnedAmountB) * b.rewardTokenBPrice;
return (earnedA > earnedB ? -1 : 1) * sortIndex;
},
[sortIndex],
);
const sortedLPStakingInfos = useMemo(() => {
const lpStakingInfos = isEndedFarm
? addedLPStakingOldInfos
: addedLPStakingInfos;
return lpStakingInfos.sort((a, b) => {
if (sortBy === POOL_COLUMN) {
return sortByToken(a, b);
} else if (sortBy === TVL_COLUMN) {
return sortByTVL(a, b);
} else if (sortBy === REWARDS_COLUMN) {
return sortByRewardLP(a, b);
} else if (sortBy === APY_COLUMN) {
return sortByAPY(a, b);
} else if (sortBy === EARNED_COLUMN) {
return sortByEarnedLP(a, b);
}
return 1;
});
}, [
sortBy,
addedLPStakingOldInfos,
addedLPStakingInfos,
isEndedFarm,
sortByToken,
sortByTVL,
sortByRewardLP,
sortByAPY,
sortByEarnedLP,
]);
const sortedStakingDualInfos = useMemo(() => {
const dualStakingInfos = addedDualStakingInfos.filter(
(info) => info.ended === isEndedFarm,
);
return dualStakingInfos.sort((a, b) => {
if (sortBy === POOL_COLUMN) {
return sortByToken(a, b);
} else if (sortBy === TVL_COLUMN) {
return sortByTVL(a, b);
} else if (sortBy === REWARDS_COLUMN) {
return sortByRewardDual(a, b);
} else if (sortBy === APY_COLUMN) {
return sortByAPY(a, b);
} else if (sortBy === EARNED_COLUMN) {
return sortByEarnedDual(a, b);
}
return 1;
});
}, [
addedDualStakingInfos,
isEndedFarm,
sortBy,
sortByToken,
sortByTVL,
sortByRewardDual,
sortByAPY,
sortByEarnedDual,
]);
const addedStakingInfos = useMemo(
() =>
farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX
? sortedStakingDualInfos
: sortedLPStakingInfos,
[farmIndex, sortedStakingDualInfos, sortedLPStakingInfos],
);
const stakingRewardAddress = addedStakingInfos
? addedStakingInfos
.map((stakingInfo) => stakingInfo.stakingRewardAddress.toLowerCase())
.reduce((totStr, str) => totStr + str, '')
: null;
useEffect(() => {
setPageIndex(0);
}, [stakingRewardAddress, farmIndex]);
const stakingInfos = useMemo(() => {
return sortedLPStakingInfos
? sortedLPStakingInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
)
: null;
}, [sortedLPStakingInfos, pageIndex]);
const stakingDualInfos = useMemo(() => {
return sortedStakingDualInfos
? sortedStakingDualInfos.slice(
0,
getPageItemsToLoad(pageIndex, LOADFARM_COUNT),
)
: null;
}, [sortedStakingDualInfos, pageIndex]);
const getPoolApy = (pairId: string) => {
if (!pairId || !bulkPairs) {
return 0;
}
const oneDayVolume = bulkPairs?.[pairId]?.oneDayVolumeUSD;
const reserveUSD = bulkPairs?.[pairId]?.reserveUSD;
const oneYearFeeAPY = getOneYearFee(oneDayVolume, reserveUSD);
return oneYearFeeAPY;
};
const loadNext = () => {
setPageIndex(pageIndex + 1);
};
const { loadMoreRef } = useInfiniteLoading(loadNext);
const sortColumns = [
{ text: 'Pool', index: POOL_COLUMN, width: 0.3, justify: 'flex-start' },
{ text: 'TVL', index: TVL_COLUMN, width: 0.2, justify: 'center' },
{ text: 'Rewards', index: REWARDS_COLUMN, width: 0.25, justify: 'center' },
{ text: 'APY', index: APY_COLUMN, width: 0.15, justify: 'center' },
{ text: 'Earned', index: EARNED_COLUMN, width: 0.2, justify: 'flex-end' },
];
const sortByDesktopItems = sortColumns.map((item) => {
return {
...item,
onClick: () => {
if (sortBy === item.index) {
setSortDesc(!sortDesc);
} else {
setSortBy(item.index);
setSortDesc(false);
}
},
};
});
const sortByMobileItems = sortColumns.map((item) => {
return { text: item.text, onClick: () => setSortBy(item.index) };
});
const renderStakedOnly = () => (
<Box display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Staked Only
</Typography>
<ToggleSwitch
toggled={stakedOnly}
onToggle={() => setStakeOnly(!stakedOnly)}
/>
</Box>
);
const farmStatusItems = [
{
text: 'Active',
onClick: () => setIsEndedFarm(false),
condition: !isEndedFarm,
},
{
text: 'Ended',
onClick: () => setIsEndedFarm(true),
condition: isEndedFarm,
},
];
return (
<>
<Box
display='flex'
flexWrap='wrap'
justifyContent='space-between'
alignItems='center'
mb={3.5}
>
<Box>
<Typography variant='h5'>Earn dQuick</Typography>
<Typography variant='body2'>
Stake LP Tokens to earn{' '}
{farmIndex === GlobalConst.farmIndex.LPFARM_INDEX
? 'dQUICK + Pool Fees'
: 'dQUICK + WMATIC rewards'}
</Typography>
</Box>
<Box display='flex' flexWrap='wrap'>
<Box
display='flex'
justifyContent='space-between'
width={returnFullWidthMobile(isMobile)}
>
<Box width={isMobile ? 'calc(100% - 150px)' : 1} mr={2} my={2}>
<SearchInput
placeholder={
isMobile ? 'Search' : 'Search name, symbol or paste address'
}
value={farmSearchInput}
setValue={setFarmSearchInput}
/>
</Box>
{isMobile && renderStakedOnly()}
</Box>
<Box
width={returnFullWidthMobile(isMobile)}
display='flex'
flexWrap='wrap'
alignItems='center'
>
<Box mr={2}>
<CustomSwitch width={160} height={40} items={farmStatusItems} />
</Box>
{isMobile ? (
<>
<Box height={40} flex={1}>
<CustomMenu title='Sort By' menuItems={sortByMobileItems} />
</Box>
<Box mt={2} width={1} display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.disabled, marginRight: 8 }}
>
Sort {sortDesc ? 'Desc' : 'Asc'}
</Typography>
<ToggleSwitch
toggled={sortDesc}
onToggle={() => setSortDesc(!sortDesc)}
/>
</Box>
</>
) : (
renderStakedOnly()
)}
</Box>
</Box>
</Box>
<Divider />
{!isMobile && (
<Box mt={2.5} display='flex' paddingX={2}>
{sortByDesktopItems.map((item) => (
<Box
key={item.index}
display='flex'
alignItems='center'
width={item.width}
style={{ cursor: 'pointer' }}
justifyContent={item.justify}
onClick={item.onClick}
color={
sortBy === item.index
? palette.text.primary
: palette.text.secondary
}
>
<Typography variant='body2'>{item.text}</Typography>
<Box display='flex' ml={0.5}>
{sortBy === item.index && sortDesc ? (
<ArrowDown size={20} />
) : (
<ArrowUp size={20} />
)}
</Box>
</Box>
))}
</Box>
)}
{(farmIndex === GlobalConst.farmIndex.LPFARM_INDEX && !stakingInfos) ||
(farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
!stakingDualInfos && (
<>
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
<Skeleton width='100%' height={100} />
</>
))}
{farmIndex === GlobalConst.farmIndex.LPFARM_INDEX &&
stakingInfos &&
stakingInfos.map((info: StakingInfo, index) => (
<FarmCard
key={index}
stakingInfo={info}
stakingAPY={getPoolApy(info?.pair)}
isLPFarm={true}
/>
))}
{farmIndex === GlobalConst.farmIndex.DUALFARM_INDEX &&
stakingDualInfos &&
stakingDualInfos.map((info: DualStakingInfo, index) => (
<FarmCard
key={index}
stakingInfo={info}
stakingAPY={getPoolApy(info?.pair)}
/>
))}
<div ref={loadMoreRef} />
</>
);
}
