feature: add number counterup

src/components/NumCard.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { Flex, Stack, Icon, Text, VStack, HStack } from "@chakra-ui/react"
-
+import { useCountup } from '../hooks'
 /**
  * 
  */
@@ -31,11 +31,14 @@ export const NumCard = ({ icon, title, num }) => {
     )
 }
 
-export const MultiChainCard = ({ icon, title, num }) => {
+export const MultiChainCard = ({ icon, title, num, enabledCountup = true }) => {
+    const [counter, setCounter] = useCountup()
 
     React.useEffect(() => {
-
-    }, [])
+        if (enabledCountup) {
+            setCounter(parseFloat(num || 0.00))
+        }
+    }, [num])
 
     return (
         <VStack
@@ -66,18 +69,19 @@ export const MultiChainCard = ({ icon, title, num }) => {
                 fontSize="22"
                 fontWeight="900"
             >
-                <Text>{num}</Text>
+                <Text>{enabledCountup ? counter : num}</Text>
             </HStack>
 
         </VStack>
     )
 }
 
-export const StateCard = ({ icon, title, num }) => {
+export const StateCard = ({ icon, title, num, enabledCountup = true }) => {
+    const [counter, setCounter] = useCountup()
 
     React.useEffect(() => {
-
-    }, [])
+        enabledCountup && setCounter(parseFloat(num || 0.00))
+    }, [num])
 
     return (
         <VStack
@@ -108,7 +112,7 @@ export const StateCard = ({ icon, title, num }) => {
                 fontSize="18"
                 fontWeight="700"
             >
-                <Text>{num}</Text>
+                <Text>{enabledCountup ? counter : num}</Text>
             </HStack>
 
         </VStack>

src/components/StakingCoinCard.js

@@ -278,8 +278,8 @@ export const StakingCoinCard = ({
             <HStack
                 w="full"
             >
-                <StateCard title={t('vl') + '(' + symbol + ')'} num={vl} />
-                <StateCard title={t('assets') + '(' + symbol + ')'} num={assets} />
+                <StateCard title={t('vl') + '(' + symbol + ')'} num={vl} enabledCountup={false} />
+                <StateCard title={t('assets') + '(' + symbol + ')'} num={assets} enabledCountup={false} />
             </HStack>
 
             <HStack

src/hooks/index.js

@@ -1 +1,2 @@
-export * from './useLocalStorage'
+export * from './useLocalStorage'
+export * from './useCountup'

src/hooks/useCountup.js

@@ -0,0 +1,50 @@
+import React from "react"
+import { toF } from "../utils"
+
+/**
+ * 
+ * @param {number} dest 目標數字
+ */
+export const useCountup = (mill_secs = 1000, interval = 100, start = 0) => {
+    const [dest, setDest] = React.useState(0)
+    const [cur, setCur] = React.useState(start)
+    const hi = React.useRef()
+
+    const stopInterval = () => {
+        if (hi.current) {
+            clearInterval(hi.current)
+            hi.current = null
+        }
+    }
+
+    React.useEffect(() => {
+        const times = mill_secs / interval
+        const step = (dest - start) / times
+        const step_min = step / 2
+        const step_max = step * 1.5
+
+        setCur((cur) => start)
+
+        if (dest <= 0 || hi.current) {
+            return
+        }
+
+        hi.current = setInterval(() => {
+            let new_delta = Math.random() * (step_max - step_min) + step_min
+            // console.log('new_delta:', new_delta)
+            setCur((cur) => {
+                let new_val = new_delta + cur
+                if (new_val >= dest) {
+                    new_val = dest
+                    stopInterval()
+                }
+                // console.log('new_val:', new_val)
+                return toF(new_val, 2)
+            })
+        }, interval)
+
+        return stopInterval
+    }, [dest])
+
+    return [cur, setDest]
+}

src/pages/Home.js

@@ -7,6 +7,7 @@ import { Auditors, Partners, Carousel, MultiChainCard, StateCard, MiningListCard
 import { useApp } from '../AppContext'
 import { get_coins_platform } from '../api'
 import { ImPieChart, ImFire } from 'react-icons/im'
+import { useCountup } from "../hooks"
 
 const HomeFooter = () => {
 

src/utils.js

@@ -0,0 +1,2 @@
+
+export const toF = (org, pn) => parseFloat(parseFloat(org).toFixed(pn))