feat: lite version of transaction information (#25)

Co-authored-by: WhiteMind <[email protected]>
Co-authored-by: zhb666 <[email protected]>

.gitignore

@@ -1,13 +1,15 @@
 .DS_Store
 .vscode
 .idea/
+.eslintcache
 
 node_modules/
 build/
 dist/
 npm-debug.log
 *.log
 coverage/
+dist/
 *.orig
 *.swp
 *.bak

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base"
-  ]
+  "extends": ["config:base"]
 }

src/components/Card/HashCard/index.tsx

@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
-import { Tooltip } from 'antd'
+import { Radio, Tooltip } from 'antd'
 import { useTranslation } from 'react-i18next'
+import { LayoutLiteProfessional } from '../../../constants/common'
 import CopyIcon from '../../../assets/copy.png'
 import { explorerService } from '../../../services/ExplorerService'
 import SmallLoading from '../../Loading/SmallLoading'
-import { useIsMobile, useNewAddr, useDeprecatedAddr } from '../../../utils/hook'
+import { useIsMobile, useNewAddr, useDeprecatedAddr, useSearchParams, useUpdateSearchParams } from '../../../utils/hook'
 import SimpleButton from '../../SimpleButton'
 import { ReactComponent as OpenInNew } from '../../../assets/open_in_new.svg'
 import { ReactComponent as DownloadIcon } from '../../../assets/download_tx.svg'
@@ -48,6 +49,7 @@ export default ({
   showDASInfoOnHeader?: boolean | string
 }) => {
   const isMobile = useIsMobile()
+  const { Professional, Lite } = LayoutLiteProfessional
   const setToast = useSetToast()
   const { t } = useTranslation()
 
@@ -56,6 +58,19 @@ export default ({
   const deprecatedAddr = useDeprecatedAddr(hash)
   const counterpartAddr = newAddr === hash ? deprecatedAddr : newAddr
 
+  const searchParams = useSearchParams('layout')
+  const defaultLayout = Professional
+  const updateSearchParams = useUpdateSearchParams<'layout'>()
+  const layout = searchParams.layout === Lite ? Lite : defaultLayout
+
+  const onChangeLayout = (layoutType: LayoutLiteProfessional) => {
+    updateSearchParams(params =>
+      layoutType === defaultLayout
+        ? Object.fromEntries(Object.entries(params).filter(entry => entry[0] !== 'layout'))
+        : { ...params, layout: layoutType },
+    )
+  }
+
   const handleExportTxClick = async () => {
     const res = await explorerService.api.requesterV2(`transactions/${hash}/raw`).catch(error => {
       setToast({ message: error.message })
@@ -86,7 +101,6 @@ export default ({
             <div className="hashTitle">{title}</div>
           </>
         )}
-
         <div className={styles.hashCardHeaderRight}>
           <div className="hashCardHashContent">
             {loading ? (
@@ -133,11 +147,26 @@ export default ({
             ) : null}
           </div>
 
+          {!isMobile && isTx && !loading ? (
+            <div className={styles.professionalLiteBox}>
+              <Radio.Group
+                className={styles.layoutButtons}
+                options={[
+                  { label: t('transaction.professional'), value: Professional },
+                  { label: t('transaction.lite'), value: Lite },
+                ]}
+                onChange={({ target: { value } }) => onChangeLayout(value)}
+                value={layout}
+                optionType="button"
+                buttonStyle="solid"
+              />
+            </div>
+          ) : null}
+
           {(showDASInfoOnHeader || showDASInfoOnHeader === '') && (
             <DASInfo address={typeof showDASInfoOnHeader === 'string' ? showDASInfoOnHeader : hash} />
           )}
         </div>
-
         {specialAddress && (
           <Tooltip title={t('address.vesting_tooltip')} placement={isMobile ? 'bottomRight' : 'bottom'}>
             <Link to={`/address/${specialAddress}`} className="hashVesting">
@@ -149,6 +178,23 @@ export default ({
           {hash}
         </div>
       </div>
+
+      {isMobile && isTx && !loading ? (
+        <div className={styles.professionalLiteBox}>
+          <Radio.Group
+            className={styles.layoutButtons}
+            options={[
+              { label: t('transaction.professional'), value: Professional },
+              { label: t('transaction.lite'), value: Lite },
+            ]}
+            onChange={({ target: { value } }) => onChangeLayout(value)}
+            value={layout}
+            optionType="button"
+            buttonStyle="solid"
+          />
+        </div>
+      ) : null}
+
       {children}
     </HashCardPanel>
   )

src/components/Card/HashCard/styles.module.scss

@@ -85,3 +85,57 @@
     color: #333;
   }
 }
+
+.professionalLiteBox {
+  margin-left: 10px;
+
+  .layoutButtons {
+    > label {
+      height: 40px;
+      width: 120px;
+      text-align: center;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 38px;
+      color: #333;
+      border: 1px solid #e5e5e5;
+      box-shadow: none !important;
+
+      &::before {
+        content: none !important;
+      }
+
+      &:hover {
+        color: #333;
+        background: #fff;
+      }
+
+      &:first-child {
+        border-radius: 4px 0 0 4px;
+      }
+
+      &:last-child {
+        border-radius: 0 4px 4px 0;
+      }
+
+      &:global(.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)) {
+        background: #333;
+        border-color: #333 !important;
+
+        &:hover {
+          background: #333;
+        }
+      }
+    }
+
+    @media screen and (width <= 750px) {
+      width: 100%;
+      margin: 6px 0 20px;
+
+      > label {
+        height: 40px;
+        width: 50%;
+      }
+    }
+  }
+}

src/components/DecimalCapacity/index.tsx

@@ -1,23 +1,27 @@
+import classNames from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { DecimalPanel, DecimalPartPanel, DecimalZerosPanel } from './styled'
+import styles from './styles.module.scss'
 
 export default ({
   value,
   fontSize,
-  color,
+  balanceChangeType = 'none',
   hideUnit,
   hideZero,
   marginBottom = '1px',
 }: {
   value: string
+  balanceChangeType?: 'payment' | 'income' | 'none'
   fontSize?: string
-  color?: string
   hideUnit?: boolean
   hideZero?: boolean
   marginBottom?: string
 }) => {
   const { t } = useTranslation()
   const integer = value.split('.')[0] || '0'
+  const isPayment = balanceChangeType === 'payment'
+  const balanceChangeTypeClass = isPayment ? 'subtraction' : 'addition'
   let decimal = value.split('.')[1] || ''
   let zeros = ''
 
@@ -33,16 +37,24 @@ export default ({
 
   return (
     <DecimalPanel>
-      <span>{integer}</span>
-      <DecimalPartPanel className="monospace" fontSize={fontSize} color={color} marginBottom={marginBottom}>
+      <span className={classNames(balanceChangeTypeClass, styles.intergerPart)}>{integer}</span>
+      <DecimalPartPanel
+        className={`monospace ${balanceChangeTypeClass}`}
+        fontSize={fontSize}
+        marginBottom={marginBottom}
+      >
         {decimal}
       </DecimalPartPanel>
       {!hideZero && (
-        <DecimalZerosPanel className="monospace" fontSize={fontSize} color={color} marginBottom={marginBottom}>
+        <DecimalZerosPanel
+          className={`monospace ${balanceChangeTypeClass}`}
+          fontSize={fontSize}
+          marginBottom={marginBottom}
+        >
           {zeros}
         </DecimalZerosPanel>
       )}
-      {!hideUnit && <div className="decimalUnit monospace">{t('common.ckb_unit')}</div>}
+      {!hideUnit && <div className={`decimalUnit monospace ${balanceChangeTypeClass}`}>{t('common.ckb_unit')}</div>}
     </DecimalPanel>
   )
 }

src/components/DecimalCapacity/styled.tsx

@@ -5,6 +5,14 @@ export const DecimalPanel = styled.div`
   justify-content: flex-end;
   align-items: flex-end;
 
+  .subtraction {
+    color: var(--accent-color);
+  }
+
+  .addition {
+    color: var(--primary-color);
+  }
+
   .decimalUnit {
     margin-left: 5px;
 
@@ -17,7 +25,7 @@ export const DecimalPanel = styled.div`
 export const DecimalPartPanel = styled.div`
   margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')};
   font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) =>
-    props.fontSize ? props.fontSize : '12px'};
+    props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
   @media (max-width: 1000px) {
@@ -32,7 +40,7 @@ export const DecimalPartPanel = styled.div`
 export const DecimalZerosPanel = styled.div`
   margin-bottom: ${(props: { marginBottom: string }) => (props.marginBottom ? props.marginBottom : '1px')};
   font-size: ${(props: { fontSize?: string; color?: string; marginBottom: string }) =>
-    props.fontSize ? props.fontSize : '12px'};
+    props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
   @media (max-width: 1000px) {

src/components/DecimalCapacity/styles.module.scss

@@ -0,0 +1,3 @@
+.intergerPart {
+  font-size: 16px;
+}

src/components/TransactionItem/TransactionIncome/index.tsx

@@ -15,17 +15,18 @@ export default ({ income }: { income: string }) => {
   if (bigIncome.isNaN()) {
     bigIncome = new BigNumber(0)
   }
+  const isIncome = bigIncome.isGreaterThanOrEqualTo(0)
   return (
     <TransactionIncomePanel>
-      <TransactionCapacityValuePanel increased={bigIncome.isGreaterThanOrEqualTo(0)}>
+      <TransactionCapacityValuePanel increased={isIncome}>
         {isMobile && (
           <Tooltip placement="top" title={`${t('address.current-address')} `}>
             <img src={CurrentAddressIcon} alt="current Address" />
           </Tooltip>
         )}
         <DecimalCapacity
           value={`${bigIncome.isPositive() ? '+' : ''}${localeNumberString(shannonToCkb(bigIncome))}`}
-          color="inherit"
+          balanceChangeType={isIncome ? 'income' : 'payment'}
         />
         {!isMobile && (
           <Tooltip placement="top" title={`${t('address.current-address')} `}>

src/components/TransactionItem/TransactionItemCell/index.tsx

@@ -9,7 +9,7 @@ import CurrentAddressIcon from '../../../assets/current_address.svg'
 import UDTTokenIcon from '../../../assets/udt_token.png'
 import { useCurrentLanguage } from '../../../utils/i18n'
 import { localeNumberString, parseUDTAmount } from '../../../utils/number'
-import { shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
+import { isDaoCell, isDaoDepositCell, isDaoWithdrawCell, shannonToCkb, shannonToCkbDecimal } from '../../../utils/util'
 import {
   TransactionCellPanel,
   TransactionCellCapacityPanel,
@@ -30,12 +30,6 @@ import { useBoolean, useIsMobile } from '../../../utils/hook'
 import CopyTooltipText from '../../Text/CopyTooltipText'
 import EllipsisMiddle from '../../EllipsisMiddle'
 
-const isDaoDepositCell = (cellType: State.CellTypes) => cellType === 'nervos_dao_deposit'
-
-const isDaoWithdrawCell = (cellType: State.CellTypes) => cellType === 'nervos_dao_withdrawing'
-
-const isDaoCell = (cellType: State.CellTypes) => isDaoDepositCell(cellType) || isDaoWithdrawCell(cellType)
-
 const AddressTextWithAlias: FC<{
   address: string
   to?: string

src/components/TransactionItem/TransactionLiteIncome/index.module.scss

@@ -22,5 +22,5 @@
 }
 
 .decreased {
-  color: #fa504f;
+  color: var(--accent-color);
 }

src/components/TransactionItem/TransactionLiteIncome/index.tsx

@@ -10,17 +10,13 @@ export default ({ income }: { income: string }) => {
   if (bigIncome.isNaN()) {
     bigIncome = new BigNumber(0)
   }
+  const isIncome = bigIncome.isGreaterThanOrEqualTo(0)
   return (
-    <div
-      className={classNames(
-        styles.transactionLitePanel,
-        bigIncome.isGreaterThanOrEqualTo(0) ? styles.increased : styles.decreased,
-      )}
-    >
+    <div className={classNames(styles.transactionLitePanel, isIncome ? styles.increased : styles.decreased)}>
       <DecimalCapacity
         value={`${bigIncome.isPositive() ? '+' : ''}${localeNumberString(shannonToCkb(bigIncome))}`}
-        color="inherit"
         marginBottom="0"
+        balanceChangeType={isIncome ? 'income' : 'payment'}
       />
     </div>
   )

src/constants/common.ts

@@ -110,5 +110,10 @@ export enum ChainName {
   Testnet = 'pudge',
 }
 
+export enum LayoutLiteProfessional {
+  Lite = 'lite',
+  Professional = 'professional',
+}
+
 export const MAINNET_URL = `https://${config.BASE_URL}`
 export const TESTNET_URL = `https://${ChainName.Testnet}.${config.BASE_URL}`

src/index.css

@@ -2,6 +2,8 @@
 
 body {
   --primary-color: #00cc9b;
+  --accent-color: #FA504F;
+  --primary-text-color: #333;
   --primary-hover-bg-color: #e8fff1;
   --primary-chiffon-color: #e6fcf7;
   --navbar-height: 64px;

src/locales/en.json

@@ -453,7 +453,9 @@
         }
       },
       "professional": "Professional",
-      "lite": "Lite"
+      "lite": "Lite",
+      "unknown_assets": "Unknown Assets",
+      "mint": "Mint"
     },
     "block": {
       "block": "Block",

src/locales/zh.json

@@ -452,7 +452,9 @@
         }
       },
       "professional": "专业版",
-      "lite": "精简版"
+      "lite": "精简版",
+      "unknown_assets": "未知资产",
+      "mint": "铸造"
     },
     "block": {
       "block": "区块",