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

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 (
+      <Typography
+        size="md"
+        >{peer.getPubKey()}
+      </Typography>
+    )
+  }
+
+  return (
+    <Box
+      p={1}
+      m={0}
+      style={{backgroundColor: 'lightgray'}}
+      onClick={onPeerClick}
+      >
+          <Grid
+            container
+            direction="row"
+            justify="flex-start"
+            alignItems="flex-start"
+          >
+          <Grid item>
+            <Typography
+              size="md"
+              >Pubkey: {peer.getPubKey()}
+            </Typography>
+          </Grid>
+          </Grid>
+          <Grid
+            container
+            direction="row"
+            justify="flex-start"
+            alignItems="flex-start"
+          >
+          <Grid item>
+            <Typography
+              size="md"
+              >Address: {peer.getAddress()}
+            </Typography>
+          </Grid>
+          </Grid>
+    </Box>
+  )
+}

frontend/squeak-node-frontend/src/components/LightningPeerListItem/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "LightningPeerListItem",
+  "version": "0.0.0",
+  "private": true,
+  "main": "LightningPeerListItem.js"
+}

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)",
+    },
+  },
+}));

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 (
+      <>
+        <Grid container spacing={4}>
+          {PeersGridItem()}
+        </Grid>
+      </>
+    )
+  }
+
   function BalanceGridItem() {
     return (
       <Grid item xs={12}>
@@ -375,6 +405,38 @@ export default function WalletPage() {
     )
   }
 
+  function PeersGridItem() {
+    return (
+      <Grid item xs={12}>
+      <Widget disableWidgetMenu>
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+      >
+        <Grid item xs={12}>
+        {peers.map(peer =>
+          <Box
+            p={1}
+            key={peer.getPubKey()}
+            >
+          <LightningPeerListItem
+            key={peer.getPubKey()}
+            // handleTransactionClick={() => goToSqueakPage(transaction.getSqueakHash())}
+            handlePeerClick={() => console.log("clicked peer")}
+            peer={peer}>
+          </LightningPeerListItem>
+          </Box>
+        )}
+        </Grid>
+      </Grid>
+      </Widget>
+      </Grid>
+
+    )
+  }
+
   function TabPanel(props) {
     const { children, value, index, ...other } = props;
 
@@ -401,6 +463,7 @@ export default function WalletPage() {
           <Tab label="Balance" {...a11yProps(0)} />
           <Tab label="Node Info" {...a11yProps(1)} />
           <Tab label="Transactions" {...a11yProps(2)} />
+          <Tab label="Peers" {...a11yProps(3)} />
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>
@@ -421,6 +484,12 @@ export default function WalletPage() {
           : NoBalanceContent()
         }
       </TabPanel>
+      <TabPanel value={value} index={3}>
+        {(peers != null)
+          ? PeersContent()
+          : NoBalanceContent()
+        }
+      </TabPanel>
       </>
     )
   }