WETH -> ETH in migrate

fix rates in migrate

fix migrate link
This commit is contained in:
Noah Zinsmeister 2021-04-30 15:12:00 -04:00
parent 3f6bf607dd
commit 0540012bb9
No known key found for this signature in database
GPG Key ID: 83022DD49188C9F2
3 changed files with 35 additions and 28 deletions

@ -2,7 +2,6 @@ import React from 'react'
import { Currency } from '@uniswap/sdk-core' import { Currency } from '@uniswap/sdk-core'
import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle' import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
import { useActiveWeb3React } from 'hooks' import { useActiveWeb3React } from 'hooks'
import { useTranslation } from 'react-i18next'
import { wrappedCurrency } from 'utils/wrappedCurrency' import { wrappedCurrency } from 'utils/wrappedCurrency'
// the order of displayed base currencies from left to right is always in sort order // the order of displayed base currencies from left to right is always in sort order
@ -16,7 +15,6 @@ export default function RateToggle({
currencyB: Currency currencyB: Currency
handleRateToggle: () => void handleRateToggle: () => void
}) { }) {
const { t } = useTranslation()
const { chainId } = useActiveWeb3React() const { chainId } = useActiveWeb3React()
const tokenA = wrappedCurrency(currencyA, chainId) const tokenA = wrappedCurrency(currencyA, chainId)
@ -27,10 +25,10 @@ export default function RateToggle({
return tokenA && tokenB ? ( return tokenA && tokenB ? (
<ToggleWrapper width="fit-content"> <ToggleWrapper width="fit-content">
<ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}> <ToggleElement isActive={isSorted} fontSize="12px" onClick={handleRateToggle}>
{isSorted ? currencyA.symbol : currencyB.symbol} {t('rate')} {isSorted ? currencyA.symbol : currencyB.symbol}
</ToggleElement> </ToggleElement>
<ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}> <ToggleElement isActive={!isSorted} fontSize="12px" onClick={handleRateToggle}>
{isSorted ? currencyB.symbol : currencyA.symbol} {t('rate')} {isSorted ? currencyB.symbol : currencyA.symbol}
</ToggleElement> </ToggleElement>
</ToggleWrapper> </ToggleWrapper>
) : null ) : null

@ -41,6 +41,7 @@ import { Contract } from '@ethersproject/contracts'
import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp' import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
import { formatTokenAmount } from 'utils/formatTokenAmount' import { formatTokenAmount } from 'utils/formatTokenAmount'
import useTheme from 'hooks/useTheme' import useTheme from 'hooks/useTheme'
import { unwrappedToken } from 'utils/wrappedCurrency'
const ZERO = JSBI.BigInt(0) const ZERO = JSBI.BigInt(0)
@ -53,28 +54,31 @@ function EmptyState({ message }: { message: string }) {
} }
function LiquidityInfo({ token0Amount, token1Amount }: { token0Amount: TokenAmount; token1Amount: TokenAmount }) { function LiquidityInfo({ token0Amount, token1Amount }: { token0Amount: TokenAmount; token1Amount: TokenAmount }) {
const currency0 = unwrappedToken(token0Amount.token)
const currency1 = unwrappedToken(token1Amount.token)
return ( return (
<> <>
<RowBetween my="1rem"> <RowBetween my="1rem">
<Text fontSize={16} fontWeight={500}> <Text fontSize={16} fontWeight={500}>
Pooled {token0Amount.token.symbol}: Pooled {currency0.symbol}:
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<FormattedCurrencyAmount currencyAmount={token0Amount} /> <FormattedCurrencyAmount currencyAmount={token0Amount} />
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={token0Amount.token} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency0} />
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
<RowBetween mb="1rem"> <RowBetween mb="1rem">
<Text fontSize={16} fontWeight={500}> <Text fontSize={16} fontWeight={500}>
Pooled {token1Amount.token.symbol}: Pooled {currency1.symbol}:
</Text> </Text>
<RowFixed> <RowFixed>
<Text fontSize={16} fontWeight={500} marginLeft={'6px'}> <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
<FormattedCurrencyAmount currencyAmount={token1Amount} /> <FormattedCurrencyAmount currencyAmount={token1Amount} />
</Text> </Text>
<CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={token1Amount.token} /> <CurrencyLogo size="20px" style={{ marginLeft: '8px' }} currency={currency1} />
</RowFixed> </RowFixed>
</RowBetween> </RowBetween>
</> </>
@ -109,6 +113,9 @@ function V2PairMigration({
const blockTimestamp = useCurrentBlockTimestamp() const blockTimestamp = useCurrentBlockTimestamp()
const [allowedSlippage] = useUserSlippageTolerance() // custom from users const [allowedSlippage] = useUserSlippageTolerance() // custom from users
const currency0 = unwrappedToken(token0)
const currency1 = unwrappedToken(token1)
// this is just getLiquidityValue with the fee off, but for the passed pair // this is just getLiquidityValue with the fee off, but for the passed pair
const token0Value = useMemo( const token0Value = useMemo(
() => new TokenAmount(token0, JSBI.divide(JSBI.multiply(pairBalance.raw, reserve0.raw), totalSupply.raw)), () => new TokenAmount(token0, JSBI.divide(JSBI.multiply(pairBalance.raw, reserve0.raw), totalSupply.raw)),
@ -295,11 +302,11 @@ function V2PairMigration({
ReactGA.event({ ReactGA.event({
category: 'Migrate', category: 'Migrate',
action: 'V2->V3', action: 'V2->V3',
label: `${token0.symbol}/${token1.symbol}`, label: `${currency0.symbol}/${currency1.symbol}`,
}) })
addTransaction(response, { addTransaction(response, {
summary: `Migrate ${token0.symbol}/${token1.symbol} liquidity to V3`, summary: `Migrate ${currency0.symbol}/${currency1.symbol} liquidity to V3`,
}) })
setPendingMigrationHash(response.hash) setPendingMigrationHash(response.hash)
}) })
@ -324,6 +331,8 @@ function V2PairMigration({
signatureData, signatureData,
addTransaction, addTransaction,
pair, pair,
currency0,
currency1,
]) ])
const isSuccessfullyMigrated = !!pendingMigrationHash && JSBI.equal(pairBalance.raw, ZERO) const isSuccessfullyMigrated = !!pendingMigrationHash && JSBI.equal(pairBalance.raw, ZERO)
@ -357,11 +366,11 @@ function V2PairMigration({
<AutoColumn gap="8px"> <AutoColumn gap="8px">
<RowBetween> <RowBetween>
<TYPE.body>V2 Price:</TYPE.body> <TYPE.body>V2 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
<TYPE.black> <TYPE.black>
{invertPrice {invertPrice
? `${v2SpotPrice?.invert()?.toSignificant(6)} ${token0.symbol} / ${token1.symbol}` ? `${v2SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
: `${v2SpotPrice?.toSignificant(6)} ${token1.symbol} / ${token0.symbol}`} : `${v2SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
</TYPE.black> </TYPE.black>
</RowBetween> </RowBetween>
</AutoColumn> </AutoColumn>
@ -376,20 +385,20 @@ function V2PairMigration({
</TYPE.body> </TYPE.body>
<AutoColumn gap="8px"> <AutoColumn gap="8px">
<RowBetween> <RowBetween>
<TYPE.body>V2 Price:</TYPE.body> <TYPE.body>V2 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
<TYPE.black> <TYPE.black>
{invertPrice {invertPrice
? `${v2SpotPrice?.invert()?.toSignificant(6)} ${token0.symbol} / ${token1.symbol}` ? `${v2SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
: `${v2SpotPrice?.toSignificant(6)} ${token1.symbol} / ${token0.symbol}`} : `${v2SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
</TYPE.black> </TYPE.black>
</RowBetween> </RowBetween>
<RowBetween> <RowBetween>
<TYPE.body>V3 Price:</TYPE.body> <TYPE.body>V3 {invertPrice ? currency1.symbol : currency0.symbol} Price:</TYPE.body>
<TYPE.black> <TYPE.black>
{invertPrice {invertPrice
? `${v3SpotPrice?.invert()?.toSignificant(6)} ${token0.symbol} / ${token1.symbol}` ? `${v3SpotPrice?.invert()?.toSignificant(6)} ${currency0.symbol}`
: `${v3SpotPrice?.toSignificant(6)} ${token1.symbol} / ${token0.symbol}`} : `${v3SpotPrice?.toSignificant(6)} ${currency1.symbol}`}
</TYPE.black> </TYPE.black>
</RowBetween> </RowBetween>
@ -406,8 +415,8 @@ function V2PairMigration({
<RowBetween> <RowBetween>
<TYPE.label>{t('selectLiquidityRange')}</TYPE.label> <TYPE.label>{t('selectLiquidityRange')}</TYPE.label>
<RateToggle <RateToggle
currencyA={invertPrice ? token1 : token0} currencyA={invertPrice ? currency1 : currency0}
currencyB={invertPrice ? token0 : token1} currencyB={invertPrice ? currency0 : currency1}
handleRateToggle={() => { handleRateToggle={() => {
onLeftRangeInput('') onLeftRangeInput('')
onRightRangeInput('') onRightRangeInput('')
@ -425,8 +434,8 @@ function V2PairMigration({
getIncrementUpper={getIncrementUpper} getIncrementUpper={getIncrementUpper}
onLeftRangeInput={onLeftRangeInput} onLeftRangeInput={onLeftRangeInput}
onRightRangeInput={onRightRangeInput} onRightRangeInput={onRightRangeInput}
currencyA={invertPrice ? token1 : token0} currencyA={invertPrice ? currency1 : currency0}
currencyB={invertPrice ? token0 : token1} currencyB={invertPrice ? currency0 : currency1}
feeAmount={feeAmount} feeAmount={feeAmount}
/> />
@ -512,10 +521,10 @@ function V2PairMigration({
) : null} ) : null}
</LightCard> </LightCard>
<TYPE.darkGray style={{ textAlign: 'center' }}> <TYPE.darkGray style={{ textAlign: 'center' }}>
{`Your Uniswap V2 ${invertPrice ? token0?.symbol : token1?.symbol} / ${ {`Your Uniswap V2 ${invertPrice ? currency0?.symbol : currency1?.symbol} / ${
invertPrice ? token1?.symbol : token0?.symbol invertPrice ? currency1?.symbol : currency0?.symbol
} liquidity tokens will become a Uniswap V3 ${invertPrice ? token0?.symbol : token1?.symbol} / ${ } liquidity tokens will become a Uniswap V3 ${invertPrice ? currency0?.symbol : currency1?.symbol} / ${
invertPrice ? token1?.symbol : token0?.symbol invertPrice ? currency1?.symbol : currency0?.symbol
} NFT.`} } NFT.`}
</TYPE.darkGray> </TYPE.darkGray>
</AutoColumn> </AutoColumn>

@ -113,7 +113,7 @@ export default function Pool() {
{t('Migrate Liquidity')} {t('Migrate Liquidity')}
</MenuItem> </MenuItem>
), ),
link: '/#/migrate/v2', link: '/migrate/v2',
external: false, external: false,
}, },
{ {