feat: add empty wallet state (#4765)

add empty wallet state

Co-authored-by: Charles Bachmeier <charlie@genie.xyz>

src/nft/components/icons.tsx

@@ -1471,3 +1471,30 @@ export const BagCloseIcon = (props: SVGProps) => (
     />
   </svg>
 )
+
+export const EmptyNFTWalletIcon = (props: SVGProps) => (
+  <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect
+      x="4.46976"
+      y="35.0579"
+      width="43.9542"
+      height="43.9542"
+      rx="2.75"
+      transform="rotate(-11.245 4.46976 35.0579)"
+      stroke="#5E6887"
+      strokeWidth="2.5"
+    />
+    <path
+      d="M32.0341 22.8646L34.3119 14.3637C34.8837 12.2298 37.077 10.9635 39.2109 11.5353L76.3548 21.488C78.4886 22.0597 79.755 24.2531 79.1832 26.3869L69.2305 63.5308C68.6588 65.6647 66.4654 66.931 64.3315 66.3593L60.3421 65.2903"
+      stroke="#5E6887"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+    <path
+      d="M81.5762 40.2598L90.5463 49.2299C92.1084 50.792 92.1084 53.3246 90.5463 54.8867L63.355 82.0779C61.7929 83.64 59.2603 83.64 57.6982 82.0779L52.3573 76.737"
+      stroke="#5E6887"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+    />
+  </svg>
+)

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 (
+    <EmptyWalletContainer>
+      <EmptyNFTWalletIcon />
+      <EmptyWalletText className={headlineMedium}>
+        <Trans>No NFTs in</Trans>&nbsp;{shortenAddress(account ?? '')}
+      </EmptyWalletText>
+      <ExploreNFTsButton onClick={() => navigate('/nfts')}>Explore NFTs</ExploreNFTsButton>
+    </EmptyWalletContainer>
+  )
+}

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' }}
     >
-      <Row alignItems="flex-start" position="relative">
-        <FilterSidebar SortDropdown={SortWalletAssetsDropdown} />
+      {walletAssets.length === 0 ? (
+        <EmptyWalletContent />
+      ) : (
+        <Row alignItems="flex-start" position="relative">
+          <FilterSidebar SortDropdown={SortWalletAssetsDropdown} />
 
-        {(!isMobile || !isFiltersExpanded) && (
-          <Column width="full">
-            <ProfileAccountDetails />
-            <AnimatedBox
-              paddingLeft={isFiltersExpanded ? '24' : '16'}
-              flexShrink="0"
-              style={{
-                transform: gridX.to((x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)`),
-                width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`),
-              }}
-            >
-              <Row gap="8" flexWrap="nowrap">
-                <FilterButton
-                  isMobile={isMobile}
-                  isFiltersExpanded={isFiltersExpanded}
-                  results={displayAssets.length}
-                  onClick={() => setFiltersExpanded(!isFiltersExpanded)}
-                />
-                {!isMobile && <SortDropdown dropDownOptions={sortDropDownOptions} />}
-                <CollectionSearch searchText={searchText} setSearchText={setSearchText} />
-                <SelectAllButton />
-              </Row>
-              <Row>
-                <CollectionFiltersRow
-                  collections={walletCollections}
-                  collectionFilters={collectionFilters}
-                  setCollectionFilters={setCollectionFilters}
-                  clearCollectionFilters={clearCollectionFilters}
-                />
-              </Row>
-              <InfiniteScroll
-                next={fetchNextPage}
-                hasMore={hasNextPage ?? false}
-                loader={
-                  hasNextPage ? (
-                    <Center>
-                      <LoadingSparkle />
-                    </Center>
-                  ) : null
-                }
-                dataLength={displayAssets.length}
-                style={{ overflow: 'unset' }}
+          {(!isMobile || !isFiltersExpanded) && (
+            <Column width="full">
+              <ProfileAccountDetails />
+              <AnimatedBox
+                paddingLeft={isFiltersExpanded ? '24' : '16'}
+                flexShrink="0"
+                style={{
+                  transform: gridX.to((x) => `translate(${Number(x) - (!isMobile && isFiltersExpanded ? 300 : 0)}px)`),
+                  width: gridWidthOffset.to((x) => `calc(100% - ${x}px)`),
+                }}
               >
-                <div className={assetList}>
-                  {displayAssets && displayAssets.length
-                    ? displayAssets.map((asset, index) => <WalletAssetDisplay asset={asset} key={index} />)
-                    : null}
-                </div>
-              </InfiniteScroll>
-            </AnimatedBox>
-          </Column>
-        )}
-      </Row>
+                <Row gap="8" flexWrap="nowrap">
+                  <FilterButton
+                    isMobile={isMobile}
+                    isFiltersExpanded={isFiltersExpanded}
+                    results={displayAssets.length}
+                    onClick={() => setFiltersExpanded(!isFiltersExpanded)}
+                  />
+                  {!isMobile && <SortDropdown dropDownOptions={sortDropDownOptions} />}
+                  <CollectionSearch searchText={searchText} setSearchText={setSearchText} />
+                  <SelectAllButton />
+                </Row>
+                <Row>
+                  <CollectionFiltersRow
+                    collections={walletCollections}
+                    collectionFilters={collectionFilters}
+                    setCollectionFilters={setCollectionFilters}
+                    clearCollectionFilters={clearCollectionFilters}
+                  />
+                </Row>
+                <InfiniteScroll
+                  next={fetchNextPage}
+                  hasMore={hasNextPage ?? false}
+                  loader={
+                    hasNextPage ? (
+                      <Center>
+                        <LoadingSparkle />
+                      </Center>
+                    ) : null
+                  }
+                  dataLength={displayAssets.length}
+                  style={{ overflow: 'unset' }}
+                >
+                  <div className={assetList}>
+                    {displayAssets && displayAssets.length
+                      ? displayAssets.map((asset, index) => <WalletAssetDisplay asset={asset} key={index} />)
+                      : null}
+                  </div>
+                </InfiniteScroll>
+              </AnimatedBox>
+            </Column>
+          )}
+        </Row>
+      )}
       {sellAssets.length > 0 && (
         <Row
           display={{ sm: 'flex', md: 'none' }}