refactor: extract lite transaction components

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;
+}

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<State.CellType, string> = {
+  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 (
+    <Tooltip
+      title={
+        <div className={styles.tootip}>
+          <div>{displayName}</div>
+          <div>{capacity} CKB</div>
+        </div>
+      }
+    >
+      <div className={styles.transactionBadge}>{displayName}</div>
+    </Tooltip>
+  )
+}

src/pages/Transaction/TransactionComp/transactionComp.module.scss → src/pages/Transaction/TransactionComp/TransactionLite/TransactionLite.module.scss

@@ -57,6 +57,10 @@
       font-size: 14px;
     }
 
+    .capacityChange {
+      margin-left: 12px;
+    }
+
     & > div {
       width: 100%;
       height: 22px;

src/pages/Transaction/TransactionComp/TransactionLite.tsx → 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 ? <div>CKB</div> : <div />}
                       <div className={styles.addressDetailLite}>
-                        {transfer.cellType === 'nervos_dao_deposit' ||
-                        transfer.cellType === 'nervos_dao_withdrawing' ? (
-                          <Tooltip
-                            placement="top"
-                            title={
-                              <div>
-                                {transfer.cellType === 'nervos_dao_deposit'
-                                  ? i18n.t('transaction.nervos_dao_deposit')
-                                  : i18n.t('transaction.nervos_dao_withdraw')}
-                              </div>
-                            }
-                          >
-                            <span className={styles.tag}>
-                              {isDaoWithdrawCell(transfer.cellType)
-                                ? i18n.t('nervos_dao.withdraw_tooltip')
-                                : i18n.t('nervos_dao.withdraw_request_tooltip')}
-                            </span>
-                          </Tooltip>
-                        ) : null}
-                        <div>
+                        <TransactionBadge cellType={transfer.cellType} capacity={parseCKBAmount(transfer.capacity)} />
+                        <div className={styles.capacityChange}>
                           <span className={isIncome ? styles.add : styles.subtraction}>{isIncome ? '+' : ''}</span>
                           <DecimalCapacity
                             balanceChangeType={isIncome ? 'income' : 'payment'}

src/pages/Transaction/TransactionComp/TransactionOverview.tsx

@@ -228,20 +228,45 @@ export const TransactionOverview: FC<{ transaction: State.Transaction; layout: L
     title: i18n.t('transaction.cycles'),
     content: liteTxCyclesDataContent,
   }
-  const overviewItems: Array<OverviewItemData> = [blockHeightData]
+  const overviewItems: Array<OverviewItemData> = []
   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)

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 () => {

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

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) => {