Enable fiber nodes (#1829)

.eslintrc.js

@@ -115,6 +115,7 @@ module.exports = {
     'jsx-a11y/label-has-associated-control': 'off',
     'jsx-a11y/no-static-element-interactions': 'off',
     'jsx-a11y/no-noninteractive-element-interactions': 'off',
+    'jsx-a11y/click-events-have-key-events': 'off',
   },
   env: {
     jest: true,

src/components/GraphChannelList/index.module.scss

@@ -0,0 +1,139 @@
+@import '../../styles/variables.module';
+@import '../../styles/text.module';
+
+.container {
+  font-size: 0.875rem;
+
+  a {
+    color: var(--primary-color);
+  }
+
+  svg {
+    pointer-events: none;
+  }
+
+  dl {
+    display: flex;
+    gap: 4px;
+
+    @media screen and (width <= $mobileBreakPoint) {
+      display: block;
+    }
+  }
+
+  dl,
+  dd,
+  dt {
+    margin: 0;
+
+    /* white-space: pre; */
+
+    /* flex-wrap: wrap; */
+  }
+
+  dt {
+    &::after {
+      content: ':';
+    }
+  }
+
+  dd {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .channel {
+    margin-bottom: 4px;
+    background: #fff;
+    padding: 8px 40px;
+
+    @media screen and (width <= $largeBreakPoint) {
+      padding: 8px;
+    }
+
+    h1 {
+      font-size: 1.2rem;
+    }
+  }
+
+  .funding {
+    display: flex;
+    gap: 4px;
+    flex-wrap: nowrap;
+    overflow: hidden;
+
+    dd {
+      overflow: hidden;
+    }
+
+    a.address {
+      @extend %hash;
+
+      min-width: 180px;
+    }
+  }
+
+  .outPoint {
+    dd {
+      overflow: hidden;
+    }
+
+    a {
+      @extend %hash;
+    }
+  }
+
+  .nodesContainer {
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    padding: 8px;
+    margin-top: 8px;
+    background: rgb(0 0 0 / 3%);
+
+    dt,
+    dd {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .nodes {
+    display: flex;
+
+    &[data-is-full-width='false'] {
+      flex-direction: column;
+    }
+
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 1rem;
+
+      span {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    gap: 20px;
+
+    .node {
+      flex: 1;
+      overflow: hidden;
+
+      dd {
+        overflow: hidden;
+      }
+
+      a {
+        @extend %hash;
+      }
+    }
+
+    @media screen and (width <= $mobileBreakPoint) {
+      flex-direction: column;
+    }
+  }
+}

src/components/GraphChannelList/index.tsx

@@ -0,0 +1,156 @@
+import { CopyIcon, HomeIcon, GlobeIcon } from '@radix-ui/react-icons'
+import { Tooltip } from 'antd'
+import dayjs from 'dayjs'
+import type { FC } from 'react'
+import { Link } from 'react-router-dom'
+import type { Fiber } from '../../services/ExplorerService/fetcher'
+import { parseNumericAbbr } from '../../utils/chart'
+import { localeNumberString } from '../../utils/number'
+import { shannonToCkb } from '../../utils/util'
+import styles from './index.module.scss'
+
+const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
+
+const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; node?: string }> = ({ list, node }) => {
+  if (!list.length) {
+    return <div className={styles.container}>No Channels</div>
+  }
+
+  return (
+    <div className={styles.container}>
+      {list.map((channel, i) => {
+        const outPoint = {
+          txHash: channel.channelOutpoint.slice(0, -8),
+          index: parseInt(channel.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}>
+            <h1>Channel #{i + 1}</h1>
+            <div>
+              <dl className={styles.outPoint}>
+                <dt>Out Point</dt>
+                <dd>
+                  <Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
+                    <Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
+                      <div>{outpoint.slice(0, -15)}</div>
+                      <div>{outpoint.slice(-15)}</div>
+                    </Link>
+                  </Tooltip>
+                  <button type="button" data-copy-text={outPoint.txHash}>
+                    <CopyIcon />
+                  </button>
+                </dd>
+              </dl>
+
+              <dl className={styles.amount}>
+                <dt>Capacity</dt>
+                <dd>
+                  <Tooltip title={`${localeNumberString(ckb)} CKB`}>
+                    <span>{`${amount} CKB`}</span>
+                  </Tooltip>
+                </dd>
+              </dl>
+              <dl className={styles.funding}>
+                <dt>Source</dt>
+                <dd>
+                  {fundingUdtAmount || (
+                    <Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
+                      <span>{`${fundingCkbAmount} CKB`}</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>
+                    </Link>
+                  </Tooltip>
+                </dd>
+              </dl>
+              <dl>
+                <dt>Position</dt>
+                <dd>
+                  On
+                  <Tooltip title={dayjs(+channel.lastUpdatedTimestamp).format(TIME_TEMPLATE)}>
+                    <Link to={`/block/${channel.fundingTxBlockNumber}`}>
+                      {localeNumberString(channel.fundingTxBlockNumber)}
+                    </Link>
+                  </Tooltip>
+                </dd>
+              </dl>
+            </div>
+
+            <div className={styles.nodesContainer}>
+              <h1>Nodes</h1>
+              <div className={styles.nodes}>
+                <div className={styles.node}>
+                  <h3>
+                    First Node
+                    {node ? <span>{node === channel.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>
+                        </Link>
+                      </Tooltip>
+                      <button type="button" data-copy-text={channel.node1}>
+                        <CopyIcon />
+                      </button>
+                    </dd>
+                  </dl>
+                  <dl>
+                    <dt>Fee Rate</dt>
+                    <dd>{`${localeNumberString(channel.node1ToNode2FeeRate)} shannon/kB`}</dd>
+                  </dl>
+                </div>
+                <div className={styles.node}>
+                  <h3>
+                    Second Node
+                    {node ? <span>{node === channel.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>
+                        </Link>
+                      </Tooltip>
+                      <button type="button" data-copy-text={channel.node2}>
+                        <CopyIcon />
+                      </button>
+                    </dd>
+                  </dl>
+                  <dl>
+                    <dt>Fee Rate</dt>
+                    <dd>{`${localeNumberString(channel.node2ToNode1FeeRate)} shannon/kB`}</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default GraphChannelList

src/components/Search/AggregateSearchResults.tsx

@@ -259,6 +259,22 @@ const SearchResultItem: FC<{ keyword?: string; item: AggregateSearchResult }> =
     )
   }
 
+  if (item.type === SearchResultType.FiberGraphNode) {
+    return (
+      <Link className={styles.searchResult} to={to}>
+        <div className={styles.boxContent}>
+          <HighlightText style={{ width: '100%' }} text={item.attributes.nodeId} keyword={keyword} />
+
+          <div className={classNames(styles.secondaryText, styles.subTitle, 'monospace')}>
+            <span style={{ marginRight: 4, flexShrink: 0 }}>
+              {t('search.fiber_graph_node')} # {localeNumberString(item.attributes.alias)}
+            </span>
+          </div>
+        </div>
+      </Link>
+    )
+  }
+
   return (
     <Link className={styles.searchResult} to={to}>
       <div className={styles.content}>

src/components/Search/index.tsx

@@ -45,6 +45,7 @@ const ALLOW_SEARCH_TYPES = [
   SearchResultType.UDT,
   SearchResultType.DID,
   SearchResultType.BtcAddress,
+  SearchResultType.FiberGraphNode,
 ]
 
 async function fetchAggregateSearchResult(searchValue: string): Promise<AggregateSearchResult[]> {

src/components/Search/utils.ts

@@ -54,6 +54,9 @@ export const getURLByAggregateSearchResult = (result: AggregateSearchResult) =>
     case SearchResultType.BtcAddress:
       return `/address/${attributes.addressHash}`
 
+    case SearchResultType.FiberGraphNode:
+      return `/fiber/graph/node/${attributes.nodeId}`
+
     default:
       break
   }
@@ -97,4 +100,7 @@ export const getDisplayNameByAggregateSearchResult = (result: AggregateSearchRes
   if (type === SearchResultType.BtcAddress) {
     return attributes.addressHash
   }
+  if (type === SearchResultType.FiberGraphNode) {
+    return attributes.peerId
+  }
 }

src/constants/fiberChainHash.ts

@@ -0,0 +1,4 @@
+export const ChainHash = new Map([
+  ['0x0000000000000000000000000000000000000000000000000000000000000000', 'CKB Testnet'],
+  ['0x10639e0895502b5688a6be8cf69460d76541bfa4821629d86d62ba0aae3f9606', 'CKB Testnet'],
+])