GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-16 13:01:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add node info tab (#245)

Browse source 
* Add node info tab in lighting page

* Add node pubkey to node status tab
This commit is contained in:
Jonathan Zernik 2020-08-17 00:45:15 -07:00 • committed by GitHub
parent 4fe34e2696
commit b42e783338
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 108 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

209
frontend/squeak-node-frontend/src/pages/lightning/Lightning.js
View file

@ -83,7 +83,7 @@ export default function LightningPage() {
getWalletBalance()
},[]);
function NoInfoContent() {
function NoBalanceContent() {
return (
<div>
Unable to fetch lightning info.
@ -108,81 +108,125 @@ export default function LightningPage() {
)
}
function InfoContent() {
function BalanceContent() {
return (
<>
<Grid container spacing={4}>
{PubkeyGridItem()}
</Grid>
<Grid container spacing={4}>
{StatusGridItem()}
{ChannelsGridItem()}
{BalanceGridItem()}
</Grid>
</>
)
}
function PubkeyGridItem() {
function NodeInfoContent() {
return (
<>
<Grid container spacing={4}>
{StatusGridItem()}
</Grid>
</>
)
}
function BalanceGridItem() {
return (
<Grid item xs={12}>
<Widget
title="Node info"
disableWidgetMenu
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
<div className={classes.visitsNumberContainer}>
<Typography color="text" colorBrightness="secondary">
pubkey
</Typography>
<Typography size="md" weight="medium">
{lndInfo.getIdentityPubkey()}
</Typography>
</div>
</Widget>
<Widget disableWidgetMenu>
<div>
<Typography variant="h1" className={classes.text}>
{walletBalance.getTotalBalance()} satoshis
</Typography>
</div>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
unconfirmed balance (satoshis)
</Typography>
<Typography size="md">{walletBalance.getUnconfirmedBalance()}</Typography>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
confirmed balance (satoshis):
</Typography>
<Typography size="md">{walletBalance.getConfirmedBalance()}</Typography>
</Grid>
</Grid>
</Widget>
</Grid>
)
}
function StatusGridItem() {
return (
<Grid item lg={3} md={4} sm={6} xs={12}>
<Widget
title="Node status"
disableWidgetMenu
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
synced to chain
</Typography>
<Typography size="md">{lndInfo.getSyncedToChain().toString()}</Typography>
</Grid>
<Grid item>
<Typography color="text" colorBrightness="secondary">
synced to graph
</Typography>
<Typography size="md">{lndInfo.getSyncedToGraph().toString()}</Typography>
</Grid>
<Grid item>
<Typography color="text" colorBrightness="secondary">
block height
</Typography>
<Typography size="md">{lndInfo.getBlockHeight()}</Typography>
</Grid>
</Grid>
</Widget>
<Grid item xs={12}>
<Widget disableWidgetMenu>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
node pubkey
</Typography>
<Typography size="md">{lndInfo.getIdentityPubkey()}</Typography>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
synced to chain
</Typography>
<Typography size="md">{lndInfo.getSyncedToChain().toString()}</Typography>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
synced to graph
</Typography>
<Typography size="md">{lndInfo.getSyncedToGraph().toString()}</Typography>
</Grid>
</Grid>
<Grid
container
direction="row"
justify="flex-start"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
block height
</Typography>
<Typography size="md">{lndInfo.getBlockHeight()}</Typography>
</Grid>
</Grid>
</Widget>
</Grid>
)
}
@ -226,46 +270,6 @@ export default function LightningPage() {
)
}
function BalanceGridItem() {
return (
<Grid item lg={3} md={4} sm={6} xs={12}>
<Widget
title="Balance"
disableWidgetMenu
upperTitle
bodyClass={classes.fullHeightBody}
className={classes.card}
>
<Grid
container
direction="row"
justify="space-between"
alignItems="center"
>
<Grid item>
<Typography color="text" colorBrightness="secondary">
total balance
</Typography>
<Typography size="md">{walletBalance.getTotalBalance()}</Typography>
</Grid>
<Grid item>
<Typography color="text" colorBrightness="secondary">
confirmed balance
</Typography>
<Typography size="md">{walletBalance.getConfirmedBalance()}</Typography>
</Grid>
<Grid item>
<Typography color="text" colorBrightness="secondary">
unconfirmed balance
</Typography>
<Typography size="md">{walletBalance.getUnconfirmedBalance()}</Typography>
</Grid>
</Grid>
</Widget>
</Grid>
)
}
function TabPanel(props) {
const { children, value, index, ...other } = props;
@ -295,12 +299,15 @@ export default function LightningPage() {
</AppBar>
<TabPanel value={value} index={0}>
{(lndInfo && walletBalance)
? InfoContent()
: NoInfoContent()
? BalanceContent()
: NoBalanceContent()
}
</TabPanel>
<TabPanel value={value} index={1}>
foooo
{(lndInfo && walletBalance)
? NodeInfoContent()
: NoBalanceContent()
}
</TabPanel>
</>
)