From 0dcd5743c89fe356a288c698cf6f6924910d1c8b Mon Sep 17 00:00:00 2001
From: Moody Salem <moody.salem@gmail.com>
Date: Mon, 3 May 2021 20:05:20 -0500
Subject: [PATCH] fix price impact handling/coloring

---
 src/components/CurrencyInputPanel/index.tsx | 4 ++--
 src/pages/Swap/index.tsx                    | 5 +++--
 src/state/application/reducer.test.ts       | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
index c751da8d35..fa4a4b5715 100644
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -201,7 +201,7 @@ export default function CurrencyInputPanel({
     if (priceImpact.lessThan('0')) return theme.green1
     const severity = warningSeverity(priceImpact)
     if (severity < 1) return undefined
-    if (severity < 2) return theme.yellow1
+    if (severity < 3) return theme.yellow1
     return theme.red1
   }, [priceImpact, theme.green1, theme.red1, theme.yellow1])
 
@@ -300,7 +300,7 @@ export default function CurrencyInputPanel({
               <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
                 {fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'}
                 {priceImpact ? (
-                  <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-1).toSignificant(3)}%)</span>
+                  <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-100).toSignificant(3)}%)</span>
                 ) : null}
               </TYPE.body>
             </RowBetween>
diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx
index 89df6c7a1f..73c3fc2ba9 100644
--- a/src/pages/Swap/index.tsx
+++ b/src/pages/Swap/index.tsx
@@ -25,6 +25,7 @@ import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
 import { ArrowWrapper, BottomGrouping, Dots, SwapCallbackError, Wrapper } from '../../components/swap/styleds'
 import TradePrice from '../../components/swap/TradePrice'
 import TokenWarningModal from '../../components/TokenWarningModal'
+import { ONE_HUNDRED_PERCENT } from '../../constants'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens, useCurrency } from '../../hooks/Tokens'
 import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback'
@@ -56,7 +57,6 @@ import { isTradeBetter } from '../../utils/isTradeBetter'
 import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import SwapHeader from '../../components/swap/SwapHeader'
 
-const ONE_HUNDRED_PERCENT = new Percent(100, 100)
 function computeFiatValuePriceImpact(
   fiatValueInput: CurrencyAmount | undefined | null,
   fiatValueOutput: CurrencyAmount | undefined | null
@@ -64,7 +64,8 @@ function computeFiatValuePriceImpact(
   if (!fiatValueOutput || !fiatValueInput) return undefined
   if (!currencyEquals(fiatValueInput.currency, fiatValueOutput.currency)) return undefined
   if (JSBI.equal(fiatValueInput.raw, JSBI.BigInt(0))) return undefined
-  return ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput)).multiply(100)
+  const pct = ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput))
+  return new Percent(pct.numerator, pct.denominator)
 }
 
 export default function Swap({ history }: RouteComponentProps) {
diff --git a/src/state/application/reducer.test.ts b/src/state/application/reducer.test.ts
index c66b566328..51bed65dbf 100644
--- a/src/state/application/reducer.test.ts
+++ b/src/state/application/reducer.test.ts
@@ -24,7 +24,7 @@ describe('application reducer', () => {
       expect(typeof list[0].key).toEqual('string')
       expect(list[0].show).toEqual(true)
       expect(list[0].content).toEqual({ txn: { hash: 'abc', summary: 'test', success: true } })
-      expect(list[0].removeAfterMs).toEqual(15000)
+      expect(list[0].removeAfterMs).toEqual(25000)
     })
 
     it('replaces any existing popups with the same key', () => {
@@ -35,7 +35,7 @@ describe('application reducer', () => {
       expect(list[0].key).toEqual('abc')
       expect(list[0].show).toEqual(true)
       expect(list[0].content).toEqual({ txn: { hash: 'def', summary: 'test2', success: false } })
-      expect(list[0].removeAfterMs).toEqual(15000)
+      expect(list[0].removeAfterMs).toEqual(25000)
     })
   })