Merge develop into testnet

package.json

@@ -58,7 +58,7 @@
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/styled-components": "5.1.28",
+    "@types/styled-components": "5.1.32",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "6.9.1",
     "antd-dayjs-webpack-plugin": "^1.0.6",

src/locales/en.json

@@ -45,7 +45,7 @@
     "halving": {
       "congratulations": "Congratulations",
       "the": "the",
-      "actived": "is atived on block",
+      "actived": "is activated on block",
       "halving": "halving",
       "next": "next",
       "and": "and",

src/pages/Halving/index.tsx

@@ -14,9 +14,8 @@ import { ReactComponent as WarningCircle } from '../../assets/warning_circle.svg
 import { HalvingTable } from './HalvingTable'
 import { HalvingInfo } from './HalvingInfo'
 import SmallLoading from '../../components/Loading/SmallLoading'
-import { useStatistics } from '../../services/ExplorerService'
 import { HalvingCountdown } from './HalvingCountdown'
-import { useCountdown, useHalving, useIsMobile } from '../../utils/hook'
+import { useCountdown, useHalving, useIsMobile, useEpochBlockMap } from '../../utils/hook'
 import { getPrimaryColor, EPOCHS_PER_HALVING, THEORETICAL_EPOCH_TIME } from '../../constants/common'
 import styles from './index.module.scss'
 import { useCurrentLanguage } from '../../utils/i18n'
@@ -46,9 +45,9 @@ function numberToOrdinal(number: number) {
 export const HalvingCountdownPage = () => {
   const { t } = useTranslation()
   const isMobile = useIsMobile()
-  const statistics = useStatistics()
   const { currentEpoch, estimatedDate, currentEpochUsedTime, halvingCount, inCelebration, skipCelebration, isLoading } =
     useHalving()
+  const { epochBlockMap } = useEpochBlockMap()
 
   const percent =
     (((currentEpoch % EPOCHS_PER_HALVING) * THEORETICAL_EPOCH_TIME - currentEpochUsedTime) /
@@ -76,11 +75,7 @@ export const HalvingCountdownPage = () => {
   })
   const shareUrl = `https://x.com/share?text=${encodeURIComponent(shareText)}&hashtags=CKB%2CPoW%2CHalving`
   const getTargetBlockByHavingCount = (count: number) => {
-    return (
-      EPOCHS_PER_HALVING *
-      (statistics.epochInfo.epochLength ? parseInt(statistics.epochInfo.epochLength, 10) : 1800) *
-      count
-    )
+    return epochBlockMap.get(EPOCHS_PER_HALVING * count)
   }
 
   const renderHalvingPanel = () => {
@@ -111,9 +106,13 @@ export const HalvingCountdownPage = () => {
                 {t('halving.halving')}
                 {t('symbol.char_space')}
                 {t('halving.actived')}{' '}
-                <a className={styles.textPrimary} href={`/block/${getTargetBlockByHavingCount(halvingCount)}`}>
-                  {new BigNumber(getTargetBlockByHavingCount(halvingCount)).toFormat()}.
-                </a>
+                {getTargetBlockByHavingCount(halvingCount) ? (
+                  <a className={styles.textPrimary} href={`/block/${getTargetBlockByHavingCount(halvingCount)}`}>
+                    {new BigNumber(getTargetBlockByHavingCount(halvingCount)!).toFormat()}.
+                  </a>
+                ) : (
+                  <SmallLoading />
+                )}
               </div>
             </div>
             <div className={styles.textCenter}>

src/pages/Home/index.tsx

@@ -14,15 +14,15 @@ import {
 } from './styled'
 import Content from '../../components/Content'
 import { parseTime, parseTimeNoSecond } from '../../utils/date'
-import { BLOCK_POLLING_TIME, ListPageParams, DELAY_BLOCK_NUMBER } from '../../constants/common'
+import { BLOCK_POLLING_TIME, ListPageParams, DELAY_BLOCK_NUMBER, EPOCHS_PER_HALVING } from '../../constants/common'
 import { localeNumberString, handleHashRate, handleDifficulty } from '../../utils/number'
 import { handleBigNumber } from '../../utils/string'
 import { isMainnet } from '../../utils/chain'
 import LatestBlocksIcon from './latest_blocks.png'
 import LatestTransactionsIcon from './latest_transactions.png'
 import { BlockCardItem, TransactionCardItem } from './TableCard'
 import Loading from '../../components/Loading/SmallLoading'
-import { useElementIntersecting, useIsLGScreen, useIsMobile } from '../../utils/hook'
+import { useElementIntersecting, useIsLGScreen, useIsMobile, useSingleHalving } from '../../utils/hook'
 import Banner from '../../components/Banner'
 import { HalvingBanner } from '../../components/Banner/HalvingBanner'
 import Search from '../../components/Search'
@@ -226,12 +226,17 @@ export default () => {
     () => transactionsQuery.data?.transactions.slice(0, maxDisplaysCount) ?? [],
     [transactionsQuery.data?.transactions],
   )
+  const { currentEpoch, targetEpoch } = useSingleHalving()
+  const isHalvingHidden =
+    !currentEpoch ||
+    (currentEpoch > targetEpoch + 6 && // 6 epochs(1 day) after halving
+      currentEpoch < targetEpoch + EPOCHS_PER_HALVING - 180) // 180 epochs(30 days) before next halving
 
   const blockchainDataList = useBlockchainDataList(isMobile, isLG)
 
   return (
     <Content>
-      {isMainnet() ? <HalvingBanner /> : <Banner />}
+      {isMainnet() && !isHalvingHidden ? <HalvingBanner /> : <Banner />}
       <div className="container">
         <HomeHeaderTopPanel />
         <div className={`${styles.homeStatisticTopPanel} ${styles.afterHardFork}`}>

src/utils/hook.ts

@@ -646,14 +646,36 @@ export const useSingleHalving = (_halvingCount = 1) => {
   }
 }
 
+export const useEpochBlockMap = () => {
+  const statistics = useStatistics()
+  const currentEpoch = Number(statistics.epochInfo.epochNumber)
+  const { data: epochStatistic } = useQuery(['fetchStatisticDifficultyUncleRateEpoch', currentEpoch], () =>
+    explorerService.api.fetchStatisticDifficultyUncleRateEpoch(),
+  )
+
+  const epochBlockMap = useMemo(() => {
+    const r = new Map<number, number>([[0, 0]])
+    epochStatistic?.forEach(i => {
+      const last = r.get(+i.epochNumber) ?? 0
+      r.set(+i.epochNumber + 1, +i.epochLength + last)
+    })
+
+    return r
+  }, [epochStatistic])
+
+  return {
+    epochBlockMap,
+  }
+}
+
 export const useHalving = () => {
   const statistics = useStatistics()
   const currentEpoch = Number(statistics.epochInfo.epochNumber)
-  const lastedHalvingCount = Math.ceil((currentEpoch + 1) / EPOCHS_PER_HALVING)
-  const lastedHalving = useSingleHalving(lastedHalvingCount)
-  const previousHalving = useSingleHalving(lastedHalvingCount - 1)
+  const nextHalvingCount = Math.ceil((currentEpoch + 1) / EPOCHS_PER_HALVING)
+  const nextHalving = useSingleHalving(nextHalvingCount)
+  const previousHalving = useSingleHalving(nextHalvingCount - 1)
 
-  return previousHalving.inCelebration ? previousHalving : lastedHalving
+  return previousHalving.inCelebration ? previousHalving : nextHalving
 }
 
 export default {

yarn.lock

@@ -5483,10 +5483,10 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/[email protected].28":
-  version "5.1.28"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.28.tgz#3b86c4d373924ff6976de788843cab445d9ab15b"
-  integrity sha512-nu0VKNybkjvUqJAXWtRqKd7j3iRUl8GbYSTvZNuIBJcw/HUp1Y4QUXNLlj7gcnRV/t784JnHAlvRnSnE3nPbJA==
+"@types/[email protected].32":
+  version "5.1.32"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.32.tgz#58718971519c4562229ba85face98e8530d21bfd"
+  integrity sha512-DqVpl8R0vbhVSop4120UHtGrFmHuPeoDwF4hDT0kPJTY8ty0SI38RV3VhCMsWigMUXG+kCXu7vMRqMFNy6eQgA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"