fix: pointer events on Swap (#5654)

* feat: decouple landing from swap

* implement pointer events

src/components/swap/styleds.tsx

@@ -23,19 +23,17 @@ export const PageWrapper = styled.div`
 `
 
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
-export const SwapWrapper = styled.main<{ margin?: string; maxWidth?: string; open: boolean }>`
+export const SwapWrapper = styled.main`
   position: relative;
   background: ${({ theme }) => theme.backgroundSurface};
   border-radius: 16px;
   border: 1px solid ${({ theme }) => theme.backgroundOutline};
   padding: 8px;
   z-index: ${Z_INDEX.deprecated_content};
-  cursor: ${({ open }) => open && 'pointer'};
   transition: transform 250ms ease;
 
   &:hover {
-    border: 1px solid ${({ theme, open }) => (open ? theme.accentAction : theme.backgroundOutline)};
+    border: 1px solid ${({ theme }) => theme.backgroundOutline};
-    transform: ${({ open }) => (open ? `translateY(-4px)` : `none`)};
   }
 `
 

src/pages/Landing/index.tsx

@@ -5,7 +5,7 @@ import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landi
 import Swap from 'pages/Swap'
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Link } from 'react-router-dom'
+import { Link as NativeLink } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
@@ -168,6 +168,23 @@ const ActionsWrapper = styled.span`
   }
 `
 
+const LandingSwap = styled(Swap)`
+  * {
+    pointer-events: none;
+  }
+
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.accentAction};
+    transform: translateY(-4px);
+  }
+`
+
+const Link = styled(NativeLink)`
+  text-decoration: none;
+  max-width: 480px;
+  width: 100%;
+`
+
 export default function Landing() {
   const isDarkMode = useIsDarkMode()
 
@@ -193,7 +210,9 @@ export default function Landing() {
   return (
     <Trace page={PageName.LANDING_PAGE} shouldLogImpression>
       <PageWrapper>
-        <Swap />
+        <Link to="/swap">
+          <LandingSwap />
+        </Link>
         <Glow />
         <Gradient isDarkMode={isDarkMode} />
         <ContentWrapper isDarkMode={isDarkMode}>

src/pages/Swap/index.tsx

@@ -14,7 +14,6 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { isSupportedChain } from 'constants/chains'
-import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
 import { usePermit2Enabled } from 'featureFlags/flags/permit2'
 import usePermit, { PermitState } from 'hooks/usePermit2'
 import { useSwapCallback } from 'hooks/useSwapCallback'
@@ -24,7 +23,7 @@ import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ReactNode } from 'react'
 import { AlertTriangle, ArrowDown, CheckCircle, HelpCircle, Info } from 'react-feather'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import { useToggleWalletModal } from 'state/application/hooks'
 import { InterfaceTrade } from 'state/routing/types'
@@ -146,7 +145,7 @@ function largerPercentValue(a?: Percent, b?: Percent) {
 
 const TRADE_STRING = 'SwapRouter'
 
-export default function Swap() {
+export default function Swap({ className }: { className?: string }) {
   const navigate = useNavigate()
   const { account, chainId } = useWeb3React()
   const loadedUrlParams = useDefaultsFromURLSearch()
@@ -550,10 +549,6 @@ export default function Swap() {
     !showWrap && userHasSpecifiedInputOutput && (trade || routeIsLoading || routeIsSyncing)
   )
 
-  const location = useLocation()
-
-  const landingPageFlag = useLandingPageFlag()
-
   return (
     <Trace page={PageName.SWAP_PAGE} shouldLogImpression>
       <>
@@ -566,11 +561,7 @@ export default function Swap() {
           showCancel={true}
         />
         <PageWrapper>
-          <SwapWrapper
+          <SwapWrapper className={className} id="swap-page">
-            onClick={() => landingPageFlag === LandingPageVariant.Enabled && navigate('/swap')}
-            open={landingPageFlag === LandingPageVariant.Enabled && location.pathname === '/'}
-            id="swap-page"
-          >
             <SwapHeader allowedSlippage={allowedSlippage} />
             <ConfirmSwapModal
               isOpen={showConfirm}