feat: add peer detail page

.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/locales/en.json

@@ -1079,10 +1079,15 @@
         "peer_id": "ID",
         "name": "Name",
         "channels_count": "Channels",
+        "channels": "Channels",
         "open_time": "First Channel",
         "update_time": "Last Update",
         "total_local_balance": "Local Balance",
         "rpc_addr": "RPC Address"
+      },
+      "channel": {
+        "channel_id": "Channel ID",
+        "state": "State"
       }
     }
   }

src/pages/Fiber/Peer/index.module.scss

@@ -0,0 +1,76 @@
+@import '../../../styles//variables.module.scss';
+
+.container {
+  text-wrap: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 24px 120px;
+  font-size: 1rem;
+
+  a {
+    color: var(--primary-color);
+  }
+
+  dl {
+    display: flex;
+
+    dt,
+    dd {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0;
+      padding: 0;
+    }
+
+    dt::after {
+      content: ':';
+      margin-right: 4px;
+    }
+  }
+
+  table {
+    width: 100%;
+    text-align: left;
+    cursor: default;
+
+    td,
+    th {
+      padding: 8px;
+      padding-right: 16px;
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    tbody {
+      tr:hover {
+        background: #ccc;
+      }
+    }
+  }
+
+  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);
+    }
+  }
+
+  @media screen and (width < $extraLargeBreakPoint) {
+    margin: 24px 20px;
+  }
+}

src/pages/Fiber/Peer/index.tsx

@@ -1,5 +1,120 @@
+import { useTranslation } from 'react-i18next'
+import { Link, useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { CopyIcon, OpenInNewWindowIcon } from '@radix-ui/react-icons'
+import { Tooltip } from 'antd'
+import Content from '../../../components/Content'
+import { explorerService } from '../../../services/ExplorerService'
+import { useSetToast } from '../../../components/Toast'
+// import type { Fiber } from '../../../services/ExplorerService/fetcher'
+// import { shannonToCkb } from '../../../utils/util'
+// import { localeNumberString } from '../../../utils/number'
+// import { parseNumericAbbr } from '../../../utils/chart'
+import styles from './index.module.scss'
+import Loading from '../../../components/Loading'
+
 const Peer = () => {
-  return <div>Channel</div>
+  const [t] = useTranslation()
+  const { id } = useParams<{ id: string }>()
+  const setToast = useSetToast()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['fiber', 'peer', id],
+    queryFn: () => {
+      return explorerService.api.getFiberPeerDetail(id)
+    },
+    enabled: !!id,
+  })
+  if (isLoading) {
+    return <Loading show />
+  }
+
+  if (!data) {
+    return <div>Fiber Peer Not Found</div>
+  }
+  const peer = data.data
+  const channels = peer.fiberChannels
+
+  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}>
+        <div>
+          <dl>
+            <dt>{t('fiber.peer.peer_id')}</dt>
+            <dd>
+              {peer.peerId}
+              <button type="button" data-copy-text={peer.peerId}>
+                <CopyIcon />
+              </button>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.peer.rpc_addr')}</dt>
+            <dd>
+              <Tooltip title={peer.rpcListeningAddr}>
+                <span>{peer.rpcListeningAddr}</span>
+              </Tooltip>
+              <button type="button" data-copy-text={peer.rpcListeningAddr}>
+                <CopyIcon />
+              </button>
+              <a href={peer.rpcListeningAddr} title={peer.rpcListeningAddr} target="_blank" rel="noopener noreferrer">
+                <OpenInNewWindowIcon />
+              </a>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.peer.open_time')}</dt>
+            <dd>
+              <small>Coming soon</small>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.peer.update_time')}</dt>
+            <dd>
+              <small>Coming soon</small>
+            </dd>
+          </dl>
+        </div>
+        <div>
+          <div>{`${t('fiber.peer.channels')}(${channels.length})`}</div>
+          <table>
+            <thead>
+              <tr>
+                <th>{t('fiber.channel.channel_id')}</th>
+                <th>{t('fiber.channel.state')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {channels.map(c => {
+                return (
+                  <tr key={c.channelId}>
+                    <td>
+                      <Tooltip title={c.channelId}>
+                        <Link to={`/fiber/channels/${c.channelId}`} className="monospace">
+                          {`${c.channelId.slice(0, 10)}...${c.channelId.slice(-10)}`}
+                        </Link>
+                      </Tooltip>
+                    </td>
+                    <td>{c.stateName}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Content>
+  )
 }
 
 export default Peer

src/pages/Fiber/PeerList/index.module.scss

@@ -5,7 +5,7 @@
   display: flex;
   margin: 24px 120px;
   font-size: 1rem;
-  align-items: start;
+  align-items: flex-start;
 
   a {
     color: var(--primary-color);
@@ -18,11 +18,17 @@
 
     td,
     th {
+      padding: 8px;
       padding-right: 16px;
 
       &:last-child {
         text-align: right;
-        padding-right: 0;
+      }
+    }
+
+    tbody {
+      tr:hover {
+        background: #ccc;
       }
     }
   }
@@ -59,7 +65,7 @@
   .rpc {
     display: flex;
     align-items: center;
-    justify-content: end;
+    justify-content: flex-end;
     flex-wrap: nowrap;
     gap: 4px;
 

src/pages/Fiber/PeerList/index.tsx

@@ -71,7 +71,7 @@ const fields = [
       return (
         <span className={styles.peerId}>
           <Tooltip title={v}>
-            <Link to={`/fiber/peers/${v}`}>{`${v.slice(0, 8)}...${v.slice(-8)}`}</Link>
+            <Link to={`/fiber/peers/${v}`} className="monospace">{`${v.slice(0, 8)}...${v.slice(-8)}`}</Link>
           </Tooltip>
           <button type="button" data-copy-text={v}>
             <CopyIcon />
@@ -112,6 +112,7 @@ const PeerList = () => {
   })
 
   const list = data?.data.fiberPeers ?? []
+
   const handleCopy = (e: React.SyntheticEvent) => {
     const elm = e.target
     if (!(elm instanceof HTMLElement)) return
@@ -121,15 +122,17 @@ const PeerList = () => {
     e.preventDefault()
     navigator?.clipboard.writeText(copyText).then(() => setToast({ message: t('common.copied') }))
   }
+
   return (
     <Content>
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div className={styles.container} onClick={handleCopy}>
         <table>
           <thead>
-            {fields.map(f => {
-              return <th key={f.key}>{t(`fiber.peer.${f.label}`)}</th>
-            })}
+            <tr>
+              {fields.map(f => {
+                return <th key={f.key}>{t(`fiber.peer.${f.label}`)}</th>
+              })}
+            </tr>
           </thead>
           <tbody>
             {list.map(i => {

src/routes/index.tsx

@@ -355,7 +355,7 @@ const routes: RouteProps[] = [
     component: FiberPeer,
   },
   {
-    path: '/fiber/channel/:id',
+    path: '/fiber/channels/:id',
     component: FiberChannel,
   },
 ]