feat(404 Page, Empty State): Implement 404 page and empty state in marketplace

src/layouts/BaseLayout.jsx

@@ -35,7 +35,7 @@ const BaseLayout = ({ children, videos }) => {
       <Header headerStyle={router.pathname === '/marketplace' ? 'colored' : null} videos={videos} />
       <div className='header gap' />
       {children}
-      <Footer />
+      {router.pathname !== '/404' && <Footer />}
     </div>
   )
 }

src/pages/404.jsx

@@ -0,0 +1,35 @@
+import Seo from '@/components/Seo/Seo'
+import { BaseLayout } from '@/layouts/BaseLayout'
+import { resourcesVideoData } from '@/service/video-api'
+import Error404 from '@/views/404'
+
+export async function getStaticProps () {
+  const videoData = await resourcesVideoData()
+
+  return {
+    props: {
+      videos: videoData
+    },
+    revalidate: 60 * 60 // one hour
+  }
+}
+
+const PageNotFound = (props) => {
+  return (
+    <>
+      <Seo
+        ogURL='/404'
+        title='Page Not Found / Neptune Mutual'
+        ogImage='/assets/images/meta/home.png'
+        ogImageAlt='Neptune Mutual NFT 404'
+        description='The page you requested either does not exist or has been deleted'
+      />
+
+      <BaseLayout videos={props.videos}>
+        <Error404 />
+      </BaseLayout>
+    </>
+  )
+}
+
+export default PageNotFound

src/pages/404.scss

@@ -0,0 +1 @@
+@import "../views/404.scss";

src/pages/marketplace/[tokenId].jsx

@@ -13,15 +13,27 @@ import { resourcesVideoData } from '@/service/video-api'
 import { NftDetails } from '@/views/NftDetails'
 
 export async function getStaticProps (context) {
-  const [nftDetailsResponse, premiumNftsResponse, videoResponse] = await Promise.all([NftApi.getNftDetails(context.params.tokenId), NftApi.premiumNfts(), resourcesVideoData()])
+  try {
+    const [nftDetailsResponse, premiumNftsResponse, videoResponse] = await Promise.all([NftApi.getNftDetails(context.params.tokenId), NftApi.premiumNfts(), resourcesVideoData()])
 
-  return {
-    props: {
-      nftDetails: nftDetailsResponse.data[0],
-      premiumNfts: premiumNftsResponse.data,
-      videos: videoResponse
-    },
-    revalidate: 60 * 60 // one hour
+    if (nftDetailsResponse.data.length === 0) {
+      return {
+        notFound: true
+      }
+    }
+
+    return {
+      props: {
+        nftDetails: nftDetailsResponse.data[0],
+        premiumNfts: premiumNftsResponse.data,
+        videos: videoResponse
+      },
+      revalidate: 60 * 60 // one hour
+    }
+  } catch (error) {
+    return {
+      notFound: true
+    }
   }
 }
 

src/pages/marketplace/mint/[tokenId].jsx

@@ -13,16 +13,28 @@ import { resourcesVideoData } from '@/service/video-api'
 import { MintNft } from '@/views/MintNft'
 
 export async function getStaticProps (context) {
-  const [nftDetailsResponse, premiumNftsResponse, mintingLevelResponse, videoResponse] = await Promise.all([NftApi.getNftDetails(context.params.tokenId), NftApi.premiumNfts(), NftApi.mintingLevels(), resourcesVideoData()])
-
-  return {
-    props: {
-      nftDetails: nftDetailsResponse.data[0],
-      premiumNfts: premiumNftsResponse.data,
-      mintingLevels: mintingLevelResponse.data,
-      videos: videoResponse
-    },
-    revalidate: 60 * 60 // one hour
+  try {
+    const [nftDetailsResponse, premiumNftsResponse, mintingLevelResponse, videoResponse] = await Promise.all([NftApi.getNftDetails(context.params.tokenId), NftApi.premiumNfts(), NftApi.mintingLevels(), resourcesVideoData()])
+
+    if (nftDetailsResponse.data.length === 0) {
+      return {
+        notFound: true
+      }
+    }
+
+    return {
+      props: {
+        nftDetails: nftDetailsResponse.data[0],
+        premiumNfts: premiumNftsResponse.data,
+        mintingLevels: mintingLevelResponse.data,
+        videos: videoResponse
+      },
+      revalidate: 60 * 60 // one hour
+    }
+  } catch (error) {
+    return {
+      notFound: true
+    }
   }
 }
 
@@ -53,6 +65,10 @@ const MintNftPage = ({ nftDetails, premiumNfts, mintingLevels, videos }) => {
     logWantToMint()
   }, [logWantToMint])
 
+  // if (router.isFallback || !nftDetails) {
+  //   return console.log('Page Not Found')
+  // }
+
   if (!nftDetails) {
     return <></>
   }

src/pages/marketplace/page/[page].jsx

@@ -5,15 +5,27 @@ import { getSSRData } from '@/utils/ssr'
 import { Marketplace } from '@/views/Marketplace'
 
 export async function getServerSideProps (context) {
-  const { data, marketplaceFilters, pageData } = await getSSRData(context)
-  const videoData = await resourcesVideoData()
+  try {
+    const { data, marketplaceFilters, pageData } = await getSSRData(context)
+    const videoData = await resourcesVideoData()
 
-  return {
-    props: {
-      data,
-      marketplaceFilters,
-      pageData,
-      videos: videoData
+    if (data.length === 0) {
+      return {
+        notFound: true
+      }
+    }
+
+    return {
+      props: {
+        data,
+        marketplaceFilters,
+        pageData,
+        videos: videoData
+      }
+    }
+  } catch (error) {
+    return {
+      notFound: true
     }
   }
 }

src/styles/global.scss

@@ -144,6 +144,7 @@ button,
 //Pages
 @import "../pages/index.scss";
 @import "../pages/marketplace/index.scss";
+@import "../pages/404.scss";
 @import "../views/NftDetails.scss";
 @import "../views/MintNft.scss";
 @import "../views/mint-nft/MintingLevels.scss";

src/views/404.jsx

@@ -0,0 +1,24 @@
+import { Button } from '@/components/Button/Button'
+
+const Error404 = () => {
+  return (
+    <div className='pagenotfound page'>
+      <div className='inner container'>
+        <h2>404 Error</h2>
+        <h1>Page Not Found</h1>
+        <p>Sorry, the page you are looking for doesn’t exist or has been moved.</p>
+      </div>
+      <Button
+        type='anchor'
+        variant='primary'
+        size='xl'
+        href='/'
+        iconTrailing='arrow-narrow-right'
+      >
+        Take me to homepage
+      </Button>
+    </div>
+  )
+}
+
+export default Error404

src/views/404.scss

@@ -0,0 +1,79 @@
+@use "../design-system/utils";
+@use "../design-system/colors";
+@use "../design-system/typography/styles";
+@use "../design-system/typography/weights";
+
+.pagenotfound.page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-direction: column;
+  gap: 32px;
+  height: calc(100vh - var(--header-height));
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: url("../../public/assets/images/404/nft_error_bg.webp") no-repeat center top;
+    background-size: 100% 100%;
+    z-index: -1;
+  }
+
+  .inner.container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0 16px;
+
+    h1 {
+      @include styles.display-xl;
+
+      @media (max-width: 767px) {
+        @include styles.display-md;
+      }
+    }
+
+    h2 {
+      @include styles.text-md;
+      @include weights.semibold;
+      color: colors.$primary-600;
+    }
+
+    p {
+      @include styles.text-xl;
+      @include weights.regular;
+
+      @media (max-width: 767px) {
+        @include styles.text-lg;
+      }
+    }
+  }
+
+  .ui.primary.button {
+    display: inline-flex;
+  }
+}
+
+.dark .pagenotfound.page {
+  &::before {
+    background: url("../../public/assets/images/404/nft_error_bg_dark.webp") no-repeat center top;
+    background-size: 100% 100%;
+    mix-blend-mode: overlay;
+  }
+
+  .inner.container {
+    h2 {
+      color: colors.$primary-300;
+    }
+
+    p {
+      color: colors.$gray-25;
+    }
+  }
+}

src/views/MintNft.jsx

@@ -67,7 +67,7 @@ const MintNft = ({ nftDetails, premiumNfts, mintingLevels }) => {
             <CustomTooltip text={
               <div className='progress tooltip'>
                 <div className='label'>Required:</div>
-                <div className='value'>${required.toLocaleString('en-US')}</div>
+                <div className='value'>${required?.toLocaleString('en-US')}</div>
                 <br />
                 <div className='label'>Your Policy Purchase:</div>
                 <div className='value'>${current.toLocaleString('en-US')}</div>
@@ -138,14 +138,14 @@ const MintNft = ({ nftDetails, premiumNfts, mintingLevels }) => {
               <h3>Your Milestones</h3>
               {buildProgress({
                 title: 'Policy Purchase',
-                required: requirements.policyPurchase,
+                required: requirements?.policyPurchase,
                 current: currentProgress.totalPolicyPurchased,
                 percent: policyPurchasePercent,
                 remaining: policyPurchaseRemaining
               })}
               {buildProgress({
                 title: 'Added Liquidity',
-                required: requirements.liquidity,
+                required: requirements?.liquidity,
                 current: currentProgress.totalLiquidityAdded,
                 percent: liquidityPercent,
                 remaining: liquidityRemaining

src/views/marketplace/MarketplaceSection.jsx

@@ -134,17 +134,25 @@ const MarketPlaceSection = ({ data = [], filters = [], pageData }) => {
                   <NftPlaceholder key={i} />
                 ))}
               {(!loading || isNavigating) &&
-                data.map((nft) => (
-                  <NftCard
-                    key={nft.tokenId}
-                    name={nft.nickname}
-                    nftId={nft.tokenId}
-                    views={nft.views}
-                    count={nft.siblings}
-                    image={`${imageOrigin}/thumbnails/${nft.tokenId}.webp`}
-                  />
-                ))}
+                 data.map((nft) => (
+                   <NftCard
+                     key={nft.tokenId}
+                     name={nft.nickname}
+                     nftId={nft.tokenId}
+                     views={nft.views}
+                     count={nft.siblings}
+                     image={`${imageOrigin}/thumbnails/${nft.tokenId}.webp`}
+                   />
+                 ))}
             </div>
+
+            {!loading && !isNavigating && data.length === 0 &&
+              <div className='noresult found'>
+                <div className='content'>
+                  <h2>No Results Found</h2>
+                  <p>Adjust your filters and try again.</p>
+                </div>
+              </div>}
           </div>
 
           <Pagination