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

src/components/Alert/AlertInfo.jsx

@@ -0,0 +1,12 @@
+import { Icon } from '@/elements/Icon'
+
+const AlertInfo = () => {
+  return (
+    <div className='alert default'>
+      <Icon variant='info-circle' size='lg' />
+      <span>Please connect your wallet to view milestones and minting levels.</span>
+    </div>
+  )
+}
+
+export default AlertInfo

src/components/Alert/AlertInfo.scss

@@ -0,0 +1,21 @@
+@use "../../design-system/colors";
+@use "../../design-system/typography/styles";
+@use "../../design-system/typography/weights";
+
+.alert {
+  display: flex;
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: colors.$base-white;
+  align-items: center;
+  gap: 4px;
+
+  span {
+    @include styles.text-md;
+    @include weights.regular;
+  }
+
+  &.default {
+    background: colors.$gray-900;
+  }
+}

src/components/CountUp/CountUp.jsx

@@ -61,6 +61,10 @@ const CountUp = ({ number, symbol, prefix = false, localized = false }) => {
 
   const counterValue = getReadableCounterValue({ localized, val, number })
 
+  if (number <= 0) {
+    return <span ref={countRef}>{prefix && symbol}{localized ? number.toLocaleString('en-US') : number}{!prefix && symbol}</span>
+  }
+
   return (
     <span ref={countRef}>{prefix && symbol}{counterValue}{!prefix && symbol}</span>
   )

src/elements/icons/paths.js

@@ -20,6 +20,7 @@ const paths = {
   'trash-01': import('./variants/General/trash-01.svg?raw'),
   'help-cirlce': import('./variants/General/help-circle.svg?raw'),
   'share-01': import('./variants/General/share-01.svg?raw'),
+  'info-circle': import('./variants/General/info-circle.svg?raw'),
   eye: import('./variants/General/eye.svg?raw'),
   heart: import('./variants/General/heart.svg?raw'),
   minus: import('./variants/General/minus.svg?raw'),

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

@@ -1,28 +1,44 @@
 import {
   useCallback,
   useEffect,
-  useRef
+  useRef,
+  useState
 } from 'react'
 
 import { useRouter } from 'next/router'
 
 import Seo from '@/components/Seo/Seo'
+import { AppConstants } from '@/constants/AppConstants'
 import { BaseLayout } from '@/layouts/BaseLayout'
 import { NftApi } from '@/service/nft-api'
 import { resourcesVideoData } from '@/service/video-api'
+import { weiToToken } from '@/utils/currencyHelpers'
 import { MintNft } from '@/views/MintNft'
+import { useWeb3React } from '@web3-react/core'
 
 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
+    }
   }
 }
 
@@ -33,8 +49,15 @@ export async function getStaticPaths () {
 const MintNftPage = ({ nftDetails, premiumNfts, mintingLevels, videos }) => {
   const router = useRouter()
 
+  const { account } = useWeb3React()
+
   const logWantToMintExecuted = useRef(false)
 
+  const [userProgress, setUserProgress] = useState({
+    totalLiquidityAdded: 0,
+    totalPolicyPurchased: 0
+  })
+
   const logWantToMint = useCallback(async () => {
     // This is because react in strict mode, executes useEffect twice.
     if (logWantToMintExecuted.current === false) {
@@ -53,6 +76,27 @@ const MintNftPage = ({ nftDetails, premiumNfts, mintingLevels, videos }) => {
     logWantToMint()
   }, [logWantToMint])
 
+  useEffect(() => {
+    const fetchMilestones = async () => {
+      const data = await NftApi.mintingLevelsMilestone(account)
+
+      setUserProgress({
+        totalLiquidityAdded: weiToToken(data.data[0].totalLiquidityAdded, AppConstants.FALLBACK_LIQUIDITY_TOKEN_DECIMALS),
+        totalPolicyPurchased: weiToToken(data.data[0].totalPolicyPurchased, AppConstants.FALLBACK_LIQUIDITY_TOKEN_DECIMALS)
+      })
+    }
+
+    if (account) fetchMilestones()
+  }, [account])
+
+  useEffect(() => {
+    if (!account) {
+      document.querySelector('body').style.overflow = 'hidden'
+    } else {
+      document.querySelector('body').style.overflow = 'auto'
+    }
+  }, [account])
+
   if (!nftDetails) {
     return <></>
   }
@@ -68,7 +112,7 @@ const MintNftPage = ({ nftDetails, premiumNfts, mintingLevels, videos }) => {
       />
 
       <BaseLayout videos={videos}>
-        <MintNft nftDetails={nftDetails} premiumNfts={premiumNfts} mintingLevels={mintingLevels} />
+        <MintNft nftDetails={nftDetails} premiumNfts={premiumNfts} mintingLevels={mintingLevels} currentProgress={userProgress} />
       </BaseLayout>
     </>
   )

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/service/nft-api.js

@@ -70,6 +70,14 @@ const mintingLevels = async () => {
   return data
 }
 
+const mintingLevelsMilestone = async (address) => {
+  const response = await fetch(origin + '/minting-levels/milestones/' + address)
+
+  const data = await response.json()
+
+  return data
+}
+
 const NftApi = {
   knowTheCharacters,
   mostViewedNfts,
@@ -78,7 +86,8 @@ const NftApi = {
   getNftDetails,
   logView,
   logWantToMint,
-  mintingLevels
+  mintingLevels,
+  mintingLevelsMilestone
 }
 
 export { NftApi }

src/styles/global.scss

@@ -122,6 +122,7 @@ button,
 @import "../components/Button/LinkColorButton.scss";
 @import "../components/Progress/Progress.scss";
 @import "../components/IconButton/IconButton.scss";
+@import "../components/Alert/AlertInfo.scss";
 
 @import "../components/NftImageWithExpand.scss";
 @import "../components/NftNickname.scss";
@@ -144,6 +145,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