Change slippage calculation in trade page as discussed (#756)

* Change slippage calculation in trade page as discussed

* Revert test change

* Fix the missing import

package.json

@@ -16,7 +16,7 @@
     "@reach/dialog": "^0.2.8",
     "@reach/tooltip": "^0.2.0",
     "@reduxjs/toolkit": "^1.3.5",
-    "@uniswap/sdk": "^2.0.3",
+    "@uniswap/sdk": "^2.0.4",
     "@uniswap/v2-core": "1.0.0",
     "@uniswap/v2-periphery": "1.0.0-beta.0",
     "@web3-react/core": "^6.0.9",

src/components/ExchangePage/index.tsx

@@ -28,8 +28,8 @@ import {
   calculateGasMargin,
   getEtherscanLink,
   getRouterContract,
+  basisPointsToPercent,
   QueryParams,
-  calculateSlippageAmount,
   getSigner
 } from '../../utils'
 import Copy from '../AccountDetails/Copy'
@@ -339,16 +339,11 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
 
   const slippageAdjustedAmounts: { [field: number]: TokenAmount } = {
     [independentField]: parsedAmounts[independentField],
-    [dependentField]: parsedAmounts[dependentField]
+    [dependentField]:
+      parsedAmounts[dependentField] && trade
         ? tradeType === TradeType.EXACT_INPUT
-        ? new TokenAmount(
-            tokens[dependentField],
-            calculateSlippageAmount(parsedAmounts[dependentField], allowedSlippage)[0]
-          )
-        : new TokenAmount(
-            tokens[dependentField],
-            calculateSlippageAmount(parsedAmounts[dependentField], allowedSlippage)[1]
-          )
+          ? trade.minimumAmountOut(basisPointsToPercent(allowedSlippage))
+          : trade.maximumAmountIn(basisPointsToPercent(allowedSlippage))
         : undefined
   }
 
@@ -1307,7 +1302,7 @@ function ExchangePage({ sendingInput = false, history, params }: ExchangePagePro
                 <TYPE.black fontWeight={400} fontSize={14} color={theme.text2}>
                   Set slippage tolerance
                 </TYPE.black>
-                <QuestionHelper text="Your transaction will revert if the price changes more than this amount after you submit your trade." />
+                <QuestionHelper text="Your transaction will revert if the execution price changes by more than this amount after you submit your trade." />
               </RowFixed>
               <SlippageTabs
                 rawSlippage={allowedSlippage}

src/utils/index.ts

@@ -11,7 +11,7 @@ import { ROUTER_ADDRESS, SUPPORTED_THEMES } from '../constants'
 
 import ERC20_ABI from '../constants/abis/erc20.json'
 import ERC20_BYTES32_ABI from '../constants/abis/erc20_bytes32.json'
-import { JSBI, TokenAmount } from '@uniswap/sdk'
+import { JSBI, Percent, TokenAmount } from '@uniswap/sdk'
 
 export function isAddress(value: any): string | false {
   try {
@@ -107,6 +107,11 @@ export function calculateGasMargin(value: BigNumber): BigNumber {
   return value.mul(BigNumber.from(10000).add(BigNumber.from(1000))).div(BigNumber.from(10000)) // add 10%
 }
 
+// converts a basis points value to a sdk percent
+export function basisPointsToPercent(num: number): Percent {
+  return new Percent(JSBI.BigInt(num), JSBI.BigInt(10000))
+}
+
 export function calculateSlippageAmount(value: TokenAmount, slippage: number): [JSBI, JSBI] {
   if (slippage < 0 || slippage > 10000) {
     throw Error(`Unexpected slippage value: ${slippage}`)

yarn.lock

@@ -3092,10 +3092,10 @@
   resolved "https://registry.yarnpkg.com/@uniswap/lib/-/lib-1.1.1.tgz#0afd29601846c16e5d082866cbb24a9e0758e6bc"
   integrity sha512-2yK7sLpKIT91TiS5sewHtOa7YuM8IuBXVl4GZv2jZFys4D2sY7K5vZh6MqD25TPA95Od+0YzCVq6cTF2IKrOmg==
 
-"@uniswap/sdk@^2.0.3":
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@uniswap/sdk/-/sdk-2.0.3.tgz#a9ec8059d40d8ccd49183938bec5f194018336af"
-  integrity sha512-Re2fFehHtA8KBAD+PxUEah94Rgtm4A516jP+AcGiJ5dVUp8MzkR59RMqoEW6NX4lR8calwl9YwKOhnmLiUY9jQ==
+"@uniswap/sdk@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@uniswap/sdk/-/sdk-2.0.4.tgz#19392e166e8306c26809d83d03ad06b8bcf91f95"
+  integrity sha512-5M0ov0orjoCnLBy1TycxQjJdWLnxhM2ChZPRIipI8c0S1RtRchMHNmRlEdyfmIeBCvyjse4OqEF30DxR4ZL6dg==
   dependencies:
     "@ethersproject/address" "^5.0.0-beta.134"
     "@ethersproject/contracts" "^5.0.0-beta.143"