fix(neuron-ui): cache the genesis block timestamp in the nervos dao component instead of in global

Author: Keith-CY

packages/neuron-ui/src/components/CustomRows/DAORecordRow.tsx

@@ -19,6 +19,7 @@ const DAORecord = ({
   actionLabel,
   onClick,
   timestamp,
+  genesisBlockTimestamp,
   depositTimestamp,
   depositOutPoint,
   epoch,
@@ -30,6 +31,7 @@ const DAORecord = ({
   tipBlockNumber: string
   epoch: string
   withdraw: string | null
+  genesisBlockTimestamp: number | undefined
   connectionStatus: 'online' | 'offline'
 }) => {
   const [t] = useTranslation()
@@ -38,10 +40,10 @@ const DAORecord = ({
   const [apc, setApc] = useState(0)
 
   useEffect(() => {
-    calculateGlobalAPC(+(depositTimestamp || timestamp)).then(res => {
+    calculateGlobalAPC(+(depositTimestamp || timestamp), genesisBlockTimestamp).then(res => {
       setApc(res)
     })
-  })
+  }, [depositTimestamp, timestamp, genesisBlockTimestamp])
 
   useEffect(() => {
     if (!depositOutPoint) {

packages/neuron-ui/src/components/NervosDAO/index.tsx

@@ -15,7 +15,7 @@ import { MIN_DEPOSIT_AMOUNT, MEDIUM_FEE_RATE, SHANNON_CKB_RATIO, MAX_DECIMAL_DIG
 import { verifyAmount } from 'utils/validators'
 
 import { generateDepositTx, generateWithdrawTx, generateClaimTx } from 'services/remote'
-import { ckbCore } from 'services/chain'
+import { ckbCore, getBlockByNumber } from 'services/chain'
 import { epochParser } from 'utils/parsers'
 
 import DAORecord from 'components/CustomRows/DAORecordRow'
@@ -46,6 +46,7 @@ const NervosDAO = ({
   const [errorMessage, setErrorMessage] = useState('')
   const [withdrawList, setWithdrawList] = useState<(string | null)[]>([])
   const [globalAPC, setGlobalAPC] = useState(0)
+  const [genesisBlockTimestamp, setGenesisBlockTimestamp] = useState<number | undefined>(undefined)
 
   const clearGeneratedTx = useCallback(() => {
     dispatch({
@@ -98,6 +99,9 @@ const NervosDAO = ({
   useEffect(() => {
     updateNervosDaoData({ walletID: wallet.id })(dispatch)
     updateDepositValue(`${MIN_DEPOSIT_AMOUNT}`)
+    getBlockByNumber('0x0')
+      .then(b => setGenesisBlockTimestamp(+b.header.timestamp))
+      .catch(err => console.error(err))
     return () => {
       clearNervosDaoData()(dispatch)
       clearGeneratedTx()
@@ -106,11 +110,13 @@ const NervosDAO = ({
 
   useEffect(() => {
     if (tipBlockTimestamp) {
-      calculateGlobalAPC(tipBlockTimestamp).then(apc => {
-        setGlobalAPC(apc)
-      })
+      calculateGlobalAPC(tipBlockTimestamp, genesisBlockTimestamp)
+        .then(apc => {
+          setGlobalAPC(apc)
+        })
+        .catch(err => console.error(err))
     }
-  }, [tipBlockTimestamp])
+  }, [tipBlockTimestamp, genesisBlockTimestamp])
 
   const onDepositDialogDismiss = () => {
     setShowDepositDialog(false)
@@ -276,14 +282,15 @@ const NervosDAO = ({
                 onClick={onActionClick}
                 tipBlockNumber={tipBlockNumber}
                 epoch={epoch}
+                genesisBlockTimestamp={genesisBlockTimestamp}
                 connectionStatus={connectionStatus}
               />
             )
           })}
         </Stack>
       </>
     )
-  }, [records, withdrawList, t, onActionClick, tipBlockNumber, epoch, connectionStatus])
+  }, [records, withdrawList, t, onActionClick, tipBlockNumber, epoch, connectionStatus, genesisBlockTimestamp])
 
   const free = BigInt(wallet.balance)
   const locked = withdrawList.reduce((acc, w) => acc + BigInt(w || 0), BigInt(0))

packages/neuron-ui/src/utils/calculateGlobalAPC.ts

@@ -6,16 +6,11 @@ const DAYS_PER_PERIOD = 365 * 4 * 1
 const MILLI_SECONDS_PER_DAY = 24 * 3600 * 1000
 const PERIOD_LENGTH = DAYS_PER_PERIOD * MILLI_SECONDS_PER_DAY
 
-let cachedGenesisTimestamp: number | undefined
-
-export default async (checkPointTimestamp: number, initialTimestamp: number | undefined = cachedGenesisTimestamp) => {
+export default async (checkPointTimestamp: number, initialTimestamp?: number | undefined) => {
   let genesisTimestamp = initialTimestamp
   if (genesisTimestamp === undefined) {
     genesisTimestamp = await getBlockByNumber('0x0')
-      .then(b => {
-        cachedGenesisTimestamp = +b.header.timestamp
-        return cachedGenesisTimestamp
-      })
+      .then(b => +b.header.timestamp)
       .catch(() => undefined)
   }
   if (genesisTimestamp === undefined || checkPointTimestamp <= genesisTimestamp) {