From 3b733b09ff6c233227481af9182301e63c983684 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E5=9B=BD=E5=AE=87?= <841185308@qq.com> Date: Tue, 17 Oct 2023 07:16:21 +0000 Subject: [PATCH] refactor: Use comm component for history's and overview's type field. (#2876) --- .../components/FormattedTokenAmount/index.tsx | 15 ++- .../components/History/history.module.scss | 8 ++ .../src/components/History/index.tsx | 110 +++--------------- .../src/components/Overview/index.tsx | 101 +--------------- .../src/components/TransactionType/index.tsx | 104 +++++++++++++++++ packages/neuron-ui/src/locales/zh.json | 4 +- 6 files changed, 145 insertions(+), 197 deletions(-) create mode 100644 packages/neuron-ui/src/components/TransactionType/index.tsx diff --git a/packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx b/packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx index 1ad311919d..63d82b449b 100644 --- a/packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx +++ b/packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx @@ -8,25 +8,30 @@ import { HIDE_BALANCE } from 'utils/const' import styles from './formattedTokenAmount.module.scss' -type FormattedTokenAmountProps = { item: State.Transaction; show: boolean } +type FormattedTokenAmountProps = { item: State.Transaction; show: boolean; symbolClassName?: string } type AmountProps = Omit & { sudtAmount: string isReceive: boolean amount: string + symbolClassName?: string } -const Amount = ({ sudtAmount, show, item, isReceive, amount }: AmountProps) => { +const Amount = ({ sudtAmount, show, item, isReceive, amount, symbolClassName }: AmountProps) => { return sudtAmount ? (
{show ? `${!sudtAmount.includes('-') ? '+' : ''}${sudtAmount}` : HIDE_BALANCE}  - +
) : ( {amount} ) } -export const FormattedTokenAmount = ({ item, show }: FormattedTokenAmountProps) => { +export const FormattedTokenAmount = ({ item, show, symbolClassName }: FormattedTokenAmountProps) => { let amount = '--' let sudtAmount = '' let copyText = amount @@ -51,7 +56,7 @@ export const FormattedTokenAmount = ({ item, show }: FormattedTokenAmountProps) } } - const props = { sudtAmount, show, item, isReceive, amount } + const props = { sudtAmount, show, item, isReceive, amount, symbolClassName } return show ? ( diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss index f1ee7cad4f..61438e54d6 100644 --- a/packages/neuron-ui/src/components/History/history.module.scss +++ b/packages/neuron-ui/src/components/History/history.module.scss @@ -236,3 +236,11 @@ body { .isReceive { color: $main-color; } + +.tokenName { + max-width: calc(100px + (100vw - 1300px) / 2); +} + +.symbol { + max-width: calc(180px + (100vw - 1300px) / 2); +} diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx index 186039cb10..1329d5281b 100644 --- a/packages/neuron-ui/src/components/History/index.tsx +++ b/packages/neuron-ui/src/components/History/index.tsx @@ -1,6 +1,6 @@ import React, { useState, useCallback } from 'react' import { useNavigate, useLocation } from 'react-router-dom' -import { Trans, useTranslation } from 'react-i18next' +import { useTranslation } from 'react-i18next' import Pagination from 'widgets/Pagination' import SUDTAvatar from 'widgets/SUDTAvatar' import Button from 'widgets/Button' @@ -11,27 +11,16 @@ import { Download, Search, ArrowNext } from 'widgets/Icons/icon' import PageContainer from 'components/PageContainer' import TransactionStatusWrap from 'components/TransactionStatusWrap' import FormattedTokenAmount from 'components/FormattedTokenAmount' -import { UANTokenName, isTonkenInfoStandardUAN } from 'components/UANDisplay' import { useState as useGlobalState, useDispatch } from 'states' import { exportTransactions } from 'services/remote' import { ReactComponent as CKBAvatar } from 'widgets/Icons/Nervos.svg' -import { ReactComponent as Success } from 'widgets/Icons/Success.svg' -import { ReactComponent as Pending } from 'widgets/Icons/Pending.svg' -import { ReactComponent as Failure } from 'widgets/Icons/Failure.svg' -import { - RoutePath, - isMainnet as isMainnetUtil, - uniformTimeFormatter, - nftFormatter, - sUDTAmountFormatter, - sudtValueToAmount, - shannonToCKBFormatter, -} from 'utils' +import { RoutePath, isMainnet as isMainnetUtil, uniformTimeFormatter } from 'utils' import { onEnter } from 'utils/inputDevice' import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS } from 'utils/const' import Tooltip from 'widgets/Tooltip' +import TransactionType from 'components/TransactionType' import RowExtend from './RowExtend' import { useSearch } from './hooks' @@ -73,79 +62,12 @@ const History = () => { const bestBlockNumber = Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - const handleTransactionInfo = (tx: State.Transaction) => { - let name = '--' - let amount = '--' - let typeLabel: React.ReactNode = '--' - let sudtAmount = '' - let showWithUANFormatter = false - - if (tx.nftInfo) { - // NFT - name = walletName - const { type, data } = tx.nftInfo - typeLabel = `${t(`history.${type}`)} m-NFT` - amount = `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}` - } else if (tx.sudtInfo?.sUDT) { + const getTxName = (tx: State.Transaction) => { + if (!tx.nftInfo && tx.sudtInfo?.sUDT) { // Asset Account - name = tx.sudtInfo.sUDT.tokenName || DEFAULT_SUDT_FIELDS.tokenName - if (['create', 'destroy'].includes(tx.type)) { - // create/destroy an account - showWithUANFormatter = isTonkenInfoStandardUAN(tx.sudtInfo.sUDT.tokenName, tx.sudtInfo.sUDT.symbol) - typeLabel = ( - ]} - /> - ) - } else { - // send/receive to/from an account - const type = +tx.sudtInfo.amount <= 0 ? 'send' : 'receive' - typeLabel = `UDT ${t(`history.${type}`)}` - } - - if (tx.sudtInfo.sUDT.decimal) { - sudtAmount = sudtValueToAmount(tx.sudtInfo.amount, tx.sudtInfo.sUDT.decimal, true) - amount = `${sUDTAmountFormatter(sudtAmount)} ${tx.sudtInfo.sUDT.symbol}` - } - } else { - // normal tx - name = walletName - amount = `${shannonToCKBFormatter(tx.value, true)} CKB` - if (tx.type === 'create' || tx.type === 'destroy') { - if (tx.assetAccountType === 'CKB') { - typeLabel = `${t(`history.${tx.type}`, { name: 'CKB' })}` - } else { - typeLabel = `${t(`overview.${tx.type}`, { name: 'Unknown' })}` - } - } else { - typeLabel = tx.nervosDao ? 'Nervos DAO' : t(`history.${tx.type}`) - } - } - - let indicator = - switch (tx.status) { - case 'success': { - indicator = - break - } - case 'failed': { - indicator = - break - } - default: { - // ignore - } - } - - return { - name, - amount, - typeLabel, - sudtAmount, - showWithUANFormatter, - indicator, + return tx.sudtInfo.sUDT.tokenName || DEFAULT_SUDT_FIELDS.tokenName } + return walletName ?? '--' } const handleExpandClick = (idx: number | null) => { @@ -158,7 +80,7 @@ const History = () => { dataIndex: 'name', minWidth: '110px', render(_, __, item) { - const { name } = handleTransactionInfo(item) + const name = getTxName(item) return name.length > 8 ? ( {name}} isTriggerNextToChild showTriangle>
@@ -186,10 +108,16 @@ const History = () => { title: t('history.table.type'), dataIndex: 'type', align: 'left', - minWidth: '100px', + minWidth: '120px', render: (_, __, item) => { - const { typeLabel } = handleTransactionInfo(item) - return typeLabel + return ( + + ) }, }, { @@ -197,9 +125,9 @@ const History = () => { dataIndex: 'amount', align: 'left', isBalance: true, - minWidth: '220px', + minWidth: '200px', render(_, __, item, show) { - return + return }, }, { diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx index ff24b3c12a..f22f45e60d 100644 --- a/packages/neuron-ui/src/components/Overview/index.tsx +++ b/packages/neuron-ui/src/components/Overview/index.tsx @@ -1,11 +1,10 @@ import React, { useCallback, useMemo, useEffect, useState } from 'react' import { Link, useNavigate } from 'react-router-dom' -import { Trans, useTranslation } from 'react-i18next' +import { useTranslation } from 'react-i18next' import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states' import { shannonToCKBFormatter, uniformTimeFormatter, backToTop, CONSTANTS, RoutePath, useFirstLoadWallet } from 'utils' -import { UANTokenName } from 'components/UANDisplay' import PageContainer from 'components/PageContainer' import TransactionStatusWrap from 'components/TransactionStatusWrap' import FormattedTokenAmount from 'components/FormattedTokenAmount' @@ -17,39 +16,11 @@ import { ArrowNext, EyesClose, EyesOpen, OverviewSend, OverviewReceive, Addressb import BalanceSyncIcon from 'components/BalanceSyncingIcon' import CopyZone from 'widgets/CopyZone' import { HIDE_BALANCE } from 'utils/const' +import TransactionType from 'components/TransactionType' import styles from './overview.module.scss' const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS -const genTypeLabel = ( - type: 'send' | 'receive' | 'create' | 'destroy', - status: 'pending' | 'confirming' | 'success' | 'failed' -) => { - switch (type) { - case 'send': { - if (status === 'failed') { - return 'sent' - } - if (status === 'pending' || status === 'confirming') { - return 'sending' - } - return 'sent' - } - case 'receive': { - if (status === 'failed') { - return 'received' - } - if (status === 'pending' || status === 'confirming') { - return 'receiving' - } - return 'received' - } - default: { - return type - } - } -} - const TransactionStatus = ({ item, cacheTipBlockNumber, @@ -78,72 +49,6 @@ const TransactionStatus = ({ ) } -const TracsactionType = ({ - item, - cacheTipBlockNumber, - bestKnownBlockNumber, -}: { - item: Omit & { status: State.Transaction['status'] | 'confirming' } - cacheTipBlockNumber: number - bestKnownBlockNumber: number -}) => { - const [t] = useTranslation() - let typeLabel: string = '--' - let { status } = item - let typeTransProps: { - i18nKey: string - components: JSX.Element[] - } = { - i18nKey: '', - components: [], - } - - if (item.blockNumber !== undefined) { - const confirmationCount = - item.blockNumber === null || item.status === 'failed' - ? 0 - : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber - - if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) { - status = 'confirming' - } - if (item.nftInfo) { - // NFT - const { type } = item.nftInfo - typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}` - } else if (item.sudtInfo?.sUDT) { - // Asset Account - if (['create', 'destroy'].includes(item.type)) { - // create/destroy an account - typeTransProps = { - i18nKey: `overview.${item.type}SUDT`, - components: [ - , - ], - } - } else { - // send/receive to/from an account - const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive' - typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}` - } - } else if (item.type === 'create' || item.type === 'destroy') { - // normal tx - if (item.assetAccountType === 'CKB') { - typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}` - } else { - typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}` - } - } else { - typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`) - } - } - return typeTransProps.i18nKey ? : <>{typeLabel} -} - const Overview = () => { const { app: { pageNotice }, @@ -269,7 +174,7 @@ const Overview = () => { minWidth: '250px', render(_, __, item) { return ( - { + switch (type) { + case 'send': { + if (status === 'failed') { + return 'sent' + } + if (status === 'pending' || status === 'confirming') { + return 'sending' + } + return 'sent' + } + case 'receive': { + if (status === 'failed') { + return 'received' + } + if (status === 'pending' || status === 'confirming') { + return 'receiving' + } + return 'received' + } + default: + return type + } +} + +const TransactionType = ({ + item, + cacheTipBlockNumber, + bestKnownBlockNumber, + tokenNameClassName, +}: { + item: Omit & { status: State.Transaction['status'] | 'confirming' } + cacheTipBlockNumber: number + bestKnownBlockNumber: number + tokenNameClassName?: string +}) => { + const [t] = useTranslation() + let typeLabel: string = '--' + let { status } = item + let typeTransProps: { + i18nKey: string + components: JSX.Element[] + } = { + i18nKey: '', + components: [], + } + + if (item.blockNumber !== undefined) { + const confirmationCount = + item.blockNumber === null || item.status === 'failed' + ? 0 + : 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber + + if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) { + status = 'confirming' + } + if (item.nftInfo) { + // NFT + const { type } = item.nftInfo + typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}` + } else if (item.sudtInfo?.sUDT) { + // Asset Account + if (['create', 'destroy'].includes(item.type)) { + // create/destroy an account + typeTransProps = { + i18nKey: `overview.${item.type}SUDT`, + components: [ + , + ], + } + } else { + // send/receive to/from an account + const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive' + typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}` + } + } else if (item.type === 'create' || item.type === 'destroy') { + // normal tx + if (item.assetAccountType === 'CKB') { + typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}` + } else { + typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}` + } + } else { + typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`) + } + } + return typeTransProps.i18nKey ? : <>{typeLabel} +} + +TransactionType.displayName = 'TransactionType' + +export default TransactionType diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json index 19d9048896..67d31df813 100644 --- a/packages/neuron-ui/src/locales/zh.json +++ b/packages/neuron-ui/src/locales/zh.json @@ -305,9 +305,7 @@ "copy-balance": "复制余额", "copy-address": "复制地址", "create": "创建 {{name}} 资产账户", - "destroy": "销毁 {{name}} 资产账户", - "createSUDT": "创建 <0> 资产账户", - "destroySUDT": "销毁 <0> 资产账户" + "destroy": "销毁 {{name}} 资产账户" }, "transaction": { "window-title": "交易: {{hash}}",