diff --git a/src/components/Tooltip/ComparedToMaxTooltip/index.tsx b/src/components/Tooltip/ComparedToMaxTooltip/index.tsx new file mode 100644 index 000000000..acda17efa --- /dev/null +++ b/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 ( + + {maxInEpoch ? ( +
+
{titleInEpoch}
+
+ {localeNumberString(maxInEpoch)} ({percentOfMaxInEpoch}%) +
+ +
+ ) : null} + {maxInChain ? ( +
+
{titleInChain}
+
+ {localeNumberString(maxInChain)} ({percentOfMaxInChain}%) +
+ +
+ ) : null} + {children} + + } + > + more + + ) +} diff --git a/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss b/src/components/Tooltip/ComparedToMaxTooltip/styles.module.scss new file mode 100644 index 000000000..9c3f5072a --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/locales/en.json b/src/locales/en.json index dfb39a3c2..3dd7483db 100644 --- a/src/locales/en.json +++ b/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", diff --git a/src/locales/zh.json b/src/locales/zh.json index dd08a95f0..036059a8d 100644 --- a/src/locales/zh.json +++ b/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", diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx index 7a4314f66..d977b488a 100644 --- a/src/pages/BlockDetail/BlockComp.tsx +++ b/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 ? ( +
+ {`${block.size.toLocaleString('en')} Bytes`} + +
+ ) : ( + '-' + ), }, null, { title: i18n.t('block.cycles'), - content: block.cycles ? `${block.cycles.toLocaleString('en')}` : '-', + content: block.cycles ? ( +
+ {`${block.cycles.toLocaleString('en')}`} + +
+ ) : ( + '-' + ), }, null, { diff --git a/src/pages/BlockDetail/state.ts b/src/pages/BlockDetail/state.ts index 3c456f485..6abedbafc 100644 --- a/src/pages/BlockDetail/state.ts +++ b/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, } diff --git a/src/pages/Transaction/TransactionComp.tsx b/src/pages/Transaction/TransactionComp.tsx index b85f50b21..6a8c60dc7 100644 --- a/src/pages/Transaction/TransactionComp.tsx +++ b/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`} - + {i18n.t('transaction.size_in_block', { bytes: bytes.toLocaleString('en'), })} - > - more - + ) : ( '' @@ -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 ? ( +
+ {`${cycles.toLocaleString('en')}`} + +
+ ) : ( + '-' + ), }, ) diff --git a/src/pages/Transaction/state.ts b/src/pages/Transaction/state.ts index bedf2e4c3..17b87938e 100644 --- a/src/pages/Transaction/state.ts +++ b/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, } diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 37c7b57b7..9a71b9da9 100644 --- a/src/types/index.d.ts +++ b/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 }