Skip to content

Commit

Permalink
feat: optimize ui of fiber graph nodes and channels
Browse files Browse the repository at this point in the history
  • Loading branch information
@Keith-CY
Keith-CY committed Dec 2, 2024
1 parent 66efc52 commit 16a9aad
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 111 deletions.
86 changes: 51 additions & 35 deletions src/components/GraphChannelList/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import '../../styles/variables.module';
@import '../../styles/text.module';

.container {
font-size: 0.875rem;

Expand All @@ -12,14 +15,20 @@
dl {
display: flex;
gap: 4px;

@media screen and (width <= $mobileBreakPoint) {
display: block;
}
}

dl,
dd,
dt {
margin: 0;
white-space: pre;
flex-wrap: wrap;

/* white-space: pre; */

/* flex-wrap: wrap; */
}

dt {
Expand All @@ -34,53 +43,45 @@
gap: 4px;
}

.general {
dd {
.content {
& > *:first-child {
display: none;
}

@media screen and (width<800px) {
& > *:first-child {
display: flex;
}

& > *:last-child {
display: none;
}
}
}

.content[data-is-full-width='false'] {
& > *:first-child {
display: flex;
}

& > *:last-child {
display: none;
}
}
}
}

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

.funder {
flex: 0.4;
min-width: 180px;
}
}

.outPoint {
dd {
overflow: hidden;
}

a {
@extend %hash;
}
}

.nodesContainer {
Expand All @@ -89,6 +90,12 @@
padding: 8px;
margin-top: 8px;
background: rgb(0 0 0 / 3%);

dt,
dd {
display: flex;
flex-wrap: nowrap;
}
}

.nodes {
Expand All @@ -114,9 +121,18 @@

.node {
flex: 1;
overflow: hidden;

dd {
overflow: hidden;
}

a {
@extend %hash;
}
}

@media screen and (width<690px) {
@media screen and (width <= $mobileBreakPoint) {
flex-direction: column;
}
}
Expand Down
104 changes: 39 additions & 65 deletions src/components/GraphChannelList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,18 @@ import type { Fiber } from '../../services/ExplorerService/fetcher'
import { parseNumericAbbr } from '../../utils/chart'
import { localeNumberString } from '../../utils/number'
import { shannonToCkb } from '../../utils/util'
import AddressText from '../AddressText'
import styles from './index.module.scss'

const TIME_TEMPLATE = 'YYYY/MM/DD hh:mm:ss'

const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean; node?: string }> = ({
list,
isFullWidth = true,
node,
}) => {
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 => {
{list.map((channel, i) => {
const outPoint = {
txHash: channel.channelOutpoint.slice(0, -8),
index: parseInt(channel.channelOutpoint.slice(-8), 16),
Expand All @@ -39,23 +34,21 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
? parseNumericAbbr(channel.outpointInfo.fundingUdtAmount)
: null

const outpoint = `${outPoint.txHash}#${outPoint.index}`

return (
<div key={channel.channelOutpoint} className={styles.channel}>
<h1>General</h1>
<div className={styles.general}>
<h1>Channel #{i + 1}</h1>
<div>
<dl className={styles.outPoint}>
<dt>Out Point</dt>
<dd>
<div className={styles.content}>
<Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
<Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
{`${outPoint.txHash.slice(0, 6)}...${outPoint.txHash.slice(-6)}#${outPoint.index}`}
</Link>
</Tooltip>
<Tooltip title={`${outPoint.txHash}#${outPoint.index}`}>
<Link to={`/transaction/${outPoint.txHash}#${outPoint.index}`}>
{`${outPoint.txHash}#${outPoint.index}`}
<div>{outpoint.slice(0, -15)}</div>
<div>{outpoint.slice(-15)}</div>
</Link>
</div>
</Tooltip>
<button type="button" data-copy-text={outPoint.txHash}>
<CopyIcon />
</button>
Expand All @@ -71,57 +64,38 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
</dd>
</dl>
<dl className={styles.funding}>
<dt>Funding</dt>
<dd>
<Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
<span>{`${fundingCkbAmount} CKB`}</span>
</Tooltip>
{fundingUdtAmount ? '&' : null}
{fundingUdtAmount}
from
<div className={styles.funder}>
<AddressText
linkProps={{
to: `/address/${channel.outpointInfo.fundingAddress}`,
}}
>
{channel.outpointInfo.fundingAddress}
</AddressText>
</div>
</dd>
</dl>

<dl className={styles.chainHash}>
<dt>Chain Hash</dt>
<dt>Source</dt>
<dd>
<div className={styles.content}>
<Tooltip title={channel.chainHash}>
<span className="monospace">{`${channel.chainHash.slice(0, 8)}...${channel.chainHash.slice(
-8,
)}`}</span>
{fundingUdtAmount || (
<Tooltip title={`${localeNumberString(fundingCkb)} CKB`}>
<span>{`${fundingCkbAmount} CKB`}</span>
</Tooltip>
<span className="monospace">{channel.chainHash}</span>
</div>
<button type="button" data-copy-text={channel.chainHash}>
<CopyIcon />
</button>
)}
from
<Tooltip title={channel.outpointInfo.fundingAddress}>
<Link to={`/address/${channel.outpointInfo.fundingAddress}`} className={styles.address}>
<div>{channel.outpointInfo.fundingAddress.slice(0, -15)}</div>
<div>{channel.outpointInfo.fundingAddress.slice(-15)}</div>
</Link>
</Tooltip>
</dd>
</dl>

<dl className={styles.time}>
<dt>Funded at</dt>
<dl>
<dt>Position</dt>
<dd>
<Link to={`/block/${channel.fundingTxBlockNumber}`}>
{localeNumberString(channel.fundingTxBlockNumber)}
</Link>
(<div>{dayjs(+channel.lastUpdatedTimestamp).format(TIME_TEMPLATE)}</div>)
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} data-is-full-width={!!isFullWidth}>
<div className={styles.nodes}>
<div className={styles.node}>
<h3>
First Node
Expand All @@ -131,10 +105,10 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
<dt>ID</dt>
<dd>
<Tooltip title={channel.node1}>
<Link to={`/fiber/graph/node/${channel.node1}`} className="monospace">{`0x${channel.node1.slice(
0,
8,
)}...${channel.node1.slice(-8)}`}</Link>
<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 />
Expand All @@ -155,10 +129,10 @@ const GraphChannelList: FC<{ list: Fiber.Graph.Channel[]; isFullWidth?: boolean;
<dt>ID</dt>
<dd>
<Tooltip title={channel.node2}>
<Link to={`/fiber/graph/node/${channel.node2}`} className="monospace">{`0x${channel.node2.slice(
0,
8,
)}...${channel.node2.slice(-8)}`}</Link>
<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 />
Expand Down
3 changes: 3 additions & 0 deletions src/constants/fiberChainHash.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export const ChainHash = new Map([
['0x0000000000000000000000000000000000000000000000000000000000000000', 'CKB Testnet'],
])
1 change: 1 addition & 0 deletions src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1111,6 +1111,7 @@
"auto_accept_funding_amount": "Auto-accepting Threshold",
"first_seen": "First Seen",
"node_id": "Node ID",
"chain": "Chain",
"chain_hash": "Chain Hash",
"addresses": "Addresses",
"total_capacity": "Capacity",
Expand Down
44 changes: 42 additions & 2 deletions src/pages/Fiber/GraphNode/index.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '../../../styles/variables.module';
@import '../../../styles/card.module';
@import '../../../styles/text.module';

.container {
text-wrap: nowrap;
Expand Down Expand Up @@ -103,6 +104,11 @@
margin-left: 8px;
display: flex;
flex-direction: column;
align-items: flex-start;

img {
flex: 0 0;
}

.token {
display: flex;
Expand All @@ -119,7 +125,8 @@

.channels,
.transactions {
flex: 1;
overflow: hidden;
flex-basis: 50%;
background: #fff;
border-radius: 6px;
padding: 16px;
Expand All @@ -131,7 +138,7 @@
}
}

@media screen and (width < 960px) {
@media screen and (width < $mobileBreakPoint) {
flex-direction: column;
}

Expand Down Expand Up @@ -167,3 +174,36 @@
font-size: 14px;
}
}

.addresses {
select {
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
}
}

.tx {
padding: 8px 8px 0;
display: flex;
align-items: center;
gap: 4px;

a {
@extend %monospace;

display: flex;
align-items: center;
overflow: hidden;
user-select: none;

div {
font-family: inherit;
}

div:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
Loading

0 comments on commit 16a9aad

Please sign in to comment.