diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx index 8130dec15c..8ce11171fe 100644 --- a/src/components/NavigationTabs/index.tsx +++ b/src/components/NavigationTabs/index.tsx @@ -1,4 +1,7 @@ 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({ )} {children && {children}} + ) diff --git a/src/components/Settings/index.test.tsx b/src/components/Settings/index.test.tsx new file mode 100644 index 0000000000..eff42b8574 --- /dev/null +++ b/src/components/Settings/index.test.tsx @@ -0,0 +1,39 @@ +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() + + 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() + + const settingsButton = screen.getByTestId('open-settings-dialog-button') + fireEvent.click(settingsButton) + + await waitFor(() => { + expect(screen.queryByTestId('toggle-local-routing-button')).not.toBeInTheDocument() + }) + }) + }) +}) diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx index 90339ed8af..94c3c785d3 100644 --- a/src/components/Settings/index.tsx +++ b/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 && ( + + + + )} - - + + {showRoutingSettings && } {showDeadlineSettings && ( <> @@ -144,7 +147,7 @@ export default function SettingsTab({ ), - [autoSlippage, showDeadlineSettings, trade] + [autoSlippage, showDeadlineSettings, showRoutingSettings, trade] ) return ( diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index 68bcb43251..adf98bd294 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -599,7 +599,13 @@ function AddLiquidity() { pendingText={pendingText} /> - + {!hasExistingPosition && ( diff --git a/src/pages/AddLiquidityV2/index.tsx b/src/pages/AddLiquidityV2/index.tsx index f880ac4497..b2b47c69b2 100644 --- a/src/pages/AddLiquidityV2/index.tsx +++ b/src/pages/AddLiquidityV2/index.tsx @@ -335,7 +335,7 @@ export default function AddLiquidity() { return ( <> - + Migrate V2 Liquidity - + {!account ? ( diff --git a/src/pages/RemoveLiquidity/V3.tsx b/src/pages/RemoveLiquidity/V3.tsx index eb7c3895ec..0fd4622d55 100644 --- a/src/pages/RemoveLiquidity/V3.tsx +++ b/src/pages/RemoveLiquidity/V3.tsx @@ -300,7 +300,12 @@ function Remove({ tokenId }: { tokenId: BigNumber }) { pendingText={pendingText} /> - + {position ? ( diff --git a/src/pages/RemoveLiquidity/index.tsx b/src/pages/RemoveLiquidity/index.tsx index f4c0358562..9489601fa9 100644 --- a/src/pages/RemoveLiquidity/index.tsx +++ b/src/pages/RemoveLiquidity/index.tsx @@ -451,7 +451,7 @@ function RemoveLiquidity() { return ( <> - +