From 6630178e2605c3c2c5cac94fa23534612419c8e4 Mon Sep 17 00:00:00 2001 From: zhangyouxin Date: Fri, 15 Sep 2023 08:53:53 +0800 Subject: [PATCH] refactor: extract lite transaction components --- .../TransactionBadge.module.scss | 12 ++++++ .../TransactionLite/TransactionBadge.tsx | 40 +++++++++++++++++++ .../TransactionLite.module.scss} | 4 ++ .../{ => TransactionLite}/TransactionLite.tsx | 39 +++++------------- .../TransactionComp/TransactionOverview.tsx | 39 ++++++++++++++---- src/pages/Transaction/index.tsx | 2 +- src/types/index.d.ts | 31 +++++++------- src/utils/number.ts | 2 +- 8 files changed, 116 insertions(+), 53 deletions(-) create mode 100644 src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.module.scss create mode 100644 src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx rename src/pages/Transaction/TransactionComp/{transactionComp.module.scss => TransactionLite/TransactionLite.module.scss} (98%) rename src/pages/Transaction/TransactionComp/{ => TransactionLite}/TransactionLite.tsx (59%) diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.module.scss b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.module.scss new file mode 100644 index 000000000..a6512746d --- /dev/null +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.module.scss @@ -0,0 +1,12 @@ +.transactionBadge { + font-size: 12px; + padding: 1px 8px; + + border-radius: 4px; + border: 1px solid #b0cbfc; + background: #d7e5fd; +} + +.tootip { + text-align: center; +} diff --git a/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx new file mode 100644 index 000000000..f9015c8fd --- /dev/null +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionBadge.tsx @@ -0,0 +1,40 @@ +import { Tooltip } from 'antd' +import styles from './TransactionBadge.module.scss' + +type Props = { + cellType: State.CellType + capacity?: string +} +const cellTypeDisplayMap: Record = { + nervos_dao_deposit: 'Nervos DAO Deposit', + nervos_dao_withdrawing: 'Nervos DAO Withdraw', + spore_cell: 'Spore', + nrc_721_token: 'Mint', + normal: '', + udt: '', + spore_cluster: '', + cota_regular: '', + cota_registry: '', + m_nft_issuer: '', + m_nft_class: '', + m_nft_token: '', + nrc_721_factory: '', +} + +export const TransactionBadge = ({ cellType, capacity }: Props) => { + const displayName = cellTypeDisplayMap[cellType] + if (!displayName) return null + + return ( + +
{displayName}
+
{capacity} CKB
+ + } + > +
{displayName}
+ + ) +} diff --git a/src/pages/Transaction/TransactionComp/transactionComp.module.scss b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss similarity index 98% rename from src/pages/Transaction/TransactionComp/transactionComp.module.scss rename to src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss index ed9166d08..49e0d20f3 100644 --- a/src/pages/Transaction/TransactionComp/transactionComp.module.scss +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss @@ -57,6 +57,10 @@ font-size: 14px; } + .capacityChange { + margin-left: 12px; + } + & > div { width: 100%; height: 22px; diff --git a/src/pages/Transaction/TransactionComp/TransactionLite.tsx b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx similarity index 59% rename from src/pages/Transaction/TransactionComp/TransactionLite.tsx rename to src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx index 648c508de..9e8e5d85e 100644 --- a/src/pages/Transaction/TransactionComp/TransactionLite.tsx +++ b/src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.tsx @@ -1,17 +1,16 @@ /* eslint-disable react/no-array-index-key */ import { FC } from 'react' import { useQuery } from 'react-query' -import { Tooltip } from 'antd' import { useParams } from 'react-router-dom' import BigNumber from 'bignumber.js' -import styles from './transactionComp.module.scss' -import DecimalCapacity from '../../../components/DecimalCapacity' -import { fetchTransactionLiteDetailsByHash } from '../../../service/http/fetcher' -import i18n from '../../../utils/i18n' -import { localeNumberString } from '../../../utils/number' -import { isDaoWithdrawCell, shannonToCkb } from '../../../utils/util' -import { Addr } from '../TransactionCell' -import { defaultTransactionLiteDetails } from '../state' +import styles from './TransactionLite.module.scss' +import DecimalCapacity from '../../../../components/DecimalCapacity' +import { fetchTransactionLiteDetailsByHash } from '../../../../service/http/fetcher' +import { parseCKBAmount, localeNumberString } from '../../../../utils/number' +import { shannonToCkb } from '../../../../utils/util' +import { Addr } from '../../TransactionCell' +import { defaultTransactionLiteDetails } from '../../state' +import { TransactionBadge } from './TransactionBadge' export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase }) => { const { hash: txHash } = useParams<{ hash: string }>() @@ -41,26 +40,8 @@ export const TransactionCompLite: FC<{ isCellbase: boolean }> = ({ isCellbase }) {/* only show token info on first line of transfer details */} {index === 0 ?
CKB
:
}
- {transfer.cellType === 'nervos_dao_deposit' || - transfer.cellType === 'nervos_dao_withdrawing' ? ( - - {transfer.cellType === 'nervos_dao_deposit' - ? i18n.t('transaction.nervos_dao_deposit') - : i18n.t('transaction.nervos_dao_withdraw')} -
- } - > - - {isDaoWithdrawCell(transfer.cellType) - ? i18n.t('nervos_dao.withdraw_tooltip') - : i18n.t('nervos_dao.withdraw_request_tooltip')} - - - ) : null} -
+ +
{isIncome ? '+' : ''} = [blockHeightData] + const overviewItems: Array = [] if (txStatus === 'committed') { + overviewItems.push(blockHeightData, timestampData) if (confirmation >= 0) { if (isProfessional) { - overviewItems.push(timestampData, bytes ? feeWithFeeRateData : txFeeData, txStatusData) + overviewItems.push(bytes ? feeWithFeeRateData : txFeeData, txStatusData) } else { - overviewItems.push(timestampData, txStatusData) + overviewItems.push(txStatusData) } } + } else if (txStatus === 'rejected') { + overviewItems.push( + blockHeightData, + { + ...timestampData, + content: 'Rejected', + }, + { + ...txStatusData, + content: 'Rejected', + valueTooltip: detailedMessage, + }, + ) } else { - overviewItems.push(timestampData, txFeeData, { - ...txStatusData, - valueTooltip: txStatus === 'rejected' ? detailedMessage : undefined, - }) + // pending + overviewItems.push( + { + ...blockHeightData, + content: '···', + }, + { + ...timestampData, + content: '···', + }, + { + ...txStatusData, + content: 'Pending', + }, + ) } if (isProfessional) { overviewItems.push(liteTxSizeData, liteTxCyclesData) diff --git a/src/pages/Transaction/index.tsx b/src/pages/Transaction/index.tsx index 20052a873..0b93cb056 100644 --- a/src/pages/Transaction/index.tsx +++ b/src/pages/Transaction/index.tsx @@ -13,7 +13,7 @@ import { QueryResult } from '../../components/QueryResult' import { defaultTransactionInfo } from './state' import { useSearchParams } from '../../utils/hook' import { LayoutLiteProfessional } from '../../constants/common' -import { TransactionCompLite } from './TransactionComp/TransactionLite' +import { TransactionCompLite } from './TransactionComp/TransactionLite/TransactionLite' import { TransactionComp } from './TransactionComp/TransactionComp' export default () => { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 65c353abf..424291738 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -139,23 +139,24 @@ declare namespace State { transfers: LiteTransfer[] } + // cell_type comes from: https://github.com/nervosnetwork/ckb-explorer/blob/develop/app/utils/ckb_utils.rb#L380 + type CellType = + | 'normal' + | 'udt' + | 'nervos_dao_deposit' + | 'nervos_dao_withdrawing' + | 'spore_cell' + | 'spore_cluster' + | 'cota_regular' + | 'cota_registry' + | 'm_nft_issuer' + | 'm_nft_class' + | 'm_nft_token' + | 'nrc_721_token' + | 'nrc_721_factory' interface LiteTransfer { capacity: string - // cell_type comes from: https://github.com/nervosnetwork/ckb-explorer/blob/develop/app/utils/ckb_utils.rb#L380 - cellType: - | 'normal' - | 'udt' - | 'nervos_dao_deposit' - | 'nervos_dao_withdrawing' - | 'spore_cell' - | 'spore_cluster' - | 'cota_regular' - | 'cota_registry' - | 'm_nft_issuer' - | 'm_nft_class' - | 'm_nft_token' - | 'nrc_721_token' - | 'nrc_721_factory' + cellType: CellType udtInfo?: { symbol: string diff --git a/src/utils/number.ts b/src/utils/number.ts index a074c3d1d..e96fc7e46 100644 --- a/src/utils/number.ts +++ b/src/utils/number.ts @@ -68,7 +68,7 @@ export const handleHashRate = (value: BigNumber | string | number) => { } export const parseCKBAmount = (capacity: string) => { - return parseUDTAmount(capacity, 9) + return parseUDTAmount(capacity, 8) } export const parseUDTAmount = (amount: string, decimal: string | number) => {