Merge develop into testnet

src/components/Header/MaintainAlert/index.tsx

@@ -1,14 +1,59 @@
+import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { IS_MAINTAINING } from '../../../constants/common'
+import axios from 'axios'
+import config from '../../../config'
+import { useLatestBlockNumber } from '../../../services/ExplorerService'
 import styles from './styles.module.scss'
 
+const { BACKUP_NODES: backupNodes } = config
+const threshold = 20
+
+const getTipFromNode = (url: string): Promise<string> =>
+  axios<any, { data: { result: string } }>(url, {
+    method: 'post',
+    data: {
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'get_tip_block_number',
+      params: [],
+    },
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  }).then(res => res.data.result)
+
 const MaintainAlert = () => {
   const { t } = useTranslation()
-  if (IS_MAINTAINING) {
-    return <div className={styles.container}>{t('error.maintain')}</div>
-  }
+  const synced = useLatestBlockNumber()
+  const { data: tip } = useQuery(
+    ['backup_nodes'],
+    async () => {
+      try {
+        if (backupNodes.length === 0) return null
+
+        const [tip1, tip2]: PromiseSettledResult<string>[] = await Promise.allSettled(backupNodes.map(getTipFromNode))
+        if (tip1.status === 'fulfilled' && tip2.status === 'fulfilled') {
+          if (!tip1.value && !tip2.value) return null
+          if (+tip1.value > +tip2.value) return +tip1.value
+          return +tip2.value
+        }
+        if (tip1.status === 'fulfilled') return +tip1.value
+        if (tip2.status === 'fulfilled') return +tip2.value
+        return null
+      } catch {
+        return null
+      }
+    },
+    { refetchInterval: 12 * 1000 },
+  )
+
+  const lag = tip && synced ? tip - synced : 0
 
-  return null
+  return lag >= threshold ? (
+    <div className={styles.container}>
+      {t('error.maintain', { tip: tip?.toLocaleString('en'), lag: lag.toLocaleString('en') })}
+    </div>
+  ) : null
 }
 
 export default MaintainAlert

src/config.ts

@@ -2,4 +2,5 @@ export default {
   API_URL: process.env.REACT_APP_API_URL || 'http://localhost:3000',
   CHAIN_TYPE: process.env.REACT_APP_CHAIN_TYPE || 'mainnet',
   BASE_URL: process.env.REACT_BASE_URL || 'explorer.nervos.org/',
+  BACKUP_NODES: process.env.REACT_APP_BACKUP_NODES?.split(',') || [],
 }

src/constants/common.ts

@@ -18,7 +18,6 @@ export const ONE_HOUR_MILLISECOND = ONE_HOUR_SECOND * 1000
 export const ONE_MINUTE_SECOND = 60
 export const EPOCHS_PER_HALVING = 8760
 export const THEORETICAL_EPOCH_TIME = 1000 * 60 * 60 * 4 // 4 hours
-export const IS_MAINTAINING = process.env.REACT_APP_IS_MAINTAINING === 'true'
 
 export function getPrimaryColor() {
   return isMainnet() ? '#00CC9B' : '#9A2CEC'

src/locales/en.json

@@ -542,7 +542,7 @@
       "deposit_address_tooltip": "Number of addresses with non-zero balance of Nervos DAO"
     },
     "error": {
-      "maintain": "The site is temporarily down for maintenance. Please check back soon.",
+      "maintain": "The tip block number {{tip}}, the current synced block lagging behind by {{lag}} blocks",
       "page_crashed_tip": "Oops! Some errors were encountered.",
       "back_home": "BACK HOME"
     },

src/locales/zh.json

@@ -543,7 +543,7 @@
       "deposit_address_tooltip": "Nervos DAO 锁定余额不为零的地址"
     },
     "error": {
-      "maintain": "网络维护中，请稍后再试",
+      "maintain": "最新区块为 {{tip}}, 当前同步高度落后 {{lag}} 区块",
       "page_crashed_tip": "遇到了一些错误",
       "back_home": "前往首页"
     },

src/pages/Address/AddressComp.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from 'react'
+import { useState, FC, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { useQuery } from '@tanstack/react-query'
 import { Radio } from 'antd'
@@ -188,6 +188,12 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => {
     },
   ]
 
+  useEffect(() => {
+    if (!udts.length && !cotaList?.length && inscriptions.length) {
+      setActiveTab(AssetInfo.INSCRIPTION)
+    }
+  }, [udts.length, cotaList?.length, inscriptions.length])
+
   return (
     <Card className={styles.addressOverviewCard}>
       <div className={styles.cardTitle}>{t('address.overview')}</div>