Skip to content

Commit

Permalink
fix: issues for history page (#2721)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexsupa597
alexsupa597 authored Jun 30, 2023
1 parent b4f7de2 commit 2e9681e
Show file tree
Hide file tree
Showing 9 changed files with 164 additions and 105 deletions.
67 changes: 31 additions & 36 deletions packages/neuron-ui/src/components/History/RowExtend.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
import { useDispatch } from 'states'
import { openExternal } from 'services/remote'

import { getExplorerUrl, localNumberFormatter, RoutePath, useLocalDescription } from 'utils'
import { clsx, getExplorerUrl, localNumberFormatter, RoutePath, useLocalDescription } from 'utils'
import { TableProps } from 'widgets/Table'
import CopyZone from 'widgets/CopyZone'
import { useNavigate } from 'react-router-dom'
Expand Down Expand Up @@ -64,47 +64,42 @@ const RowExtend = ({ column, columns, isMainnet, id, bestBlockNumber }: RowExten
<td colSpan={columns.length} className={styles.extendWrapper} style={{ paddingLeft: `${columns?.[0]?.width}` }}>
<div className={styles.extendBox} style={{ gridColumn: `${2 / columns.length}` }}>
<div className={styles.infoBox}>
<div className={styles.infoBlock}>
<div className={clsx(styles.infoBlock, styles.confirmCount)}>
<div className={styles.infoBlockTitle}>{t('history.confirmations')}</div>
<div>{confirmationsLabel}</div>
</div>

<div className={styles.infoBlock}>
<div className={styles.infoBlockTitle}>{t('history.description')}</div>
<div>
<Tooltip
placement="left-bottom"
tip={
<div className={styles.descTipRoot}>
<div className={styles.autoHeight}>
<textarea
className={styles.descInput}
data-is-selected={isSelected}
data-description-key={column.hash}
value={isSelected ? localDescription.description : description}
onChange={onDescriptionChange}
onKeyDown={onDescriptionPress}
/>

<Edit
data-description-key={column.hash}
data-description-value={column.description}
onClick={onDescriptionSelected}
/>
</div>
<div className={styles.hidden}>
{isSelected ? localDescription.description : description}
<Edit />
</div>
<Tooltip
tip={
<div className={styles.descTipRoot}>
<div className={styles.autoHeight}>
<textarea
className={styles.descInput}
data-is-selected={isSelected}
data-description-key={column.hash}
value={isSelected ? localDescription.description : description}
onChange={onDescriptionChange}
onKeyDown={onDescriptionPress}
/>
<Edit
data-description-key={column.hash}
data-description-value={column.description}
onClick={onDescriptionSelected}
/>
</div>
<div className={styles.hidden}>
{isSelected ? localDescription.description : description}
<Edit />
</div>
}
showTriangle
isTriggerNextToChild
className={styles.description}
>
<span className={styles.descText}>{description || t('addresses.default-description')}</span>
</Tooltip>
</div>
</div>
}
showTriangle
isTriggerNextToChild
className={styles.description}
>
<div className={styles.descText}>{description || t('addresses.default-description')}</div>
</Tooltip>
</div>
</div>

Expand Down
17 changes: 15 additions & 2 deletions packages/neuron-ui/src/components/History/history.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '../../styles/mixin.scss';
@import '../../styles/theme.scss';
@import '../../styles/animation.scss';

$history-info-title-color: #999;
$history-button-color: #8da394;
Expand Down Expand Up @@ -60,11 +61,9 @@ body {

.infoBox {
display: flex;
margin-bottom: 16px;
}

.infoBlock {
flex: 1;
&Title {
margin-bottom: 8px;
color: $history-info-title-color;
Expand All @@ -76,7 +75,15 @@ body {
gap: 10px;
font-family: 'JetBrains Mono';
}
.descText {
padding-bottom: 16px;
word-break: break-all;
}
}
.confirmCount {
min-width: 50%;
}

.infoOperationBox {
display: flex;
margin-top: 20px;
Expand Down Expand Up @@ -121,6 +128,12 @@ body {
filter: invert(1);
}
}

.confirm {
@include infinite-rotation;
margin-left: 4px;
}

.arrow {
cursor: pointer;
transition: transform 0.1s ease-in-out;
Expand Down
50 changes: 35 additions & 15 deletions packages/neuron-ui/src/components/History/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import SUDTAvatar from 'widgets/SUDTAvatar'
import Button from 'widgets/Button'
import Table, { TableProps } from 'widgets/Table'
import TextField from 'widgets/TextField'
import { DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'
import CopyZone from 'widgets/CopyZone'
import { Confirming, DownloadIcon, SearchIcon, ArrowOpenRightIcon } from 'widgets/Icons/icon'

import PageContainer from 'components/PageContainer'
import { getDisplayName, isTonkenInfoStandardUAN, UANTonkenSymbol } from 'components/UANDisplay'
Expand All @@ -26,6 +27,7 @@ import {
sUDTAmountFormatter,
sudtValueToAmount,
shannonToCKBFormatter,
complexNumberToPureNumber,
} from 'utils'
import { onEnter } from 'utils/inputDevice'
import { CONFIRMATION_THRESHOLD, DEFAULT_SUDT_FIELDS, HIDE_BALANCE } from 'utils/const'
Expand Down Expand Up @@ -66,6 +68,8 @@ const History = () => {
})
}, [id, setIsExporting])

const [expandedRow, setExpandedRow] = useState<number | null>(null)

const bestBlockNumber = Math.max(cacheTipBlockNumber, bestKnownBlockNumber)

const handleTransactionInfo = (tx: State.Transaction) => {
Expand Down Expand Up @@ -138,6 +142,10 @@ const History = () => {
}
}

const handleExpandClick = (idx: number | null) => {
setExpandedRow(prevIndex => (prevIndex === idx ? null : idx))
}

const columns: TableProps<State.Transaction>['columns'] = [
{
title: t('history.table.name'),
Expand Down Expand Up @@ -194,17 +202,22 @@ const History = () => {
isReceive = !amount.includes('-')
}
}
return sudtAmount ? (
<>
{show ? sudtAmount : HIDE_BALANCE}&nbsp;
<UANTonkenSymbol
className={styles.symbol}
name={item.sudtInfo!.sUDT.tokenName}
symbol={item.sudtInfo!.sUDT.symbol}
/>
</>
) : (
<span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>

return (
<CopyZone content={`${complexNumberToPureNumber(sudtAmount && sudtAmount !== '' ? sudtAmount : amount)}`}>
{sudtAmount ? (
<>
{show ? sudtAmount : HIDE_BALANCE}&nbsp;
<UANTonkenSymbol
className={styles.symbol}
name={item.sudtInfo!.sUDT.tokenName}
symbol={item.sudtInfo!.sUDT.symbol}
/>
</>
) : (
<span className={show && isReceive ? styles.isReceive : ''}>{amount}</span>
)}
</CopyZone>
)
},
},
Expand All @@ -225,15 +238,21 @@ const History = () => {
status = 'confirming'
}

return t(`history.${status}`)
return status === 'confirming' ? <Confirming className={styles.confirm} /> : t(`history.${status}`)
},
},
{
title: t('history.table.operation'),
dataIndex: 'operation',
align: 'left',
render(_, idx, ___, ____, expandedRow) {
return <ArrowOpenRightIcon className={styles.arrow} data-is-open={expandedRow === idx} />
render(_, idx, ___, ____) {
return (
<ArrowOpenRightIcon
className={styles.arrow}
data-is-open={expandedRow === idx}
onClick={() => handleExpandClick(idx)}
/>
)
},
},
]
Expand Down Expand Up @@ -283,6 +302,7 @@ const History = () => {
bestBlockNumber={bestBlockNumber}
/>
)}
expandedRow={expandedRow}
/>

<div className={styles.container}>
Expand Down
18 changes: 3 additions & 15 deletions packages/neuron-ui/src/components/HistoryDetailPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,13 +167,7 @@ const HistoryDetailPage = () => {
title: string
dataIndex: string
isBalance?: boolean
render?: (
v: any,
idx: number,
item: InputOrOutputType,
showBalance: boolean,
expandedRow: number | null
) => React.ReactNode
render?: (v: any, idx: number, item: InputOrOutputType, showBalance: boolean) => React.ReactNode
width?: string
align?: 'left' | 'right' | 'center'
}[] = [
Expand All @@ -194,7 +188,7 @@ const HistoryDetailPage = () => {
const { address } = handleListData(item)
return (
<>
<CopyZone content={address} name={t('history.copy-address')} className={styles.address}>
<CopyZone content={address} className={styles.address}>
{`${address.slice(0, 20)}...${address.slice(-20)}`}
</CopyZone>
<ScriptTag isMainnet={isMainnet} script={item.lock} onClick={() => setLockInfo(item.lock)} />
Expand All @@ -209,13 +203,7 @@ const HistoryDetailPage = () => {
isBalance: true,
render(_, __, item, show: boolean) {
const { capacity } = handleListData(item)
return show ? (
<CopyZone content={capacity.replace(/,/g, '')} name={t('history.copy-balance')}>
{`${capacity} CKB`}
</CopyZone>
) : (
HIDE_BALANCE
)
return show ? <CopyZone content={capacity.replace(/,/g, '')}>{`${capacity} CKB`}</CopyZone> : HIDE_BALANCE
},
},
]
Expand Down
41 changes: 11 additions & 30 deletions packages/neuron-ui/src/components/LockInfoDialog/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { useTranslation } from 'react-i18next'
import React, { useState, useRef } from 'react'
import React, { useRef } from 'react'
import { bech32Address, AddressPrefix } from '@nervosnetwork/ckb-sdk-utils'
import CopyZone from 'widgets/CopyZone'
import Dialog from 'widgets/Dialog'
import { ReactComponent as Copy } from 'widgets/Icons/TinyCopy.svg'
import { ReactComponent as Check } from 'widgets/Icons/Check.svg'
import { useDialog } from 'utils'
import { onEnter } from 'utils/inputDevice'
import getLockSupportShortAddress from '../../utils/getLockSupportShortAddress'

import styles from './lockInfoDialog.module.scss'
Expand Down Expand Up @@ -40,7 +37,7 @@ const ShortAddr = ({ lockScript, isMainnet }: { lockScript: CKBComponents.Script
{t('transaction.deprecated-address-format')}
</div>
<div className={styles.shortAddr}>
<CopyZone content={shortAddr} name={t('history.copy-address')}>
<CopyZone content={shortAddr}>
<span>{shortAddr}</span>
</CopyZone>
</div>
Expand All @@ -50,12 +47,9 @@ const ShortAddr = ({ lockScript, isMainnet }: { lockScript: CKBComponents.Script

const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps) => {
const [t] = useTranslation()
const [copied, setCopied] = useState(false)
const dialogRef = useRef<HTMLDialogElement | null>(null)
useDialog({ show: !!lockInfo, dialogRef, onClose: onDismiss })

const timer = useRef<ReturnType<typeof setTimeout>>()

if (!lockInfo) {
return null
}
Expand All @@ -66,16 +60,6 @@ const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps)
"args": "${lockInfo.args}"
}`

const handleCopy = () => {
setCopied(true)
window.navigator.clipboard.writeText(rawLock)

clearTimeout(timer.current!)
timer.current = setTimeout(() => {
setCopied(false)
}, 1000)
}

return (
<Dialog
show={Boolean(lockInfo)}
Expand All @@ -84,20 +68,17 @@ const LockInfoDialog = ({ lockInfo, isMainnet, onDismiss }: LockInfoDialogProps)
onCancel={onDismiss}
showFooter={false}
>
<>
<div className={styles.container}>
<div title={t('transaction.lock-script')} className={`${styles.title} ${styles.lockScriptTitle}`}>
{t('transaction.lock-script')}
</div>
<div className={styles.lock}>
<div className={styles.copyBtn} onClick={handleCopy} onKeyPress={onEnter(handleCopy)} role="none">
{copied ? <Check /> : <Copy />}
</div>
<div className={styles.container}>
<div title={t('transaction.lock-script')} className={`${styles.title} ${styles.lockScriptTitle}`}>
{t('transaction.lock-script')}
</div>
<div className={styles.lock}>
<CopyZone content={rawLock}>
<pre>{rawLock}</pre>
</div>
<ShortAddr isMainnet={isMainnet} lockScript={lockInfo} />
</CopyZone>
</div>
</>
<ShortAddr isMainnet={isMainnet} lockScript={lockInfo} />
</div>
</Dialog>
)
}
Expand Down
Loading

0 comments on commit 2e9681e

Please sign in to comment.