feat: add funding thresholds

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

Hide file tree

Showing 8 changed files with 128 additions and 24 deletions.
diff --git a/public/images/tokens/ckb_token.svg b/public/images/tokens/ckb_token.svg
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1105,7 +1105,7 @@
           "id": "Node ID",
           "name": "Name",
           "alias": "Alias",
-          "auto_accept_min_ckb_funding_amount": "Auto-accepting Threshold",
+          "auto_accept_funding_amount": "Auto-accepting Threshold",
           "first_seen": "First Seen",
           "node_id": "Node ID",
           "chain_hash": "Chain Hash",

diff --git a/src/pages/Fiber/GraphNode/index.module.scss b/src/pages/Fiber/GraphNode/index.module.scss
@@ -94,6 +94,24 @@
     }
   }
 
+  .thresholds {
+    dt {
+      align-items: start;
+    }
+
+    dd {
+      margin-left: 8px;
+      display: flex;
+      flex-direction: column;
+
+      .token {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+    }
+  }
+
   .activities {
     display: flex;
     gap: 16px;

diff --git a/src/pages/Fiber/GraphNode/index.tsx b/src/pages/Fiber/GraphNode/index.tsx
@@ -11,10 +11,8 @@ import { explorerService } from '../../../services/ExplorerService'
 import { useSetToast } from '../../../components/Toast'
 import styles from './index.module.scss'
 import Loading from '../../../components/Loading'
-import { shannonToCkb } from '../../../utils/util'
-import { parseNumericAbbr } from '../../../utils/chart'
-import { localeNumberString } from '../../../utils/number'
 import GraphChannelList from '../../../components/GraphChannelList'
+import { getFundingThreshold } from '../utils'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -82,8 +80,9 @@ const GraphNode = () => {
   }
   const channels = node.fiberGraphChannels
 
-  const ckb = shannonToCkb(node.autoAcceptMinCkbFundingAmount)
-  const amount = parseNumericAbbr(ckb)
+  // const ckb = shannonToCkb(node.autoAcceptMinCkbFundingAmount)
+  // const amount = parseNumericAbbr(ckb)
+  const thresholds = getFundingThreshold(node)
 
   const handleCopy = (e: React.SyntheticEvent) => {
     const elm = e.target
@@ -150,12 +149,19 @@ const GraphNode = () => {
               <dt>{t('fiber.graph.node.chain_hash')}</dt>
               <dd>{node.chainHash}</dd>
             </dl>
-            <dl>
-              <dt>{t('fiber.graph.node.auto_accept_min_ckb_funding_amount')}</dt>
+            <dl className={styles.thresholds}>
+              <dt>{t('fiber.graph.node.auto_accept_funding_amount')}</dt>
               <dd>
-                <Tooltip title={`${localeNumberString(ckb)} CKB`}>
-                  <span>{`${amount} CKB`}</span>
-                </Tooltip>
+                {thresholds.map(threshold => {
+                  return (
+                    <Tooltip key={threshold.id} title={threshold.title}>
+                      <span className={styles.token}>
+                        <img src={threshold.icon} alt="icon" width="12" height="12" loading="lazy" />
+                        {threshold.display}
+                      </span>
+                    </Tooltip>
+                  )
+                })}
               </dd>
             </dl>
           </div>

diff --git a/src/pages/Fiber/GraphNodeList/index.module.scss b/src/pages/Fiber/GraphNodeList/index.module.scss
@@ -44,6 +44,17 @@
     text-overflow: ellipsis;
   }
 
+  .funding {
+    display: flex;
+    flex-direction: column;
+
+    .token {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+  }
+
   .nodeId,
   .chainHash {
     display: flex;

diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -8,13 +8,11 @@ import Content from '../../../components/Content'
 import { useSetToast } from '../../../components/Toast'
 import { explorerService } from '../../../services/ExplorerService'
 import type { Fiber } from '../../../services/ExplorerService/fetcher'
-import { shannonToCkb } from '../../../utils/util'
-import { localeNumberString } from '../../../utils/number'
-import { parseNumericAbbr } from '../../../utils/chart'
-import styles from './index.module.scss'
 import Pagination from '../Pagination'
 import { PAGE_SIZE } from '../../../constants/common'
 import { useSearchParams } from '../../../hooks'
+import { getFundingThreshold } from '../utils'
+import styles from './index.module.scss'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -35,16 +33,22 @@ const fields = [
   },
   {
     key: 'autoAcceptMinCkbFundingAmount',
-    label: 'auto_accept_min_ckb_funding_amount',
-    transformer: (v: unknown) => {
-      if (typeof v !== 'string' || Number.isNaN(+v)) return v
-      const ckb = shannonToCkb(v)
-      const amount = parseNumericAbbr(ckb)
+    label: 'auto_accept_funding_amount',
+    transformer: (_: unknown, n: Fiber.Graph.Node) => {
+      const thresholds = getFundingThreshold(n)
+
       return (
-        <div className={styles.balance}>
-          <Tooltip title={`${localeNumberString(ckb)} CKB`}>
-            <span>{`${amount} CKB`}</span>
-          </Tooltip>
+        <div className={styles.funding}>
+          {thresholds.map(threshold => {
+            return (
+              <Tooltip key={threshold.id} title={threshold.title}>
+                <span className={styles.token}>
+                  <img src={threshold.icon} alt="icon" width="12" height="12" loading="lazy" />
+                  {threshold.display}
+                </span>
+              </Tooltip>
+            )
+          })}
         </div>
       )
     },

diff --git a/src/pages/Fiber/utils/index.tsx b/src/pages/Fiber/utils/index.tsx
@@ -0,0 +1,42 @@
+import { scriptToHash } from '@nervosnetwork/ckb-sdk-utils'
+import type { Fiber } from '../../../services/ExplorerService/fetcher'
+import { parseNumericAbbr } from '../../../utils/chart'
+import { localeNumberString, parseUDTAmount } from '../../../utils/number'
+import { shannonToCkb } from '../../../utils/util'
+
+export const getFundingThreshold = (n: Fiber.Graph.Node) => {
+  const ckb = shannonToCkb(n.autoAcceptMinCkbFundingAmount)
+  const amount = parseNumericAbbr(ckb)
+
+  const tokens: { title: string; display: string; id: string; icon?: string }[] = [
+    {
+      title: `${localeNumberString(ckb)} CKB`,
+      display: `${amount} CKB`,
+      id: 'ckb',
+      icon: '/images/tokens/ckb_token.svg',
+    },
+  ]
+
+  n.udtCfgInfos.forEach(udt => {
+    if (udt && udt.autoAcceptAmount && typeof udt.decimal === 'number' && udt.symbol) {
+      try {
+        const udtAmount = parseUDTAmount(udt.autoAcceptAmount, udt.decimal)
+        const id = scriptToHash({
+          codeHash: udt.codeHash,
+          hashType: udt.hashType,
+          args: udt.args,
+        })
+        tokens.push({
+          title: `${localeNumberString(udtAmount)} ${udt.symbol}`,
+          display: `${parseNumericAbbr(udtAmount)} ${udt.symbol}`,
+          icon: udt.iconFile,
+          id,
+        })
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  })
+
+  return tokens
+}
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
@@ -1529,13 +1529,27 @@ export namespace Fiber {
   }
 
   export namespace Graph {
+    interface UdtConfigInfo {
+      args: string
+      codeHash: string
+      hashType: HashType
+      decimal?: number
+      fullName?: string
+      iconFile?: string
+      symbol?: string
+      autoAcceptAmount: string
+    }
+
     export interface Node {
       alias: string
       nodeId: string
       addresses: string[]
       timestamp: string
       chainHash: string
       autoAcceptMinCkbFundingAmount: string
+      udtCfgInfos: UdtConfigInfo[]
+      totalCapacity: string
+      connectedNodeIds: string[]
     }
 
     export interface Channel {