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

@@ -460,6 +460,16 @@ export default ({ cell: entryCell, onClose }: CellInfoProps) => {
                 >
                   <CopyIcon />
                 </button>
+
+                <a
+                  href={`/transaction/${cell.generatedTxHash}#${cell.cellIndex}`}
+                  title={t('transaction.out_point')}
+                  className={styles.visitTx}
+                  target="_blank"
+                  rel="opener noreferrer"
+                >
+                  <OuterLinkIcon />
+                </a>
               </div>
               <div className={styles.svgContainer}>{renderBindIcon()}</div>
             </div>
@@ -479,6 +489,15 @@ export default ({ cell: entryCell, onClose }: CellInfoProps) => {
               >
                 <CopyIcon />
               </button>
+              <a
+                href={`/transaction/${cell.generatedTxHash}#${cell.cellIndex}`}
+                title={t('transaction.out_point')}
+                className={styles.visitTx}
+                target="_blank"
+                rel="opener noreferrer"
+              >
+                <OuterLinkIcon />
+              </a>
             </div>
             <div className={styles.svgContainer}>{renderBindIcon()}</div>
             <div className={styles.cellStatusIcon} data-cell-status={cell.status ?? 'dead'}>

src/components/Cell/CellInfo/styles.module.scss

@@ -361,3 +361,13 @@
     }
   }
 }
+
+.visitTx {
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+
+  path {
+    fill: #999;
+  }
+}

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",

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",

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 (
+    <div className={styles.cellHeader}>
+      <dl>
+        <dt>
+          <BlockIcon className={styles.blockIcon} /> {t(`cell.in_block`)}
+        </dt>
+        <dd>
+          {cell.blockNumber}
+          <a href={`/block/${cell.blockNumber}`} target="_blank" rel="noopener noreferrer" title={t('cell.in_block')}>
+            <OpenInNewWindowIcon />
+          </a>
+        </dd>
+      </dl>
+      <dl>
+        <dt>
+          <PinIcon /> {t('cell.out_point')}
+        </dt>
+        <dd>
+          {`${cell.txHash.slice(0, 4)}...${cell.txHash.slice(-4)}#${cell.cellIndex}`}
+          <a
+            href={`/transaction/${cell.txHash}#${cell.cellIndex}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={t('cell.out_point')}
+          >
+            <OpenInNewWindowIcon />
+          </a>
+        </dd>
+      </dl>
+      <dl>
+        <dt>
+          <SizeIcon />
+          {t('cell.capacity')}
+        </dt>
+        <dd>{`${ckb} CKB`}</dd>
+      </dl>
+      <dl>
+        <dt>
+          <TimerIcon /> {t('cell.time')}
+        </dt>
+        <dd>{time}</dd>
+      </dl>
+    </div>
+  )
+}
+
 const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
   const { t } = useTranslation()
 
@@ -272,7 +326,7 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
   return (
     <li key={cell.txHash + cell.cellIndex} className={styles.card}>
       <TransactionCellInfo cell={cellInfo} isDefaultStyle={false}>
-        <Tooltip placement="top" title={`${title} CKB (${parsedBlockCreateAt})`}>
+        <Tooltip placement="top" title={<HeaderTooltip cell={cell} />}>
           <h5 className={styles.cellTitle}>
             <span>{title}</span>
             <span> CKB ({parsedBlockCreateAt})</span>

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;
+    }
+  }
+}