From 16a9aad92658ecc554b552c7e82578e9e9f537a9 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Mon, 2 Dec 2024 21:35:33 +0900
Subject: [PATCH] feat: optimize ui of fiber graph nodes and channels

---
 .../GraphChannelList/index.module.scss        |  86 +++++++++------
 src/components/GraphChannelList/index.tsx     | 104 +++++++-----------
 src/constants/fiberChainHash.ts               |   3 +
 src/locales/en.json                           |   1 +
 src/pages/Fiber/GraphNode/index.module.scss   |  44 +++++++-
 src/pages/Fiber/GraphNode/index.tsx           |  36 +++++-
 src/pages/Fiber/GraphNodeList/index.tsx       |   8 +-
 src/styles/text.module.scss                   |  21 ++++
 8 files changed, 192 insertions(+), 111 deletions(-)
 create mode 100644 src/constants/fiberChainHash.ts
 create mode 100644 src/styles/text.module.scss

diff --git a/src/components/GraphChannelList/index.module.scss b/src/components/GraphChannelList/index.module.scss
index 6ccecbe1a..399a0e332 100644
--- a/src/components/GraphChannelList/index.module.scss
+++ b/src/components/GraphChannelList/index.module.scss
@@ -1,3 +1,6 @@
+@import '../../styles/variables.module';
+@import '../../styles/text.module';
+
 .container {
   font-size: 0.875rem;
 
@@ -12,14 +15,20 @@
   dl {
     display: flex;
     gap: 4px;
+
+    @media screen and (width <= $mobileBreakPoint) {
+      display: block;
+    }
   }
 
   dl,
   dd,
   dt {
     margin: 0;
-    white-space: pre;
-    flex-wrap: wrap;
+
+    /* white-space: pre; */
+
+    /* flex-wrap: wrap; */
   }
 
   dt {
@@ -34,41 +43,15 @@
     gap: 4px;
   }
 
-  .general {
-    dd {
-      .content {
-        & > *: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;
 
+    @media screen and (width <= $largeBreakPoint) {
+      padding: 8px;
+    }
+
     h1 {
       font-size: 1.2rem;
     }
@@ -76,11 +59,29 @@
 
   .funding {
     display: flex;
+    gap: 4px;
+    flex-wrap: nowrap;
+    overflow: hidden;
+
+    dd {
+      overflow: hidden;
+    }
+
+    a.address {
+      @extend %hash;
 
-    .funder {
-      flex: 0.4;
+      min-width: 180px;
+    }
+  }
+
+  .outPoint {
+    dd {
       overflow: hidden;
     }
+
+    a {
+      @extend %hash;
+    }
   }
 
   .nodesContainer {
@@ -89,6 +90,12 @@
     padding: 8px;
     margin-top: 8px;
     background: rgb(0 0 0 / 3%);
+
+    dt,
+    dd {
+      display: flex;
+      flex-wrap: nowrap;
+    }
   }
 
   .nodes {
@@ -114,9 +121,18 @@
 
     .node {
       flex: 1;
+      overflow: hidden;
+
+      dd {
+        overflow: hidden;
+      }
+
+      a {
+        @extend %hash;
+      }
     }
 
-    @media screen and (width<690px) {
+    @media screen and (width <= $mobileBreakPoint) {
       flex-direction: column;
     }
   }
diff --git a/src/components/GraphChannelList/index.tsx b/src/components/GraphChannelList/index.tsx
index 480b9705b..1653f4cac 100644
--- a/src/components/GraphChannelList/index.tsx
+++ b/src/components/GraphChannelList/index.tsx
@@ -7,23 +7,18 @@ import type { Fiber } from '../../services/ExplorerService/fetcher'
 import { parseNumericAbbr } from '../../utils/chart'
 import { localeNumberString } from '../../utils/number'
 import { shannonToCkb } from '../../utils/util'
-import AddressText from '../AddressText'
 import styles from './index.module.scss'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
-const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean; node?: string }> = ({
-  list,
-  isFullWidth = true,
-  node,
-}) => {
+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 => {
+      {list.map((channel, i) => {
         const outPoint = {
           txHash: channel.channelOutpoint.slice(0, -8),
           index: parseInt(channel.channelOutpoint.slice(-8), 16),
@@ -39,23 +34,21 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
           ? parseNumericAbbr(channel.outpointInfo.fundingUdtAmount)
           : null
 
+        const outpoint = `${outPoint.txHash}#${outPoint.index}`
+
         return (
           <div key={channel.channelOutpoint} className={styles.channel}>
-            <h1>General</h1>
-            <div className={styles.general}>
+            <h1>Channel #{i + 1}</h1>
+            <div>
               <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>
+                  <Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
                     <Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
-                      {`${outPoint.txHash}#${outPoint.index}`}
+                      <div>{outpoint.slice(0, -15)}</div>
+                      <div>{outpoint.slice(-15)}</div>
                     </Link>
-                  </div>
+                  </Tooltip>
                   <button type="button" data-copy-text={outPoint.txHash}>
                     <CopyIcon />
                   </button>
@@ -71,57 +64,38 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
                 </dd>
               </dl>
               <dl className={styles.funding}>
-                <dt>Funding</dt>
-                <dd>
-                  <Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
-                    <span>{`${fundingCkbAmount} CKB`}</span>
-                  </Tooltip>
-                  {fundingUdtAmount ? '&' : null}
-                  {fundingUdtAmount}
-                  from
-                  <div className={styles.funder}>
-                    <AddressText
-                      linkProps={{
-                        to: `/address/${channel.outpointInfo.fundingAddress}`,
-                      }}
-                    >
-                      {channel.outpointInfo.fundingAddress}
-                    </AddressText>
-                  </div>
-                </dd>
-              </dl>
-
-              <dl className={styles.chainHash}>
-                <dt>Chain Hash</dt>
+                <dt>Source</dt>
                 <dd>
-                  <div className={styles.content}>
-                    <Tooltip title={channel.chainHash}>
-                      <span className="monospace">{`${channel.chainHash.slice(0, 8)}...${channel.chainHash.slice(
-                        -8,
-                      )}`}</span>
+                  {fundingUdtAmount || (
+                    <Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
+                      <span>{`${fundingCkbAmount} CKB`}</span>
                     </Tooltip>
-                    <span className="monospace">{channel.chainHash}</span>
-                  </div>
-                  <button type="button" data-copy-text={channel.chainHash}>
-                    <CopyIcon />
-                  </button>
+                  )}
+                  from
+                  <Tooltip title={channel.outpointInfo.fundingAddress}>
+                    <Link to={`/address/${channel.outpointInfo.fundingAddress}`} className={styles.address}>
+                      <div>{channel.outpointInfo.fundingAddress.slice(0, -15)}</div>
+                      <div>{channel.outpointInfo.fundingAddress.slice(-15)}</div>
+                    </Link>
+                  </Tooltip>
                 </dd>
               </dl>
-
-              <dl className={styles.time}>
-                <dt>Funded at</dt>
+              <dl>
+                <dt>Position</dt>
                 <dd>
-                  <Link to={`/block/${channel.fundingTxBlockNumber}`}>
-                    {localeNumberString(channel.fundingTxBlockNumber)}
-                  </Link>
-                  (<div>{dayjs(+channel.lastUpdatedTimestamp).format(TIME_TEMPLATE)}</div>)
+                  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} data-is-full-width={!!isFullWidth}>
+              <div className={styles.nodes}>
                 <div className={styles.node}>
                   <h3>
                     First Node
@@ -131,10 +105,10 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
                     <dt>ID</dt>
                     <dd>
                       <Tooltip title={channel.node1}>
-                        <Link to={`/fiber/graph/node/${channel.node1}`} className="monospace">{`0x${channel.node1.slice(
-                          0,
-                          8,
-                        )}...${channel.node1.slice(-8)}`}</Link>
+                        <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 />
@@ -155,10 +129,10 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
                     <dt>ID</dt>
                     <dd>
                       <Tooltip title={channel.node2}>
-                        <Link to={`/fiber/graph/node/${channel.node2}`} className="monospace">{`0x${channel.node2.slice(
-                          0,
-                          8,
-                        )}...${channel.node2.slice(-8)}`}</Link>
+                        <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 />
diff --git a/src/constants/fiberChainHash.ts b/src/constants/fiberChainHash.ts
new file mode 100644
index 000000000..16b3f6cf3
--- /dev/null
+++ b/src/constants/fiberChainHash.ts
@@ -0,0 +1,3 @@
+export const ChainHash = new Map([
+  ['0x0000000000000000000000000000000000000000000000000000000000000000', 'CKB Testnet'],
+])
diff --git a/src/locales/en.json b/src/locales/en.json
index a97741dd5..1a1f64573 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1111,6 +1111,7 @@
           "auto_accept_funding_amount": "Auto-accepting Threshold",
           "first_seen": "First Seen",
           "node_id": "Node ID",
+          "chain": "Chain",
           "chain_hash": "Chain Hash",
           "addresses": "Addresses",
           "total_capacity": "Capacity",
diff --git a/src/pages/Fiber/GraphNode/index.module.scss b/src/pages/Fiber/GraphNode/index.module.scss
index 600744360..09e26d542 100644
--- a/src/pages/Fiber/GraphNode/index.module.scss
+++ b/src/pages/Fiber/GraphNode/index.module.scss
@@ -1,5 +1,6 @@
 @import '../../../styles/variables.module';
 @import '../../../styles/card.module';
+@import '../../../styles/text.module';
 
 .container {
   text-wrap: nowrap;
@@ -103,6 +104,11 @@
       margin-left: 8px;
       display: flex;
       flex-direction: column;
+      align-items: flex-start;
+
+      img {
+        flex: 0 0;
+      }
 
       .token {
         display: flex;
@@ -119,7 +125,8 @@
 
     .channels,
     .transactions {
-      flex: 1;
+      overflow: hidden;
+      flex-basis: 50%;
       background: #fff;
       border-radius: 6px;
       padding: 16px;
@@ -131,7 +138,7 @@
       }
     }
 
-    @media screen and (width < 960px) {
+    @media screen and (width < $mobileBreakPoint) {
       flex-direction: column;
     }
 
@@ -167,3 +174,36 @@
     font-size: 14px;
   }
 }
+
+.addresses {
+  select {
+    max-width: 80%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.tx {
+  padding: 8px 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  a {
+    @extend %monospace;
+
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    user-select: none;
+
+    div {
+      font-family: inherit;
+    }
+
+    div:first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
diff --git a/src/pages/Fiber/GraphNode/index.tsx b/src/pages/Fiber/GraphNode/index.tsx
index 882b61328..3019596b9 100644
--- a/src/pages/Fiber/GraphNode/index.tsx
+++ b/src/pages/Fiber/GraphNode/index.tsx
@@ -15,6 +15,8 @@ import GraphChannelList from '../../../components/GraphChannelList'
 import { getFundingThreshold } from '../utils'
 import { shannonToCkb } from '../../../utils/util'
 import { parseNumericAbbr } from '../../../utils/chart'
+import { ChainHash } from '../../../constants/fiberChainHash'
+import { Link } from '../../../components/Link'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -98,6 +100,13 @@ const GraphNode = () => {
     navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
   }
 
+  const chain = ChainHash.get(node.chainHash) ?? '-'
+
+  const openTxs = node.fiberGraphChannels.map(c => ({
+    hash: c.outpointInfo.txHash,
+    index: c.fundingTxIndex,
+  }))
+
   return (
     <Content>
       <div className={styles.container} onClick={handleCopy}>
@@ -123,7 +132,7 @@ const GraphNode = () => {
                 </button>
               </dd>
             </dl>
-            <dl>
+            <dl className={styles.addresses}>
               <dt>
                 <label htmlFor="addr">{t('fiber.graph.node.addresses')}</label>
               </dt>
@@ -150,8 +159,10 @@ const GraphNode = () => {
               <dd>{dayjs(+node.timestamp).format(TIME_TEMPLATE)}</dd>
             </dl>
             <dl>
-              <dt>{t('fiber.graph.node.chain_hash')}</dt>
-              <dd>{node.chainHash}</dd>
+              <dt>{t('fiber.graph.node.chain')}</dt>
+              <dd>
+                <Tooltip title={node.chainHash}>{chain}</Tooltip>
+              </dd>
             </dl>
             <dl>
               <dt>{t('fiber.graph.node.total_capacity')}</dt>
@@ -185,8 +196,23 @@ const GraphNode = () => {
             <GraphChannelList list={channels} node={node.nodeId} />
           </div>
           <div className={styles.transactions}>
-            <h3>Open | Close Transactions</h3>
-            <small>Coming soon</small>
+            <h3>
+              Open Transactions
+              <small style={{ marginLeft: 8, fontSize: 10, opacity: 0.5 }}>(Close transactions coming soon)</small>
+            </h3>
+            <div>
+              {openTxs.map(tx => (
+                <div key={`${tx.hash}#${tx.index}`} className={styles.tx}>
+                  <span>Open Channel by</span>
+                  <Tooltip title={`${tx.hash}-${tx.index}`}>
+                    <Link to={`/transaction/${tx.hash}#${tx.index}`} className="monospace">
+                      <div>{tx.hash.slice(0, -15)}</div>
+                      <div>{tx.hash.slice(-15)}</div>
+                    </Link>
+                  </Tooltip>
+                </div>
+              ))}
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
index 00d1958ca..0dcc283d4 100644
--- a/src/pages/Fiber/GraphNodeList/index.tsx
+++ b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -16,6 +16,7 @@ import styles from './index.module.scss'
 import { shannonToCkb } from '../../../utils/util'
 import { parseNumericAbbr } from '../../../utils/chart'
 import { localeNumberString } from '../../../utils/number'
+import { ChainHash } from '../../../constants/fiberChainHash'
 
 const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
 
@@ -109,14 +110,13 @@ const fields = [
   },
   {
     key: 'chainHash',
-    label: 'chain_hash',
+    label: 'chain',
     transformer: (v: unknown) => {
       if (typeof v !== 'string') return v
+      const chain = ChainHash.get(v) ?? '-'
       return (
         <span className={styles.chainHash}>
-          <Tooltip title={v}>
-            <span className="monospace">{`${v.slice(0, 8)}...${v.slice(-8)}`}</span>
-          </Tooltip>
+          <Tooltip title={v}>{chain}</Tooltip>
           <button type="button" data-copy-text={v}>
             <CopyIcon />
           </button>
diff --git a/src/styles/text.module.scss b/src/styles/text.module.scss
new file mode 100644
index 000000000..cbb2415db
--- /dev/null
+++ b/src/styles/text.module.scss
@@ -0,0 +1,21 @@
+%monospace {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+%hash {
+  @extend %monospace;
+
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  user-select: none;
+
+  div {
+    font-family: inherit;
+  }
+
+  div:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}