fix: should show slippage/deadline on LP flow settings (#7367)

* fix: should show slippage/deadline on LP flow settings

* write unit tests & update

---------
Co-authored-by: Kristie Huang <kristie.huang@uniswap.org>

src/components/NavigationTabs/index.tsx

 import { Trans } from '@lingui/macro'
+import { Percent } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
+import SettingsTab from 'components/Settings'
 import { ReactNode } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { Link, useLocation } from 'react-router-dom'
@@ -63,15 +66,18 @@ const AddRemoveTitleText = styled(ThemedText.SubHeaderLarge)`
 export function AddRemoveTabs({
   adding,
   creating,
+  autoSlippage,
   positionID,
   children,
 }: {
   adding: boolean
   creating: boolean
+  autoSlippage: Percent
   positionID?: string
   showBackLink?: boolean
   children?: ReactNode
 }) {
+  const { chainId } = useWeb3React()
   const theme = useTheme()
   // reset states on back
   const dispatch = useAppDispatch()
@@ -108,6 +114,7 @@ export function AddRemoveTabs({
           )}
         </AddRemoveTitleText>
         {children && <Box style={{ marginRight: '.5rem' }}>{children}</Box>}
+        <SettingsTab autoSlippage={autoSlippage} chainId={chainId} showRoutingSettings={false} />
       </RowBetween>
     </Tabs>
   )

src/components/Settings/index.test.tsx

+import { Percent } from '@uniswap/sdk-core'
+import { isSupportedChain } from 'constants/chains'
+import { mocked } from 'test-utils/mocked'
+import { fireEvent, render, screen, waitFor } from 'test-utils/render'
+
+import SettingsTab from './index'
+
+const slippage = new Percent(75, 10_000)
+jest.mock('constants/chains')
+
+describe('Settings Tab', () => {
+  describe('showRoutingSettings', () => {
+    beforeEach(() => {
+      mocked(isSupportedChain).mockReturnValue(true)
+    })
+
+    it('renders routing settings when showRoutingSettings is true', async () => {
+      render(<SettingsTab showRoutingSettings={true} chainId={1} autoSlippage={slippage} />)
+
+      const settingsButton = screen.getByTestId('open-settings-dialog-button')
+      fireEvent.click(settingsButton)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('toggle-local-routing-button')).toBeInTheDocument()
+      })
+    })
+
+    it('does not render routing settings when showRoutingSettings is false', async () => {
+      render(<SettingsTab showRoutingSettings={false} chainId={1} autoSlippage={slippage} />)
+
+      const settingsButton = screen.getByTestId('open-settings-dialog-button')
+      fireEvent.click(settingsButton)
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('toggle-local-routing-button')).not.toBeInTheDocument()
+      })
+    })
+  })
+})

src/components/Settings/index.tsx

@@ -59,9 +59,9 @@ const MenuFlyout = styled(AutoColumn)`
   padding: 16px;
 `
 
-const ExpandColumn = styled(AutoColumn)`
+const ExpandColumn = styled(AutoColumn)<{ $padTop: boolean }>`
   gap: 16px;
-  padding-top: 16px;
+  padding-top: ${({ $padTop }) => ($padTop ? '16px' : '0')};
 `
 
 const MobileMenuContainer = styled(Row)`
@@ -101,10 +101,12 @@ export default function SettingsTab({
   autoSlippage,
   chainId,
   trade,
+  showRoutingSettings = true,
 }: {
   autoSlippage: Percent
   chainId?: number
   trade?: InterfaceTrade
+  showRoutingSettings?: boolean
 }) {
   const { chainId: connectedChainId } = useWeb3React()
   const showDeadlineSettings = Boolean(chainId && !L2_CHAIN_IDS.includes(chainId))
@@ -123,16 +125,17 @@ export default function SettingsTab({
   useDisableScrolling(isOpen)
 
   const isChainSupported = isSupportedChain(chainId)
-
   const Settings = useMemo(
     () => (
       <>
+        {showRoutingSettings && (
           <AutoColumn gap="16px">
             <RouterPreferenceSettings />
           </AutoColumn>
+        )}
         <AnimatedDropdown open={!isUniswapXTrade(trade)}>
-          <ExpandColumn>
-            <Divider />
+          <ExpandColumn $padTop={showRoutingSettings}>
+            {showRoutingSettings && <Divider />}
             <MaxSlippageSettings autoSlippage={autoSlippage} />
             {showDeadlineSettings && (
               <>
@@ -144,7 +147,7 @@ export default function SettingsTab({
         </AnimatedDropdown>
       </>
     ),
-    [autoSlippage, showDeadlineSettings, trade]
+    [autoSlippage, showDeadlineSettings, showRoutingSettings, trade]
   )
 
   return (

src/pages/AddLiquidity/index.tsx

@@ -599,7 +599,13 @@ function AddLiquidity() {
           pendingText={pendingText}
         />
         <StyledBodyWrapper $hasExistingPosition={hasExistingPosition}>
-          <AddRemoveTabs creating={false} adding={true} positionID={tokenId} showBackLink={!hasExistingPosition}>
+          <AddRemoveTabs
+            creating={false}
+            adding={true}
+            positionID={tokenId}
+            autoSlippage={DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE}
+            showBackLink={!hasExistingPosition}
+          >
             {!hasExistingPosition && (
               <Row justifyContent="flex-end" style={{ width: 'fit-content', minWidth: 'fit-content' }}>
                 <MediumOnly>

src/pages/AddLiquidityV2/index.tsx

@@ -335,7 +335,7 @@ export default function AddLiquidity() {
   return (
     <>
       <AppBody>
-        <AddRemoveTabs creating={isCreate} adding={true} />
+        <AddRemoveTabs creating={isCreate} adding={true} autoSlippage={DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE} />
         <Wrapper>
           <TransactionConfirmationModal
             isOpen={showConfirm}

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -739,7 +739,11 @@ export default function MigrateV2Pair() {
           <ThemedText.DeprecatedMediumHeader>
             <Trans>Migrate V2 Liquidity</Trans>
           </ThemedText.DeprecatedMediumHeader>
-          <SettingsTab autoSlippage={DEFAULT_MIGRATE_SLIPPAGE_TOLERANCE} chainId={chainId} />
+          <SettingsTab
+            autoSlippage={DEFAULT_MIGRATE_SLIPPAGE_TOLERANCE}
+            chainId={chainId}
+            showRoutingSettings={false}
+          />
         </AutoRow>
 
         {!account ? (

src/pages/RemoveLiquidity/V3.tsx

@@ -300,7 +300,12 @@ function Remove({ tokenId }: { tokenId: BigNumber }) {
         pendingText={pendingText}
       />
       <AppBody $maxWidth="unset">
-        <AddRemoveTabs creating={false} adding={false} positionID={tokenId.toString()} />
+        <AddRemoveTabs
+          creating={false}
+          adding={false}
+          positionID={tokenId.toString()}
+          autoSlippage={DEFAULT_REMOVE_V3_LIQUIDITY_SLIPPAGE_TOLERANCE}
+        />
         <Wrapper>
           {position ? (
             <AutoColumn gap="lg">

src/pages/RemoveLiquidity/index.tsx

@@ -451,7 +451,7 @@ function RemoveLiquidity() {
   return (
     <>
       <AppBody>
-        <AddRemoveTabs creating={false} adding={false} />
+        <AddRemoveTabs creating={false} adding={false} autoSlippage={DEFAULT_REMOVE_LIQUIDITY_SLIPPAGE_TOLERANCE} />
         <Wrapper>
           <TransactionConfirmationModal
             isOpen={showConfirm}