diff --git a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx index 7ad9ea8175..371ac7abbb 100644 --- a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx @@ -335,7 +335,7 @@ export function TransactionSettings() { // Your transaction will revert if the price changes unfavorably by more than this percentage. isEoaEthFlow ? getNativeSlippageTooltip(chainId, [nativeCurrency.symbol, getWrappedToken(nativeCurrency).symbol]) - : getNonNativeSlippageTooltip(true) + : getNonNativeSlippageTooltip({ isDynamic: !!smartSlippage, isSettingsModal: true }) } /> diff --git a/apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx b/apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx index 9b58d26442..e904e03fa6 100644 --- a/apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx +++ b/apps/cowswap-frontend/src/modules/swap/containers/ConfirmSwapModalSetup/index.tsx @@ -35,6 +35,7 @@ import { useIsEoaEthFlow } from '../../hooks/useIsEoaEthFlow' import { useNavigateToNewOrderCallback } from '../../hooks/useNavigateToNewOrderCallback' import { useShouldPayGas } from '../../hooks/useShouldPayGas' import { useSwapConfirmButtonText } from '../../hooks/useSwapConfirmButtonText' +import { useSmartSwapSlippage } from '../../hooks/useSwapSlippage' import { useSwapState } from '../../hooks/useSwapState' import { NetworkCostsTooltipSuffix } from '../../pure/NetworkCostsTooltipSuffix' import { getNativeSlippageTooltip, getNonNativeSlippageTooltip } from '../../pure/Row/RowSlippageContent' @@ -87,6 +88,7 @@ export function ConfirmSwapModalSetup(props: ConfirmSwapModalSetupProps) { const buttonText = useSwapConfirmButtonText(slippageAdjustedSellAmount) const isSmartSlippageApplied = useIsSmartSlippageApplied() + const smartSlippage = useSmartSwapSlippage() const labelsAndTooltips = useMemo( () => ({ @@ -96,7 +98,7 @@ export function ConfirmSwapModalSetup(props: ConfirmSwapModalSetupProps) { : undefined, slippageTooltip: isEoaEthFlow ? getNativeSlippageTooltip(chainId, [nativeCurrency.symbol]) - : getNonNativeSlippageTooltip(), + : getNonNativeSlippageTooltip({ isDynamic: !!smartSlippage }), expectReceiveLabel: isExactIn ? 'Expected to receive' : 'Expected to sell', minReceivedLabel: isExactIn ? 'Minimum receive' : 'Maximum sent', minReceivedTooltip: getMinimumReceivedTooltip(allowedSlippage, isExactIn), diff --git a/apps/cowswap-frontend/src/modules/swap/pure/Row/RowSlippageContent/index.tsx b/apps/cowswap-frontend/src/modules/swap/pure/Row/RowSlippageContent/index.tsx index 07a343a2fd..4facd945c0 100644 --- a/apps/cowswap-frontend/src/modules/swap/pure/Row/RowSlippageContent/index.tsx +++ b/apps/cowswap-frontend/src/modules/swap/pure/Row/RowSlippageContent/index.tsx @@ -53,19 +53,30 @@ export const getNativeSlippageTooltip = (chainId: SupportedChainId, symbols: (st robust MEV protection, consider wrapping your {symbols?.[0] || 'native currency'} before trading. ) -export const getNonNativeSlippageTooltip = (isSettingsModal?: boolean) => ( + +export const getNonNativeSlippageTooltip = (params?: { isDynamic?: boolean; isSettingsModal?: boolean }) => ( - CoW Swap dynamically adjusts your slippage tolerance to ensure your trade executes quickly while still getting the - best price.{' '} - {isSettingsModal ? ( + {params?.isDynamic ? ( <> - To override this, enter your desired slippage amount. -
-
- Either way, your slippage is protected from MEV! + CoW Swap dynamically adjusts your slippage tolerance to ensure your trade executes quickly while still getting + the best price.{' '} + {params?.isSettingsModal ? ( + <> + To override this, enter your desired slippage amount. +
+
+ Either way, your slippage is protected from MEV! + + ) : ( + <> +
+
+ Trades are protected from MEV, so your slippage can't be exploited! + + )} ) : ( - "Trades are protected from MEV, so your slippage can't be exploited!" + <>CoW Swap trades are protected from MEV, so your slippage can't be exploited! )}
) @@ -113,7 +124,10 @@ export function RowSlippageContent(props: RowSlippageContentProps) { } = props const tooltipContent = - slippageTooltip || (isEoaEthFlow ? getNativeSlippageTooltip(chainId, symbols) : getNonNativeSlippageTooltip()) + slippageTooltip || + (isEoaEthFlow + ? getNativeSlippageTooltip(chainId, symbols) + : getNonNativeSlippageTooltip({ isDynamic: !!smartSlippage })) // In case the user happened to set the same slippage as the suggestion, do not show the suggestion const suggestedEqualToUserSlippage = smartSlippage && smartSlippage === displaySlippage diff --git a/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/calculateBpsFromFeeMultiplier.ts b/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/calculateBpsFromFeeMultiplier.ts index 73d161d60d..fdd71e5f9f 100644 --- a/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/calculateBpsFromFeeMultiplier.ts +++ b/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/calculateBpsFromFeeMultiplier.ts @@ -8,7 +8,7 @@ export function calculateBpsFromFeeMultiplier( isSell: boolean | undefined, multiplierPercentage: number, ): number | undefined { - if (!sellAmount || !feeAmount || isSell === undefined || multiplierPercentage <= 0) { + if (!sellAmount || !feeAmount || isSell === undefined || !multiplierPercentage || multiplierPercentage <= 0) { return undefined } diff --git a/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/useSmartSlippageFromFeeMultiplier.ts b/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/useSmartSlippageFromFeeMultiplier.ts index f5566085a1..d80af85a40 100644 --- a/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/useSmartSlippageFromFeeMultiplier.ts +++ b/apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater/useSmartSlippageFromFeeMultiplier.ts @@ -6,7 +6,6 @@ import { useReceiveAmountInfo } from 'modules/trade' import { calculateBpsFromFeeMultiplier } from './calculateBpsFromFeeMultiplier' - /** * Calculates smart slippage in bps, based on quoted fee * @@ -19,7 +18,7 @@ export function useSmartSlippageFromFeeMultiplier(): number | undefined { const sellAmount = isSell ? afterNetworkCosts?.sellAmount : beforeNetworkCosts?.sellAmount const feeAmount = costs?.networkFee?.amountInSellCurrency - const { smartSlippageFeeMultiplierPercentage = 50 } = useFeatureFlags() + const { smartSlippageFeeMultiplierPercentage } = useFeatureFlags() return useMemo( () => calculateBpsFromFeeMultiplier(sellAmount, feeAmount, isSell, smartSlippageFeeMultiplierPercentage),