feat: optimize asset amount of channels

src/components/GraphChannelList/index.tsx

@@ -5,9 +5,8 @@ import type { FC } from 'react'
 import { Link } from 'react-router-dom'
 import { TIME_TEMPLATE } from '../../constants/common'
 import type { Fiber } from '../../services/ExplorerService/fetcher'
-import { parseNumericAbbr } from '../../utils/chart'
+import { formalizeChannelAsset } from '../../utils/fiber'
 import { localeNumberString } from '../../utils/number'
-import { shannonToCkb } from '../../utils/util'
 import styles from './index.module.scss'
 
 const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({ list, node }) => {
@@ -17,26 +16,18 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({
 
   return (
     <div className={styles.container}>
-      {list.map((channel, i) => {
+      {list.map((ch, i) => {
+        const { totalLiquidity, funding } = formalizeChannelAsset(ch)
+
         const outPoint = {
-          txHash: channel.channelOutpoint.slice(0, -8),
-          index: parseInt(channel.channelOutpoint.slice(-8), 16),
+          txHash: ch.channelOutpoint.slice(0, -8),
+          index: parseInt(ch.channelOutpoint.slice(-8), 16),
         }
 
-        const ckb = shannonToCkb(channel.capacity)
-        const amount = parseNumericAbbr(ckb)
-
-        const fundingCkb = shannonToCkb(channel.openTransactionInfo.capacity)
-        const fundingCkbAmount = parseNumericAbbr(fundingCkb)
-
-        const fundingUdtAmount = channel.openTransactionInfo.udtAmount
-          ? parseNumericAbbr(channel.openTransactionInfo.udtAmount)
-          : null
-
         const outpoint = `${outPoint.txHash}#${outPoint.index}`
 
         return (
-          <div key={channel.channelOutpoint} className={styles.channel}>
+          <div key={ch.channelOutpoint} className={styles.channel}>
             <h1>Channel #{i + 1}</h1>
             <div>
               <dl className={styles.outPoint}>
@@ -55,26 +46,23 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({
               </dl>
 
               <dl className={styles.amount}>
-                <dt>Capacity</dt>
+                <dt>Liquidity</dt>
                 <dd>
-                  <Tooltip title={`${localeNumberString(ckb)} CKB`}>
-                    <span>{`${amount} CKB`}</span>
-                  </Tooltip>
+                  <span>{totalLiquidity}</span>
                 </dd>
               </dl>
+
               <dl className={styles.funding}>
                 <dt>Source</dt>
                 <dd>
-                  {fundingUdtAmount || (
-                    <Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
-                      <span>{`${fundingCkbAmount} CKB`}</span>
-                    </Tooltip>
-                  )}
+                  <Tooltip title={`${localeNumberString(funding.value)} ${funding.symbol}`}>
+                    <span>{`${funding.amount} ${funding.symbol}`}</span>
+                  </Tooltip>
                   from
-                  <Tooltip title={channel.openTransactionInfo.address}>
-                    <Link to={`/address/${channel.openTransactionInfo.address}`} className={styles.address}>
-                      <div>{channel.openTransactionInfo.address.slice(0, -15)}</div>
-                      <div>{channel.openTransactionInfo.address.slice(-15)}</div>
+                  <Tooltip title={ch.openTransactionInfo.address}>
+                    <Link to={`/address/${ch.openTransactionInfo.address}`} className={styles.address}>
+                      <div>{ch.openTransactionInfo.address.slice(0, -15)}</div>
+                      <div>{ch.openTransactionInfo.address.slice(-15)}</div>
                     </Link>
                   </Tooltip>
                 </dd>
@@ -83,9 +71,9 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({
                 <dt>Position</dt>
                 <dd>
                   On
-                  <Tooltip title={dayjs(+channel.createdTimestamp).format(TIME_TEMPLATE)}>
-                    <Link to={`/block/${channel.openTransactionInfo.blockNumber}`}>
-                      {localeNumberString(channel.openTransactionInfo.blockNumber)}
+                  <Tooltip title={dayjs(+ch.createdTimestamp).format(TIME_TEMPLATE)}>
+                    <Link to={`/block/${ch.openTransactionInfo.blockNumber}`}>
+                      {localeNumberString(ch.openTransactionInfo.blockNumber)}
                     </Link>
                   </Tooltip>
                 </dd>
@@ -98,49 +86,49 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({
                 <div className={styles.node}>
                   <h3>
                     First Node
-                    {node ? <span>{node === channel.node1 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
+                    {node ? <span>{node === ch.node1 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
                   </h3>
                   <dl>
                     <dt>ID</dt>
                     <dd>
-                      <Tooltip title={channel.node1}>
-                        <Link to={`/fiber/graph/node/${channel.node1}`} className="monospace">
-                          <div>{`0x${channel.node1.slice(0, -8)}`}</div>
-                          <div>{channel.node1.slice(-8)}</div>
+                      <Tooltip title={ch.node1}>
+                        <Link to={`/fiber/graph/node/${ch.node1}`} className="monospace">
+                          <div>{`0x${ch.node1.slice(0, -8)}`}</div>
+                          <div>{ch.node1.slice(-8)}</div>
                         </Link>
                       </Tooltip>
-                      <button type="button" data-copy-text={channel.node1}>
+                      <button type="button" data-copy-text={ch.node1}>
                         <CopyIcon />
                       </button>
                     </dd>
                   </dl>
                   <dl>
                     <dt>Fee Rate</dt>
-                    <dd>{`${localeNumberString(channel.feeRateOfNode1)} shannon/kB`}</dd>
+                    <dd>{`${localeNumberString(ch.feeRateOfNode1)} shannon/kB`}</dd>
                   </dl>
                 </div>
                 <div className={styles.node}>
                   <h3>
                     Second Node
-                    {node ? <span>{node === channel.node2 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
+                    {node ? <span>{node === ch.node2 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
                   </h3>
                   <dl>
                     <dt>ID</dt>
                     <dd>
-                      <Tooltip title={channel.node2}>
-                        <Link to={`/fiber/graph/node/${channel.node2}`}>
-                          <div>{`0x${channel.node2.slice(0, -8)}`}</div>
-                          <div>{channel.node2.slice(-8)}</div>
+                      <Tooltip title={ch.node2}>
+                        <Link to={`/fiber/graph/node/${ch.node2}`}>
+                          <div>{`0x${ch.node2.slice(0, -8)}`}</div>
+                          <div>{ch.node2.slice(-8)}</div>
                         </Link>
                       </Tooltip>
-                      <button type="button" data-copy-text={channel.node2}>
+                      <button type="button" data-copy-text={ch.node2}>
                         <CopyIcon />
                       </button>
                     </dd>
                   </dl>
                   <dl>
                     <dt>Fee Rate</dt>
-                    <dd>{`${localeNumberString(channel.feeRateOfNode2)} shannon/kB`}</dd>
+                    <dd>{`${localeNumberString(ch.feeRateOfNode2)} shannon/kB`}</dd>
                   </dl>
                 </div>
               </div>

src/locales/en.json

@@ -1159,6 +1159,10 @@
         "offered": "Offered",
         "received": "Received"
       },
+      "action": {
+        "open": "Open",
+        "close": "Close"
+      },
       "graph": {
         "node": {
           "id": "Node ID",

src/locales/zh.json

@@ -1134,6 +1134,10 @@
         "offered": "已提供",
         "received": "已接收"
       },
+      "action": {
+        "open": "开启",
+        "close": "关闭"
+      },
       "graph": {
         "node": {
           "id": "节点 ID",

src/pages/Fiber/GraphNode/index.tsx

@@ -16,10 +16,10 @@ import { getFundingThreshold } from '../utils'
 import { shannonToCkb } from '../../../utils/util'
 import { parseNumericAbbr } from '../../../utils/chart'
 import { Link } from '../../../components/Link'
-import { localeNumberString } from '../../../utils/number'
 import { Fiber } from '../../../services/ExplorerService/fetcher'
 import { useSearchParams } from '../../../hooks'
 import { TIME_TEMPLATE } from '../../../constants/common'
+import { formalizeChannelAsset } from '../../../utils/fiber'
 
 const GraphNode = () => {
   const [t] = useTranslation()
@@ -93,7 +93,9 @@ const GraphNode = () => {
     if (!node?.fiberGraphChannels) return list
 
     node.fiberGraphChannels.forEach(c => {
-      const isUdt = !!c.openTransactionInfo.udtAmount
+      const assets = formalizeChannelAsset(c)
+
+      const isUdt = !!c.openTransactionInfo.udtInfo
       const open = {
         isOpen: true,
         isUdt,
@@ -105,9 +107,7 @@ const GraphNode = () => {
         accounts: [
           {
             address: c.openTransactionInfo.address,
-            amount:
-              c.openTransactionInfo.udtAmount ??
-              `${localeNumberString(shannonToCkb(c.openTransactionInfo.capacity))} CKB`,
+            amount: `${assets.funding.amount} ${assets.funding.symbol}`,
           },
         ],
       }
@@ -123,12 +123,11 @@ const GraphNode = () => {
               timestamp: c.closedTransactionInfo.blockTimestamp,
             },
             isUdt,
-            accounts: c.closedTransactionInfo.closeAccounts.map(acc => {
-              return {
-                amount: acc.udtAmount ?? `${localeNumberString(shannonToCkb(acc.capacity))} CKB`,
-                address: acc.address,
-              }
-            }),
+            accounts:
+              assets.close?.map(a => ({
+                address: a.addr,
+                amount: `${a.amount} ${a.symbol}`,
+              })) ?? [],
           }
         : null
       if (close) {
@@ -242,7 +241,10 @@ const GraphNode = () => {
                 </dd>
               </dl>
             </div>
-            <div data-side="right">Coming soon</div>
+            <div data-side="right">
+              <div>Total Liquidity</div>
+              <div className={styles.liquidityDistribution}>Distribution</div>
+            </div>
           </div>
         </div>
         <div className={styles.activities}>
@@ -259,7 +261,7 @@ const GraphNode = () => {
                   const account = tx.accounts[0]!
                   return (
                     <div key={key} className={styles.tx}>
-                      <div>
+                      <div title={t('fiber.action.open')}>
                         <Link1Icon />
                         at
                         <time dateTime={tx.block.timestamp.toString()}>
@@ -289,7 +291,7 @@ const GraphNode = () => {
                 const [acc1, acc2] = tx.accounts
                 return (
                   <div key={key} className={styles.tx}>
-                    <div>
+                    <div title={t('fiber.action.close')}>
                       <LinkBreak1Icon />
                       at
                       <time dateTime={tx.block.timestamp.toString()}>

src/pages/Fiber/GraphNodeList/index.tsx

@@ -61,7 +61,7 @@ const fields = [
       if (typeof v !== 'string') return v
 
       const ckb = shannonToCkb(v)
-      const amount = parseNumericAbbr(ckb)
+      const amount = parseNumericAbbr(ckb, 2)
       return (
         <Tooltip title={`${localeNumberString(ckb)} CKB`}>
           <span>{`${amount} CKB`}</span>

src/services/ExplorerService/fetcher.ts

@@ -1573,7 +1573,11 @@ export namespace Fiber {
       blockTimestamp: number
       capacity: string
       txHash: string
-      udtAmount?: string
+      udtInfo?: {
+        symbol?: string
+        decimal?: string
+        amount: string
+      }
     }
 
     interface ClosedTransactionInfo {
@@ -1583,7 +1587,11 @@ export namespace Fiber {
       closeAccounts: {
         address: string
         capacity: string
-        udtAmount: string | null
+        udtInfo?: {
+          symbol?: string
+          decimal?: string
+          amount: string
+        }
       }[]
     }
 

src/utils/fiber.tsx

@@ -0,0 +1,65 @@
+import BigNumber from 'bignumber.js'
+import { Fiber } from '../services/ExplorerService/fetcher'
+import { parseNumericAbbr } from './chart'
+import { shannonToCkb } from './util'
+
+export const formalizeChannelAsset = (ch: Fiber.Graph.Channel) => {
+  const isUdtFunding = !!ch.openTransactionInfo.udtInfo
+
+  let fundingValue = null
+  let fundingAmount = null
+  let fundingSymbol = null
+  let totalLiquidity = null
+
+  if (ch.openTransactionInfo.udtInfo) {
+    // is udt funding
+    const value = BigNumber(ch.openTransactionInfo.udtInfo.amount)
+    fundingValue = value.toFormat({ groupSeparator: '' })
+    const a = value.dividedBy(BigNumber(10).pow(ch.openTransactionInfo.udtInfo.decimal ?? 0))
+    fundingAmount = parseNumericAbbr(a.toFormat({ groupSeparator: '' }))
+    if (ch.openTransactionInfo.udtInfo.symbol) {
+      fundingSymbol = ch.openTransactionInfo.udtInfo.symbol
+    }
+    totalLiquidity = `${fundingAmount} ${fundingSymbol}`
+  } else {
+    // is ckb funding
+    fundingValue = shannonToCkb(ch.openTransactionInfo.capacity)
+    fundingAmount = parseNumericAbbr(fundingValue)
+    fundingSymbol = 'CKB'
+    totalLiquidity = `${parseNumericAbbr(shannonToCkb(ch.capacity))} CKB`
+  }
+
+  const close: Record<'addr' | 'value' | 'amount' | 'symbol', string>[] = []
+
+  if (ch.closedTransactionInfo.closeAccounts) {
+    ch.closedTransactionInfo.closeAccounts.forEach(a => {
+      if (a.udtInfo) {
+        const value = BigNumber(a.udtInfo.amount)
+        const v = value.toFormat({ groupSeparator: '' })
+        const am = value.dividedBy(BigNumber(10).pow(a.udtInfo.decimal ?? 0))
+        const amount = parseNumericAbbr(am.toFormat({ groupSeparator: '' }))
+        let symbol = ''
+        if (a.udtInfo.symbol) {
+          symbol = a.udtInfo.symbol
+        }
+        close.push({
+          addr: a.address,
+          value: v,
+          amount,
+          symbol,
+        })
+      }
+    })
+  }
+
+  return {
+    funding: {
+      isUdtFunding,
+      amount: fundingAmount,
+      symbol: fundingSymbol,
+      value: fundingValue,
+    },
+    close: close.length ? close : null,
+    totalLiquidity,
+  }
+}