fix price impact handling/coloring

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>

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) {

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)
     })
   })