feat: release new landing page (#5596)

* feat: release new landing page

* fix wallet dropdown integration tests

* remove problematic/not useful tests

Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

cypress.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'cypress'
 export default defineConfig({
   projectId: 'yp82ef',
   videoUploadOnPasses: false,
-  defaultCommandTimeout: 24000, // 2x average block time
+  defaultCommandTimeout: 4000, // 2x average block time
   chromeWebSecurity: false,
   e2e: {
     setupNodeEvents(on, config) {

cypress/e2e/landing.test.ts

@@ -5,10 +5,6 @@ describe('Landing Page', () => {
     cy.screenshot()
   })
 
-  it('redirects to url /swap', () => {
-    cy.url().should('include', '/swap')
-  })
-
   it('allows navigation to pool', () => {
     cy.get('#pool-nav-link').click()
     cy.url().should('include', '/pool')

cypress/e2e/remove-liquidity.test.ts

@@ -22,10 +22,4 @@ describe('Remove Liquidity', () => {
     cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'WETH')
     cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'WETH')
   })
-
-  it.skip('token not in storage is loaded', () => {
-    cy.visit('/remove/v2/0xb290b2f9f8f108d03ff2af3ac5c8de6de31cdf6d/0xF9bA5210F91D0474bd1e1DcDAeC4C58E359AaD85')
-    cy.get('#remove-liquidity-tokena-symbol').should('contain.text', 'SKL')
-    cy.get('#remove-liquidity-tokenb-symbol').should('contain.text', 'MKR')
-  })
 })

cypress/e2e/wallet-dropdown.test.ts

@@ -1,8 +1,8 @@
 import { getTestSelector } from '../utils'
 
 describe('Wallet Dropdown', () => {
-  before(() => {
-    cy.visit('/')
+  beforeEach(() => {
+    cy.visit('/pool')
   })
 
   it('should change the theme', () => {
@@ -12,6 +12,7 @@ describe('Wallet Dropdown', () => {
   })
 
   it('should select a language', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('wallet-select-language')).click()
     cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
     cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
@@ -21,18 +22,24 @@ describe('Wallet Dropdown', () => {
   })
 
   it('should be able to view transactions', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('wallet-transactions')).click()
     cy.get(getTestSelector('wallet-empty-transaction-text')).should('exist')
     cy.get(getTestSelector('wallet-back')).click()
   })
 
   it('should change the theme when not connected', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
     cy.get(getTestSelector('wallet-disconnect')).click()
     cy.get(getTestSelector('wallet-select-theme')).click()
+    cy.get(getTestSelector('wallet-select-theme')).contains('Light theme').should('exist')
+    cy.get(getTestSelector('wallet-select-theme')).click()
     cy.get(getTestSelector('wallet-select-theme')).contains('Dark theme').should('exist')
   })
 
   it('should select a language when not connected', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-disconnect')).click()
     cy.get(getTestSelector('wallet-select-language')).click()
     cy.get(getTestSelector('wallet-language-item')).contains('Afrikaans').click({ force: true })
     cy.get(getTestSelector('wallet-header')).should('contain', 'Taal')
@@ -42,6 +49,8 @@ describe('Wallet Dropdown', () => {
   })
 
   it('should open the wallet connect modal from the drop down when not connected', () => {
+    cy.get(getTestSelector('web3-status-connected')).click()
+    cy.get(getTestSelector('wallet-disconnect')).click()
     cy.get(getTestSelector('wallet-connect-wallet')).click()
     cy.get(getTestSelector('wallet-modal')).should('exist')
     cy.get(getTestSelector('wallet-modal-close')).click()

src/components/WalletDropdown/index.tsx

@@ -52,7 +52,6 @@ const WalletDropdownWrapper = styled.div`
 const WalletDropdown = () => {
   const [menu, setMenu] = useState<MenuState>(MenuState.DEFAULT)
   const walletDropdownOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
-
   return (
     <>
       {walletDropdownOpen && (

src/components/Web3Status/index.tsx

@@ -281,7 +281,7 @@ function Web3StatusInner() {
             <Trans>Connect</Trans>
           </StyledConnectButton>
           <VerticalDivider />
-          <ChevronWrapper onClick={toggleWalletDropdown}>
+          <ChevronWrapper onClick={toggleWalletDropdown} data-testid="navbar-toggle-dropdown">
             {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
           </ChevronWrapper>
         </Web3StatusConnectWrapper>

src/featureFlags/flags/landingPage.ts

@@ -1,7 +1,7 @@
-import { BaseVariant, FeatureFlag, useBaseFlag } from '../index'
+import { BaseVariant } from '../index'
 
 export function useLandingPageFlag(): BaseVariant {
-  return useBaseFlag(FeatureFlag.landingPage)
+  return BaseVariant.Enabled
 }
 
 export { BaseVariant as LandingPageVariant }