From 58f4c1058711bae9dc5a96f7f53188c99ea251c9 Mon Sep 17 00:00:00 2001 From: Keith Date: Tue, 10 Sep 2024 13:14:34 +0900 Subject: [PATCH] feat: better navigation from cell info 1. add link to block where the cell is 2. add link to transaction where the cell is --- src/components/Cell/CellInfo/index.tsx | 19 ++++++ .../Cell/CellInfo/styles.module.scss | 10 ++++ src/locales/en.json | 7 ++- src/locales/zh.json | 7 ++- src/pages/Address/Cells.tsx | 58 ++++++++++++++++++- src/pages/Address/block.svg | 5 ++ src/pages/Address/cells.module.scss | 37 ++++++++++++ src/pages/Address/pin.svg | 11 ++++ 8 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 src/pages/Address/block.svg create mode 100644 src/pages/Address/pin.svg diff --git a/src/components/Cell/CellInfo/index.tsx b/src/components/Cell/CellInfo/index.tsx index 04fc03242..5b764fcd5 100644 --- a/src/components/Cell/CellInfo/index.tsx +++ b/src/components/Cell/CellInfo/index.tsx @@ -460,6 +460,16 @@ export default ({ cell: entryCell, onClose }: CellInfoProps) => { > + + + +
{renderBindIcon()}
@@ -479,6 +489,15 @@ export default ({ cell: entryCell, onClose }: CellInfoProps) => { > + + +
{renderBindIcon()}
diff --git a/src/components/Cell/CellInfo/styles.module.scss b/src/components/Cell/CellInfo/styles.module.scss index 168aeba99..0c9b4ed87 100644 --- a/src/components/Cell/CellInfo/styles.module.scss +++ b/src/components/Cell/CellInfo/styles.module.scss @@ -361,3 +361,13 @@ } } } + +.visitTx { + display: flex; + align-items: center; + margin-left: 4px; + + path { + fill: #999; + } +} diff --git a/src/locales/en.json b/src/locales/en.json index 94489d894..32e9594fe 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -403,7 +403,11 @@ "binding": "\"Binding\": The UTXO corresponding to the current Cell has been consumed. If the \"Binding\" status persists for too long, please check the CKB transaction status under the BTC address that consumed this UTXO.", "bound": "\"Bound\": \"Bound\" means that the Owner of the Cell is a live BTC UTXO, and the Cell has been bound to a specific BTC address.", "unbound": "\"Abnormal Unbind\" status: \"Abnormal Unbind\" means that the Owner of the Cell is a consumed or non-existent BTC UTXO, making the Cell ownerless and unusable by any address." - } + }, + "out_point": "OutPoint", + "in_block": "In Block", + "time": "Time", + "capacity": "Capacity" }, "address": { "address": "Address", @@ -508,6 +512,7 @@ "transaction_fee": "Transaction Fee", "fee_rate": "Fee Rate", "cell_deps": "CellDeps", + "out_point": "OutPoint", "out_point_tx_hash": "OutPoint.TxHash", "out_point_index": "OutPoint.Index", "dep_type": "DepType", diff --git a/src/locales/zh.json b/src/locales/zh.json index a6c524008..185e42e97 100644 --- a/src/locales/zh.json +++ b/src/locales/zh.json @@ -174,7 +174,11 @@ "binding": "“待绑定”：当前Cell 对应的UTXO 已被消耗。如果“待绑定”持续时间过长，请检查消耗 此UTXO 对应BTC地址下的CKB交易状态。", "bound": "“已绑定”： “已绑定” 意味着 Cell 的 Owner 是一个live 的 BTC UTXO, 该Cell 已被绑定至某个BTC地址。", "unbound": "“异常解绑”状态：“异常解绑”意味着 Cell 的 Owner 是一个已经被消费掉的 BTC UTXO 或不存在, 该Cell 变成了一个无主Cell，没有任何地址可以使用。" - } + }, + "out_point": "位置", + "in_block": "位于区块", + "time": "时间", + "capacity": "容量" }, "navbar": { "wallet": "钱包", @@ -508,6 +512,7 @@ "transaction_fee": "交易费", "fee_rate": "费率", "cell_deps": "CellDeps", + "out_point": "OutPoint", "out_point_tx_hash": "OutPoint.TxHash", "out_point_index": "OutPoint.Index", "dep_type": "DepType", diff --git a/src/pages/Address/Cells.tsx b/src/pages/Address/Cells.tsx index 4406435ce..5cdb8d8c5 100644 --- a/src/pages/Address/Cells.tsx +++ b/src/pages/Address/Cells.tsx @@ -3,6 +3,7 @@ import { TFunction, useTranslation } from 'react-i18next' import BigNumber from 'bignumber.js' import { useInfiniteQuery } from '@tanstack/react-query' import { Tooltip } from 'antd' +import { OpenInNewWindowIcon, SizeIcon, TimerIcon } from '@radix-ui/react-icons' import { explorerService, LiveCell } from '../../services/ExplorerService' import SUDTTokenIcon from '../../assets/sudt_token.png' import CKBTokenIcon from './ckb_token_icon.png' @@ -15,6 +16,8 @@ import { ReactComponent as TimeDownIcon } from '../../assets/time_down.svg' import { ReactComponent as TimeUpIcon } from '../../assets/time_up.svg' import { ReactComponent as ListIcon } from './list.svg' import { ReactComponent as GridIcon } from './grid.svg' +import { ReactComponent as BlockIcon } from './block.svg' +import { ReactComponent as PinIcon } from './pin.svg' import { parseUDTAmount } from '../../utils/number' import { shannonToCkb } from '../../utils/util' import { parseSimpleDateNoSecond } from '../../utils/date' @@ -235,7 +238,7 @@ const getCellDetails = (cell: LiveCell, t: TFunction) => { const outPointStr = `${cell.txHash.slice(0, 8)}...${cell.txHash.slice(-8)}#${cell.cellIndex}` const parsedBlockCreateAt = parseSimpleDateNoSecond(cell.blockTimestamp) - const title = `${cell.cellId}: ${ckb} ` + const title = `${cell.blockNumber}: ${ckb} ` const cellInfo = { ...cell, id: Number(cell.cellId), @@ -261,6 +264,57 @@ const getCellDetails = (cell: LiveCell, t: TFunction) => { } } +const HeaderTooltip: FC<{ cell: LiveCell }> = ({ cell }) => { + const [t] = useTranslation() + + const ckb = new BigNumber(shannonToCkb(+cell.capacity)).toFormat() + const time = parseSimpleDateNoSecond(cell.blockTimestamp) + return ( +
+
+
+ {t(`cell.in_block`)} +
+
+ {cell.blockNumber} + + + +
+
+
+
+ {t('cell.out_point')} +
+
+ {`${cell.txHash.slice(0, 4)}...${cell.txHash.slice(-4)}#${cell.cellIndex}`} + + + +
+
+
+
+ + {t('cell.capacity')} +
+
{`${ckb} CKB`}
+
+
+
+ {t('cell.time')} +
+
{time}
+
+
+ ) +} + const Cell: FC<{ cell: LiveCell }> = ({ cell }) => { const { t } = useTranslation() @@ -272,7 +326,7 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => { return (
  • - + }>
    {title} CKB ({parsedBlockCreateAt}) diff --git a/src/pages/Address/block.svg b/src/pages/Address/block.svg new file mode 100644 index 000000000..27b103b40 --- /dev/null +++ b/src/pages/Address/block.svg @@ -0,0 +1,5 @@ + + + diff --git a/src/pages/Address/cells.module.scss b/src/pages/Address/cells.module.scss index d8f95329b..8c6ff20a4 100644 --- a/src/pages/Address/cells.module.scss +++ b/src/pages/Address/cells.module.scss @@ -208,3 +208,40 @@ border: none; } } + +.cellHeader { + display: flex; + flex-direction: column; + + a { + display: flex; + align-items: center; + } + + dl, + dt, + dd { + display: flex; + align-items: center; + gap: 4px; + margin: 0; + } + + dt { + margin-right: 4px; + + svg { + width: 18px; + } + } + + dt::after { + content: ':'; + } + + .blockIcon { + path { + fill: #fff; + } + } +} diff --git a/src/pages/Address/pin.svg b/src/pages/Address/pin.svg new file mode 100644 index 000000000..7c04579b5 --- /dev/null +++ b/src/pages/Address/pin.svg @@ -0,0 +1,11 @@ + + + + +