refactor: refactor Capacity component

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

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<CapacityProps> = ({
+  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 (
+    <div className={styles.container} data-type={type} data-diff-status={diffStatus} data-layout={layout}>
+      <span data-role="int">{int}</span>
+      {dec ? (
+        <span data-role="dec" className="monospace">
+          {`.${dec}`}
+        </span>
+      ) : null}
+      {unit && <span className={`${styles.unit} monospace`}>{unit}</span>}
+    </div>
+  )
+}
+
+export default Capacity

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;

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 (
                 <tr key={item.transactionHash}>
                   <td className={styles.hash} title={t('transaction.transaction_hash')}>
@@ -97,13 +96,8 @@ const LiteTransactionList: React.FC<{
                     }`}
                   </td>
                   {address ? (
-                    <td className={styles.income} title={t('transaction.capacity_change')}>
-                      <span data-is-positive={bigIncome.isPositive()} data-is-zero={bigIncome.isZero()}>
-                        <DecimalCapacity
-                          value={localeNumberString(shannonToCkb(bigIncome))}
-                          balanceChangeType={isIncome ? 'income' : 'payment'}
-                        />
-                      </span>
+                    <td title={t('transaction.capacity_change')}>
+                      <Capacity capacity={shannonToCkb(bigIncome)} type="diff" />
                     </td>
                   ) : null}
                 </tr>

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 }) => {
             <img src={CurrentAddressIcon} alt="current Address" />
           </Tooltip>
         )}
-        <DecimalCapacity
-          value={`${bigIncome.isPositive() ? '+' : ''}${localeNumberString(shannonToCkb(bigIncome))}`}
-          balanceChangeType={isIncome ? 'income' : 'payment'}
-        />
+        <Capacity capacity={shannonToCkb(bigIncome)} type="diff" />
         {!isMobile && (
           <Tooltip placement="top" title={`${t('address.current-address')} `}>
             <img src={CurrentAddressIcon} alt="current Address" />

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 }) => {
       <WithdrawPopoverItem
         width={width}
         title={`${t('nervos_dao.deposit_capacity')}: `}
-        content={
-          <DecimalCapacity value={localeNumberString(shannonToCkb(cell.capacity))} fontSize={isMobile ? '8px' : ''} />
-        }
+        content={<Capacity capacity={shannonToCkb(cell.capacity)} />}
       />
       <WithdrawPopoverItem
         width={width}
         title={`${t(
           isDaoWithdrawCell(cell.cellType) ? 'nervos_dao.compensation' : 'nervos_dao.unissued_compensation',
         )}: `}
-        content={
-          <DecimalCapacity value={localeNumberString(shannonToCkb(cell.interest))} fontSize={isMobile ? '8px' : ''} />
-        }
+        content={<Capacity capacity={shannonToCkb(cell.interest)} />}
       />
       <WithdrawPopoverItem
         width={width}
@@ -172,7 +167,7 @@ const TransactionCellNervosDao = ({ cell, cellType }: { cell: Cell; cellType: Ce
   const { t } = useTranslation()
   return (
     <TransactionCellWithdraw>
-      <DecimalCapacity value={localeNumberString(shannonToCkb(cell.capacity))} />
+      <Capacity capacity={shannonToCkb(cell.capacity)} />
       {cellType === CellType.Input ? (
         <Popover placement="right" title="" content={<WithdrawPopoverInfo cell={cell} />} trigger="click">
           <img src={isDaoWithdrawCell(cell.cellType) ? NervosDAOWithdrawingIcon : NervosDAOCellIcon} alt="withdraw" />
@@ -225,7 +220,7 @@ const TransactionCellCapacity = ({ cell, cellType }: { cell: Cell; cellType: Cel
 
   return (
     <div className="transactionCellWithoutIcon">
-      <DecimalCapacity value={localeNumberString(shannonToCkb(cell.capacity))} />
+      <Capacity capacity={shannonToCkb(cell.capacity)} />
     </div>
   )
 }

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

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;