fix: web app without NFTs (#6712)

* fix: web app without NFTs

* fix: change card display to memoization

* fix: remove unneeded imports and variables

* fix: readd search bar modification

* fix: update dependencies

* fix: update atom value to use hook

* fix: change hook name

* fix: add tests

* Update src/pages/Landing/index.tsx
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

* Update src/components/NavBar/SearchBar.tsx
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>

* Update src/components/NavBar/SearchBarDropdown.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update src/components/NavBar/SearchBarDropdown.test.tsx
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

* Update SearchBar.tsx

* fix lint

---------
Co-authored-by: Jordan Frankfurt <jordanwfrankfurt@gmail.com>
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/About/AboutFooter.tsx

 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SharedEventName } from '@uniswap/analytics-events'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import styled from 'styled-components/macro'
 import { BREAKPOINTS, ExternalLink, StyledRouterLink } from 'theme'
 import { useIsDarkMode } from 'theme/components/ThemeToggle'
@@ -137,6 +138,7 @@ const LogoSectionContent = () => {
 }
 
 export const AboutFooter = () => {
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
   return (
     <Footer>
       <LogoSectionLeft>
@@ -148,7 +150,7 @@ export const AboutFooter = () => {
           <LinkGroupTitle>App</LinkGroupTitle>
           <TextLink to="/swap">Swap</TextLink>
           <TextLink to="/tokens">Tokens</TextLink>
-          <TextLink to="/nfts">NFTs</TextLink>
+          {!shouldDisableNFTRoutes && <TextLink to="/nfts">NFTs</TextLink>}
           <TextLink to="/pools">Pools</TextLink>
         </LinkGroup>
         <LinkGroup>

src/components/AccountDrawer/AuthenticatedHeader.tsx

@@ -13,14 +13,13 @@ import Tooltip from 'components/Tooltip'
 import { getConnection } from 'connection'
 import { usePortfolioBalancesQuery } from 'graphql/data/__generated__/types-and-hooks'
 import { GQL_MAINNET_CHAINS } from 'graphql/data/util'
-import { useAtomValue } from 'jotai/utils'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useProfilePageState, useSellAsset, useWalletCollections } from 'nft/hooks'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { ProfilePageStateType } from 'nft/types'
 import { useCallback, useState } from 'react'
 import { ArrowDownRight, ArrowUpRight, CreditCard, IconProps, Info, LogOut, Settings } from 'react-feather'
 import { useNavigate } from 'react-router-dom'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import styled, { useTheme } from 'styled-components/macro'
@@ -172,7 +171,7 @@ export default function AuthenticatedHeader({ account, openSettings }: { account
   const clearCollectionFilters = useWalletCollections((state) => state.clearCollectionFilters)
   const isClaimAvailable = useIsNftClaimAvailable((state) => state.isClaimAvailable)
 
-  const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
 
   const unclaimedAmount: CurrencyAmount<Token> | undefined = useUserUnclaimedAmount(account)
   const isUnclaimed = useUserHasAvailableClaim(account)

src/components/AccountDrawer/MiniPortfolio/index.tsx

@@ -4,10 +4,9 @@ import { BrowserEvent, InterfaceElementName, InterfaceSectionName, SharedEventNa
 import Column from 'components/Column'
 import { LoaderV2 } from 'components/Icons/LoadingSpinner'
 import { AutoRow } from 'components/Row'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
-import { useAtomValue } from 'jotai/utils'
 import { useEffect, useState } from 'react'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useHasPendingTransactions } from 'state/transactions/hooks'
 import styled, { useTheme } from 'styled-components/macro'
 import { BREAKPOINTS, ThemedText } from 'theme'
@@ -99,8 +98,8 @@ export default function MiniPortfolio({ account }: { account: string }) {
   const isNftPage = useIsNftPage()
   const theme = useTheme()
   const [currentPage, setCurrentPage] = useState(isNftPage ? 1 : 0)
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
   const [activityUnread, setActivityUnread] = useState(false)
-  const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
 
   const { component: Page, key: currentKey } = Pages[currentPage]
 

src/components/NavBar/SearchBar.test.tsx

+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
+import { useIsMobile, useIsTablet } from 'nft/hooks'
+import { useIsNavSearchInputVisible } from 'nft/hooks/useIsNavSearchInputVisible'
+import { mocked } from 'test-utils/mocked'
+import { render, screen } from 'test-utils/render'
+
+import { SearchBar } from './SearchBar'
+
+jest.mock('hooks/useDisableNFTRoutes')
+jest.mock('nft/hooks')
+jest.mock('nft/hooks/useIsNavSearchInputVisible')
+
+describe('disable nft on searchbar', () => {
+  beforeEach(() => {
+    mocked(useIsMobile).mockReturnValue(false)
+    mocked(useIsTablet).mockReturnValue(false)
+    mocked(useIsNavSearchInputVisible).mockReturnValue(true)
+  })
+
+  it('should render text with nfts', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(false)
+    const { container } = render(<SearchBar />)
+    expect(container).toMatchSnapshot()
+    expect(screen.queryByPlaceholderText('Search tokens and NFT collections')).toBeVisible()
+  })
+  it('should render text without nfts', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(true)
+    const { container } = render(<SearchBar />)
+    expect(container).toMatchSnapshot()
+    expect(screen.queryByPlaceholderText('Search tokens')).toBeVisible()
+  })
+})

src/components/NavBar/SearchBar.tsx

 // eslint-disable-next-line no-restricted-imports
-import { Trans } from '@lingui/macro'
+import { t } from '@lingui/macro'
 import { sendAnalyticsEvent, Trace, TraceEvent, useTrace } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, InterfaceEventName, InterfaceSectionName } from '@uniswap/analytics-events'
 import { useWeb3React } from '@web3-react/core'
@@ -7,6 +7,7 @@ import clsx from 'clsx'
 import { useCollectionSearch } from 'graphql/data/nft/CollectionSearch'
 import { useSearchTokens } from 'graphql/data/SearchTokens'
 import useDebounce from 'hooks/useDebounce'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { organizeSearchResults } from 'lib/utils/searchBar'
@@ -50,6 +51,7 @@ export const SearchBar = () => {
   const isMobile = useIsMobile()
   const isTablet = useIsTablet()
   const isNavSearchInputVisible = useIsNavSearchInputVisible()
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
 
   useOnClickOutside(searchRef, () => {
     isOpen && toggleOpen()
@@ -102,8 +104,16 @@ export const SearchBar = () => {
     ...trace,
   }
   const placeholderText = useMemo(() => {
-    return isMobileOrTablet ? `Search` : `Search tokens and NFT collections`
-  }, [isMobileOrTablet])
+    if (isMobileOrTablet) {
+      return t`Search`
+    } else {
+      if (shouldDisableNFTRoutes) {
+        return t`Search tokens`
+      } else {
+        return t`Search tokens and NFT collections`
+      }
+    }
+  }, [isMobileOrTablet, shouldDisableNFTRoutes])
 
   const handleKeyPress = useCallback(
     (event: any) => {
@@ -174,26 +184,19 @@ export const SearchBar = () => {
             element={InterfaceElementName.NAVBAR_SEARCH_INPUT}
             properties={{ ...trace }}
           >
-            <Trans
-              id={placeholderText}
-              render={({ translation }) => (
-                <Box
-                  as="input"
-                  data-cy="search-bar-input"
-                  placeholder={translation as string}
-                  onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                    !isOpen && toggleOpen()
-                    setSearchValue(event.target.value)
-                  }}
-                  onBlur={() =>
-                    sendAnalyticsEvent(InterfaceEventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)
-                  }
-                  className={`${styles.searchBarInput} ${styles.searchContentLeftAlign}`}
-                  value={searchValue}
-                  ref={inputRef}
-                  width="full"
-                />
-              )}
+            <Box
+              as="input"
+              data-cy="search-bar-input"
+              placeholder={placeholderText}
+              onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                !isOpen && toggleOpen()
+                setSearchValue(event.target.value)
+              }}
+              onBlur={() => sendAnalyticsEvent(InterfaceEventName.NAVBAR_SEARCH_EXITED, navbarSearchEventProperties)}
+              className={`${styles.searchBarInput} ${styles.searchContentLeftAlign}`}
+              value={searchValue}
+              ref={inputRef}
+              width="full"
             />
           </TraceEvent>
           {!isOpen && <KeyShortCut>/</KeyShortCut>}

src/components/NavBar/SearchBarDropdown.test.tsx

+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
+import { mocked } from 'test-utils/mocked'
+import { render } from 'test-utils/render'
+
+import { SearchBarDropdown } from './SearchBarDropdown'
+
+jest.mock('hooks/useDisableNFTRoutes')
+
+const SearchBarDropdownProps = {
+  toggleOpen: () => void 0,
+  tokens: [],
+  collections: [],
+  queryText: '',
+  hasInput: false,
+  isLoading: false,
+}
+
+describe('disable nft on searchbar dropdown', () => {
+  it('should render popular nft collections', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(false)
+    const { container } = render(<SearchBarDropdown {...SearchBarDropdownProps} />)
+    expect(container).toMatchSnapshot()
+    expect(container).toHaveTextContent('Popular NFT collections')
+  })
+  it('should not render popular nft collections', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(true)
+    const { container } = render(<SearchBarDropdown {...SearchBarDropdownProps} />)
+    expect(container).toMatchSnapshot()
+    expect(container).not.toHaveTextContent('Popular NFT collections')
+    expect(container).not.toHaveTextContent('NFT')
+  })
+})

src/components/NavBar/SearchBarDropdown.tsx

@@ -9,6 +9,7 @@ import { HistoryDuration, SafetyLevel } from 'graphql/data/__generated__/types-a
 import { useTrendingCollections } from 'graphql/data/nft/TrendingCollections'
 import { SearchToken } from 'graphql/data/SearchTokens'
 import useTrendingTokens from 'graphql/data/TrendingTokens'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -148,6 +149,7 @@ export const SearchBarDropdown = ({
   const isNFTPage = useIsNftPage()
   const isTokenPage = pathname.includes('/tokens')
   const [resultsState, setResultsState] = useState<ReactNode>()
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
 
   const { data: trendingCollections, loading: trendingCollectionsAreLoading } = useTrendingCollections(
     3,
@@ -311,7 +313,7 @@ export const SearchBarDropdown = ({
                 isLoading={!trendingTokenData}
               />
             )}
-            {!isTokenPage && (
+            {Boolean(!isTokenPage && !shouldDisableNFTRoutes) && (
               <SearchBarDropdownSection
                 hoveredIndex={hoveredIndex}
                 startingIndex={shortenedHistory.length + (isNFTPage ? 0 : trendingTokens?.length ?? 0)}
@@ -351,6 +353,7 @@ export const SearchBarDropdown = ({
     trace,
     searchHistory,
     trendingCollectionsAreLoading,
+    shouldDisableNFTRoutes,
   ])
 
   const showBNBComingSoonBadge = chainId === SupportedChainId.BNB && !isLoading

src/components/NavBar/__snapshots__/SearchBar.test.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disable nft on searchbar should render text with nfts 1`] = `
+.c0 {
+  background-color: #ADBCFF3d;
+  color: #7780A0;
+  padding: 0px 8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  opacity: 0.6;
+  -webkit-backdrop-filter: blur(60px);
+  backdrop-filter: blur(60px);
+}
+
+<div>
+  <div
+    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_position_relative_sm__rgw6ez491 sprinkles_width_auto_sm__rgw6ez17v sprinkles_width_auto_md__rgw6ez17w SearchBar_searchBarContainerNft__1fbf9sz4 SearchBar__1fbf9sz3 sprinkles_right_0_sm__rgw6ez39p sprinkles_top_0_sm__rgw6ez3f7 sprinkles_zIndex_3_sm__rgw6ez3qj sprinkles_display_flex_sm__rgw6ez44v sprinkles_maxHeight_searchResultsMaxHeight_sm__rgw6ez1zd sprinkles_overflow_hidden_default__rgw6ez7m3 searchBarContainerDisableBlur"
+    data-cy="search-bar"
+  >
+    <div
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_row_sm__rgw6ez471 sprinkles_alignItems_center_sm__rgw6ez3j sprinkles_borderRadius_12_default__rgw6ez7bj sprinkles_borderBottomWidth_1px_default__rgw6ez7kj sprinkles_backgroundColor_searchBackground_default__rgw6ez6d1 sprinkles_gap_12_sm__rgw6ez3tj SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2ov sprinkles_paddingBottom_12_sm__rgw6ez28d sprinkles_width_viewWidth_sm__rgw6ez17p sprinkles_borderStyle_solid_default__rgw6ez7ab sprinkles_borderWidth_1px_default__rgw6ez7jr sprinkles_borderColor_searchOutline_default__rgw6ez51v SearchBar__1fbf9sz8 sprinkles_paddingLeft_16_sm__rgw6ez2e7 sprinkles_paddingRight_16_sm__rgw6ez2jp sprinkles_color_textSecondary_default__rgw6ez4ep common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
+    >
+      <div
+        class="reset_base__1klryar0 SearchBar_searchContentLeftAlign__1fbf9sz10"
+      >
+        <div
+          class="reset_base__1klryar0 sprinkles_display_none_sm__rgw6ez44j sprinkles_display_flex_md__rgw6ez44w"
+        >
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15 15L11.2439 11.2439M12.3821 6.69106C12.3821 9.83414 9.83414 12.3821 6.69106 12.3821C3.54797 12.3821 1 9.83414 1 6.69106C1 3.54797 3.54797 1 6.69106 1C9.83414 1 12.3821 3.54797 12.3821 6.69106Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </svg>
+        </div>
+        <div
+          class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_display_none_md__rgw6ez44k sprinkles_color_textTertiary_default__rgw6ez4ev"
+        >
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 8 16"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 1L1 7L7 13"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        class="reset_base__1klryar0 reset_input__1klryar8 reset_field__1klryar5 reset_appearance__1klryar4 sprinkles_width_full_sm__rgw6ez16v SearchBar_searchBarInput__1fbf9szb SearchBar__1fbf9sza sprinkles_padding_0_sm__rgw6ez2t7 sprinkles_fontWeight_normal_sm__rgw6ezcp sprinkles_fontSize_16_sm__rgw6ezb1 sprinkles_color_textPrimary_default__rgw6ez4ej sprinkles_color_textSecondary_placeholder__rgw6ez4eu sprinkles_border_none_default__rgw6ez7iz sprinkles_background_none_default__rgw6ez4sj sprinkles_lineHeight_24_sm__rgw6ezed sprinkles_height_full_sm__rgw6ez1dv SearchBar_searchContentLeftAlign__1fbf9sz10"
+        data-cy="search-bar-input"
+        placeholder="Search tokens and NFT collections"
+        value=""
+      />
+      <div
+        class="c0"
+      >
+        /
+      </div>
+    </div>
+    <div
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_overflow_hidden_default__rgw6ez7m3 SearchBar_hidden__1fbf9szx SearchBar__1fbf9szw sprinkles_visibility_hidden_sm__rgw6ez46v sprinkles_opacity_0_sm__rgw6ez4ad sprinkles_padding_0_sm__rgw6ez2t7 sprinkles_height_0_sm__rgw6ez187"
+    />
+  </div>
+</div>
+`;
+
+exports[`disable nft on searchbar should render text without nfts 1`] = `
+.c0 {
+  background-color: #ADBCFF3d;
+  color: #7780A0;
+  padding: 0px 8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 16px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  opacity: 0.6;
+  -webkit-backdrop-filter: blur(60px);
+  backdrop-filter: blur(60px);
+}
+
+<div>
+  <div
+    class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_position_relative_sm__rgw6ez491 sprinkles_width_auto_sm__rgw6ez17v sprinkles_width_auto_md__rgw6ez17w SearchBar_searchBarContainerNft__1fbf9sz4 SearchBar__1fbf9sz3 sprinkles_right_0_sm__rgw6ez39p sprinkles_top_0_sm__rgw6ez3f7 sprinkles_zIndex_3_sm__rgw6ez3qj sprinkles_display_flex_sm__rgw6ez44v sprinkles_maxHeight_searchResultsMaxHeight_sm__rgw6ez1zd sprinkles_overflow_hidden_default__rgw6ez7m3 searchBarContainerDisableBlur"
+    data-cy="search-bar"
+  >
+    <div
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_row_sm__rgw6ez471 sprinkles_alignItems_center_sm__rgw6ez3j sprinkles_borderRadius_12_default__rgw6ez7bj sprinkles_borderBottomWidth_1px_default__rgw6ez7kj sprinkles_backgroundColor_searchBackground_default__rgw6ez6d1 sprinkles_gap_12_sm__rgw6ez3tj SearchBar_nftSearchBar__1fbf9sz9 SearchBar_baseSearchNftStyle__1fbf9sz2 SearchBar_baseSearchStyle__1fbf9sz1 SearchBar__1fbf9sz0 sprinkles_paddingTop_12_sm__rgw6ez2ov sprinkles_paddingBottom_12_sm__rgw6ez28d sprinkles_width_viewWidth_sm__rgw6ez17p sprinkles_borderStyle_solid_default__rgw6ez7ab sprinkles_borderWidth_1px_default__rgw6ez7jr sprinkles_borderColor_searchOutline_default__rgw6ez51v SearchBar__1fbf9sz8 sprinkles_paddingLeft_16_sm__rgw6ez2e7 sprinkles_paddingRight_16_sm__rgw6ez2jp sprinkles_color_textSecondary_default__rgw6ez4ep common_magicalGradientOnHover__127l8hdb common_magicalGradient__127l8hda"
+    >
+      <div
+        class="reset_base__1klryar0 SearchBar_searchContentLeftAlign__1fbf9sz10"
+      >
+        <div
+          class="reset_base__1klryar0 sprinkles_display_none_sm__rgw6ez44j sprinkles_display_flex_md__rgw6ez44w"
+        >
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M15 15L11.2439 11.2439M12.3821 6.69106C12.3821 9.83414 9.83414 12.3821 6.69106 12.3821C3.54797 12.3821 1 9.83414 1 6.69106C1 3.54797 3.54797 1 6.69106 1C9.83414 1 12.3821 3.54797 12.3821 6.69106Z"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="1.5"
+            />
+          </svg>
+        </div>
+        <div
+          class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_display_none_md__rgw6ez44k sprinkles_color_textTertiary_default__rgw6ez4ev"
+        >
+          <svg
+            fill="none"
+            height="16"
+            viewBox="0 0 8 16"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 1L1 7L7 13"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+      </div>
+      <input
+        class="reset_base__1klryar0 reset_input__1klryar8 reset_field__1klryar5 reset_appearance__1klryar4 sprinkles_width_full_sm__rgw6ez16v SearchBar_searchBarInput__1fbf9szb SearchBar__1fbf9sza sprinkles_padding_0_sm__rgw6ez2t7 sprinkles_fontWeight_normal_sm__rgw6ezcp sprinkles_fontSize_16_sm__rgw6ezb1 sprinkles_color_textPrimary_default__rgw6ez4ej sprinkles_color_textSecondary_placeholder__rgw6ez4eu sprinkles_border_none_default__rgw6ez7iz sprinkles_background_none_default__rgw6ez4sj sprinkles_lineHeight_24_sm__rgw6ezed sprinkles_height_full_sm__rgw6ez1dv SearchBar_searchContentLeftAlign__1fbf9sz10"
+        data-cy="search-bar-input"
+        placeholder="Search tokens"
+        value=""
+      />
+      <div
+        class="c0"
+      >
+        /
+      </div>
+    </div>
+    <div
+      class="reset_base__1klryar0 sprinkles_display_flex_sm__rgw6ez44v sprinkles_flexDirection_column_sm__rgw6ez477 sprinkles_overflow_hidden_default__rgw6ez7m3 SearchBar_hidden__1fbf9szx SearchBar__1fbf9szw sprinkles_visibility_hidden_sm__rgw6ez46v sprinkles_opacity_0_sm__rgw6ez4ad sprinkles_padding_0_sm__rgw6ez2t7 sprinkles_height_0_sm__rgw6ez187"
+    />
+  </div>
+</div>
+`;

src/components/NavBar/index.tsx

@@ -3,9 +3,9 @@ import { useWeb3React } from '@web3-react/core'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import Web3Status from 'components/Web3Status'
 import { chainIdToBackendName } from 'graphql/data/util'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import { useIsNftPage } from 'hooks/useIsNftPage'
 import { useIsPoolsPage } from 'hooks/useIsPoolsPage'
-import { useAtomValue } from 'jotai/utils'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
@@ -13,7 +13,6 @@ import { useProfilePageState } from 'nft/hooks'
 import { ProfilePageStateType } from 'nft/types'
 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'
 
 import { useIsNavSearchInputVisible } from '../../nft/hooks/useIsNavSearchInputVisible'
@@ -61,7 +60,7 @@ export const PageTabs = () => {
   const isPoolActive = useIsPoolsPage()
   const isNftPage = useIsNftPage()
 
-  const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
 
   return (
     <>

src/hooks/useDisableNFTRoutes.ts

+import { useAtomValue } from 'jotai/utils'
+import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
+
+export function useDisableNFTRoutes() {
+  return useAtomValue(shouldDisableNFTRoutesAtom)
+}

src/pages/Landing/index.test.tsx

+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
+import { mocked } from 'test-utils/mocked'
+import { render } from 'test-utils/render'
+
+import Landing from '.'
+
+jest.mock('hooks/useDisableNFTRoutes')
+
+describe('disable nft on landing page', () => {
+  it('renders nft information and card', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(false)
+    const { container } = render(<Landing />)
+    expect(container).toMatchSnapshot()
+    expect(container).toHaveTextContent('NFTs')
+    expect(container).toHaveTextContent('Trade crypto and NFTs with confidence')
+    expect(container).toHaveTextContent('Buy, sell, and explore tokens and NFTs')
+    expect(container).toHaveTextContent('Trade NFTs')
+    expect(container).toHaveTextContent('Explore NFTs')
+    expect(container).toHaveTextContent('Buy and sell NFTs across marketplaces to find more listings at better prices.')
+  })
+  it('does not render nft information and card', () => {
+    mocked(useDisableNFTRoutes).mockReturnValue(true)
+    const { container } = render(<Landing />)
+    expect(container).toMatchSnapshot()
+    expect(container).not.toHaveTextContent('NFTs')
+    expect(container).not.toHaveTextContent('NFT')
+    expect(container).toHaveTextContent('Trade crypto with confidence')
+    expect(container).toHaveTextContent('Buy, sell, and explore tokens')
+    expect(container).not.toHaveTextContent('Trade NFTs')
+    expect(container).not.toHaveTextContent('Explore NFTs')
+    expect(container).not.toHaveTextContent(
+      'Buy and sell NFTs across marketplaces to find more listings at better prices.'
+    )
+  })
+})

src/pages/Landing/index.tsx

@@ -8,14 +8,13 @@ import ProtocolBanner from 'components/About/ProtocolBanner'
 import { useAccountDrawer } from 'components/AccountDrawer'
 import { BaseButton } from 'components/Button'
 import { AppleLogo } from 'components/Logo/AppleLogo'
-import { useAtomValue } from 'jotai/utils'
+import { useDisableNFTRoutes } from 'hooks/useDisableNFTRoutes'
 import Swap from 'pages/Swap'
 import { parse } from 'qs'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { ArrowDownCircle } from 'react-feather'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { Link as NativeLink } from 'react-router-dom'
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
 import { useAppSelector } from 'state/hooks'
 import styled, { css } from 'styled-components/macro'
 import { BREAKPOINTS } from 'theme'
@@ -323,7 +322,12 @@ export default function Landing() {
     }
   }, [navigate, selectedWallet, queryParams.intro, accountDrawerOpen])
 
-  const shouldDisableNFTRoutes = useAtomValue(shouldDisableNFTRoutesAtom)
+  const shouldDisableNFTRoutes = useDisableNFTRoutes()
+
+  const cards = useMemo(
+    () => MAIN_CARDS.filter((card) => !(shouldDisableNFTRoutes && card.to.startsWith('/nft'))),
+    [shouldDisableNFTRoutes]
+  )
 
   return (
     <Trace page={InterfacePageName.LANDING_PAGE} shouldLogImpression>
@@ -390,8 +394,8 @@ export default function Landing() {
               </DownloadWalletLink>
             </ContentContainer>
             <AboutContentContainer isDarkMode={isDarkMode}>
-              <CardGrid cols={2} ref={cardsRef}>
-                {MAIN_CARDS.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => (
+              <CardGrid cols={cards.length} ref={cardsRef}>
+                {cards.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => (
                   <Card
                     {...card}
                     backgroundImgSrc={isDarkMode ? darkBackgroundImgSrc : lightBackgroundImgSrc}