diff --git a/src/nft/components/icons.tsx b/src/nft/components/icons.tsx index 2bb06e6572..0e5923aeee 100644 --- a/src/nft/components/icons.tsx +++ b/src/nft/components/icons.tsx @@ -1471,3 +1471,30 @@ export const BagCloseIcon = (props: SVGProps) => ( /> ) + +export const EmptyNFTWalletIcon = (props: SVGProps) => ( + + + + + +) diff --git a/src/nft/components/profile/view/EmptyWalletContent.tsx b/src/nft/components/profile/view/EmptyWalletContent.tsx new file mode 100644 index 0000000000..aeca09b8b0 --- /dev/null +++ b/src/nft/components/profile/view/EmptyWalletContent.tsx @@ -0,0 +1,48 @@ +import { Trans } from '@lingui/macro' +import { useWeb3React } from '@web3-react/core' +import { EmptyNFTWalletIcon } from 'nft/components/icons' +import { headlineMedium } from 'nft/css/common.css' +import { useNavigate } from 'react-router-dom' +import styled from 'styled-components/macro' +import { shortenAddress } from 'utils' + +const EmptyWalletContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin: 190px; + flex: none; +` + +const EmptyWalletText = styled.div` + width: min-content; + white-space: nowrap; + margin-top: 12px; +` + +const ExploreNFTsButton = styled.button` + background-color: ${({ theme }) => theme.accentAction}; + padding: 10px 24px; + color: ${({ theme }) => theme.textPrimary}; + width: min-content; + border: none; + outline: none; + border-radius: 12px; + white-space: nowrap; + cursor: pointer; + margin-top: 20px; +` + +export const EmptyWalletContent = () => { + const { account } = useWeb3React() + const navigate = useNavigate() + return ( + + + + No NFTs in {shortenAddress(account ?? '')} + + navigate('/nfts')}>Explore NFTs + + ) +} diff --git a/src/nft/components/profile/view/ProfilePage.tsx b/src/nft/components/profile/view/ProfilePage.tsx index 39441916fa..6415710598 100644 --- a/src/nft/components/profile/view/ProfilePage.tsx +++ b/src/nft/components/profile/view/ProfilePage.tsx @@ -34,6 +34,7 @@ import { useInfiniteQuery, useQuery } from 'react-query' import { Link } from 'react-router-dom' import { useSpring } from 'react-spring' +import { EmptyWalletContent } from './EmptyWalletContent' import { ProfileAccountDetails } from './ProfileAccountDetails' import * as styles from './ProfilePage.css' @@ -252,62 +253,66 @@ export const ProfilePage = () => { paddingRight={{ sm: '0', md: '72' }} paddingTop={{ sm: '16', md: '40' }} > - - + {walletAssets.length === 0 ? ( + + ) : ( + + - {(!isMobile || !isFiltersExpanded) && ( - - - `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)`), - width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`), - }} - > - - setFiltersExpanded(!isFiltersExpanded)} - /> - {!isMobile && } - - - - - - - - - - ) : null - } - dataLength={displayAssets.length} - style={{ overflow: 'unset' }} + {(!isMobile || !isFiltersExpanded) && ( + + + `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)`), + width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`), + }} > - - {displayAssets && displayAssets.length - ? displayAssets.map((asset, index) => ) - : null} - - - - - )} - + + setFiltersExpanded(!isFiltersExpanded)} + /> + {!isMobile && } + + + + + + + + + + ) : null + } + dataLength={displayAssets.length} + style={{ overflow: 'unset' }} + > + + {displayAssets && displayAssets.length + ? displayAssets.map((asset, index) => ) + : null} + + + + + )} + + )} {sellAssets.length > 0 && (