diff --git a/public/images/tokens/ckb_token.svg b/public/images/tokens/ckb_token.svg new file mode 100644 index 000000000..27302bd6f --- /dev/null +++ b/public/images/tokens/ckb_token.svg @@ -0,0 +1,9 @@ + + + + + + + + diff --git a/src/locales/en.json b/src/locales/en.json index 5aaf030a7..9783c2a73 100644 --- 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 index ace74b7cd..600744360 100644 --- 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 index ecad750b2..7e4484ad9 100644 --- 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 = () => {
{t('fiber.graph.node.chain_hash')}
{node.chainHash}
-
-
{t('fiber.graph.node.auto_accept_min_ckb_funding_amount')}
+
+
{t('fiber.graph.node.auto_accept_funding_amount')}
- - {`${amount} CKB`} - + {thresholds.map(threshold => { + return ( + + + icon + {threshold.display} + + + ) + })}
diff --git a/src/pages/Fiber/GraphNodeList/index.module.scss b/src/pages/Fiber/GraphNodeList/index.module.scss index ba12c0528..4356a5086 100644 --- 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 index 620df8e7a..c07802845 100644 --- 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 ( -
- - {`${amount} CKB`} - +
+ {thresholds.map(threshold => { + return ( + + + icon + {threshold.display} + + + ) + })}
) }, diff --git a/src/pages/Fiber/utils/index.tsx b/src/pages/Fiber/utils/index.tsx new file mode 100644 index 000000000..2513b3bae --- /dev/null +++ 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 index 920ddaab5..245fec22a 100644 --- a/src/services/ExplorerService/fetcher.ts +++ b/src/services/ExplorerService/fetcher.ts @@ -1529,6 +1529,17 @@ 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 @@ -1536,6 +1547,9 @@ export namespace Fiber { timestamp: string chainHash: string autoAcceptMinCkbFundingAmount: string + udtCfgInfos: UdtConfigInfo[] + totalCapacity: string + connectedNodeIds: string[] } export interface Channel {