Skip to content

Commit 3b733b0

Browse files
yanguoyuyanguoyu
authored
refactor: Use comm component for history's and overview's type field. (#2876)
1 parent 0c48a06 commit 3b733b0

File tree

6 files changed

+145
-197
lines changed

6 files changed

+145
-197
lines changed

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,30 @@ import { HIDE_BALANCE } from 'utils/const'
88

99
import styles from './formattedTokenAmount.module.scss'
1010

11-
type FormattedTokenAmountProps = { item: State.Transaction; show: boolean }
11+
type FormattedTokenAmountProps = { item: State.Transaction; show: boolean; symbolClassName?: string }
1212
type AmountProps = Omit<FormattedTokenAmountProps, 'isNeedCopy'> & {
1313
sudtAmount: string
1414
isReceive: boolean
1515
amount: string
16+
symbolClassName?: string
1617
}
1718

18-
const Amount = ({ sudtAmount, show, item, isReceive, amount }: AmountProps) => {
19+
const Amount = ({ sudtAmount, show, item, isReceive, amount, symbolClassName }: AmountProps) => {
1920
return sudtAmount ? (
2021
<div className={show && !sudtAmount.includes('-') ? styles.isReceive : ''}>
2122
{show ? `${!sudtAmount.includes('-') ? '+' : ''}${sudtAmount}` : HIDE_BALANCE}&nbsp;
22-
<UANTonkenSymbol name={item.sudtInfo!.sUDT.tokenName} symbol={item.sudtInfo!.sUDT.symbol} />
23+
<UANTonkenSymbol
24+
className={symbolClassName}
25+
name={item.sudtInfo!.sUDT.tokenName}
26+
symbol={item.sudtInfo!.sUDT.symbol}
27+
/>
2328
</div>
2429
) : (
2530
<span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
2631
)
2732
}
2833

29-
export const FormattedTokenAmount = ({ item, show }: FormattedTokenAmountProps) => {
34+
export const FormattedTokenAmount = ({ item, show, symbolClassName }: FormattedTokenAmountProps) => {
3035
let amount = '--'
3136
let sudtAmount = ''
3237
let copyText = amount
@@ -51,7 +56,7 @@ export const FormattedTokenAmount = ({ item, show }: FormattedTokenAmountProps)
5156
}
5257
}
5358

54-
const props = { sudtAmount, show, item, isReceive, amount }
59+
const props = { sudtAmount, show, item, isReceive, amount, symbolClassName }
5560

5661
return show ? (
5762
<CopyZone content={copyText}>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,3 +236,11 @@ body {
236236
.isReceive {
237237
color: $main-color;
238238
}
239+
240+
.tokenName {
241+
max-width: calc(100px + (100vw - 1300px) / 2);
242+
}
243+
244+
.symbol {
245+
max-width: calc(180px + (100vw - 1300px) / 2);
246+
}

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

Lines changed: 19 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useCallback } from 'react'
22
import { useNavigate, useLocation } from 'react-router-dom'
3-
import { Trans, useTranslation } from 'react-i18next'
3+
import { useTranslation } from 'react-i18next'
44
import Pagination from 'widgets/Pagination'
55
import SUDTAvatar from 'widgets/SUDTAvatar'
66
import Button from 'widgets/Button'
@@ -11,27 +11,16 @@ import { Download, Search, ArrowNext } from 'widgets/Icons/icon'
1111
import PageContainer from 'components/PageContainer'
1212
import TransactionStatusWrap from 'components/TransactionStatusWrap'
1313
import FormattedTokenAmount from 'components/FormattedTokenAmount'
14-
import { UANTokenName, isTonkenInfoStandardUAN } from 'components/UANDisplay'
1514
import { useState as useGlobalState, useDispatch } from 'states'
1615
import { exportTransactions } from 'services/remote'
1716

1817
import { ReactComponent as CKBAvatar } from 'widgets/Icons/Nervos.svg'
19-
import { ReactComponent as Success } from 'widgets/Icons/Success.svg'
20-
import { ReactComponent as Pending } from 'widgets/Icons/Pending.svg'
21-
import { ReactComponent as Failure } from 'widgets/Icons/Failure.svg'
2218

23-
import {
24-
RoutePath,
25-
isMainnet as isMainnetUtil,
26-
uniformTimeFormatter,
27-
nftFormatter,
28-
sUDTAmountFormatter,
29-
sudtValueToAmount,
30-
shannonToCKBFormatter,
31-
} from 'utils'
19+
import { RoutePath, isMainnet as isMainnetUtil, uniformTimeFormatter } from 'utils'
3220
import { onEnter } from 'utils/inputDevice'
3321
import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS } from 'utils/const'
3422
import Tooltip from 'widgets/Tooltip'
23+
import TransactionType from 'components/TransactionType'
3524
import RowExtend from './RowExtend'
3625

3726
import { useSearch } from './hooks'
@@ -73,79 +62,12 @@ const History = () => {
7362

7463
const bestBlockNumber = Math.max(cacheTipBlockNumber, bestKnownBlockNumber)
7564

76-
const handleTransactionInfo = (tx: State.Transaction) => {
77-
let name = '--'
78-
let amount = '--'
79-
let typeLabel: React.ReactNode = '--'
80-
let sudtAmount = ''
81-
let showWithUANFormatter = false
82-
83-
if (tx.nftInfo) {
84-
// NFT
85-
name = walletName
86-
const { type, data } = tx.nftInfo
87-
typeLabel = `${t(`history.${type}`)} m-NFT`
88-
amount = `${type === 'receive' ? '+' : '-'}${nftFormatter(data)}`
89-
} else if (tx.sudtInfo?.sUDT) {
65+
const getTxName = (tx: State.Transaction) => {
66+
if (!tx.nftInfo && tx.sudtInfo?.sUDT) {
9067
// Asset Account
91-
name = tx.sudtInfo.sUDT.tokenName || DEFAULT_SUDT_FIELDS.tokenName
92-
if (['create', 'destroy'].includes(tx.type)) {
93-
// create/destroy an account
94-
showWithUANFormatter = isTonkenInfoStandardUAN(tx.sudtInfo.sUDT.tokenName, tx.sudtInfo.sUDT.symbol)
95-
typeLabel = (
96-
<Trans
97-
i18nKey={`history.${tx.type}SUDT`}
98-
components={[<UANTokenName name={tx.sudtInfo.sUDT.tokenName} symbol={tx.sudtInfo.sUDT.symbol} />]}
99-
/>
100-
)
101-
} else {
102-
// send/receive to/from an account
103-
const type = +tx.sudtInfo.amount <= 0 ? 'send' : 'receive'
104-
typeLabel = `UDT ${t(`history.${type}`)}`
105-
}
106-
107-
if (tx.sudtInfo.sUDT.decimal) {
108-
sudtAmount = sudtValueToAmount(tx.sudtInfo.amount, tx.sudtInfo.sUDT.decimal, true)
109-
amount = `${sUDTAmountFormatter(sudtAmount)} ${tx.sudtInfo.sUDT.symbol}`
110-
}
111-
} else {
112-
// normal tx
113-
name = walletName
114-
amount = `${shannonToCKBFormatter(tx.value, true)} CKB`
115-
if (tx.type === 'create' || tx.type === 'destroy') {
116-
if (tx.assetAccountType === 'CKB') {
117-
typeLabel = `${t(`history.${tx.type}`, { name: 'CKB' })}`
118-
} else {
119-
typeLabel = `${t(`overview.${tx.type}`, { name: 'Unknown' })}`
120-
}
121-
} else {
122-
typeLabel = tx.nervosDao ? 'Nervos DAO' : t(`history.${tx.type}`)
123-
}
124-
}
125-
126-
let indicator = <Pending />
127-
switch (tx.status) {
128-
case 'success': {
129-
indicator = <Success />
130-
break
131-
}
132-
case 'failed': {
133-
indicator = <Failure />
134-
break
135-
}
136-
default: {
137-
// ignore
138-
}
139-
}
140-
141-
return {
142-
name,
143-
amount,
144-
typeLabel,
145-
sudtAmount,
146-
showWithUANFormatter,
147-
indicator,
68+
return tx.sudtInfo.sUDT.tokenName || DEFAULT_SUDT_FIELDS.tokenName
14869
}
70+
return walletName ?? '--'
14971
}
15072

15173
const handleExpandClick = (idx: number | null) => {
@@ -158,7 +80,7 @@ const History = () => {
15880
dataIndex: 'name',
15981
minWidth: '110px',
16082
render(_, __, item) {
161-
const { name } = handleTransactionInfo(item)
83+
const name = getTxName(item)
16284
return name.length > 8 ? (
16385
<Tooltip tip={<>{name}</>} isTriggerNextToChild showTriangle>
16486
<div className={styles.avatarBox}>
@@ -186,20 +108,26 @@ const History = () => {
186108
title: t('history.table.type'),
187109
dataIndex: 'type',
188110
align: 'left',
189-
minWidth: '100px',
111+
minWidth: '120px',
190112
render: (_, __, item) => {
191-
const { typeLabel } = handleTransactionInfo(item)
192-
return typeLabel
113+
return (
114+
<TransactionType
115+
item={item}
116+
cacheTipBlockNumber={cacheTipBlockNumber}
117+
bestKnownBlockNumber={bestKnownBlockNumber}
118+
tokenNameClassName={styles.tokenName}
119+
/>
120+
)
193121
},
194122
},
195123
{
196124
title: t('history.table.amount'),
197125
dataIndex: 'amount',
198126
align: 'left',
199127
isBalance: true,
200-
minWidth: '220px',
128+
minWidth: '200px',
201129
render(_, __, item, show) {
202-
return <FormattedTokenAmount item={item} show={show} />
130+
return <FormattedTokenAmount item={item} show={show} symbolClassName={styles.symbol} />
203131
},
204132
},
205133
{

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

Lines changed: 3 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React, { useCallback, useMemo, useEffect, useState } from 'react'
22
import { Link, useNavigate } from 'react-router-dom'
3-
import { Trans, useTranslation } from 'react-i18next'
3+
import { useTranslation } from 'react-i18next'
44
import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
55

66
import { shannonToCKBFormatter, uniformTimeFormatter, backToTop, CONSTANTS, RoutePath, useFirstLoadWallet } from 'utils'
77

8-
import { UANTokenName } from 'components/UANDisplay'
98
import PageContainer from 'components/PageContainer'
109
import TransactionStatusWrap from 'components/TransactionStatusWrap'
1110
import FormattedTokenAmount from 'components/FormattedTokenAmount'
@@ -17,39 +16,11 @@ import { ArrowNext, EyesClose, EyesOpen, OverviewSend, OverviewReceive, Addressb
1716
import BalanceSyncIcon from 'components/BalanceSyncingIcon'
1817
import CopyZone from 'widgets/CopyZone'
1918
import { HIDE_BALANCE } from 'utils/const'
19+
import TransactionType from 'components/TransactionType'
2020
import styles from './overview.module.scss'
2121

2222
const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS
2323

24-
const genTypeLabel = (
25-
type: 'send' | 'receive' | 'create' | 'destroy',
26-
status: 'pending' | 'confirming' | 'success' | 'failed'
27-
) => {
28-
switch (type) {
29-
case 'send': {
30-
if (status === 'failed') {
31-
return 'sent'
32-
}
33-
if (status === 'pending' || status === 'confirming') {
34-
return 'sending'
35-
}
36-
return 'sent'
37-
}
38-
case 'receive': {
39-
if (status === 'failed') {
40-
return 'received'
41-
}
42-
if (status === 'pending' || status === 'confirming') {
43-
return 'receiving'
44-
}
45-
return 'received'
46-
}
47-
default: {
48-
return type
49-
}
50-
}
51-
}
52-
5324
const TransactionStatus = ({
5425
item,
5526
cacheTipBlockNumber,
@@ -78,72 +49,6 @@ const TransactionStatus = ({
7849
)
7950
}
8051

81-
const TracsactionType = ({
82-
item,
83-
cacheTipBlockNumber,
84-
bestKnownBlockNumber,
85-
}: {
86-
item: Omit<State.Transaction, 'status'> & { status: State.Transaction['status'] | 'confirming' }
87-
cacheTipBlockNumber: number
88-
bestKnownBlockNumber: number
89-
}) => {
90-
const [t] = useTranslation()
91-
let typeLabel: string = '--'
92-
let { status } = item
93-
let typeTransProps: {
94-
i18nKey: string
95-
components: JSX.Element[]
96-
} = {
97-
i18nKey: '',
98-
components: [],
99-
}
100-
101-
if (item.blockNumber !== undefined) {
102-
const confirmationCount =
103-
item.blockNumber === null || item.status === 'failed'
104-
? 0
105-
: 1 + Math.max(cacheTipBlockNumber, bestKnownBlockNumber) - +item.blockNumber
106-
107-
if (status === 'success' && confirmationCount < CONFIRMATION_THRESHOLD) {
108-
status = 'confirming'
109-
}
110-
if (item.nftInfo) {
111-
// NFT
112-
const { type } = item.nftInfo
113-
typeLabel = `${t(`overview.${genTypeLabel(type, status)}`)}`
114-
} else if (item.sudtInfo?.sUDT) {
115-
// Asset Account
116-
if (['create', 'destroy'].includes(item.type)) {
117-
// create/destroy an account
118-
typeTransProps = {
119-
i18nKey: `overview.${item.type}SUDT`,
120-
components: [
121-
<UANTokenName
122-
name={item.sudtInfo.sUDT.tokenName}
123-
symbol={item.sudtInfo.sUDT.symbol}
124-
className={styles.tokenName}
125-
/>,
126-
],
127-
}
128-
} else {
129-
// send/receive to/from an account
130-
const type = +item.sudtInfo.amount <= 0 ? 'send' : 'receive'
131-
typeLabel = `UDT ${t(`overview.${genTypeLabel(type, status)}`)}`
132-
}
133-
} else if (item.type === 'create' || item.type === 'destroy') {
134-
// normal tx
135-
if (item.assetAccountType === 'CKB') {
136-
typeLabel = `${t(`overview.${item.type}`, { name: 'CKB' })}`
137-
} else {
138-
typeLabel = `${t(`overview.${item.type}`, { name: 'Unknown' })}`
139-
}
140-
} else {
141-
typeLabel = item.nervosDao ? 'Nervos DAO' : t(`overview.${genTypeLabel(item.type, status)}`)
142-
}
143-
}
144-
return typeTransProps.i18nKey ? <Trans {...typeTransProps} /> : <>{typeLabel}</>
145-
}
146-
14752
const Overview = () => {
14853
const {
14954
app: { pageNotice },
@@ -269,7 +174,7 @@ const Overview = () => {
269174
minWidth: '250px',
270175
render(_, __, item) {
271176
return (
272-
<TracsactionType
177+
<TransactionType
273178
item={item}
274179
cacheTipBlockNumber={cacheTipBlockNumber}
275180
bestKnownBlockNumber={bestKnownBlockNumber}

0 commit comments

Comments
 (0)