feat: add total capacity

Magickbase · Oct 24, 2024 · d40d0b1 · d40d0b1
1 parent f5f49c9
commit d40d0b1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1109,7 +1109,8 @@
           "first_seen": "First Seen",
           "node_id": "Node ID",
           "chain_hash": "Chain Hash",
-          "addresses": "Addresses"
+          "addresses": "Addresses",
+          "total_capacity": "Capacity"
         }
       }
     }

diff --git a/src/pages/Fiber/GraphNode/index.tsx b/src/pages/Fiber/GraphNode/index.tsx
@@ -13,6 +13,8 @@ import styles from './index.module.scss'
 import Loading from '../../../components/Loading'
 import GraphChannelList from '../../../components/GraphChannelList'
 import { getFundingThreshold } from '../utils'
+import { shannonToCkb } from '../../../utils/util'
+import { parseNumericAbbr } from '../../../utils/chart'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -84,6 +86,8 @@ const GraphNode = () => {
   // const amount = parseNumericAbbr(ckb)
   const thresholds = getFundingThreshold(node)
 
+  const totalCkb = parseNumericAbbr(shannonToCkb(node.totalCapacity))
+
   const handleCopy = (e: React.SyntheticEvent) => {
     const elm = e.target
     if (!(elm instanceof HTMLElement)) return
@@ -149,6 +153,10 @@ const GraphNode = () => {
               <dt>{t('fiber.graph.node.chain_hash')}</dt>
               <dd>{node.chainHash}</dd>
             </dl>
+            <dl>
+              <dt>{t('fiber.graph.node.total_capacity')}</dt>
+              <dd>{totalCkb}</dd>
+            </dl>
             <dl className={styles.thresholds}>
               <dt>{t('fiber.graph.node.auto_accept_funding_amount')}</dt>
               <dd>

diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -13,6 +13,9 @@ import { PAGE_SIZE } from '../../../constants/common'
 import { useSearchParams } from '../../../hooks'
 import { getFundingThreshold } from '../utils'
 import styles from './index.module.scss'
+import { shannonToCkb } from '../../../utils/util'
+import { parseNumericAbbr } from '../../../utils/chart'
+import { localeNumberString } from '../../../utils/number'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -53,6 +56,21 @@ const fields = [
       )
     },
   },
+  {
+    key: 'totalCapacity',
+    label: 'total_capacity',
+    transformer: (v: unknown) => {
+      if (typeof v !== 'string') return v
+
+      const ckb = shannonToCkb(v)
+      const amount = parseNumericAbbr(ckb)
+      return (
+        <Tooltip title={`${localeNumberString(ckb)} CKB`}>
+          <span>{`${amount} CKB`}</span>
+        </Tooltip>
+      )
+    },
+  },
   {
     key: 'timestamp',
     label: 'first_seen',