fix: recent activities style questions

packages/neuron-ui/src/components/FormattedTokenAmount/formattedTokenAmount.module.scss

@@ -0,0 +1,3 @@
+.isReceive {
+  color: var(--primary-color);
+}

packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import { UANTonkenSymbol } from 'components/UANDisplay'
+import CopyZone from 'widgets/CopyZone'
+
+import {
+  shannonToCKBFormatter,
+  sudtValueToAmount,
+  sUDTAmountFormatter,
+  nftFormatter,
+  complexNumberToPureNumber,
+} from 'utils'
+import { HIDE_BALANCE } from 'utils/const'
+
+import styles from './formattedTokenAmount.module.scss'
+
+type FormattedTokenAmountProps = { item: State.Transaction; show: boolean; isNeedCopy?: boolean }
+type AmountProps = Omit<FormattedTokenAmountProps, 'isNeedCopy'> & {
+  sudtAmount: string
+  isReceive: boolean
+  amount: string
+}
+
+const Amount = ({ sudtAmount, show, item, isReceive, amount }: AmountProps) => {
+  return sudtAmount ? (
+    <div className={show && !sudtAmount.includes('-') ? styles.isReceive : ''}>
+      {show ? `${!sudtAmount.includes('-') ? '+' : ''}${sudtAmount}` : HIDE_BALANCE}&nbsp;
+      <UANTonkenSymbol name={item.sudtInfo!.sUDT.tokenName} symbol={item.sudtInfo!.sUDT.symbol} />
+    </div>
+  ) : (
+    <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
+  )
+}
+
+export const FormattedTokenAmount = ({ item, show, isNeedCopy }: FormattedTokenAmountProps) => {
+  let amount = '--'
+  let sudtAmount = ''
+  let isReceive = false
+
+  if (item.blockNumber !== undefined) {
+    if (item.nftInfo) {
+      // NFT
+      const { type, data } = item.nftInfo
+      amount = show ? `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` : `${HIDE_BALANCE}mNFT`
+      isReceive = type === 'receive'
+    } else if (item.sudtInfo?.sUDT) {
+      if (item.sudtInfo.sUDT.decimal) {
+        sudtAmount = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))
+      }
+    } else {
+      amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB`
+      isReceive = !amount.includes('-')
+    }
+  }
+
+  const props = { sudtAmount, show, item, isReceive, amount }
+
+  return isNeedCopy ? (
+    <CopyZone content={`${complexNumberToPureNumber(sudtAmount || amount)}`}>
+      <Amount {...props} />
+    </CopyZone>
+  ) : (
+    <Amount {...props} />
+  )
+}
+
+FormattedTokenAmount.displayName = 'FormattedTokenAmount'
+
+export default FormattedTokenAmount

packages/neuron-ui/src/components/History/RowExtend.tsx

@@ -65,7 +65,7 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
         <div className={styles.extendBox} style={{ gridColumn: `${2 / columns.length}` }}>
           <div className={styles.infoBox}>
             <div className={clsx(styles.infoBlock, styles.confirmCount)}>
-              <div className={styles.infoBlockTitle}>{t('history.confirmations')}</div>
+              <div className={styles.infoBlockTitle}>{t('history.confirmationTimes')}</div>
               <div>{confirmationsLabel}</div>
             </div>
             <div className={styles.infoBlock}>

packages/neuron-ui/src/components/History/history.module.scss

@@ -75,11 +75,13 @@ body {
         gap: 10px;
         font-family: 'JetBrains Mono';
       }
+
       .descText {
         padding-bottom: 16px;
         word-break: break-all;
       }
     }
+
     .confirmCount {
       min-width: 50%;
     }

packages/neuron-ui/src/components/History/index.tsx

@@ -6,11 +6,12 @@ import SUDTAvatar from 'widgets/SUDTAvatar'
 import Button from 'widgets/Button'
 import Table, { TableProps } from 'widgets/Table'
 import TextField from 'widgets/TextField'
-import CopyZone from 'widgets/CopyZone'
-import { Confirming, DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
+import { DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
 
 import PageContainer from 'components/PageContainer'
-import { getDisplayName, isTonkenInfoStandardUAN, UANTonkenSymbol } from 'components/UANDisplay'
+import TransactionStatusWrap from 'components/TransactionStatusWrap'
+import FormattedTokenAmount from 'components/FormattedTokenAmount'
+import { getDisplayName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
 import { useState as useGlobalState, useDispatch } from 'states'
 import { exportTransactions } from 'services/remote'
 
@@ -27,10 +28,9 @@ import {
   sUDTAmountFormatter,
   sudtValueToAmount,
   shannonToCKBFormatter,
-  complexNumberToPureNumber,
 } from 'utils'
 import { onEnter } from 'utils/inputDevice'
-import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS, HIDE_BALANCE } from 'utils/const'
+import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS } from 'utils/const'
 import RowExtend from './RowExtend'
 
 import { useSearch } from './hooks'
@@ -150,8 +150,7 @@ const History = () => {
     {
       title: t('history.table.name'),
       dataIndex: 'name',
-      width: '130px',
-      minWidth: '',
+      minWidth: '110px',
       render(_, __, item) {
         const { name } = handleTransactionInfo(item)
         return (
@@ -170,7 +169,7 @@ const History = () => {
       title: t('history.table.type'),
       dataIndex: 'type',
       align: 'left',
-      width: '100px',
+      minWidth: '100px',
       render: (_, __, item) => {
         const { typeLabel } = handleTransactionInfo(item)
         return typeLabel
@@ -181,64 +180,29 @@ const History = () => {
       dataIndex: 'amount',
       align: 'left',
       isBalance: true,
-      minWidth: '150px',
+      minWidth: '220px',
       render(_, __, item, show) {
-        let amount = '--'
-        let sudtAmount = ''
-        let isReceive = false
-
-        if (item.blockNumber !== undefined) {
-          if (item.nftInfo) {
-            // NFT
-            const { type, data } = item.nftInfo
-            amount = show ? `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` : `${HIDE_BALANCE}mNFT`
-            isReceive = type === 'receive'
-          } else if (item.sudtInfo?.sUDT) {
-            if (item.sudtInfo.sUDT.decimal) {
-              sudtAmount = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))
-            }
-          } else {
-            amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB`
-            isReceive = !amount.includes('-')
-          }
-        }
-
-        return (
-          <CopyZone content={`${complexNumberToPureNumber(sudtAmount && sudtAmount !== '' ? sudtAmount : amount)}`}>
-            {sudtAmount ? (
-              <>
-                {show ? sudtAmount : HIDE_BALANCE}&nbsp;
-                <UANTonkenSymbol
-                  className={styles.symbol}
-                  name={item.sudtInfo!.sUDT.tokenName}
-                  symbol={item.sudtInfo!.sUDT.symbol}
-                />
-              </>
-            ) : (
-              <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
-            )}
-          </CopyZone>
-        )
+        return <FormattedTokenAmount item={item} show={show} isNeedCopy />
       },
     },
     {
       title: t('history.table.timestamp'),
       dataIndex: 'timestamp',
       align: 'left',
+      minWidth: '150px',
       render: (_, __, item) => uniformTimeFormatter(item.timestamp),
     },
     {
       title: t('history.table.status'),
       dataIndex: 'status',
       align: 'left',
+      minWidth: '50px',
       render(_, __, item) {
-        const confirmations = 1 + bestBlockNumber - +item.blockNumber
-        let status = item.status as string
-        if (status === 'success' && confirmations < CONFIRMATION_THRESHOLD) {
-          status = 'confirming'
-        }
+        const confirmationCount = 1 + bestBlockNumber - +item.blockNumber
+        const status =
+          item.status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD ? 'confirming' : item.status
 
-        return status === 'confirming' ? <Confirming className={styles.confirm} /> : t(`history.${status}`)
+        return <TransactionStatusWrap status={status} confirmationCount={confirmationCount} />
       },
     },
     {

packages/neuron-ui/src/components/Overview/index.tsx

@@ -4,26 +4,17 @@ import { Trans, useTranslation } from 'react-i18next'
 import { showTransactionDetails } from 'services/remote'
 import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
 
-import {
-  localNumberFormatter,
-  shannonToCKBFormatter,
-  uniformTimeFormatter,
-  sudtValueToAmount,
-  sUDTAmountFormatter,
-  backToTop,
-  CONSTANTS,
-  RoutePath,
-  nftFormatter,
-  useFirstLoadApp,
-} from 'utils'
+import { shannonToCKBFormatter, uniformTimeFormatter, backToTop, CONSTANTS, RoutePath, useFirstLoadApp } from 'utils'
 
-import { UANTokenName, UANTonkenSymbol } from 'components/UANDisplay'
+import { UANTokenName } from 'components/UANDisplay'
 import PageContainer from 'components/PageContainer'
+import TransactionStatusWrap from 'components/TransactionStatusWrap'
+import FormattedTokenAmount from 'components/FormattedTokenAmount'
 import Table from 'widgets/Table'
 import { ReactComponent as Send } from 'widgets/Icons/OverviewSend.svg'
 import { ReactComponent as Receive } from 'widgets/Icons/OverviewReceive.svg'
 import { ReactComponent as BalanceRight } from 'widgets/Icons/BalanceRight.svg'
-import { ArrowOpenRight, Confirming, PasswordHide, PasswordShow } from 'widgets/Icons/icon'
+import { ArrowOpenRight, PasswordHide, PasswordShow } from 'widgets/Icons/icon'
 import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 import CopyZone from 'widgets/CopyZone'
 import { HIDE_BALANCE } from 'utils/const'
@@ -69,72 +60,25 @@ const TransactionStatus = ({
   cacheTipBlockNumber: number
   bestKnownBlockNumber: number
 }) => {
-  const [t] = useTranslation()
-  let confirmations = ''
+  let confirmationCount
   let { status } = item
+
   if (item.blockNumber !== undefined) {
-    const confirmationCount =
+    confirmationCount =
       item.blockNumber === null || item.status === 'failed'
         ? 0
         : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber
 
-    if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) {
-      status = 'confirming'
-
-      if (confirmationCount === 1) {
-        confirmations = t('overview.confirmation', {
-          confirmationCount: localNumberFormatter(confirmationCount),
-        })
-      } else if (confirmationCount > 1) {
-        confirmations = `${t('overview.confirmations', {
-          confirmationCount: localNumberFormatter(confirmationCount),
-        })}`
-      }
-    }
+    status = item.status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD ? 'confirming' : item.status
   }
+
   return (
     <div className={styles.txStatus} data-status={status}>
-      {status === 'confirming' ? <Confirming className={styles.confirming} /> : null}
-      <span>{t(`overview.statusLabel.${status}`)}</span>
-      {confirmations ? <span className={styles.confirmText}>{confirmations}</span> : null}
+      <TransactionStatusWrap status={status} confirmationCount={confirmationCount} />
     </div>
   )
 }
 
-const Amount = ({ item, show }: { item: State.Transaction; show: boolean }) => {
-  let amount = '--'
-  let sudtAmount = ''
-  let isReceive = false
-
-  if (item.blockNumber !== undefined) {
-    if (item.nftInfo) {
-      // NFT
-      const { type, data } = item.nftInfo
-      amount = show ? `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` : `${HIDE_BALANCE}mNFT`
-      isReceive = type === 'receive'
-    } else if (item.sudtInfo?.sUDT) {
-      if (item.sudtInfo.sUDT.decimal) {
-        sudtAmount = sUDTAmountFormatter(sudtValueToAmount(item.sudtInfo.amount, item.sudtInfo.sUDT.decimal))
-      }
-    } else {
-      amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB`
-      isReceive = !amount.includes('-')
-    }
-  }
-  return sudtAmount ? (
-    <>
-      {show ? sudtAmount : HIDE_BALANCE}&nbsp;
-      <UANTonkenSymbol
-        className={styles.symbol}
-        name={item.sudtInfo!.sUDT.tokenName}
-        symbol={item.sudtInfo!.sUDT.symbol}
-      />
-    </>
-  ) : (
-    <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
-  )
-}
-
 const TracsactionType = ({
   item,
   cacheTipBlockNumber,
@@ -320,7 +264,7 @@ const Overview = () => {
             isBalance: true,
             minWidth: '300px',
             render(_, __, item, show) {
-              return <Amount item={item} show={show} />
+              return <FormattedTokenAmount item={item} show={show} />
             },
           },
           {

packages/neuron-ui/src/components/Overview/overview.module.scss

@@ -88,16 +88,6 @@
   position: relative;
   align-items: center;
 
-  .confirming {
-    @include infinite-rotation;
-  }
-
-  .confirmText {
-    color: #999;
-    font-size: 12px;
-    margin-left: 4px;
-  }
-
   & > svg {
     margin-right: 4px;
   }
@@ -155,7 +145,3 @@
     }
   }
 }
-
-.isReceive {
-  color: $main-color;
-}

packages/neuron-ui/src/components/SUDTSend/sUDTSend.module.scss

@@ -45,6 +45,7 @@ $bottomHeight: 186px;
         overflow: initial !important;
         position: relative;
         color: var(--input-second-color);
+        display: inline-flex;
       }
       .balance {
         margin-top: 8px;

packages/neuron-ui/src/components/TransactionList/index.tsx

@@ -134,7 +134,7 @@ const TransactionList = ({
         if (status === 'success' && confirmations < CONFIRMATION_THRESHOLD) {
           status = 'confirming'
         }
-        const statusLabel = t(`history.${status}`)
+        const statusLabel = t(`transaction-status.${status}`)
         const confirmationsLabel = confirmations > 1000 ? '1,000+' : localNumberFormatter(confirmations)
 
         let name = '--'
@@ -236,7 +236,7 @@ const TransactionList = ({
                 <span>{statusLabel}</span>
               </div>
               <div>
-                <span>{t('history.confirmations')}</span>
+                <span>{t('history.confirmationTimes')}</span>
                 {confirmations >= 0 && (status === 'success' || status === 'confirming') ? (
                   <span className={styles.confirmations} title={confirmationsLabel}>
                     {confirmationsLabel}