+
+ {peer.name || 'Untitled Node'}
+
+
+ )
+}
+
+export default FiberPeerInfo
diff --git a/src/pages/Fiber/Channel/index.module.scss b/src/pages/Fiber/Channel/index.module.scss
new file mode 100644
index 000000000..9d063904b
--- /dev/null
+++ b/src/pages/Fiber/Channel/index.module.scss
@@ -0,0 +1,114 @@
+@import '../../../styles/variables.module';
+@import '../../../styles/card.module';
+
+.container {
+ text-wrap: nowrap;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ margin: 24px 120px;
+ font-size: 1rem;
+
+ a {
+ color: var(--primary-color);
+ }
+
+ 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);
+ }
+ }
+
+ .overview {
+ @extend %base-card;
+ }
+
+ .id {
+ overflow: hidden;
+
+ & > span:first-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ }
+ }
+
+ .transactions {
+ @extend %base-card;
+
+ margin-top: 8px;
+ padding-top: 16px;
+
+ h3 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ .peers {
+ margin-top: 8px;
+ display: flex;
+ flex-wrap: wrap;
+
+ .local,
+ .remote {
+ @extend %base-card;
+
+ flex: 1 0 40%;
+ border: 1px solid #ccc;
+ padding: 32px;
+
+ dl:first-child {
+ dt {
+ align-items: flex-start;
+ }
+
+ a {
+ font-weight: 400;
+ }
+ }
+
+ dl:last-child {
+ margin: 0;
+ }
+ }
+ }
+
+ @media screen and (width < $extraLargeBreakPoint) {
+ margin: 24px 20px;
+ }
+
+ @media screen and (width < 1030px) {
+ font-size: 14px;
+ }
+}
diff --git a/src/pages/Fiber/Channel/index.tsx b/src/pages/Fiber/Channel/index.tsx
new file mode 100644
index 000000000..d5787feda
--- /dev/null
+++ b/src/pages/Fiber/Channel/index.tsx
@@ -0,0 +1,150 @@
+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'
+import FiberPeerInfo from './fiber'
+
+const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'
+
+const Channel = () => {
+ 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
+
+ {`${peer.peerId.slice(0, 8)}...${peer.peerId.slice(-8)}`}
+
+
+
+ Fiber Peer Not Found
+ }
+ 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 (
+
+
+
+
+
+
+ -
+
- {t('fiber.channel.channel_id')} +
- + {channel.channelId} + + +
-
+
- {t('fiber.channel.state')} +
- {channel.stateName} +
-
+
- {t('fiber.channel.balance')} +
- {`${localeNumberString( + shannonToCkb(totalBalance.toFormat({ groupSeparator: '' })), + )} CKB(Total) | ${localeNumberString( + shannonToCkb(totalTLCBalance.toFormat({ groupSeparator: '' })), + )} CKB(TLC)`} +
-
+
- {t('fiber.channel.open_time')} +
- + + +
-
+
- {t('fiber.channel.update_time')} +
- + + +
-
+
- {t('fiber.channel.shutdown_time')} +
- + + +
+
+
+
+
+ -
+
- Fiber Peer +
-
+
+
+
-
+
- {t('fiber.channel.balance')} +
- {`${localeNumberString(shannonToCkb(channel.localBalance))} CKB`} +
-
+
- {t('fiber.channel.tlc_balance')} +
- {`${localeNumberString(shannonToCkb(channel.offeredTlcBalance))} CKB`} +
+
+ -
+
- Fiber Peer +
-
+
+
+
-
+
- {t('fiber.channel.balance')} +
- {`${localeNumberString(shannonToCkb(channel.remoteBalance))} CKB`} +
-
+
- {t('fiber.channel.tlc_balance')} +
- {`${localeNumberString(shannonToCkb(channel.receivedTlcBalance))} CKB`} +
+
+ Open | Close Transactions
+Coming soon
+
+
+ + CKB Fiber Graph Channels +
+
+
+
+
+ Fiber Peer Not Found
+ }
+ const channels = node.fiberGraphChannels.filter(c => !c.closedTransactionInfo)
+
+ const thresholds = getFundingThreshold(node)
+
+ const totalCkb = parseNumericAbbr(shannonToCkb(node.totalCapacity))
+
+ 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 chain = ChainHash.get(node.chainHash) ?? '-'
+
+ return (
+
+
+
+
+
+ {node.alias ? (
+
+ {connectId ? (
+ -
+
- {t('fiber.graph.alias')} +
- + {node.alias} + + +
-
+
- {t('fiber.graph.node.id')} +
- + {`0x${node.nodeId}`} + + +
-
+
- + + +
-
+
+
+
+
+ +
+
-
+
- {t('fiber.graph.node.first_seen')} +
- {dayjs(+node.timestamp).format(TIME_TEMPLATE)} +
-
+
- {t('fiber.graph.node.chain')} +
-
+
{chain} +
+
-
+
- {t('fiber.graph.node.total_capacity')} +
- {totalCkb} +
-
+
- {t('fiber.graph.node.auto_accept_funding_amount')} +
-
+ {thresholds.map(threshold => {
+ return (
+
+ + + ) + })} ++ {threshold.display} + +
+
+
+
+ ) : null}
+
+
+
+
+ {`${t('fiber.peer.channels')}(${channels.length})`}
+
+
+ Open & Closed Transactions
+
+ {openAndClosedTxs.map(tx => {
+ const key = tx.isOpen ? `${tx.hash}#${tx.index}` : tx.hash
+ if (tx.isOpen) {
+ const account = tx.accounts[0]!
+ return (
+
+
+
+ )
+ }
+ const [acc1, acc2] = tx.accounts
+ return (
+
+
+
+
+
+
+ By
+
+
+
+
+
+ ({account.amount})
+
+ {account.address.slice(0, -8)}
+ {account.address.slice(-8)}
+
+
+
+ )
+ })}
+
+
+
+
+
+
+ To
+
+
+
+
+
+ ({acc1.amount})
+
+ {acc1.address.slice(0, -8)}
+ {acc1.address.slice(-8)}
+
+
+ And
+
+
+
+
+
+ ({acc2.amount})
+
+ {acc2.address.slice(0, -8)}
+ {acc2.address.slice(-8)}
+
+
+ {v || Untitled}
+
+
+ {thresholds.map(threshold => {
+ return (
+
+
+
+ {threshold.display}
+
+
+ )
+ })}
+
+ )
+ },
+ },
+ {
+ key: 'totalCapacity',
+ label: 'total_capacity',
+ transformer: (v: unknown) => {
+ if (typeof v !== 'string') return v
+
+ const ckb = shannonToCkb(v)
+ const amount = parseNumericAbbr(ckb)
+ return (
+
+
+
+
+
+ + CKB Fiber Graph Nodes +
+| {t(`fiber.graph.node.${f.label}`)} | + })} +
|---|
| {f.transformer?.(v, i) ?? v} | + })} +
|
+ |
+
+
+ )
+}
+
+export default Pagination
diff --git a/src/pages/Fiber/Peer/index.module.scss b/src/pages/Fiber/Peer/index.module.scss
new file mode 100644
index 000000000..ace74b7cd
--- /dev/null
+++ b/src/pages/Fiber/Peer/index.module.scss
@@ -0,0 +1,151 @@
+@import '../../../styles/variables.module';
+@import '../../../styles/card.module';
+
+.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);
+ }
+ }
+
+ .overview {
+ @extend %base-card;
+
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+
+ .fields {
+ overflow: hidden;
+ }
+ }
+
+ .id,
+ .connectId {
+ overflow: hidden;
+
+ & > span:first-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ flex-shrink: 1;
+ }
+ }
+
+ .activities {
+ display: flex;
+ gap: 16px;
+ margin-top: 16px;
+
+ .channels,
+ .transactions {
+ flex: 1;
+ background: #fff;
+ border-radius: 6px;
+ padding: 16px;
+ box-shadow: 0 2px 6px 0 #4d4d4d33;
+
+ h3 {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ @media screen and (width < 960px) {
+ flex-direction: column;
+ }
+
+ @media screen and (width < 500px) {
+ thead {
+ display: none;
+ }
+
+ tbody {
+ tr {
+ display: flex;
+ flex-direction: column;
+ padding: 16px 0;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #ccc;
+ }
+
+ td {
+ text-align: left;
+ padding: 0;
+ }
+ }
+ }
+ }
+ }
+
+ @media screen and (width < $extraLargeBreakPoint) {
+ margin: 24px 20px;
+ }
+
+ @media screen and (width < 1030px) {
+ font-size: 14px;
+ }
+}
diff --git a/src/pages/Fiber/Peer/index.tsx b/src/pages/Fiber/Peer/index.tsx
new file mode 100644
index 000000000..e096dee4d
--- /dev/null
+++ b/src/pages/Fiber/Peer/index.tsx
@@ -0,0 +1,194 @@
+import { useEffect, useRef, useState } from 'react'
+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 QRCode from 'qrcode'
+import { Tooltip } from 'antd'
+import Content from '../../../components/Content'
+import { explorerService } from '../../../services/ExplorerService'
+import { useSetToast } from '../../../components/Toast'
+import styles from './index.module.scss'
+import Loading from '../../../components/Loading'
+
+const Peer = () => {
+ const [t] = useTranslation()
+ const [rpcAddr, setRpcAddr] = useState('')
+ const { id } = useParams<{ id: string }>()
+ const qrRef = useRef
+
+ First
+
+
+
+
+ Fiber Peer Not Found
+ }
+ 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 (
+
+
+
+
+
+
+ {connectId ? (
+ -
+
- {t('fiber.peer.peer_id')} +
- + {peer.peerId} + + +
-
+
- + + +
-
+
+
+
+
+ +
+
-
+
- {t('fiber.peer.connect_id')} +
-
+
+ {connectId} + + +
+
-
+
- {t('fiber.peer.open_time')} +
- + Coming soon + +
-
+
- {t('fiber.peer.update_time')} +
- + Coming soon + +
+
+
+ ) : null}
+
+
+
+
+
+
+
+ {`${t('fiber.peer.channels')}(${channels.length})`}
+| {t('fiber.channel.channel_id')} | +{t('fiber.channel.state')} | +
|---|---|
|
+ |
+ {c.stateName} | +
+
+ Open | Close Transactions
+ Coming soon +
+ {v}
+
+
+
+ {`${amount} CKB`}
+
+ Share: coming soon
+
+ )
+ },
+ },
+ {
+ key: 'firstChannelOpenedAt',
+ label: 'open_time',
+ transformer: () => {
+ return Coming soon
+ },
+ },
+ {
+ key: 'lastChannelUpdatedAt',
+ label: 'update_time',
+ transformer: () => {
+ return Coming soon
+ },
+ },
+ {
+ key: 'peerId',
+ label: 'peer_id',
+ transformer: (v: unknown) => {
+ if (typeof v !== 'string') return v
+ return (
+
+
+
+ CKB Fiber Peers
+
+
+
+
+
+
+
+ CKB Fiber Peers
+
+ refetchList()} />
+
+ | {t(`fiber.peer.${f.label}`)} | + })} +
|---|
| {f.transformer?.(v, i) ?? v} | + })} +
|
+ |
+
+
+ )
+ }
+
return (
-
+ Knowledge Size
+
+
+ +
+
+
-
- Knowledge Size
-
-${Number(ckbAmount).toLocaleString('en')}
- ${t('statistic.transaction_num')}:
+ ${t('statistic.transaction_count')}:
${Number(txCount).toLocaleString('en')}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 2fbe2276c..a88663c4a 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -81,6 +81,14 @@ const Hasher = lazy(() => import('../pages/Tools/Hasher'))
const BroadcastTx = lazy(() => import('../pages/Tools/BroadcastTx'))
const CamelCase = lazy(() => import('../pages/Tools/CamelCase'))
const MoleculeParser = lazy(() => import('../pages/Tools/MoleculeParser'))
+// ======
+const FiberPeerList = lazy(() => import('../pages/Fiber/PeerList'))
+const FiberPeer = lazy(() => import('../pages/Fiber/Peer'))
+const FiberChannel = lazy(() => import('../pages/Fiber/Channel'))
+const FiberGraphNodeList = lazy(() => import('../pages/Fiber/GraphNodeList'))
+const FiberGraphNode = lazy(() => import('../pages/Fiber/GraphNode'))
+const FiberGraphChannelList = lazy(() => import('../pages/Fiber/GraphChannelList'))
+// ======
const routes: RouteProps[] = [
{
@@ -346,6 +354,30 @@ const routes: RouteProps[] = [
path: '/tools/molecule-parser',
component: MoleculeParser,
},
+ {
+ path: '/fiber/peers',
+ component: FiberPeerList,
+ },
+ {
+ path: '/fiber/peers/:id',
+ component: FiberPeer,
+ },
+ {
+ path: '/fiber/channels/:id',
+ component: FiberChannel,
+ },
+ {
+ path: '/fiber/graph/nodes',
+ component: FiberGraphNodeList,
+ },
+ {
+ path: '/fiber/graph/node/:id',
+ component: FiberGraphNode,
+ },
+ {
+ path: '/fiber/graph/channels',
+ component: FiberGraphChannelList,
+ },
]
type PageErrorBoundaryState = {
diff --git a/src/services/ExplorerService/fetcher.ts b/src/services/ExplorerService/fetcher.ts
index bd68e347e..9f0ed87e8 100644
--- a/src/services/ExplorerService/fetcher.ts
+++ b/src/services/ExplorerService/fetcher.ts
@@ -70,6 +70,7 @@ export enum SearchResultType {
TokenItem = 'token_item',
DID = 'did',
BtcAddress = 'bitcoin_address',
+ FiberGraphNode = 'fiber_graph_node',
}
enum SearchQueryType {
@@ -113,6 +114,14 @@ export type AggregateSearchResult =
},
SearchResultType.BtcAddress
>
+ | Response.Wrapper<
+ {
+ alias: string
+ nodeId: string
+ peerId: string
+ },
+ SearchResultType.FiberGraphNode
+ >
export const getBtcTxList = (idList: string[]): Promise> => {
if (idList.length === 0) return Promise.resolve({})
@@ -1195,6 +1204,108 @@ export const apiFetcher = {
},
}),
getBtcTxList,
+
+ // ==================
+ // Fiber
+ // ==================
+ getFiberPeerList: (page = 1, pageSize = 10) => {
+ return requesterV2
+ .get(
+ `/fiber/peers?${new URLSearchParams({
+ page: page.toString(),
+ page_size: pageSize.toString(),
+ })}`,
+ )
+ .then(res =>
+ toCamelcase<
+ Response.Response<{
+ fiberPeers: Fiber.Peer.ItemInList[]
+ meta: {
+ total: number
+ pageSize: number
+ }
+ }>
+ >(res.data),
+ )
+ },
+
+ getFiberPeerDetail: (id: string) => {
+ return requesterV2
+ .get(`/fiber/peers/${id}`)
+ .then(res => toCamelcase>(res.data))
+ },
+
+ getFiberChannel: (id: string) => {
+ return requesterV2
+ .get(`/fiber/channels/${id}`)
+ .then(res => toCamelcase>(res.data))
+ },
+
+ addFiberPeer: (params: { rpc: string; id: string; name?: string }) => {
+ return requesterV2
+ .post(`/fiber/peers`, {
+ name: params.name,
+ rpc_listening_addr: params.rpc,
+ peer_id: params.id,
+ })
+ .catch(e => {
+ if (Array.isArray(e.response?.data)) {
+ const res = e.response.data[0]
+ if (res) {
+ throw new Error(res.title)
+ }
+ }
+ throw e
+ })
+ },
+
+ getGraphNodes: (page = 1, pageSize = 10) => {
+ return requesterV2
+ .get(
+ `/fiber/graph_nodes?${new URLSearchParams({
+ page: page.toString(),
+ page_size: pageSize.toString(),
+ })}`,
+ )
+ .then(res =>
+ toCamelcase<
+ Response.Response<{
+ fiberGraphNodes: Fiber.Graph.Node[]
+ meta: {
+ total: number
+ pageSize: number
+ }
+ }>
+ >(res.data),
+ )
+ },
+
+ getGraphNodeDetail: (id: string) => {
+ return requesterV2
+ .get(`/fiber/graph_nodes/${id}`)
+ .then(res => toCamelcase>(res.data))
+ },
+ getGraphChannels: (page = 1, pageSize = 10) => {
+ return requesterV2
+ .get(
+ `/fiber/graph_channels?${new URLSearchParams({
+ page: page.toString(),
+ page_size: pageSize.toString(),
+ status: 'open',
+ })}`,
+ )
+ .then(res =>
+ toCamelcase<
+ Response.Response<{
+ fiberGraphChannels: Fiber.Graph.Channel[]
+ meta: {
+ total: number
+ pageSize: number
+ }
+ }>
+ >(res.data),
+ )
+ },
}
// ====================
@@ -1386,3 +1497,114 @@ export interface RGBTransaction {
rgbCellChanges: number
rgbTxid: string
}
+
+export namespace Fiber {
+ export namespace Peer {
+ interface Base {
+ peerId: string
+ rpcListeningAddr: string[]
+ firstChannelOpenedAt: null // TODO
+ lastChannelUpdatedAt: null // TODO
+ }
+ export interface ItemInList extends Base {
+ name: string
+ channelsCount: number
+ totalLocalBalance: string // shannon amount
+ }
+
+ export interface Detail extends Base {
+ fiberChannels: {
+ peerId: string
+ channelId: string
+ stateName: string // TODO: should be enum
+ stateFlags: [] // TODO
+ }[]
+ }
+ }
+ export namespace Channel {
+ export interface Peer {
+ name?: string
+ peerId: string
+ rpcListeningAddr: string[]
+ }
+ export interface Detail {
+ channelId: string
+ stateName: string // TODO should be name
+ stateFlags: [] // TODO
+ shutdownAt: null // TODO
+ createdAt: string // utc time
+ updatedAt: string // utc time
+ localBalance: string // shannon
+ offeredTlcBalance: string // shannon
+ receivedTlcBalance: string // shannon
+ remoteBalance: string // shannon
+ localPeer: Peer
+ remotePeer: Peer
+ }
+ }
+
+ export namespace Graph {
+ interface UdtConfigInfo {
+ args: string
+ codeHash: string
+ hashType: HashType
+ decimal?: number
+ fullName?: string
+ iconFile?: string
+ symbol?: string
+ autoAcceptAmount: string
+ }
+
+ interface OpenTransactionInfo {
+ address: string
+ blockNumber: number
+ blockTimestamp: number
+ capacity: string
+ txHash: string
+ udtAmount?: string
+ }
+
+ interface ClosedTransactionInfo {
+ blockNumber: number
+ blockTimestamp: number
+ txHash: string
+ closeAccounts: {
+ address: string
+ capacity: string
+ udtAmount: string | null
+ }[]
+ }
+
+ export interface Node {
+ alias: string
+ nodeId: string
+ addresses: string[]
+ timestamp: string
+ chainHash: string
+ autoAcceptMinCkbFundingAmount: string
+ udtCfgInfos: UdtConfigInfo[]
+ totalCapacity: string
+ connectedNodeIds: string[]
+ openChannelsCount: number
+ }
+
+ export interface Channel {
+ channelOutpoint: string
+ node1: string
+ node2: string
+ chainHash: string
+ fundingTxBlockNumber: string
+ fundingTxIndex: string // number
+ lastUpdatedTimestamp: string
+ node1ToNode2FeeRate: string
+ node2ToNode1FeeRate: string
+ capacity: string
+ openTransactionInfo: OpenTransactionInfo
+ closedTransactionInfo: ClosedTransactionInfo
+ }
+
+ export interface NodeDetail extends Node {
+ fiberGraphChannels: Channel[]
+ }
+ }
+}
diff --git a/src/styles/card.module.scss b/src/styles/card.module.scss
new file mode 100644
index 000000000..6d5d707bd
--- /dev/null
+++ b/src/styles/card.module.scss
@@ -0,0 +1,6 @@
+%base-card {
+ background: #fff;
+ border-radius: 6px;
+ padding: 16px;
+ box-shadow: 0 2px 6px 0 #4d4d4d33;
+}
diff --git a/src/styles/table.module.scss b/src/styles/table.module.scss
new file mode 100644
index 000000000..c5052bc78
--- /dev/null
+++ b/src/styles/table.module.scss
@@ -0,0 +1,43 @@
+%base-table {
+ width: 100%;
+ text-align: left;
+ cursor: default;
+ overflow: hidden;
+ border-radius: 6px;
+ box-shadow: rgb(0 0 0 / 12%) 0 2px 6px 0;
+ font-size: 0.875rem;
+
+ tr {
+ background: #fff;
+ }
+
+ td,
+ th {
+ padding: 8px;
+ padding-right: 1rem;
+
+ &:first-child {
+ padding-left: 40px;
+ }
+
+ &:last-child {
+ text-align: right;
+ }
+ }
+
+ thead {
+ th {
+ height: 3.5rem;
+ }
+ }
+
+ tbody {
+ tr:hover {
+ background: #ccc;
+ }
+ }
+
+ .tableSeparator {
+ height: 4px;
+ }
+}
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;
+ }
+}
-
-
)
diff --git a/src/pages/RGBPP/TransactionList/Chart/index.tsx b/src/pages/RGBPP/TransactionList/Chart/index.tsx
index 62308d5f8..6a6046e88 100644
--- a/src/pages/RGBPP/TransactionList/Chart/index.tsx
+++ b/src/pages/RGBPP/TransactionList/Chart/index.tsx
@@ -90,7 +90,7 @@ const useOption = (
name: t('statistic.new_btc_address'),
},
{
- name: t('statistic.transaction_num'),
+ name: t('statistic.btc_transaction_count'),
},
],
},
@@ -120,7 +120,7 @@ const useOption = (
},
{
position: 'right',
- name: isXXL || isThumbnail ? '' : t('statistic.transaction_num'),
+ name: isXXL || isThumbnail ? '' : t('statistic.btc_transaction_count'),
nameTextStyle: {
align: 'right',
},
@@ -143,7 +143,7 @@ const useOption = (
data: dataset.map(data => data.addressesCount + 1),
},
{
- name: t('statistic.transaction_num'),
+ name: t('statistic.btc_transaction_count'),
type: 'line',
yAxisIndex: 1,
symbol: isThumbnail ? 'none' : 'circle',
diff --git a/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx b/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx
index 769e17c32..f9ee3d22b 100644
--- a/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx
+++ b/src/pages/StatisticsChart/activities/ContractResourceDistributed.tsx
@@ -59,7 +59,7 @@ const useOption = (
+
+
+ {t(`banner.fiber_title`)}
+{t(`banner.fiber_subtitle`)}
+
+
+ {t(`banner.learn_more`)}
+
+
+ ) => {
+ e.preventDefault()
+ }}
+ >
+ {t('banner.find_nodes')}
-
+