components#NumericalInput TypeScript Examples
The following examples show how to use
components#NumericalInput.
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: CurrencyInput.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
CurrencyInput: React.FC<CurrencyInputProps> = ({
handleCurrencySelect,
currency,
otherCurrency,
amount,
setAmount,
onMax,
onHalf,
showMaxButton,
showHalfButton,
title,
showPrice,
bgColor,
id,
}) => {
const classes = useStyles();
const { palette } = useTheme();
const [modalOpen, setModalOpen] = useState(false);
const { account } = useActiveWeb3React();
const selectedCurrencyBalance = useCurrencyBalance(
account ?? undefined,
currency,
);
const usdPrice = Number(useUSDCPrice(currency)?.toSignificant() ?? 0);
const handleOpenModal = useCallback(() => {
setModalOpen(true);
}, [setModalOpen]);
return (
<Box
id={id}
className={cx(classes.swapBox, showPrice && classes.priceShowBox)}
bgcolor={bgColor ?? palette.secondary.dark}
>
<Box display='flex' justifyContent='space-between' mb={2}>
<Typography>{title || 'You Pay:'}</Typography>
<Box display='flex'>
{account && currency && showHalfButton && (
<Box className='maxWrapper' onClick={onHalf}>
<Typography variant='body2'>50%</Typography>
</Box>
)}
{account && currency && showMaxButton && (
<Box className='maxWrapper' marginLeft='20px' onClick={onMax}>
<Typography variant='body2'>MAX</Typography>
</Box>
)}
</Box>
</Box>
<Box mb={2}>
<Box
className={cx(
classes.currencyButton,
currency ? classes.currencySelected : classes.noCurrency,
)}
onClick={handleOpenModal}
>
{currency ? (
<>
<CurrencyLogo currency={currency} size={'28px'} />
<Typography className='token-symbol-container' variant='body1'>
{currency?.symbol}
</Typography>
</>
) : (
<Typography variant='body1'>Select a token</Typography>
)}
</Box>
<Box className='inputWrapper'>
<NumericalInput
value={amount}
align='right'
color={palette.text.secondary}
placeholder='0.00'
onUserInput={(val) => {
setAmount(val);
}}
/>
</Box>
</Box>
<Box
display='flex'
justifyContent='space-between'
className={classes.balanceSection}
>
<Typography variant='body2'>
Balance: {formatTokenAmount(selectedCurrencyBalance)}
</Typography>
<Typography variant='body2'>
${(usdPrice * Number(amount)).toLocaleString()}
</Typography>
</Box>
{modalOpen && (
<CurrencySearchModal
isOpen={modalOpen}
onDismiss={() => {
setModalOpen(false);
}}
onCurrencySelect={handleCurrencySelect}
selectedCurrency={currency}
showCommonBases={true}
otherSelectedCurrency={otherCurrency}
/>
)}
</Box>
);
}
Example #2
| 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 #3
| Source File: RemoveLiquidityModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
RemoveLiquidityModal: React.FC<RemoveLiquidityModalProps> = ({
currency0,
currency1,
open,
onClose,
}) => {
const classes = useStyles();
const { palette } = useTheme();
const [showConfirm, setShowConfirm] = useState(false);
const [txPending, setTxPending] = useState(false);
const [approving, setApproving] = useState(false);
const [attemptingTxn, setAttemptingTxn] = useState(false);
const [removeErrorMessage, setRemoveErrorMessage] = useState('');
const [errorMsg, setErrorMsg] = useState('');
const [txHash, setTxHash] = useState('');
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const { chainId, account, library } = useActiveWeb3React();
const [tokenA, tokenB] = useMemo(
() => [
wrappedCurrency(currency0, chainId),
wrappedCurrency(currency1, chainId),
],
[currency0, currency1, chainId],
);
const { independentField, typedValue } = useBurnState();
const { pair, parsedAmounts, error } = useDerivedBurnInfo(
currency0,
currency1,
);
const deadline = useTransactionDeadline();
const { onUserInput: _onUserInput } = useBurnActionHandlers();
const [allowedSlippage] = useUserSlippageTolerance();
const onUserInput = useCallback(
(field: Field, typedValue: string) => {
return _onUserInput(field, typedValue);
},
[_onUserInput],
);
const onLiquidityInput = useCallback(
(typedValue: string): void => onUserInput(Field.LIQUIDITY, typedValue),
[onUserInput],
);
const liquidityPercentChangeCallback = useCallback(
(value: number) => {
onUserInput(Field.LIQUIDITY_PERCENT, value.toString());
},
[onUserInput],
);
const [
innerLiquidityPercentage,
setInnerLiquidityPercentage,
] = useDebouncedChangeHandler(
Number.parseInt(parsedAmounts[Field.LIQUIDITY_PERCENT].toFixed(0)),
liquidityPercentChangeCallback,
);
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 formattedAmounts = {
[Field.LIQUIDITY_PERCENT]: parsedAmounts[Field.LIQUIDITY_PERCENT].equalTo(
'0',
)
? '0'
: parsedAmounts[Field.LIQUIDITY_PERCENT].lessThan(new Percent('1', '100'))
? '<1'
: parsedAmounts[Field.LIQUIDITY_PERCENT].toFixed(0),
[Field.LIQUIDITY]:
independentField === Field.LIQUIDITY
? typedValue
: parsedAmounts[Field.LIQUIDITY]?.toExact() ?? '',
[Field.CURRENCY_A]:
independentField === Field.CURRENCY_A
? typedValue
: parsedAmounts[Field.CURRENCY_A]?.toExact() ?? '',
[Field.CURRENCY_B]:
independentField === Field.CURRENCY_B
? typedValue
: parsedAmounts[Field.CURRENCY_B]?.toExact() ?? '',
};
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
const pairContract: Contract | null = usePairContract(
pair?.liquidityToken?.address,
);
const [approval, approveCallback] = useApproveCallback(
parsedAmounts[Field.LIQUIDITY],
chainId ? GlobalConst.addresses.ROUTER_ADDRESS[chainId] : undefined,
);
const onAttemptToApprove = async () => {
if (!pairContract || !pair || !library || !deadline) {
setErrorMsg('missing dependencies');
return;
}
const liquidityAmount = parsedAmounts[Field.LIQUIDITY];
if (!liquidityAmount) {
setErrorMsg('missing liquidity amount');
return;
}
setApproving(true);
try {
await approveCallback();
setApproving(false);
} catch (e) {
setApproving(false);
}
};
const handleDismissConfirmation = useCallback(() => {
setShowConfirm(false);
setTxHash('');
}, []);
const router = useRouterContract();
const onRemove = async () => {
if (!chainId || !library || !account || !deadline || !router)
throw new Error('missing dependencies');
const {
[Field.CURRENCY_A]: currencyAmountA,
[Field.CURRENCY_B]: currencyAmountB,
} = parsedAmounts;
if (!currencyAmountA || !currencyAmountB) {
throw new Error('missing currency amounts');
}
const amountsMin = {
[Field.CURRENCY_A]: calculateSlippageAmount(
currencyAmountA,
allowedSlippage,
)[0],
[Field.CURRENCY_B]: calculateSlippageAmount(
currencyAmountB,
allowedSlippage,
)[0],
};
const liquidityAmount = parsedAmounts[Field.LIQUIDITY];
if (!liquidityAmount) throw new Error('missing liquidity amount');
const currencyBIsETH = currency1 === ETHER;
const oneCurrencyIsETH = currency0 === ETHER || currencyBIsETH;
if (!tokenA || !tokenB) throw new Error('could not wrap');
let methodNames: string[],
args: Array<string | string[] | number | boolean>;
// we have approval, use normal remove liquidity
if (approval === ApprovalState.APPROVED) {
// removeLiquidityETH
if (oneCurrencyIsETH) {
methodNames = [
'removeLiquidityETH',
'removeLiquidityETHSupportingFeeOnTransferTokens',
];
args = [
currencyBIsETH ? tokenA.address : tokenB.address,
liquidityAmount.raw.toString(),
amountsMin[
currencyBIsETH ? Field.CURRENCY_A : Field.CURRENCY_B
].toString(),
amountsMin[
currencyBIsETH ? Field.CURRENCY_B : Field.CURRENCY_A
].toString(),
account,
deadline.toHexString(),
];
}
// removeLiquidity
else {
methodNames = ['removeLiquidity'];
args = [
tokenA.address,
tokenB.address,
liquidityAmount.raw.toString(),
amountsMin[Field.CURRENCY_A].toString(),
amountsMin[Field.CURRENCY_B].toString(),
account,
deadline.toHexString(),
];
}
} else {
throw new Error(
'Attempting to confirm without approval. Please contact support.',
);
}
const safeGasEstimates: (BigNumber | undefined)[] = await Promise.all(
methodNames.map((methodName) =>
router.estimateGas[methodName](...args)
.then(calculateGasMargin)
.catch((error) => {
console.error(`estimateGas failed`, methodName, args, error);
return undefined;
}),
),
);
const indexOfSuccessfulEstimation = safeGasEstimates.findIndex(
(safeGasEstimate) => BigNumber.isBigNumber(safeGasEstimate),
);
// all estimations failed...
if (indexOfSuccessfulEstimation === -1) {
console.error('This transaction would fail. Please contact support.');
} else {
const methodName = methodNames[indexOfSuccessfulEstimation];
const safeGasEstimate = safeGasEstimates[indexOfSuccessfulEstimation];
setAttemptingTxn(true);
await router[methodName](...args, {
gasLimit: safeGasEstimate,
})
.then(async (response: TransactionResponse) => {
setAttemptingTxn(false);
setTxPending(true);
const summary =
'Remove ' +
parsedAmounts[Field.CURRENCY_A]?.toSignificant(3) +
' ' +
currency0.symbol +
' and ' +
parsedAmounts[Field.CURRENCY_B]?.toSignificant(3) +
' ' +
currency1.symbol;
addTransaction(response, {
summary,
});
setTxHash(response.hash);
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary,
});
setTxPending(false);
} catch (error) {
setTxPending(false);
setRemoveErrorMessage('There is an error in transaction.');
}
ReactGA.event({
category: 'Liquidity',
action: 'Remove',
label: [currency0.symbol, currency1.symbol].join('/'),
});
})
.catch((error: Error) => {
setAttemptingTxn(false);
// we only care if the error is something _other_ than the user rejected the tx
console.error(error);
});
}
};
const modalHeader = () => {
return (
<Box>
<Box mt={10} mb={3} display='flex' justifyContent='center'>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
size={48}
/>
</Box>
<Box mb={6} color={palette.text.primary} textAlign='center'>
<Typography variant='h6'>
Removing {formattedAmounts[Field.LIQUIDITY]} {currency0.symbol} /{' '}
{currency1.symbol} LP Tokens
<br />
You will receive {parsedAmounts[Field.CURRENCY_A]?.toSignificant(
2,
)}{' '}
{currency0.symbol} and{' '}
{parsedAmounts[Field.CURRENCY_B]?.toSignificant(2)}{' '}
{currency1.symbol}
</Typography>
</Box>
<Box mb={3} color={palette.text.secondary} textAlign='center'>
<Typography variant='body2'>
{`Output is estimated. If the price changes by more than ${allowedSlippage /
100}% your transaction will revert.`}
</Typography>
</Box>
<Box mt={2}>
<Button
style={{ width: '100%' }}
className={classes.removeButton}
onClick={onRemove}
>
Confirm
</Button>
</Box>
</Box>
);
};
return (
<CustomModal open={open} onClose={onClose}>
<Box paddingX={3} paddingY={4}>
{showConfirm && (
<TransactionConfirmationModal
isOpen={showConfirm}
onDismiss={handleDismissConfirmation}
attemptingTxn={attemptingTxn}
txPending={txPending}
hash={txHash}
content={() =>
removeErrorMessage ? (
<TransactionErrorContent
onDismiss={handleDismissConfirmation}
message={removeErrorMessage}
/>
) : (
<ConfirmationModalContent
title='Removing Liquidity'
onDismiss={handleDismissConfirmation}
content={modalHeader}
/>
)
}
pendingText=''
modalContent={
txPending
? 'Submitted transaction to remove liquidity'
: 'Successfully removed liquidity'
}
/>
)}
<Box display='flex' alignItems='center' justifyContent='space-between'>
<ArrowLeft
color={palette.text.secondary}
style={{ cursor: 'pointer' }}
onClick={onClose}
/>
<Typography
variant='subtitle2'
style={{ color: palette.text.primary }}
>
Remove Liquidity
</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'>
{currency0.symbol} / {currency1.symbol} LP
</Typography>
<Typography variant='body2'>
Balance: {formatTokenAmount(userPoolBalance)}
</Typography>
</Box>
<Box mt={2}>
<NumericalInput
placeholder='0'
value={formattedAmounts[Field.LIQUIDITY]}
fontSize={28}
onUserInput={(value) => {
onLiquidityInput(value);
}}
/>
</Box>
<Box display='flex' alignItems='center'>
<Box flex={1} mr={2} mt={0.5}>
<ColoredSlider
min={1}
max={100}
step={1}
value={innerLiquidityPercentage}
onChange={(evt: any, value) =>
setInnerLiquidityPercentage(value as number)
}
/>
</Box>
<Typography variant='body2'>
{formattedAmounts[Field.LIQUIDITY_PERCENT]}%
</Typography>
</Box>
</Box>
<Box display='flex' my={3} justifyContent='center'>
<ArrowDown color={palette.text.secondary} />
</Box>
<Box
padding='16px'
bgcolor={palette.secondary.light}
borderRadius='10px'
>
<Box
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='body1'>Pooled {currency0.symbol}</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
{formatTokenAmount(token0Deposited)}
</Typography>
<CurrencyLogo currency={currency0} />
</Box>
</Box>
<Box
mt={1}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography
variant='body1'
style={{ color: 'rgba(68, 138, 255, 0.5)' }}
>
- Withdraw {currency0.symbol}
</Typography>
<Typography
variant='body1'
style={{ color: 'rgba(68, 138, 255, 0.5)' }}
>
{formattedAmounts[Field.CURRENCY_A]}
</Typography>
</Box>
<Box
mt={1}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='body1'>Pooled {currency1.symbol}</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
{formatTokenAmount(token1Deposited)}
</Typography>
<CurrencyLogo currency={currency1} />
</Box>
</Box>
<Box
mt={1}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography
variant='body1'
style={{ color: 'rgba(68, 138, 255, 0.5)' }}
>
- Withdraw {currency1.symbol}
</Typography>
<Typography
variant='body1'
style={{ color: 'rgba(68, 138, 255, 0.5)' }}
>
{formattedAmounts[Field.CURRENCY_B]}
</Typography>
</Box>
<Box
mt={1}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='body1'>Your Pool Share</Typography>
<Typography variant='body1'>
{poolTokenPercentage
? poolTokenPercentage.toSignificant() + '%'
: '-'}
</Typography>
</Box>
</Box>
{pair && (
<Box
display='flex'
mt={2}
px={2}
alignItems='center'
justifyContent='space-between'
>
<Typography variant='body2'>
1 {currency0.symbol} ={' '}
{tokenA ? pair.priceOf(tokenA).toSignificant(6) : '-'}{' '}
{currency1.symbol}
</Typography>
<Typography variant='body2'>
1 {currency1.symbol} ={' '}
{tokenB ? pair.priceOf(tokenB).toSignificant(6) : '-'}{' '}
{currency0.symbol}
</Typography>
</Box>
)}
<Box
mt={2}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Button
className={classes.removeButton}
onClick={onAttemptToApprove}
disabled={approving || approval !== ApprovalState.NOT_APPROVED}
>
{approving
? 'Approving...'
: approval === ApprovalState.APPROVED
? 'Approved'
: 'Approve'}
</Button>
<Button
className={classes.removeButton}
onClick={() => {
setShowConfirm(true);
}}
disabled={Boolean(error) || approval !== ApprovalState.APPROVED}
>
{error || 'Remove'}
</Button>
</Box>
<Box mt={2}>
<Typography variant='body1' style={{ color: palette.error.main }}>
{errorMsg}
</Typography>
</Box>
</Box>
</CustomModal>
);
}
Example #4
| Source File: SettingsModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SettingsModal: React.FC<SettingsModalProps> = ({ open, onClose }) => {
const classes = useStyles();
const { palette } = useTheme();
const [
userSlippageTolerance,
setUserslippageTolerance,
] = useUserSlippageTolerance();
const [ttl, setTtl] = useUserTransactionTTL();
const { onChangeRecipient } = useSwapActionHandlers();
const [expertMode, toggleExpertMode] = useExpertModeManager();
const [slippageInput, setSlippageInput] = useState('');
const [deadlineInput, setDeadlineInput] = useState('');
const [expertConfirm, setExpertConfirm] = useState(false);
const [expertConfirmText, setExpertConfirmText] = useState('');
const slippageInputIsValid =
slippageInput === '' ||
(userSlippageTolerance / 100).toFixed(2) ===
Number.parseFloat(slippageInput).toFixed(2);
const deadlineInputIsValid =
deadlineInput === '' || (ttl / 60).toString() === deadlineInput;
const slippageError = useMemo(() => {
if (slippageInput !== '' && !slippageInputIsValid) {
return SlippageError.InvalidInput;
} else if (slippageInputIsValid && userSlippageTolerance < 50) {
return SlippageError.RiskyLow;
} else if (slippageInputIsValid && userSlippageTolerance > 500) {
return SlippageError.RiskyHigh;
} else {
return undefined;
}
}, [slippageInput, userSlippageTolerance, slippageInputIsValid]);
const slippageAlert =
!!slippageInput &&
(slippageError === SlippageError.RiskyLow ||
slippageError === SlippageError.RiskyHigh);
const deadlineError = useMemo(() => {
if (deadlineInput !== '' && !deadlineInputIsValid) {
return DeadlineError.InvalidInput;
} else {
return undefined;
}
}, [deadlineInput, deadlineInputIsValid]);
const parseCustomSlippage = (value: string) => {
setSlippageInput(value);
try {
const valueAsIntFromRoundedFloat = Number.parseInt(
(Number.parseFloat(value) * 100).toString(),
);
if (
!Number.isNaN(valueAsIntFromRoundedFloat) &&
valueAsIntFromRoundedFloat < 5000
) {
setUserslippageTolerance(valueAsIntFromRoundedFloat);
}
} catch {}
};
const parseCustomDeadline = (value: string) => {
setDeadlineInput(value);
try {
const valueAsInt: number = Number.parseInt(value) * 60;
if (!Number.isNaN(valueAsInt) && valueAsInt > 0) {
setTtl(valueAsInt);
}
} catch {}
};
return (
<CustomModal open={open} onClose={onClose}>
<CustomModal open={expertConfirm} onClose={() => setExpertConfirm(false)}>
<Box paddingX={3} paddingY={4}>
<Box
mb={3}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='h5'>Are you sure?</Typography>
<CloseIcon
style={{ cursor: 'pointer' }}
onClick={() => setExpertConfirm(false)}
/>
</Box>
<Divider />
<Box mt={2.5} mb={1.5}>
<Typography variant='body1'>
Expert mode turns off the confirm transaction prompt and allows
high slippage trades that often result in bad rates and lost
funds.
</Typography>
<Typography
variant='body1'
style={{ fontWeight: 'bold', marginTop: 24 }}
>
ONLY USE THIS MODE IF YOU KNOW WHAT YOU ARE DOING.
</Typography>
<Typography
variant='body1'
style={{ fontWeight: 'bold', marginTop: 24 }}
>
Please type the word "confirm" to enable expert mode.
</Typography>
</Box>
<Box
height={40}
borderRadius={10}
mb={2.5}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid ${palette.secondary.light}`}
>
<input
style={{ textAlign: 'left' }}
className={classes.settingsInput}
value={expertConfirmText}
onChange={(e: any) => setExpertConfirmText(e.target.value)}
/>
</Box>
<Box
style={{
cursor: 'pointer',
opacity: expertConfirmText === 'confirm' ? 1 : 0.6,
}}
bgcolor='rgb(255, 104, 113)'
height={42}
borderRadius={10}
display='flex'
alignItems='center'
justifyContent='center'
onClick={() => {
if (expertConfirmText === 'confirm') {
toggleExpertMode();
setExpertConfirm(false);
}
}}
>
<Typography variant='h6'>Turn on Expert Mode</Typography>
</Box>
</Box>
</CustomModal>
<Box paddingX={3} paddingY={4}>
<Box
mb={3}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='h5'>Settings</Typography>
<CloseIcon onClick={onClose} />
</Box>
<Divider />
<Box my={2.5} display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Slippage Tolerance
</Typography>
<QuestionHelper
size={20}
text='Your transaction will revert if the price changes unfavorably by more than this percentage.'
/>
</Box>
<Box mb={2.5}>
<Box display='flex' alignItems='center'>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 10 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(10);
}}
>
<Typography variant='body2'>0.1%</Typography>
</Box>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 50 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(50);
}}
>
<Typography variant='body2'>0.5%</Typography>
</Box>
<Box
className={cx(
classes.slippageButton,
userSlippageTolerance === 100 && classes.activeSlippageButton,
)}
onClick={() => {
setSlippageInput('');
setUserslippageTolerance(100);
}}
>
<Typography variant='body2'>1%</Typography>
</Box>
<Box
flex={1}
height={40}
borderRadius={10}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid
${
slippageAlert ? palette.primary.main : palette.secondary.light
}
`}
>
{slippageAlert && <AlertTriangle color='#ffa000' size={16} />}
<NumericalInput
placeholder={(userSlippageTolerance / 100).toFixed(2)}
value={slippageInput}
fontSize={14}
fontWeight={500}
align='right'
color='rgba(212, 229, 255, 0.8)'
onBlur={() => {
parseCustomSlippage((userSlippageTolerance / 100).toFixed(2));
}}
onUserInput={(value) => parseCustomSlippage(value)}
/>
<Typography variant='body2'>%</Typography>
</Box>
</Box>
{slippageError && (
<Typography
variant='body2'
style={{ color: '#ffa000', marginTop: 12 }}
>
{slippageError === SlippageError.InvalidInput
? 'Enter a valid slippage percentage'
: slippageError === SlippageError.RiskyLow
? 'Your transaction may fail'
: 'Your transaction may be frontrun'}
</Typography>
)}
</Box>
<Divider />
<Box my={2.5} display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Transaction Deadline
</Typography>
<QuestionHelper
size={20}
text='Your transaction will revert if it is pending for more than this long.'
/>
</Box>
<Box mb={2.5} display='flex' alignItems='center'>
<Box
height={40}
borderRadius={10}
px={2}
display='flex'
alignItems='center'
bgcolor={palette.background.default}
border={`1px solid ${palette.secondary.light}`}
maxWidth={168}
>
<NumericalInput
placeholder={(ttl / 60).toString()}
value={deadlineInput}
fontSize={14}
fontWeight={500}
color='rgba(212, 229, 255, 0.8)'
onBlur={() => {
parseCustomDeadline((ttl / 60).toString());
}}
onUserInput={(value) => parseCustomDeadline(value)}
/>
</Box>
<Typography variant='body2' style={{ marginLeft: 8 }}>
minutes
</Typography>
</Box>
{deadlineError && (
<Typography
variant='body2'
style={{ color: '#ffa000', marginTop: 12 }}
>
Enter a valid deadline
</Typography>
)}
<Divider />
<Box
my={2.5}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Box display='flex' alignItems='center'>
<Typography variant='body1' style={{ marginRight: 6 }}>
Expert Mode
</Typography>
<QuestionHelper
size={20}
text='Bypasses confirmation modals and allows high slippage trades. Use at your own risk.'
/>
</Box>
<ToggleSwitch
toggled={expertMode}
onToggle={() => {
if (expertMode) {
toggleExpertMode();
onChangeRecipient(null);
} else {
setExpertConfirm(true);
}
}}
/>
</Box>
<Divider />
<Box
mt={2.5}
display='flex'
justifyContent='space-between'
alignItems='center'
>
<Typography variant='body1'>Language</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body1'>English (default)</Typography>
<KeyboardArrowDown />
</Box>
</Box>
</Box>
</CustomModal>
);
}
Example #5
| Source File: StakeQuickModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
StakeQuickModal: React.FC<StakeQuickModalProps> = ({ open, onClose }) => {
const classes = useStyles();
const { palette } = useTheme();
const [attempting, setAttempting] = useState(false);
const { account } = useActiveWeb3React();
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const quickBalance = useCurrencyBalance(
account ?? undefined,
returnTokenFromKey('QUICK'),
);
const userLiquidityUnstaked = useTokenBalance(
account ?? undefined,
returnTokenFromKey('QUICK'),
);
const [typedValue, setTypedValue] = useState('');
const [stakePercent, setStakePercent] = useState(0);
const [approving, setApproving] = useState(false);
const { parsedAmount, error } = useDerivedLairInfo(
typedValue,
returnTokenFromKey('QUICK'),
userLiquidityUnstaked,
);
const lairContract = useLairContract();
const [approval, approveCallback] = useApproveCallback(
parsedAmount,
GlobalConst.addresses.LAIR_ADDRESS,
);
const onAttemptToApprove = async () => {
if (!lairContract) throw new Error('missing dependencies');
const liquidityAmount = parsedAmount;
if (!liquidityAmount) throw new Error('missing liquidity amount');
return approveCallback();
};
const onStake = async () => {
setAttempting(true);
if (lairContract && parsedAmount) {
if (approval === ApprovalState.APPROVED) {
try {
const response: TransactionResponse = await lairContract.enter(
`0x${parsedAmount.raw.toString(16)}`,
{
gasLimit: 350000,
},
);
addTransaction(response, {
summary: `Stake QUICK`,
});
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Deposit dQUICK`,
});
setAttempting(false);
setStakePercent(0);
setTypedValue('');
} catch (err) {
setAttempting(false);
}
} 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 QUICK</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'>QUICK</Typography>
<Typography variant='body2'>
Balance: {formatTokenAmount(quickBalance)}
</Typography>
</Box>
<Box mt={2} display='flex' alignItems='center'>
<NumericalInput
placeholder='0'
value={typedValue}
fontSize={28}
onUserInput={(value) => {
const totalBalance = quickBalance
? Number(quickBalance.toExact())
: 0;
setTypedValue(value);
setStakePercent(
totalBalance > 0 ? (Number(value) / totalBalance) * 100 : 0,
);
}}
/>
<Typography
variant='caption'
style={{
color: palette.primary.main,
fontWeight: 'bold',
cursor: 'pointer',
}}
onClick={() => {
setTypedValue(quickBalance ? quickBalance.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={(evt: any, value) => {
setStakePercent(value as number);
setTypedValue(
quickBalance
? stakePercent < 100
? (
(Number(quickBalance.toExact()) * stakePercent) /
100
).toString()
: quickBalance.toExact()
: '0',
);
}}
/>
</Box>
<Typography variant='body2'>
{Math.min(stakePercent, 100).toLocaleString()}%
</Typography>
</Box>
</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 #6
| 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 #7
| Source File: UnstakeQuickModal.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
UnstakeQuickModal: React.FC<UnstakeQuickModalProps> = ({
open,
onClose,
}) => {
const classes = useStyles();
const { palette } = useTheme();
const [attempting, setAttempting] = useState(false);
const addTransaction = useTransactionAdder();
const lairInfo = useLairInfo();
const dQuickBalance = lairInfo.dQUICKBalance;
const [typedValue, setTypedValue] = useState('');
const [stakePercent, setStakePercent] = useState(0);
const lairContract = useLairContract();
const error =
Number(typedValue) > Number(dQuickBalance.toExact()) || !typedValue;
const onWithdraw = () => {
if (lairContract && lairInfo?.dQUICKBalance) {
setAttempting(true);
const balance = web3.utils.toWei(typedValue, 'ether');
lairContract
.leave(balance.toString(), { gasLimit: 300000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Unstake dQUICK`,
});
await response.wait();
setAttempting(false);
})
.catch((error: any) => {
setAttempting(false);
console.log(error);
});
}
};
return (
<CustomModal open={open} onClose={onClose}>
<Box paddingX={3} paddingY={4}>
<Box display='flex' alignItems='center' justifyContent='space-between'>
<Typography variant='h5'>Unstake dQUICK</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'>dQUICK</Typography>
<Typography variant='body2'>
Balance: {formatTokenAmount(dQuickBalance)}
</Typography>
</Box>
<Box mt={2} display='flex' alignItems='center'>
<NumericalInput
placeholder='0'
value={typedValue}
fontSize={28}
onUserInput={(value) => {
const totalBalance = dQuickBalance
? Number(dQuickBalance.toExact())
: 0;
setTypedValue(value);
setStakePercent(
totalBalance > 0 ? (Number(value) / totalBalance) * 100 : 0,
);
}}
/>
<Typography
variant='caption'
style={{
color: palette.primary.main,
fontWeight: 'bold',
cursor: 'pointer',
}}
onClick={() => {
setTypedValue(dQuickBalance ? dQuickBalance.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={(evt: any, value) => {
setStakePercent(value as number);
setTypedValue(
dQuickBalance
? stakePercent < 100
? (
(Number(dQuickBalance.toExact()) * stakePercent) /
100
).toString()
: dQuickBalance.toExact()
: '0',
);
}}
/>
</Box>
<Typography variant='body2'>
{Math.min(stakePercent, 100).toLocaleString()}%
</Typography>
</Box>
</Box>
<Box mt={3}>
<Button
className={classes.stakeButton}
disabled={!!error || attempting}
onClick={onWithdraw}
>
{attempting ? 'Unstaking...' : 'Unstake'}
</Button>
</Box>
</Box>
</CustomModal>
);
}
Example #8
| Source File: ConvertQUICKPage.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
ConvertQUICKPage: React.FC = () => {
const classes = useStyles();
const { t } = useTranslation();
const { account, library } = useActiveWeb3React();
const [quickAmount, setQUICKAmount] = useState('');
const [quickV2Amount, setQUICKV2Amount] = useState('');
const [approving, setApproving] = useState(false);
const [attemptConverting, setAttemptConverting] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const [txPending, setTxPending] = useState(false);
const [txHash, setTxHash] = useState('');
const [txError, setTxError] = useState('');
const quickToken = returnTokenFromKey('QUICK');
const quickBalance = useTokenBalance(account ?? undefined, quickToken);
const quickConvertContract = useQUICKConversionContract();
const parsedAmount = tryParseAmount(quickAmount, quickToken);
const [approval, approveCallback] = useApproveCallback(
parsedAmount,
quickConvertContract?.address,
);
const quickConvertingText = t('convertingQUICKtoQUICKV2', {
quickAmount,
quickV2Amount,
});
const quickConvertedText = t('convertedQUICKtoQUICKV2', {
quickAmount,
quickV2Amount,
});
const txSubmittedQuickConvertText = t('submittedTxQUICKConvert', {
quickAmount,
quickV2Amount,
});
const successQuickConvertedText = t('successConvertedQUICKtoQUICKV2', {
quickAmount,
quickV2Amount,
});
const isInsufficientQUICK =
Number(quickAmount) > Number(quickBalance?.toExact() ?? 0);
const buttonText = useMemo(() => {
if (!quickAmount || !Number(quickAmount)) {
return t('enterAmount');
} else if (approval !== ApprovalState.APPROVED) {
return t('approve');
} else if (isInsufficientQUICK) {
return t('insufficientBalance');
} else {
return t('convert');
}
}, [isInsufficientQUICK, quickAmount, t, approval]);
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const handleDismissConfirmation = () => {
setShowConfirm(false);
};
const attemptToApprove = async () => {
setApproving(true);
try {
await approveCallback();
setApproving(false);
} catch (e) {
setApproving(false);
}
};
const convertQUICK = async () => {
if (quickConvertContract && library && parsedAmount) {
setAttemptConverting(true);
setShowConfirm(true);
await quickConvertContract
.quickToQuickX(parsedAmount.raw.toString(), {
gasLimit: 300000,
})
.then(async (response: TransactionResponse) => {
setAttemptConverting(false);
setTxPending(true);
setTxError('');
setTxHash('');
addTransaction(response, {
summary: quickConvertingText,
});
try {
const tx = await response.wait();
finalizedTransaction(tx, {
summary: quickConvertedText,
});
setTxPending(false);
setTxHash(tx.transactionHash);
} catch (err) {
setTxPending(false);
setTxError(t('errorInTx'));
}
})
.catch(() => {
setAttemptConverting(false);
setTxPending(false);
setTxHash('');
setTxError(t('txRejected'));
});
}
};
return (
<Box width='100%' maxWidth={488} id='convertQUICKPage'>
<Typography variant='h4'>{t('convert')} QUICK</Typography>
<Box className={classes.wrapper}>
<Box display='flex' alignItems='center' mb={3}>
<Box className={classes.iconWrapper}>
<img src={QUICKIcon} alt='QUICK' />
</Box>
<Typography variant='h6'>QUICK(OLD)</Typography>
<Box mx={1.5} className={classes.convertArrow}>
<ArrowForward />
</Box>
<Box className={classes.iconWrapper}>
<QUICKV2Icon />
</Box>
<Typography variant='h6'>QUICK(NEW)</Typography>
</Box>
<Typography variant='body2' color='textSecondary'>
<Trans i18nKey='convertQuick'>
Convert your QUICK(OLD) to QUICK(NEW). Read more about QUICK token
split{' '}
<a
href='https://quickswap-layer2.medium.com/you-voted-for-a-1-1000-token-split-to-make-quick-more-appealing-9c25c2a2dd7e'
rel='noreferrer'
target='_blank'
>
here
</a>
</Trans>
</Typography>
<Box className={classes.conversionRate}>
<Typography variant='caption'>
{t('conversionRate')}: 1 QUICK(OLD) ={' '}
{GlobalConst.utils.QUICK_CONVERSION_RATE} QUICK(NEW)
</Typography>
</Box>
<Box mt={4} mb={2}>
<Typography variant='body2' color='textSecondary'>
{t('yourbalance')}: {formatTokenAmount(quickBalance)}
</Typography>
<Box
className={cx(
classes.currencyInput,
isInsufficientQUICK && classes.errorInput,
)}
>
<NumericalInput
placeholder='0.00'
value={quickAmount}
fontSize={18}
onUserInput={(value) => {
const digits =
value.indexOf('.') > -1 ? value.split('.')[1].length : 0;
let fixedVal = value;
if (digits > quickToken.decimals) {
fixedVal = Number(value).toFixed(quickToken.decimals);
}
setQUICKAmount(fixedVal);
setQUICKV2Amount(
(
Number(fixedVal) * GlobalConst.utils.QUICK_CONVERSION_RATE
).toLocaleString('fullwide', {
useGrouping: false,
maximumFractionDigits: quickToken.decimals,
}),
);
}}
/>
<Box
mr={1}
className={classes.maxButton}
onClick={() => {
if (quickBalance) {
setQUICKAmount(quickBalance.toExact());
setQUICKV2Amount(
(
Number(quickBalance.toExact()) *
GlobalConst.utils.QUICK_CONVERSION_RATE
).toString(),
);
}
}}
>
{t('max')}
</Box>
<Typography variant='h6'>QUICK(OLD)</Typography>
</Box>
{isInsufficientQUICK && (
<Typography variant='body2' className={classes.errorText}>
{t('insufficientBalance', { symbol: 'QUICK' })}
</Typography>
)}
</Box>
<Box ml={2} className={classes.convertArrow}>
<ArrowDownward />
</Box>
<Box mt={2} mb={4}>
<Typography variant='body2' color='textSecondary'>
{t('youwillreceive')}:
</Typography>
<Box className={classes.currencyInput}>
<NumericalInput
placeholder='0.00'
value={quickV2Amount}
fontSize={18}
onUserInput={(value) => {
setQUICKV2Amount(value);
const quickAmount = (
Number(value) / GlobalConst.utils.QUICK_CONVERSION_RATE
).toLocaleString('fullwide', {
useGrouping: false,
maximumFractionDigits: quickToken.decimals,
});
setQUICKAmount(quickAmount);
}}
/>
<Typography variant='h6'>QUICK(NEW)</Typography>
</Box>
</Box>
<Box display='flex' justifyContent='center'>
<Button
disabled={
approving ||
attemptConverting ||
isInsufficientQUICK ||
!quickAmount ||
!Number(quickAmount)
}
className={classes.convertButton}
onClick={() => {
if (approval === ApprovalState.APPROVED) {
convertQUICK();
} else {
attemptToApprove();
}
}}
>
{buttonText}
</Button>
</Box>
</Box>
{showConfirm && (
<TransactionConfirmationModal
isOpen={showConfirm}
onDismiss={handleDismissConfirmation}
attemptingTxn={attemptConverting}
txPending={txPending}
hash={txHash}
content={() =>
txError ? (
<TransactionErrorContent
onDismiss={handleDismissConfirmation}
message={txError}
/>
) : (
<ConfirmationModalContent
title={t('convertingQUICK')}
onDismiss={handleDismissConfirmation}
content={() => (
<Box textAlign='center'>
<Box mt={6} mb={5}>
<CircularProgress size={80} />
</Box>
<Typography variant='body1'>
{quickConvertingText}
</Typography>
</Box>
)}
/>
)
}
pendingText={quickConvertingText}
modalContent={
txPending ? txSubmittedQuickConvertText : successQuickConvertedText
}
/>
)}
</Box>
);
}
