Skip to content

I
interface
Commit a2d98607 authored by Zach Pomerantz's avatar Zach Pomerantz Committed by GitHub
Browse files
Options

fix: use redirect for landing (#6993) 

* fix: use redirect for landing

* chore: rm console.log
parent 27d91529
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 97 deletions
src/pages/Landing/index.tsx
View file @ a2d98607
...@@ -10,8 +10,9 @@ import { BaseButton } from 'components/Button' ...@@ -10,8 +10,9 @@ import { BaseButton } from 'components/Button'
import { AppleLogo } from 'components/Logo/AppleLogo' import { AppleLogo } from 'components/Logo/AppleLogo'
import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes' import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
import Swap from 'pages/Swap' import Swap from 'pages/Swap'
import { RedirectPathToSwapOnly } from 'pages/Swap/redirects'
import { parse } from 'qs' import { parse } from 'qs'
import { useEffect, useMemo, useRef, useState } from 'react' import { useEffect, useMemo, useRef } from 'react'
import { ArrowDownCircle } from 'react-feather' import { ArrowDownCircle } from 'react-feather'
import { useLocation, useNavigate } from 'react-router-dom' import { useLocation, useNavigate } from 'react-router-dom'
import { Link as NativeLink } from 'react-router-dom' import { Link as NativeLink } from 'react-router-dom'
...@@ -300,35 +301,28 @@ const Link = styled(NativeLink)` ...@@ -300,35 +301,28 @@ const Link = styled(NativeLink)`
export default function Landing() { export default function Landing() {
const isDarkMode = useIsDarkMode() const isDarkMode = useIsDarkMode()
const cardsRef = useRef<HTMLDivElement>(null) const cardsRef = useRef<HTMLDivElement>(null)
const [showContent, setShowContent] = useState(false)
const selectedWallet = useAppSelector((state) => state.user.selectedWallet) const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
const navigate = useNavigate() const shouldDisableNFTRoutes = useDisableNFTRoutes()
const location = useLocation() const cards = useMemo(
const queryParams = parse(location.search, { () => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))),
ignoreQueryPrefix: true, [shouldDisableNFTRoutes]
}) )
const [accountDrawerOpen] = useAccountDrawer() const [accountDrawerOpen] = useAccountDrawer()
const navigate = useNavigate()
useEffect(() => { useEffect(() => {
if ((queryParams.intro || !selectedWallet) && !accountDrawerOpen) { if (accountDrawerOpen) {
setShowContent(true)
} else {
setShowContent(false)
setTimeout(() => { setTimeout(() => {
navigate('/swap') navigate('/swap')
}, TRANSITION_DURATIONS.medium) }, TRANSITION_DURATIONS.fast)
} }
}, [navigate, selectedWallet, queryParams.intro, accountDrawerOpen]) }, [accountDrawerOpen, navigate])
const shouldDisableNFTRoutes = useDisableNFTRoutes() const queryParams = parse(useLocation().search, { ignoreQueryPrefix: true })
if (selectedWallet && !queryParams.intro) {
const cards = useMemo( return <RedirectPathToSwapOnly />
() => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))), }
[shouldDisableNFTRoutes]
)
return ( return (
<Trace page={InterfacePageName.LANDING_PAGE} shouldLogImpression> <Trace page={InterfacePageName.LANDING_PAGE} shouldLogImpression>
...@@ -344,82 +338,78 @@ export default function Landing() { ...@@ -344,82 +338,78 @@ export default function Landing() {
</Link> </Link>
</TraceEvent> </TraceEvent>
</LandingSwapContainer> </LandingSwapContainer>
{showContent && ( <Gradient isDarkMode={isDarkMode} />
<> <GlowContainer>
<Gradient isDarkMode={isDarkMode} /> <Glow />
<GlowContainer> </GlowContainer>
<Glow /> <ContentContainer isDarkMode={isDarkMode}>
</GlowContainer> <TitleText isDarkMode={isDarkMode}>
<ContentContainer isDarkMode={isDarkMode}> {shouldDisableNFTRoutes ? (
<TitleText isDarkMode={isDarkMode}> <Trans>Trade crypto with confidence</Trans>
{shouldDisableNFTRoutes ? ( ) : (
<Trans>Trade crypto with confidence</Trans> <Trans>Trade crypto and NFTs with confidence</Trans>
) : ( )}
<Trans>Trade crypto and NFTs with confidence</Trans> </TitleText>
)} <SubTextContainer>
</TitleText> <SubText>
<SubTextContainer> {shouldDisableNFTRoutes ? (
<SubText> <Trans>Buy, sell, and explore tokens</Trans>
{shouldDisableNFTRoutes ? ( ) : (
<Trans>Buy, sell, and explore tokens</Trans> <Trans>Buy, sell, and explore tokens and NFTs</Trans>
) : ( )}
<Trans>Buy, sell, and explore tokens and NFTs</Trans> </SubText>
)} </SubTextContainer>
</SubText> <ActionsContainer>
</SubTextContainer> <TraceEvent
<ActionsContainer> events={[BrowserEvent.onClick]}
<TraceEvent name={SharedEventName.ELEMENT_CLICKED}
events={[BrowserEvent.onClick]} element={InterfaceElementName.CONTINUE_BUTTON}
name={SharedEventName.ELEMENT_CLICKED} >
element={InterfaceElementName.CONTINUE_BUTTON} <ButtonCTA as={Link} to="/swap">
> <ButtonCTAText>
<ButtonCTA as={Link} to="/swap"> <Trans>Get started</Trans>
<ButtonCTAText> </ButtonCTAText>
<Trans>Get started</Trans> </ButtonCTA>
</ButtonCTAText> </TraceEvent>
</ButtonCTA> </ActionsContainer>
</TraceEvent> <LearnMoreContainer
</ActionsContainer> onClick={() => {
<LearnMoreContainer cardsRef?.current?.scrollIntoView({ behavior: 'smooth' })
onClick={() => { }}
cardsRef?.current?.scrollIntoView({ behavior: 'smooth' }) >
}} <Trans>Learn more</Trans>
> <LearnMoreArrow />
<Trans>Learn more</Trans> </LearnMoreContainer>
<LearnMoreArrow />
</LearnMoreContainer> <DownloadWalletLink
{...getDownloadAppLinkProps({
<DownloadWalletLink // landing page specific tracking params
{...getDownloadAppLinkProps({ microSiteParams: `utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1`,
// landing page specific tracking params appStoreParams: `ct=Uniswap-Home-Page&mt=8`,
microSiteParams: `utm_source=home_page&utm_medium=webapp&utm_campaign=wallet_microsite&utm_id=1`, })}
appStoreParams: `ct=Uniswap-Home-Page&mt=8`, >
})} <AppleLogo width="20" height="20" />
> Download the Uniswap Wallet for iOS
<AppleLogo width="20" height="20" /> </DownloadWalletLink>
Download the Uniswap Wallet for iOS </ContentContainer>
</DownloadWalletLink> <AboutContentContainer isDarkMode={isDarkMode}>
</ContentContainer> <CardGrid cols={cards.length} ref={cardsRef}>
<AboutContentContainer isDarkMode={isDarkMode}> {cards.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => (
<CardGrid cols={cards.length} ref={cardsRef}> <Card
{cards.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => ( {...card}
<Card backgroundImgSrc={isDarkMode ? darkBackgroundImgSrc : lightBackgroundImgSrc}
{...card} key={card.title}
backgroundImgSrc={isDarkMode ? darkBackgroundImgSrc : lightBackgroundImgSrc} />
key={card.title} ))}
/> </CardGrid>
))} <CardGrid cols={3}>
</CardGrid> {MORE_CARDS.map(({ darkIcon, lightIcon, ...card }) => (
<CardGrid cols={3}> <Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} />
{MORE_CARDS.map(({ darkIcon, lightIcon, ...card }) => ( ))}
<Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} /> </CardGrid>
))} <ProtocolBanner />
</CardGrid> <AboutFooter />
<ProtocolBanner /> </AboutContentContainer>
<AboutFooter />
</AboutContentContainer>
</>
)}
</PageContainer> </PageContainer>
</Trace> </Trace>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment