chore: cleaning up previous uk blocking functionality (#7489)

cypress/e2e/landing.test.ts

@@ -40,6 +40,26 @@ describe('Landing Page', () => {
     cy.url().should('include', '/pools')
   })
 
+  it('does not render landing page when / path is blocked', () => {
+    cy.intercept('/', (req) => {
+      req.reply((res) => {
+        const parser = new DOMParser()
+        const doc = parser.parseFromString(res.body, 'text/html')
+        const meta = document.createElement('meta')
+        meta.setAttribute('property', 'x:blocked-paths')
+        meta.setAttribute('content', '/,/buy')
+        doc.head.appendChild(meta)
+
+        res.body = doc.documentElement.outerHTML
+      })
+    })
+    cy.visit('/', { userState: DISCONNECTED_WALLET_USER_STATE })
+
+    cy.get(getTestSelector('landing-page')).should('not.exist')
+    cy.get(getTestSelector('buy-fiat-button')).should('not.exist')
+    cy.url().should('include', '/swap')
+  })
+
   it('does not render uk compliance banner in US', () => {
     cy.visit('/swap')
     cy.contains('UK disclaimer').should('not.exist')

cypress/e2e/wallet-dropdown.test.ts

@@ -49,6 +49,34 @@ describe('Wallet Dropdown', () => {
     })
     itChangesTheme()
     itChangesLocale()
+
+    it('should not show buy crypto button in uk', () => {
+      cy.document().then((doc) => {
+        const meta = document.createElement('meta')
+        meta.setAttribute('property', 'x:blocked-paths')
+        meta.setAttribute('content', '/,/nfts,/buy')
+        doc.head.appendChild(meta)
+      })
+      cy.get(getTestSelector('wallet-buy-crypto')).should('not.exist')
+    })
+  })
+
+  describe('do not render buy button when /buy is blocked', () => {
+    beforeEach(() => {
+      cy.document().then((doc) => {
+        const meta = document.createElement('meta')
+        meta.setAttribute('property', 'x:blocked-paths')
+        meta.setAttribute('content', '/buy')
+        doc.head.appendChild(meta)
+      })
+      cy.visit('/')
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+    })
+
+    it('should not render buy button', () => {
+      cy.get(getTestSelector('wallet-buy-crypto')).should('not.exist')
+    })
   })
 
   describe('should change locale with feature flag', () => {

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -14,7 +14,6 @@ import Tooltip from 'components/Tooltip'
 import { getConnection } from 'connection'
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import useENSName from 'hooks/useENSName'
-import { useIsNotOriginCountry } from 'hooks/useIsNotOriginCountry'
 import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
@@ -26,6 +25,7 @@ import { updateSelectedWallet } from 'state/user/reducer'
 import styled from 'styled-components'
 import { CopyHelper, ExternalLink, ThemedText } from 'theme/components'
 import { shortenAddress } from 'utils'
+import { isPathBlocked } from 'utils/blockedPaths'
 import { NumberType, useFormatter } from 'utils/formatNumbers'
 
 import { useCloseModal, useFiatOnrampAvailability, useOpenModal, useToggleModal } from '../../state/application/hooks'
@@ -160,7 +160,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
   const resetSellAssets = useSellAsset((state) => state.reset)
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
-  const shouldShowBuyFiatButton = useIsNotOriginCountry('GB')
+  const shouldShowBuyFiatButton = !isPathBlocked('/buy')
   const { formatNumber, formatDelta } = useFormatter()
 
   const shouldDisableNFTRoutes = useDisableNFTRoutes()

src/components/swap/SwapBuyFiatButton.test.tsx

@@ -1,8 +1,6 @@
 import userEvent from '@testing-library/user-event'
 import { useWeb3React } from '@web3-react/core'
 import { useAccountDrawer } from 'components/AccountDrawer'
-import store from 'state'
-import { setOriginCountry } from 'state/user/reducer'
 import { mocked } from 'test-utils/mocked'
 import { act, fireEvent, render, screen } from 'test-utils/render'
 
@@ -47,7 +45,6 @@ describe('SwapBuyFiatButton.tsx', () => {
   let useOpenModal: jest.Mock<any, any>
 
   beforeAll(() => {
-    store.dispatch(setOriginCountry('US'))
     toggleWalletDrawer = jest.fn()
     useOpenModal = jest.fn()
   })

src/components/swap/SwapBuyFiatButton.tsx

@@ -5,11 +5,10 @@ import { TraceEvent } from 'analytics'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import { ButtonText } from 'components/Button'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { useIsNotOriginCountry } from 'hooks/useIsNotOriginCountry'
 import { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { ExternalLink } from 'theme/components'
-import { textFadeIn } from 'theme/styles'
+import { isPathBlocked } from 'utils/blockedPaths'
 
 import { useFiatOnrampAvailability, useOpenModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
@@ -27,7 +26,6 @@ enum BuyFiatFlowState {
 }
 
 const StyledTextButton = styled(ButtonText)`
-  ${textFadeIn}
   color: ${({ theme }) => theme.neutral2};
   gap: 4px;
   font-weight: 485;
@@ -42,7 +40,7 @@ const StyledTextButton = styled(ButtonText)`
 export default function SwapBuyFiatButton() {
   const { account } = useWeb3React()
   const openFiatOnRampModal = useOpenModal(ApplicationModal.FIAT_ONRAMP)
-  const shouldShowBuyFiatButton = useIsNotOriginCountry('GB')
+  const shouldShowBuyFiatButton = !isPathBlocked('/buy')
   const [checkFiatRegionAvailability, setCheckFiatRegionAvailability] = useState(false)
   const {
     available: fiatOnrampAvailable,

src/components/swap/__snapshots__/SwapBuyFiatButton.test.tsx.snap

@@ -117,8 +117,6 @@ exports[`SwapBuyFiatButton.tsx matches base snapshot 1`] = `
 }
 
 .c4 {
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
   color: #7D7D7D;
   gap: 4px;
   font-weight: 485;

src/hooks/useIsNotOriginCountry.ts

@@ -1,7 +0,0 @@
-import { useAppSelector } from 'state/hooks'
-import { AppState } from 'state/reducer'
-
-export function useIsNotOriginCountry(country: string) {
-  const originCountry = useAppSelector((state: AppState) => state.user.originCountry)
-  return Boolean(originCountry) && originCountry !== country
-}

src/pages/App.tsx

@@ -23,6 +23,7 @@ import { useIsDarkMode } from 'theme/components/ThemeToggle'
 import { flexRowNoWrap } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { STATSIG_DUMMY_KEY } from 'tracing'
+import { isPathBlocked } from 'utils/blockedPaths'
 import { getEnvName } from 'utils/env'
 import { getDownloadAppLink } from 'utils/openDownloadApp'
 import { getCurrentPageFromLocation } from 'utils/urlRoutes'
@@ -152,8 +153,7 @@ export default function App() {
     return null
   }
 
-  const blockedPaths = document.querySelector('meta[property="x:blocked-paths"]')?.getAttribute('content')?.split(',')
-  const shouldBlockPath = blockedPaths?.includes(pathname) ?? false
+  const shouldBlockPath = isPathBlocked(pathname)
   if (shouldBlockPath && pathname !== '/swap') {
     return <Navigate to="/swap" replace />
   }

src/pages/Landing/__snapshots__/index.test.tsx.snap

@@ -1152,8 +1152,6 @@ exports[`disable nft on landing page does not render nft information and card 1`
 }
 
 .c18 {
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
   color: #7D7D7D;
   gap: 4px;
   font-weight: 485;
@@ -1377,8 +1375,6 @@ exports[`disable nft on landing page does not render nft information and card 1`
   background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
   background-clip: text;
   -webkit-background-clip: text;
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
 }
 
 .c57 {
@@ -1400,8 +1396,6 @@ exports[`disable nft on landing page does not render nft information and card 1`
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
 }
 
 .c59 {
@@ -3787,8 +3781,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
 }
 
 .c18 {
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
   color: #7D7D7D;
   gap: 4px;
   font-weight: 485;
@@ -4012,8 +4004,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   background: linear-gradient(10deg,rgba(255,79,184,1) 0%,rgba(255,159,251,1) 100%);
   background-clip: text;
   -webkit-background-clip: text;
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
 }
 
 .c57 {
@@ -4035,8 +4025,6 @@ exports[`disable nft on landing page renders nft information and card 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-animation: iAjNNh 125ms ease-in;
-  animation: iAjNNh 125ms ease-in;
 }
 
 .c59 {

src/pages/Landing/index.test.tsx

@@ -1,6 +1,4 @@
 import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
-import store from 'state'
-import { setOriginCountry } from 'state/user/reducer'
 import { mocked } from 'test-utils/mocked'
 import { render } from 'test-utils/render'
 
@@ -9,10 +7,6 @@ import Landing from '.'
 jest.mock('hooks/useDisableNFTRoutes')
 
 describe('disable nft on landing page', () => {
-  beforeAll(() => {
-    store.dispatch(setOriginCountry('US'))
-  })
-
   it('renders nft information and card', () => {
     mocked(useDisableNFTRoutes).mockReturnValue(false)
     const { container } = render(<Landing />)

src/pages/Landing/index.tsx

@@ -16,11 +16,10 @@ import { ArrowDownCircle } from 'react-feather'
 import { Navigate, useLocation, useNavigate } from 'react-router-dom'
 import { Link as NativeLink } from 'react-router-dom'
 import { useAppSelector } from 'state/hooks'
-import { AppState } from 'state/reducer'
 import styled, { css } from 'styled-components'
 import { BREAKPOINTS } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
-import { textFadeIn, TRANSITION_DURATIONS } from 'theme/styles'
+import { TRANSITION_DURATIONS } from 'theme/styles'
 import { Z_INDEX } from 'theme/zIndex'
 import { getDownloadAppLinkProps } from 'utils/openDownloadApp'
 
@@ -123,7 +122,7 @@ const DownloadWalletLink = styled.a`
   }
 `
 
-const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>`
+const TitleText = styled.h1<{ isDarkMode: boolean }>`
   color: transparent;
   font-size: 36px;
   line-height: 44px;
@@ -141,13 +140,6 @@ const TitleText = styled.h1<{ isDarkMode: boolean; $visible: boolean }>`
   background-clip: text;
   -webkit-background-clip: text;
 
-  ${({ $visible }) =>
-    $visible
-      ? css`
-          ${textFadeIn}
-        `
-      : 'opacity: 0;'}
-
   @media screen and (min-width: ${BREAKPOINTS.sm}px) {
     font-size: 48px;
     line-height: 56px;
@@ -174,16 +166,9 @@ const SubText = styled.div`
   }
 `
 
-const SubTextContainer = styled.div<{ $visible: boolean }>`
+const SubTextContainer = styled.div`
   display: flex;
   justify-content: center;
-
-  ${({ $visible }) =>
-    $visible
-      ? css`
-          ${textFadeIn}
-        `
-      : 'opacity: 0;'}
 `
 
 const LandingButton = styled(BaseButton)`
@@ -334,36 +319,9 @@ export default function Landing() {
   const cardsRef = useRef<HTMLDivElement>(null)
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
   const shouldDisableNFTRoutes = useDisableNFTRoutes()
-  const originCountry = useAppSelector((state: AppState) => state.user.originCountry)
-  const renderUkSpecificText = Boolean(originCountry) && originCountry === 'GB'
-  const cards = useMemo(() => {
-    const mainCards = MAIN_CARDS.filter(
-      (card) =>
-        !(shouldDisableNFTRoutes && card.to.startsWith('/nft')) && !(card.to.startsWith('/swap') && !originCountry)
-    )
-
-    mainCards.forEach((card) => {
-      if (card.to.startsWith('/swap') && renderUkSpecificText) {
-        card.description = 'Explore tokens on Ethereum, Polygon, Optimism and more '
-        card.cta = 'Discover Tokens'
-      }
-    })
-
-    return mainCards
-  }, [originCountry, renderUkSpecificText, shouldDisableNFTRoutes])
-
-  const extraCards = useMemo(
-    () =>
-      MORE_CARDS.filter(
-        (card) =>
-          !(
-            card.to.startsWith(
-              'https://support.uniswap.org/hc/en-us/articles/11306574799117-How-to-use-Moon-Pay-on-the-Uniswap-web-app-'
-            ) &&
-            (!originCountry || renderUkSpecificText)
-          )
-      ),
-    [originCountry, renderUkSpecificText]
+  const cards = useMemo(
+    () => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))),
+    [shouldDisableNFTRoutes]
   )
 
   const [accountDrawerOpen] = useAccountDrawer()
@@ -379,34 +337,6 @@ export default function Landing() {
   const location = useLocation()
   const queryParams = parse(location.search, { ignoreQueryPrefix: true })
 
-  const titles = useMemo(() => {
-    if (!originCountry) {
-      return {
-        header: null,
-        subHeader: null,
-      }
-    }
-
-    if (renderUkSpecificText) {
-      return {
-        header: <Trans>Go direct to DeFi with Uniswap</Trans>,
-        subHeader: <Trans>Swap and explore tokens and NFTs</Trans>,
-      }
-    }
-
-    if (shouldDisableNFTRoutes) {
-      return {
-        header: <Trans>Trade crypto with confidence</Trans>,
-        subHeader: <Trans>Buy, sell, and explore tokens</Trans>,
-      }
-    }
-
-    return {
-      header: <Trans>Trade crypto and NFTs with confidence</Trans>,
-      subHeader: <Trans>Buy, sell, and explore tokens and NFTs</Trans>,
-    }
-  }, [originCountry, renderUkSpecificText, shouldDisableNFTRoutes])
-
   if (selectedWallet && !queryParams.intro) {
     return <Navigate to={{ ...location, pathname: '/swap' }} replace />
   }
@@ -430,11 +360,21 @@ export default function Landing() {
           <Glow />
         </GlowContainer>
         <ContentContainer isDarkMode={isDarkMode}>
-          <TitleText isDarkMode={isDarkMode} $visible={!!originCountry}>
-            {titles.header}
+          <TitleText isDarkMode={isDarkMode}>
+            {shouldDisableNFTRoutes ? (
+              <Trans>Trade crypto with confidence</Trans>
+            ) : (
+              <Trans>Trade crypto and NFTs with confidence</Trans>
+            )}
           </TitleText>
-          <SubTextContainer $visible={!!originCountry}>
-            <SubText>{titles.subHeader}</SubText>
+          <SubTextContainer>
+            <SubText>
+              {shouldDisableNFTRoutes ? (
+                <Trans>Buy, sell, and explore tokens</Trans>
+              ) : (
+                <Trans>Buy, sell, and explore tokens and NFTs</Trans>
+              )}
+            </SubText>
           </SubTextContainer>
           <ActionsContainer>
             <TraceEvent
@@ -479,8 +419,8 @@ export default function Landing() {
               />
             ))}
           </CardGrid>
-          <CardGrid cols={extraCards.length}>
-            {extraCards.map(({ darkIcon, lightIcon, ...card }) => (
+          <CardGrid cols={MORE_CARDS.length}>
+            {MORE_CARDS.map(({ darkIcon, lightIcon, ...card }) => (
               <Card {...card} icon={isDarkMode ? darkIcon : lightIcon} key={card.title} type={CardType.Secondary} />
             ))}
           </CardGrid>

src/utils/blockedPaths.ts

@@ -0,0 +1,4 @@
+export function isPathBlocked(pathname: string) {
+  const blockedPaths = document.querySelector('meta[property="x:blocked-paths"]')?.getAttribute('content')?.split(',')
+  return blockedPaths?.includes(pathname) ?? false
+}