Skip to content

Commit

Permalink
feat: stylize peer page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Keith-CY
Keith-CY committed Sep 25, 2024
1 parent 5fb7991 commit 1bfb0b8
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 93 deletions.
63 changes: 56 additions & 7 deletions src/pages/Fiber/Peer/index.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,20 @@
}
}

.overview {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #fff;
border-radius: 6px;
padding: 16px;
box-shadow: 0 2px 6px 0 #4d4d4d33;

.fields {
overflow: hidden;
}
}

.id,
.connectId {
overflow: hidden;
Expand All @@ -81,15 +95,50 @@
}
}

.channels,
.transactions {
.activities {
display: flex;
gap: 16px;
margin-top: 16px;
border-top: 1px solid #ccc;
padding-top: 16px;

h3 {
margin: 0;
padding: 0;
.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;
}
}
}
}
}

Expand Down
168 changes: 86 additions & 82 deletions src/pages/Fiber/Peer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,99 +88,103 @@ const Peer = () => {
return (
<Content>
<div className={styles.container} onClick={handleCopy}>
<div>
<dl>
<dt>{t('fiber.peer.peer_id')}</dt>
<dd className={styles.id}>
<span>{peer.peerId}</span>
<button type="button" data-copy-text={peer.peerId}>
<CopyIcon />
</button>
</dd>
</dl>
<dl>
<dt>
<label htmlFor="rpc-addr">{t('fiber.peer.rpc_addr')}</label>
</dt>
<dd>
<select name="rpc-addr" id="rpc-addr" onChange={handleRpcAddrSelect}>
{peer.rpcListeningAddr.map(ra => {
return (
<option value={ra} key={ra}>
{ra}
</option>
)
})}
</select>
<button type="button" data-copy-text={peer.rpcListeningAddr}>
<CopyIcon />
</button>
<a href={rpcAddr} title={rpcAddr} target="_blank" rel="noopener noreferrer">
<OpenInNewWindowIcon />
</a>
</dd>
</dl>
{connectId ? (
<div className={styles.overview}>
<div className={styles.fields}>
<dl>
<dt>{t('fiber.peer.connect_id')}</dt>
<dd className={styles.connectId}>
<Tooltip title={connectId}>
<span>{connectId}</span>
</Tooltip>
<button type="button" data-copy-text={connectId}>
<dt>{t('fiber.peer.peer_id')}</dt>
<dd className={styles.id}>
<span>{peer.peerId}</span>
<button type="button" data-copy-text={peer.peerId}>
<CopyIcon />
</button>
</dd>
</dl>
) : null}
<dl>
<dt>
<label htmlFor="rpc-addr">{t('fiber.peer.rpc_addr')}</label>
</dt>
<dd>
<select name="rpc-addr" id="rpc-addr" onChange={handleRpcAddrSelect}>
{peer.rpcListeningAddr.map(ra => {
return (
<option value={ra} key={ra}>
{ra}
</option>
)
})}
</select>
<button type="button" data-copy-text={peer.rpcListeningAddr}>
<CopyIcon />
</button>
<a href={rpcAddr} title={rpcAddr} target="_blank" rel="noopener noreferrer">
<OpenInNewWindowIcon />
</a>
</dd>
</dl>
{connectId ? (
<dl>
<dt>{t('fiber.peer.connect_id')}</dt>
<dd className={styles.connectId}>
<Tooltip title={connectId}>
<span>{connectId}</span>
</Tooltip>
<button type="button" data-copy-text={connectId}>
<CopyIcon />
</button>
</dd>
</dl>
) : null}
<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>
{connectId ? (
<div>
<canvas ref={qrRef} className={styles.qrcode} />
</div>
) : null}
<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 className={styles.channels}>
<h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
<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 className={styles.transactions}>
<h3>Open | Close Transactions</h3>
<small>Coming soon</small>
<div className={styles.activities}>
<div className={styles.channels}>
<h3>{`${t('fiber.peer.channels')}(${channels.length})`}</h3>
<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 className={styles.transactions}>
<h3>Open | Close Transactions</h3>
<small>Coming soon</small>
</div>
</div>
</div>
</Content>
Expand Down
8 changes: 4 additions & 4 deletions src/services/ExplorerService/fetcher.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1206,10 +1206,10 @@ export const apiFetcher = {
toCamelcase<
Response.Response<{
fiberPeers: Fiber.Peer.ItemInList[]
// meta: {
// total: number
// pageSize: number
// }
meta: {
total: number
pageSize: number
}
}>
>(res.data),
)
Expand Down

0 comments on commit 1bfb0b8

Please sign in to comment.