update to latest formatting logic

nits

package.json

@@ -49,7 +49,7 @@
     "@uniswap/v2-sdk": "^1.0.9",
     "@uniswap/v3-core": "^1.0.0-rc.2",
     "@uniswap/v3-periphery": "^1.0.0-beta.20",
-    "@uniswap/v3-sdk": "^1.0.0-alpha.27",
+    "@uniswap/v3-sdk": "^1.0.0-alpha.28",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",

src/components/PositionPreview/index.tsx

-import React, { useState, useCallback, useMemo } from 'react'
+import React, { useState, useCallback } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import { DarkCard, DarkGreyCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -21,12 +21,10 @@ export const PositionPreview = ({ position, title }: { position: Position; title
   const sorted = baseCurrency === currency0
   const quoteCurrency = sorted ? currency1 : currency0
 
-  const quotePrice = useMemo(() => {
-    return sorted ? position.pool.priceOf(position.pool.token1) : position.pool.priceOf(position.pool.token0)
-  }, [sorted, position.pool])
+  const price = sorted ? position.pool.priceOf(position.pool.token0) : position.pool.priceOf(position.pool.token1)
 
-  const priceLower = sorted ? position.token0PriceUpper.invert() : position.token0PriceLower
-  const priceUpper = sorted ? position.token0PriceLower.invert() : position.token0PriceUpper
+  const priceLower = sorted ? position.token0PriceLower : position.token0PriceUpper.invert()
+  const priceUpper = sorted ? position.token0PriceUpper : position.token0PriceLower.invert()
 
   const handleRateChange = useCallback(() => {
     setBaseCurrency(quoteCurrency)
@@ -38,8 +36,8 @@ export const PositionPreview = ({ position, title }: { position: Position; title
         <RowBetween>
           {title ? <TYPE.main>{title}</TYPE.main> : <div />}
           <RateToggle
-            currencyA={sorted ? currency1 : currency0}
-            currencyB={sorted ? currency0 : currency1}
+            currencyA={sorted ? currency0 : currency1}
+            currencyB={sorted ? currency1 : currency0}
             handleRateToggle={handleRateChange}
           />
         </RowBetween>
@@ -68,14 +66,12 @@ export const PositionPreview = ({ position, title }: { position: Position; title
         </RowBetween>
         <RowBetween>
           <TYPE.label>Current Price</TYPE.label>
-          <TYPE.label>{`1 ${quoteCurrency?.symbol} = ${quotePrice.toSignificant(6)} ${
-            baseCurrency?.symbol
-          }`}</TYPE.label>
+          <TYPE.label>{`${price.toSignificant(6)} ${quoteCurrency?.symbol} = 1 ${baseCurrency?.symbol}`}</TYPE.label>
         </RowBetween>
         <RowBetween>
           <DarkCard width="46%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Min price</TYPE.main>
+              <TYPE.main fontSize="12px">Lower</TYPE.main>
               <TYPE.label textAlign="center">{`${priceLower.toSignificant(4)}`}</TYPE.label>
               <TYPE.main
                 textAlign="center"
@@ -88,7 +84,7 @@ export const PositionPreview = ({ position, title }: { position: Position; title
           </TYPE.main>
           <DarkCard width="46%" padding="8px">
             <AutoColumn gap="4px" justify="center">
-              <TYPE.main fontSize="12px">Max price</TYPE.main>
+              <TYPE.main fontSize="12px">Upper</TYPE.main>
               <TYPE.label textAlign="center">{`${priceUpper.toSignificant(4)}`}</TYPE.label>
               <TYPE.main
                 textAlign="center"

src/pages/AddLiquidity/index.tsx

@@ -190,13 +190,13 @@ export default function AddLiquidity({
     if (position && account && deadline && fractionalizedTolerance) {
       const { calldata, value } =
         hasExistingPosition && tokenId
-          ? NonfungiblePositionManager.increaseCallParameters(position, {
+          ? NonfungiblePositionManager.addCallParameters(position, {
               tokenId,
               slippageTolerance: fractionalizedTolerance,
               deadline: deadline.toString(),
               useEther: currencyA === ETHER || currencyB === ETHER,
             })
-          : NonfungiblePositionManager.increaseCallParameters(position, {
+          : NonfungiblePositionManager.addCallParameters(position, {
               slippageTolerance: fractionalizedTolerance,
               recipient: account,
               deadline: deadline.toString(),
@@ -467,9 +467,8 @@ export default function AddLiquidity({
                             <TYPE.main>Starting Price</TYPE.main>
                             {price ? (
                               <TYPE.main>
-                                1 {currencyA?.symbol} ={' '}
                                 {invertPrice ? price?.invert()?.toSignificant(8) : price?.toSignificant(8)}{' '}
-                                {currencyB?.symbol}
+                                {currencyB?.symbol} = 1 {currencyA?.symbol}
                               </TYPE.main>
                             ) : (
                               '-'

src/pages/Pool/PositionPage.tsx

 import React, { useCallback, useMemo, useState } from 'react'
-import { Pool, Position } from '@uniswap/v3-sdk'
+import { NonfungiblePositionManager, Pool, Position } from '@uniswap/v3-sdk'
 import { PoolState, usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
 import { useV3PositionFromTokenId } from 'hooks/useV3Positions'
@@ -22,10 +22,9 @@ import { currencyId } from 'utils/currencyId'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
 import { useV3PositionFees } from 'hooks/useV3PositionFees'
 import { BigNumber } from '@ethersproject/bignumber'
-import { WETH9, Currency } from '@uniswap/sdk-core'
+import { WETH9, Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { useActiveWeb3React } from 'hooks'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
-import { UINT128MAX } from '../RemoveLiquidity/V3'
 import { useIsTransactionPending, useTransactionAdder } from 'state/transactions/hooks'
 import ReactGA from 'react-ga'
 import { TransactionResponse } from '@ethersproject/providers'
@@ -130,7 +129,7 @@ export function PositionPage({
   },
 }: RouteComponentProps<{ tokenId?: string }>) {
   const { t } = useTranslation()
-  const { chainId, account } = useActiveWeb3React()
+  const { chainId, account, library } = useActiveWeb3React()
 
   const parsedTokenId = tokenIdFromUrl ? BigNumber.from(tokenIdFromUrl) : undefined
   const { loading, position: positionDetails } = useV3PositionFromTokenId(parsedTokenId)
@@ -181,50 +180,36 @@ export function PositionPage({
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
   const collect = useCallback(() => {
-    if (!chainId || !feeValue0 || !feeValue1 || !positionManager || !account || !tokenId) return
+    if (!chainId || !feeValue0 || !feeValue1 || !positionManager || !account || !tokenId || !library) return
 
     setCollecting(true)
 
-    const involvesWETH = feeValue0.token.equals(WETH9[chainId]) || feeValue1.token.equals(WETH9[chainId])
-
-    const data: string[] = []
-
-    // collect, hard-coding ETH collection for now
-    data.push(
-      positionManager.interface.encodeFunctionData('collect', [
-        {
-          tokenId,
-          recipient: involvesWETH ? positionManager.address : account,
-          amount0Max: UINT128MAX,
-          amount1Max: UINT128MAX,
-        },
-      ])
-    )
-
-    if (involvesWETH) {
-      // unwrap
-      data.push(
-        positionManager.interface.encodeFunctionData('unwrapWETH9', [
-          `0x${(feeValue0.token.equals(WETH9[chainId]) ? feeValue0.raw : feeValue1.raw).toString(16)}`,
-          account,
-        ])
-      )
-
-      // sweep
-      data.push(
-        positionManager.interface.encodeFunctionData('sweepToken', [
-          feeValue0.token.equals(WETH9[chainId]) ? feeValue1.token.address : feeValue0.token.address,
-          `0x${(feeValue0.token.equals(WETH9[chainId]) ? feeValue1.raw : feeValue0.raw).toString(16)}`,
-          account,
-        ])
-      )
+    const { calldata, value } = NonfungiblePositionManager.collectCallParameters({
+      tokenId: tokenId.toString(),
+      expectedCurrencyOwed0: feeValue0.token.equals(WETH9[chainId]) ? CurrencyAmount.ether(feeValue0.raw) : feeValue0,
+      expectedCurrencyOwed1: feeValue1.token.equals(WETH9[chainId]) ? CurrencyAmount.ether(feeValue1.raw) : feeValue1,
+      recipient: account,
+      nonfungiblePositionManagerAddressOverride: positionManager.address,
+    })
+
+    const txn = {
+      to: positionManager.address,
+      data: calldata,
+      value,
     }
 
-    positionManager.estimateGas
-      .multicall(data)
-      .then(async (estimate) => {
-        return positionManager
-          .multicall(data, { gasLimit: calculateGasMargin(estimate) })
+    library
+      .getSigner()
+      .estimateGas(txn)
+      .then((estimate) => {
+        const newTxn = {
+          ...txn,
+          gasLimit: calculateGasMargin(estimate),
+        }
+
+        return library
+          .getSigner()
+          .sendTransaction(newTxn)
           .then((response: TransactionResponse) => {
             setCollectMigrationHash(response.hash)
             setCollecting(false)
@@ -244,7 +229,7 @@ export function PositionPage({
         setCollecting(false)
         console.error(error)
       })
-  }, [chainId, feeValue0, feeValue1, positionManager, account, tokenId, addTransaction])
+  }, [chainId, feeValue0, feeValue1, positionManager, account, tokenId, addTransaction, library])
 
   return loading || poolState === PoolState.LOADING || !feeAmount ? (
     <LoadingRows>

src/pages/RemoveLiquidity/V3.tsx

@@ -22,7 +22,7 @@ import ReactGA from 'react-ga'
 import { useActiveWeb3React } from 'hooks'
 import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from 'state/transactions/hooks'
-import { WETH9, Percent } from '@uniswap/sdk-core'
+import { WETH9, Percent, CurrencyAmount } from '@uniswap/sdk-core'
 import { TYPE } from 'theme'
 import styled from 'styled-components'
 import { Wrapper, SmallMaxButton } from './styled'
@@ -119,16 +119,21 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
       return
     }
 
-    const involvesWETH = liquidityValue0.token.equals(WETH9[chainId]) || liquidityValue1.token.equals(WETH9[chainId])
-
-    const { calldata, value } = NonfungiblePositionManager.decreaseCallParameters(positionSDK, {
+    const { calldata, value } = NonfungiblePositionManager.removeCallParameters(positionSDK, {
       tokenId: tokenId.toString(),
       liquidityPercentage,
       slippageTolerance: new Percent(JSBI.BigInt(allowedSlippage), BIPS_BASE),
-      recipient: account,
       deadline: deadline.toString(),
-      receiveEther: involvesWETH,
-      nonfungiblePositionManagerAddressOverride: positionManager.address,
+      collectOptions: {
+        expectedCurrencyOwed0: liquidityValue0.token.equals(WETH9[chainId])
+          ? CurrencyAmount.ether(feeValue0.raw)
+          : feeValue0,
+        expectedCurrencyOwed1: liquidityValue1.token.equals(WETH9[chainId])
+          ? CurrencyAmount.ether(feeValue1.raw)
+          : feeValue1,
+        recipient: account,
+        nonfungiblePositionManagerAddressOverride: positionManager.address,
+      },
     })
 
     const txn = {
@@ -215,7 +220,7 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         <TYPE.label margin="0 10px" opacity={'0.4'}>
           {' > '}
         </TYPE.label>
-        <TYPE.label>{liquidityPercentage?.equalTo(0) ? 'Collect Fees' : 'Remove Liquidity'}</TYPE.label>
+        <TYPE.label>Remove Liquidity</TYPE.label>
       </AutoRow>
       <AppBody>
         <Wrapper>
@@ -306,8 +311,8 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
               </LightCard>
               <div style={{ display: 'flex' }}>
                 <AutoColumn gap="12px" style={{ flex: '1' }}>
-                  <ButtonConfirmed confirmed={false} disabled={!liquidityValue0} onClick={burn}>
-                    {error ?? liquidityPercentage?.equalTo(0) ? 'Collect Fees' : 'Remove Liquidity'}
+                  <ButtonConfirmed confirmed={false} disabled={percent === 0 || !liquidityValue0} onClick={burn}>
+                    {error ?? 'Remove Liquidity'}
                   </ButtonConfirmed>
                 </AutoColumn>
               </div>

src/state/burn/v3/hooks.ts

@@ -67,7 +67,7 @@ export function useDerivedV3BurnInfo(
     error = 'Connect Wallet'
   }
   if (percent === 0) {
-    error = error ?? 'Enter an percent'
+    error = error ?? 'Enter a percent'
   }
   return {
     position: positionSDK,

yarn.lock

@@ -4158,10 +4158,10 @@
     "@uniswap/v2-core" "1.0.1"
     "@uniswap/v3-core" "1.0.0-rc.2"
 
-"@uniswap/v3-sdk@^1.0.0-alpha.27":
-  version "1.0.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.0-alpha.27.tgz#2258b36f9f21cb23c7aa78fc89066a2a2dc429a7"
-  integrity sha512-xR+zEfR0lljREwAbejF4lvKXK2ZpVUjvbEMNngle3rb+oYGJxzzJgcSa4lw8Y2uo91w+gvUcVbO69bCu62IRHQ==
+"@uniswap/v3-sdk@^1.0.0-alpha.28":
+  version "1.0.0-alpha.28"
+  resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.0-alpha.28.tgz#5a8187d39ed216a4907533bafd5aaa48a5b7e72a"
+  integrity sha512-4PD2RFGCu6RrKKeSbeszl+fTRerf+eFKXezKbrM7dqsqrjXuy5E5uh0DdHnsZzcqfhz2mQQtih4JJ9zgorrPeA==
   dependencies:
     "@ethersproject/abi" "^5.0.12"
     "@ethersproject/solidity" "^5.0.9"