ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update to landing page structure (#5571)

Browse Source 
* feat: initial work

* chore: add translations

* Revert "chore: add translations"

This reverts commit 8ba0bf4a2e03e01243d40f7429276a2a906b8887.

* chore: bring it back
This commit is contained in:
Mike Grabowski 2022-12-08 03:10:37 +04:00 committed by GitHub
parent f96ecb59eb
commit 28d6c6454e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/App.tsx
View File

@ -196,11 +196,10 @@ export default function App() {
<Popups /> <Popups />
<Polling /> <Polling />
<TopLevelModals /> <TopLevelModals />
<Landing />
<Suspense fallback={<Loader />}> <Suspense fallback={<Loader />}>
{isLoaded ? ( {isLoaded ? (
<Routes> <Routes>
{landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Swap />} />} {landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Landing />} />}
<Route path="tokens" element={<Tokens />}> <Route path="tokens" element={<Tokens />}>
<Route path=":chainName" /> <Route path=":chainName" />
</Route> </Route>

44
src/pages/Landing.tsx → src/pages/Landing/index.tsx
View File

@ -1,6 +1,7 @@
import { ButtonCTA } from 'components/Button' import { ButtonCTA } from 'components/Button'
import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage' import Swap from 'pages/Swap'
import { useLocation, useNavigate } from 'react-router-dom' import { PropsWithChildren } from 'react'
import { Link } from 'react-router-dom'
import { useIsDarkMode } from 'state/user/hooks' import { useIsDarkMode } from 'state/user/hooks'
import styled from 'styled-components/macro' import styled from 'styled-components/macro'
import { BREAKPOINTS } from 'theme' import { BREAKPOINTS } from 'theme'
@ -70,8 +71,7 @@ const SubText = styled.h3`
} }
` `
const ButtonCTAText = styled.p` const Button = styled(ButtonCTA)`
margin: 0px;
font-size: 16px; font-size: 16px;
white-space: nowrap; white-space: nowrap;
@ -92,29 +92,23 @@ const ContentWrapper = styled.span`
max-width: 720px; max-width: 720px;
` `
export default function Landing() { export default function Landing(props: PropsWithChildren) {
const isDarkMode = useIsDarkMode() const isDarkMode = useIsDarkMode()
const navigate = useNavigate()
const location = useLocation()
const isOpen = location.pathname === '/'
const onContinueClick = () => navigate('/swap')
if (useLandingPageFlag() === LandingPageVariant.Control || !isOpen) return null
return ( return (
<PageWrapper isDarkMode={isDarkMode}> <>
<TitleContentWrapper> <PageWrapper isDarkMode={isDarkMode}>
<TitleText isDarkMode={isDarkMode}>Trade crypto & NFTs with confidence.</TitleText> <TitleContentWrapper>
<SubText>Uniswap is the best way to buy, sell, and manage your tokens and NFTs.</SubText> <TitleText isDarkMode={isDarkMode}>Trade crypto & NFTs with confidence.</TitleText>
</TitleContentWrapper> <SubText>Uniswap is the best way to buy, sell, and manage your tokens and NFTs.</SubText>
<ContentWrapper> </TitleContentWrapper>
<ButtonCTA onClick={onContinueClick}> <ContentWrapper>
<ButtonCTAText>Continue</ButtonCTAText> <Button as={Link} to="/swap">
</ButtonCTA> Continue
</ContentWrapper> </Button>
</PageWrapper> </ContentWrapper>
</PageWrapper>
<Swap />
</>
) )
} }