feat: add ckb fiber graph channel list

Magickbase · Oct 14, 2024 · 7281604 · 7281604
1 parent 1c4abbf
commit 7281604
Show file tree

Hide file tree

Showing 5 changed files with 324 additions and 1 deletion.
diff --git a/src/pages/Fiber/GraphChannelList/index.module.scss b/src/pages/Fiber/GraphChannelList/index.module.scss
@@ -0,0 +1,138 @@
+@import '../../../styles/variables.module';
+@import '../../../styles/table.module';
+
+.container {
+  margin: 24px 120px;
+  font-size: 1rem;
+
+  .channels {
+    border-radius: 6px;
+    box-shadow: rgb(0 0 0 / 12%) 0 2px 6px 0;
+    overflow: hidden;
+
+    .list {
+      font-size: 0.875rem;
+
+      a {
+        color: var(--primary-color);
+      }
+
+      svg {
+        pointer-events: none;
+      }
+    }
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    appearance: none;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  .header {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+  }
+
+  .channel {
+    margin-bottom: 4px;
+    background: #fff;
+    padding: 8px 40px;
+
+    h1 {
+      font-size: 1.2rem;
+    }
+
+    dl {
+      display: flex;
+      gap: 4px;
+    }
+
+    dl,
+    dd,
+    dt {
+      margin: 0;
+      white-space: pre;
+      flex-wrap: wrap;
+    }
+
+    dt {
+      &::after {
+        content: ':';
+      }
+    }
+
+    dd {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .general {
+      dd {
+        .content {
+          & > *:first-child {
+            display: none;
+          }
+
+          @media screen and (width<800px) {
+            & > *:first-child {
+              display: flex;
+            }
+
+            & > *:last-child {
+              display: none;
+            }
+          }
+        }
+      }
+    }
+
+    .nodesContainer {
+      border-radius: 6px;
+      border: 1px solid #ccc;
+      padding: 8px;
+      margin-top: 8px;
+    }
+
+    .nodes {
+      display: flex;
+
+      h3 {
+        font-size: 1rem;
+      }
+
+      gap: 20px;
+
+      .node {
+        flex: 1;
+      }
+
+      @media screen and (width<670px) {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .pagination {
+    background: #fff;
+    padding: 8px 40px;
+    margin-top: 4px;
+  }
+
+  @media screen and (width < $extraLargeBreakPoint) {
+    margin: 24px 20px;
+  }
+
+  @media screen and (width < 1330px) {
+    font-size: 14px;
+  }
+}
diff --git a/src/pages/Fiber/GraphChannelList/index.tsx b/src/pages/Fiber/GraphChannelList/index.tsx
@@ -0,0 +1,176 @@
+import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Tooltip } from 'antd'
+import { CopyIcon } from '@radix-ui/react-icons'
+import dayjs from 'dayjs'
+import Content from '../../../components/Content'
+import { useSetToast } from '../../../components/Toast'
+import { explorerService } from '../../../services/ExplorerService'
+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'
+
+const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
+
+const GraphNodeList = () => {
+  const [t] = useTranslation()
+  const setToast = useSetToast()
+
+  const { data } = useQuery({
+    queryKey: ['fiber', 'graph', 'channels'],
+    queryFn: () => explorerService.api.getGraphChannels(),
+  })
+
+  const list = data?.data.fiberGraphChannels ?? []
+  const pageInfo = data?.data.meta ?? { total: 1, pageSize: PAGE_SIZE }
+  const totalPages = Math.ceil(pageInfo.total / pageInfo.pageSize)
+
+  const handleCopy = (e: React.SyntheticEvent) => {
+    const elm = e.target
+    if (!(elm instanceof HTMLElement)) return
+    const { copyText } = elm.dataset
+    if (!copyText) return
+    e.stopPropagation()
+    e.preventDefault()
+    navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
+  }
+
+  return (
+    <Content>
+      <div className={styles.container} onClick={handleCopy}>
+        <h1 className={styles.header}>
+          <span>CKB Fiber Graph Channels</span>
+        </h1>
+        <div className={styles.channels}>
+          <div className={styles.list}>
+            {list.map(channel => {
+              const outPoint = {
+                txHash: channel.channelOutpoint.slice(0, -8),
+                index: parseInt(channel.channelOutpoint.slice(-8), 16),
+              }
+
+              const ckb = shannonToCkb(channel.capacity)
+              const amount = parseNumericAbbr(ckb)
+              return (
+                <div key={channel.channelOutpoint} className={styles.channel}>
+                  <h1>General</h1>
+                  <div className={styles.general}>
+                    <dl className={styles.outPoint}>
+                      <dt>Out Point</dt>
+                      <dd>
+                        <div className={styles.content}>
+                          <Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
+                            <Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
+                              {`${outPoint.txHash.slice(0, 6)}...${outPoint.txHash.slice(-6)}#${outPoint.index}`}
+                            </Link>
+                          </Tooltip>
+                          <Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
+                            {`${outPoint.txHash}#${outPoint.index}`}
+                          </Link>
+                        </div>
+                        <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.chainHash}>
+                      <dt>Chain Hash</dt>
+                      <dd>
+                        <div className={styles.content}>
+                          <Tooltip title={channel.chainHash}>
+                            <span className="monospace">{`${channel.chainHash.slice(0, 8)}...${channel.chainHash.slice(
+                              -8,
+                            )}`}</span>
+                          </Tooltip>
+                          <span className="monospace">{channel.chainHash}</span>
+                        </div>
+                        <button type="button" data-copy-text={channel.chainHash}>
+                          <CopyIcon />
+                        </button>
+                      </dd>
+                    </dl>
+
+                    <dl className={styles.time}>
+                      <dt>Funded at</dt>
+                      <dd>
+                        <Link to={`/block/${channel.fundingTxBlockNumber}`}>
+                          {localeNumberString(channel.fundingTxBlockNumber)}
+                        </Link>
+                        (<div>{dayjs(+channel.lastUpdatedTimestamp).format(TIME_TEMPLATE)}</div>)
+                      </dd>
+                    </dl>
+                  </div>
+
+                  <div className={styles.nodesContainer}>
+                    <h1>Nodes</h1>
+                    <div className={styles.nodes}>
+                      <div className={styles.node}>
+                        <h3>First Node</h3>
+                        <dl>
+                          <dt>Public Key</dt>
+                          <dd>
+                            <Tooltip title={channel.node1}>
+                              <span className="monospace">{`${channel.node1.slice(0, 8)}...${channel.node1.slice(
+                                -8,
+                              )}`}</span>
+                            </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</h3>
+                        <dl>
+                          <dt>Public Key</dt>
+                          <dd>
+                            <Tooltip title={channel.node2}>
+                              <span className="monospace">{`${channel.node2.slice(0, 8)}...${channel.node2.slice(
+                                -8,
+                              )}`}</span>
+                            </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>
+          <div className={styles.pagination}>
+            <Pagination totalPages={totalPages} />
+          </div>
+        </div>
+      </div>
+    </Content>
+  )
+}
+
+export default GraphNodeList
diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -83,7 +83,7 @@ const fields = [
       return (
         <span className={styles.chainHash}>
           <Tooltip title={v}>
-            <span className="monospace">{v.length > 16 ? `${v.slice(0, 8)}...${v.slice(-8)}` : v}</span>
+            <span className="monospace">{`${v.slice(0, 8)}...${v.slice(-8)}`}</span>
           </Tooltip>
           <button type="button" data-copy-text={v}>
             <CopyIcon />

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -85,6 +85,7 @@ const FiberPeerList = lazy(() => import('../pages/Fiber/PeerList'))
 const FiberPeer = lazy(() => import('../pages/Fiber/Peer'))
 const FiberChannel = lazy(() => import('../pages/Fiber/Channel'))
 const FiberGraphNodeList = lazy(() => import('../pages/Fiber/GraphNodeList'))
+const FiberGraphChannelList = lazy(() => import('../pages/Fiber/GraphChannelList'))
 // ======
 
 const routes: RouteProps[] = [
@@ -363,6 +364,10 @@ const routes: RouteProps[] = [
     path: '/fiber/graph/nodes',
     component: FiberGraphNodeList,
   },
+  {
+    path: '/fiber/graph/channels',
+    component: FiberGraphChannelList,
+  },
 ]
 
 type PageErrorBoundaryState = {

diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
@@ -1283,6 +1283,10 @@ export const apiFetcher = {
         toCamelcase<
           Response.Response<{
             fiberGraphChannels: Fiber.Graph.Channel[]
+            meta: {
+              total: number
+              pageSize: number
+            }
           }>
         >(res.data),
       )