fix: slippage and price impact ux (#3222)

cowprotocol · Feb 3, 2022 · 6e22389 · 6e22389
1 parent 8064dd8
commit 6e22389
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git a/src/lib/components/Swap/Settings/MaxSlippageSelect.tsx b/src/lib/components/Swap/Settings/MaxSlippageSelect.tsx
@@ -112,10 +112,10 @@ export default function MaxSlippageSelect() {
     const numerator = Math.floor(+custom * 100)
     if (numerator) {
       const percent = new Percent(numerator, 10_000)
-      if (percent.greaterThan(MAX_VALID_SLIPPAGE)) {
+      if (!percent.lessThan(MAX_VALID_SLIPPAGE)) {
         setWarning(WarningState.INVALID_SLIPPAGE)
         setMaxSlippage('auto')
-      } else if (percent.greaterThan(MIN_HIGH_SLIPPAGE)) {
+      } else if (!percent.lessThan(MIN_HIGH_SLIPPAGE)) {
         setWarning(WarningState.HIGH_SLIPPAGE)
         setMaxSlippage(percent)
       } else {

diff --git a/src/lib/components/Swap/Summary/Details.tsx b/src/lib/components/Swap/Summary/Details.tsx
@@ -4,13 +4,18 @@ import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { ALLOWED_PRICE_IMPACT_HIGH, ALLOWED_PRICE_IMPACT_MEDIUM } from 'constants/misc'
 import { useAtom } from 'jotai'
 import { integratorFeeAtom, MIN_HIGH_SLIPPAGE } from 'lib/state/settings'
-import { Color, ThemedText } from 'lib/theme'
+import styled, { Color, ThemedText } from 'lib/theme'
 import { useMemo } from 'react'
 import { currencyId } from 'utils/currencyId'
 import { computeRealizedPriceImpact } from 'utils/prices'
 
 import Row from '../../Row'
 
+const Value = styled.span<{ color?: Color }>`
+  color: ${({ color, theme }) => color && theme[color]};
+  white-space: nowrap;
+`
+
 interface DetailProps {
   label: string
   value: string
@@ -19,10 +24,10 @@ interface DetailProps {
 
 function Detail({ label, value, color }: DetailProps) {
   return (
-    <ThemedText.Caption color={color}>
+    <ThemedText.Caption>
       <Row gap={2}>
         <span>{label}</span>
-        <span style={{ whiteSpace: 'nowrap' }}>{value}</span>
+        <Value color={color}>{value}</Value>
       </Row>
     </ThemedText.Caption>
   )
@@ -50,9 +55,9 @@ export default function Details({ trade, allowedSlippage }: DetailsProps) {
       [
         t`Price impact`,
         `${priceImpact.toFixed(2)}%`,
-        priceImpact >= ALLOWED_PRICE_IMPACT_HIGH
+        !priceImpact.lessThan(ALLOWED_PRICE_IMPACT_HIGH)
           ? 'error'
-          : priceImpact >= ALLOWED_PRICE_IMPACT_MEDIUM
+          : !priceImpact.lessThan(ALLOWED_PRICE_IMPACT_MEDIUM)
           ? 'warning'
           : undefined,
       ],
@@ -65,7 +70,7 @@ export default function Details({ trade, allowedSlippage }: DetailsProps) {
       [
         t`Slippage tolerance`,
         `${allowedSlippage.toFixed(2)}%`,
-        allowedSlippage.greaterThan(MIN_HIGH_SLIPPAGE) && 'warning',
+        !allowedSlippage.lessThan(MIN_HIGH_SLIPPAGE) && 'warning',
       ],
     ].filter(isDetail)
 

diff --git a/src/lib/components/Swap/Summary/index.tsx b/src/lib/components/Swap/Summary/index.tsx
@@ -93,9 +93,9 @@ export function SummaryDialog({ trade, allowedSlippage, onConfirm }: SummaryDial
   const independentField = useAtomValue(independentFieldAtom)
 
   const warning = useMemo(() => {
-    if (priceImpact >= ALLOWED_PRICE_IMPACT_HIGH) return 'error'
-    if (priceImpact >= ALLOWED_PRICE_IMPACT_MEDIUM) return 'warning'
-    if (allowedSlippage.greaterThan(MIN_HIGH_SLIPPAGE)) return 'warning'
+    if (!priceImpact.lessThan(ALLOWED_PRICE_IMPACT_HIGH)) return 'error'
+    if (!priceImpact.lessThan(ALLOWED_PRICE_IMPACT_MEDIUM)) return 'warning'
+    if (!allowedSlippage.lessThan(MIN_HIGH_SLIPPAGE)) return 'warning'
     return
   }, [allowedSlippage, priceImpact])