diff --git a/src/components/swap/styleds.tsx b/src/components/swap/styleds.tsx index a3dd816ade..f469ec7557 100644 --- a/src/components/swap/styleds.tsx +++ b/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)}; - transform: ${({ open }) => (open ? `translateY(-4px)` : `none`)}; + border: 1px solid ${({ theme }) => theme.backgroundOutline}; } ` diff --git a/src/pages/Landing/index.tsx b/src/pages/Landing/index.tsx index 20eb0658f3..9864d8cc83 100644 --- a/src/pages/Landing/index.tsx +++ b/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 ( - + + + diff --git a/src/pages/Swap/index.tsx b/src/pages/Swap/index.tsx index 7a30ef508f..64b30ae7c6 100644 --- a/src/pages/Swap/index.tsx +++ b/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 ( <> @@ -566,11 +561,7 @@ export default function Swap() { showCancel={true} /> - landingPageFlag === LandingPageVariant.Enabled && navigate('/swap')} - open={landingPageFlag === LandingPageVariant.Enabled && location.pathname === '/'} - id="swap-page" - > +