fix: wrong low slp setting message (#2601)

KyberNetwork · Feb 24, 2025 · 80088c1 · 80088c1
1 parent 16e53c9
commit 80088c1
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 28 deletions.
diff --git a/src/components/SwapForm/SlippageSetting.tsx b/src/components/SwapForm/SlippageSetting.tsx
@@ -1,4 +1,4 @@
-import { Trans, t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { rgba } from 'polished'
 import { ReactNode, useMemo, useState } from 'react'
 import { Flex, Text } from 'rebass'
@@ -7,12 +7,12 @@ import styled, { keyframes } from 'styled-components'
 import SlippageControl from 'components/SlippageControl'
 import SlippageWarningNote from 'components/SlippageWarningNote'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
-import { DEFAULT_SLIPPAGES, DEFAULT_SLIPPAGES_HIGH_VOTALITY, PAIR_CATEGORY } from 'constants/index'
+import { DEFAULT_SLIPPAGES, DEFAULT_SLIPPAGES_HIGH_VOTALITY } from 'constants/index'
 import useTheme from 'hooks/useTheme'
 import { useDefaultSlippageByPair, usePairCategory } from 'state/swap/hooks'
 import { useDegenModeManager, useSlippageSettingByPage } from 'state/user/hooks'
 import { ExternalLink } from 'theme'
-import { checkWarningSlippage, formatSlippage } from 'utils/slippage'
+import { SLIPPAGE_STATUS, SLIPPAGE_WARNING_MESSAGES, checkRangeSlippage, formatSlippage } from 'utils/slippage'
 
 const highlight = keyframes`
   0% {
@@ -64,7 +64,10 @@ const SlippageSetting = ({ rightComponent, tooltip }: Props) => {
 
   const pairCategory = usePairCategory()
   const defaultSlp = useDefaultSlippageByPair()
-  const isWarningSlippage = checkWarningSlippage(rawSlippage, pairCategory)
+  const slippageStatus = checkRangeSlippage(rawSlippage, pairCategory)
+  const isWarningSlippage = slippageStatus !== SLIPPAGE_STATUS.NORMAL
+
+  const msg = SLIPPAGE_WARNING_MESSAGES[slippageStatus]?.[pairCategory] || ''
 
   const options = useMemo(
     () => (pairCategory === 'highVolatilityPair' ? DEFAULT_SLIPPAGES_HIGH_VOTALITY : DEFAULT_SLIPPAGES),
@@ -142,19 +145,7 @@ const SlippageSetting = ({ rightComponent, tooltip }: Props) => {
                 borderBottom: isWarningSlippage ? `1px dashed ${theme.warning}` : 'none',
               }}
             >
-              <MouseoverTooltip
-                text={
-                  isWarningSlippage
-                    ? pairCategory === PAIR_CATEGORY.STABLE
-                      ? t`Your slippage setting might be high compared to typical stable pair trades. Consider adjusting it to reduce the risk of front-running.`
-                      : pairCategory === PAIR_CATEGORY.CORRELATED
-                      ? t`Your slippage setting might be high compared with other similar trades. You might want to adjust it to avoid potential front-running.`
-                      : t`Your slippage setting might be high. You might want to adjust it to avoid potential front-running.`
-                    : ''
-                }
-              >
-                {formatSlippage(rawSlippage)}
-              </MouseoverTooltip>
+              <MouseoverTooltip text={`Your slippage ${msg}`}>{formatSlippage(rawSlippage)}</MouseoverTooltip>
             </Text>
 
             <DropdownIcon data-flip={expanded} data-highlight={!expanded && defaultSlp !== rawSlippage}>

diff --git a/src/components/swapv2/SwapSettingsPanel/SlippageSetting.tsx b/src/components/swapv2/SwapSettingsPanel/SlippageSetting.tsx
@@ -1,17 +1,17 @@
-import { Trans, t } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import React, { useMemo } from 'react'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import SlippageControl from 'components/SlippageControl'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import PinButton from 'components/swapv2/SwapSettingsPanel/PinButton'
-import { DEFAULT_SLIPPAGES, DEFAULT_SLIPPAGES_HIGH_VOTALITY, PAIR_CATEGORY } from 'constants/index'
+import { DEFAULT_SLIPPAGES, DEFAULT_SLIPPAGES_HIGH_VOTALITY } from 'constants/index'
 import useTheme from 'hooks/useTheme'
 import { usePairCategory } from 'state/swap/hooks'
 import { useSlippageSettingByPage } from 'state/user/hooks'
 import { ExternalLink } from 'theme'
-import { SLIPPAGE_STATUS, checkRangeSlippage } from 'utils/slippage'
+import { SLIPPAGE_STATUS, SLIPPAGE_WARNING_MESSAGES, checkRangeSlippage } from 'utils/slippage'
 
 const Message = styled.div`
   font-size: 12px;
@@ -43,6 +43,7 @@ const SlippageSetting: React.FC<Props> = ({ shouldShowPinButton = true }) => {
 
   const slippageStatus = checkRangeSlippage(rawSlippage, cat)
   const isWarning = slippageStatus !== SLIPPAGE_STATUS.NORMAL
+  const msg = SLIPPAGE_WARNING_MESSAGES[slippageStatus]?.[cat] || ''
   const theme = useTheme()
 
   return (
@@ -88,13 +89,7 @@ const SlippageSetting: React.FC<Props> = ({ shouldShowPinButton = true }) => {
 
       {isWarning && (
         <Message data-warning={true} data-error={false}>
-          {slippageStatus === SLIPPAGE_STATUS.HIGH
-            ? cat === PAIR_CATEGORY.STABLE
-              ? t`Your slippage setting might be high compared to typical stable pair trades. Consider adjusting it to reduce the risk of front-running.`
-              : cat === PAIR_CATEGORY.CORRELATED
-              ? t`Your slippage setting might be high compared with other similar trades. You might want to adjust it to avoid potential front-running.`
-              : t`Your slippage setting might be high. You might want to adjust it to avoid potential front-running.`
-            : t`Slippage is low. Your transaction may fail.`}
+          `Your slippage ${msg}`
         </Message>
       )}
     </Flex>

diff --git a/src/utils/slippage.ts b/src/utils/slippage.ts
@@ -80,7 +80,7 @@ export const formatSlippage = (slp: number, withPercent = true) => {
   return text
 }
 
-export const SLIPPAGE_WARNING_MESSAGES = {
+export const SLIPPAGE_WARNING_MESSAGES: { [key: string]: { [key: string]: string } } = {
   [SLIPPAGE_STATUS.LOW]: {
     [PAIR_CATEGORY.HIGH_VOLATILITY]: 'is quite low and may cause failed transactions in volatile markets.',
     [PAIR_CATEGORY.EXOTIC]: 'is quite low and may cause failed transactions in highly volatile markets.',