feat: adjust slp for correlated-pair (#2500)

* feat: adjust slp for correlated-pair

* feat: adjust default slp

* chore: add correlated pair config

src/components/ElasticZap/QuickZap.tsx

@@ -523,7 +523,7 @@ function QuickZapModal({ isOpen, onDismiss, poolAddress, tokenId, expectedChainI
                 )}
 
                 <div style={{ margin: '20px -8px' }}>
-                  <SlippageSettingGroup isWrapOrUnwrap={false} isStablePairSwap={false} />
+                  <SlippageSettingGroup isWrapOrUnwrap={false} isStablePairSwap={false} isCorrelatedPair={false} />
                 </div>
 
                 <ZapDetail zapLoading={zapLoading} zapDetail={zapDetail} />

src/components/ProAmm/ProAmmPriceRangeConfirm.tsx

@@ -67,7 +67,7 @@ export default function ProAmmPriceRangeConfirm({
   }, [quoteCurrency])
 
   const [allowedSlippage] = useUserSlippageTolerance()
-  const isWarningSlippage = checkWarningSlippage(allowedSlippage, false)
+  const isWarningSlippage = checkWarningSlippage(allowedSlippage, false, false)
 
   const baseSymbol = baseCurrency?.symbol
   const quoteSymbol = quoteCurrency?.symbol

src/components/SlippageWarningNote/index.tsx

@@ -9,6 +9,7 @@ import { SLIPPAGE_STATUS, checkRangeSlippage } from 'utils/slippage'
 type Props = {
   rawSlippage: number
   isStablePairSwap: boolean
+  isCorrelatedPair: boolean
   className?: string
 }
 
@@ -30,8 +31,8 @@ const TextUnderlineTransparent = styled(Text)`
   display: inline;
 `
 
-const SlippageWarningNote: FC<Props> = ({ className, rawSlippage, isStablePairSwap }) => {
-  const slippageStatus = checkRangeSlippage(rawSlippage, isStablePairSwap)
+const SlippageWarningNote: FC<Props> = ({ className, rawSlippage, isStablePairSwap, isCorrelatedPair }) => {
+  const slippageStatus = checkRangeSlippage(rawSlippage, isStablePairSwap, isCorrelatedPair)
 
   if (slippageStatus === SLIPPAGE_STATUS.NORMAL) {
     return null

src/components/SwapForm/SlippageSetting.tsx

@@ -1,10 +1,11 @@
-import { Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { ReactNode, useState } from 'react'
 import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
 import SlippageControl from 'components/SlippageControl'
+import SlippageWarningNote from 'components/SlippageWarningNote'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import useTheme from 'hooks/useTheme'
 import { useDegenModeManager, useSlippageSettingByPage } from 'state/user/hooks'
@@ -21,18 +22,19 @@ const DropdownIcon = styled(DropdownSVG)`
 
 type Props = {
   isStablePairSwap: boolean
+  isCorrelatedPair: boolean
   rightComponent?: ReactNode
   tooltip?: ReactNode
 }
-const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) => {
+const SlippageSetting = ({ isStablePairSwap, isCorrelatedPair, rightComponent, tooltip }: Props) => {
   const theme = useTheme()
   const [expanded, setExpanded] = useState(false)
   const [isDegenMode] = useDegenModeManager()
 
   const { rawSlippage, setRawSlippage, isSlippageControlPinned } = useSlippageSettingByPage()
-  const defaultRawSlippage = getDefaultSlippage(isStablePairSwap)
+  const defaultRawSlippage = getDefaultSlippage(isStablePairSwap, isCorrelatedPair)
 
-  const isWarningSlippage = checkWarningSlippage(rawSlippage, isStablePairSwap)
+  const isWarningSlippage = checkWarningSlippage(rawSlippage, isStablePairSwap, isCorrelatedPair)
   if (!isSlippageControlPinned) {
     return null
   }
@@ -42,7 +44,6 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) =
       sx={{
         flexDirection: 'column',
         width: '100%',
-        padding: '0 8px',
       }}
     >
       <Flex
@@ -101,10 +102,13 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) =
                 fontSize: '14px',
                 fontWeight: 500,
                 lineHeight: '1',
-                color: theme.text,
+                color: isWarningSlippage ? theme.warning : theme.text,
+                borderBottom: isWarningSlippage ? `1px dashed ${theme.warning}` : 'none',
               }}
             >
-              {formatSlippage(rawSlippage)}
+              <MouseoverTooltip text={isWarningSlippage ? t`Slippage is high. Your transaction may be front-run.` : ''}>
+                {formatSlippage(rawSlippage)}
+              </MouseoverTooltip>
             </Text>
 
             <DropdownIcon data-flip={expanded} />
@@ -117,8 +121,10 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) =
         sx={{
           transition: 'all 100ms linear',
           paddingTop: expanded ? '8px' : '0px',
-          height: expanded ? '36px' : '0px',
+          height: expanded ? 'max-content' : '0px',
           overflow: 'hidden',
+          flexDirection: 'column',
+          gap: '1rem',
         }}
       >
         <SlippageControl
@@ -127,6 +133,12 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) =
           isWarning={isWarningSlippage}
           defaultRawSlippage={defaultRawSlippage}
         />
+
+        <SlippageWarningNote
+          rawSlippage={rawSlippage}
+          isStablePairSwap={isStablePairSwap}
+          isCorrelatedPair={isCorrelatedPair}
+        />
       </Flex>
       {isDegenMode && expanded && (
         <Text fontSize="12px" fontWeight="500" color={theme.subText} padding="4px 6px">

src/components/SwapForm/SlippageSettingGroup.tsx

@@ -33,10 +33,12 @@ const PriceAlertButton = styled.div`
 
 export default function SlippageSettingGroup({
   isStablePairSwap,
+  isCorrelatedPair,
   isWrapOrUnwrap,
   onOpenGasToken,
 }: {
   isStablePairSwap: boolean
+  isCorrelatedPair: boolean
   isWrapOrUnwrap: boolean
   onOpenGasToken?: () => void
 }) {
@@ -100,7 +102,11 @@ export default function SlippageSettingGroup({
           {rightButton}
         </>
       ) : (
-        <SlippageSetting isStablePairSwap={isStablePairSwap} rightComponent={rightButton} />
+        <SlippageSetting
+          isStablePairSwap={isStablePairSwap}
+          rightComponent={rightButton}
+          isCorrelatedPair={isCorrelatedPair}
+        />
       )}
       <AddMEVProtectionModal isOpen={showMevModal} onClose={onClose} />
     </Flex>

src/components/SwapForm/SwapFormContext.tsx

@@ -8,6 +8,7 @@ type SwapFormContextProps = {
   typedValue: string
   recipient: string | null
   isStablePairSwap: boolean
+  isCorrelatedPair: boolean
   isAdvancedMode: boolean
 }
 

src/components/SwapForm/SwapModal/ConfirmSwapModalContent.tsx

@@ -77,7 +77,7 @@ export default function ConfirmSwapModalContent({
   onSwap,
 }: Props) {
   const theme = useTheme()
-  const { routeSummary, slippage, isStablePairSwap, isAdvancedMode } = useSwapFormContext()
+  const { routeSummary, slippage, isStablePairSwap, isCorrelatedPair, isAdvancedMode } = useSwapFormContext()
   const [hasAcceptedNewAmount, setHasAcceptedNewAmount] = useState(false)
   const [showAreYouSureModal, setShowAreYouSureModal] = useState(false)
   const [isDegenMode] = useDegenModeManager()
@@ -302,7 +302,11 @@ export default function ConfirmSwapModalContent({
         <SwapDetails {...getSwapDetailsProps()} />
 
         <Flex sx={{ flexDirection: 'column', gap: '16px' }}>
-          <SlippageWarningNote rawSlippage={slippage} isStablePairSwap={isStablePairSwap} />
+          <SlippageWarningNote
+            rawSlippage={slippage}
+            isStablePairSwap={isStablePairSwap}
+            isCorrelatedPair={isCorrelatedPair}
+          />
 
           <PriceImpactNote isDegenMode={isAdvancedMode} priceImpact={priceImpactFromBuild} />
 

src/components/SwapForm/SwapModal/SwapDetails/index.tsx

@@ -23,6 +23,7 @@ import { useActiveWeb3React } from 'hooks'
 import { isSupportKyberDao, useGasRefundTier } from 'hooks/kyberdao'
 import useENS from 'hooks/useENS'
 import useTheme from 'hooks/useTheme'
+import { useCheckCorrelatedPair } from 'state/swap/hooks'
 import { usePaymentToken } from 'state/user/hooks'
 import { ExternalLink, TYPE } from 'theme'
 import { DetailedRouteSummary } from 'types/route'
@@ -97,6 +98,7 @@ export default function SwapDetails({
 
   const priceImpactResult = checkPriceImpact(priceImpact)
   const isStablePair = useCheckStablePairSwap(currencyIn, currencyOut)
+  const isCorrelated = useCheckCorrelatedPair()
 
   const { formattedAmountUsd: feeAmountUsdFromGet = '' } = routeSummary?.fee || {}
 
@@ -370,7 +372,10 @@ export default function SwapDetails({
             </TextDashed>
           </RowFixed>
 
-          <TYPE.black fontSize={12} color={checkWarningSlippage(slippage, isStablePair) ? theme.warning : undefined}>
+          <TYPE.black
+            fontSize={12}
+            color={checkWarningSlippage(slippage, isStablePair, isCorrelated) ? theme.warning : undefined}
+          >
             {formatSlippage(slippage)}
           </TYPE.black>
         </RowBetween>

src/components/SwapForm/index.tsx

@@ -9,7 +9,6 @@ import { ReactComponent as RoutingIcon } from 'assets/svg/routing-icon.svg'
 import AddressInputPanel from 'components/AddressInputPanel'
 import FeeControlGroup from 'components/FeeControlGroup'
 import { NetworkSelector } from 'components/NetworkSelector'
-import SlippageWarningNote from 'components/SlippageWarningNote'
 import InputCurrencyPanel from 'components/SwapForm/InputCurrencyPanel'
 import OutputCurrencyPanel from 'components/SwapForm/OutputCurrencyPanel'
 import PriceImpactNote from 'components/SwapForm/PriceImpactNote'
@@ -26,7 +25,7 @@ import { useActiveWeb3React } from 'hooks'
 import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'
 import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap'
 import { Field } from 'state/swap/actions'
-import { useSwapActionHandlers, useSwapState } from 'state/swap/hooks'
+import { useCheckCorrelatedPair, useSwapActionHandlers, useSwapState } from 'state/swap/hooks'
 import { DetailedRouteSummary } from 'types/route'
 
 import MultichainKNCNote from './MultichainKNCNote'
@@ -111,6 +110,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
   const isWrapOrUnwrap = wrapType !== WrapType.NOT_APPLICABLE
 
   const isStablePairSwap = useCheckStablePairSwap(currencyIn, currencyOut)
+  const isCorrelatedPair = useCheckCorrelatedPair()
 
   const { fetcher: getRoute, result } = useGetRoute({
     currencyIn,
@@ -160,6 +160,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
       typedValue={typedValue}
       recipient={recipient}
       isStablePairSwap={isStablePairSwap}
+      isCorrelatedPair={isCorrelatedPair}
       isAdvancedMode={isDegenMode}
     >
       <Box sx={{ flexDirection: 'column', gap: '16px', display: hidden ? 'none' : 'flex' }}>
@@ -205,13 +206,12 @@ const SwapForm: React.FC<SwapFormProps> = props => {
               isWrapOrUnwrap={isWrapOrUnwrap}
               isStablePairSwap={isStablePairSwap}
               onOpenGasToken={onOpenGasToken}
+              isCorrelatedPair={isCorrelatedPair}
             />
             <FeeControlGroup />
           </Flex>
         </Wrapper>
         <Flex flexDirection="column" style={{ gap: '1.25rem' }}>
-          {!isWrapOrUnwrap && <SlippageWarningNote rawSlippage={slippage} isStablePairSwap={isStablePairSwap} />}
-
           <PriceImpactNote priceImpact={routeSummary?.priceImpact} isDegenMode={isDegenMode} showLimitOrderLink />
           <MultichainKNCNote currencyIn={currencyIn} currencyOut={currencyOut} />
 

src/components/swapv2/SwapModalFooter.tsx

@@ -13,7 +13,7 @@ import PriceImpactNote from 'components/SwapForm/PriceImpactNote'
 import { MouseoverTooltip, TextDashed } from 'components/Tooltip'
 import useTheme from 'hooks/useTheme'
 import { Field } from 'state/swap/actions'
-import { useCheckStablePairSwap } from 'state/swap/hooks'
+import { useCheckCorrelatedPair, useCheckStablePairSwap } from 'state/swap/hooks'
 import { useDegenModeManager } from 'state/user/hooks'
 import { ExternalLink, TYPE } from 'theme'
 import { formattedNum } from 'utils'
@@ -38,14 +38,15 @@ export default function SwapModalFooter({
   disabledConfirm: boolean
 }) {
   const isStablePairSwap = useCheckStablePairSwap()
+  const isCorrelatedPair = useCheckCorrelatedPair()
   const [showInverted, setShowInverted] = useState<boolean>(false)
   const theme = useTheme()
   const slippageAdjustedAmounts = useMemo(
     () => computeSlippageAdjustedAmounts(trade, allowedSlippage),
     [allowedSlippage, trade],
   )
   const [isDegenMode] = useDegenModeManager()
-  const isWarningSlippage = checkWarningSlippage(allowedSlippage, isStablePairSwap)
+  const isWarningSlippage = checkWarningSlippage(allowedSlippage, isStablePairSwap, isCorrelatedPair)
 
   const nativeOutput = useCurrencyConvertedToNative(trade.outputAmount.currency as Currency)
 
@@ -168,7 +169,11 @@ export default function SwapModalFooter({
           marginTop: '1rem',
         }}
       >
-        <SlippageWarningNote rawSlippage={allowedSlippage} isStablePairSwap={isStablePairSwap} />
+        <SlippageWarningNote
+          rawSlippage={allowedSlippage}
+          isStablePairSwap={isStablePairSwap}
+          isCorrelatedPair={isCorrelatedPair}
+        />
 
         <PriceImpactNote priceImpact={priceImpact} isDegenMode={isDegenMode} />
 

src/components/swapv2/SwapSettingsPanel/SlippageSetting.tsx

@@ -35,7 +35,8 @@ const SlippageSetting: React.FC<Props> = ({ shouldShowPinButton = true }) => {
   const { rawSlippage, setRawSlippage, isSlippageControlPinned, togglePinSlippage } = useSlippageSettingByPage()
 
   const isStablePairSwap = useCheckStablePairSwap()
-  const slippageStatus = checkRangeSlippage(rawSlippage, isStablePairSwap)
+  const isCorrelatedPair = useCheckStablePairSwap()
+  const slippageStatus = checkRangeSlippage(rawSlippage, isStablePairSwap, isCorrelatedPair)
   const isWarning = slippageStatus !== SLIPPAGE_STATUS.NORMAL
   const theme = useTheme()
 

src/constants/index.ts

@@ -125,7 +125,8 @@ export const DEFAULT_TIPS = [0, 10, 50, 100]
 export const MAX_FEE_IN_BIPS = 1500
 
 export const DEFAULT_SLIPPAGE = 50
-export const DEFAULT_SLIPPAGE_STABLE_PAIR_SWAP = 5
+export const DEFAULT_SLIPPAGE_STABLE_PAIR_SWAP = 1
+export const DEFAULT_SLIPPAGE_CORRELATED_PAIR = 5
 
 export const AGGREGATOR_WAITING_TIME = 1700 // 1700 means that we at least show '.' '..' '...' '.' '..' '...'