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

+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

 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"
   >

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

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwapHeader.tsx matches base snapshot 1`] = `
+<DocumentFragment>
+  .c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+}
+
+.c9 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: inline-block;
+  text-align: center;
+  line-height: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: inherit;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  color: white;
+  background-color: primary;
+  border: 0;
+  border-radius: 4px;
+}
+
+.c1 {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 0;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+}
+
+.c2 {
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c4 {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+.c6 {
+  outline: none;
+  border: none;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  -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;
+}
+
+.c6:hover {
+  opacity: 0.6;
+}
+
+.c6:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c10 {
+  padding: 16px;
+  width: 100%;
+  line-height: 24px;
+  font-weight: 535;
+  text-align: center;
+  border-radius: 16px;
+  outline: none;
+  border: 1px solid transparent;
+  color: #222222;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  will-change: transform;
+  -webkit-transition: -webkit-transform 450ms ease;
+  -webkit-transition: transform 450ms ease;
+  transition: transform 450ms ease;
+  -webkit-transform: perspective(1px) translateZ(0);
+  -ms-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+}
+
+.c10:disabled {
+  opacity: 50%;
+  cursor: auto;
+  pointer-events: none;
+}
+
+.c10 > * {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.c10 > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c11 {
+  padding: 0;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  background: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c11:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c11:hover {
+  opacity: 0.9;
+}
+
+.c11:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c11:disabled {
+  opacity: 50%;
+  cursor: auto;
+}
+
+.c8 {
+  display: inline-block;
+  height: inherit;
+}
+
+.c17 {
+  height: 24px;
+  width: 24px;
+}
+
+.c17 > * {
+  fill: #7D7D7D;
+}
+
+.c15 {
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  outline: none;
+}
+
+.c15:not([disabled]):hover {
+  opacity: 0.7;
+}
+
+.c16 {
+  padding: 6px 12px;
+  border-radius: 16px;
+}
+
+.c14 {
+  position: relative;
+}
+
+.c12 {
+  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;
+}
+
+.c12:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c12:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c12:hover {
+  opacity: 0.6;
+}
+
+.c3 {
+  margin-bottom: 10px;
+  color: #7D7D7D;
+}
+
+.c5 {
+  padding: 0 12px;
+  gap: 16px;
+}
+
+.c7 {
+  color: #222222;
+  gap: 4px;
+  font-weight: 485;
+}
+
+.c7:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c7:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c13 {
+  color: #7D7D7D;
+  gap: 4px;
+  font-weight: 485;
+}
+
+.c13:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c13:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+<div
+    class="c0 c1 c2 c3"
+  >
+    <div
+      class="c0 c1 c4 c5"
+    >
+      <button
+        class="c6 c7"
+      >
+        Swap
+      </button>
+      <div
+        class="c8"
+      >
+        <div>
+          <button
+            class="c9 c10 c11 c12"
+            data-testid="buy-fiat-button"
+          >
+            Buy
+          </button>
+        </div>
+      </div>
+      <button
+        class="c6 c13"
+      >
+        Limit
+      </button>
+    </div>
+    <div
+      class="c0 c1 c4"
+    >
+      <div
+        class="c14"
+      >
+        <button
+          aria-label="Transaction Settings"
+          class="c15"
+          data-testid="open-settings-dialog-button"
+          disabled=""
+          id="open-settings-dialog-button"
+        >
+          <div
+            class="c0 c1 c16"
+          >
+            <svg
+              class="c17"
+              fill="none"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M20.83 14.6C19.9 14.06 19.33 13.07 19.33 12C19.33 10.93 19.9 9.93999 20.83 9.39999C20.99 9.29999 21.05 9.1 20.95 8.94L19.28 6.06C19.22 5.95 19.11 5.89001 19 5.89001C18.94 5.89001 18.88 5.91 18.83 5.94C18.37 6.2 17.85 6.34 17.33 6.34C16.8 6.34 16.28 6.19999 15.81 5.92999C14.88 5.38999 14.31 4.41 14.31 3.34C14.31 3.15 14.16 3 13.98 3H10.02C9.83999 3 9.69 3.15 9.69 3.34C9.69 4.41 9.12 5.38999 8.19 5.92999C7.72 6.19999 7.20001 6.34 6.67001 6.34C6.15001 6.34 5.63001 6.2 5.17001 5.94C5.01001 5.84 4.81 5.9 4.72 6.06L3.04001 8.94C3.01001 8.99 3 9.05001 3 9.10001C3 9.22001 3.06001 9.32999 3.17001 9.39999C4.10001 9.93999 4.67001 10.92 4.67001 11.99C4.67001 13.07 4.09999 14.06 3.17999 14.6H3.17001C3.01001 14.7 2.94999 14.9 3.04999 15.06L4.72 17.94C4.78 18.05 4.89 18.11 5 18.11C5.06 18.11 5.12001 18.09 5.17001 18.06C6.11001 17.53 7.26 17.53 8.19 18.07C9.11 18.61 9.67999 19.59 9.67999 20.66C9.67999 20.85 9.82999 21 10.02 21H13.98C14.16 21 14.31 20.85 14.31 20.66C14.31 19.59 14.88 18.61 15.81 18.07C16.28 17.8 16.8 17.66 17.33 17.66C17.85 17.66 18.37 17.8 18.83 18.06C18.99 18.16 19.19 18.1 19.28 17.94L20.96 15.06C20.99 15.01 21 14.95 21 14.9C21 14.78 20.94 14.67 20.83 14.6ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/featureFlags/flags/limits.ts

+import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+
+export function useLimitsEnabledFlag(): BaseVariant {
+  return useBaseFlag(FeatureFlag.limitsEnabled)
+}
+
+export function useLimitsEnabled(): boolean {
+  return useLimitsEnabledFlag() === BaseVariant.Enabled
+}

src/featureFlags/index.tsx

@@ -23,6 +23,7 @@ export enum FeatureFlag {
   progressIndicatorV2 = 'progress_indicator_v2',
   feesEnabled = 'fees_enabled',
   androidGALaunch = 'android_ga_launch',
+  limitsEnabled = 'limits_enabled',
 }
 
 interface FeatureFlagsContextType {

src/pages/Landing/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   min-width: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -30,7 +30,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border-radius: 4px;
 }
 
-.c47 {
+.c48 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -84,15 +84,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
   width: fit-content;
 }
 
+.c27 {
+  color: #7D7D7D;
+}
+
 .c13 {
-  color: #222222;
+  outline: none;
+  border: none;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  -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;
 }
 
-.c26 {
-  color: #7D7D7D;
+.c13:hover {
+  opacity: 0.6;
 }
 
-.c98 {
+.c13:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c99 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -103,15 +124,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   font-weight: 500;
 }
 
-.c98:hover {
+.c99:hover {
   opacity: 0.6;
 }
 
-.c98:active {
+.c99:active {
   opacity: 0.4;
 }
 
-.c96 {
+.c97 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -122,36 +143,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
   font-weight: 500;
 }
 
-.c96:hover {
+.c97:hover {
   opacity: 0.6;
 }
 
-.c96:active {
+.c97:active {
   opacity: 0.4;
 }
 
-.c89 {
+.c90 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c90 {
+.c91 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c91 {
+.c92 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c83 {
+.c84 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +185,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 1440px;
 }
 
-.c84 {
+.c85 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -174,24 +195,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
   flex-direction: column;
 }
 
-.c85 {
+.c86 {
   display: none;
 }
 
-.c100 {
+.c101 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c86 {
+.c87 {
   width: 72px;
   height: 72px;
   display: none;
 }
 
-.c87 {
+.c88 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -204,20 +225,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 20px 0 0 0;
 }
 
-.c88 {
+.c89 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c93 {
+.c94 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
-.c94 {
+.c95 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,32 +251,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 20px 0 0 0;
 }
 
-.c95 {
+.c96 {
   font-size: 16px;
   line-height: 20px;
   font-weight: 535;
 }
 
-.c99 {
+.c100 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c97 {
+.c98 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c92 {
+.c93 {
   font-size: 16px;
   line-height: 20px;
   margin: 1rem 0 0 0;
   color: #CECECE;
 }
 
-.c66 {
+.c67 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -283,11 +304,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease border;
 }
 
-.c66:hover {
+.c67:hover {
   border: 1px solid #CECECE;
 }
 
-.c72 {
+.c73 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -315,11 +336,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease border;
 }
 
-.c72:hover {
+.c73:hover {
   border: 1px solid #CECECE;
 }
 
-.c67 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -334,13 +355,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: space-between;
 }
 
-.c68 {
+.c69 {
   font-size: 20px;
   line-height: 28px;
   font-weight: 535;
 }
 
-.c69 {
+.c70 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -355,7 +376,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 480px;
 }
 
-.c73 {
+.c74 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -370,7 +391,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   max-width: 480px;
 }
 
-.c70 {
+.c71 {
   color: #FC72FF;
   font-weight: 535;
   margin: 24px 0 0;
@@ -379,18 +400,18 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c70:hover {
+.c71:hover {
   opacity: 0.6;
 }
 
-.c74 {
+.c75 {
   min-width: 20px;
   min-height: 20px;
   max-height: 48px;
   max-width: 48px;
 }
 
-.c50 {
+.c51 {
   background-color: transparent;
   bottom: 0;
   border-radius: inherit;
@@ -404,7 +425,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   width: 100%;
 }
 
-.c16 {
+.c17 {
   padding: 16px;
   width: 100%;
   line-height: 24px;
@@ -443,25 +464,25 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transform: perspective(1px) translateZ(0);
 }
 
-.c16:disabled {
+.c17:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c16 > * {
+.c17 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c16 > a {
+.c17 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c80 {
+.c81 {
   padding: 16px;
   width: 200px;
   line-height: 24px;
@@ -500,58 +521,58 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transform: perspective(1px) translateZ(0);
 }
 
-.c80:disabled {
+.c81:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c80 > * {
+.c81 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c80 > a {
+.c81 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c48 {
+.c49 {
   background-color: #FFEFFF;
   color: #FC72FF;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c48:focus {
+.c49:focus {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover {
+.c49:hover {
   background-color: #FFEFFF;
 }
 
-.c48:active {
+.c49:active {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover .c49 {
+.c49:hover .c50 {
   background-color: #98A1C014;
 }
 
-.c48:active .c49 {
+.c49:active .c50 {
   background-color: #B8C0DC3d;
 }
 
-.c48:disabled {
+.c49:disabled {
   opacity: 0.4;
 }
 
-.c48:disabled:hover {
+.c49:disabled:hover {
   cursor: auto;
   background-color: transparent;
   box-shadow: none;
@@ -559,7 +580,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   outline: none;
 }
 
-.c30 {
+.c31 {
   background-color: #FFFFFF;
   color: #7D7D7D;
   border: 1px solid #22222212;
@@ -567,15 +588,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   font-weight: 535;
 }
 
-.c30:hover {
+.c31:hover {
   background-color: #ececec;
 }
 
-.c30:active {
+.c31:active {
   background-color: #e0e0e0;
 }
 
-.c81 {
+.c82 {
   background-color: transparent;
   color: #FC72FF;
   display: -webkit-box;
@@ -592,27 +613,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
   align-items: center;
 }
 
-.c81:focus {
+.c82:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c81:hover {
+.c82:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c81:active {
+.c82:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c81:disabled {
+.c82:disabled {
   opacity: 50%;
   cursor: auto;
 }
 
-.c17 {
+.c18 {
   padding: 0;
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -622,26 +643,26 @@ exports[`disable nft on landing page does not render nft information and card 1`
   text-decoration: none;
 }
 
-.c17:focus {
+.c18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c17:hover {
+.c18:hover {
   opacity: 0.9;
 }
 
-.c17:active {
+.c18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c17:disabled {
+.c18:disabled {
   opacity: 50%;
   cursor: auto;
 }
 
-.c75 {
+.c76 {
   height: 340px;
   width: 100%;
   border-radius: 32px;
@@ -667,7 +688,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
 }
 
-.c76 {
+.c77 {
   color: white;
   display: -webkit-box;
   display: -webkit-flex;
@@ -681,20 +702,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
   flex-direction: column;
 }
 
-.c77 {
+.c78 {
   font-weight: 535;
   font-size: 28px;
   line-height: 36px;
 }
 
-.c78 {
+.c79 {
   margin: 10px 10px 0 0;
   font-weight: 535;
   font-size: 16px;
   line-height: 20px;
 }
 
-.c79 {
+.c80 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -708,22 +729,22 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c79:hover {
+.c80:hover {
   opacity: 0.6;
 }
 
-.c82 {
+.c83 {
   color: white;
   border: 1px solid white;
 }
 
-.c43 {
+.c44 {
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: 4px;
 }
 
-.c40 {
+.c41 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -731,12 +752,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: opacity 250ms ease-in-out;
 }
 
-.c14 {
+.c15 {
   display: inline-block;
   height: inherit;
 }
 
-.c35 {
+.c36 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -745,7 +766,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border-radius: 50%;
 }
 
-.c34 {
+.c35 {
   width: 24px;
   height: 24px;
   background: #22222212;
@@ -755,7 +776,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border-radius: 50%;
 }
 
-.c33 {
+.c34 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -763,7 +784,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   display: flex;
 }
 
-.c28 {
+.c29 {
   color: #222222;
   pointer-events: auto;
   width: 0;
@@ -784,36 +805,36 @@ exports[`disable nft on landing page does not render nft information and card 1`
   text-align: right;
 }
 
-.c28::-webkit-search-decoration {
+.c29::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c28 [type='number'] {
+.c29 [type='number'] {
   -moz-appearance: textfield;
 }
 
-.c28::-webkit-outer-spin-button,
-.c28::-webkit-inner-spin-button {
+.c29::-webkit-outer-spin-button,
+.c29::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #CECECE;
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c28::placeholder {
+.c29::placeholder {
   color: #CECECE;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -830,13 +851,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
   will-change: height;
 }
 
-.c25 {
+.c26 {
   min-height: 44px;
   border-radius: 20px;
   width: initial;
 }
 
-.c31 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -869,12 +890,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   animation: none;
 }
 
-.c31:hover,
-.c31:active {
+.c32:hover,
+.c32:active {
   background-color: #F9F9F9;
 }
 
-.c31:before {
+.c32:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -885,15 +906,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   content: '';
 }
 
-.c31:hover:before {
+.c32:hover:before {
   background-color: #98A1C014;
 }
 
-.c31:active:before {
+.c32:active:before {
   background-color: #B8C0DC3d;
 }
 
-.c45 {
+.c46 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -926,12 +947,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   animation: none;
 }
 
-.c45:hover,
-.c45:active {
+.c46:hover,
+.c46:active {
   background-color: #FC72FF;
 }
 
-.c45:before {
+.c46:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -942,15 +963,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   content: '';
 }
 
-.c45:hover:before {
+.c46:hover:before {
   background-color: #98A1C014;
 }
 
-.c45:active:before {
+.c46:active:before {
   background-color: #B8C0DC3d;
 }
 
-.c27 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -968,7 +989,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: space-between;
 }
 
-.c38 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -985,12 +1006,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   line-height: 1rem;
 }
 
-.c38 span:hover {
+.c39 span:hover {
   cursor: pointer;
   color: #4a4a4a;
 }
 
-.c39 {
+.c40 {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
@@ -999,7 +1020,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   padding: 8px 0px 0px 0px;
 }
 
-.c32 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1015,35 +1036,35 @@ exports[`disable nft on landing page does not render nft information and card 1`
   width: 100%;
 }
 
-.c37 {
+.c38 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c37 path {
+.c38 path {
   stroke: #222222;
   stroke-width: 2px;
 }
 
-.c46 {
+.c47 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c46 path {
+.c47 path {
   stroke: #FFFFFF;
   stroke-width: 2px;
 }
 
-.c36 {
+.c37 {
   margin: 0 0.25rem 0 0.25rem;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c29 {
+.c30 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -1100,7 +1121,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   padding-top: 12px;
 }
 
-.c41 {
+.c42 {
   border-radius: 12px;
   height: 40px;
   width: 40px;
@@ -1115,21 +1136,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
   z-index: 2;
 }
 
-.c41:hover {
+.c42:hover {
   cursor: pointer;
   opacity: 0.8;
 }
 
-.c22 {
+.c23 {
   height: 24px;
   width: 24px;
 }
 
-.c22 > * {
+.c23 > * {
   fill: #7D7D7D;
 }
 
-.c20 {
+.c21 {
   border: none;
   background-color: transparent;
   margin: 0;
@@ -1138,35 +1159,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
   outline: none;
 }
 
-.c20:not([disabled]):hover {
+.c21:not([disabled]):hover {
   opacity: 0.7;
 }
 
-.c21 {
+.c22 {
   padding: 6px 12px;
   border-radius: 16px;
 }
 
-.c19 {
+.c20 {
   position: relative;
 }
 
-.c18 {
+.c19 {
   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;
 }
 
-.c18:focus {
+.c19:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c18:active {
+.c19:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c19:hover {
+  opacity: 0.6;
+}
+
 .c10 {
   margin-bottom: 10px;
   color: #7D7D7D;
@@ -1177,7 +1208,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
   gap: 16px;
 }
 
-.c42 {
+.c14 {
+  color: #222222;
+  gap: 4px;
+  font-weight: 485;
+}
+
+.c14:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c14:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c43 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1194,7 +1241,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: 100%;
 }
 
-.c23 {
+.c24 {
   background-color: #F9F9F9;
   border-radius: 16px;
   color: #7D7D7D;
@@ -1206,7 +1253,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   position: relative;
 }
 
-.c23:before {
+.c24:before {
   box-sizing: border-box;
   background-size: 100%;
   border-radius: inherit;
@@ -1220,15 +1267,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
   border: 1px solid #F9F9F9;
 }
 
-.c23:hover:before {
+.c24:hover:before {
   border-color: #98A1C014;
 }
 
-.c23:focus-within:before {
+.c24:focus-within:before {
   border-color: #B8C0DC3d;
 }
 
-.c44 {
+.c45 {
   border-bottom: 1px solid #FFFFFF;
 }
 
@@ -1255,7 +1302,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   overflow-x: hidden;
 }
 
-.c51 {
+.c52 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1279,7 +1326,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: calc(100vh - 48px);
 }
 
-.c52 {
+.c53 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1300,7 +1347,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: calc(100vh - 48px);
 }
 
-.c53 {
+.c54 {
   position: absolute;
   top: 68px;
   bottom: 0;
@@ -1313,7 +1360,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   height: 100%;
 }
 
-.c54 {
+.c55 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1341,11 +1388,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   pointer-events: none;
 }
 
-.c54 * {
+.c55 * {
   pointer-events: auto;
 }
 
-.c63 {
+.c64 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1365,11 +1412,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   align-items: center;
 }
 
-.c63:hover {
+.c64:hover {
   color: #CECECE;
 }
 
-.c55 {
+.c56 {
   color: transparent;
   font-size: 36px;
   line-height: 44px;
@@ -1381,7 +1428,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   -webkit-background-clip: text;
 }
 
-.c57 {
+.c58 {
   color: #7D7D7D;
   font-size: 16px;
   line-height: 24px;
@@ -1391,7 +1438,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   margin: 0 0 32px;
 }
 
-.c56 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1402,12 +1449,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
   justify-content: center;
 }
 
-.c59 {
+.c60 {
   padding: 16px 0px;
   border-radius: 24px;
 }
 
-.c60 {
+.c61 {
   background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
   border: none;
   color: #FFFFFF;
@@ -1415,24 +1462,24 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: all 250ms ease;
 }
 
-.c60:hover {
+.c61:hover {
   box-shadow: 0px 0px 16px 0px #ff00c7;
 }
 
-.c61 {
+.c62 {
   margin: 0px;
   font-size: 16px;
   font-weight: 535;
   white-space: nowrap;
 }
 
-.c58 {
+.c59 {
   max-width: 300px;
   width: 100%;
   pointer-events: auto;
 }
 
-.c62 {
+.c63 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1452,11 +1499,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
   transition: 250ms ease opacity;
 }
 
-.c62:hover {
+.c63:hover {
   opacity: 0.6;
 }
 
-.c64 {
+.c65 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1473,7 +1520,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
 }
 
-.c65 {
+.c66 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -1486,7 +1533,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
   grid-template-columns: 1fr;
 }
 
-.c71 {
+.c72 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -1541,7 +1588,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c83 {
+  .c84 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -1553,7 +1600,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c85 {
+  .c86 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -1562,63 +1609,63 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c100 {
+  .c101 {
     display: none;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c86 {
+  .c87 {
     display: block;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c93 {
+  .c94 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 24px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c94 {
+  .c95 {
     margin: 0;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c66 {
+  .c67 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c66 {
+  .c67 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c72 {
+  .c73 {
     height: 260px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c72 {
+  .c73 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c68 {
+  .c69 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c69 {
+  .c70 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -1626,7 +1673,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1280px) {
-  .c73 {
+  .c74 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -1634,7 +1681,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1024px) {
-  .c75 {
+  .c76 {
     height: 140px;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -1643,21 +1690,21 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:1280px) {
-  .c77 {
+  .c78 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c78 {
+  .c79 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c79 {
+  .c80 {
     width: auto;
   }
 }
@@ -1675,79 +1722,79 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 @media screen and (min-width:768px) {
-  .c51 {
+  .c52 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c52 {
+  .c53 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c55 {
+  .c56 {
     font-size: 48px;
     line-height: 56px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c55 {
+  .c56 {
     font-size: 64px;
     line-height: 72px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c57 {
+  .c58 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c61 {
+  .c62 {
     font-size: 20px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c62 {
+  .c63 {
     visibility: visible;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c64 {
+  .c65 {
     padding: 0 96px 5rem;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c65 {
+  .c66 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c65 {
+  .c66 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c71 {
+  .c72 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c71 {
+  .c72 {
     grid-template-columns: 1fr 1fr 1fr;
     gap: 32px;
   }
@@ -1781,17 +1828,17 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 <div
                   class="c7 c8 c11 c12"
                 >
-                  <div
-                    class="c13 css-n8z49y"
+                  <button
+                    class="c13 c14"
                   >
                     Swap
-                  </div>
+                  </button>
                   <div
-                    class="c14"
+                    class="c15"
                   >
                     <div>
                       <button
-                        class="c15 c16 c17 c18"
+                        class="c16 c17 c18 c19"
                         data-testid="buy-fiat-button"
                       >
                         Buy
@@ -1803,19 +1850,19 @@ exports[`disable nft on landing page does not render nft information and card 1`
                   class="c7 c8 c11"
                 >
                   <div
-                    class="c19"
+                    class="c20"
                   >
                     <button
                       aria-label="Transaction Settings"
-                      class="c20"
+                      class="c21"
                       data-testid="open-settings-dialog-button"
                       id="open-settings-dialog-button"
                     >
                       <div
-                        class="c7 c8 c21"
+                        class="c7 c8 c22"
                       >
                         <svg
-                          class="c22"
+                          class="c23"
                           fill="none"
                           height="24"
                           viewBox="0 0 24 24"
@@ -1836,23 +1883,23 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 style="display: relative;"
               >
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
-                    class="c24"
+                    class="c25"
                     id="swap-currency-input"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                     >
                       <div
-                        class="c26 css-142zc9n"
+                        class="c27 css-142zc9n"
                         style="user-select: none;"
                       >
                         You pay
                       </div>
                       <div
-                        class="c27"
+                        class="c28"
                       >
                         <div
                           style="display: flex; flex-grow: 1;"
@@ -1860,7 +1907,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
                           <input
                             autocomplete="off"
                             autocorrect="off"
-                            class="c28 c29 token-amount-input"
+                            class="c29 c30 token-amount-input"
                             id="swap-currency-input"
                             inputmode="decimal"
                             maxlength="79"
@@ -1874,40 +1921,40 @@ exports[`disable nft on landing page does not render nft information and card 1`
                         </div>
                         <div>
                           <div
-                            class="c14"
+                            class="c15"
                           >
                             <button
-                              class="c15 c16 c30 c31 open-currency-select-button"
+                              class="c16 c17 c31 c32 open-currency-select-button"
                             >
                               <span
-                                class="c32"
+                                class="c33"
                               >
                                 <div
                                   class="c7 c8 c11"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                     style="height: 24px; width: 24px; margin-right: 2px;"
                                   >
                                     <div
-                                      class="c34"
+                                      class="c35"
                                     >
                                       <img
                                         alt="ETH logo"
-                                        class="c35"
+                                        class="c36"
                                         loading="lazy"
                                         src="ethereum-logo.png"
                                       />
                                     </div>
                                   </div>
                                   <span
-                                    class="c36 token-symbol-container"
+                                    class="c37 token-symbol-container"
                                   >
                                     ETH
                                   </span>
                                 </div>
                                 <svg
-                                  class="c37"
+                                  class="c38"
                                 >
                                   dropdown.svg
                                 </svg>
@@ -1917,13 +1964,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
                         </div>
                       </div>
                       <div
-                        class="c38 c39"
+                        class="c39 c40"
                       >
                         <div
                           class="c7 c8 c9"
                         >
                           <div
-                            class="c40"
+                            class="c41"
                           />
                           <span />
                         </div>
@@ -1932,10 +1979,10 @@ exports[`disable nft on landing page does not render nft information and card 1`
                   </div>
                 </div>
                 <div
-                  class="c41"
+                  class="c42"
                 >
                   <div
-                    class="c42"
+                    class="c43"
                     color="#222222"
                     data-testid="swap-currency-button"
                   >
@@ -1964,27 +2011,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 </div>
               </div>
               <div
-                class="c43"
+                class="c44"
               >
                 <div>
                   <div
-                    class="c23 c44"
+                    class="c24 c45"
                   >
                     <div
-                      class="c24"
+                      class="c25"
                       id="swap-currency-output"
                     >
                       <div
-                        class="c25"
+                        class="c26"
                       >
                         <div
-                          class="c26 css-142zc9n"
+                          class="c27 css-142zc9n"
                           style="user-select: none;"
                         >
                           You receive
                         </div>
                         <div
-                          class="c27"
+                          class="c28"
                         >
                           <div
                             style="display: flex; flex-grow: 1;"
@@ -1992,7 +2039,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
                             <input
                               autocomplete="off"
                               autocorrect="off"
-                              class="c28 c29 token-amount-input"
+                              class="c29 c30 token-amount-input"
                               id="swap-currency-output"
                               inputmode="decimal"
                               maxlength="79"
@@ -2006,25 +2053,25 @@ exports[`disable nft on landing page does not render nft information and card 1`
                           </div>
                           <div>
                             <div
-                              class="c14"
+                              class="c15"
                             >
                               <button
-                                class="c15 c16 c30 c45 open-currency-select-button"
+                                class="c16 c17 c31 c46 open-currency-select-button"
                               >
                                 <span
-                                  class="c32"
+                                  class="c33"
                                 >
                                   <div
                                     class="c7 c8 c11"
                                   >
                                     <span
-                                      class="c36 token-symbol-container"
+                                      class="c37 token-symbol-container"
                                     >
                                       Select token
                                     </span>
                                   </div>
                                   <svg
-                                    class="c46"
+                                    class="c47"
                                   >
                                     dropdown.svg
                                   </svg>
@@ -2034,13 +2081,13 @@ exports[`disable nft on landing page does not render nft information and card 1`
                           </div>
                         </div>
                         <div
-                          class="c38 c39"
+                          class="c39 c40"
                         >
                           <div
                             class="c7 c8 c9"
                           >
                             <div
-                              class="c40"
+                              class="c41"
                             />
                             <span />
                           </div>
@@ -2051,11 +2098,11 @@ exports[`disable nft on landing page does not render nft information and card 1`
                 </div>
                 <div>
                   <button
-                    class="c47 c16 c48"
+                    class="c48 c17 c49"
                     font-weight="535"
                   >
                     <div
-                      class="c49 c50"
+                      class="c50 c51"
                     />
                     Connect wallet
                   </button>
@@ -2067,53 +2114,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
       </a>
     </div>
     <div
-      class="c51"
+      class="c52"
     />
     <div
-      class="c52"
+      class="c53"
     >
       <div
-        class="c53"
+        class="c54"
       />
     </div>
     <div
-      class="c54"
+      class="c55"
     >
       <h1
-        class="c55"
+        class="c56"
       >
         Trade crypto with confidence
       </h1>
       <div
-        class="c56"
+        class="c57"
       >
         <div
-          class="c57"
+          class="c58"
         >
           Buy, sell, and explore tokens
         </div>
       </div>
       <span
-        class="c58"
+        class="c59"
       >
         <a
-          class="c2 c16 c59 c60"
+          class="c2 c17 c60 c61"
           href="/swap"
         >
           <p
-            class="c61"
+            class="c62"
           >
             Get started
           </p>
         </a>
       </span>
       <div
-        class="c62"
+        class="c63"
       >
         Learn more
       </div>
       <a
-        class="c63"
+        class="c64"
         href="https://uniswapwallet.onelink.me/8q3y/79gveilz"
       >
         <svg
@@ -2130,32 +2177,32 @@ exports[`disable nft on landing page does not render nft information and card 1`
       </a>
     </div>
     <div
-      class="c64"
+      class="c65"
     >
       <div
-        class="c65"
+        class="c66"
         cols="1"
       >
         <a
-          class="c66"
+          class="c67"
           href="/swap"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Swap tokens
             </div>
           </div>
           <div
-            class="c69"
+            class="c70"
             type="Primary"
           >
             Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
             <div
-              class="c69 c70"
+              class="c70 c71"
               type="Primary"
             >
               Trade Tokens
@@ -2164,20 +2211,20 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </a>
       </div>
       <div
-        class="c71"
+        class="c72"
         cols="3"
       >
         <a
-          class="c72"
+          class="c73"
           href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Buy crypto
             </div>
@@ -2204,12 +2251,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </svg>
           </div>
           <div
-            class="c73"
+            class="c74"
             type="Secondary"
           >
             Buy crypto with your credit card or bank account at the best rates.
             <div
-              class="c73 c70"
+              class="c74 c71"
               type="Secondary"
             >
               Buy now
@@ -2217,30 +2264,30 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </a>
         <a
-          class="c72"
+          class="c73"
           href="/pools"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Earn
             </div>
             <img
               alt="Analytics"
-              class="c74"
+              class="c75"
               src="aboutArrowLight.png"
             />
           </div>
           <div
-            class="c73"
+            class="c74"
             type="Secondary"
           >
             Provide liquidity to pools on Uniswap and earn fees on swaps.
             <div
-              class="c73 c70"
+              class="c74 c71"
               type="Secondary"
             >
               Provide liquidity
@@ -2248,16 +2295,16 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </a>
         <a
-          class="c72"
+          class="c73"
           href="https://docs.uniswap.org"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Build dApps
             </div>
@@ -2284,12 +2331,12 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </svg>
           </div>
           <div
-            class="c73"
+            class="c74"
             type="Secondary"
           >
             Build apps and tools on the largest DeFi protocol on Ethereum.
             <div
-              class="c73 c70"
+              class="c74 c71"
               type="Secondary"
             >
               Developer docs
@@ -2298,27 +2345,27 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </a>
       </div>
       <div
-        class="c75"
+        class="c76"
       >
         <div
-          class="c76"
+          class="c77"
         >
           <div
-            class="c77"
+            class="c78"
           >
             Powered by the Uniswap Protocol
           </div>
           <div
-            class="c78"
+            class="c79"
           >
             The leading decentralized crypto trading protocol, governed by a global community.
           </div>
         </div>
         <div
-          class="c79"
+          class="c80"
         >
           <a
-            class="c80 c81 c82"
+            class="c81 c82 c83"
             href="https://uniswap.org"
             rel="noopener noreferrer"
             target="_blank"
@@ -2329,53 +2376,53 @@ exports[`disable nft on landing page does not render nft information and card 1`
         </div>
       </div>
       <div
-        class="c83"
+        class="c84"
       >
         <div
-          class="c84 c85"
+          class="c85 c86"
         >
           <img
             alt="Uniswap Logo"
-            class="c86"
+            class="c87"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c87"
+            class="c88"
           >
             <a
-              class="c88"
+              class="c89"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c89"
+                class="c90"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c88"
+              class="c89"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c91"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c88"
+              class="c89"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c92"
                 size="32"
               >
                 github.svg
@@ -2383,7 +2430,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <span
-            class="c92"
+            class="c93"
           >
             © 
             2023
@@ -2391,45 +2438,45 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </span>
         </div>
         <div
-          class="c93"
+          class="c94"
         >
           <div
-            class="c94"
+            class="c95"
           >
             <span
-              class="c95"
+              class="c96"
             >
               App
             </span>
             <a
-              class="c96 c97"
+              class="c97 c98"
               href="/swap"
             >
               Swap
             </a>
             <a
-              class="c96 c97"
+              class="c97 c98"
               href="/tokens"
             >
               Tokens
             </a>
             <a
-              class="c96 c97"
+              class="c97 c98"
               href="/pools"
             >
               Pools
             </a>
           </div>
           <div
-            class="c94"
+            class="c95"
           >
             <span
-              class="c95"
+              class="c96"
             >
               Protocol
             </span>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://uniswap.org/community"
               rel="noopener noreferrer"
               target="_blank"
@@ -2437,7 +2484,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Community
             </a>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://uniswap.org/governance"
               rel="noopener noreferrer"
               target="_blank"
@@ -2445,7 +2492,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Governance
             </a>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://uniswap.org/developers"
               rel="noopener noreferrer"
               target="_blank"
@@ -2454,15 +2501,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <div
-            class="c94"
+            class="c95"
           >
             <span
-              class="c95"
+              class="c96"
             >
               Company
             </span>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://boards.greenhouse.io/uniswaplabs"
               rel="noopener noreferrer"
               target="_blank"
@@ -2470,7 +2517,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Careers
             </a>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://uniswap.org/blog"
               rel="noopener noreferrer"
               target="_blank"
@@ -2479,15 +2526,15 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <div
-            class="c94"
+            class="c95"
           >
             <span
-              class="c95"
+              class="c96"
             >
               Get Help
             </span>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://support.uniswap.org/hc/en-us/requests/new"
               rel="noopener noreferrer"
               target="_blank"
@@ -2495,7 +2542,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
               Contact Us
             </a>
             <a
-              class="c98 c99"
+              class="c99 c100"
               href="https://support.uniswap.org/hc/en-us"
               rel="noopener noreferrer"
               target="_blank"
@@ -2505,50 +2552,50 @@ exports[`disable nft on landing page does not render nft information and card 1`
           </div>
         </div>
         <div
-          class="c84 c100"
+          class="c85 c101"
         >
           <img
             alt="Uniswap Logo"
-            class="c86"
+            class="c87"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c87"
+            class="c88"
           >
             <a
-              class="c88"
+              class="c89"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c89"
+                class="c90"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c88"
+              class="c89"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c91"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c88"
+              class="c89"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c92"
                 size="32"
               >
                 github.svg
@@ -2556,7 +2603,7 @@ exports[`disable nft on landing page does not render nft information and card 1`
             </a>
           </div>
           <span
-            class="c92"
+            class="c93"
           >
             © 
             2023
@@ -2576,7 +2623,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   min-width: 0;
 }
 
-.c15 {
+.c16 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2599,7 +2646,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border-radius: 4px;
 }
 
-.c47 {
+.c48 {
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
@@ -2653,15 +2700,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   width: fit-content;
 }
 
+.c27 {
+  color: #7D7D7D;
+}
+
 .c13 {
-  color: #222222;
+  outline: none;
+  border: none;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+  background: none;
+  cursor: pointer;
+  -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;
 }
 
-.c26 {
-  color: #7D7D7D;
+.c13:hover {
+  opacity: 0.6;
 }
 
-.c99 {
+.c13:focus {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+
+.c100 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -2672,15 +2740,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   font-weight: 500;
 }
 
-.c99:hover {
+.c100:hover {
   opacity: 0.6;
 }
 
-.c99:active {
+.c100:active {
   opacity: 0.4;
 }
 
-.c97 {
+.c98 {
   -webkit-text-decoration: none;
   text-decoration: none;
   cursor: pointer;
@@ -2691,36 +2759,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   font-weight: 500;
 }
 
-.c97:hover {
+.c98:hover {
   opacity: 0.6;
 }
 
-.c97:active {
+.c98:active {
   opacity: 0.4;
 }
 
-.c90 {
+.c91 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c91 {
+.c92 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c92 {
+.c93 {
   height: 32px;
   width: 32px;
   fill: #98A1C0;
   opacity: 1;
 }
 
-.c84 {
+.c85 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2733,7 +2801,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 1440px;
 }
 
-.c85 {
+.c86 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2743,24 +2811,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   flex-direction: column;
 }
 
-.c86 {
+.c87 {
   display: none;
 }
 
-.c101 {
+.c102 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c87 {
+.c88 {
   width: 72px;
   height: 72px;
   display: none;
 }
 
-.c88 {
+.c89 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2773,20 +2841,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 20px 0 0 0;
 }
 
-.c89 {
+.c90 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }
 
-.c94 {
+.c95 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
 }
 
-.c95 {
+.c96 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2799,32 +2867,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 20px 0 0 0;
 }
 
-.c96 {
+.c97 {
   font-size: 16px;
   line-height: 20px;
   font-weight: 535;
 }
 
-.c100 {
+.c101 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c98 {
+.c99 {
   font-size: 16px;
   line-height: 20px;
   color: #7D7D7D;
 }
 
-.c93 {
+.c94 {
   font-size: 16px;
   line-height: 20px;
   margin: 1rem 0 0 0;
   color: #CECECE;
 }
 
-.c66 {
+.c67 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2852,11 +2920,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c66:hover {
+.c67:hover {
   border: 1px solid #CECECE;
 }
 
-.c71 {
+.c72 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2884,11 +2952,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c71:hover {
+.c72:hover {
   border: 1px solid #CECECE;
 }
 
-.c73 {
+.c74 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2916,11 +2984,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease border;
 }
 
-.c73:hover {
+.c74:hover {
   border: 1px solid #CECECE;
 }
 
-.c67 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2935,13 +3003,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: space-between;
 }
 
-.c68 {
+.c69 {
   font-size: 20px;
   line-height: 28px;
   font-weight: 535;
 }
 
-.c69 {
+.c70 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2956,7 +3024,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 480px;
 }
 
-.c74 {
+.c75 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2971,7 +3039,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   max-width: 480px;
 }
 
-.c70 {
+.c71 {
   color: #FC72FF;
   font-weight: 535;
   margin: 24px 0 0;
@@ -2980,18 +3048,18 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c70:hover {
+.c71:hover {
   opacity: 0.6;
 }
 
-.c75 {
+.c76 {
   min-width: 20px;
   min-height: 20px;
   max-height: 48px;
   max-width: 48px;
 }
 
-.c50 {
+.c51 {
   background-color: transparent;
   bottom: 0;
   border-radius: inherit;
@@ -3005,7 +3073,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   width: 100%;
 }
 
-.c16 {
+.c17 {
   padding: 16px;
   width: 100%;
   line-height: 24px;
@@ -3044,25 +3112,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transform: perspective(1px) translateZ(0);
 }
 
-.c16:disabled {
+.c17:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c16 > * {
+.c17 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c16 > a {
+.c17 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c81 {
+.c82 {
   padding: 16px;
   width: 200px;
   line-height: 24px;
@@ -3101,58 +3169,58 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transform: perspective(1px) translateZ(0);
 }
 
-.c81:disabled {
+.c82:disabled {
   opacity: 50%;
   cursor: auto;
   pointer-events: none;
 }
 
-.c81 > * {
+.c82 > * {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c81 > a {
+.c82 > a {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c48 {
+.c49 {
   background-color: #FFEFFF;
   color: #FC72FF;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c48:focus {
+.c49:focus {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover {
+.c49:hover {
   background-color: #FFEFFF;
 }
 
-.c48:active {
+.c49:active {
   box-shadow: 0 0 0 1pt #FFEFFF;
   background-color: #FFEFFF;
 }
 
-.c48:hover .c49 {
+.c49:hover .c50 {
   background-color: #98A1C014;
 }
 
-.c48:active .c49 {
+.c49:active .c50 {
   background-color: #B8C0DC3d;
 }
 
-.c48:disabled {
+.c49:disabled {
   opacity: 0.4;
 }
 
-.c48:disabled:hover {
+.c49:disabled:hover {
   cursor: auto;
   background-color: transparent;
   box-shadow: none;
@@ -3160,7 +3228,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   outline: none;
 }
 
-.c30 {
+.c31 {
   background-color: #FFFFFF;
   color: #7D7D7D;
   border: 1px solid #22222212;
@@ -3168,15 +3236,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   font-weight: 535;
 }
 
-.c30:hover {
+.c31:hover {
   background-color: #ececec;
 }
 
-.c30:active {
+.c31:active {
   background-color: #e0e0e0;
 }
 
-.c82 {
+.c83 {
   background-color: transparent;
   color: #FC72FF;
   display: -webkit-box;
@@ -3193,27 +3261,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   align-items: center;
 }
 
-.c82:focus {
+.c83:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c82:hover {
+.c83:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c82:active {
+.c83:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c82:disabled {
+.c83:disabled {
   opacity: 50%;
   cursor: auto;
 }
 
-.c17 {
+.c18 {
   padding: 0;
   width: -webkit-fit-content;
   width: -moz-fit-content;
@@ -3223,26 +3291,26 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   text-decoration: none;
 }
 
-.c17:focus {
+.c18:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c17:hover {
+.c18:hover {
   opacity: 0.9;
 }
 
-.c17:active {
+.c18:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c17:disabled {
+.c18:disabled {
   opacity: 50%;
   cursor: auto;
 }
 
-.c76 {
+.c77 {
   height: 340px;
   width: 100%;
   border-radius: 32px;
@@ -3268,7 +3336,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background: url(Mesh.png),linear-gradient(93.06deg,#FF00C7 2.66%,#FF9FFB 98.99%);
 }
 
-.c77 {
+.c78 {
   color: white;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3282,20 +3350,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   flex-direction: column;
 }
 
-.c78 {
+.c79 {
   font-weight: 535;
   font-size: 28px;
   line-height: 36px;
 }
 
-.c79 {
+.c80 {
   margin: 10px 10px 0 0;
   font-weight: 535;
   font-size: 16px;
   line-height: 20px;
 }
 
-.c80 {
+.c81 {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3309,22 +3377,22 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c80:hover {
+.c81:hover {
   opacity: 0.6;
 }
 
-.c83 {
+.c84 {
   color: white;
   border: 1px solid white;
 }
 
-.c43 {
+.c44 {
   display: grid;
   grid-auto-rows: auto;
   grid-row-gap: 4px;
 }
 
-.c40 {
+.c41 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -3332,12 +3400,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: opacity 250ms ease-in-out;
 }
 
-.c14 {
+.c15 {
   display: inline-block;
   height: inherit;
 }
 
-.c35 {
+.c36 {
   opacity: 0;
   -webkit-transition: opacity 250ms ease-in;
   transition: opacity 250ms ease-in;
@@ -3346,7 +3414,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border-radius: 50%;
 }
 
-.c34 {
+.c35 {
   width: 24px;
   height: 24px;
   background: #22222212;
@@ -3356,7 +3424,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border-radius: 50%;
 }
 
-.c33 {
+.c34 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3364,7 +3432,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   display: flex;
 }
 
-.c28 {
+.c29 {
   color: #222222;
   pointer-events: auto;
   width: 0;
@@ -3385,36 +3453,36 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   text-align: right;
 }
 
-.c28::-webkit-search-decoration {
+.c29::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-.c28 [type='number'] {
+.c29 [type='number'] {
   -moz-appearance: textfield;
 }
 
-.c28::-webkit-outer-spin-button,
-.c28::-webkit-inner-spin-button {
+.c29::-webkit-outer-spin-button,
+.c29::-webkit-inner-spin-button {
   -webkit-appearance: none;
 }
 
-.c28::-webkit-input-placeholder {
+.c29::-webkit-input-placeholder {
   color: #CECECE;
 }
 
-.c28::-moz-placeholder {
+.c29::-moz-placeholder {
   color: #CECECE;
 }
 
-.c28:-ms-input-placeholder {
+.c29:-ms-input-placeholder {
   color: #CECECE;
 }
 
-.c28::placeholder {
+.c29::placeholder {
   color: #CECECE;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3431,13 +3499,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   will-change: height;
 }
 
-.c25 {
+.c26 {
   min-height: 44px;
   border-radius: 20px;
   width: initial;
 }
 
-.c31 {
+.c32 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3470,12 +3538,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   animation: none;
 }
 
-.c31:hover,
-.c31:active {
+.c32:hover,
+.c32:active {
   background-color: #F9F9F9;
 }
 
-.c31:before {
+.c32:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -3486,15 +3554,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   content: '';
 }
 
-.c31:hover:before {
+.c32:hover:before {
   background-color: #98A1C014;
 }
 
-.c31:active:before {
+.c32:active:before {
   background-color: #B8C0DC3d;
 }
 
-.c45 {
+.c46 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -3527,12 +3595,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   animation: none;
 }
 
-.c45:hover,
-.c45:active {
+.c46:hover,
+.c46:active {
   background-color: #FC72FF;
 }
 
-.c45:before {
+.c46:before {
   background-size: 100%;
   border-radius: inherit;
   position: absolute;
@@ -3543,15 +3611,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   content: '';
 }
 
-.c45:hover:before {
+.c46:hover:before {
   background-color: #98A1C014;
 }
 
-.c45:active:before {
+.c46:active:before {
   background-color: #B8C0DC3d;
 }
 
-.c27 {
+.c28 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3569,7 +3637,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: space-between;
 }
 
-.c38 {
+.c39 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3586,12 +3654,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   line-height: 1rem;
 }
 
-.c38 span:hover {
+.c39 span:hover {
   cursor: pointer;
   color: #4a4a4a;
 }
 
-.c39 {
+.c40 {
   -webkit-box-pack: end;
   -webkit-justify-content: flex-end;
   -ms-flex-pack: end;
@@ -3600,7 +3668,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   padding: 8px 0px 0px 0px;
 }
 
-.c32 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3616,35 +3684,35 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   width: 100%;
 }
 
-.c37 {
+.c38 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c37 path {
+.c38 path {
   stroke: #222222;
   stroke-width: 2px;
 }
 
-.c46 {
+.c47 {
   margin: 0 0.25rem 0 0.35rem;
   height: 35%;
   margin-left: 8px;
 }
 
-.c46 path {
+.c47 path {
   stroke: #FFFFFF;
   stroke-width: 2px;
 }
 
-.c36 {
+.c37 {
   margin: 0 0.25rem 0 0.25rem;
   font-size: 20px;
   font-weight: 535;
 }
 
-.c29 {
+.c30 {
   -webkit-filter: none;
   filter: none;
   opacity: 1;
@@ -3701,7 +3769,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   padding-top: 12px;
 }
 
-.c41 {
+.c42 {
   border-radius: 12px;
   height: 40px;
   width: 40px;
@@ -3716,21 +3784,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   z-index: 2;
 }
 
-.c41:hover {
+.c42:hover {
   cursor: pointer;
   opacity: 0.8;
 }
 
-.c22 {
+.c23 {
   height: 24px;
   width: 24px;
 }
 
-.c22 > * {
+.c23 > * {
   fill: #7D7D7D;
 }
 
-.c20 {
+.c21 {
   border: none;
   background-color: transparent;
   margin: 0;
@@ -3739,35 +3807,45 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   outline: none;
 }
 
-.c20:not([disabled]):hover {
+.c21:not([disabled]):hover {
   opacity: 0.7;
 }
 
-.c21 {
+.c22 {
   padding: 6px 12px;
   border-radius: 16px;
 }
 
-.c19 {
+.c20 {
   position: relative;
 }
 
-.c18 {
+.c19 {
   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;
 }
 
-.c18:focus {
+.c19:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c18:active {
+.c19:active {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
+.c19:hover {
+  opacity: 0.6;
+}
+
 .c10 {
   margin-bottom: 10px;
   color: #7D7D7D;
@@ -3778,7 +3856,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   gap: 16px;
 }
 
-.c42 {
+.c14 {
+  color: #222222;
+  gap: 4px;
+  font-weight: 485;
+}
+
+.c14:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c14:active {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c43 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3795,7 +3889,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: 100%;
 }
 
-.c23 {
+.c24 {
   background-color: #F9F9F9;
   border-radius: 16px;
   color: #7D7D7D;
@@ -3807,7 +3901,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   position: relative;
 }
 
-.c23:before {
+.c24:before {
   box-sizing: border-box;
   background-size: 100%;
   border-radius: inherit;
@@ -3821,15 +3915,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   border: 1px solid #F9F9F9;
 }
 
-.c23:hover:before {
+.c24:hover:before {
   border-color: #98A1C014;
 }
 
-.c23:focus-within:before {
+.c24:focus-within:before {
   border-color: #B8C0DC3d;
 }
 
-.c44 {
+.c45 {
   border-bottom: 1px solid #FFFFFF;
 }
 
@@ -3856,7 +3950,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   overflow-x: hidden;
 }
 
-.c51 {
+.c52 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3880,7 +3974,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: calc(100vh - 48px);
 }
 
-.c52 {
+.c53 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3901,7 +3995,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: calc(100vh - 48px);
 }
 
-.c53 {
+.c54 {
   position: absolute;
   top: 68px;
   bottom: 0;
@@ -3914,7 +4008,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   height: 100%;
 }
 
-.c54 {
+.c55 {
   position: absolute;
   display: -webkit-box;
   display: -webkit-flex;
@@ -3942,11 +4036,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   pointer-events: none;
 }
 
-.c54 * {
+.c55 * {
   pointer-events: auto;
 }
 
-.c63 {
+.c64 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3966,11 +4060,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   align-items: center;
 }
 
-.c63:hover {
+.c64:hover {
   color: #CECECE;
 }
 
-.c55 {
+.c56 {
   color: transparent;
   font-size: 36px;
   line-height: 44px;
@@ -3982,7 +4076,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   -webkit-background-clip: text;
 }
 
-.c57 {
+.c58 {
   color: #7D7D7D;
   font-size: 16px;
   line-height: 24px;
@@ -3992,7 +4086,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   margin: 0 0 32px;
 }
 
-.c56 {
+.c57 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4003,12 +4097,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   justify-content: center;
 }
 
-.c59 {
+.c60 {
   padding: 16px 0px;
   border-radius: 24px;
 }
 
-.c60 {
+.c61 {
   background: linear-gradient(93.06deg,#ff00c7 2.66%,#ff9ffb 98.99%);
   border: none;
   color: #FFFFFF;
@@ -4016,24 +4110,24 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: all 250ms ease;
 }
 
-.c60:hover {
+.c61:hover {
   box-shadow: 0px 0px 16px 0px #ff00c7;
 }
 
-.c61 {
+.c62 {
   margin: 0px;
   font-size: 16px;
   font-weight: 535;
   white-space: nowrap;
 }
 
-.c58 {
+.c59 {
   max-width: 300px;
   width: 100%;
   pointer-events: auto;
 }
 
-.c62 {
+.c63 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -4053,11 +4147,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   transition: 250ms ease opacity;
 }
 
-.c62:hover {
+.c63:hover {
   opacity: 0.6;
 }
 
-.c64 {
+.c65 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4074,7 +4168,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background: linear-gradient(179.82deg,rgba(255,255,255,0) 0.16%,#eaeaea 99.85%);
 }
 
-.c65 {
+.c66 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -4087,7 +4181,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   grid-template-columns: 1fr;
 }
 
-.c72 {
+.c73 {
   display: grid;
   gap: 12px;
   width: 100%;
@@ -4142,7 +4236,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c84 {
+  .c85 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -4154,7 +4248,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c86 {
+  .c87 {
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
@@ -4163,75 +4257,75 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c101 {
+  .c102 {
     display: none;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c87 {
+  .c88 {
     display: block;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c94 {
+  .c95 {
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 24px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c95 {
+  .c96 {
     margin: 0;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c66 {
+  .c67 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c66 {
+  .c67 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c71 {
+  .c72 {
     height: 360px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c71 {
+  .c72 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c73 {
+  .c74 {
     height: 260px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c73 {
+  .c74 {
     padding: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c68 {
+  .c69 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c69 {
+  .c70 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -4239,7 +4333,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1280px) {
-  .c74 {
+  .c75 {
     font-size: 20px;
     line-height: 28px;
     max-width: 480px;
@@ -4247,7 +4341,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1024px) {
-  .c76 {
+  .c77 {
     height: 140px;
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
@@ -4256,21 +4350,21 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:1280px) {
-  .c78 {
+  .c79 {
     font-size: 28px;
     line-height: 36px;
   }
 }
 
 @media screen and (min-width:1280px) {
-  .c79 {
+  .c80 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c80 {
+  .c81 {
     width: auto;
   }
 }
@@ -4288,79 +4382,79 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 @media screen and (min-width:768px) {
-  .c51 {
+  .c52 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c52 {
+  .c53 {
     height: 100vh;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c55 {
+  .c56 {
     font-size: 48px;
     line-height: 56px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c55 {
+  .c56 {
     font-size: 64px;
     line-height: 72px;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c57 {
+  .c58 {
     font-size: 20px;
     line-height: 28px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c61 {
+  .c62 {
     font-size: 20px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c62 {
+  .c63 {
     visibility: visible;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c64 {
+  .c65 {
     padding: 0 96px 5rem;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c65 {
+  .c66 {
     grid-template-columns: 1fr 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c65 {
+  .c66 {
     grid-template-columns: 1fr 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:640px) {
-  .c72 {
+  .c73 {
     grid-template-columns: 1fr;
     gap: 32px;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c72 {
+  .c73 {
     grid-template-columns: 1fr 1fr 1fr;
     gap: 32px;
   }
@@ -4394,17 +4488,17 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 <div
                   class="c7 c8 c11 c12"
                 >
-                  <div
-                    class="c13 css-n8z49y"
+                  <button
+                    class="c13 c14"
                   >
                     Swap
-                  </div>
+                  </button>
                   <div
-                    class="c14"
+                    class="c15"
                   >
                     <div>
                       <button
-                        class="c15 c16 c17 c18"
+                        class="c16 c17 c18 c19"
                         data-testid="buy-fiat-button"
                       >
                         Buy
@@ -4416,19 +4510,19 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                   class="c7 c8 c11"
                 >
                   <div
-                    class="c19"
+                    class="c20"
                   >
                     <button
                       aria-label="Transaction Settings"
-                      class="c20"
+                      class="c21"
                       data-testid="open-settings-dialog-button"
                       id="open-settings-dialog-button"
                     >
                       <div
-                        class="c7 c8 c21"
+                        class="c7 c8 c22"
                       >
                         <svg
-                          class="c22"
+                          class="c23"
                           fill="none"
                           height="24"
                           viewBox="0 0 24 24"
@@ -4449,23 +4543,23 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 style="display: relative;"
               >
                 <div
-                  class="c23"
+                  class="c24"
                 >
                   <div
-                    class="c24"
+                    class="c25"
                     id="swap-currency-input"
                   >
                     <div
-                      class="c25"
+                      class="c26"
                     >
                       <div
-                        class="c26 css-142zc9n"
+                        class="c27 css-142zc9n"
                         style="user-select: none;"
                       >
                         You pay
                       </div>
                       <div
-                        class="c27"
+                        class="c28"
                       >
                         <div
                           style="display: flex; flex-grow: 1;"
@@ -4473,7 +4567,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                           <input
                             autocomplete="off"
                             autocorrect="off"
-                            class="c28 c29 token-amount-input"
+                            class="c29 c30 token-amount-input"
                             id="swap-currency-input"
                             inputmode="decimal"
                             maxlength="79"
@@ -4487,40 +4581,40 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                         </div>
                         <div>
                           <div
-                            class="c14"
+                            class="c15"
                           >
                             <button
-                              class="c15 c16 c30 c31 open-currency-select-button"
+                              class="c16 c17 c31 c32 open-currency-select-button"
                             >
                               <span
-                                class="c32"
+                                class="c33"
                               >
                                 <div
                                   class="c7 c8 c11"
                                 >
                                   <div
-                                    class="c33"
+                                    class="c34"
                                     style="height: 24px; width: 24px; margin-right: 2px;"
                                   >
                                     <div
-                                      class="c34"
+                                      class="c35"
                                     >
                                       <img
                                         alt="ETH logo"
-                                        class="c35"
+                                        class="c36"
                                         loading="lazy"
                                         src="ethereum-logo.png"
                                       />
                                     </div>
                                   </div>
                                   <span
-                                    class="c36 token-symbol-container"
+                                    class="c37 token-symbol-container"
                                   >
                                     ETH
                                   </span>
                                 </div>
                                 <svg
-                                  class="c37"
+                                  class="c38"
                                 >
                                   dropdown.svg
                                 </svg>
@@ -4530,13 +4624,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c38 c39"
+                        class="c39 c40"
                       >
                         <div
                           class="c7 c8 c9"
                         >
                           <div
-                            class="c40"
+                            class="c41"
                           />
                           <span />
                         </div>
@@ -4545,10 +4639,10 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c41"
+                  class="c42"
                 >
                   <div
-                    class="c42"
+                    class="c43"
                     color="#222222"
                     data-testid="swap-currency-button"
                   >
@@ -4577,27 +4671,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 </div>
               </div>
               <div
-                class="c43"
+                class="c44"
               >
                 <div>
                   <div
-                    class="c23 c44"
+                    class="c24 c45"
                   >
                     <div
-                      class="c24"
+                      class="c25"
                       id="swap-currency-output"
                     >
                       <div
-                        class="c25"
+                        class="c26"
                       >
                         <div
-                          class="c26 css-142zc9n"
+                          class="c27 css-142zc9n"
                           style="user-select: none;"
                         >
                           You receive
                         </div>
                         <div
-                          class="c27"
+                          class="c28"
                         >
                           <div
                             style="display: flex; flex-grow: 1;"
@@ -4605,7 +4699,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                             <input
                               autocomplete="off"
                               autocorrect="off"
-                              class="c28 c29 token-amount-input"
+                              class="c29 c30 token-amount-input"
                               id="swap-currency-output"
                               inputmode="decimal"
                               maxlength="79"
@@ -4619,25 +4713,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                           </div>
                           <div>
                             <div
-                              class="c14"
+                              class="c15"
                             >
                               <button
-                                class="c15 c16 c30 c45 open-currency-select-button"
+                                class="c16 c17 c31 c46 open-currency-select-button"
                               >
                                 <span
-                                  class="c32"
+                                  class="c33"
                                 >
                                   <div
                                     class="c7 c8 c11"
                                   >
                                     <span
-                                      class="c36 token-symbol-container"
+                                      class="c37 token-symbol-container"
                                     >
                                       Select token
                                     </span>
                                   </div>
                                   <svg
-                                    class="c46"
+                                    class="c47"
                                   >
                                     dropdown.svg
                                   </svg>
@@ -4647,13 +4741,13 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                           </div>
                         </div>
                         <div
-                          class="c38 c39"
+                          class="c39 c40"
                         >
                           <div
                             class="c7 c8 c9"
                           >
                             <div
-                              class="c40"
+                              class="c41"
                             />
                             <span />
                           </div>
@@ -4664,11 +4758,11 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
                 </div>
                 <div>
                   <button
-                    class="c47 c16 c48"
+                    class="c48 c17 c49"
                     font-weight="535"
                   >
                     <div
-                      class="c49 c50"
+                      class="c50 c51"
                     />
                     Connect wallet
                   </button>
@@ -4680,53 +4774,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       </a>
     </div>
     <div
-      class="c51"
+      class="c52"
     />
     <div
-      class="c52"
+      class="c53"
     >
       <div
-        class="c53"
+        class="c54"
       />
     </div>
     <div
-      class="c54"
+      class="c55"
     >
       <h1
-        class="c55"
+        class="c56"
       >
         Trade crypto and NFTs with confidence
       </h1>
       <div
-        class="c56"
+        class="c57"
       >
         <div
-          class="c57"
+          class="c58"
         >
           Buy, sell, and explore tokens and NFTs
         </div>
       </div>
       <span
-        class="c58"
+        class="c59"
       >
         <a
-          class="c2 c16 c59 c60"
+          class="c2 c17 c60 c61"
           href="/swap"
         >
           <p
-            class="c61"
+            class="c62"
           >
             Get started
           </p>
         </a>
       </span>
       <div
-        class="c62"
+        class="c63"
       >
         Learn more
       </div>
       <a
-        class="c63"
+        class="c64"
         href="https://uniswapwallet.onelink.me/8q3y/79gveilz"
       >
         <svg
@@ -4743,32 +4837,32 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
       </a>
     </div>
     <div
-      class="c64"
+      class="c65"
     >
       <div
-        class="c65"
+        class="c66"
         cols="2"
       >
         <a
-          class="c66"
+          class="c67"
           href="/swap"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Swap tokens
             </div>
           </div>
           <div
-            class="c69"
+            class="c70"
             type="Primary"
           >
             Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.
             <div
-              class="c69 c70"
+              class="c70 c71"
               type="Primary"
             >
               Trade Tokens
@@ -4776,25 +4870,25 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c71"
+          class="c72"
           href="/nfts"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Trade NFTs
             </div>
           </div>
           <div
-            class="c69"
+            class="c70"
             type="Primary"
           >
             Buy and sell NFTs across marketplaces to find more listings at better prices.
             <div
-              class="c69 c70"
+              class="c70 c71"
               type="Primary"
             >
               Explore NFTs
@@ -4803,20 +4897,20 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
       </div>
       <div
-        class="c72"
+        class="c73"
         cols="3"
       >
         <a
-          class="c73"
+          class="c74"
           href="https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Buy crypto
             </div>
@@ -4843,12 +4937,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </svg>
           </div>
           <div
-            class="c74"
+            class="c75"
             type="Secondary"
           >
             Buy crypto with your credit card or bank account at the best rates.
             <div
-              class="c74 c70"
+              class="c75 c71"
               type="Secondary"
             >
               Buy now
@@ -4856,30 +4950,30 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c73"
+          class="c74"
           href="/pools"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Earn
             </div>
             <img
               alt="Analytics"
-              class="c75"
+              class="c76"
               src="aboutArrowLight.png"
             />
           </div>
           <div
-            class="c74"
+            class="c75"
             type="Secondary"
           >
             Provide liquidity to pools on Uniswap and earn fees on swaps.
             <div
-              class="c74 c70"
+              class="c75 c71"
               type="Secondary"
             >
               Provide liquidity
@@ -4887,16 +4981,16 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </a>
         <a
-          class="c73"
+          class="c74"
           href="https://docs.uniswap.org"
           rel="noopenener noreferrer"
           target="_blank"
         >
           <div
-            class="c67"
+            class="c68"
           >
             <div
-              class="c68"
+              class="c69"
             >
               Build dApps
             </div>
@@ -4923,12 +5017,12 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </svg>
           </div>
           <div
-            class="c74"
+            class="c75"
             type="Secondary"
           >
             Build apps and tools on the largest DeFi protocol on Ethereum.
             <div
-              class="c74 c70"
+              class="c75 c71"
               type="Secondary"
             >
               Developer docs
@@ -4937,27 +5031,27 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </a>
       </div>
       <div
-        class="c76"
+        class="c77"
       >
         <div
-          class="c77"
+          class="c78"
         >
           <div
-            class="c78"
+            class="c79"
           >
             Powered by the Uniswap Protocol
           </div>
           <div
-            class="c79"
+            class="c80"
           >
             The leading decentralized crypto trading protocol, governed by a global community.
           </div>
         </div>
         <div
-          class="c80"
+          class="c81"
         >
           <a
-            class="c81 c82 c83"
+            class="c82 c83 c84"
             href="https://uniswap.org"
             rel="noopener noreferrer"
             target="_blank"
@@ -4968,53 +5062,53 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
         </div>
       </div>
       <div
-        class="c84"
+        class="c85"
       >
         <div
-          class="c85 c86"
+          class="c86 c87"
         >
           <img
             alt="Uniswap Logo"
-            class="c87"
+            class="c88"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c88"
+            class="c89"
           >
             <a
-              class="c89"
+              class="c90"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c91"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c90"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c92"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c90"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c93"
                 size="32"
               >
                 github.svg
@@ -5022,7 +5116,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <span
-            class="c93"
+            class="c94"
           >
             © 
             2023
@@ -5030,51 +5124,51 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </span>
         </div>
         <div
-          class="c94"
+          class="c95"
         >
           <div
-            class="c95"
+            class="c96"
           >
             <span
-              class="c96"
+              class="c97"
             >
               App
             </span>
             <a
-              class="c97 c98"
+              class="c98 c99"
               href="/swap"
             >
               Swap
             </a>
             <a
-              class="c97 c98"
+              class="c98 c99"
               href="/tokens"
             >
               Tokens
             </a>
             <a
-              class="c97 c98"
+              class="c98 c99"
               href="/nfts"
             >
               NFTs
             </a>
             <a
-              class="c97 c98"
+              class="c98 c99"
               href="/pools"
             >
               Pools
             </a>
           </div>
           <div
-            class="c95"
+            class="c96"
           >
             <span
-              class="c96"
+              class="c97"
             >
               Protocol
             </span>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://uniswap.org/community"
               rel="noopener noreferrer"
               target="_blank"
@@ -5082,7 +5176,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Community
             </a>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://uniswap.org/governance"
               rel="noopener noreferrer"
               target="_blank"
@@ -5090,7 +5184,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Governance
             </a>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://uniswap.org/developers"
               rel="noopener noreferrer"
               target="_blank"
@@ -5099,15 +5193,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <div
-            class="c95"
+            class="c96"
           >
             <span
-              class="c96"
+              class="c97"
             >
               Company
             </span>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://boards.greenhouse.io/uniswaplabs"
               rel="noopener noreferrer"
               target="_blank"
@@ -5115,7 +5209,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Careers
             </a>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://uniswap.org/blog"
               rel="noopener noreferrer"
               target="_blank"
@@ -5124,15 +5218,15 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <div
-            class="c95"
+            class="c96"
           >
             <span
-              class="c96"
+              class="c97"
             >
               Get Help
             </span>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://support.uniswap.org/hc/en-us/requests/new"
               rel="noopener noreferrer"
               target="_blank"
@@ -5140,7 +5234,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
               Contact Us
             </a>
             <a
-              class="c99 c100"
+              class="c100 c101"
               href="https://support.uniswap.org/hc/en-us"
               rel="noopener noreferrer"
               target="_blank"
@@ -5150,50 +5244,50 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
           </div>
         </div>
         <div
-          class="c85 c101"
+          class="c86 c102"
         >
           <img
             alt="Uniswap Logo"
-            class="c87"
+            class="c88"
             src="unicornEmbossLight.png"
           />
           <div
-            class="c88"
+            class="c89"
           >
             <a
-              class="c89"
+              class="c90"
               href="https://discord.gg/FCfyBSbCU5"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c90"
+                class="c91"
                 size="32"
               >
                 discord.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c90"
               href="https://twitter.com/uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c91"
+                class="c92"
                 size="32"
               >
                 twitter-safe.svg
               </svg>
             </a>
             <a
-              class="c89"
+              class="c90"
               href="https://github.com/Uniswap"
               rel="noopener noreferrer"
               target="_blank"
             >
               <svg
-                class="c92"
+                class="c93"
                 size="32"
               >
                 github.svg
@@ -5201,7 +5295,7 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
             </a>
           </div>
           <span
-            class="c93"
+            class="c94"
           >
             © 
             2023

src/pages/Swap/index.tsx

@@ -26,7 +26,7 @@ import PriceImpactModal from 'components/swap/PriceImpactModal'
 import PriceImpactWarning from 'components/swap/PriceImpactWarning'
 import { ArrowWrapper, PageWrapper, SwapWrapper } from 'components/swap/styled'
 import SwapDetailsDropdown from 'components/swap/SwapDetailsDropdown'
-import SwapHeader from 'components/swap/SwapHeader'
+import SwapHeader, { SwapTab } from 'components/swap/SwapHeader'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { useConnectionReady } from 'connection/eagerlyConnect'
@@ -601,8 +601,10 @@ export function Swap({
   const isDark = useIsDarkMode()
   const isUniswapXDefaultEnabled = useUniswapXDefaultEnabled()
 
+  const [currentTab, setCurrentTab] = useState<SwapTab>(SwapTab.Swap)
+
   const swapElement = (
-    <SwapWrapper isDark={isDark} className={className} id="swap-page">
+    <>
       <TokenSafetyModal
         isOpen={importTokensNotInDefault.length > 0 && !dismissTokenWarning}
         tokenAddress={importTokensNotInDefault[0]?.address}
@@ -611,7 +613,6 @@ export function Swap({
         onCancel={handleDismissTokenWarning}
         showCancel={true}
       />
-      <SwapHeader trade={trade} autoSlippage={autoSlippage} chainId={chainId} />
       {trade && showConfirm && (
         <ConfirmSwapModal
           trade={trade}
@@ -832,13 +833,23 @@ export function Swap({
         </div>
       </AutoColumn>
       {!showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall={false} swapInfo={swapInfo} />}
-    </SwapWrapper>
+    </>
   )
 
   return (
-    <>
-      {swapElement}
+    <SwapWrapper isDark={isDark} className={className} id="swap-page">
+      <SwapHeader
+        selectedTab={currentTab}
+        onClickTab={(tab) => {
+          setCurrentTab(tab)
+        }}
+        trade={trade}
+        autoSlippage={autoSlippage}
+        chainId={chainId}
+      />
+      {/* todo: build Limit UI */}
+      {currentTab === SwapTab.Swap ? swapElement : undefined}
       {showOptInSmall && !isUniswapXDefaultEnabled && <UniswapXOptIn isSmall swapInfo={swapInfo} />}
-    </>
+    </SwapWrapper>
   )
 }