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()
+ }
+
>
)
}