feat: add ckb fiber network

.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,

_typos.toml

@@ -6,3 +6,5 @@ rd='rd'
 th='th'
 # typo in api, should be fixed later
 toekn='toekn'
+# echart config
+metalness = 'metalness'

src/components/Dropdown/ChainType/index.tsx

@@ -1,6 +1,6 @@
 import { ChainTypePanel } from './styled'
 import SimpleButton from '../../SimpleButton'
-import { IS_MAINNET, MAINNET_URL, TESTNET_URL } from '../../../constants/common'
+import { ChainName, IS_MAINNET, MAINNET_URL, TESTNET_URL } from '../../../constants/common'
 
 export default ({ setShow, left, top }: { setShow: Function; left: number; top: number }) => {
   const hideDropdown = () => {
@@ -10,11 +10,11 @@ export default ({ setShow, left, top }: { setShow: Function; left: number; top:
   return (
     <ChainTypePanel left={left} top={top} onMouseLeave={hideDropdown}>
       <SimpleButton className={`chainType${IS_MAINNET ? 'Selected' : 'Normal'}`} onClick={hideDropdown}>
-        <a href={MAINNET_URL}>mainnet</a>
+        <a href={MAINNET_URL}>{`${ChainName.Mainnet} Mainnet`}</a>
       </SimpleButton>
       <div className="chainTypeSeparate" />
       <SimpleButton className={`chainType${!IS_MAINNET ? 'Selected' : 'Normal'}`} onClick={hideDropdown}>
-        <a href={TESTNET_URL}>testnet</a>
+        <a href={TESTNET_URL}>{`${ChainName.Testnet} Testnet`}</a>
       </SimpleButton>
     </ChainTypePanel>
   )

src/components/GraphChannelList/index.module.scss

@@ -0,0 +1,139 @@
+@import '../../styles/variables.module';
+@import '../../styles/text.module';
+
+.container {
+  font-size: 0.875rem;
+
+  a {
+    color: var(--primary-color);
+  }
+
+  svg {
+    pointer-events: none;
+  }
+
+  dl {
+    display: flex;
+    gap: 4px;
+
+    @media screen and (width <= $mobileBreakPoint) {
+      display: block;
+    }
+  }
+
+  dl,
+  dd,
+  dt {
+    margin: 0;
+
+    /* white-space: pre; */
+
+    /* flex-wrap: wrap; */
+  }
+
+  dt {
+    &::after {
+      content: ':';
+    }
+  }
+
+  dd {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .channel {
+    margin-bottom: 4px;
+    background: #fff;
+    padding: 8px 40px;
+
+    @media screen and (width <= $largeBreakPoint) {
+      padding: 8px;
+    }
+
+    h1 {
+      font-size: 1.2rem;
+    }
+  }
+
+  .funding {
+    display: flex;
+    gap: 4px;
+    flex-wrap: nowrap;
+    overflow: hidden;
+
+    dd {
+      overflow: hidden;
+    }
+
+    a.address {
+      @extend %hash;
+
+      min-width: 180px;
+    }
+  }
+
+  .outPoint {
+    dd {
+      overflow: hidden;
+    }
+
+    a {
+      @extend %hash;
+    }
+  }
+
+  .nodesContainer {
+    border-radius: 6px;
+    border: 1px solid #ccc;
+    padding: 8px;
+    margin-top: 8px;
+    background: rgb(0 0 0 / 3%);
+
+    dt,
+    dd {
+      display: flex;
+      flex-wrap: nowrap;
+    }
+  }
+
+  .nodes {
+    display: flex;
+
+    &[data-is-full-width='false'] {
+      flex-direction: column;
+    }
+
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 1rem;
+
+      span {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    gap: 20px;
+
+    .node {
+      flex: 1;
+      overflow: hidden;
+
+      dd {
+        overflow: hidden;
+      }
+
+      a {
+        @extend %hash;
+      }
+    }
+
+    @media screen and (width <= $mobileBreakPoint) {
+      flex-direction: column;
+    }
+  }
+}

src/components/GraphChannelList/index.tsx

@@ -0,0 +1,156 @@
+import { CopyIcon, HomeIcon, GlobeIcon } 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[]; node?: string }> = ({ list, node }) => {
+  if (!list.length) {
+    return <div className={styles.container}>No Channels</div>
+  }
+
+  return (
+    <div className={styles.container}>
+      {list.map((channel, i) => {
+        const outPoint = {
+          txHash: channel.channelOutpoint.slice(0, -8),
+          index: parseInt(channel.channelOutpoint.slice(-8), 16),
+        }
+
+        const ckb = shannonToCkb(channel.capacity)
+        const amount = parseNumericAbbr(ckb)
+
+        const fundingCkb = shannonToCkb(channel.openTransactionInfo.capacity)
+        const fundingCkbAmount = parseNumericAbbr(fundingCkb)
+
+        const fundingUdtAmount = channel.openTransactionInfo.udtAmount
+          ? parseNumericAbbr(channel.openTransactionInfo.udtAmount)
+          : null
+
+        const outpoint = `${outPoint.txHash}#${outPoint.index}`
+
+        return (
+          <div key={channel.channelOutpoint} className={styles.channel}>
+            <h1>Channel #{i + 1}</h1>
+            <div>
+              <dl className={styles.outPoint}>
+                <dt>Out Point</dt>
+                <dd>
+                  <Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
+                    <Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
+                      <div>{outpoint.slice(0, -15)}</div>
+                      <div>{outpoint.slice(-15)}</div>
+                    </Link>
+                  </Tooltip>
+                  <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.funding}>
+                <dt>Source</dt>
+                <dd>
+                  {fundingUdtAmount || (
+                    <Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
+                      <span>{`${fundingCkbAmount} CKB`}</span>
+                    </Tooltip>
+                  )}
+                  from
+                  <Tooltip title={channel.openTransactionInfo.address}>
+                    <Link to={`/address/${channel.openTransactionInfo.address}`} className={styles.address}>
+                      <div>{channel.openTransactionInfo.address.slice(0, -15)}</div>
+                      <div>{channel.openTransactionInfo.address.slice(-15)}</div>
+                    </Link>
+                  </Tooltip>
+                </dd>
+              </dl>
+              <dl>
+                <dt>Position</dt>
+                <dd>
+                  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}>
+                <div className={styles.node}>
+                  <h3>
+                    First Node
+                    {node ? <span>{node === channel.node1 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
+                  </h3>
+                  <dl>
+                    <dt>ID</dt>
+                    <dd>
+                      <Tooltip title={channel.node1}>
+                        <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 />
+                      </button>
+                    </dd>
+                  </dl>
+                  <dl>
+                    <dt>Fee Rate</dt>
+                    <dd>{`${localeNumberString(channel.node1ToNode2FeeRate)} shannon/kB`}</dd>
+                  </dl>
+                </div>
+                <div className={styles.node}>
+                  <h3>
+                    Second Node
+                    {node ? <span>{node === channel.node2 ? <HomeIcon /> : <GlobeIcon />}</span> : null}
+                  </h3>
+                  <dl>
+                    <dt>ID</dt>
+                    <dd>
+                      <Tooltip title={channel.node2}>
+                        <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 />
+                      </button>
+                    </dd>
+                  </dl>
+                  <dl>
+                    <dt>Fee Rate</dt>
+                    <dd>{`${localeNumberString(channel.node2ToNode1FeeRate)} shannon/kB`}</dd>
+                  </dl>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default GraphChannelList

src/components/Header/BlockchainComp/index.tsx

@@ -7,7 +7,7 @@ import GreenDropUpIcon from '../../../assets/green_drop_up.png'
 import { HeaderBlockchainPanel, MobileSubMenuPanel } from './styled'
 import SimpleButton from '../../SimpleButton'
 import ChainDropdown from '../../Dropdown/ChainType'
-import { MAINNET_URL, ONE_DAY_MILLISECOND, TESTNET_URL } from '../../../constants/common'
+import { ChainName, MAINNET_URL, ONE_DAY_MILLISECOND, TESTNET_URL } from '../../../constants/common'
 import { explorerService } from '../../../services/ExplorerService'
 import { cacheService } from '../../../services/CacheService'
 import { useChainName } from '../../../hooks/useCKBNode'
@@ -108,10 +108,10 @@ const BlockchainMenu: FC<{ nodeVersion: string }> = ({ nodeVersion }) => {
       {showSubMenu && (
         <>
           <a className="mobileMenusSubItem" href={MAINNET_URL}>
-            mainnet
+            {`${ChainName.Mainnet} Mainnet`}
           </a>
           <a className="mobileMenusSubItem" href={TESTNET_URL}>
-            testnet
+            {`${ChainName.Testnet} Testnet`}
           </a>
         </>
       )}

src/components/Search/AggregateSearchResults.tsx

@@ -259,6 +259,22 @@ const SearchResultItem: FC<{ keyword?: string; item: AggregateSearchResult }> =
     )
   }
 
+  if (item.type === SearchResultType.FiberGraphNode) {
+    return (
+      <Link className={styles.searchResult} to={to}>
+        <div className={styles.boxContent}>
+          <HighlightText style={{ width: '100%' }} text={item.attributes.nodeId} keyword={keyword} />
+
+          <div className={classNames(styles.secondaryText, styles.subTitle, 'monospace')}>
+            <span style={{ marginRight: 4, flexShrink: 0 }}>
+              {t('search.fiber_graph_node')} # {localeNumberString(item.attributes.alias)}
+            </span>
+          </div>
+        </div>
+      </Link>
+    )
+  }
+
   return (
     <Link className={styles.searchResult} to={to}>
       <div className={styles.content}>

src/components/Search/index.tsx

@@ -45,6 +45,7 @@ const ALLOW_SEARCH_TYPES = [
   SearchResultType.UDT,
   SearchResultType.DID,
   SearchResultType.BtcAddress,
+  SearchResultType.FiberGraphNode,
 ]
 
 async function fetchAggregateSearchResult(searchValue: string): Promise<AggregateSearchResult[]> {