feat: add graph node page

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

Hide file tree

Showing 9 changed files with 588 additions and 222 deletions.
diff --git a/src/components/GraphChannelList/index.module.scss b/src/components/GraphChannelList/index.module.scss
@@ -0,0 +1,106 @@
+.container {
+  font-size: 0.875rem;
+
+  a {
+    color: var(--primary-color);
+  }
+
+  svg {
+    pointer-events: none;
+  }
+
+  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[data-is-full-width='true'] {
+        & > *:first-child {
+          display: none;
+        }
+
+        @media screen and (width<800px) {
+          & > *:first-child {
+            display: flex;
+          }
+
+          & > *:last-child {
+            display: none;
+          }
+        }
+      }
+
+      .content[data-is-full-width='false'] {
+        & > *:first-child {
+          display: flex;
+        }
+
+        & > *:last-child {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .channel {
+    margin-bottom: 4px;
+    background: #fff;
+    padding: 8px 40px;
+
+    h1 {
+      font-size: 1.2rem;
+    }
+  }
+
+  .nodesContainer {
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    padding: 8px;
+    margin-top: 8px;
+    background: rgb(0 0 0 / 3%);
+  }
+
+  .nodes {
+    display: flex;
+
+    &[data-is-full-width='false'] {
+      flex-direction: column;
+    }
+
+    h3 {
+      font-size: 1rem;
+    }
+
+    gap: 20px;
+
+    .node {
+      flex: 1;
+    }
+
+    @media screen and (width<670px) {
+      flex-direction: column;
+    }
+  }
+}
diff --git a/src/components/GraphChannelList/index.tsx b/src/components/GraphChannelList/index.tsx
@@ -0,0 +1,136 @@
+import { CopyIcon } 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[]; isFullWidth?: boolean }> = ({ list, isFullWidth = true }) => {
+  if (!list.length) {
+    return <div className={styles.container}>No Channels</div>
+  }
+  return (
+    <div className={styles.container}>
+      {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} data-is-full-width={!!isFullWidth}>
+                <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>
+  )
+}
+
+export default GraphChannelList
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -1102,7 +1102,9 @@
       },
       "graph": {
         "node": {
+          "id": "Node ID",
           "name": "Name",
+          "alias": "Alias",
           "auto_accept_min_ckb_funding_amount": "Auto-accepting Threshold",
           "first_seen": "First Seen",
           "node_id": "Node ID",

diff --git a/src/pages/Fiber/GraphChannelList/index.module.scss b/src/pages/Fiber/GraphChannelList/index.module.scss
@@ -9,18 +9,6 @@
     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 {
@@ -42,86 +30,6 @@
     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;