From fdb9c06a02e9f68a4a0cd4c6f3aed467ba71ced0 Mon Sep 17 00:00:00 2001 From: Keith Date: Fri, 22 Dec 2023 21:27:58 +0900 Subject: [PATCH] refactor: refactor Capacity component --- src/components/Capacity/Capacity.module.scss | 48 +++++++++++++ src/components/Capacity/index.tsx | 41 +++++++++++ src/components/DecimalCapacity/index.tsx | 60 ---------------- src/components/DecimalCapacity/styled.tsx | 45 ------------ .../DecimalCapacity/styles.module.scss | 7 -- .../LiteTransactionList.module.scss | 33 --------- src/components/LiteTransactionList/index.tsx | 12 +--- .../TransactionIncome/index.tsx | 8 +-- .../TransactionItemCell/index.tsx | 15 ++-- .../TransactionItemCell/styled.tsx | 8 +-- src/index.css | 1 + src/pages/Address/AddressComp.tsx | 10 +-- src/pages/BlockDetail/BlockComp.tsx | 4 +- src/pages/BlockList/index.tsx | 10 +-- src/pages/Home/TableCard/index.module.scss | 40 +++++++++++ src/pages/Home/TableCard/index.tsx | 46 +++++------- src/pages/Home/TableCard/styled.tsx | 25 ------- .../DaoOverview/DaoOverview.module.scss | 23 ++++++ src/pages/NervosDao/DaoOverview/index.tsx | 23 +++--- src/pages/NervosDao/DepositorRank/index.tsx | 7 +- src/pages/Script/ScriptsComp.tsx | 5 +- src/pages/Script/index.tsx | 6 +- .../Transaction/TransactionCell/index.tsx | 6 +- .../TransactionLite.module.scss | 32 +++++---- .../TransactionLite/TransactionLite.tsx | 72 +++++++++---------- .../TransactionComp/TransactionOverview.tsx | 6 +- .../Transaction/TransactionReward/index.tsx | 5 +- src/pages/TransactionList/index.tsx | 12 ++-- 28 files changed, 286 insertions(+), 324 deletions(-) create mode 100644 src/components/Capacity/Capacity.module.scss create mode 100644 src/components/Capacity/index.tsx delete mode 100644 src/components/DecimalCapacity/index.tsx delete mode 100644 src/components/DecimalCapacity/styled.tsx delete mode 100644 src/components/DecimalCapacity/styles.module.scss create mode 100644 src/pages/NervosDao/DaoOverview/DaoOverview.module.scss diff --git a/src/components/Capacity/Capacity.module.scss b/src/components/Capacity/Capacity.module.scss new file mode 100644 index 0000000000..e264efc99b --- /dev/null +++ b/src/components/Capacity/Capacity.module.scss @@ -0,0 +1,48 @@ +.container { + display: inline-flex; + align-items: flex-end; + font-size: 1rem; + + span[data-role='dec'] { + font-size: 0.875em; + } + + .unit { + margin-left: 5px; + } + + &[data-type='value'] { + span[data-role='dec'] { + color: var(--decimal-color); + } + } + + &[data-type='diff'] { + &[data-diff-status='positive'] { + color: var(--primary-color); + + &::before { + content: '+'; + } + } + + &[data-diff-status='negative'] { + color: var(--accent-color); + } + } + + &[data-layout='responsive'] { + // FIXME: use css variable later + @media screen and (width <= 1000px) { + font-size: 0.75rem; + + span[data-role='dec'] { + font-size: 0.9em; + } + + .unit { + font-size: 1rem; + } + } + } +} diff --git a/src/components/Capacity/index.tsx b/src/components/Capacity/index.tsx new file mode 100644 index 0000000000..a523982751 --- /dev/null +++ b/src/components/Capacity/index.tsx @@ -0,0 +1,41 @@ +import BigNumber from 'bignumber.js' +import { useMemo } from 'react' +import styles from './Capacity.module.scss' + +interface CapacityProps { + capacity: string + type?: 'value' | 'diff' + layout?: 'responsive' | 'fixed' + unit?: 'CKB' | null + display?: 'full' | 'short' +} + +const Capacity: React.FC = ({ + capacity, + type = 'value', + layout = 'fixed', + unit = 'CKB', + display = 'full', +}) => { + const [int, dec, diffStatus] = useMemo(() => { + const c = new BigNumber(capacity) + const [int, dec] = c.toFormat(display === 'full' ? 8 : undefined).split('.') + if (type !== 'diff' || c.isZero()) return [int, dec] + if (c.isPositive()) return [int, dec, 'positive'] + return [int, dec, 'negative'] + }, [capacity, display, type]) + + return ( +
+ {int} + {dec ? ( + + {`.${dec}`} + + ) : null} + {unit && {unit}} +
+ ) +} + +export default Capacity diff --git a/src/components/DecimalCapacity/index.tsx b/src/components/DecimalCapacity/index.tsx deleted file mode 100644 index a86dea771f..0000000000 --- a/src/components/DecimalCapacity/index.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import classNames from 'classnames' -import { useTranslation } from 'react-i18next' -import { DecimalPanel, DecimalPartPanel, DecimalZerosPanel } from './styled' -import styles from './styles.module.scss' - -export default ({ - value, - fontSize, - balanceChangeType = 'none', - hideUnit, - hideZero, - marginBottom = '1px', -}: { - value: string - balanceChangeType?: 'payment' | 'income' | 'none' - fontSize?: string - hideUnit?: boolean - hideZero?: boolean - marginBottom?: string -}) => { - const { t } = useTranslation() - const integer = value.split('.')[0] || '0' - const isPayment = balanceChangeType === 'payment' - const balanceChangeTypeClass = isPayment ? 'subtraction' : 'addition' - let decimal = value.split('.')[1] || '' - let zeros = '' - - if (decimal.length < 8) { - zeros = '0'.repeat(8 - decimal.length) - } - if (decimal.length === 0) { - zeros = `.${'0'.repeat(8)}` - } else if (decimal.length < 8) { - zeros = '0'.repeat(8 - decimal.length) - } - decimal = decimal.length > 0 ? `.${decimal}` : '' - - return ( - - {integer} - - {decimal} - - {!hideZero && ( - - {zeros} - - )} - {!hideUnit &&
{t('common.ckb_unit')}
} - - ) -} diff --git a/src/components/DecimalCapacity/styled.tsx b/src/components/DecimalCapacity/styled.tsx deleted file mode 100644 index 77c1f74323..0000000000 --- a/src/components/DecimalCapacity/styled.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import styled from 'styled-components' - -export const DecimalPanel = styled.div` - display: flex; - justify-content: flex-start; - align-items: flex-end; - - .decimalUnit { - margin-left: 5px; - - @media (max-width: 750px) { - margin-bottom: 0; - } - } -` - -export const DecimalPartPanel = styled.div` - margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')}; - font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) => - props.fontSize ? props.fontSize : '14px'}; - color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')}; - - @media (max-width: 1000px) { - font-size: ${(props: { fontSize?: string }) => (props.fontSize ? props.fontSize : '11px')}; - } - - @media (max-width: 750px) { - margin-bottom: 0; - } -` - -export const DecimalZerosPanel = styled.div` - margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')}; - font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) => - props.fontSize ? props.fontSize : '14px'}; - color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')}; - - @media (max-width: 1000px) { - font-size: ${(props: { fontSize?: string }) => (props.fontSize ? props.fontSize : '11px')}; - } - - @media (max-width: 750px) { - margin-bottom: 0; - } -` diff --git a/src/components/DecimalCapacity/styles.module.scss b/src/components/DecimalCapacity/styles.module.scss deleted file mode 100644 index 7ba2c99d20..0000000000 --- a/src/components/DecimalCapacity/styles.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -.integerPart { - font-size: 16px; - - @media (width <= 1000px) { - font-size: 12px; - } -} diff --git a/src/components/LiteTransactionList/LiteTransactionList.module.scss b/src/components/LiteTransactionList/LiteTransactionList.module.scss index 05b6e6ad45..daa68dc532 100644 --- a/src/components/LiteTransactionList/LiteTransactionList.module.scss +++ b/src/components/LiteTransactionList/LiteTransactionList.module.scss @@ -58,39 +58,6 @@ white-space: pre; } - .income > span { - display: inline-flex; - - * { - color: inherit; - font-size: 1rem; - - // REFACTOR: it's hard to maintain, the component of decimal should be refactored - :global { - div.addition, - div.subtraction { - font-size: 0.875rem; - } - } - } - - &[data-is-positive='true'][data-is-zero='false'] { - color: var(--primary-color); - - &::before { - content: '+'; - } - } - - &[data-is-zero='true'] { - color: #999; - } - - &[data-is-positive='false'] { - color: var(--accent-color); - } - } - // TODO: use https://github.com/Magickbase/ckb-explorer-frontend/pull/178/files#diff-0f21b8f9c1d917feff4b138db3e62f202f2e3c1b691a2cd309397400edfca591R3 @media screen and (width <= 1200px) { padding: 0; diff --git a/src/components/LiteTransactionList/index.tsx b/src/components/LiteTransactionList/index.tsx index 2c25feaea4..6fc9171f09 100644 --- a/src/components/LiteTransactionList/index.tsx +++ b/src/components/LiteTransactionList/index.tsx @@ -8,7 +8,7 @@ import styles from './LiteTransactionList.module.scss' import AddressText from '../AddressText' import { localeNumberString } from '../../utils/number' import { useParseDate } from '../../utils/date' -import DecimalCapacity from '../DecimalCapacity' +import Capacity from '../Capacity' import { shannonToCkb } from '../../utils/util' const LiteTransactionList: React.FC<{ @@ -68,7 +68,6 @@ const LiteTransactionList: React.FC<{ if (bigIncome.isNaN()) { bigIncome = new BigNumber(0) } - const isIncome = bigIncome.isGreaterThanOrEqualTo(0) return ( @@ -97,13 +96,8 @@ const LiteTransactionList: React.FC<{ }`} {address ? ( - - - - + + ) : null} diff --git a/src/components/TransactionItem/TransactionIncome/index.tsx b/src/components/TransactionItem/TransactionIncome/index.tsx index 83c1dabc92..e2bf10693d 100644 --- a/src/components/TransactionItem/TransactionIncome/index.tsx +++ b/src/components/TransactionItem/TransactionIncome/index.tsx @@ -3,8 +3,7 @@ import { Tooltip } from 'antd' import { useTranslation } from 'react-i18next' import { TransactionIncomePanel, TransactionCapacityValuePanel } from './styled' import { shannonToCkb } from '../../../utils/util' -import { localeNumberString } from '../../../utils/number' -import DecimalCapacity from '../../DecimalCapacity' +import Capacity from '../../Capacity' import { useIsMobile } from '../../../hooks' import CurrentAddressIcon from '../../../assets/current_address.svg' @@ -24,10 +23,7 @@ export default ({ income }: { income: string }) => { current Address )} - + {!isMobile && ( current Address diff --git a/src/components/TransactionItem/TransactionItemCell/index.tsx b/src/components/TransactionItem/TransactionItemCell/index.tsx index 10f0112b26..9f56cf4244 100644 --- a/src/components/TransactionItem/TransactionItemCell/index.tsx +++ b/src/components/TransactionItem/TransactionItemCell/index.tsx @@ -20,7 +20,7 @@ import { } from './styled' import { CellType } from '../../../constants/common' import TransactionCellArrow from '../../Transaction/TransactionCellArrow' -import DecimalCapacity from '../../DecimalCapacity' +import Capacity from '../../Capacity' import { parseDiffDate } from '../../../utils/date' import Cellbase from '../../Transaction/Cellbase' import styles from './index.module.scss' @@ -89,7 +89,6 @@ const WithdrawPopoverItem = ({ ) const WithdrawPopoverInfo = ({ cell }: { cell: Cell }) => { - const isMobile = useIsMobile() const { t } = useTranslation() const currentLanguage = useCurrentLanguage() let width = 'short' @@ -104,18 +103,14 @@ const WithdrawPopoverInfo = ({ cell }: { cell: Cell }) => { - } + content={} /> - } + content={} /> - + {cellType === CellType.Input ? ( } trigger="click"> withdraw @@ -225,7 +220,7 @@ const TransactionCellCapacity = ({ cell, cellType }: { cell: Cell; cellType: Cel return (
- +
) } diff --git a/src/components/TransactionItem/TransactionItemCell/styled.tsx b/src/components/TransactionItem/TransactionItemCell/styled.tsx index bb27a9ee5f..ff452bfe06 100644 --- a/src/components/TransactionItem/TransactionItemCell/styled.tsx +++ b/src/components/TransactionItem/TransactionItemCell/styled.tsx @@ -75,10 +75,6 @@ export const TransactionCellWithdraw = styled.div` align-items: center; margin-top: 2px; - span { - margin-left: 6px; - } - img { margin-left: 5px; width: 16px; @@ -185,6 +181,10 @@ export const WithdrawItemPanel = styled.div` @media (max-width: 750px) { font-size: 10px; + + * { + font-size: inherit; + } } @media (max-width: 375px) { diff --git a/src/index.css b/src/index.css index bf8003d928..d32989e1e5 100644 --- a/src/index.css +++ b/src/index.css @@ -8,6 +8,7 @@ body { --primary-chiffon-color: #e6fcf7; --navbar-height: 64px; --table-separator-color: #f5f5f5; + --decimal-color: #999; margin: 0; padding: 0; diff --git a/src/pages/Address/AddressComp.tsx b/src/pages/Address/AddressComp.tsx index 25555c263e..9984012e33 100644 --- a/src/pages/Address/AddressComp.tsx +++ b/src/pages/Address/AddressComp.tsx @@ -18,7 +18,7 @@ import { AddressUDTAssetsPanel, AddressUDTItemPanel, } from './styled' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import CKBTokenIcon from './ckb_token_icon.png' import SUDTTokenIcon from '../../assets/sudt_token.png' import { ReactComponent as TimeDownIcon } from './time_down.svg' @@ -235,22 +235,22 @@ export const AddressOverviewCard: FC<{ address: Address }> = ({ address }) => { cell: { icon: item icon, title: t('common.ckb_unit'), - content: , + content: , }, }, { title: t('address.occupied'), tooltip: t('glossary.occupied'), - content: , + content: , }, { title: t('address.dao_deposit'), tooltip: t('glossary.nervos_dao_deposit'), - content: , + content: , }, { title: t('address.compensation'), - content: , + content: , tooltip: t('glossary.nervos_dao_compensation'), }, ] diff --git a/src/pages/BlockDetail/BlockComp.tsx b/src/pages/BlockDetail/BlockComp.tsx index 51e31df9d2..a90abacb3c 100644 --- a/src/pages/BlockDetail/BlockComp.tsx +++ b/src/pages/BlockDetail/BlockComp.tsx @@ -15,7 +15,7 @@ import HelpIcon from '../../assets/qa_help.png' import MoreIcon from '../../assets/more.png' import MinerRewardIcon from './miner_complete.png' import { ReactComponent as LeftArrow } from './prev_block.svg' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import { DELAY_BLOCK_NUMBER } from '../../constants/common' import { Card, CardCell, CardCellInfo, CardCellsLayout, HashCardHeader } from '../../components/Card' import styles from './styles.module.scss' @@ -94,7 +94,7 @@ export const BlockOverviewCard: FC<{ blockHeightOrHash: string; block: Block }> const isMobile = useIsMobile() const { t } = useTranslation() const tipBlockNumber = useLatestBlockNumber() - const minerReward = + const minerReward = const rootInfoItem: CardCellInfo = { title: t('block.transactions_root'), tooltip: t('glossary.transactions_root'), diff --git a/src/pages/BlockList/index.tsx b/src/pages/BlockList/index.tsx index 16f27c7678..cb68484c29 100644 --- a/src/pages/BlockList/index.tsx +++ b/src/pages/BlockList/index.tsx @@ -10,7 +10,7 @@ import { TableTitleRow, TableContentRow, TableTitleRowItem } from '../../compone import { deprecatedAddrToNewAddr, shannonToCkb } from '../../utils/util' import { DELAY_BLOCK_NUMBER } from '../../constants/common' import { localeNumberString } from '../../utils/number' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import AddressText from '../../components/AddressText' import { useIsMobile, useMediaQuery, usePaginationParamsInListPage, useSortParam } from '../../hooks' import { explorerService } from '../../services/ExplorerService' @@ -50,11 +50,11 @@ const getTableContentDataList = (block: Block, index: number, page: number, isMa const blockReward = index < DELAY_BLOCK_NUMBER && page === 1 ? ( - + ) : ( - + ) @@ -99,11 +99,11 @@ const BlockCardGroup: FC<{ blocks: Block[]; isFirstPage: boolean }> = ({ blocks, content: (block, index) => index < DELAY_BLOCK_NUMBER && isFirstPage ? ( - + ) : ( - + ), }, diff --git a/src/pages/Home/TableCard/index.module.scss b/src/pages/Home/TableCard/index.module.scss index 1f1772608b..837ad98268 100644 --- a/src/pages/Home/TableCard/index.module.scss +++ b/src/pages/Home/TableCard/index.module.scss @@ -13,3 +13,43 @@ color: var(--primary-color); } } + +.reward, +.capacity { + span[data-role='int'] { + font-size: 16px; + } + + span[data-role='dec'] { + font-size: 9px; + padding-right: 2px; + } + + span[data-role='suffix'] { + font-size: 13px; + } + + // FIXME: use css variable later + @media screen and (width<=1000px) { + display: flex; + align-items: flex-end; + + span[data-role='int'] { + font-size: 12px; + } + } +} + +.reward { + margin-top: 7px; +} + +.capacity { + span[data-role='dec'] { + color: var(--decimal-color); + } + + span[data-role='unit'] { + margin-left: 3px; + } +} diff --git a/src/pages/Home/TableCard/index.tsx b/src/pages/Home/TableCard/index.tsx index 969c50714d..6b15696f79 100644 --- a/src/pages/Home/TableCard/index.tsx +++ b/src/pages/Home/TableCard/index.tsx @@ -1,11 +1,11 @@ import { FC, memo } from 'react' import { useTranslation } from 'react-i18next' +import BigNumber from 'bignumber.js' import { HighLightLink } from '../../../components/Text' import { localeNumberString } from '../../../utils/number' -import DecimalCapacity from '../../../components/DecimalCapacity' -import { shannonToCkbDecimal, deprecatedAddrToNewAddr } from '../../../utils/util' +import { deprecatedAddrToNewAddr, shannonToCkb } from '../../../utils/util' import { TableMinerContentItem } from '../../../components/Table' -import { BlockRewardPlusPanel, BlockRewardPanel, BlockCardPanel, TransactionCardPanel } from './styled' +import { BlockCardPanel, TransactionCardPanel } from './styled' import AddressText from '../../../components/AddressText' import styles from './index.module.scss' import { useParsedDate } from '../../../hooks' @@ -16,26 +16,7 @@ import { Transaction } from '../../../models/Transaction' const _BlockCardItem: FC<{ block: Block; isDelayBlock?: boolean }> = ({ block, isDelayBlock }) => { const { t } = useTranslation() const liveCellChanges = Number(block.liveCellChanges) - const blockReward = isDelayBlock ? ( - - - + - - ) : ( - - - - ) + const [int, dec] = new BigNumber(shannonToCkb(block.reward)).toFormat(2, BigNumber.ROUND_FLOOR).split('.') const parsedBlockCreateAt = useParsedDate(block.timestamp) @@ -56,7 +37,11 @@ const _BlockCardItem: FC<{ block: Block; isDelayBlock?: boolean }> = ({ block, i
{`${t('home.reward')}`} - {blockReward} +
+ {int} + {dec ? {`.${dec}`} : null} + {isDelayBlock ? + : null} +
@@ -87,6 +72,7 @@ const _TransactionCardItem: FC<{ const parsedBlockCreateAt = useParsedDate(transaction.blockTimestamp) + const [int, dec] = new BigNumber(shannonToCkb(transaction.capacityInvolved)).toFormat(2).split('.') return (
@@ -112,11 +98,13 @@ const _TransactionCardItem: FC<{
- +
+ {int} + {dec ? {`.${dec}`} : null} + + CKB + +
{`${liveCellChanges >= 0 ? '+' : '-'}${Math.abs(liveCellChanges)} ${t('home.cells')}`} diff --git a/src/pages/Home/TableCard/styled.tsx b/src/pages/Home/TableCard/styled.tsx index 6567bb7cd1..39c040bc95 100644 --- a/src/pages/Home/TableCard/styled.tsx +++ b/src/pages/Home/TableCard/styled.tsx @@ -287,28 +287,3 @@ export const TransactionCardPanel = styled.div` } } ` - -export const BlockRewardPlusPanel = styled.div` - display: flex; - align-items: flex-end; - justify-content: center; - - @media (max-width: 750px) { - align-items: flex-end; - justify-content: flex-start; - } - - > span { - content: '+'; - color: #7f7d7d; - font-size: 13px; - margin-bottom: -1px; - margin-left: 2px; - } -` - -export const BlockRewardPanel = styled.div` - margin-right: 8px; - display: flex; - justify-content: center; -` diff --git a/src/pages/NervosDao/DaoOverview/DaoOverview.module.scss b/src/pages/NervosDao/DaoOverview/DaoOverview.module.scss new file mode 100644 index 0000000000..5c0031e6d5 --- /dev/null +++ b/src/pages/NervosDao/DaoOverview/DaoOverview.module.scss @@ -0,0 +1,23 @@ +.capacity { + display: inline-flex; + align-items: flex-end; + font-size: 1rem; + + span[data-role='dec'] { + font-size: 0.75em; + color: var(--decimal-color); + } + + // FIXME: use css variable later + @media screen and (width <= 1000px) { + font-size: 0.75rem; + + span[data-role='dec'] { + font-size: 0.9em; + } + + .unit { + font-size: 1rem; + } + } +} diff --git a/src/pages/NervosDao/DaoOverview/index.tsx b/src/pages/NervosDao/DaoOverview/index.tsx index 2340e09e00..38f9bf1be9 100644 --- a/src/pages/NervosDao/DaoOverview/index.tsx +++ b/src/pages/NervosDao/DaoOverview/index.tsx @@ -1,4 +1,5 @@ import { ReactNode, useCallback, FC } from 'react' +import BigNumber from 'bignumber.js' import echarts from 'echarts/lib/echarts' import 'echarts/lib/chart/pie' import 'echarts/lib/component/tooltip' @@ -25,13 +26,13 @@ import DaoBalanceIcon from './dao_balance.png' import { handleBigNumber, handleBigNumberFloor } from '../../../utils/string' import { localeNumberString } from '../../../utils/number' import { shannonToCkbDecimal, shannonToCkb } from '../../../utils/util' -import DecimalCapacity from '../../../components/DecimalCapacity' import { useIsLGScreen, useIsMobile } from '../../../hooks' import { ReactChartCore } from '../../StatisticsChart/common' import { HelpTip } from '../../../components/HelpTip' import { ChartColor } from '../../../constants/common' import { assertNotArray } from '../../../utils/chart' import { APIReturn } from '../../../services/ExplorerService' +import styles from './DaoOverview.module.scss' type NervosDaoInfo = APIReturn<'fetchNervosDao'> @@ -72,6 +73,18 @@ const daoIcon = (symbol: 'positive' | 'negative' | 'zero' | undefined) => { } } +const Capacity: FC<{ capacity: string }> = ({ capacity }) => { + const [int, dec] = new BigNumber(capacity).toFormat(8).split('.') + return ( +
+ {int} + + {`.${dec}`} + +
+ ) +} + const useNervosDaoItemContents = (nervosDao: NervosDaoInfo): NervosDaoItemContent[] => { const { t } = useTranslation() return [ @@ -258,15 +271,9 @@ const useOption = (nervosDao: NervosDaoInfo, colors: string[], isMobile: boolean } const NervosDaoRightCapacity = ({ reward }: { reward: string }) => { - const isMobile = useIsMobile() return ( - + ) } diff --git a/src/pages/NervosDao/DepositorRank/index.tsx b/src/pages/NervosDao/DepositorRank/index.tsx index 64195ec965..e631147495 100644 --- a/src/pages/NervosDao/DepositorRank/index.tsx +++ b/src/pages/NervosDao/DepositorRank/index.tsx @@ -1,8 +1,7 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' -import { localeNumberString } from '../../../utils/number' import { shannonToCkb } from '../../../utils/util' -import DecimalCapacity from '../../../components/DecimalCapacity' +import Capacity from '../../../components/Capacity' import { handleBigNumber } from '../../../utils/string' import { DepositorRankCardPanel, @@ -46,7 +45,7 @@ const DepositorCardGroup: FC<{ depositors: RankedDepositor[] }> = ({ depositors }, { title: t('nervos_dao.dao_title_deposit_capacity'), - content: depositor => , + content: depositor => , }, { title: t('nervos_dao.dao_title_deposit_time'), @@ -92,7 +91,7 @@ export default ({ depositors, filter }: { depositors: NervosDaoDepositor[]; filt
{depositor.rank}
- +
{handleBigNumber(depositor.averageDepositTime, 1)}
diff --git a/src/pages/Script/ScriptsComp.tsx b/src/pages/Script/ScriptsComp.tsx index d68717b869..3f368db88d 100644 --- a/src/pages/Script/ScriptsComp.tsx +++ b/src/pages/Script/ScriptsComp.tsx @@ -12,8 +12,7 @@ import SimpleButton from '../../components/SimpleButton' import SimpleModal from '../../components/Modal' import TransactionCellScript from '../Transaction/TransactionCellScript' import { shannonToCkb } from '../../utils/util' -import { localeNumberString } from '../../utils/number' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import styles from './styles.module.scss' import AddressText from '../../components/AddressText' import { ReactComponent as CopyIcon } from '../../assets/copy_icon.svg' @@ -189,7 +188,7 @@ export const ScriptCells = ({ {record.cellIndex} - +
diff --git a/src/pages/Script/index.tsx b/src/pages/Script/index.tsx index 6bb16e2ab7..d529d6633c 100644 --- a/src/pages/Script/index.tsx +++ b/src/pages/Script/index.tsx @@ -12,7 +12,7 @@ import { isMainnet } from '../../utils/chain' import { scripts as scriptNameList } from '../ScriptList' import { usePaginationParamsInPage } from '../../hooks' import { shannonToCkb } from '../../utils/util' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import styles from './styles.module.scss' import { explorerService } from '../../services/ExplorerService' import type { ScriptInfo } from '../../services/ExplorerService/fetcher' @@ -71,13 +71,13 @@ const useScriptInfo = (scriptInfo: ScriptInfo) => { { title: t('scripts.capacity_of_deployed_cells'), tooltip: t('glossary.capacity_of_deployed_cells'), - content: , + content: , }, { slot: 'right', cell: { title: t('scripts.capacity_of_referring_cells'), - content: , + content: , }, }, ] diff --git a/src/pages/Transaction/TransactionCell/index.tsx b/src/pages/Transaction/TransactionCell/index.tsx index 184550c1a8..d8888f0879 100644 --- a/src/pages/Transaction/TransactionCell/index.tsx +++ b/src/pages/Transaction/TransactionCell/index.tsx @@ -3,7 +3,7 @@ import { Tooltip } from 'antd' import { Link } from 'react-router-dom' import { useTranslation } from 'react-i18next' import { CellType } from '../../../constants/common' -import { localeNumberString, parseUDTAmount } from '../../../utils/number' +import { parseUDTAmount } from '../../../utils/number' import { parseSimpleDate } from '../../../utils/date' import { sliceNftName } from '../../../utils/string' import { shannonToCkb, shannonToCkbDecimal, parseSince } from '../../../utils/util' @@ -20,7 +20,7 @@ import { TransactionCellNftInfo, } from './styled' import TransactionCellArrow from '../../../components/Transaction/TransactionCellArrow' -import DecimalCapacity from '../../../components/DecimalCapacity' +import Capacity from '../../../components/Capacity' import NervosDAODepositIcon from '../../../assets/nervos_dao_cell.png' import NervosDAOWithdrawingIcon from '../../../assets/nervos_dao_withdrawing.png' import UDTTokenIcon from '../../../assets/udt_token.png' @@ -285,7 +285,7 @@ const TransactionCellCapacityAmount = ({ cell }: { cell: Cell }) => { } return {`${t('udt.unknown_token')} #${udtInfo.typeHash.substring(udtInfo.typeHash.length - 4)}`} } - return + return } const TransactionCellMobileItem = ({ title, value = null }: { title: string | ReactNode; value?: ReactNode }) => ( diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss index f3f3966c2f..7f52a2c356 100644 --- a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss @@ -66,15 +66,6 @@ font-size: 14px; } - .capacityChange { - margin-left: 12px; - height: 24px; - - @media (width <= 750px) { - margin-left: 0; - } - } - & > div { width: 100%; height: 22px; @@ -84,11 +75,6 @@ div { flex: 1; - &:first-child { - text-align: left; - color: #333; - } - .tag { box-sizing: border-box; background: #d7e5fd; @@ -148,3 +134,21 @@ } } } + +.udtAmount { + &[data-diff-status='positive'] { + color: var(--primary-color); + + &::before { + content: '+'; + } + } + + &[data-diff-status='negative'] { + color: var(--accent-color); + + &::before { + content: '-'; + } + } +} diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx index 615432fd6a..acc52744c5 100644 --- a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx @@ -5,8 +5,8 @@ import { useParams } from 'react-router-dom' import BigNumber from 'bignumber.js' import { useTranslation } from 'react-i18next' import styles from './TransactionLite.module.scss' -import DecimalCapacity from '../../../../components/DecimalCapacity' -import { parseCKBAmount, localeNumberString, parseUDTAmount } from '../../../../utils/number' +import Capacity from '../../../../components/Capacity' +import { parseCKBAmount, parseUDTAmount } from '../../../../utils/number' import { shannonToCkb } from '../../../../utils/util' import { Addr } from '../../TransactionCell' import { defaultTransactionLiteDetails } from '../../state' @@ -119,50 +119,48 @@ export const MobileTransferItems = (props: { details: TransactionRecord }) => { const TransferAmount: FC<{ transfer: TransactionRecordTransfer }> = ({ transfer }) => { const { t } = useTranslation() const isUdt = transfer.cellType === 'udt' - const isNft = transfer.cellType === 'm_nft_token' + const isNft = ['m_nft_token', 'spore_cell', 'nrc_721_token', 'cota', 'nft_transfer'].includes(transfer.cellType) - const transferCapacity = new BigNumber(transfer.capacity) - const transferAmount = new BigNumber(transfer.udtInfo?.amount ?? 0) - const isIncome = isUdt ? transferAmount.isPositive() : transferCapacity.isPositive() - const decimalPanelType = isIncome ? 'income' : 'payment' + const capacityChange = shannonToCkb(transfer.capacity) - const udtDecimals = transfer.udtInfo?.decimal - let amountChange: string - if (udtDecimals) { - amountChange = parseUDTAmount(transferAmount.toString(), udtDecimals) - } else if (isIncome) { - amountChange = t('udt.unknown_amount') - } else { - amountChange = `-${t('udt.unknown_amount')}` + if (isNft) { + // FIXME: direction should be returned from API + // Tracked by issue https://github.com/Magickbase/ckb-explorer-public-issues/issues/503 + return ( +
+ ID: {transfer.mNftInfo?.tokenId ?? 'Unknown'} + () +
+ ) } - const capacityChange = localeNumberString(shannonToCkb(transferCapacity)) - const isIncomeColor = isIncome ? styles.add : styles.subtraction - - const getUdtComponent = () => { - if (isUdt) { + if (isUdt) { + const transferAmount = new BigNumber(transfer.udtInfo?.amount ?? 0) + const udtDecimals = transfer.udtInfo?.decimal + if (udtDecimals) { + const amountChange = parseUDTAmount(transferAmount.toString(), udtDecimals) return ( <> - -
{`(${capacityChange} CKB)`}
+ + () ) } - if (isNft) { - return ( -
- {isIncome ? '' : '-'} - ID: {transfer.mNftInfo?.tokenId ?? 'Unknown'} - {`(${capacityChange} CKB)`} -
- ) + let diffStatus = '' + if (transferAmount.isNegative()) { + diffStatus = 'negative' + } else if (transferAmount.isZero()) { + // skip + } else { + diffStatus = 'positive' } - return + return ( + <> +
{`${t('udt.unknown_amount')}`}
+ () + + ) } - return ( -
- {isIncome ? '+' : ''} - {getUdtComponent()} -
- ) + + return } diff --git a/src/pages/Transaction/TransactionComp/TransactionOverview.tsx b/src/pages/Transaction/TransactionComp/TransactionOverview.tsx index 96912f6314..778be5f274 100644 --- a/src/pages/Transaction/TransactionComp/TransactionOverview.tsx +++ b/src/pages/Transaction/TransactionComp/TransactionOverview.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom' import BigNumber from 'bignumber.js' import { Trans, useTranslation } from 'react-i18next' import { Radio, Tooltip } from 'antd' -import DecimalCapacity from '../../../components/DecimalCapacity' +import Capacity from '../../../components/Capacity' import HashTag from '../../../components/HashTag' import { HelpTip } from '../../../components/HelpTip' import SimpleButton from '../../../components/SimpleButton' @@ -168,7 +168,7 @@ export const TransactionOverviewCard: FC<{ display: 'flex', }} > - + , + content: , } const txStatusData: CardCellInfo = { title: t('transaction.status'), diff --git a/src/pages/Transaction/TransactionReward/index.tsx b/src/pages/Transaction/TransactionReward/index.tsx index a2af978630..bc48ed3a8c 100644 --- a/src/pages/Transaction/TransactionReward/index.tsx +++ b/src/pages/Transaction/TransactionReward/index.tsx @@ -1,10 +1,9 @@ import { useTranslation } from 'react-i18next' import { shannonToCkb } from '../../../utils/util' -import { localeNumberString } from '../../../utils/number' -import DecimalCapacity from '../../../components/DecimalCapacity' import { RewardPenal, RewardItemPenal } from './styled' import { useIsMobile } from '../../../hooks' import { Cell } from '../../../models/Cell' +import Capacity from '../../../components/Capacity' const useRewards = (cell: Cell, isMobile: boolean) => { const { t } = useTranslation() @@ -42,7 +41,7 @@ const TransactionReward = ({ cell, showReward }: { cell: Cell; showReward?: bool
{reward.name}
- +
))} diff --git a/src/pages/TransactionList/index.tsx b/src/pages/TransactionList/index.tsx index 6ba7412276..2dab4bdbe6 100644 --- a/src/pages/TransactionList/index.tsx +++ b/src/pages/TransactionList/index.tsx @@ -7,7 +7,7 @@ import Content from '../../components/Content' import { shannonToCkb } from '../../utils/util' import { localeNumberString } from '../../utils/number' import Pagination from '../../components/Pagination' -import DecimalCapacity from '../../components/DecimalCapacity' +import Capacity from '../../components/Capacity' import AddressText from '../../components/AddressText' import { useIsMobile, usePaginationParamsInListPage, useSearchParams, useSortParam } from '../../hooks' import { explorerService } from '../../services/ExplorerService' @@ -56,7 +56,7 @@ const TransactionCardGroup: FC<{ title: t('transaction.capacity'), sortRule: 'capacity', content: transaction => ( - + ), } @@ -92,7 +92,7 @@ const TransactionCardGroup: FC<{ { title: t('transaction.transaction_fee'), sortRule: 'fee', - content: transaction => , + content: transaction => , }, ] @@ -161,7 +161,7 @@ const TransactionTable: FC<{ ), width: '30%', render: transaction => ( - + ), }, { @@ -184,7 +184,7 @@ const TransactionTable: FC<{ ), width: '22%', render: transaction => ( - + ), }, { @@ -210,7 +210,7 @@ const TransactionTable: FC<{ ), width: '22%', - render: transaction => , + render: transaction => , }, ]