refactor: Number Animation, Sorting

src/components/NftCard/NftCard.jsx

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

src/components/NftSiblingsAndStage.jsx

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

src/views/MintNft.jsx

@@ -1,7 +1,6 @@
 import AlertInfo from '@/components/Alert/AlertInfo'
 import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb'
 import { ConnectWallet } from '@/components/ConnectWallet/ConnectWallet'
-import CountUp from '@/components/CountUp/CountUp'
 import { LikeAndShare } from '@/components/LikeAndShare'
 import NftCardWithBlurEffect
   from '@/components/NftCardWithBlurEffect/NftCardWithBlurEffect'
@@ -53,7 +52,8 @@ const MintNft = ({ nftDetails, premiumNfts, mintingLevels, currentProgress }) =>
       <Progress percent={percent} />
       <div>
         <div className='remaining'>
-          <div className='info'><CountUp number={remaining} symbol='$' localized prefix /> remaining
+          <div className='info'>
+            <span>${remaining} remaining</span>
             <CustomTooltip text={
               <div className='progress tooltip'>
                 <div className='label'>Required:</div>
@@ -73,7 +73,7 @@ const MintNft = ({ nftDetails, premiumNfts, mintingLevels, currentProgress }) =>
             </CustomTooltip>
 
           </div>
-          <div className='percent'><CountUp number={percent} />%</div>
+          <div className='percent'>{percent}%</div>
         </div>
       </div>
     </div>
@@ -121,7 +121,7 @@ const MintNft = ({ nftDetails, premiumNfts, mintingLevels, currentProgress }) =>
 
                 {/* Remove the style below when enabling the above button */}
                 <div className='supporting text' style={{ marginTop: '16px' }}>
-                  <CountUp localized number={nftDetails.wantToMint} /> people want to mint this.
+                  {nftDetails.wantToMint} people want to mint this.
                 </div>
               </div>
 

src/views/NftDetails.jsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/router'
 import { Breadcrumb } from '@/components/Breadcrumb/Breadcrumb'
 import { Button } from '@/components/Button/Button'
 import { ConnectWallet } from '@/components/ConnectWallet/ConnectWallet'
-import CountUp from '@/components/CountUp/CountUp'
 import { LikeAndShare } from '@/components/LikeAndShare'
 import NftCardWithBlurEffect
   from '@/components/NftCardWithBlurEffect/NftCardWithBlurEffect'
@@ -76,7 +75,7 @@ const NftDetails = ({ nftDetails, premiumNfts }) => {
                   </div>
                 </CustomTooltip>
                 <div className='supporting text'>
-                  <CountUp number={nftDetails.wantToMint} /> people want to mint this.
+                  {nftDetails.wantToMint} people want to mint this.
                 </div>
               </div>
 

src/views/home/MostViewedNfts.jsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 
-import CountUp from '@/components/CountUp/CountUp'
 import { abbreviateNumber } from '@/utils/abbreviate-number'
 import { getMarketplaceFiltersHref } from '@/utils/nft'
 
@@ -24,7 +23,7 @@ const MostViewedNfts = ({ mostViewedNfts }) => {
                 <div className='character viewed'>
                   Viewed{' '}
                   <span data-tooltip={views.long} data-flow='left'>
-                    <CountUp number={views.result} symbol={views.symbol} />
+                    {views.result}{views.symbol}
                   </span>{' '}
                   times
                 </div>

src/views/home/PremiumNfts.jsx

@@ -7,7 +7,7 @@ function PremiumNfts ({ premiumNfts }) {
     <div className='premium nfts'>
       <Slider gap={16}>
         {
-        premiumNfts.map((character) => {
+        premiumNfts.sort((obj1, obj2) => obj1.siblings - obj2.siblings).map((character) => {
           return (
             <NftCardWithBlurEffect
               key={character.name}

src/views/home/RegularNfts.jsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
 
-import CountUp from '@/components/CountUp/CountUp'
 import { Slider } from '@/components/Slider/Slider'
 import { getMarketplaceFiltersHref } from '@/utils/nft'
 
@@ -10,7 +9,7 @@ const RegularNfts = ({ regularNfts }) => {
       <h2>Regular NFTs</h2>
       <Slider gap={16}>
         {
-        regularNfts.map((character) => {
+        regularNfts.sort((obj1, obj2) => obj1.siblings - obj2.siblings).map((character) => {
           return (
             <div
               key={character.name}
@@ -21,7 +20,7 @@ const RegularNfts = ({ regularNfts }) => {
                   <img src={character.thumbnail} alt={character.name} />
                 </div>
                 <div className='character name'>{character.name}</div>
-                <div className='supporting text'><CountUp number={character.siblings} localized /> siblings</div>
+                <div className='supporting text'>{character.siblings} siblings</div>
               </Link>
             </div>
           )

src/views/mint-nft/MintingLevels.jsx

@@ -1,4 +1,3 @@
-import CountUp from '@/components/CountUp/CountUp'
 import { Tags } from '@/components/Tags/Tags'
 import { Icon } from '@/elements/Icon'
 
@@ -15,7 +14,7 @@ const MintingLevels = ({ mintingLevels }) => {
       <div key={`${character.name}_${character.role}_${character.level}`} className='character'>
         <div className='img wrapper'>
           <img src={character.thumbnail} alt={character.name} />
-          <div className='siblings'><CountUp localized number={character.siblings} /></div>
+          <div className='siblings'>{character.siblings}</div>
         </div>
         <Tags
           tags={[
@@ -73,8 +72,7 @@ const MintingLevels = ({ mintingLevels }) => {
         <div className='img wrapper'>
           <img src={level7Character.thumbnail} alt='' srcSet='' />
           <div className='siblings'>
-            <CountUp localized number={level7Character.siblings} />
-
+            {level7Character.siblings}
           </div>
         </div>
         <Tags