Refactor capacity component (#181)

src/components/Capacity/Capacity.module.scss

@@ -0,0 +1,49 @@
+@import '../../styles/variables.module';
+
+.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'] {
+    @media screen and (width <= $largeBreakPoint) {
+      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

@@ -60,39 +60,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);
-    }
-  }
-
   @media (width <= $extraLargeBreakPoint) {
     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

@@ -76,10 +76,6 @@ export const TransactionCellWithdraw = styled.div`
   align-items: center;
   margin-top: 2px;
 
-  span {
-    margin-left: 6px;
-  }
-
   img {
     margin-left: 5px;
     width: 16px;
@@ -186,6 +182,10 @@ export const WithdrawItemPanel = styled.div`
 
     @media (max-width: ${variables.mobileBreakPoint}) {
       font-size: 10px;
+
+      * {
+        font-size: inherit;
+      }
     }
 
     @media (max-width: 375px) {

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: <img src={CKBTokenIcon} alt="item icon" width="100%" />,
         title: t('common.ckb_unit'),
-        content: <DecimalCapacity value={localeNumberString(shannonToCkb(address.balance))} />,
+        content: <Capacity capacity={shannonToCkb(address.balance)} />,
       },
     },
     {
       title: t('address.occupied'),
       tooltip: t('glossary.occupied'),
-      content: <DecimalCapacity value={localeNumberString(shannonToCkb(address.balanceOccupied))} />,
+      content: <Capacity capacity={shannonToCkb(address.balanceOccupied)} />,
     },
     {
       title: t('address.dao_deposit'),
       tooltip: t('glossary.nervos_dao_deposit'),
-      content: <DecimalCapacity value={localeNumberString(shannonToCkb(address.daoDeposit))} />,
+      content: <Capacity capacity={shannonToCkb(address.daoDeposit)} />,
     },
     {
       title: t('address.compensation'),
-      content: <DecimalCapacity value={localeNumberString(shannonToCkb(address.daoCompensation))} />,
+      content: <Capacity capacity={shannonToCkb(address.daoCompensation)} />,
       tooltip: t('glossary.nervos_dao_compensation'),
     },
   ]

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 = <DecimalCapacity value={localeNumberString(shannonToCkb(block.minerReward))} />
+  const minerReward = <Capacity capacity={shannonToCkb(block.minerReward)} />
   const rootInfoItem: CardCellInfo = {
     title: t('block.transactions_root'),
     tooltip: t('glossary.transactions_root'),