feat: polish blocked, nonexistent NFT collection page (#7373)

* add pages for nonexistent and blocked NFT collections

* add padding

* fix themed text import

* update design and revise based on pr comments

src/constants/supportArticles.ts

@@ -0,0 +1,3 @@
+export enum SupportArticleURL {
+  UNSUPPORTED_TOKEN_AND_NFT_POLICY = 'https://support.uniswap.org/hc/en-us/articles/18783694078989-Unsupported-Token-Policy',
+}

src/nft/components/collection/UnavailableCollectionPage.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from 'test-utils/render'
+
+import { UnavailableCollectionPage } from './UnavailableCollectionPage'
+
+describe('Nonexistent Collection', () => {
+  it('displays informative message', () => {
+    render(<UnavailableCollectionPage />)
+    expect(screen.getByText('No collection assets exist at this address')).toBeInTheDocument()
+  })
+
+  it('has a hyperlink back to the Explore page', () => {
+    render(<UnavailableCollectionPage />)
+    expect(screen.getByText('Return to NFT Explore')).toHaveAttribute('href', '/nfts')
+  })
+})
+
+describe('Blocked Collection', () => {
+  it('displays warning icon and informative message', () => {
+    render(<UnavailableCollectionPage isBlocked />)
+    expect(screen.getByTestId('alert-icon')).toBeInTheDocument()
+    expect(screen.getByText('This collection is blocked')).toBeInTheDocument()
+  })
+
+  it('has hyperlinks to learn more and return to the Explore page', () => {
+    render(<UnavailableCollectionPage isBlocked />)
+    expect(screen.getByText('Learn why')).toHaveAttribute(
+      'href',
+      'https://support.uniswap.org/hc/en-us/articles/18783694078989-Unsupported-Token-Policy'
+    )
+    expect(screen.getByText('Return to NFT Explore')).toHaveAttribute('href', '/nfts')
+  })
+})

src/nft/components/collection/UnavailableCollectionPage.tsx

@@ -0,0 +1,56 @@
+import { Trans } from '@lingui/macro'
+import Column from 'components/Column'
+import { SupportArticleURL } from 'constants/supportArticles'
+import { AlertTriangle } from 'react-feather'
+import styled, { useTheme } from 'styled-components'
+import { ExternalLink, StyledInternalLink, ThemedText } from 'theme/components'
+
+const Container = styled(Column)`
+  height: 75vh;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 48px;
+  gap: 8px;
+`
+const StyledExternalLink = styled(ExternalLink)`
+  color: ${({ theme }) => theme.neutral2};
+`
+export function UnavailableCollectionPage({ isBlocked }: { isBlocked?: boolean }) {
+  const theme = useTheme()
+
+  if (isBlocked) {
+    return (
+      <Container>
+        <AlertTriangle
+          width="48px"
+          height="48px"
+          stroke={theme.background}
+          strokeWidth="1px"
+          fill={theme.critical}
+          data-testid="alert-icon"
+        />
+        <ThemedText.HeadlineMedium>
+          <Trans>This collection is blocked</Trans>
+        </ThemedText.HeadlineMedium>
+        <StyledInternalLink to="/nfts">
+          <Trans>Return to NFT Explore</Trans>
+        </StyledInternalLink>
+        <StyledExternalLink href={SupportArticleURL.UNSUPPORTED_TOKEN_AND_NFT_POLICY}>
+          <Trans>Learn why</Trans>
+        </StyledExternalLink>
+      </Container>
+    )
+  }
+
+  return (
+    <Container>
+      <ThemedText.HeadlineMedium>
+        <Trans>No collection assets exist at this address</Trans>
+      </ThemedText.HeadlineMedium>
+      <StyledInternalLink to="/nfts">
+        <Trans>Return to NFT Explore</Trans>
+      </StyledInternalLink>
+    </Container>
+  )
+}

src/nft/pages/collection/index.tsx

@@ -12,6 +12,7 @@ import { MobileHoverBag } from 'nft/components/bag/MobileHoverBag'
 import { Activity, ActivitySwitcher, CollectionNfts, CollectionStats, Filters } from 'nft/components/collection'
 import { CollectionNftsAndMenuLoading } from 'nft/components/collection/CollectionNfts'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
+import { UnavailableCollectionPage } from 'nft/components/collection/UnavailableCollectionPage'
 import { BagCloseIcon } from 'nft/components/icons'
 import { useBag, useCollectionFilters, useFiltersExpanded, useIsMobile } from 'nft/hooks'
 import * as styles from 'nft/pages/collection/index.css'
@@ -170,6 +171,7 @@ const Collection = () => {
   }, [])
 
   if (loading) return <CollectionPageSkeleton />
+  if (!collectionStats.name) return <UnavailableCollectionPage />
 
   const toggleActivity = () => {
     isActivityToggled
@@ -256,7 +258,7 @@ const Collection = () => {
               </CollectionDisplaySection>
             </>
           ) : (
-            <div className={styles.noCollectionAssets}>No collection assets exist at this address</div>
+            <UnavailableCollectionPage isBlocked />
           )}
         </AnimatedCollectionContainer>
       </Trace>