feat: dismiss the landing page when the account drawer is opened (#6633)

* feat: dismiss the landing page when the account drawer is opened

* remove the gradient before the page transition

* pr feedback

* clean up darkmode handling

* pr feedback from design

* update link test

---------
Co-authored-by: Jordan Frankfurt <jordan@CORN-Jordan-949.frankfurt>

cypress/e2e/link.test.ts

@@ -2,7 +2,7 @@
 describe('Link', () => {
   it('should update route', () => {
     cy.viewport(2000, 1600)
-    cy.visit('/')
+    cy.visit('/swap')
     cy.contains('Pool').click()
     cy.get('[data-cy="join-pool-button"]').should('exist')
   })

src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
+import { useAccountDrawer } from 'components/AccountDrawer'
 import Web3Status from 'components/Web3Status'
 import { chainIdToBackendName } from 'graphql/data/util'
 import { useIsNftPage } from 'hooks/useIsNftPage'
@@ -10,7 +11,7 @@ import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
 import { useProfilePageState } from 'nft/hooks'
 import { ProfilePageStateType } from 'nft/types'
-import { ReactNode } from 'react'
+import { ReactNode, useCallback } from 'react'
 import { NavLink, NavLinkProps, useLocation, useNavigate } from 'react-router-dom'
 import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import styled from 'styled-components/macro'
@@ -93,6 +94,18 @@ const Navbar = ({ blur }: { blur: boolean }) => {
   const navigate = useNavigate()
   const isNavSearchInputVisible = useIsNavSearchInputVisible()
 
+  const [accountDrawerOpen, toggleAccountDrawer] = useAccountDrawer()
+
+  const handleUniIconClick = useCallback(() => {
+    if (accountDrawerOpen) {
+      toggleAccountDrawer()
+    }
+    navigate({
+      pathname: '/',
+      search: '?intro=true',
+    })
+  }, [accountDrawerOpen, navigate, toggleAccountDrawer])
+
   return (
     <>
       {blur && <Blur />}
@@ -105,12 +118,7 @@ const Navbar = ({ blur }: { blur: boolean }) => {
                 height="48"
                 data-testid="uniswap-logo"
                 className={styles.logo}
-                onClick={() => {
-                  navigate({
-                    pathname: '/',
-                    search: '?intro=true',
-                  })
-                }}
+                onClick={handleUniIconClick}
               />
             </Box>
             {!isNftPage && (

src/pages/Landing/index.tsx

@@ -5,6 +5,7 @@ import { AboutFooter } from 'components/About/AboutFooter'
 import Card, { CardType } from 'components/About/Card'
 import { MAIN_CARDS, MORE_CARDS } from 'components/About/constants'
 import ProtocolBanner from 'components/About/ProtocolBanner'
+import { useAccountDrawer } from 'components/AccountDrawer'
 import { BaseButton } from 'components/Button'
 import { useAtomValue } from 'jotai/utils'
 import Swap from 'pages/Swap'
@@ -18,9 +19,10 @@ import { useAppSelector } from 'state/hooks'
 import styled, { css } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
+import { TRANSITION_DURATIONS } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 
-const PageContainer = styled.div<{ isDarkMode: boolean }>`
+const PageContainer = styled.div`
   position: absolute;
   top: 0;
   padding: ${({ theme }) => theme.navHeight}px 0px 0px 0px;
@@ -30,11 +32,6 @@ const PageContainer = styled.div<{ isDarkMode: boolean }>`
   align-items: center;
   scroll-behavior: smooth;
   overflow-x: hidden;
-
-  background: ${({ isDarkMode }) =>
-    isDarkMode
-      ? 'linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%)'
-      : 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%)'};
 `
 
 const Gradient = styled.div<{ isDarkMode: boolean }>`
@@ -46,10 +43,14 @@ const Gradient = styled.div<{ isDarkMode: boolean }>`
   bottom: 0;
   width: 100%;
   min-height: 550px;
-  background: ${({ isDarkMode }) =>
+  ${({ isDarkMode }) =>
     isDarkMode
-      ? 'linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%)'
-      : 'linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%)'};
+      ? css`
+          background: linear-gradient(rgba(8, 10, 24, 0) 0%, rgb(8 10 24 / 100%) 45%);
+        `
+      : css`
+          background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255 255 255 /100%) 45%);
+        `};
   z-index: ${Z_INDEX.under_dropdown};
   pointer-events: none;
   height: ${({ theme }) => `calc(100vh - ${theme.mobileBottomBarHeight}px)`};
@@ -111,10 +112,14 @@ const TitleText = styled.h1<{ isDarkMode: boolean }>`
   font-weight: 700;
   text-align: center;
   margin: 0 0 24px;
-  background: ${({ isDarkMode }) =>
+  ${({ isDarkMode }) =>
     isDarkMode
-      ? 'linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(255, 87, 218, 1) 100%)'
-      : 'linear-gradient(10deg, rgba(255,79,184,1) 0%, rgba(255,159,251,1) 100%)'};
+      ? css`
+          background: linear-gradient(20deg, rgba(255, 244, 207, 1) 10%, rgba(255, 87, 218, 1) 100%);
+        `
+      : css`
+          background: linear-gradient(10deg, rgba(255, 79, 184, 1) 0%, rgba(255, 159, 251, 1) 100%);
+        `};
   background-clip: text;
   -webkit-background-clip: text;
 
@@ -214,10 +219,14 @@ const AboutContentContainer = styled.div<{ isDarkMode: boolean }>`
   align-items: center;
   padding: 0 24px 5rem;
   width: 100%;
-  background: ${({ isDarkMode }) =>
+  ${({ isDarkMode }) =>
     isDarkMode
-      ? 'linear-gradient(179.82deg, rgba(0, 0, 0, 0) 0.16%, #050026 99.85%)'
-      : 'linear-gradient(179.82deg, rgba(255, 255, 255, 0) 0.16%, #eaeaea 99.85%)'};
+      ? css`
+          background: linear-gradient(179.82deg, rgba(0, 0, 0, 0) 0.16%, #050026 99.85%);
+        `
+      : css`
+          background: linear-gradient(179.82deg, rgba(255, 255, 255, 0) 0.16%, #eaeaea 99.85%);
+        `};
   @media screen and (min-width: ${BREAKPOINTS.md}px) {
     padding: 0 96px 5rem;
   }
@@ -301,21 +310,23 @@ export default function Landing() {
     ignoreQueryPrefix: true,
   })
 
-  // This can be simplified significantly once the flag is removed! For now being explicit is clearer.
+  const [accountDrawerOpen] = useAccountDrawer()
   useEffect(() => {
-    if (queryParams.intro || !selectedWallet) {
+    if ((queryParams.intro || !selectedWallet) && !accountDrawerOpen) {
       setShowContent(true)
     } else {
+      setShowContent(false)
+      setTimeout(() => {
         navigate('/swap')
+      }, TRANSITION_DURATIONS.medium)
     }
-  }, [navigate, selectedWallet, queryParams.intro])
+  }, [navigate, selectedWallet, queryParams.intro, accountDrawerOpen])
 
   const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
 
   return (
     <Trace page={InterfacePageName.LANDING_PAGE} shouldLogImpression>
-      {showContent && (
-        <PageContainer isDarkMode={isDarkMode} data-testid="landing-page">
+      <PageContainer data-testid="landing-page">
         <LandingSwapContainer>
           <TraceEvent
             events={[BrowserEvent.onClick]}
@@ -327,6 +338,8 @@ export default function Landing() {
             </Link>
           </TraceEvent>
         </LandingSwapContainer>
+        {showContent && (
+          <>
             <Gradient isDarkMode={isDarkMode} />
             <GlowContainer>
               <Glow />
@@ -388,8 +401,9 @@ export default function Landing() {
               <ProtocolBanner />
               <AboutFooter />
             </AboutContentContainer>
-        </PageContainer>
+          </>
         )}
+      </PageContainer>
     </Trace>
   )
 }