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 />
<Polling />
<TopLevelModals />
<Landing />
<Suspense fallback={<Loader />}>
{isLoaded ? (
<Routes>
{landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Swap />} />}
{landingPageFlag === LandingPageVariant.Enabled && <Route path="/" element={<Landing />} />}
<Route path="tokens" element={<Tokens />}>
<Route path=":chainName" />
</Route>

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

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