feat: add channel page

src/locales/en.json

@@ -1087,7 +1087,17 @@
       },
       "channel": {
         "channel_id": "Channel ID",
-        "state": "State"
+        "fiber_peers": "Fiber Peers",
+        "state": "State",
+        "open_time": "Open Time",
+        "update_time": "Last Update Time",
+        "shutdown_time": "Shutdown Time",
+        "balance": "Balance",
+        "local": "Local",
+        "remote": "Remote",
+        "tlc_balance": "TLC Balance",
+        "offered": "Offered",
+        "received": "Received"
       }
     }
   }

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

@@ -0,0 +1,91 @@
+@import '../../../styles//variables.module.scss';
+
+.container {
+  text-wrap: nowrap;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 24px 120px;
+  font-size: 1rem;
+
+  svg {
+    pointer-events: none;
+  }
+
+  dl {
+    display: flex;
+
+    dt,
+    dd {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      margin: 0;
+      padding: 0;
+    }
+
+    dt::after {
+      content: ':';
+      margin-right: 4px;
+    }
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    appearance: none;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+
+    &:hover {
+      color: var(--primary-color);
+    }
+  }
+
+  .id {
+    overflow: hidden;
+
+    & > span:first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+    }
+  }
+
+  .transactions {
+    margin-top: 16px;
+    border-top: 1px solid #ccc;
+    padding-top: 16px;
+
+    h3 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  .peers {
+    display: flex;
+    flex-wrap: wrap;
+
+    .local,
+    .remote {
+      flex: 1 0 50%;
+      border: 1px solid #ccc;
+      padding: 32px;
+
+      dl:last-child {
+        margin: 0;
+      }
+    }
+  }
+
+  @media screen and (width < $extraLargeBreakPoint) {
+    margin: 24px 20px;
+  }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
+}

src/pages/Fiber/Channel/index.tsx

@@ -1,5 +1,147 @@
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { useQuery } from '@tanstack/react-query'
+import { CopyIcon } from '@radix-ui/react-icons'
+import BigNumber from 'bignumber.js'
+import dayjs from 'dayjs'
+import Content from '../../../components/Content'
+import { useSetToast } from '../../../components/Toast'
+import Loading from '../../../components/Loading'
+import { explorerService } from '../../../services/ExplorerService'
+import styles from './index.module.scss'
+import { shannonToCkb } from '../../../utils/util'
+import { localeNumberString } from '../../../utils/number'
+
+const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
+
 const Channel = () => {
-  return <div>Channel</div>
+  const [t] = useTranslation()
+  const { id } = useParams<{ id: string }>()
+  const setToast = useSetToast()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['fiber', 'channels', id],
+    queryFn: () => {
+      return explorerService.api.getFiberChannel(id)
+    },
+    enabled: !!id,
+  })
+
+  if (isLoading) {
+    return <Loading show />
+  }
+
+  if (!data) {
+    return <div>Fiber Peer Not Found</div>
+  }
+  const channel = data.data
+
+  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') }))
+  }
+
+  const totalBalance = BigNumber(channel.localBalance).plus(BigNumber(channel.remoteBalance))
+  const totalTLCBalance = BigNumber(channel.offeredTlcBalance).plus(BigNumber(channel.receivedTlcBalance))
+
+  return (
+    <Content>
+      <div className={styles.container} onClick={handleCopy}>
+        <div>
+          <dl>
+            <dt>{t('fiber.channel.channel_id')}</dt>
+            <dd className={styles.id}>
+              <span>{channel.channelId}</span>
+              <button type="button" data-copy-text={channel.channelId}>
+                <CopyIcon />
+              </button>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.state')}</dt>
+            <dd>{channel.stateName}</dd>
+          </dl>
+
+          <dl>
+            <dt>{t('fiber.channel.balance')}</dt>
+            <dd>{`${localeNumberString(
+              shannonToCkb(totalBalance.toFormat({ groupSeparator: '' })),
+            )} CKB(Total) | ${localeNumberString(
+              shannonToCkb(totalTLCBalance.toFormat({ groupSeparator: '' })),
+            )} CKB(TLC)`}</dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.open_time')}</dt>
+            <dd>
+              <time dateTime={channel.createdAt}>{dayjs(channel.createdAt).format(TIME_TEMPLATE)}</time>
+            </dd>
+          </dl>
+          <dl>
+            <dt>{t('fiber.channel.update_time')}</dt>
+            <dd>
+              <time dateTime={channel.updatedAt}>{dayjs(channel.updatedAt).format(TIME_TEMPLATE)}</time>
+            </dd>
+          </dl>
+          {channel.shutdownAt ? (
+            <dl>
+              <dt>{t('fiber.channel.shutdown_time')}</dt>
+              <dd>
+                <time dateTime={channel.shutdownAt}>{dayjs(channel.shutdownAt).format(TIME_TEMPLATE)}</time>
+              </dd>
+            </dl>
+          ) : null}
+          <div className={styles.peers}>
+            <div className={styles.local}>
+              <dl>
+                <dt>Fiber Peer</dt>
+                <dd>
+                  <small>Coming soon(Local)</small>
+                </dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.localBalance))} CKB`}</dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.tlc_balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.offeredTlcBalance))} CKB`}</dd>
+              </dl>
+            </div>
+
+            <div className={styles.remote}>
+              <dl>
+                <dt>Fiber Peer</dt>
+                <dd>
+                  <small>Coming soon(Remote)</small>
+                </dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.remoteBalance))} CKB`}</dd>
+              </dl>
+
+              <dl>
+                <dt>{t('fiber.channel.tlc_balance')}</dt>
+                <dd>{`${localeNumberString(shannonToCkb(channel.receivedTlcBalance))} CKB`}</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+        <div className={styles.transactions}>
+          <h3>Open | Close Transactions</h3>
+          <div>Coming soon</div>
+        </div>
+      </div>
+    </Content>
+  )
 }
 
 export default Channel

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

@@ -70,7 +70,33 @@
     }
   }
 
+  .id {
+    overflow: hidden;
+
+    & > span:first-child {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 1;
+    }
+  }
+
+  .channels,
+  .transactions {
+    margin-top: 16px;
+    border-top: 1px solid #ccc;
+    padding-top: 16px;
+
+    h3 {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
   @media screen and (width < $extraLargeBreakPoint) {
     margin: 24px 20px;
   }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
 }

src/pages/Fiber/Peer/index.tsx

@@ -6,10 +6,6 @@ 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'
 
@@ -19,7 +15,7 @@ const Peer = () => {
   const setToast = useSetToast()
 
   const { data, isLoading } = useQuery({
-    queryKey: ['fiber', 'peer', id],
+    queryKey: ['fiber', 'peers', id],
     queryFn: () => {
       return explorerService.api.getFiberPeerDetail(id)
     },
@@ -51,8 +47,8 @@ const Peer = () => {
         <div>
           <dl>
             <dt>{t('fiber.peer.peer_id')}</dt>
-            <dd>
-              {peer.peerId}
+            <dd className={styles.id}>
+              <span>{peer.peerId}</span>
               <button type="button" data-copy-text={peer.peerId}>
                 <CopyIcon />
               </button>
@@ -85,8 +81,8 @@ const Peer = () => {
             </dd>
           </dl>
         </div>
-        <div>
-          <div>{`${t('fiber.peer.channels')}(${channels.length})`}</div>
+        <div className={styles.channels}>
+          <h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
           <table>
             <thead>
               <tr>
@@ -112,6 +108,10 @@ const Peer = () => {
             </tbody>
           </table>
         </div>
+        <div className={styles.transactions}>
+          <h3>Open | Close Transactions</h3>
+          <small>Coming soon</small>
+        </div>
       </div>
     </Content>
   )

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

@@ -77,6 +77,11 @@
     }
   }
 
+  .balance {
+    display: flex;
+    flex-direction: column;
+  }
+
   @media screen and (width < $extraLargeBreakPoint) {
     margin: 24px 20px;
   }
@@ -127,3 +132,25 @@
     }
   }
 }
+
+.addFiberPeer {
+  width: min-content;
+  margin: 16px auto;
+
+  fieldset {
+    margin: 8px 0;
+  }
+
+  input {
+    width: 250px;
+    padding: 4px 8px;
+  }
+
+  button {
+    padding: 4px 16px;
+  }
+
+  @media screen and (width < 1030px) {
+    font-size: 14px;
+  }
+}