diff --git a/src/constants/supportArticles.ts b/src/constants/supportArticles.ts new file mode 100644 index 0000000000..995f316ca5 --- /dev/null +++ b/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', +} diff --git a/src/nft/components/collection/UnavailableCollectionPage.test.tsx b/src/nft/components/collection/UnavailableCollectionPage.test.tsx new file mode 100644 index 0000000000..2761813089 --- /dev/null +++ b/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() + expect(screen.getByText('No collection assets exist at this address')).toBeInTheDocument() + }) + + it('has a hyperlink back to the Explore page', () => { + render() + expect(screen.getByText('Return to NFT Explore')).toHaveAttribute('href', '/nfts') + }) +}) + +describe('Blocked Collection', () => { + it('displays warning icon and informative message', () => { + render() + 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() + 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') + }) +}) diff --git a/src/nft/components/collection/UnavailableCollectionPage.tsx b/src/nft/components/collection/UnavailableCollectionPage.tsx new file mode 100644 index 0000000000..cc2058e880 --- /dev/null +++ b/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 ( + + + + This collection is blocked + + + Return to NFT Explore + + + Learn why + + + ) + } + + return ( + + + No collection assets exist at this address + + + Return to NFT Explore + + + ) +} diff --git a/src/nft/pages/collection/index.tsx b/src/nft/pages/collection/index.tsx index c82fae2ee1..750607f5eb 100644 --- a/src/nft/pages/collection/index.tsx +++ b/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 + if (!collectionStats.name) return const toggleActivity = () => { isActivityToggled @@ -256,7 +258,7 @@ const Collection = () => { ) : ( -
No collection assets exist at this address
+ )}