feat(live_cell): add live cell to address card

src/locales/en.json

@@ -368,6 +368,7 @@
       "hash_type": "Hash Type",
       "overview": "Overview",
       "user_defined_token": "Simple User Defined Token",
+      "live_cell": "Live Cell(s)",
       "inscription": "Inscription",
       "confirmation": "Confirmation",
       "confirmations": "Confirmations",

src/locales/zh.json

@@ -369,6 +369,7 @@
       "overview": "概览",
       "user_defined_token": "Simple User Defined Token",
       "inscription": "铭文",
+      "live_cell": "Live Cell(s)",
       "confirmation": "确认区块",
       "confirmations": "确认区块",
       "unable_decode_address": "地址解析失败",

src/models/Address/UDTAccount.ts

@@ -1,3 +1,5 @@
+import { OutPoint, Script } from '../Script'
+
 export interface SUDT {
   symbol: string
   decimal: string
@@ -59,4 +61,15 @@ export interface OmigaInscription {
   udtType: 'omiga_inscription'
 }
 
+export interface LiveCell {
+  outpoint: OutPoint
+  amount: string
+  capacity: string
+  time: string
+  block: string
+  type: Script
+  cellType: string
+  uan?: string
+}
+
 export type UDTAccount = SUDT | MNFT | NRC721 | CoTA | Spore | OmigaInscription

src/models/Script/index.ts

@@ -3,3 +3,8 @@ export interface Script {
   args: string
   hashType: string
 }
+
+export interface OutPoint {
+  txHash: string
+  index: string
+}

src/pages/Address/AddressAssetComp.tsx

@@ -3,13 +3,14 @@ import { ReactEventHandler, useEffect, useState } from 'react'
 import { Base64 } from 'js-base64'
 import { hexToBytes } from '@nervosnetwork/ckb-sdk-utils'
 import axios, { AxiosResponse } from 'axios'
-import { AddressUDTItemPanel } from './styled'
-import { CoTA, OmigaInscription, MNFT, NRC721, SUDT, Spore } from '../../models/Address'
+import { AddressUDTItemPanel, LiveCellTable } from './styled'
+import { CoTA, OmigaInscription, MNFT, NRC721, SUDT, Spore, LiveCell } from '../../models/Address'
 import SUDTTokenIcon from '../../assets/sudt_token.png'
-import { parseUDTAmount } from '../../utils/number'
+import { parseCKBAmount, parseUDTAmount } from '../../utils/number'
 import { parseSporeCellData } from '../../utils/spore'
 import { handleNftImgError, patchMibaoImg } from '../../utils/util'
 import { sliceNftName } from '../../utils/string'
+import CKBTokenIcon from './ckb_token_icon.png'
 
 export const AddressAssetComp = ({
   href,
@@ -208,3 +209,70 @@ export const AddressOmigaInscriptionComp = ({ account }: { account: OmigaInscrip
     />
   )
 }
+
+export const AddressLiveCellComp = ({ account }: { account: LiveCell }) => {
+  const { amount, capacity, time, uan, outpoint } = account
+  return (
+    <AddressAssetComp
+      icon={{
+        url: CKBTokenIcon,
+        errorHandler: handleNftImgError,
+      }}
+      name={uan ?? 'CKB Cell'}
+      property={uan ? amount : capacity}
+      udtLabel={`${outpoint.txHash.slice(0, 3)}...${outpoint.txHash.slice(63, 65)}:${outpoint.index} (${new Date(
+        parseInt(time, 10),
+      )
+        .toISOString()
+        .slice(0, 19)
+        .replace('T', ' ')})`}
+    />
+  )
+}
+
+export const AddressLiveCellTableComp = ({ liveCells }: { liveCells: LiveCell[] }) => {
+  const liveCellColumns = [
+    { align: 'center' as const, title: 'Date', dataIndex: 'date', key: 'date' },
+    { align: 'center' as const, title: 'Block #', dataIndex: 'block', key: 'block' },
+    { align: 'center' as const, title: 'OutPoint', dataIndex: 'outpoint', key: 'outpoint' },
+    { align: 'center' as const, title: 'UID', dataIndex: 'uid', key: 'uid' },
+    { align: 'center' as const, title: 'Capacity(CKB)', dataIndex: 'capacity', key: 'capacity' },
+    { align: 'center' as const, title: 'Type(i)', dataIndex: 'type', key: 'type' },
+  ]
+  return (
+    <LiveCellTable
+      scroll={{ x: 2100 }}
+      pagination={false}
+      bordered
+      columns={liveCellColumns}
+      dataSource={liveCells.map(liveCell => {
+        const cellType = () => {
+          switch (liveCell.cellType) {
+            case 'sudt':
+              return 'UDT'
+            case 'spore_cell':
+            case 'm_nft_token':
+            case 'cota':
+            case 'nrc_721_token':
+              return 'NFT'
+            case 'omiga_inscription':
+            case 'omiga_inscription_info':
+              return 'INSCRIPTION'
+            case 'normal':
+              return 'CKB'
+            default:
+              return 'UNKNOWN'
+          }
+        }
+        return {
+          date: new Date(parseInt(liveCell.time, 10)).toISOString().slice(0, 19).replace('T', ' ').replace('Z', ' '),
+          block: liveCell.block,
+          outpoint: `${liveCell.outpoint.txHash}:${liveCell.outpoint.index}`,
+          uid: liveCell.outpoint.txHash,
+          capacity: parseCKBAmount(liveCell.capacity),
+          type: cellType(),
+        }
+      })}
+    />
+  )
+}