feat: add count up show market up num

package.json

@@ -18,6 +18,7 @@
     "@cosmjs/stargate": "^0.32.4",
     "@cosmjs/tendermint-rpc": "^0.32.4",
     "@t3-oss/env-core": "^0.11.1",
+    "countup.js": "^2.8.0",
     "graz": "^0.1.25",
     "long": "^5.2.3",
     "nanoid": "^5.0.8",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@t3-oss/env-core':
         specifier: ^0.11.1
         version: 0.11.1(typescript@5.6.3)(zod@3.23.8)
+      countup.js:
+        specifier: ^2.8.0
+        version: 2.8.0
       graz:
         specifier: ^0.1.25
         version: 0.1.25(@cosmjs/amino@0.32.4)(@cosmjs/cosmwasm-stargate@0.32.4(bufferutil@4.0.8)(utf-8-validate@5.0.10))(@cosmjs/launchpad@0.27.1)(@cosmjs/proto-signing@0.32.4)(@cosmjs/stargate@0.32.4(bufferutil@4.0.8)(utf-8-validate@5.0.10))(@cosmjs/tendermint-rpc@0.32.4(bufferutil@4.0.8)(utf-8-validate@5.0.10))(@leapwallet/cosmos-social-login-capsule-provider@0.0.41(@cosmjs/encoding@0.32.4)(@cosmjs/proto-signing@0.32.4)(fp-ts@2.1.1))(@terra-money/feather.js@3.0.0-beta.3)(@types/react@18.3.12)(bufferutil@4.0.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(utf-8-validate@5.0.10)
@@ -2334,6 +2337,9 @@ packages:
   cosmos-directory-types@0.0.6:
     resolution: {integrity: sha512-9qlQ3kTNTHvhYglTXSnllGqKhrtGB08Weatw56ZqV5OqcmjuZdlY9iMtD00odgQLTEpTSQQL3gFGuqTkGdIDPA==}
 
+  countup.js@2.8.0:
+    resolution: {integrity: sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ==}
+
   crc-32@1.2.2:
     resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
     engines: {node: '>=0.8'}
@@ -7491,6 +7497,8 @@ snapshots:
 
   cosmos-directory-types@0.0.6: {}
 
+  countup.js@2.8.0: {}
+
   crc-32@1.2.2: {}
 
   create-ecdh@4.0.4:

src/pages/Detail/index.tsx

@@ -5,7 +5,7 @@ import {
   useExecuteContract,
   useQuerySmart,
 } from "graz"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { useParams } from "react-router"
 import { toast } from "react-toastify"
 import { Footer } from "../../components/footer"
@@ -19,6 +19,7 @@ import DislikeIcon from "./assets/dislike-icon.svg?react"
 import LeftTopIcon from "./assets/left-top-icon.svg?react"
 import LikeIcon from "./assets/like-icon.svg?react"
 import { Tab, TabType } from "./assets/Tab"
+import { CountUp } from 'countup.js'
 
 export interface TokenPrice {
   reserve: string
@@ -62,6 +63,8 @@ export default function Detail() {
   const [activeTab, setActiveTab] = useState<TabType>(TabType.BUY)
   const [amount, setAmount] = useState("")
   const [voteData, setVoteData] = useState<VoteData>({ likes: 0, dislikes: 0 })
+  const countUpRef = useRef<CountUp>()
+  const marketCapRef = useRef<HTMLSpanElement>(null)
 
   useEffect(() => {
     const storedVotes = localStorage.getItem(`votes_${address}`)
@@ -214,6 +217,25 @@ export default function Detail() {
     }
   }
 
+  useEffect(() => {
+    if (marketCapRef.current && tokenPrice?.supply) {
+      if (countUpRef.current) {
+        countUpRef.current.update(Number(formatUnits(tokenPrice.supply, 6)))
+      } else {
+        countUpRef.current = new CountUp(
+          marketCapRef.current,
+          Number(formatUnits(tokenPrice.supply, 6)),
+          {
+            decimalPlaces: 2,
+            duration: 1,
+            useEasing: true,
+          }
+        )
+        countUpRef.current.start()
+      }
+    }
+  }, [tokenPrice?.supply])
+
   return (
     <div className="flex h-screen flex-col bg-[url('/src/pages/Detail/assets/bg.svg')] bg-cover bg-bottom">
       <div className="flex w-full flex-1 items-center justify-center">
@@ -250,9 +272,10 @@ export default function Detail() {
               </div>
               <div className="mt-2 text-[18px] leading-[140%] text-[#D90368]">
                 Market cap{" "}
-                <span className="font-semibold">
-                  {formatUnits(tokenPrice?.supply, 6)}
-                </span>
+                <span 
+                  ref={marketCapRef} 
+                  className="font-semibold"
+                />
               </div>
               <h2 className="mt-[40px] text-[36px] font-[900] uppercase leading-[100%]">
                 {`${tokenData?.displayName} (ticker: ${tokenData?.ticker})`}