From 4bd11da03bf06e2e6c395715eddac75b284f7ea1 Mon Sep 17 00:00:00 2001 From: Jonathan Zernik Date: Sun, 11 Oct 2020 01:23:44 -0700 Subject: [PATCH] Show peers list (#281) * Add new tab for peers in wallet page * Show peers list in peers tabl * Include address in peer list item * Go to lightning node page from peers list item click --- .../LightningPeerListItem.js | 111 ++++++++++++++++++ .../LightningPeerListItem/package.json | 6 + .../LightningPeerListItem/styles.js | 43 +++++++ .../src/pages/wallet/Wallet.js | 69 +++++++++++ 4 files changed, 229 insertions(+) create mode 100644 frontend/squeak-node-frontend/src/components/LightningPeerListItem/LightningPeerListItem.js create mode 100644 frontend/squeak-node-frontend/src/components/LightningPeerListItem/package.json create mode 100644 frontend/squeak-node-frontend/src/components/LightningPeerListItem/styles.js diff --git a/frontend/squeak-node-frontend/src/components/LightningPeerListItem/LightningPeerListItem.js b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/LightningPeerListItem.js new file mode 100644 index 00000000..5d5173d4 --- /dev/null +++ b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/LightningPeerListItem.js @@ -0,0 +1,111 @@ +import React, { useState } from "react"; +import { + Paper, + IconButton, + Menu, + MenuItem, + Typography, + Grid, + Box, + Link, +} from "@material-ui/core"; +import { MoreVert as MoreIcon } from "@material-ui/icons"; +import {useHistory} from "react-router-dom"; +import classnames from "classnames"; + +import LockIcon from '@material-ui/icons/Lock'; + +// styles +import useStyles from "./styles"; + +import Widget from "../../components/Widget"; + +import moment from 'moment'; + +export default function LightningPeerListItem({ + peer, + ...props +}) { + var classes = useStyles(); + + const history = useHistory(); + + const onPeerClick = (event) => { + event.preventDefault(); + console.log("Handling peer click..."); + goToLightningNodePage(); + } + + const goToLightningNodePage = () => { + var pubkey = peer.getPubKey(); + var host = getPeerHost(); + var port = getPeerPort(); + history.push("/app/lightningnode/" + pubkey + "/" + host + "/" + port); + }; + + const getPeerHost = () => { + var address = peer.getAddress(); + if (address == null) { + return null; + } + var pieces = address.split(":"); + return pieces[0]; + } + + const getPeerPort = () => { + var address = peer.getAddress(); + if (address == null) { + return null; + } + var pieces = address.split(":"); + if (pieces.length < 2) { + return null; + } + return pieces[1]; + } + + function PeerContent() { + return ( + {peer.getPubKey()} + + ) + } + + return ( + + + + Pubkey: {peer.getPubKey()} + + + + + + Address: {peer.getAddress()} + + + + + ) +} diff --git a/frontend/squeak-node-frontend/src/components/LightningPeerListItem/package.json b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/package.json new file mode 100644 index 00000000..0f240222 --- /dev/null +++ b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/package.json @@ -0,0 +1,6 @@ +{ + "name": "LightningPeerListItem", + "version": "0.0.0", + "private": true, + "main": "LightningPeerListItem.js" +} diff --git a/frontend/squeak-node-frontend/src/components/LightningPeerListItem/styles.js b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/styles.js new file mode 100644 index 00000000..f2d64da1 --- /dev/null +++ b/frontend/squeak-node-frontend/src/components/LightningPeerListItem/styles.js @@ -0,0 +1,43 @@ +import { makeStyles } from "@material-ui/styles"; + +export default makeStyles(theme => ({ + widgetWrapper: { + display: "flex", + minHeight: "100%", + }, + widgetHeader: { + padding: theme.spacing(3), + paddingBottom: theme.spacing(1), + display: "flex", + justifyContent: "space-between", + alignItems: "center", + }, + widgetRoot: { + boxShadow: theme.customShadows.widget, + }, + widgetBody: { + paddingBottom: theme.spacing(3), + paddingRight: theme.spacing(3), + paddingLeft: theme.spacing(3), + }, + noPadding: { + padding: 0, + }, + paper: { + display: "flex", + flexDirection: "column", + flexGrow: 1, + overflow: "hidden", + }, + moreButton: { + margin: -theme.spacing(1), + padding: 0, + width: 40, + height: 40, + color: theme.palette.text.hint, + "&:hover": { + backgroundColor: theme.palette.primary.main, + color: "rgba(255, 255, 255, 0.35)", + }, + }, +})); diff --git a/frontend/squeak-node-frontend/src/pages/wallet/Wallet.js b/frontend/squeak-node-frontend/src/pages/wallet/Wallet.js index 1c813b90..e6b41bb3 100644 --- a/frontend/squeak-node-frontend/src/pages/wallet/Wallet.js +++ b/frontend/squeak-node-frontend/src/pages/wallet/Wallet.js @@ -33,11 +33,13 @@ import Widget from "../../components/Widget"; import { Typography } from "../../components/Wrappers"; import ReceiveBitcoinDialog from "../../components/ReceiveBitcoinDialog"; import TransactionItem from "../../components/TransactionItem"; +import LightningPeerListItem from "../../components/LightningPeerListItem"; import { GetInfoRequest, WalletBalanceRequest, GetTransactionsRequest, + ListPeersRequest, } from "../../proto/lnd_pb" import { client } from "../../squeakclient/squeakclient" @@ -48,6 +50,7 @@ export default function WalletPage() { const [lndInfo, setLndInfo] = useState(null); const [walletBalance, setWalletBalance] = useState(null); const [transactions, setTransactions] = useState([]); + const [peers, setPeers] = useState(null); const [value, setValue] = useState(0); const [receiveBitcoinDialogOpen, setReceiveBitcoinDialogOpen] = useState(false); @@ -106,6 +109,20 @@ export default function WalletPage() { }); }; + const listPeers = () => { + console.log("called listPeers"); + + var listPeersRequest = new ListPeersRequest() + console.log(listPeersRequest); + + client.lndListPeers(listPeersRequest, {}, (err, response) => { + console.log(response); + console.log("response.getPeersList()"); + console.log(response.getPeersList()); + setPeers(response.getPeersList()); + }); + }; + useEffect(()=>{ getLndInfo() },[]); @@ -115,6 +132,9 @@ export default function WalletPage() { useEffect(()=>{ getTransactions() },[]); + useEffect(()=>{ + listPeers() + },[]); function ReceiveBitcoinButton() { return ( @@ -188,6 +208,16 @@ export default function WalletPage() { ) } + function PeersContent() { + return ( + <> + + {PeersGridItem()} + + + ) + } + function BalanceGridItem() { return ( @@ -375,6 +405,38 @@ export default function WalletPage() { ) } + function PeersGridItem() { + return ( + + + + + {peers.map(peer => + + goToSqueakPage(transaction.getSqueakHash())} + handlePeerClick={() => console.log("clicked peer")} + peer={peer}> + + + )} + + + + + + ) + } + function TabPanel(props) { const { children, value, index, ...other } = props; @@ -401,6 +463,7 @@ export default function WalletPage() { + @@ -421,6 +484,12 @@ export default function WalletPage() { : NoBalanceContent() } + + {(peers != null) + ? PeersContent() + : NoBalanceContent() + } + ) }