Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: Use comm component for history's and overview's type field. #2876

Merged
merged 2 commits into from
Oct 17, 2023
Merged

refactor: Use comm component for history's and overview's type field. #2876

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9bbd01f
refactor: Use comm component for history's and overview's type field.
yanguoyu Oct 16, 2023
238555a
Fix: Fix typo
yanguoyu Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions packages/neuron-ui/src/components/FormattedTokenAmount/index.tsx
View file
Open in desktop
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) => {
Keith-CY marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Open in desktop
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
Open in desktop
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