feat(live-cell): jump when click the live cell

src/pages/Address/Cells.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { Tooltip } from 'antd'
+import classNames from 'classnames'
 import { explorerService, LiveCell } from '../../services/ExplorerService'
 import SUDTTokenIcon from '../../assets/sudt_token.png'
 import CKBTokenIcon from './ckb_token_icon.png'
@@ -22,7 +23,12 @@ import { useSetToast } from '../../components/Toast'
 import { PAGE_SIZE } from '../../constants/common'
 import styles from './cells.module.scss'
 import SmallLoading from '../../components/Loading/SmallLoading'
+import { Link } from '../../components/Link'
 import { sliceNftName } from '../../utils/string'
+import SimpleModal from '../../components/Modal'
+import { TransactionCellDetailModal } from '../Transaction/TransactionCell/styled'
+import TransactionCellScript from '../Transaction/TransactionCellScript'
+import { transformLiveCellToCellBasicInfo } from '../../utils/transformer'
 
 enum Sort {
   TimeAsc = 'block_timestamp.asc',
@@ -56,6 +62,7 @@ const ATTRIBUTE_LENGTH = 18
 const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
   const setToast = useSetToast()
   const { t } = useTranslation()
+  const [showModal, setShowModal] = useState(false)
 
   const handleCopy = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
@@ -75,6 +82,7 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
   const assetType: string = cell.extraInfo?.type ?? cell.cellType
   let icon: string | React.ReactElement | null = null
   let assetName = null
+  let assetLink = null
   let attribute = null
   let detailInfo = null
 
@@ -130,6 +138,7 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
           ? parseUDTAmount(cell.extraInfo.amount, cell.extraInfo.decimal)
           : 'Unknown xUDT amount'
       detailInfo = cell.extraInfo?.amount
+      assetLink = `/xudt/${cell.typeHash}`
       break
     }
     case 'omiga_inscription': {
@@ -189,20 +198,35 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
   }
 
   return (
-    <li key={cell.txHash + cell.cellIndex} className={styles.card}>
+    <li
+      key={cell.txHash + cell.cellIndex}
+      className={classNames(styles.card, styles.pointer)}
+      onClick={() => setShowModal(true)}
+      onKeyDown={() => setShowModal(true)}
+    >
       <h5>
         <a href={link}>{title}</a>
-
         <button type="button" className={styles.copy} data-detail={JSON.stringify(outPoint)} onClick={handleCopy}>
           <CopyIcon />
         </button>
-        <span title={`${ckb} CKB`}>{`${ckb} CKB`}</span>
+        <span className={styles.pointer} title={`${ckb} CKB`}>{`${ckb} CKB`}</span>
       </h5>
       <div className={styles.content}>
         {typeof icon === 'string' ? <img src={icon} alt={assetName ?? 'sudt'} width="40" height="40" /> : null}
         {icon && typeof icon !== 'string' ? icon : null}
         <div className={styles.fields}>
-          <div className={styles.assetName}>{assetName}</div>
+          {assetLink ? (
+            <Link
+              className={styles.assetName}
+              to={assetLink}
+              onClick={(e: any) => e.stopPropagation()}
+              title={assetName}
+            >
+              {assetName}
+            </Link>
+          ) : (
+            <div className={styles.assetName}>{assetName}</div>
+          )}
           <div className={styles.attribute} title={detailInfo ?? attribute}>
             <div className={styles.attributeContent}>{attribute}</div>
             {detailInfo ? (
@@ -213,6 +237,11 @@ const Cell: FC<{ cell: LiveCell }> = ({ cell }) => {
           </div>
         </div>
       </div>
+      <SimpleModal isShow={showModal} setIsShow={setShowModal}>
+        <TransactionCellDetailModal>
+          <TransactionCellScript cell={transformLiveCellToCellBasicInfo(cell)} onClose={() => setShowModal(false)} />
+        </TransactionCellDetailModal>
+      </SimpleModal>
     </li>
   )
 }

src/pages/Address/cells.module.scss

@@ -58,6 +58,12 @@
   }
 }
 
+.pointer {
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .card {
   min-height: 86px;
   background: #fff;

src/services/ExplorerService/fetcher.ts

@@ -50,6 +50,7 @@ const v1GetUnwrappedPagedList = <T>(...args: Parameters<typeof v1GetWrapped>) =>
     assert(res.meta, 'Unexpected paged list response')
     return {
       data: res.data.map(wrapper => wrapper.attributes),
+      origin: res.data,
       ...res.meta,
     }
   })
@@ -166,14 +167,20 @@ export const apiFetcher = {
 
   // sort field, block_timestamp, capacity
   // sort type, asc, desc
-  fetchAddressLiveCells: (address: string, page: number, size: number, sort?: string) => {
-    return v1GetUnwrappedPagedList<LiveCell>(`address_live_cells/${address}`, {
+  fetchAddressLiveCells: async (address: string, page: number, size: number, sort?: string) => {
+    const res = await v1GetUnwrappedPagedList<LiveCell>(`address_live_cells/${address}`, {
       params: {
         page,
         page_size: size,
         sort,
       },
     })
+
+    return {
+      data: res.data.map((cell, index) => ({ ...cell, id: parseInt(res.origin[index].id as unknown as string, 10) })),
+      pageSize: res.pageSize,
+      total: res.total,
+    }
   },
 
   fetchTransactionsByAddress: async (

src/services/ExplorerService/types.ts

@@ -349,6 +349,7 @@ export interface Script {
 }
 
 export interface LiveCell {
+  id: number
   cellType: string
   txHash: string
   cellIndex: number

src/utils/transformer.ts

@@ -1,6 +1,6 @@
 import { Cell } from '../models/Cell'
 import { Transaction } from '../models/Transaction'
-import { RawBtcRPC } from '../services/ExplorerService'
+import { LiveCell, RawBtcRPC } from '../services/ExplorerService'
 import type { CellInScript, CKBTransactionInScript } from '../services/ExplorerService/fetcher'
 
 // TODO: move to models
@@ -47,3 +47,12 @@ export const transformToCellBasicInfo = (cell: CellInScript): CellBasicInfo => {
     isGenesisOutput: false,
   }
 }
+
+export const transformLiveCellToCellBasicInfo = (cell: LiveCell): CellBasicInfo => {
+  return {
+    id: cell.id,
+    capacity: cell.capacity,
+    occupiedCapacity: String(cell.occupiedCapacity),
+    isGenesisOutput: false,
+  }
+}