feat: use smart slippage based on trade size in relation to fee

apps/cowswap-frontend/src/modules/swap/updaters/SmartSlippageUpdater.ts

@@ -1,5 +1,5 @@
 import { useSetAtom } from 'jotai'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
 import { BFF_BASE_URL } from '@cowprotocol/common-const'
 import { useFeatureFlags } from '@cowprotocol/common-hooks'
@@ -11,6 +11,7 @@ import useSWR from 'swr'
 
 import { useDerivedTradeState, useIsWrapOrUnwrap } from 'modules/trade'
 
+import { useDerivedSwapInfo, useHighFeeWarning } from '../hooks/useSwapState'
 import { smartSwapSlippageAtom } from '../state/slippageValueAndTypeAtom'
 
 const SWR_OPTIONS = {
@@ -31,7 +32,7 @@ export function SmartSlippageUpdater() {
   const sellTokenAddress = inputCurrency && getCurrencyAddress(inputCurrency).toLowerCase()
   const buyTokenAddress = outputCurrency && getCurrencyAddress(outputCurrency).toLowerCase()
 
-  const slippageBps = useSWR(
+  const bffSlippageBps = useSWR(
     !sellTokenAddress || !buyTokenAddress || isWrapOrUnwrap || !isSmartSlippageEnabled
       ? null
       : [chainId, sellTokenAddress, buyTokenAddress],
@@ -42,12 +43,53 @@ export function SmartSlippageUpdater() {
 
       return response.slippageBps
     },
-    SWR_OPTIONS
+    SWR_OPTIONS,
   ).data
 
+  const tradeSizeSlippageBps = useSmartSlippageFromFeePercentage()
+
   useEffect(() => {
-    setSmartSwapSlippage(typeof slippageBps === 'number' ? slippageBps : null)
-  }, [slippageBps, setSmartSwapSlippage])
+    // Trade size slippage takes precedence
+    if (tradeSizeSlippageBps !== undefined) {
+      setSmartSwapSlippage(tradeSizeSlippageBps)
+    } else {
+      setSmartSwapSlippage(typeof bffSlippageBps === 'number' ? bffSlippageBps : null)
+    }
+  }, [bffSlippageBps, setSmartSwapSlippage, tradeSizeSlippageBps])
 
   return null
 }
+
+/**
+ * Calculates smart slippage in bps, based on trade size in relation to fee
+ */
+function useSmartSlippageFromFeePercentage(): number | undefined {
+  const { trade } = useDerivedSwapInfo() || {}
+  const { feePercentage } = useHighFeeWarning(trade)
+
+  const percentage = feePercentage && +feePercentage.toFixed(3)
+
+  return useMemo(() => {
+    if (percentage === undefined) {
+      // Unset, return undefined
+      return
+    }
+    if (percentage < 1) {
+      // bigger volume compared to the fee, trust on smart slippage from BFF
+      return
+    } else if (percentage < 5) {
+      // Between 1 and 5, 2%
+      return 200
+    } else if (percentage < 10) {
+      // Between 5 and 10, 5%
+      return 500
+    } else if (percentage < 20) {
+      // Between 10 and 20, 10%
+      return 1000
+    }
+    // TODO: more granularity?
+
+    // > 30%, cap it at 20% slippage
+    return 2000
+  }, [percentage])
+}