add a test for calculating slippage amounts

* fix for error token map parsings

* fix error on formatting sig figs

package.json

@@ -49,7 +49,7 @@
     "@uniswap/v2-sdk": "^1.0.9",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "1.0.0",
-    "@uniswap/v3-sdk": "^1.0.3",
+    "@uniswap/v3-sdk": "^1.0.4",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",

src/components/NavigationTabs/index.tsx

@@ -6,7 +6,7 @@ import { NavLink, Link as HistoryLink } from 'react-router-dom'
 
 import { ArrowLeft } from 'react-feather'
 import { RowBetween } from '../Row'
-import Settings from '../Settings'
+import SettingsTab from '../Settings'
 import { useDispatch } from 'react-redux'
 import { AppDispatch } from 'state'
 import { resetMintState } from 'state/mint/actions'
@@ -80,7 +80,7 @@ export function FindPoolTabs({ origin }: { origin: string }) {
           <StyledArrowLeft />
         </HistoryLink>
         <ActiveText>Import Pool</ActiveText>
-        <Settings />
+        <SettingsTab />
       </RowBetween>
     </Tabs>
   )
@@ -118,7 +118,7 @@ export function AddRemoveTabs({
         <TYPE.mediumHeader fontWeight={500} fontSize={20}>
           {creating ? 'Create a pair' : adding ? 'Add Liquidity' : 'Remove Liquidity'}
         </TYPE.mediumHeader>
-        <Settings />
+        <SettingsTab />
       </RowBetween>
     </Tabs>
   )

src/components/TransactionSettings/index.tsx

@@ -107,9 +107,9 @@ export default function SlippageTabs({ rawSlippage, setRawSlippage, deadline, se
   let slippageError: SlippageError | undefined
   if (slippageInput !== '' && !slippageInputIsValid) {
     slippageError = SlippageError.InvalidInput
-  } else if (slippageInputIsValid && rawSlippage < 50) {
+  } else if (slippageInputIsValid && rawSlippage < 5) {
     slippageError = SlippageError.RiskyLow
-  } else if (slippageInputIsValid && rawSlippage > 500) {
+  } else if (slippageInputIsValid && rawSlippage > 100) {
     slippageError = SlippageError.RiskyHigh
   } else {
     slippageError = undefined

src/components/swap/SwapHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import Settings from '../Settings'
+import SettingsTab from '../Settings'
 
 import { RowBetween, RowFixed } from '../Row'
 import { TYPE } from '../../theme'
@@ -23,7 +23,7 @@ export default function SwapHeader() {
         <RowFixed>
           {/* <TradeInfo disabled={!trade} trade={trade} /> */}
           {/* <div style={{ width: '8px' }}></div> */}
-          <Settings />
+          <SettingsTab />
         </RowFixed>
       </RowBetween>
     </StyledSwapHeader>

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -6,7 +6,6 @@ import { Text } from 'rebass'
 import { AutoColumn } from '../../components/Column'
 import CurrencyLogo from '../../components/CurrencyLogo'
 import FormattedCurrencyAmount from '../../components/FormattedCurrencyAmount'
-import QuestionHelper from '../../components/QuestionHelper'
 import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
 import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
@@ -16,7 +15,7 @@ import { usePairContract, useV2MigratorContract } from '../../hooks/useContract'
 import { NEVER_RELOAD, useSingleCallResult } from '../../state/multicall/hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { BackArrow, ExternalLink, TYPE } from '../../theme'
-import { getEtherscanLink, isAddress } from '../../utils'
+import { calculateGasMargin, getEtherscanLink, isAddress } from '../../utils'
 import { BodyWrapper } from '../AppBody'
 import { V3_MIGRATOR_ADDRESSES } from 'constants/v3'
 import { PoolState, usePool } from 'hooks/usePools'
@@ -46,6 +45,7 @@ import DoubleCurrencyLogo from 'components/DoubleLogo'
 import Badge, { BadgeVariant } from 'components/Badge'
 import { useDispatch } from 'react-redux'
 import { AppDispatch } from 'state'
+import SettingsTab from 'components/Settings'
 
 const ZERO = JSBI.BigInt(0)
 
@@ -274,7 +274,7 @@ function V2PairMigration({
 
     const deadlineToUse = signatureData?.deadline ?? deadline
 
-    const data = []
+    const data: string[] = []
 
     // permit if necessary
     if (signatureData) {
@@ -324,19 +324,24 @@ function V2PairMigration({
     )
 
     setConfirmingMigration(true)
-    migrator
-      .multicall(data)
-      .then((response: TransactionResponse) => {
-        ReactGA.event({
-          category: 'Migrate',
-          action: `${isNotUniswap ? 'SushiSwap' : 'V2'}->V3`,
-          label: `${currency0.symbol}/${currency1.symbol}`,
-        })
 
-        addTransaction(response, {
-          summary: `Migrate ${currency0.symbol}/${currency1.symbol} liquidity to V3`,
-        })
-        setPendingMigrationHash(response.hash)
+    migrator.estimateGas
+      .multicall(data)
+      .then((gasEstimate) => {
+        return migrator
+          .multicall(data, { gasLimit: calculateGasMargin(gasEstimate) })
+          .then((response: TransactionResponse) => {
+            ReactGA.event({
+              category: 'Migrate',
+              action: `${isNotUniswap ? 'SushiSwap' : 'V2'}->V3`,
+              label: `${currency0.symbol}/${currency1.symbol}`,
+            })
+
+            addTransaction(response, {
+              summary: `Migrate ${currency0.symbol}/${currency1.symbol} liquidity to V3`,
+            })
+            setPendingMigrationHash(response.hash)
+          })
       })
       .catch(() => {
         setConfirmingMigration(false)
@@ -668,9 +673,7 @@ export default function MigrateV2Pair({
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
           <BackArrow to="/migrate/v2" />
           <TYPE.mediumHeader>Migrate V2 Liquidity</TYPE.mediumHeader>
-          <div style={{ opacity: 0 }}>
-            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V2 to Uniswap V3." />
-          </div>
+          <SettingsTab />
         </AutoRow>
 
         {!account ? (

src/utils/formatTokenAmount.ts

@@ -10,11 +10,11 @@ export function formatTokenAmount(amount: TokenAmount | undefined, sigFigs: numb
     return '0'
   }
 
-  if (parseFloat(amount.toFixed(sigFigs)) < 0.0001) {
+  if (parseFloat(amount.toFixed(Math.min(sigFigs, amount.token.decimals))) < 0.0001) {
     return '<0.0001'
   }
 
-  return amount.toSignificant(sigFigs)
+  return amount.toFixed(Math.min(sigFigs, amount.token.decimals))
 }
 
 export function formatPrice(price: Price | undefined, sigFigs: number) {

src/utils/getLibrary.ts

@@ -1,17 +1,21 @@
-import { Web3Provider } from '@ethersproject/providers'
-import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
+import { Web3Provider, Network } from '@ethersproject/providers'
 
-export default function getLibrary(
-  provider: any,
-  connector?: Required<Web3ReactContextInterface>['connector']
-): Web3Provider {
-  // todo: need to add types to this function and fix the issue with latest version of ethers not able to detect network if we pass in 'any'
-  const chainId =
-    provider?.chainId ?? connector?.supportedChainIds?.length === 1 ? connector?.supportedChainIds?.[0] : undefined
-  // latest ethers version tries to detect the network which fails
-  const library = new Web3Provider(
+class WorkaroundWeb3Provider extends Web3Provider {
+  private _detectNetworkResult: Promise<Network> | null = null
+
+  async detectNetwork(): Promise<Network> {
+    return this._detectNetworkResult ?? (this._detectNetworkResult = this._uncachedDetectNetwork())
+  }
+}
+
+export default function getLibrary(provider: any): Web3Provider {
+  const library = new WorkaroundWeb3Provider(
     provider,
-    typeof chainId === 'number' ? chainId : typeof chainId === 'string' ? parseInt(chainId) : 'any'
+    typeof provider.chainId === 'number'
+      ? provider.chainId
+      : typeof provider.chainId === 'string'
+      ? parseInt(provider.chainId)
+      : 'any'
   )
   library.pollingInterval = 15000
   return library

src/utils/index.test.ts

@@ -28,11 +28,16 @@ describe('utils', () => {
   describe('#calculateSlippageAmount', () => {
     it('bounds are correct', () => {
       const tokenAmount = new TokenAmount(new Token(ChainId.MAINNET, AddressZero, 0), '100')
-      expect(() => calculateSlippageAmount(tokenAmount, new Percent(-1, 10_000))).toThrow()
+      expect(() => calculateSlippageAmount(tokenAmount, new Percent(-1, 10_000))).toThrow('Unexpected slippage')
+      expect(() => calculateSlippageAmount(tokenAmount, new Percent(10_001, 10_000))).toThrow('Unexpected slippage')
       expect(calculateSlippageAmount(tokenAmount, new Percent(0, 10_000)).map((bound) => bound.toString())).toEqual([
         '100',
         '100',
       ])
+      expect(calculateSlippageAmount(tokenAmount, new Percent(5, 100)).map((bound) => bound.toString())).toEqual([
+        '95',
+        '105',
+      ])
       expect(calculateSlippageAmount(tokenAmount, new Percent(100, 10_000)).map((bound) => bound.toString())).toEqual([
         '99',
         '101',
@@ -44,7 +49,6 @@ describe('utils', () => {
       expect(
         calculateSlippageAmount(tokenAmount, new Percent(10000, 10_000)).map((bound) => bound.toString())
       ).toEqual(['0', '200'])
-      expect(() => calculateSlippageAmount(tokenAmount, new Percent(10001, 10_000))).toThrow()
     })
   })
 

src/utils/index.ts

@@ -3,7 +3,7 @@ import { getAddress } from '@ethersproject/address'
 import { AddressZero } from '@ethersproject/constants'
 import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { BigNumber } from '@ethersproject/bignumber'
-import { ChainId, Percent, Token, CurrencyAmount, Currency, ETHER } from '@uniswap/sdk-core'
+import { ChainId, Percent, Token, CurrencyAmount, Currency, ETHER, Fraction } from '@uniswap/sdk-core'
 import { JSBI } from '@uniswap/v2-sdk'
 import { FeeAmount } from '@uniswap/v3-sdk/dist/'
 import { TokenAddressMap } from '../state/lists/hooks'
@@ -63,17 +63,10 @@ export function calculateGasMargin(value: BigNumber): BigNumber {
   return value.mul(BigNumber.from(10000).add(BigNumber.from(1000))).div(BigNumber.from(10000))
 }
 
+const ONE = new Fraction(1, 1)
 export function calculateSlippageAmount(value: CurrencyAmount, slippage: Percent): [JSBI, JSBI] {
-  if (
-    JSBI.lessThan(slippage.numerator, JSBI.BigInt(0)) ||
-    JSBI.greaterThan(slippage.numerator, JSBI.BigInt(10_000)) ||
-    !JSBI.equal(slippage.denominator, JSBI.BigInt(10_000))
-  )
-    throw new Error('Unexpected slippage')
-  return [
-    JSBI.divide(JSBI.multiply(value.raw, JSBI.subtract(JSBI.BigInt(10000), slippage.numerator)), JSBI.BigInt(10000)),
-    JSBI.divide(JSBI.multiply(value.raw, JSBI.add(JSBI.BigInt(10000), slippage.numerator)), JSBI.BigInt(10000)),
-  ]
+  if (slippage.lessThan(0) || slippage.greaterThan(ONE)) throw new Error('Unexpected slippage')
+  return [value.multiply(ONE.subtract(slippage)).quotient, value.multiply(ONE.add(slippage)).quotient]
 }
 
 // account is not optional

yarn.lock

@@ -4149,10 +4149,10 @@
     "@uniswap/v3-core" "1.0.0"
     base64-sol "1.0.1"
 
-"@uniswap/v3-sdk@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.3.tgz#8f47b5f8cc8997992811a242ef202f9a8c4797cf"
-  integrity sha512-izIrHTAXCeMhfye0nHntoAS0UTbpa8HyGSD++Zmy+kROeb2gSAcpXvnLHzRDIPxq0G4rOH0h05Y5fhHAxaXj5w==
+"@uniswap/v3-sdk@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@uniswap/v3-sdk/-/v3-sdk-1.0.4.tgz#d53a572bc3b7aeeef9f874111fbbffefdb61bbbd"
+  integrity sha512-9fpVF0j+LeXRlAp0ijkNSJ2cIHtK1NcmyzIcKHWg35NUxkrlCsxBk0RFk5LDiRINWR5bBI4cKR5V/RhXid5/xw==
   dependencies:
     "@ethersproject/abi" "^5.0.12"
     "@ethersproject/solidity" "^5.0.9"