utils#formatTokenAmount TypeScript Examples
The following examples show how to use
utils#formatTokenAmount.
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: CurrencyRow.tsx From interface-v2 with GNU General Public License v3.0 | 6 votes |
|
function Balance({ balance }: { balance: CurrencyAmount }) {
const { palette } = useTheme();
return (
<Typography
variant='body2'
title={balance.toExact()}
style={{ color: palette.text.primary }}
>
{formatTokenAmount(balance)}
</Typography>
);
}
Example #2
| Source File: ConfirmSwapModal.tsx From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
trade,
originalTrade,
onAcceptChanges,
allowedSlippage,
onConfirm,
onDismiss,
swapErrorMessage,
isOpen,
attemptingTxn,
txHash,
txPending,
}) => {
const showAcceptChanges = useMemo(
() =>
Boolean(
trade &&
originalTrade &&
tradeMeaningfullyDiffers(trade, originalTrade),
),
[originalTrade, trade],
);
const modalHeader = useCallback(() => {
return trade ? (
<SwapModalHeader
trade={trade}
allowedSlippage={allowedSlippage}
onConfirm={onConfirm}
showAcceptChanges={showAcceptChanges}
onAcceptChanges={onAcceptChanges}
/>
) : null;
}, [allowedSlippage, onAcceptChanges, showAcceptChanges, trade, onConfirm]);
// text to show while loading
const pendingText = `Swapping ${formatTokenAmount(trade?.inputAmount)} ${
trade?.inputAmount?.currency?.symbol
} for ${formatTokenAmount(trade?.outputAmount)} ${
trade?.outputAmount?.currency?.symbol
}`;
const confirmationContent = useCallback(
() =>
swapErrorMessage ? (
<TransactionErrorContent
onDismiss={onDismiss}
message={swapErrorMessage}
/>
) : (
<ConfirmationModalContent
title='Confirm Transaction'
onDismiss={onDismiss}
content={modalHeader}
/>
),
[onDismiss, modalHeader, swapErrorMessage],
);
return (
<TransactionConfirmationModal
isOpen={isOpen}
onDismiss={onDismiss}
attemptingTxn={attemptingTxn}
hash={txHash}
txPending={txPending}
content={confirmationContent}
pendingText={pendingText}
modalContent={
txPending
? 'Submitted transaction to swap your tokens'
: 'Successfully swapped your tokens'
}
/>
);
}
Example #3
| Source File: hooks.ts From interface-v2 with GNU General Public License v3.0 | 5 votes |
|
export function useClaimCallback(
account: string | null | undefined,
): {
claimCallback: () => Promise<string>;
} {
// get claim data for this account
const { library, chainId } = useActiveWeb3React();
const claimData = useUserClaimData(account);
// used for popup summary
const unClaimedAmount: TokenAmount | undefined = useUserUnclaimedAmount(
account,
);
const addTransaction = useTransactionAdder();
const distributorContract = useMerkleDistributorContract();
const claimCallback = async function() {
if (!claimData || !account || !library || !chainId || !distributorContract)
return;
const args = [claimData.index, account, claimData.amount, claimData.proof];
return distributorContract.estimateGas['claim'](...args, {}).then(
(estimatedGasLimit) => {
return distributorContract
.claim(...args, {
value: null,
gasLimit: calculateGasMargin(estimatedGasLimit),
})
.then((response: TransactionResponse) => {
addTransaction(response, {
summary: `Claimed ${formatTokenAmount(unClaimedAmount)} QUICK`,
claim: { recipient: account },
});
return response.hash;
});
},
);
};
return { claimCallback };
}
Example #4
| 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 #5
| Source File: AddLiquidity.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
AddLiquidity: React.FC<{
currency0?: Currency;
currency1?: Currency;
currencyBg?: string;
}> = ({ currency0, currency1, currencyBg }) => {
const classes = useStyles({});
const { palette } = useTheme();
const { t } = useTranslation();
const [addLiquidityErrorMessage, setAddLiquidityErrorMessage] = useState<
string | null
>(null);
const { account, chainId, library } = useActiveWeb3React();
const [showConfirm, setShowConfirm] = useState(false);
const [attemptingTxn, setAttemptingTxn] = useState(false);
const [txPending, setTxPending] = useState(false);
const [allowedSlippage] = useUserSlippageTolerance();
const deadline = useTransactionDeadline();
const [txHash, setTxHash] = useState('');
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const { independentField, typedValue, otherTypedValue } = useMintState();
const expertMode = useIsExpertMode();
const {
dependentField,
currencies,
pair,
pairState,
currencyBalances,
parsedAmounts,
price,
noLiquidity,
liquidityMinted,
poolTokenPercentage,
error,
} = useDerivedMintInfo();
const liquidityTokenData = {
amountA: formatTokenAmount(parsedAmounts[Field.CURRENCY_A]),
symbolA: currencies[Field.CURRENCY_A]?.symbol,
amountB: formatTokenAmount(parsedAmounts[Field.CURRENCY_B]),
symbolB: currencies[Field.CURRENCY_B]?.symbol,
};
const pendingText = t('supplyingTokens', liquidityTokenData);
const {
onFieldAInput,
onFieldBInput,
onCurrencySelection,
} = useMintActionHandlers(noLiquidity);
const maxAmounts: { [field in Field]?: TokenAmount } = [
Field.CURRENCY_A,
Field.CURRENCY_B,
].reduce((accumulator, field) => {
return {
...accumulator,
[field]: maxAmountSpend(currencyBalances[field]),
};
}, {});
const formattedAmounts = {
[independentField]: typedValue,
[dependentField]: noLiquidity
? otherTypedValue
: parsedAmounts[dependentField]?.toExact() ?? '',
};
const { ethereum } = window as any;
const toggleWalletModal = useWalletModalToggle();
const [approvingA, setApprovingA] = useState(false);
const [approvingB, setApprovingB] = useState(false);
const [approvalA, approveACallback] = useApproveCallback(
parsedAmounts[Field.CURRENCY_A],
chainId ? GlobalConst.addresses.ROUTER_ADDRESS[chainId] : undefined,
);
const [approvalB, approveBCallback] = useApproveCallback(
parsedAmounts[Field.CURRENCY_B],
chainId ? GlobalConst.addresses.ROUTER_ADDRESS[chainId] : undefined,
);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair?.liquidityToken,
);
const atMaxAmounts: { [field in Field]?: TokenAmount } = [
Field.CURRENCY_A,
Field.CURRENCY_B,
].reduce((accumulator, field) => {
return {
...accumulator,
[field]: maxAmounts[field]?.equalTo(parsedAmounts[field] ?? '0'),
};
}, {});
const handleCurrencyASelect = useCallback(
(currencyA: Currency) => {
onCurrencySelection(Field.CURRENCY_A, currencyA);
},
[onCurrencySelection],
);
const handleCurrencyBSelect = useCallback(
(currencyB: Currency) => {
onCurrencySelection(Field.CURRENCY_B, currencyB);
},
[onCurrencySelection],
);
useEffect(() => {
if (currency0) {
onCurrencySelection(Field.CURRENCY_A, currency0);
} else {
onCurrencySelection(Field.CURRENCY_A, Token.ETHER);
}
if (currency1) {
onCurrencySelection(Field.CURRENCY_B, currency1);
} else {
onCurrencySelection(Field.CURRENCY_B, returnTokenFromKey('QUICK'));
}
}, [onCurrencySelection, currency0, currency1]);
const onAdd = () => {
if (expertMode) {
onAddLiquidity();
} else {
setShowConfirm(true);
}
};
const router = useRouterContract();
const onAddLiquidity = async () => {
if (!chainId || !library || !account || !router) return;
const {
[Field.CURRENCY_A]: parsedAmountA,
[Field.CURRENCY_B]: parsedAmountB,
} = parsedAmounts;
if (
!parsedAmountA ||
!parsedAmountB ||
!currencies[Field.CURRENCY_A] ||
!currencies[Field.CURRENCY_B] ||
!deadline
) {
return;
}
const amountsMin = {
[Field.CURRENCY_A]: calculateSlippageAmount(
parsedAmountA,
noLiquidity ? 0 : allowedSlippage,
)[0],
[Field.CURRENCY_B]: calculateSlippageAmount(
parsedAmountB,
noLiquidity ? 0 : allowedSlippage,
)[0],
};
let estimate,
method: (...args: any) => Promise<TransactionResponse>,
args: Array<string | string[] | number>,
value: BigNumber | null;
if (
currencies[Field.CURRENCY_A] === ETHER ||
currencies[Field.CURRENCY_B] === ETHER
) {
const tokenBIsETH = currencies[Field.CURRENCY_B] === ETHER;
estimate = router.estimateGas.addLiquidityETH;
method = router.addLiquidityETH;
args = [
wrappedCurrency(
tokenBIsETH
? currencies[Field.CURRENCY_A]
: currencies[Field.CURRENCY_B],
chainId,
)?.address ?? '', // token
(tokenBIsETH ? parsedAmountA : parsedAmountB).raw.toString(), // token desired
amountsMin[
tokenBIsETH ? Field.CURRENCY_A : Field.CURRENCY_B
].toString(), // token min
amountsMin[
tokenBIsETH ? Field.CURRENCY_B : Field.CURRENCY_A
].toString(), // eth min
account,
deadline.toHexString(),
];
value = BigNumber.from(
(tokenBIsETH ? parsedAmountB : parsedAmountA).raw.toString(),
);
} else {
estimate = router.estimateGas.addLiquidity;
method = router.addLiquidity;
args = [
wrappedCurrency(currencies[Field.CURRENCY_A], chainId)?.address ?? '',
wrappedCurrency(currencies[Field.CURRENCY_B], chainId)?.address ?? '',
parsedAmountA.raw.toString(),
parsedAmountB.raw.toString(),
amountsMin[Field.CURRENCY_A].toString(),
amountsMin[Field.CURRENCY_B].toString(),
account,
deadline.toHexString(),
];
value = null;
}
setAttemptingTxn(true);
await estimate(...args, value ? { value } : {})
.then((estimatedGasLimit) =>
method(...args, {
...(value ? { value } : {}),
gasLimit: calculateGasMargin(estimatedGasLimit),
}).then(async (response) => {
setAttemptingTxn(false);
setTxPending(true);
const summary = t('addLiquidityTokens', liquidityTokenData);
addTransaction(response, {
summary,
});
setTxHash(response.hash);
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary,
});
setTxPending(false);
} catch (error) {
setTxPending(false);
setAddLiquidityErrorMessage(t('errorInTx'));
}
ReactGA.event({
category: 'Liquidity',
action: 'Add',
label: [
currencies[Field.CURRENCY_A]?.symbol,
currencies[Field.CURRENCY_B]?.symbol,
].join('/'),
});
}),
)
.catch((error) => {
setAttemptingTxn(false);
setAddLiquidityErrorMessage(t('txRejected'));
// we only care if the error is something _other_ than the user rejected the tx
if (error?.code !== 4001) {
console.error(error);
}
});
};
const connectWallet = () => {
if (ethereum && !isSupportedNetwork(ethereum)) {
addMaticToMetamask();
} else {
toggleWalletModal();
}
};
const handleDismissConfirmation = useCallback(() => {
setShowConfirm(false);
// if there was a tx hash, we want to clear the input
if (txHash) {
onFieldAInput('');
}
setTxHash('');
}, [onFieldAInput, txHash]);
const buttonText = useMemo(() => {
if (account) {
return error ?? t('supply');
} else if (ethereum && !isSupportedNetwork(ethereum)) {
return t('switchPolygon');
}
return t('connectWallet');
}, [account, ethereum, error, t]);
const modalHeader = () => {
return (
<Box>
<Box mt={10} mb={3} display='flex' justifyContent='center'>
<DoubleCurrencyLogo
currency0={currencies[Field.CURRENCY_A]}
currency1={currencies[Field.CURRENCY_B]}
size={48}
/>
</Box>
<Box mb={6} color={palette.text.primary} textAlign='center'>
<Typography variant='h6'>
{t('supplyingTokens', liquidityTokenData)}
<br />
{t('receiveLPTokens', {
amount: formatTokenAmount(liquidityMinted),
symbolA: currencies[Field.CURRENCY_A]?.symbol,
symbolB: currencies[Field.CURRENCY_B]?.symbol,
})}
</Typography>
</Box>
<Box mb={3} color={palette.text.secondary} textAlign='center'>
<Typography variant='body2'>
{t('outputEstimated', { slippage: allowedSlippage / 100 })}
</Typography>
</Box>
<Box className={classes.swapButtonWrapper}>
<Button onClick={onAddLiquidity}>{t('confirmSupply')}</Button>
</Box>
</Box>
);
};
return (
<Box>
{showConfirm && (
<TransactionConfirmationModal
isOpen={showConfirm}
onDismiss={handleDismissConfirmation}
attemptingTxn={attemptingTxn}
txPending={txPending}
hash={txHash}
content={() =>
addLiquidityErrorMessage ? (
<TransactionErrorContent
onDismiss={handleDismissConfirmation}
message={addLiquidityErrorMessage}
/>
) : (
<ConfirmationModalContent
title={t('supplyingliquidity')}
onDismiss={handleDismissConfirmation}
content={modalHeader}
/>
)
}
pendingText={pendingText}
modalContent={
txPending ? t('submittedTxLiquidity') : t('successAddedliquidity')
}
/>
)}
<CurrencyInput
id='add-liquidity-input-tokena'
title={`${t('token')} 1:`}
currency={currencies[Field.CURRENCY_A]}
showHalfButton={Boolean(maxAmounts[Field.CURRENCY_A])}
showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
onMax={() =>
onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
}
onHalf={() =>
onFieldAInput(
maxAmounts[Field.CURRENCY_A]
? (Number(maxAmounts[Field.CURRENCY_A]?.toExact()) / 2).toString()
: '',
)
}
handleCurrencySelect={handleCurrencyASelect}
amount={formattedAmounts[Field.CURRENCY_A]}
setAmount={onFieldAInput}
bgColor={currencyBg}
/>
<Box className={classes.exchangeSwap}>
<AddLiquidityIcon />
</Box>
<CurrencyInput
id='add-liquidity-input-tokenb'
title={`${t('token')} 2:`}
showHalfButton={Boolean(maxAmounts[Field.CURRENCY_B])}
currency={currencies[Field.CURRENCY_B]}
showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
onHalf={() =>
onFieldBInput(
maxAmounts[Field.CURRENCY_B]
? (Number(maxAmounts[Field.CURRENCY_B]?.toExact()) / 2).toString()
: '',
)
}
onMax={() =>
onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
}
handleCurrencySelect={handleCurrencyBSelect}
amount={formattedAmounts[Field.CURRENCY_B]}
setAmount={onFieldBInput}
bgColor={currencyBg}
/>
{currencies[Field.CURRENCY_A] &&
currencies[Field.CURRENCY_B] &&
pairState !== PairState.INVALID &&
price && (
<Box my={2}>
<Box className={classes.swapPrice}>
<Typography variant='body2'>
1 {currencies[Field.CURRENCY_A]?.symbol} ={' '}
{price.toSignificant(3)} {currencies[Field.CURRENCY_B]?.symbol}{' '}
</Typography>
<Typography variant='body2'>
1 {currencies[Field.CURRENCY_B]?.symbol} ={' '}
{price.invert().toSignificant(3)}{' '}
{currencies[Field.CURRENCY_A]?.symbol}{' '}
</Typography>
</Box>
<Box className={classes.swapPrice}>
<Typography variant='body2'>{t('yourPoolShare')}:</Typography>
<Typography variant='body2'>
{poolTokenPercentage
? poolTokenPercentage.toSignificant(6) + '%'
: '-'}
</Typography>
</Box>
<Box className={classes.swapPrice}>
<Typography variant='body2'>{t('lpTokenReceived')}:</Typography>
<Typography variant='body2'>
{formatTokenAmount(userPoolBalance)} {t('lpTokens')}
</Typography>
</Box>
</Box>
)}
<Box className={classes.swapButtonWrapper}>
{(approvalA === ApprovalState.NOT_APPROVED ||
approvalA === ApprovalState.PENDING ||
approvalB === ApprovalState.NOT_APPROVED ||
approvalB === ApprovalState.PENDING) &&
!error && (
<Box className={classes.approveButtons}>
{approvalA !== ApprovalState.APPROVED && (
<Box
width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
>
<Button
onClick={async () => {
setApprovingA(true);
try {
await approveACallback();
setApprovingA(false);
} catch (e) {
setApprovingA(false);
}
}}
disabled={approvingA || approvalA === ApprovalState.PENDING}
>
{approvalA === ApprovalState.PENDING
? `${t('approving')} ${
currencies[Field.CURRENCY_A]?.symbol
}`
: `${t('approve')} ${
currencies[Field.CURRENCY_A]?.symbol
}`}
</Button>
</Box>
)}
{approvalB !== ApprovalState.APPROVED && (
<Box
width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
>
<Button
onClick={async () => {
setApprovingB(true);
try {
await approveBCallback();
setApprovingB(false);
} catch (e) {
setApprovingB(false);
}
}}
disabled={approvingB || approvalB === ApprovalState.PENDING}
>
{approvalB === ApprovalState.PENDING
? `${t('approving')} ${
currencies[Field.CURRENCY_B]?.symbol
}`
: `${t('approve')} ${
currencies[Field.CURRENCY_B]?.symbol
}`}
</Button>
</Box>
)}
</Box>
)}
<Button
disabled={
Boolean(account) &&
(Boolean(error) ||
approvalA !== ApprovalState.APPROVED ||
approvalB !== ApprovalState.APPROVED)
}
onClick={account ? onAdd : connectWallet}
>
{buttonText}
</Button>
</Box>
</Box>
);
}
Example #6
| Source File: DragonsLair.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
DragonsLair: React.FC = () => {
const classes = useStyles();
const { palette } = useTheme();
const quickPrice = useUSDCPriceToken(returnTokenFromKey('QUICK'));
const dQUICKPrice = useUSDCPriceToken(returnTokenFromKey('DQUICK'));
const dQUICKtoQUICK = dQUICKPrice / quickPrice;
const QUICKtodQUICK = quickPrice / dQUICKPrice;
const [isQUICKRate, setIsQUICKRate] = useState(false);
const [openStakeModal, setOpenStakeModal] = useState(false);
const [openUnstakeModal, setOpenUnstakeModal] = useState(false);
const lairInfo = useLairInfo();
const APY = useLairDQUICKAPY(lairInfo);
return (
<Box position='relative' zIndex={3}>
{openStakeModal && (
<StakeQuickModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
/>
)}
{openUnstakeModal && (
<UnstakeQuickModal
open={openUnstakeModal}
onClose={() => setOpenUnstakeModal(false)}
/>
)}
<Box display='flex'>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} size='32px' />
<Box ml={1.5}>
<Typography
variant='body2'
style={{ color: palette.text.primary, lineHeight: 1 }}
>
QUICK
</Typography>
<Typography variant='caption' style={{ color: palette.text.hint }}>
Single Stake — Auto compounding
</Typography>
</Box>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>Total QUICK</Typography>
<Typography variant='body2'>
{lairInfo
? lairInfo.totalQuickBalance.toFixed(2, {
groupSeparator: ',',
})
: 0}
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>TVL:</Typography>
<Typography variant='body2'>
$
{(
Number(lairInfo.totalQuickBalance.toExact()) * quickPrice
).toLocaleString()}
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>APY</Typography>
<Typography variant='body2' style={{ color: palette.success.main }}>
{APY}%
</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mt={1.5}>
<Typography variant='body2'>Your Deposits</Typography>
<Typography variant='body2'>
{formatTokenAmount(lairInfo.QUICKBalance)}
</Typography>
</Box>
<Box
mt={2.5}
width={1}
height='40px'
display='flex'
alignItems='center'
justifyContent='center'
borderRadius={10}
border={`1px solid ${palette.secondary.light}`}
>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} />
<Typography variant='body2' style={{ margin: '0 8px' }}>
{isQUICKRate ? 1 : dQUICKtoQUICK.toLocaleString()} QUICK =
</Typography>
<CurrencyLogo currency={returnTokenFromKey('QUICK')} />
<Typography variant='body2' style={{ margin: '0 8px' }}>
{isQUICKRate ? QUICKtodQUICK.toLocaleString() : 1} dQUICK
</Typography>
<PriceExchangeIcon
style={{ cursor: 'pointer' }}
onClick={() => setIsQUICKRate(!isQUICKRate)}
/>
</Box>
<Box
className={classes.stakeButton}
bgcolor={palette.primary.main}
onClick={() => setOpenStakeModal(true)}
>
<Typography variant='body2'>Stake</Typography>
</Box>
<Box
className={classes.stakeButton}
bgcolor='transparent'
onClick={() => setOpenUnstakeModal(true)}
>
<Typography variant='body2'>Unstake</Typography>
</Box>
<Box mt={3} textAlign='center'>
<Typography
variant='caption'
style={{ color: palette.text.secondary, fontWeight: 500 }}
>
⭐️ When you unstake, the contract will automatically claim QUICK on
your behalf.
</Typography>
</Box>
</Box>
);
}
Example #7
| 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>
);
}
Example #8
| Source File: useWrapCallback.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
/**
* Given the selected input and output currency, return a wrap callback
* @param inputCurrency the selected input currency
* @param outputCurrency the selected output currency
* @param typedValue the user input value
*/
export default function useWrapCallback(
inputCurrency: Currency | undefined,
outputCurrency: Currency | undefined,
typedValue: string | undefined,
): {
wrapType: WrapType;
execute?: undefined | (() => Promise<void>);
inputError?: string;
} {
const { chainId, account } = useActiveWeb3React();
const wethContract = useWETHContract();
const balance = useCurrencyBalance(account ?? undefined, inputCurrency);
// we can always parse the amount typed as the input currency, since wrapping is 1:1
const inputAmount = useMemo(() => tryParseAmount(typedValue, inputCurrency), [
inputCurrency,
typedValue,
]);
const addTransaction = useTransactionAdder();
return useMemo(() => {
if (!wethContract || !chainId || !inputCurrency || !outputCurrency)
return NOT_APPLICABLE;
const sufficientBalance =
inputAmount && balance && !balance.lessThan(inputAmount);
if (
inputCurrency === ETHER &&
currencyEquals(WETH[chainId], outputCurrency)
) {
return {
wrapType: WrapType.WRAP,
execute:
sufficientBalance && inputAmount
? async () => {
try {
const txReceipt = await wethContract.deposit({
value: `0x${inputAmount.raw.toString(16)}`,
});
addTransaction(txReceipt, {
summary: `Wrap ${formatTokenAmount(
inputAmount,
)} ETH to WETH`,
});
} catch (error) {
console.error('Could not deposit', error);
}
}
: undefined,
inputError: sufficientBalance ? undefined : 'Insufficient ETH balance',
};
} else if (
currencyEquals(WETH[chainId], inputCurrency) &&
outputCurrency === ETHER
) {
return {
wrapType: WrapType.UNWRAP,
execute:
sufficientBalance && inputAmount
? async () => {
try {
const txReceipt = await wethContract.withdraw(
`0x${inputAmount.raw.toString(16)}`,
);
addTransaction(txReceipt, {
summary: `Unwrap ${formatTokenAmount(
inputAmount,
)} WETH to ETH`,
});
} catch (error) {
console.error('Could not withdraw', error);
}
}
: undefined,
inputError: sufficientBalance ? undefined : 'Insufficient WETH balance',
};
} else {
return NOT_APPLICABLE;
}
}, [
wethContract,
chainId,
inputCurrency,
outputCurrency,
inputAmount,
balance,
addTransaction,
]);
}
Example #9
| Source File: useSwapCallback.ts From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
// returns a function that will execute a swap, if the parameters are all valid
// and the user has approved the slippage adjusted input amount for the trade
export function useSwapCallback(
trade: Trade | undefined, // trade to execute, required
allowedSlippage: number = GlobalConst.utils.INITIAL_ALLOWED_SLIPPAGE, // in bips
recipientAddressOrName: string | null, // the ENS name or address of the recipient of the trade, or null if swap should be returned to sender
): {
state: SwapCallbackState;
callback:
| null
| (() => Promise<{ response: TransactionResponse; summary: string }>);
error: string | null;
} {
const { account, chainId, library } = useActiveWeb3React();
const swapCalls = useSwapCallArguments(
trade,
allowedSlippage,
recipientAddressOrName,
);
const addTransaction = useTransactionAdder();
const { address: recipientAddress } = useENS(recipientAddressOrName);
const recipient =
recipientAddressOrName === null ? account : recipientAddress;
return useMemo(() => {
if (!trade || !library || !account || !chainId) {
return {
state: SwapCallbackState.INVALID,
callback: null,
error: 'Missing dependencies',
};
}
if (!recipient) {
if (recipientAddressOrName !== null) {
return {
state: SwapCallbackState.INVALID,
callback: null,
error: 'Invalid recipient',
};
} else {
return {
state: SwapCallbackState.LOADING,
callback: null,
error: null,
};
}
}
const tradeVersion = Version.v2;
return {
state: SwapCallbackState.VALID,
callback: async function onSwap(): Promise<{
response: TransactionResponse;
summary: string;
}> {
const estimatedCalls: EstimatedSwapCall[] = await Promise.all(
swapCalls.map((call) => {
const {
parameters: { methodName, args, value },
contract,
} = call;
const options = !value || isZero(value) ? {} : { value };
return contract.estimateGas[methodName](...args, options)
.then((gasEstimate) => {
return {
call,
gasEstimate: gasEstimate.add(100000),
};
})
.catch((gasError) => {
console.debug(
'Gas estimate failed, trying eth_call to extract error',
call,
);
return contract.callStatic[methodName](...args, options)
.then((result) => {
console.debug(
'Unexpected successful call after failed estimate gas',
call,
gasError,
result,
);
return {
call,
error: new Error(
'Unexpected issue with estimating the gas. Please try again.',
),
};
})
.catch((callError) => {
console.debug('Call threw error', call, callError);
let errorMessage: string;
switch (callError.reason) {
case 'UniswapV2Router: INSUFFICIENT_OUTPUT_AMOUNT':
case 'UniswapV2Router: EXCESSIVE_INPUT_AMOUNT':
errorMessage =
'This transaction will not succeed either due to price movement or fee on transfer. Try increasing your slippage tolerance.';
break;
default:
errorMessage = `The transaction cannot succeed due to error: ${callError.reason}. This is probably an issue with one of the tokens you are swapping.`;
}
return { call, error: new Error(errorMessage) };
});
});
}),
);
// a successful estimation is a bignumber gas estimate and the next call is also a bignumber gas estimate
const successfulEstimation = estimatedCalls.find(
(el, ix, list): el is SuccessfulCall =>
'gasEstimate' in el &&
(ix === list.length - 1 || 'gasEstimate' in list[ix + 1]),
);
if (!successfulEstimation) {
const errorCalls = estimatedCalls.filter(
(call): call is FailedCall => 'error' in call,
);
if (errorCalls.length > 0)
throw errorCalls[errorCalls.length - 1].error;
throw new Error(
'Unexpected error. Please contact support: none of the calls threw an error',
);
}
const {
call: {
contract,
parameters: { methodName, args, value },
},
gasEstimate,
} = successfulEstimation;
return contract[methodName](...args, {
gasLimit: calculateGasMargin(gasEstimate),
...(value && !isZero(value)
? { value, from: account }
: { from: account }),
})
.then((response: TransactionResponse) => {
const inputSymbol = trade.inputAmount.currency.symbol;
const outputSymbol = trade.outputAmount.currency.symbol;
const inputAmount = formatTokenAmount(trade.inputAmount);
const outputAmount = formatTokenAmount(trade.outputAmount);
const base = `Swap ${inputAmount} ${inputSymbol} for ${outputAmount} ${outputSymbol}`;
const withRecipient =
recipient === account
? base
: `${base} to ${
recipientAddressOrName && isAddress(recipientAddressOrName)
? shortenAddress(recipientAddressOrName)
: recipientAddressOrName
}`;
const withVersion =
tradeVersion === Version.v2
? withRecipient
: `${withRecipient} on ${(tradeVersion as any).toUpperCase()}`;
addTransaction(response, {
summary: withVersion,
});
return { response, summary: withVersion };
})
.catch((error: any) => {
// if the user rejected the tx, pass this along
if (error?.code === 4001) {
throw new Error('Transaction rejected.');
} else {
// otherwise, the error was unexpected and we need to convey that
console.error(`Swap failed`, error, methodName, args, value);
throw new Error(`Swap failed: ${error.message}`);
}
});
},
error: null,
};
}, [
trade,
library,
account,
chainId,
recipient,
recipientAddressOrName,
swapCalls,
addTransaction,
]);
}
Example #10
| 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 #11
| Source File: SyrupCardDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const syrupCurrency = unwrappedToken(syrup.token);
const { palette, breakpoints } = useTheme();
const { t } = useTranslation();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [attemptingClaim, setAttemptingClaim] = useState(false);
const [attemptingUnstake, setAttemptingUnstake] = useState(false);
const [openStakeModal, setOpenStakeModal] = useState(false);
const classes = useStyles();
const stakingTokenPrice = useUSDCPriceToken(syrup.stakingToken);
const stakingContract = useStakingContract(syrup?.stakingRewardAddress);
const addTransaction = useTransactionAdder();
const finalizedTransaction = useTransactionFinalizer();
const { account } = useActiveWeb3React();
const currency = syrup ? unwrappedToken(syrup.token) : undefined;
const userLiquidityUnstaked = useTokenBalance(
account ?? undefined,
syrup.stakedAmount?.token,
);
const exactEnd = syrup ? syrup.periodFinish : 0;
const depositAmount =
syrup && syrup.valueOfTotalStakedAmountInUSDC
? `$${Number(syrup.valueOfTotalStakedAmountInUSDC).toLocaleString()}`
: `${formatTokenAmount(syrup?.totalStakedAmount)} ${
syrup?.stakingToken.symbol
}`;
const onClaimReward = async () => {
if (syrup && stakingContract && syrup.stakedAmount) {
setAttemptingClaim(true);
await stakingContract
.getReward({ gasLimit: 350000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
});
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
});
setAttemptingClaim(false);
} catch (e) {
setAttemptingClaim(false);
}
})
.catch((error: any) => {
setAttemptingClaim(false);
console.log(error);
});
}
};
const onWithdraw = async () => {
if (syrup && stakingContract && syrup.stakedAmount) {
setAttemptingUnstake(true);
await stakingContract
.exit({ gasLimit: 300000 })
.then(async (response: TransactionResponse) => {
addTransaction(response, {
summary: `Withdraw deposited liquidity`,
});
try {
const receipt = await response.wait();
finalizedTransaction(receipt, {
summary: `Withdraw deposited dQUICK`,
});
setAttemptingUnstake(false);
} catch (e) {
setAttemptingUnstake(false);
}
})
.catch((error: any) => {
setAttemptingUnstake(false);
console.log(error);
});
}
};
const StakeButton = () => (
<Box
className={classes.syrupButton}
onClick={() => setOpenStakeModal(true)}
>
<Typography variant='body2'>Stake</Typography>
</Box>
);
const UnstakeButton = () => (
<Box
className={classes.syrupButton}
style={{ opacity: attemptingUnstake ? 0.6 : 1 }}
onClick={() => {
if (!attemptingUnstake) {
onWithdraw();
}
}}
>
<Typography variant='body2'>
{attemptingUnstake ? 'Unstaking...' : 'Unstake'}
</Typography>
</Box>
);
const ClaimButton = () => (
<Box
className={classes.syrupButton}
style={{ opacity: attemptingClaim ? 0.6 : 1 }}
onClick={() => {
if (!attemptingClaim) {
onClaimReward();
}
}}
>
<Typography variant='body2'>
{attemptingClaim ? 'Claiming...' : 'Claim'}
</Typography>
</Box>
);
return (
<>
{openStakeModal && syrup && (
<StakeSyrupModal
open={openStakeModal}
onClose={() => setOpenStakeModal(false)}
syrup={syrup}
/>
)}
{syrup && (
<>
<Divider />
<Box padding={3}>
{isMobile && (
<Box mb={3}>
<Box display='flex' justifyContent='space-between' mb={2}>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{syrup.stakingToken.symbol} {t('deposits')}:
</Typography>
<Typography variant='body2'>{depositAmount}</Typography>
</Box>
<Box display='flex' justifyContent='space-between' mb={2}>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('dailyRewards')}:
</Typography>
<Typography variant='body2'>
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}{' '}
{syrup.token.symbol}
<span style={{ color: palette.text.secondary }}>
{' '}
/ {t('day')}
</span>
</Typography>
</Box>
<Box mb={2}>
<SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
</Box>
<Box display='flex' justifyContent='space-between' mb={3}>
<Box display='flex' alignItems='center'>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
APR:
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box textAlign='right'>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
</Box>
<Divider />
</Box>
)}
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={1}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('inwallet')}
</Typography>
<Typography variant='body2'>
<span style={{ color: palette.text.primary }}>
{userLiquidityUnstaked
? formatTokenAmount(userLiquidityUnstaked)
: 0}{' '}
{syrup.stakingToken.symbol}
</span>
<span style={{ color: palette.text.secondary, marginLeft: 4 }}>
$
{userLiquidityUnstaked
? (
stakingTokenPrice *
Number(userLiquidityUnstaked.toExact())
).toLocaleString()
: 0}
</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={1}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('staked')}
</Typography>
<Typography variant='body2'>
<span style={{ color: palette.text.primary }}>
{formatTokenAmount(syrup.stakedAmount)}{' '}
{syrup.stakingToken.symbol}
</span>
<span style={{ color: palette.text.secondary, marginLeft: 4 }}>
{syrup.stakedAmount
? `$${(
stakingTokenPrice * Number(syrup.stakedAmount.toExact())
).toLocaleString()}`
: '-'}
</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='space-between'
mb={2}
>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{t('earned')} {currency?.symbol}
</Typography>
<Box display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='16px' />
<Typography variant='body2' style={{ marginLeft: 4 }}>
<span style={{ color: palette.text.primary }}>
{formatTokenAmount(syrup.earnedAmount)}
</span>
<span
style={{ color: palette.text.secondary, marginLeft: 4 }}
>
{getEarnedUSDSyrup(syrup)}
</span>
</Typography>
</Box>
</Box>
<Box
display='flex'
flexWrap='wrap'
alignItems='center'
justifyContent='space-between'
>
{!isMobile && (
<SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
)}
{isMobile ? (
<>
{syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
<Box
width={1}
mb={1.5}
display='flex'
justifyContent='flex-end'
>
<ClaimButton />
</Box>
)}
<Box
width={1}
mb={1.5}
display='flex'
justifyContent={
syrup.stakedAmount && syrup.stakedAmount.greaterThan('0')
? 'space-between'
: 'flex-end'
}
>
{!syrup.ended && <StakeButton />}
{syrup.stakedAmount &&
syrup.stakedAmount.greaterThan('0') && <UnstakeButton />}
</Box>
</>
) : (
<Box display='flex' flexWrap='wrap' my={1}>
{!syrup.ended && <StakeButton />}
{syrup.stakedAmount && syrup.stakedAmount.greaterThan('0') && (
<Box ml={1}>
<UnstakeButton />
</Box>
)}
{syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
<Box ml={1}>
<ClaimButton />
</Box>
)}
</Box>
)}
</Box>
{syrup.rewardRate?.greaterThan('0') && (
<Box className={classes.dailyRateWrapper}>
<Box
display='flex'
alignItems='center'
justifyContent={isMobile ? 'space-between' : 'flex-start'}
width={isMobile ? 1 : 'auto'}
flexWrap='wrap'
>
<Box display='flex' mr={1}>
<Typography variant='body2' color='textSecondary'>
{t('yourRate')}:
</Typography>
</Box>
<Typography variant='body2' color='textPrimary'>
{formatMulDivTokenAmount(
syrup.rewardRate,
GlobalConst.utils.ONEDAYSECONDS,
)}{' '}
{syrupCurrency.symbol} / {t('day')}
</Typography>
</Box>
</Box>
)}
</Box>
</>
)}
</>
);
}
Example #12
| Source File: SyrupCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
syrup,
dQUICKAPY,
}) => {
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [expanded, setExpanded] = useState(false);
const classes = useStyles();
const currency = unwrappedToken(syrup.token);
const depositAmount = syrup.valueOfTotalStakedAmountInUSDC
? `$${syrup.valueOfTotalStakedAmountInUSDC.toLocaleString()}`
: `${formatTokenAmount(syrup.totalStakedAmount)} ${
syrup.stakingToken.symbol
}`;
return (
<Box className={classes.syrupCard}>
<Box
display='flex'
flexWrap='wrap'
alignItems='center'
width={1}
padding={2}
style={{ cursor: 'pointer' }}
onClick={() => setExpanded(!expanded)}
>
{isMobile ? (
<>
<Box
display='flex'
alignItems='center'
width={expanded ? 0.95 : 0.5}
>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
</Box>
</Box>
{!expanded && (
<Box width={0.45}>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{expanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
<Box width={0.3} display='flex' alignItems='center'>
<CurrencyLogo currency={currency} size='32px' />
<Box ml={1.5}>
<Typography variant='body2'>{currency.symbol}</Typography>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
{syrup.rate >= 1000000
? formatCompact(syrup.rate)
: syrup.rate.toLocaleString()}
<span style={{ color: palette.text.secondary }}>
{' '}
/ day
</span>
</Typography>
</Box>
<Box display='flex' mt={0.25}>
<Typography variant='caption'>
$
{syrup.rewardTokenPriceinUSD
? (
syrup.rate * syrup.rewardTokenPriceinUSD
).toLocaleString()
: '-'}{' '}
<span style={{ color: palette.text.secondary }}>/ day</span>
</Typography>
</Box>
</Box>
</Box>
<Box width={0.3}>
<Typography variant='body2'>{depositAmount}</Typography>
</Box>
<Box width={0.2} textAlign='left'>
<SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
</Box>
<Box width={0.2} textAlign='right'>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
mb={0.25}
>
<CurrencyLogo currency={currency} size='16px' />
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(syrup.earnedAmount)}
</Typography>
</Box>
<Typography
variant='body2'
style={{ color: palette.text.secondary }}
>
{getEarnedUSDSyrup(syrup)}
</Typography>
</Box>
</>
)}
</Box>
{expanded && syrup && (
<SyrupCardDetails syrup={syrup} dQUICKAPY={dQUICKAPY} />
)}
</Box>
);
}
Example #13
| Source File: AdvancedSwapDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
TradeSummary: React.FC<TradeSummaryProps> = ({
trade,
allowedSlippage,
}) => {
const [openSettingsModal, setOpenSettingsModal] = useState(false);
const { palette } = useTheme();
const { t } = useTranslation();
const { priceImpactWithoutFee, realizedLPFee } = computeTradePriceBreakdown(
trade,
);
const isExactIn = trade.tradeType === TradeType.EXACT_INPUT;
const slippageAdjustedAmounts = computeSlippageAdjustedAmounts(
trade,
allowedSlippage,
);
const classes = useStyles();
const tradeAmount = isExactIn ? trade.outputAmount : trade.inputAmount;
return (
<Box mt={1.5}>
{openSettingsModal && (
<SettingsModal
open={openSettingsModal}
onClose={() => setOpenSettingsModal(false)}
/>
)}
<Box className={classes.summaryRow}>
<Box display='flex' alignItems='center'>
<Typography variant='body2'>Slippage:</Typography>
<QuestionHelper text={t('slippageHelper')} />
</Box>
<Box
display='flex'
alignItems='center'
onClick={() => setOpenSettingsModal(true)}
style={{ cursor: 'pointer' }}
>
<Typography variant='body2' style={{ color: palette.primary.main }}>
{allowedSlippage / 100}%
</Typography>
<EditIcon style={{ marginLeft: 8 }} />
</Box>
</Box>
<Box className={classes.summaryRow}>
<Box display='flex' alignItems='center'>
<Typography variant='body2'>
{isExactIn ? t('minReceived') : t('maxSold')}:
</Typography>
<QuestionHelper text={t('txLimitHelper')} />
</Box>
<Box display='flex' alignItems='center'>
<Typography variant='body2'>
{formatTokenAmount(
slippageAdjustedAmounts[isExactIn ? Field.OUTPUT : Field.INPUT],
)}{' '}
{tradeAmount.currency.symbol}
</Typography>
<Box
width={16}
height={16}
ml={0.5}
borderRadius={8}
overflow='hidden'
>
<CurrencyLogo currency={tradeAmount.currency} size='16px' />
</Box>
</Box>
</Box>
<Box className={classes.summaryRow}>
<Box display='flex' alignItems='center'>
<Typography variant='body2'>Price Impact:</Typography>
<QuestionHelper text={t('priceImpactHelper')} />
</Box>
<FormattedPriceImpact priceImpact={priceImpactWithoutFee} />
</Box>
<Box className={classes.summaryRow}>
<Box display='flex' alignItems='center'>
<Typography variant='body2'>Liquidity Provider Fee:</Typography>
<QuestionHelper text={t('liquidityProviderFeeHelper')} />
</Box>
<Typography variant='body2'>
{formatTokenAmount(realizedLPFee)} {trade.inputAmount.currency.symbol}
</Typography>
</Box>
<Box className={classes.summaryRow}>
<Box display='flex' alignItems='center'>
<Typography variant='body2' style={{ marginRight: 4 }}>
Route
</Typography>
<QuestionHelper text={t('swapRouteHelper')} />
</Box>
<Box>
{trade.route.path.map((token, i, path) => {
const isLastItem: boolean = i === path.length - 1;
return (
<Box key={i} display='flex' alignItems='center'>
<Typography variant='body2'>
{token.symbol}{' '}
{// this is not to show the arrow at the end of the trade path
isLastItem ? '' : ' > '}
</Typography>
</Box>
);
})}
</Box>
</Box>
</Box>
);
}
Example #14
| 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 #15
| 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 #16
| 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 #17
| Source File: PositionCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FullPositionCard: React.FC<PositionCardProps> = ({ pair }) => {
const { account } = useActiveWeb3React();
const currency0 = unwrappedToken(pair.token0);
const currency1 = unwrappedToken(pair.token1);
const [showMore, setShowMore] = useState(false);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<Box>
<Box>
<Box>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
margin={true}
size={20}
/>
<Typography>
{!currency0 || !currency1 ? (
<Typography>Loading</Typography>
) : (
`${currency0.symbol}/${currency1.symbol}`
)}
</Typography>
</Box>
<Button onClick={() => setShowMore(!showMore)}>
{showMore ? (
<>
{' '}
Manage
<ChevronUp size='20' style={{ marginLeft: '10px' }} />
</>
) : (
<>
Manage
<ChevronDown size='20' style={{ marginLeft: '10px' }} />
</>
)}
</Button>
</Box>
{showMore && (
<Box>
<Box>
<Typography>Your pool tokens:</Typography>
<Typography>{formatTokenAmount(userPoolBalance)}</Typography>
</Box>
<Box>
<Typography>Pooled {currency0.symbol}:</Typography>
<Box>
<Typography>{formatTokenAmount(token0Deposited)}</Typography>
<CurrencyLogo
size='20px'
style={{ marginLeft: '8px' }}
currency={currency0}
/>
</Box>
</Box>
<Box>
<Typography>Pooled {currency1.symbol}:</Typography>
<Box>
<Typography>{formatTokenAmount(token1Deposited)}</Typography>
<CurrencyLogo
size='20px'
style={{ marginLeft: '8px' }}
currency={currency1}
/>
</Box>
</Box>
<Box>
<Typography>Your pool share:</Typography>
<Typography>
{poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
</Typography>
</Box>
<Button>
<a
style={{ width: '100%', textAlign: 'center' }}
href={`https://info.quickswap.exchange/account/${account}`}
target='_blank'
rel='noopener noreferrer'
>
View accrued fees and analytics
<span style={{ fontSize: '11px' }}>↗</span>
</a>
</Button>
<Box display='flex'>
<Box width='48%'>
<Link
to={`/add/${currencyId(currency0)}/${currencyId(currency1)}`}
>
Add
</Link>
</Box>
<Box width='48%'>
<Link
to={`/remove/${currencyId(currency0)}/${currencyId(currency1)}`}
>
Remove
</Link>
</Box>
</Box>
</Box>
)}
</Box>
);
}
Example #18
| Source File: PositionCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
MinimalPositionCard: React.FC<PositionCardProps> = ({
pair,
border,
showUnwrapped = false,
}) => {
const { account } = useActiveWeb3React();
const classes = useStyles();
const currency0 = showUnwrapped ? pair.token0 : unwrappedToken(pair.token0);
const currency1 = showUnwrapped ? pair.token1 : unwrappedToken(pair.token1);
const [showMore, setShowMore] = useState(false);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<Box className={classes.minimalCardWrapper} border={border}>
{userPoolBalance &&
JSBI.greaterThan(userPoolBalance.raw, JSBI.BigInt(0)) ? (
<Box>
<Typography>Your position</Typography>
<Box
mt={0.75}
display='flex'
justifyContent='space-between'
onClick={() => setShowMore(!showMore)}
>
<Box display='flex' alignItems='center'>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
margin={true}
size={20}
/>
<Typography style={{ marginLeft: 6 }}>
{currency0.symbol}/{currency1.symbol}
</Typography>
</Box>
<Typography>{formatTokenAmount(userPoolBalance)}</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>Your pool share:</Typography>
<Typography>
{poolTokenPercentage ? poolTokenPercentage.toFixed(6) + '%' : '-'}
</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>{currency0.symbol}:</Typography>
<Typography>{formatTokenAmount(token0Deposited)}</Typography>
</Box>
<Box
mt={0.75}
display='flex'
alignItems='center'
justifyContent='space-between'
>
<Typography>{currency1.symbol}:</Typography>
<Typography>{formatTokenAmount(token1Deposited)}</Typography>
</Box>
</Box>
) : (
<Typography>
<span role='img' aria-label='wizard-icon'>
⭐️
</span>{' '}
By adding liquidity you'll earn 0.25% of all trades on this pair
proportional to your share of the pool. Fees are added to the pool,
accrue in real time and can be claimed by withdrawing your liquidity.
</Typography>
)}
</Box>
);
}
Example #19
| Source File: PoolPositionCardDetails.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
PoolPositionCardDetails: React.FC<{ pair: Pair }> = ({ pair }) => {
const classes = useStyles();
const history = useHistory();
const { breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const { account } = useActiveWeb3React();
const [openRemoveModal, setOpenRemoveModal] = useState(false);
const currency0 = unwrappedToken(pair.token0);
const currency1 = unwrappedToken(pair.token1);
const userPoolBalance = useTokenBalance(
account ?? undefined,
pair.liquidityToken,
);
const totalPoolTokens = useTotalSupply(pair.liquidityToken);
const poolTokenPercentage =
!!userPoolBalance &&
!!totalPoolTokens &&
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? new Percent(userPoolBalance.raw, totalPoolTokens.raw)
: undefined;
const [token0Deposited, token1Deposited] =
!!pair &&
!!totalPoolTokens &&
!!userPoolBalance &&
// this condition is a short-circuit in the case where useTokenBalance updates sooner than useTotalSupply
JSBI.greaterThanOrEqual(totalPoolTokens.raw, userPoolBalance.raw)
? [
pair.getLiquidityValue(
pair.token0,
totalPoolTokens,
userPoolBalance,
false,
),
pair.getLiquidityValue(
pair.token1,
totalPoolTokens,
userPoolBalance,
false,
),
]
: [undefined, undefined];
return (
<>
<Box px={isMobile ? 1.5 : 3} mb={3}>
<Box className={classes.cardRow}>
<Typography variant='body2'>Your pool tokens:</Typography>
<Typography variant='body2'>
{formatTokenAmount(userPoolBalance)}
</Typography>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Pooled {currency0.symbol}:</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body2' style={{ marginRight: 10 }}>
{formatTokenAmount(token0Deposited)}
</Typography>
<CurrencyLogo size='20px' currency={currency0} />
</Box>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Pooled {currency1.symbol}:</Typography>
<Box display='flex' alignItems='center'>
<Typography variant='body2' style={{ marginRight: 10 }}>
{formatTokenAmount(token1Deposited)}
</Typography>
<CurrencyLogo size='20px' currency={currency1} />
</Box>
</Box>
<Box className={classes.cardRow}>
<Typography variant='body2'>Your pool share:</Typography>
<Typography variant='body2'>
{poolTokenPercentage
? poolTokenPercentage.toSignificant() + '%'
: '-'}
</Typography>
</Box>
<Box className={classes.poolButtonRow}>
<Button
variant='outlined'
onClick={() =>
history.push(`/analytics/pair/${pair.liquidityToken.address}`)
}
>
<Typography variant='body2'>View Analytics</Typography>
</Button>
<Button
variant='contained'
onClick={() => {
history.push(
`/pools?currency0=${currencyId(
currency0,
)}¤cy1=${currencyId(currency1)}`,
);
}}
>
<Typography variant='body2'>Add</Typography>
</Button>
<Button
variant='contained'
onClick={() => {
setOpenRemoveModal(true);
}}
>
<Typography variant='body2'>Remove</Typography>
</Button>
</Box>
</Box>
{openRemoveModal && (
<RemoveLiquidityModal
currency0={currency0}
currency1={currency1}
open={openRemoveModal}
onClose={() => setOpenRemoveModal(false)}
/>
)}
</>
);
}
Example #20
| 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 #21
| Source File: FarmCard.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
FarmCard: React.FC<{
stakingInfo: StakingInfo | DualStakingInfo;
stakingAPY: number;
isLPFarm?: boolean;
}> = ({ stakingInfo, stakingAPY, isLPFarm }) => {
const classes = useStyles();
const { palette, breakpoints } = useTheme();
const isMobile = useMediaQuery(breakpoints.down('xs'));
const [isExpandCard, setExpandCard] = useState(false);
const lpStakingInfo = stakingInfo as StakingInfo;
const dualStakingInfo = stakingInfo as DualStakingInfo;
const token0 = stakingInfo.tokens[0];
const token1 = stakingInfo.tokens[1];
const currency0 = unwrappedToken(token0);
const currency1 = unwrappedToken(token1);
const stakedAmounts = getStakedAmountStakingInfo(stakingInfo);
let apyWithFee: number | string = 0;
if (stakingAPY && stakingAPY > 0 && stakingInfo.perMonthReturnInRewards) {
apyWithFee = formatAPY(
getAPYWithFee(stakingInfo.perMonthReturnInRewards, stakingAPY),
);
}
const tvl = getTVLStaking(
stakedAmounts?.totalStakedUSD,
stakedAmounts?.totalStakedBase,
);
const lpPoolRate = getRewardRate(
lpStakingInfo.totalRewardRate,
lpStakingInfo.rewardToken,
);
const dualPoolRateA = getRewardRate(
dualStakingInfo.totalRewardRateA,
dualStakingInfo.rewardTokenA,
);
const dualPoolRateB = getRewardRate(
dualStakingInfo.totalRewardRateB,
dualStakingInfo.rewardTokenB,
);
const earnedUSDStr = isLPFarm
? getEarnedUSDLPFarm(lpStakingInfo)
: getEarnedUSDDualFarm(dualStakingInfo);
const lpRewards = lpStakingInfo.rewardTokenPrice * lpStakingInfo.rate;
const dualRewards =
dualStakingInfo.rateA * dualStakingInfo.rewardTokenAPrice +
dualStakingInfo.rateB * dualStakingInfo.rewardTokenBPrice;
const renderPool = (width: number) => (
<Box display='flex' alignItems='center' width={width}>
<DoubleCurrencyLogo
currency0={currency0}
currency1={currency1}
size={28}
/>
<Box ml={1.5}>
<Typography variant='body2'>
{currency0.symbol} / {currency1.symbol} LP
</Typography>
</Box>
</Box>
);
return (
<Box
className={cx(
classes.farmLPCard,
isExpandCard && classes.highlightedCard,
)}
>
<Box
className={classes.farmLPCardUp}
onClick={() => setExpandCard(!isExpandCard)}
>
{isMobile ? (
<>
{renderPool(isExpandCard ? 0.95 : 0.7)}
{!isExpandCard && (
<Box width={0.25}>
<Box display='flex' alignItems='center'>
<Typography variant='caption' color='textSecondary'>
APY
</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box mt={0.5} color={palette.success.main}>
<Typography variant='body2'>{apyWithFee}%</Typography>
</Box>
</Box>
)}
<Box
width={0.05}
display='flex'
justifyContent='flex-end'
color={palette.primary.main}
>
{isExpandCard ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</Box>
</>
) : (
<>
{renderPool(0.3)}
<Box width={0.2} textAlign='center'>
<Typography variant='body2'>{tvl}</Typography>
</Box>
<Box width={0.25} textAlign='center'>
<Typography variant='body2'>
${(isLPFarm ? lpRewards : dualRewards).toLocaleString()} / day
</Typography>
{isLPFarm ? (
<Typography variant='body2'>{lpPoolRate}</Typography>
) : (
<>
<Typography variant='body2'>{dualPoolRateA}</Typography>
<Typography variant='body2'>{dualPoolRateB}</Typography>
</>
)}
</Box>
<Box
width={0.15}
display='flex'
justifyContent='center'
alignItems='center'
color={palette.success.main}
>
<Typography variant='body2'>{apyWithFee}%</Typography>
<Box ml={0.5} height={16}>
<img src={CircleInfoIcon} alt={'arrow up'} />
</Box>
</Box>
<Box width={0.2} textAlign='right'>
<Typography variant='body2'>{earnedUSDStr}</Typography>
{isLPFarm ? (
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={lpStakingInfo.rewardToken}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(lpStakingInfo.earnedAmount)}
<span> {lpStakingInfo.rewardToken.symbol}</span>
</Typography>
</Box>
) : (
<>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenA)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountA)}
<span> {dualStakingInfo.rewardTokenA.symbol}</span>
</Typography>
</Box>
<Box
display='flex'
alignItems='center'
justifyContent='flex-end'
>
<CurrencyLogo
currency={unwrappedToken(dualStakingInfo.rewardTokenB)}
size='16px'
/>
<Typography variant='body2' style={{ marginLeft: 5 }}>
{formatTokenAmount(dualStakingInfo.earnedAmountB)}
<span> {dualStakingInfo.rewardTokenB.symbol}</span>
</Typography>
</Box>
</>
)}
</Box>
</>
)}
</Box>
{isExpandCard && (
<FarmCardDetails
stakingInfo={stakingInfo}
stakingAPY={stakingAPY}
isLPFarm={isLPFarm}
/>
)}
</Box>
);
}
Example #22
| Source File: SwapModalHeader.tsx From interface-v2 with GNU General Public License v3.0 | 4 votes |
|
SwapModalHeader: React.FC<SwapModalHeaderProps> = ({
trade,
allowedSlippage,
showAcceptChanges,
onAcceptChanges,
onConfirm,
}) => {
const classes = useStyles();
const slippageAdjustedAmounts = useMemo(
() => computeSlippageAdjustedAmounts(trade, allowedSlippage),
[trade, allowedSlippage],
);
const usdPrice = useUSDCPrice(trade.inputAmount.currency);
return (
<Box>
<Box mt={10} display='flex' justifyContent='center'>
<DoubleCurrencyLogo
currency0={trade.inputAmount.currency}
currency1={trade.outputAmount.currency}
size={48}
/>
</Box>
<Box className={classes.swapContent}>
<Typography variant='body1'>
Swap {formatTokenAmount(trade.inputAmount)}{' '}
{trade.inputAmount.currency.symbol} ($
{Number(usdPrice?.toSignificant()) *
Number(trade.inputAmount.toSignificant(2))}
)
</Typography>
<ArrowDownIcon />
<Typography variant='body1'>
{formatTokenAmount(trade.outputAmount)}{' '}
{trade.outputAmount.currency.symbol}
</Typography>
</Box>
{showAcceptChanges && (
<Box className={classes.priceUpdate}>
<Box>
<AlertTriangle
size={20}
style={{ marginRight: '8px', minWidth: 24 }}
/>
<Typography> Price Updated</Typography>
</Box>
<Button
style={{
padding: '.5rem',
width: 'fit-content',
fontSize: '0.825rem',
borderRadius: '12px',
}}
onClick={onAcceptChanges}
>
Accept
</Button>
</Box>
)}
<Box className={classes.transactionText}>
{trade.tradeType === TradeType.EXACT_INPUT ? (
<Typography variant='body2'>
{`Output is estimated. You will receive at least `}
{formatTokenAmount(slippageAdjustedAmounts[Field.OUTPUT])}{' '}
{trade.outputAmount.currency.symbol}
{' or the transaction will revert.'}
</Typography>
) : (
<Typography variant='body2'>
{`Input is estimated. You will sell at most `}
{formatTokenAmount(slippageAdjustedAmounts[Field.INPUT])}{' '}
{trade.inputAmount.currency.symbol}
{' or the transaction will revert.'}
</Typography>
)}
<Button onClick={onConfirm} className={classes.swapButton}>
Confirm Swap
</Button>
</Box>
</Box>
);
}
