feat: swap component refactor limits (#7588)

* feat: add limits tab, flag

* feat: add unit test

* fix: update snapshot

src/components/FeatureFlagModal/FeatureFlagModal.tsx

@@ -10,6 +10,7 @@ import { useInfoExploreFlag } from 'featureFlags/flags/infoExplore'
 import { useInfoLiveViewsFlag } from 'featureFlags/flags/infoLiveViews'
 import { useInfoPoolPageFlag } from 'featureFlags/flags/infoPoolPage'
 import { useInfoTDPFlag } from 'featureFlags/flags/infoTDP'
+import { useLimitsEnabledFlag } from 'featureFlags/flags/limits'
 import { useMultichainUXFlag } from 'featureFlags/flags/multichainUx'
 import { useProgressIndicatorV2Flag } from 'featureFlags/flags/progressIndicatorV2'
 import { useQuickRouteMainnetFlag } from 'featureFlags/flags/quickRouteMainnet'
@@ -274,6 +275,12 @@ export default function FeatureFlagModal() {
           featureFlag={FeatureFlag.feesEnabled}
           label="Enable Swap Fees"
         />
+        <FeatureFlagOption
+          variant={BaseVariant}
+          value={useLimitsEnabledFlag()}
+          featureFlag={FeatureFlag.limitsEnabled}
+          label="Enable Limits"
+        />
         <FeatureFlagOption
           variant={BaseVariant}
           value={useFallbackProviderEnabledFlag()}

src/components/swap/SwapBuyFiatButton.tsx

@@ -29,12 +29,18 @@ const StyledTextButton = styled(ButtonText)`
   color: ${({ theme }) => theme.neutral2};
   gap: 4px;
   font-weight: 485;
+  transition-duration: ${({ theme }) => theme.transition.duration.fast};
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, color, background-color;
   &:focus {
     text-decoration: none;
   }
   &:active {
     text-decoration: none;
   }
+  :hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
 `
 
 export default function SwapBuyFiatButton() {

src/components/swap/SwapHeader.test.tsx

@@ -0,0 +1,37 @@
+import { TEST_ALLOWED_SLIPPAGE, TEST_TRADE_EXACT_INPUT } from 'test-utils/constants'
+import { render, screen } from 'test-utils/render'
+
+import SwapHeader, { SwapTab } from './SwapHeader'
+
+jest.mock('../../featureFlags/flags/limits', () => ({ useLimitsEnabled: () => true }))
+
+describe('SwapHeader.tsx', () => {
+  it('matches base snapshot', () => {
+    const { asFragment } = render(
+      <SwapHeader
+        trade={TEST_TRADE_EXACT_INPUT}
+        selectedTab={SwapTab.Swap}
+        autoSlippage={TEST_ALLOWED_SLIPPAGE}
+        onClickTab={jest.fn()}
+      />
+    )
+    expect(asFragment()).toMatchSnapshot()
+    expect(screen.getByText('Swap')).toBeInTheDocument()
+    expect(screen.getByText('Buy')).toBeInTheDocument()
+    expect(screen.getByText('Limit')).toBeInTheDocument()
+  })
+
+  it('calls callback for switching tabs', () => {
+    const onClickTab = jest.fn()
+    render(
+      <SwapHeader
+        trade={TEST_TRADE_EXACT_INPUT}
+        selectedTab={SwapTab.Swap}
+        autoSlippage={TEST_ALLOWED_SLIPPAGE}
+        onClickTab={onClickTab}
+      />
+    )
+    screen.getByText('Limit').click()
+    expect(onClickTab).toHaveBeenCalledWith(SwapTab.Limit)
+  })
+})

src/components/swap/SwapHeader.tsx

@@ -1,8 +1,9 @@
 import { Trans } from '@lingui/macro'
 import { Percent } from '@uniswap/sdk-core'
+import { useLimitsEnabled } from 'featureFlags/flags/limits'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components'
-import { ThemedText } from 'theme/components'
+import { ButtonText } from 'theme/components'
 
 import { RowBetween, RowFixed } from '../Row'
 import SettingsTab from '../Settings'
@@ -18,22 +19,49 @@ const HeaderButtonContainer = styled(RowFixed)`
   gap: 16px;
 `
 
+const StyledTextButton = styled(ButtonText)<{ $isActive: boolean }>`
+  color: ${({ theme, $isActive }) => ($isActive ? theme.neutral1 : theme.neutral2)};
+  gap: 4px;
+  font-weight: 485;
+  &:focus {
+    text-decoration: none;
+  }
+  &:active {
+    text-decoration: none;
+  }
+`
+
+export enum SwapTab {
+  Swap = 'swap',
+  Limit = 'limit',
+}
+
 export default function SwapHeader({
   autoSlippage,
   chainId,
   trade,
+  selectedTab,
+  onClickTab,
 }: {
   autoSlippage: Percent
   chainId?: number
   trade?: InterfaceTrade
+  selectedTab: SwapTab
+  onClickTab: (tab: SwapTab) => void
 }) {
+  const limitsEnabled = useLimitsEnabled()
   return (
     <StyledSwapHeader>
       <HeaderButtonContainer>
-        <ThemedText.SubHeader>
+        <StyledTextButton $isActive={selectedTab === SwapTab.Swap} onClick={() => onClickTab?.(SwapTab.Swap)}>
           <Trans>Swap</Trans>
-        </ThemedText.SubHeader>
+        </StyledTextButton>
         <SwapBuyFiatButton />
+        {limitsEnabled && (
+          <StyledTextButton $isActive={selectedTab === SwapTab.Limit} onClick={() => onClickTab?.(SwapTab.Limit)}>
+            <Trans>Limit</Trans>
+          </StyledTextButton>
+        )}
       </HeaderButtonContainer>
       <RowFixed>
         <SettingsTab autoSlippage={autoSlippage} chainId={chainId} trade={trade} />

src/components/swap/__snapshots__/SwapBuyFiatButton.test.tsx.snap

@@ -120,6 +120,12 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
   color: #7D7D7D;
   gap: 4px;
   font-weight: 485;
+  -webkit-transition-duration: 125ms;
+  transition-duration: 125ms;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  -webkit-transition-property: opacity,color,background-color;
+  transition-property: opacity,color,background-color;
 }
 
 .c4:focus {
@@ -132,6 +138,10 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
   text-decoration: none;
 }
 
+.c4:hover {
+  opacity: 0.6;
+}
+
 <div
     class="c0"
   >