Added Sitemap, Updated SEO, Fixed other minor issues

.eslintignore

@@ -0,0 +1 @@
+src/lib/*

generate-sitemap.js

@@ -0,0 +1,49 @@
+/*
+Caution:
+  Use type: "module" inside of package.json before executing this file.
+  Remove the type after building the sitemap.
+
+Sitemap can be build ahead of time for NFT portal.
+*/
+
+import fs from 'fs/promises'
+
+import { AppConstants } from '@/constants/AppConstants.js'
+import { getFullUrl } from '@/utils/get-full-url.js'
+
+import { serialize } from './src/lib/serialize.js'
+import { NftApi } from './src/service/nft-api.js'
+
+const domainName = AppConstants.domainName
+
+const urls = [
+  {
+    loc: getFullUrl(domainName, false)
+  },
+  {
+    loc: getFullUrl(domainName + '/marketplace', false)
+  },
+  {
+    loc: getFullUrl(domainName + '/marketplace/minting-levels', false)
+  }
+]
+
+const main = async () => {
+  const response = await NftApi.knowTheCharacters()
+
+  for (const character of response.data) {
+    for (let i = 0; i < character.siblings; i++) {
+      urls.push({
+        loc: getFullUrl(domainName + `/marketplace/${(character.startIndex + i + 1)}`, false)
+      }, {
+        loc: getFullUrl(domainName + `/marketplace/mint/${(character.startIndex + i + 1)}`, false)
+      })
+    }
+  }
+
+  const content = await serialize(urls)
+
+  await fs.writeFile('public/sitemap.xml', content)
+}
+
+main()

package.json

@@ -6,6 +6,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "build:sitemap": "node generate-sitemap.js",
     "lint": "next lint"
   },
   "dependencies": {

public/robots.txt

@@ -0,0 +1,17 @@
+sitemap: https://nft.neptunemutual.com/sitemap.xml
+Sitemap: https://nft.neptunemutual.com/sitemap.xml
+
+User-agent: rogerbot
+Crawl-delay: 10
+
+User-agent: AhrefsBot
+Crawl-delay: 10
+Disallow: /assets/*
+Disallow: /scripts/*
+Allow: /
+Allow: /marketplace/*
+Allow: /marketplace/mint/*
+
+
+User-agent: *
+Allow: /

src/components/ConnectWallet/ConnectedDropdown.scss

@@ -7,7 +7,7 @@
   position: relative;
 
   .trigger {
-    padding: 10px 16px;
+    padding: 8px 16px;
     border: 1px solid colors.$gray-300;
     border-radius: 8px;
     display: flex;

src/components/CountUp/CountUp.jsx

@@ -1,19 +1,25 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react'
+
 import { linspace } from '@/utils/linspace'
-import { useEffect, useMemo, useRef, useState } from 'react'
 
 const getReadableCounterValue = ({ localized, val, number }) => {
   const isTargetInteger = number % 1 === 0
 
   const value = val < number ? isTargetInteger ? Math.floor(val) : val.toFixed(2) : val
 
   if (localized) {
-    return value.toLocaleString('en-US')
+    return parseFloat(value).toLocaleString('en-US')
   } else {
     return value
   }
 }
 
-const CountUp = ({ number, symbol, localized = false }) => {
+const CountUp = ({ number, symbol, prefix = false, localized = false }) => {
   const [val, setVal] = useState(0)
 
   const countRef = useRef()
@@ -56,7 +62,7 @@ const CountUp = ({ number, symbol, localized = false }) => {
   const counterValue = getReadableCounterValue({ localized, val, number })
 
   return (
-    <span ref={countRef}>{counterValue}{symbol}</span>
+    <span ref={countRef}>{prefix && symbol}{counterValue}{!prefix && symbol}</span>
   )
 }
 

src/components/Footer/Footer.jsx

@@ -1,14 +1,13 @@
-import Link from 'next/link'
+import { useContext } from 'react'
 
 import { AppConstants } from '@/constants/AppConstants'
+import { ThemeContext } from '@/contexts/ThemeContext'
 import { Icon } from '@/elements/Icon'
 
 import NpmDarkLogo from '../../elements/npm/npm-logo-dark-mode.svg?raw'
 import NpmLightLogo from '../../elements/npm/npm-logo-light-mode.svg?raw'
 import { normalizeUrl } from '../../utils/url'
 import { getFooterData } from './data'
-import { useContext } from 'react'
-import { ThemeContext } from '@/contexts/ThemeContext'
 
 const { lists, socials } = getFooterData()
 
@@ -19,11 +18,11 @@ const Footer = () => {
     <footer>
       <div className='inner container'>
         <div className='nav container'>
-          <Link className='logo' href='/'>
+          <a className='logo' href={AppConstants.neptunemutualOrigin + '/?theme=' + (themeContext.dark ? 'dark' : 'light')}>
             <span className='sr-only'>Neptune Mutual</span>
             <span className='light only'><NpmLightLogo /></span>
             <span className='dark only'><NpmDarkLogo /></span>
-          </Link>
+          </a>
 
           <nav>
             {lists.map((list) => {

src/components/Header/Header.jsx

@@ -1,10 +1,12 @@
-import Link from 'next/link'
+import { useContext } from 'react'
 
 import HamburgerButton from '@/components/Header/HamburgerButton'
 import Navigation from '@/components/Header/Navigation'
 import SubMenu from '@/components/Header/SubMenu'
 import { ThemeSelector } from '@/components/Header/ThemeSelector'
 import VideoModal from '@/components/VideoModal'
+import { AppConstants } from '@/constants/AppConstants'
+import { ThemeContext } from '@/contexts/ThemeContext'
 import { data } from '@/utils/nav'
 
 import NpmDarkLogo from '../../elements/npm/npm-logo-dark-mode.svg'
@@ -16,17 +18,19 @@ const Header = ({ headerStyle, videos }) => {
     thumbnail: { ...video.thumbnail, url: '' }
   }))
 
+  const { dark } = useContext(ThemeContext)
+
   return (
     <>
       <VideoModal />
       <header data-style={headerStyle}>
         <div className='inner container'>
           <div className='logo and rest'>
-            <Link className='logo' href='/'>
+            <a className='logo' href={AppConstants.neptunemutualOrigin + '/?theme=' + (dark ? 'dark' : 'light')}>
               <span className='sr-only'>Neptune Mutual</span>
               <span className='light only'><NpmLightLogo /></span>
               <span className='dark only'><NpmDarkLogo /></span>
-            </Link>
+            </a>
 
             <div
               className='nav with language and theme'

src/components/Modal/Modal.scss

@@ -22,6 +22,7 @@
   max-height: 85vh;
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 10001;
+  overflow-y: auto;
 
   .titlebar {
     display: flex;

src/components/NftCard/NftCard.jsx

@@ -1,6 +1,7 @@
+import Link from 'next/link'
+
 import CountUp from '@/components/CountUp/CountUp'
 import { Icon } from '@/elements/Icon'
-import Link from 'next/link'
 
 const NftCard = ({ name, views, count, nftId, image }) => {
   return (
@@ -22,7 +23,7 @@ const NftCard = ({ name, views, count, nftId, image }) => {
             <div className='nft insight'>
               <span className='sr-only'>Views</span>
               <Icon variant='eye' size='sm' />
-              <span><CountUp number={views} /></span>
+              <span><CountUp localized number={views} /></span>
             </div>
             <div className='nft insight'>
               <span className='sr-only'>Count</span>

src/components/NftSiblingsAndStage.jsx

@@ -4,7 +4,7 @@ import { Tags } from '@/components/Tags/Tags'
 const NftSiblingsAndStage = ({ nft }) => {
   return (
     <div className='siblings and stage'>
-      <div><CountUp number={nft.siblings} /> siblings</div>
+      <div><CountUp localized number={nft.siblings} /> siblings</div>
       {nft.stage !== null &&
         <div>
           <Tags

src/components/Seo/Seo.jsx

@@ -1,23 +1,38 @@
 import Head from 'next/head'
 
-const Seo = ({ title, description, ogImage, ogImageAlt, ogURL }) => {
+import { getFullUrl } from '@/utils/get-full-url'
+
+const domainName = process.env.NEXT_PUBLIC_DOMAIN_NAME ||
+'https://nft.neptunemutual.com'
+
+const Seo = ({ title, description, ogImage, ogImageAlt, ogURL, ogLocale, ogType }) => {
+  const siteURL = getFullUrl(domainName + ogURL, false)
+  const imageURL = getFullUrl(domainName + ogImage, false)
+
   return (
     <Head>
       {/* Primary Meta Tags */}
       <title>{title}</title>
       <meta name='description' content={description} />
+      <link rel='canonical' href={siteURL} />
 
       {/* Open Graph / Facebook */}
       <meta property='og:title' content={title} />
       <meta property='og:description' content={description} />
-      <meta property='og:image' content={ogImage} />
-      <meta property='og:url' content={ogURL} />
+      <meta property='og:image' content={imageURL} />
+      <meta property='og:url' content={siteURL} />
+      <meta property='og:locale' content={ogLocale || 'en'} />
+      <meta property='og:type' content={ogType || 'website'} />
 
       {/* Twitter  */}
       <meta name='twitter:title' content={title} />
+      <meta property='twitter:site' content='@neptunemutual' />
+      <meta property='twitter:creator' content='@neptunemutual' />
       <meta property='twitter:description' content={description} />
-      <meta property='twitter:image' content={ogImage} />
+      <meta property='twitter:image' content={imageURL} />
       <meta property='twitter:image:alt' content={ogImageAlt} />
+      <meta property='twitter:card' content='summary_large_image' />
+
     </Head>
   )
 }

src/components/Tooltip/Tooltip.scss

@@ -1,5 +1,7 @@
 @use "../../design-system/colors";
 @use "../../design-system/shadows";
+@use "../../design-system/typography/styles";
+@use "../../design-system/typography/weights";
 
 .TooltipContent {
   border-radius: 4px;
@@ -75,3 +77,16 @@
     transform: translateX(0);
   }
 }
+
+.progress.tooltip {
+  min-width: 147px;
+
+  .label,
+  .value {
+    @include styles.text-xs;
+  }
+
+  .value {
+    @include weights.semibold;
+  }
+}

src/config/minting-levels.js

@@ -0,0 +1,32 @@
+const mintingLevelRequirements = {
+  1: {
+    policyPurchase: 2500,
+    liquidity: 500
+  },
+  2: {
+    policyPurchase: 10000,
+    liquidity: 5000
+  },
+  3: {
+    policyPurchase: 50000,
+    liquidity: 10000
+  },
+  4: {
+    policyPurchase: 100000,
+    liquidity: 50000
+  },
+  5: {
+    policyPurchase: 1000000,
+    liquidity: 100000
+  },
+  6: {
+    policyPurchase: 1500000,
+    liquidity: 250000
+  },
+  7: {
+    policyPurchase: 25000000,
+    liquidity: 500000
+  }
+}
+
+export { mintingLevelRequirements }

src/constants/AppConstants.js

@@ -1,5 +1,17 @@
+import { getFullUrl } from '@/utils/get-full-url'
+
 const AppConstants = {
-  neptunemutualOrigin: 'https://neptunemutual.com'
+  neptunemutualOrigin: 'https://neptunemutual.com',
+  domainName: getFullUrl(process.env.NEXT_PUBLIC_DOMAIN_NAME ||
+  'https://nft.neptunemutual.com', false),
+  nftApiBaseURL: getFullUrl(process.env.NEXT_PUBLIC_NFT_API_ORIGIN || 'https://nft-api.neptunemutual.net', false),
+  nftImageOrigin: getFullUrl(process.env.NEXT_PUBLIC_NFT_IMAGE_ORIGIN || 'https://nft.neptunemutual.net', false),
+  FALLBACK_LIQUIDITY_TOKEN_DECIMALS: 6,
+  NPM_TOKEN_DECIMALS: 18,
+  NPM_TOKEN_SYMBOL: 'NPM',
+  POD_TOKEN_SYMBOL: 'POD',
+  FALLBACK_LIQUIDITY_TOKEN_SYMBOL: 'USD',
+  PREFERRED_LOCALE: 'en-US'
 }
 
 export { AppConstants }