feat: tooltip of bytes and cycles on block and transaction page (#1200)

src/components/Tooltip/ComparedToMaxTooltip/index.tsx

@@ -0,0 +1,64 @@
+import { ReactNode } from 'react'
+import { Progress, Tooltip } from 'antd'
+import styles from './styles.module.scss'
+import { localeNumberString } from '../../../utils/number'
+import MoreIcon from '../../../assets/more.png'
+
+export default ({
+  numerator,
+  maxInEpoch,
+  maxInChain,
+  titleInEpoch,
+  titleInChain,
+  children,
+}: {
+  numerator: number | null
+  maxInEpoch: number | null
+  maxInChain: number | null
+  titleInEpoch: string
+  titleInChain: string
+  children?: ReactNode
+}) => {
+  const percentOfMaxInEpoch = numerator && maxInEpoch ? Math.round((10000 * numerator) / maxInEpoch) / 100 : 0
+  const percentOfMaxInChain = numerator && maxInChain ? Math.round((10000 * numerator) / maxInChain) / 100 : 0
+
+  return (
+    <Tooltip
+      placement="top"
+      overlayClassName={styles.comparedSizeTooltip}
+      title={
+        <>
+          {maxInEpoch ? (
+            <div className={styles.inEpoch}>
+              <div>{titleInEpoch}</div>
+              <div>
+                {localeNumberString(maxInEpoch)} ({percentOfMaxInEpoch}%)
+              </div>
+              <Progress percent={percentOfMaxInEpoch} showInfo={false} />
+            </div>
+          ) : null}
+          {maxInChain ? (
+            <div className={styles.inChain}>
+              <div>{titleInChain}</div>
+              <div>
+                {localeNumberString(maxInChain)} ({percentOfMaxInChain}%)
+              </div>
+              <Progress percent={percentOfMaxInChain} showInfo={false} />
+            </div>
+          ) : null}
+          {children}
+        </>
+      }
+    >
+      <img
+        src={MoreIcon}
+        alt="more"
+        style={{
+          width: 15,
+          height: 15,
+          marginLeft: 6,
+        }}
+      />
+    </Tooltip>
+  )
+}

src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss

@@ -0,0 +1,36 @@
+:global(.ant-tooltip) {
+  max-width: 320px;
+}
+
+.comparedSizeTooltip {
+  :global(.ant-tooltip-inner) {
+    border-radius: 8px;
+    mix-blend-mode: normal;
+    padding: 10px 16px;
+    > div {
+      font-weight: 400;
+      margin: 0;
+      > div:first-child {
+        font-size: 16px;
+        line-height: 19px;
+        padding: 0 0 3px 0;
+      }
+      > div:nth-child(2) {
+        font-size: 14px;
+        line-height: 16px;
+        padding: 3px 0;
+      }
+    }
+    > div.inEpoch {
+      margin-bottom: 10px;
+      :global(.ant-progress-bg) {
+        background-color: var(--primary-color);
+      }
+    }
+    > div.inChain {
+      :global(.ant-progress-bg) {
+        background-color: #346DFF;
+      }
+    }
+  }
+}

src/locales/en.json

@@ -297,7 +297,11 @@
       "occupied_capacity": "occupied",
       "size": "Size",
       "size_in_block": "{{bytes}} bytes in block",
+      "compared_to_the_max_size_in_epoch": "Compared to the max size in epoch",
+      "compared_to_the_max_size_in_chain": "Compared to the max size in chain",
       "cycles": "Cycles",
+      "compared_to_the_max_cycles_in_epoch": "Compared to the max cycles in epoch",
+      "compared_to_the_max_cycles_in_chain": "Compared to the max cycles in chain",
       "since": {
         "relative": {
           "epoch": "After {{since}} epochs since committed",
@@ -342,7 +346,11 @@
       "view_prev_block": "View the previous block",
       "view_next_block": "View the next block",
       "size": "Size",
-      "cycles": "Cycles"
+      "compared_to_the_max_size_in_epoch": "Compared to the max size in epoch",
+      "compared_to_the_max_size_in_chain": "Compared to the max size in chain",
+      "cycles": "Cycles",
+      "compared_to_the_max_cycles_in_epoch": "Compared to the max cycles in epoch",
+      "compared_to_the_max_cycles_in_chain": "Compared to the max cycles in chain"
     },
     "nervos_dao": {
       "nervos_dao": "Nervos DAO",

src/locales/zh.json

@@ -296,7 +296,11 @@
       "occupied_capacity": "occupied",
       "size": "交易体积",
       "size_in_block": "区块中占 {{bytes}} bytes",
+      "compared_to_the_max_size_in_epoch": "相较Epoch中最大交易体积块的占比",
+      "compared_to_the_max_size_in_chain": "相较链上最大交易体积块的占比",
       "cycles": "Cycles",
+      "compared_to_the_max_cycles_in_epoch": "相较Epoch中最大Cycles的占比",
+      "compared_to_the_max_cycles_in_chain": "相较链上最大Cycles的占比",
       "since": {
         "relative": {
           "epoch": "自 committed 之后 {{since}} Epochs",
@@ -342,7 +346,11 @@
       "view_prev_block": "查看上一区块",
       "view_next_block": "查看下一区块",
       "size": "区块体积",
-      "cycles": "Cycles"
+      "compared_to_the_max_size_in_epoch": "相较Epoch中最大交易体积块的占比",
+      "compared_to_the_max_size_in_chain": "相较链上最大交易体积块的占比",
+      "cycles": "Cycles",
+      "compared_to_the_max_cycles_in_epoch": "相较Epoch中最大Cycles的占比",
+      "compared_to_the_max_cycles_in_chain": "相较链上最大Cycles的占比"
     },
     "nervos_dao": {
       "nervos_dao": "Nervos DAO",

src/pages/BlockDetail/BlockComp.tsx

@@ -35,6 +35,7 @@ import { DELAY_BLOCK_NUMBER } from '../../constants/common'
 import TitleCard from '../../components/Card/TitleCard'
 import styles from './styles.module.scss'
 import AddressText from '../../components/AddressText'
+import ComparedToMaxTooltip from '../../components/Tooltip/ComparedToMaxTooltip'
 
 const CELL_BASE_ANCHOR = 'cellbase'
 
@@ -151,12 +152,48 @@ export const BlockOverview: FC<{ block: State.Block }> = ({ block }) => {
     },
     {
       title: i18n.t('block.size'),
-      content: block.size ? `${block.size.toLocaleString('en')} Bytes` : '-',
+      content: block.size ? (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {`${block.size.toLocaleString('en')} Bytes`}
+          <ComparedToMaxTooltip
+            numerator={block.size}
+            maxInEpoch={block.largestBlockInEpoch}
+            maxInChain={block.largestBlock}
+            titleInEpoch={i18n.t('block.compared_to_the_max_size_in_epoch')}
+            titleInChain={i18n.t('block.compared_to_the_max_size_in_chain')}
+          />
+        </div>
+      ) : (
+        '-'
+      ),
     },
     null,
     {
       title: i18n.t('block.cycles'),
-      content: block.cycles ? `${block.cycles.toLocaleString('en')}` : '-',
+      content: block.cycles ? (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {`${block.cycles.toLocaleString('en')}`}
+          <ComparedToMaxTooltip
+            numerator={block.cycles}
+            maxInEpoch={block.maxCyclesInEpoch}
+            maxInChain={block.maxCycles}
+            titleInEpoch={i18n.t('block.compared_to_the_max_cycles_in_epoch')}
+            titleInChain={i18n.t('block.compared_to_the_max_cycles_in_chain')}
+          />
+        </div>
+      ) : (
+        '-'
+      ),
     },
     null,
     {

src/pages/BlockDetail/state.ts

@@ -25,5 +25,9 @@ export const defaultBlockInfo: State.Block = {
   minerReward: '',
   liveCellChanges: '',
   size: 0,
+  largestBlockInEpoch: 0,
+  largestBlock: 0,
   cycles: null,
+  maxCyclesInEpoch: null,
+  maxCycles: null,
 }

src/pages/Transaction/TransactionComp.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import { useState, ReactNode, FC } from 'react'
 import { Link } from 'react-router-dom'
-import { Tooltip } from 'antd'
 import BigNumber from 'bignumber.js'
 import OverviewCard, { OverviewItemData } from '../../components/Card/OverviewCard'
 import { useAppState } from '../../contexts/providers/index'
@@ -22,12 +21,12 @@ import ArrowUpIcon from '../../assets/arrow_up.png'
 import ArrowDownIcon from '../../assets/arrow_down.png'
 import ArrowUpBlueIcon from '../../assets/arrow_up_blue.png'
 import ArrowDownBlueIcon from '../../assets/arrow_down_blue.png'
-import MoreIcon from '../../assets/more.png'
 import { isMainnet } from '../../utils/chain'
 import SimpleButton from '../../components/SimpleButton'
 import HashTag from '../../components/HashTag'
 import { isScreenSmallerThan1440 } from '../../utils/screen'
 import { useAddrFormatToggle } from '../../utils/hook'
+import ComparedToMaxTooltip from '../../components/Tooltip/ComparedToMaxTooltip'
 
 const showTxStatus = (txStatus: string) => txStatus.replace(/^\S/, s => s.toUpperCase())
 
@@ -103,7 +102,11 @@ export const TransactionOverview: FC<{ transaction: State.Transaction }> = ({ tr
     txStatus,
     detailedMessage,
     bytes,
+    largestTxInEpoch,
+    largestTx,
     cycles,
+    maxCyclesInEpoch,
+    maxCycles,
   } = transaction
 
   let confirmation = 0
@@ -185,22 +188,17 @@ export const TransactionOverview: FC<{ transaction: State.Transaction }> = ({ tr
           }}
         >
           {`${(bytes - 4).toLocaleString('en')} Bytes`}
-          <Tooltip
-            placement="top"
-            title={i18n.t('transaction.size_in_block', {
+          <ComparedToMaxTooltip
+            numerator={bytes}
+            maxInEpoch={largestTxInEpoch}
+            maxInChain={largestTx}
+            titleInEpoch={i18n.t('transaction.compared_to_the_max_size_in_epoch')}
+            titleInChain={i18n.t('transaction.compared_to_the_max_size_in_chain')}
+          >
+            {i18n.t('transaction.size_in_block', {
               bytes: bytes.toLocaleString('en'),
             })}
-          >
-            <img
-              src={MoreIcon}
-              alt="more"
-              style={{
-                width: 15,
-                height: 15,
-                marginLeft: 6,
-              }}
-            />
-          </Tooltip>
+          </ComparedToMaxTooltip>
         </div>
       ) : (
         ''
@@ -209,7 +207,25 @@ export const TransactionOverview: FC<{ transaction: State.Transaction }> = ({ tr
     null,
     {
       title: i18n.t('transaction.cycles'),
-      content: cycles ? `${cycles.toLocaleString('en')}` : '-',
+      content: cycles ? (
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {`${cycles.toLocaleString('en')}`}
+          <ComparedToMaxTooltip
+            numerator={cycles}
+            maxInEpoch={maxCyclesInEpoch}
+            maxInChain={maxCycles}
+            titleInEpoch={i18n.t('transaction.compared_to_the_max_cycles_in_epoch')}
+            titleInChain={i18n.t('transaction.compared_to_the_max_cycles_in_chain')}
+          />
+        </div>
+      ) : (
+        '-'
+      ),
     },
   )
 

src/pages/Transaction/state.ts

@@ -17,5 +17,9 @@ export const defaultTransactionInfo: State.Transaction = {
   txStatus: '',
   detailedMessage: '',
   bytes: 0,
+  largestTxInEpoch: 0,
+  largestTx: 0,
   cycles: null,
+  maxCyclesInEpoch: null,
+  maxCycles: null,
 }

src/types/index.d.ts

@@ -210,7 +210,11 @@ declare namespace State {
     minerReward: string
     liveCellChanges: string
     size: number
+    largestBlockInEpoch: number
+    largestBlock: number
     cycles: number | null
+    maxCyclesInEpoch: number | null
+    maxCycles: number | null
   }
 
   export interface CellDep {
@@ -240,7 +244,11 @@ declare namespace State {
     txStatus: string
     detailedMessage: string
     bytes: number
+    largestTxInEpoch: number
+    largestTx: number
     cycles: number | null
+    maxCyclesInEpoch: number | null
+    maxCycles: number | null
     createTimestamp?: number
   }