feat: refine list of fiber graph nodes

1. hide chain hash column 2. adjust layout of mobile
nervosnetwork · Jan 6, 2025 · 30bb476 · 30bb476
1 parent 9074c40
commit 30bb476
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 50 deletions.
diff --git a/src/pages/Fiber/GraphNode/index.tsx b/src/pages/Fiber/GraphNode/index.tsx
@@ -15,7 +15,6 @@ 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'
 import { localeNumberString } from '../../../utils/number'
 
@@ -161,8 +160,6 @@ const GraphNode = () => {
     navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
   }
 
-  const chain = ChainHash.get(node.chainHash) ?? '-'
-
   return (
     <Content>
       <div className={styles.container} onClick={handleCopy}>
@@ -214,12 +211,6 @@ const GraphNode = () => {
               <dt>{t('fiber.graph.node.first_seen')}</dt>
               <dd>{dayjs(+node.timestamp).format(TIME_TEMPLATE)}</dd>
             </dl>
-            <dl>
-              <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>
               <dd>{totalCkb}</dd>

diff --git a/src/pages/Fiber/GraphNodeList/index.module.scss b/src/pages/Fiber/GraphNodeList/index.module.scss
@@ -106,60 +106,85 @@
     margin: 24px 20px;
   }
 
-  @media screen and (width < 1330px) {
+  @media screen and (width < 1400px) {
     font-size: 14px;
 
     table {
-      th,
-      td {
-        &:nth-child(6) {
-          display: none;
+      tr:not([data-role='pagination']) {
+        th,
+        td {
+          &:nth-child(5) {
+            display: none;
+          }
         }
       }
     }
   }
 
-  @media screen and (width < 810px) {
+  @media screen and (width < 1240px) {
     table {
       tr:not([data-role='pagination']) {
         th,
         td {
-          &:last-child {
+          &:nth-child(1) {
             display: none;
           }
         }
       }
     }
   }
 
-  @media screen and (width < 900px) {
+  @media screen and (width < 1024px) {
     table {
-      th,
-      td {
-        &:nth-child(5) {
-          display: none;
+      tr:not([data-role='pagination']) {
+        th,
+        td {
+          &:nth-child(2) {
+            display: none;
+          }
         }
       }
     }
   }
 
-  @media screen and (width < 700px) {
+  @media screen and (width < 840px) {
     table {
-      th,
-      td {
-        &:nth-child(3) {
-          display: none;
+      tr:not([data-role='pagination']) {
+        th,
+        td {
+          &:last-child {
+            display: none;
+          }
         }
       }
     }
   }
 
-  @media screen and (width < 520px) {
+  @media screen and (width < 545px) {
     table {
-      th,
-      td {
-        &:first-child {
-          display: none;
+      tr:not([data-role='pagination']) {
+        th,
+        td {
+          &:nth-child(6) {
+            display: none;
+          }
+
+          &:nth-child(1) {
+            display: table-cell;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (width < 450px) {
+    table {
+      tr:not([data-role='pagination']) {
+        th,
+        td {
+          &:nth-child(3) {
+            display: none;
+          }
         }
       }
     }

diff --git a/src/pages/Fiber/GraphNodeList/index.tsx b/src/pages/Fiber/GraphNodeList/index.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { Tooltip } from 'antd'
-import { CopyIcon, InfoCircledIcon } from '@radix-ui/react-icons'
+import { CopyIcon, InfoCircledIcon, LinkBreak2Icon } from '@radix-ui/react-icons'
 import dayjs from 'dayjs'
 import Content from '../../../components/Content'
 import { useSetToast } from '../../../components/Toast'
@@ -16,7 +16,6 @@ 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'
 
@@ -108,29 +107,21 @@ const fields = [
       )
     },
   },
-  {
-    key: 'chainHash',
-    label: 'chain',
-    transformer: (v: unknown) => {
-      if (typeof v !== 'string') return v
-      const chain = ChainHash.get(v) ?? '-'
-      return (
-        <span className={styles.chainHash}>
-          <Tooltip title={v}>{chain}</Tooltip>
-          <button type="button" data-copy-text={v}>
-            <CopyIcon />
-          </button>
-        </span>
-      )
-    },
-  },
   {
     key: 'addresses',
     label: 'addresses',
     transformer: (v: unknown) => {
       if (!Array.isArray(v)) return v
       const addr = v[0]
-      if (!addr || typeof addr !== 'string') return v
+      if (!addr || typeof addr !== 'string') {
+        return (
+          <Tooltip title="Not Revealed">
+            <span>
+              <LinkBreak2Icon />
+            </span>
+          </Tooltip>
+        )
+      }
       return (
         <span className={styles.address}>
           <Tooltip title={addr}>