Skip to content

Commit

Permalink
feat: adjust slp for correlated-pair (#2500)
Browse files Browse the repository at this point in the history
* feat: adjust slp for correlated-pair

* feat: adjust default slp

* chore: add correlated pair config
  • Loading branch information
viet-nv authored Jun 4, 2024
1 parent 0060a12 commit dfc55d1
Show file tree
Hide file tree
Showing 20 changed files with 367 additions and 51 deletions.
2 changes: 1 addition & 1 deletion src/components/ElasticZap/QuickZap.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/ProAmm/ProAmmPriceRangeConfirm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 3 additions & 2 deletions src/components/SlippageWarningNote/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { SLIPPAGE_STATUS, checkRangeSlippage } from 'utils/slippage'
type Props = {
rawSlippage: number
isStablePairSwap: boolean
isCorrelatedPair: boolean
className?: string
}

Expand All @@ -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
Expand Down
28 changes: 20 additions & 8 deletions src/components/SwapForm/SlippageSetting.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
}
Expand All @@ -42,7 +44,6 @@ const SlippageSetting = ({ isStablePairSwap, rightComponent, tooltip }: Props) =
sx={{
flexDirection: 'column',
width: '100%',
padding: '0 8px',
}}
>
<Flex
Expand Down Expand Up @@ -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} />
Expand All @@ -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
Expand All @@ -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">
Expand Down
8 changes: 7 additions & 1 deletion src/components/SwapForm/SlippageSettingGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,12 @@ const PriceAlertButton = styled.div`

export default function SlippageSettingGroup({
isStablePairSwap,
isCorrelatedPair,
isWrapOrUnwrap,
onOpenGasToken,
}: {
isStablePairSwap: boolean
isCorrelatedPair: boolean
isWrapOrUnwrap: boolean
onOpenGasToken?: () => void
}) {
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src/components/SwapForm/SwapFormContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ type SwapFormContextProps = {
typedValue: string
recipient: string | null
isStablePairSwap: boolean
isCorrelatedPair: boolean
isAdvancedMode: boolean
}

Expand Down
8 changes: 6 additions & 2 deletions src/components/SwapForm/SwapModal/ConfirmSwapModalContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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} />

Expand Down
7 changes: 6 additions & 1 deletion src/components/SwapForm/SwapModal/SwapDetails/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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 || {}

Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/components/SwapForm/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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' }}>
Expand Down Expand Up @@ -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} />

Expand Down
11 changes: 8 additions & 3 deletions src/components/swapv2/SwapModalFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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)

Expand Down Expand Up @@ -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} />

Expand Down
3 changes: 2 additions & 1 deletion src/components/swapv2/SwapSettingsPanel/SlippageSetting.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down
3 changes: 2 additions & 1 deletion src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 '.' '..' '...' '.' '..' '...'

Expand Down
Loading

0 comments on commit dfc55d1

Please sign in to comment.