fix: Change balance style.

nervosnetwork · Nov 28, 2022 · 2502da1 · 2502da1
1 parent 9614bb1
commit 2502da1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 76 deletions.
diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -26,6 +26,7 @@ import { ReactComponent as BalanceRight } from 'widgets/Icons/BalanceRight.svg'
 import { ArrowOpenRight, Confirming, PasswordHide, PasswordShow } from 'widgets/Icons/icon'
 import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 import CopyZone from 'widgets/CopyZone'
+import { HIDE_BALANCE } from 'utils/const'
 import styles from './overview.module.scss'
 
 const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS
@@ -103,31 +104,34 @@ const TransactionStatus = ({
 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)}` : '******mNFT'
+      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)} CKB` : '****** CKB'
+      amount = show ? `${shannonToCKBFormatter(item.value, true)} CKB` : `${HIDE_BALANCE} CKB`
+      isReceive = !amount.includes('-')
     }
   }
   return sudtAmount ? (
     <>
-      {show ? sudtAmount : '******'}&nbsp;
+      {show ? sudtAmount : HIDE_BALANCE}&nbsp;
       <UANTonkenSymbol
         className={styles.symbol}
         name={item.sudtInfo!.sUDT.tokenName}
         symbol={item.sudtInfo!.sUDT.symbol}
       />
     </>
   ) : (
-    <>{amount}</>
+    <span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
   )
 }
 
@@ -252,7 +256,7 @@ const Overview = () => {
             {!!showBalance || <PasswordHide onClick={onChangeShowBalance} className={styles.balanceIcon} />}
           </span>
           <CopyZone content={shannonToCKBFormatter(balance, false, '')} className={styles.copyBalance}>
-            <span className={styles.balanceValue}>{showBalance ? shannonToCKBFormatter(balance) : '******'}</span>
+            <span className={styles.balanceValue}>{showBalance ? shannonToCKBFormatter(balance) : HIDE_BALANCE}</span>
           </CopyZone>
           <span className={styles.balanceUnit}>CKB</span>
           <BalanceSyncIcon connectionStatus={connectionStatus} syncStatus={syncStatus} />

diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss
@@ -1,4 +1,5 @@
 @import '../../styles/mixin.scss';
+@import '../../styles/variable.scss';
 
 .mid {
   height: 200px;
@@ -82,76 +83,6 @@
   }
 }
 
-.recentActivities {
-  grid-area: activities;
-  padding: 0px 11px 16px;
-  background-color: #fff;
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    table-layout: fixed;
-  }
-
-  tr {
-    height: 46px;
-    border-bottom: 1px solid #b3b3b3;
-    padding: 0 15px;
-  }
-
-  tbody {
-    tr:hover {
-      background-color: #eee;
-    }
-  }
-
-  th {
-    text-align: left;
-    font-size: 0.75rem;
-    font-weight: 600;
-    color: #000;
-    line-height: 1em;
-    padding: 16px 0;
-
-    &[data-field='date'] {
-      width: 100px;
-    }
-    &[data-field='status'] {
-      width: 130px;
-    }
-  }
-
-  td {
-    font-size: 0.875rem;
-    line-height: 1em;
-    padding: 8px 2px;
-    color: #000;
-    white-space: nowrap;
-  }
-
-  .tokenName {
-    max-width: 50%;
-    display: inline-flex;
-    line-height: 24px;
-
-    &::after {
-      min-width: 300px;
-    }
-    & > span {
-      max-width: 100%;
-    }
-  }
-
-  .symbol {
-    max-width: 90%;
-    display: inline-flex;
-
-    &::after {
-      max-width: 400px;
-    }
-  }
-}
-
 .txStatusTh {
   padding-left: 34px !important;
 }
@@ -221,4 +152,8 @@
       margin-left: 4px;
     }
   }
-}
+}
+
+.isReceive {
+  color: $main-color;
+}
diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts
@@ -63,3 +63,5 @@ export const DEPRECATED_CODE_HASH: Record<string, string> = {
   AcpOnLina: '0x0fb343953ee78c9986b091defb6252154e0bb51044fd2879fde5b27314506111',
   AcpOnAggron: '0x86a1c6987a4acbe1a887cca4c9dd2ac9fcb07405bbeda51b861b18bbf7492c4b',
 }
+
+export const HIDE_BALANCE = '******'