fix: prevent error if user selects ETH and WETH in add liquidity (#2112)

* fix: prevent error if user selects ETH and WETH in add liquidity

fixes https://github.com/Uniswap/uniswap-interface/issues/1763

* linting error

* revert changes to Tokens.ts
This commit is contained in:
Moody Salem 2021-07-26 11:08:15 -05:00 committed by GitHub
parent 80b3aa9e61
commit 718003b6f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1,4 +1,4 @@
import { useCallback, useContext, useEffect, useMemo, useState } from 'react' import { useCallback, useContext, useEffect, useState } from 'react'
import { TransactionResponse } from '@ethersproject/providers' import { TransactionResponse } from '@ethersproject/providers'
import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core' import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
import { AlertTriangle } from 'react-feather' import { AlertTriangle } from 'react-feather'
@ -101,16 +101,11 @@ export default function AddLiquidity({
? parseFloat(feeAmountFromUrl) ? parseFloat(feeAmountFromUrl)
: undefined : undefined
const currencyA = useCurrency(currencyIdA) const baseCurrency = useCurrency(currencyIdA)
const currencyB = useCurrency(currencyIdB) const currencyB = useCurrency(currencyIdB)
// prevent an error if they input ETH/WETH
// keep track for UI display purposes of user selected base currency const quoteCurrency =
const baseCurrency = currencyA baseCurrency && currencyB && baseCurrency.wrapped.equals(currencyB.wrapped) ? undefined : currencyB
const quoteCurrency = useMemo(
() =>
currencyA && currencyB && baseCurrency ? (baseCurrency.equals(currencyA) ? currencyB : currencyA) : undefined,
[currencyA, currencyB, baseCurrency]
)
// mint state // mint state
const { independentField, typedValue, startPriceTypedValue } = useV3MintState() const { independentField, typedValue, startPriceTypedValue } = useV3MintState()
@ -135,8 +130,8 @@ export default function AddLiquidity({
invertPrice, invertPrice,
ticksAtLimit, ticksAtLimit,
} = useV3DerivedMintInfo( } = useV3DerivedMintInfo(
currencyA ?? undefined, baseCurrency ?? undefined,
currencyB ?? undefined, quoteCurrency ?? undefined,
feeAmount, feeAmount,
baseCurrency ?? undefined, baseCurrency ?? undefined,
existingPosition existingPosition
@ -154,7 +149,7 @@ export default function AddLiquidity({
// capital efficiency warning // capital efficiency warning
const [showCapitalEfficiencyWarning, setShowCapitalEfficiencyWarning] = useState(false) const [showCapitalEfficiencyWarning, setShowCapitalEfficiencyWarning] = useState(false)
useEffect(() => setShowCapitalEfficiencyWarning(false), [currencyA, currencyB, feeAmount]) useEffect(() => setShowCapitalEfficiencyWarning(false), [baseCurrency, quoteCurrency, feeAmount])
// txn values // txn values
const deadline = useTransactionDeadline() // custom from users settings const deadline = useTransactionDeadline() // custom from users settings
@ -213,7 +208,7 @@ export default function AddLiquidity({
async function onCreate() { async function onCreate() {
if (!chainId || !library) return if (!chainId || !library) return
if (!positionManager || !currencyA || !currencyB) { if (!positionManager || !baseCurrency || !quoteCurrency) {
return return
} }
@ -242,7 +237,7 @@ export default function AddLiquidity({
.then((response: TransactionResponse) => { .then((response: TransactionResponse) => {
setAttemptingTxn(false) setAttemptingTxn(false)
addTransaction(response, { addTransaction(response, {
summary: t`Create ${currencyA?.symbol}/${currencyB?.symbol} V3 pool`, summary: t`Create ${baseCurrency?.symbol}/${quoteCurrency?.symbol} V3 pool`,
}) })
// dont set txn hash as we dont want submitted txn screen for create // dont set txn hash as we dont want submitted txn screen for create
ReactGA.event({ ReactGA.event({
@ -268,12 +263,12 @@ export default function AddLiquidity({
async function onAdd() { async function onAdd() {
if (!chainId || !library || !account) return if (!chainId || !library || !account) return
if (!positionManager || !currencyA || !currencyB) { if (!positionManager || !baseCurrency || !quoteCurrency) {
return return
} }
if (position && account && deadline) { if (position && account && deadline) {
const useNative = currencyA.isNative ? currencyA : currencyB.isNative ? currencyB : undefined const useNative = baseCurrency.isNative ? baseCurrency : quoteCurrency.isNative ? quoteCurrency : undefined
const { calldata, value } = const { calldata, value } =
hasExistingPosition && tokenId hasExistingPosition && tokenId
? NonfungiblePositionManager.addCallParameters(position, { ? NonfungiblePositionManager.addCallParameters(position, {
@ -338,8 +333,8 @@ export default function AddLiquidity({
setAttemptingTxn(false) setAttemptingTxn(false)
addTransaction(response, { addTransaction(response, {
summary: noLiquidity summary: noLiquidity
? t`Create pool and add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity` ? t`Create pool and add ${baseCurrency?.symbol}/${quoteCurrency?.symbol} V3 liquidity`
: t`Add ${currencyA?.symbol}/${currencyB?.symbol} V3 liquidity`, : t`Add ${baseCurrency?.symbol}/${quoteCurrency?.symbol} V3 liquidity`,
}) })
setTxHash(response.hash) setTxHash(response.hash)
ReactGA.event({ ReactGA.event({
@ -663,11 +658,11 @@ export default function AddLiquidity({
</RowBetween> </RowBetween>
<FeeSelector <FeeSelector
disabled={!currencyB || !currencyA} disabled={!quoteCurrency || !baseCurrency}
feeAmount={feeAmount} feeAmount={feeAmount}
handleFeePoolSelect={handleFeePoolSelect} handleFeePoolSelect={handleFeePoolSelect}
currencyA={currencyA ?? undefined} currencyA={baseCurrency ?? undefined}
currencyB={currencyB ?? undefined} currencyB={quoteCurrency ?? undefined}
/> />
</AutoColumn>{' '} </AutoColumn>{' '}
</> </>