feat: [PAN-4634] Enable-auto-slippage

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/web/src/components/AccessRisk/SwapRevampRiskDisplay.tsx

@@ -19,6 +19,7 @@ import { keyframes, styled } from 'styled-components'
 import { useUserSlippage } from '@pancakeswap/utils/user'
 import { DEFAULT_SLIPPAGE_TOLERANCE } from 'components/Menu/GlobalSettings/TransactionSettings'
 import { useActiveChainId } from 'hooks/useActiveChainId'
+import { useAutoSlippageEnabled } from 'hooks/useAutoSlippageWithFallback'
 import { TOKEN_RISK, TOKEN_RISK_T, useTokenRisk } from './index'
 
 const appearAni = keyframes`
@@ -205,6 +206,7 @@ const PriceImpactDetails: React.FC = () => {
 const SlippageDetails: React.FC = () => {
   const { t } = useTranslation()
   const [, setUserSlippageTolerance] = useUserSlippage()
+  const [, setAutoSlippageEnabled] = useAutoSlippageEnabled()
 
   return (
     <FlexGap alignItems="flex-start">
@@ -214,7 +216,14 @@ const SlippageDetails: React.FC = () => {
             'You may only get the amount of “Minimum received” with a high slippage setting. Reset your slippage to avoid potential losses.',
           )}
         </Text>
-        <StyledTextButton onClick={() => setUserSlippageTolerance(DEFAULT_SLIPPAGE_TOLERANCE)} scale="sm" px="0">
+        <StyledTextButton
+          onClick={() => {
+            setAutoSlippageEnabled(false)
+            setUserSlippageTolerance(DEFAULT_SLIPPAGE_TOLERANCE)
+          }}
+          scale="sm"
+          px="0"
+        >
           {t('Reset Slippage')}
         </StyledTextButton>
       </FlexGap>

apps/web/src/components/Menu/GlobalSettings/TransactionSettings.tsx

@@ -1,10 +1,21 @@
 import { useTranslation } from '@pancakeswap/localization'
-import { Box, Button, Flex, FlexGap, Input, Message, QuestionHelper, Text } from '@pancakeswap/uikit'
+import {
+  Box,
+  Button,
+  Flex,
+  FlexGap,
+  Input,
+  Message,
+  QuestionHelper,
+  Text,
+  useMatchBreakpoints,
+} from '@pancakeswap/uikit'
 import { useUserSlippage } from '@pancakeswap/utils/user'
 import { useEffect, useState } from 'react'
 import { escapeRegExp } from 'utils'
 
 import { VerticalDivider } from '@pancakeswap/widgets-internal'
+import { useAutoSlippageEnabled } from 'hooks/useAutoSlippageWithFallback'
 import { useUserTransactionTTL } from 'hooks/useTransactionDeadline'
 import styled from 'styled-components'
 import { PrimaryOutlineButton } from './styles'
@@ -19,7 +30,12 @@ const ButtonsContainer = styled(FlexGap).attrs({ flexWrap: 'wrap', gap: '4px' })
 `
 
 const StyledButton = styled(Button)`
-  height: 52px;
+  height: 48px;
+  padding: 0 8px;
+  ${({ theme }) => theme.mediaQueries.md} {
+    height: 52px;
+    padding: 0 16px;
+  }
 `
 
 const StyledVerticalDivider = styled(VerticalDivider).attrs(({ theme }) => ({ bg: theme.colors.inputSecondary }))`
@@ -49,7 +65,8 @@ const SlippageTabs = () => {
   const [ttl, setTTL] = useUserTransactionTTL()
   const [slippageInput, setSlippageInput] = useState('')
   const [deadlineInput, setDeadlineInput] = useState('')
-
+  const [isAutoSlippageEnabled, setIsAutoSlippageEnabled] = useAutoSlippageEnabled()
+  const { isMobile } = useMatchBreakpoints()
   const { t } = useTranslation()
 
   const slippageInputIsValid =
@@ -124,14 +141,26 @@ const SlippageTabs = () => {
             ml="4px"
           />
         </Flex>
-        <ButtonsContainer>
+
+        <ButtonsContainer style={{ flexWrap: isMobile ? 'nowrap' : 'wrap' }}>
+          <StyledButton
+            scale="sm"
+            onClick={() => {
+              setSlippageInput('')
+              setIsAutoSlippageEnabled(true)
+            }}
+            variant={isAutoSlippageEnabled ? 'subtle' : 'light'}
+          >
+            {t('Auto')}
+          </StyledButton>
           <StyledButton
             scale="sm"
             onClick={() => {
               setSlippageInput('')
               setUserSlippageTolerance(10)
+              setIsAutoSlippageEnabled(false)
             }}
-            variant={userSlippageTolerance === 10 ? 'subtle' : 'light'}
+            variant={userSlippageTolerance === 10 && !isAutoSlippageEnabled ? 'subtle' : 'light'}
           >
             0.1%
           </StyledButton>
@@ -140,8 +169,9 @@ const SlippageTabs = () => {
             onClick={() => {
               setSlippageInput('')
               setUserSlippageTolerance(50)
+              setIsAutoSlippageEnabled(false)
             }}
-            variant={userSlippageTolerance === 50 ? 'subtle' : 'light'}
+            variant={userSlippageTolerance === 50 && !isAutoSlippageEnabled ? 'subtle' : 'light'}
           >
             0.5%
           </StyledButton>
@@ -150,8 +180,9 @@ const SlippageTabs = () => {
             onClick={() => {
               setSlippageInput('')
               setUserSlippageTolerance(100)
+              setIsAutoSlippageEnabled(false)
             }}
-            variant={userSlippageTolerance === 100 ? 'subtle' : 'light'}
+            variant={userSlippageTolerance === 100 && !isAutoSlippageEnabled ? 'subtle' : 'light'}
           >
             1.0%
           </StyledButton>
@@ -161,12 +192,15 @@ const SlippageTabs = () => {
                 scale="md"
                 inputMode="decimal"
                 pattern="^[0-9]*[.,]?[0-9]{0,2}$"
-                placeholder={(userSlippageTolerance / 100).toFixed(2)}
+                placeholder={isAutoSlippageEnabled ? 'Auto' : (userSlippageTolerance / 100).toFixed(2)}
                 value={slippageInput}
                 onBlur={() => {
                   parseCustomSlippage((userSlippageTolerance / 100).toFixed(2))
                 }}
                 onChange={(event) => {
+                  if (isAutoSlippageEnabled) {
+                    setIsAutoSlippageEnabled(false)
+                  }
                   if (event.currentTarget.validity.valid) {
                     parseCustomSlippage(event.target.value.replace(/,/g, '.'))
                   }
@@ -184,7 +218,8 @@ const SlippageTabs = () => {
             </Box>
           </Flex>
         </ButtonsContainer>
-        {!!slippageError && (
+
+        {!isAutoSlippageEnabled && !!slippageError && (
           <Message
             mt="8px"
             variant={