diff --git a/src/constants/fiberChainHash.ts b/src/constants/fiberChainHash.ts index 16b3f6cf3..eaad4f749 100644 --- a/src/constants/fiberChainHash.ts +++ b/src/constants/fiberChainHash.ts @@ -1,3 +1,4 @@ export const ChainHash = new Map([ ['0x0000000000000000000000000000000000000000000000000000000000000000', 'CKB Testnet'], + ['0x10639e0895502b5688a6be8cf69460d76541bfa4821629d86d62ba0aae3f9606', 'CKB Testnet'], ]) diff --git a/src/pages/Fiber/GraphNode/index.module.scss b/src/pages/Fiber/GraphNode/index.module.scss index 09e26d542..d93a43d4f 100644 --- a/src/pages/Fiber/GraphNode/index.module.scss +++ b/src/pages/Fiber/GraphNode/index.module.scss @@ -131,6 +131,11 @@ border-radius: 6px; padding: 16px; box-shadow: 0 2px 6px 0 #4d4d4d33; + font-size: 0.8em; + + * { + font-size: inherit; + } h3 { margin: 0; @@ -184,10 +189,27 @@ } .tx { - padding: 8px 8px 0; + padding: 8px 40px; display: flex; - align-items: center; - gap: 4px; + flex-direction: column; + + @media screen and (width < $extraLargeBreakPoint) { + padding: 8px; + } + + time { + margin-right: auto; + } + + & > div { + display: flex; + align-items: center; + gap: 4px; + } + + .addr { + @extend %hash; + } a { @extend %monospace; diff --git a/src/pages/Fiber/GraphNode/index.tsx b/src/pages/Fiber/GraphNode/index.tsx index 7a548367a..2e1224ccb 100644 --- a/src/pages/Fiber/GraphNode/index.tsx +++ b/src/pages/Fiber/GraphNode/index.tsx @@ -1,8 +1,8 @@ -import { useEffect, useRef, useState } from 'react' +import { useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { useParams } from 'react-router-dom' import { useQuery } from '@tanstack/react-query' -import { CopyIcon, OpenInNewWindowIcon } from '@radix-ui/react-icons' +import { CopyIcon, Link1Icon, LinkBreak1Icon, OpenInNewWindowIcon } from '@radix-ui/react-icons' import { Tooltip } from 'antd' import QRCode from 'qrcode' import dayjs from 'dayjs' @@ -17,6 +17,7 @@ import { shannonToCkb } from '../../../utils/util' import { parseNumericAbbr } from '../../../utils/chart' import { ChainHash } from '../../../constants/fiberChainHash' import { Link } from '../../../components/Link' +import { localeNumberString } from '../../../utils/number' const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss' @@ -75,6 +76,68 @@ const GraphNode = () => { ) }, [qrRef, connectId]) + const openAndClosedTxs = useMemo(() => { + const list: { + hash: string + index?: string + block: { + number: number + timestamp: number + } + isUdt: boolean + isOpen: boolean + accounts: Record<'amount' | 'address', string>[] + }[] = [] + + if (!node?.fiberGraphChannels) return list + + node.fiberGraphChannels.forEach(c => { + const isUdt = !!c.openTransactionInfo.udtAmount + const open = { + isOpen: true, + isUdt, + hash: c.openTransactionInfo.txHash, + index: c.fundingTxIndex, + block: { + number: c.openTransactionInfo.blockNumber, + timestamp: c.openTransactionInfo.blockTimestamp, + }, + accounts: [ + { + address: c.openTransactionInfo.address, + amount: + c.openTransactionInfo.udtAmount ?? + `${localeNumberString(shannonToCkb(c.openTransactionInfo.capacity))} CKB`, + }, + ], + } + + list.push(open) + + const close = c.closedTransactionInfo + ? { + isOpen: false, + hash: c.closedTransactionInfo.txHash, + block: { + number: c.closedTransactionInfo.blockNumber, + timestamp: c.closedTransactionInfo.blockTimestamp, + }, + isUdt, + accounts: c.closedTransactionInfo.closeAccounts.map(acc => { + return { + amount: acc.udtAmount ?? `${localeNumberString(shannonToCkb(acc.capacity))} CKB`, + address: acc.address, + } + }), + } + : null + if (close) { + list.push(close) + } + }) + return list.sort((a, b) => a.block.timestamp - b.block.timestamp) + }, [node]) + if (isLoading) { return } @@ -82,10 +145,8 @@ const GraphNode = () => { if (!node) { return
Fiber Peer Not Found
} - const channels = node.fiberGraphChannels + const channels = node.fiberGraphChannels.filter(c => !c.closedTransactionInfo) - // const ckb = shannonToCkb(node.autoAcceptMinCkbFundingAmount) - // const amount = parseNumericAbbr(ckb) const thresholds = getFundingThreshold(node) const totalCkb = parseNumericAbbr(shannonToCkb(node.totalCapacity)) @@ -102,11 +163,6 @@ const GraphNode = () => { const chain = ChainHash.get(node.chainHash) ?? '-' - const openTxs = node.fiberGraphChannels.map(c => ({ - hash: c.openTransactionInfo.txHash, - index: c.fundingTxIndex, - })) - return (
@@ -196,22 +252,83 @@ const GraphNode = () => {
-

- Open Transactions - (Close transactions coming soon) -

+

Open & Closed Transactions

- {openTxs.map(tx => ( -
- Open Channel by - - -
{tx.hash.slice(0, -15)}
-
{tx.hash.slice(-15)}
- - -
- ))} + {openAndClosedTxs.map(tx => { + const key = tx.isOpen ? `${tx.hash}#${tx.index}` : tx.hash + if (tx.isOpen) { + const account = tx.accounts[0]! + return ( +
+
+ + at + + + + + + +
+
+ By + + + +
{account.address.slice(0, -8)}
+
{account.address.slice(-8)}
+ + + + ({account.amount}) +
+
+ ) + } + const [acc1, acc2] = tx.accounts + return ( +
+
+ + at + + + + + + +
+
+ To + + + +
{acc1.address.slice(0, -8)}
+
{acc1.address.slice(-8)}
+ + + + ({acc1.amount}) +
+
+ And + + + +
{acc2.address.slice(0, -8)}
+
{acc2.address.slice(-8)}
+ + + + ({acc2.amount}) +
+
+ ) + })}
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts index 26af615c2..d91ff0d8f 100644 --- a/src/services/ExplorerService/fetcher.ts +++ b/src/services/ExplorerService/fetcher.ts @@ -1559,6 +1559,17 @@ export namespace Fiber { udtAmount?: string } + interface ClosedTransactionInfo { + blockNumber: number + blockTimestamp: number + txHash: string + closeAccounts: { + address: string + capacity: string + udtAmount: string | null + }[] + } + export interface Node { alias: string nodeId: string @@ -1584,6 +1595,7 @@ export namespace Fiber { node2ToNode1FeeRate: string capacity: string openTransactionInfo: OpenTransactionInfo + closedTransactionInfo: ClosedTransactionInfo } export interface NodeDetail extends Node {