Skip to content

Commit

Permalink
refactor: Use comm component for history's and overview's type field. (…
Browse files Browse the repository at this point in the history 
…#2876)
  • Loading branch information
@yanguoyu
yanguoyu authored Oct 17, 2023
1 parent 0c48a06 commit 3b733b0
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 197 deletions.
15 changes: 10 additions & 5 deletions packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<FormattedTokenAmountProps, 'isNeedCopy'> & {
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 ? (
<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} />
<UANTonkenSymbol
className={symbolClassName}
name={item.sudtInfo!.sUDT.tokenName}
symbol={item.sudtInfo!.sUDT.symbol}
/>
</div>
) : (
<span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
)
}

export const FormattedTokenAmount = ({ item, show }: FormattedTokenAmountProps) => {
export const FormattedTokenAmount = ({ item, show, symbolClassName }: FormattedTokenAmountProps) => {
let amount = '--'
let sudtAmount = ''
let copyText = amount
Expand All @@ -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 ? (
<CopyZone content={copyText}>
Expand Down
8 changes: 8 additions & 0 deletions packages/neuron-ui/src/components/History/history.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
110 changes: 19 additions & 91 deletions packages/neuron-ui/src/components/History/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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 = (
<Trans
i18nKey={`history.${tx.type}SUDT`}
components={[<UANTokenName name={tx.sudtInfo.sUDT.tokenName} symbol={tx.sudtInfo.sUDT.symbol} />]}
/>
)
} 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 = <Pending />
switch (tx.status) {
case 'success': {
indicator = <Success />
break
}
case 'failed': {
indicator = <Failure />
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) => {
Expand All @@ -158,7 +80,7 @@ const History = () => {
dataIndex: 'name',
minWidth: '110px',
render(_, __, item) {
const { name } = handleTransactionInfo(item)
const name = getTxName(item)
return name.length > 8 ? (
<Tooltip tip={<>{name}</>} isTriggerNextToChild showTriangle>
<div className={styles.avatarBox}>
Expand Down Expand Up @@ -186,20 +108,26 @@ const History = () => {
title: t('history.table.type'),
dataIndex: 'type',
align: 'left',
minWidth: '100px',
minWidth: '120px',
render: (_, __, item) => {
const { typeLabel } = handleTransactionInfo(item)
return typeLabel
return (
<TransactionType
item={item}
cacheTipBlockNumber={cacheTipBlockNumber}
bestKnownBlockNumber={bestKnownBlockNumber}
tokenNameClassName={styles.tokenName}
/>
)
},
},
{
title: t('history.table.amount'),
dataIndex: 'amount',
align: 'left',
isBalance: true,
minWidth: '220px',
minWidth: '200px',
render(_, __, item, show) {
return <FormattedTokenAmount item={item} show={show} />
return <FormattedTokenAmount item={item} show={show} symbolClassName={styles.symbol} />
},
},
{
Expand Down
101 changes: 3 additions & 98 deletions packages/neuron-ui/src/components/Overview/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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,
Expand Down Expand Up @@ -78,72 +49,6 @@ const TransactionStatus = ({
)
}

const TracsactionType = ({
item,
cacheTipBlockNumber,
bestKnownBlockNumber,
}: {
item: Omit<State.Transaction, 'status'> & { 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: [
<UANTokenName
name={item.sudtInfo.sUDT.tokenName}
symbol={item.sudtInfo.sUDT.symbol}
className={styles.tokenName}
/>,
],
}
} 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 ? <Trans {...typeTransProps} /> : <>{typeLabel}</>
}

const Overview = () => {
const {
app: { pageNotice },
Expand Down Expand Up @@ -269,7 +174,7 @@ const Overview = () => {
minWidth: '250px',
render(_, __, item) {
return (
<TracsactionType
<TransactionType
item={item}
cacheTipBlockNumber={cacheTipBlockNumber}
bestKnownBlockNumber={bestKnownBlockNumber}
Expand Down
Loading

1 comment on commit 3b733b0

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Packaging for test is done in 6543809857

Please sign in to comment.