Add lightning node page (#246)

* Add lightningnode page

* Add tabs to lightning node page

* Show node info for lightning node in node info tab

* Fix style of lightning node page

* Add port number to params for lightning node page

frontend/squeak-node-frontend/src/components/Layout/Layout.js

@@ -22,6 +22,7 @@ import Squeak from "../../pages/squeak";
 import Buy from "../../pages/buy";
 import Profile from "../../pages/profile";
 import Lightning from "../../pages/lightning";
+import LightningNode from "../../pages/lightningnode";
 import Notifications from "../../pages/notifications";
 import Maps from "../../pages/maps";
 import Profiles from "../../pages/profiles";
@@ -59,6 +60,9 @@ function Layout(props) {
               <Route path="/app/profile/:id" component={Profile} />
               <Route path="/app/profiles" component={Profiles} />
               <Route path="/app/lightning" component={Lightning} />
+              <Route path="/app/lightningnode/:pubkey/:host/:port" component={LightningNode} />
+              <Route path="/app/lightningnode/:pubkey/:host" component={LightningNode} />
+              <Route path="/app/lightningnode/:pubkey" component={LightningNode} />
               <Route path="/app/peers" component={Peers} />
               <Route path="/app/peer/:id" component={Peer} />
               <Route path="/app/notifications" component={Notifications} />

frontend/squeak-node-frontend/src/pages/lightningnode/LightningNode.js

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import {useHistory} from "react-router-dom";
+import {
+  Grid,
+  Button,
+  AppBar,
+  Tabs,
+  Tab,
+} from "@material-ui/core";
+import { useTheme } from "@material-ui/styles";
+import {
+  ResponsiveContainer,
+  ComposedChart,
+  AreaChart,
+  LineChart,
+  Line,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  YAxis,
+  XAxis,
+} from "recharts";
+
+// styles
+import useStyles from "./styles";
+
+// components
+import PageTitle from "../../components/PageTitle";
+import Widget from "../../components/Widget";
+import { Typography } from "../../components/Wrappers";
+
+import { GetInfoRequest, WalletBalanceRequest } from "../../proto/lnd_pb"
+import { client } from "../../squeakclient/squeakclient"
+
+
+export default function LightningNodePage() {
+  var classes = useStyles();
+  var theme = useTheme();
+
+  const history = useHistory();
+  const { pubkey, host, port } = useParams();
+  const [value, setValue] = useState(0);
+
+  function a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
+
+  function NodeInfoGridItem() {
+    return (
+      <Grid item xs={12}>
+      <Widget disableWidgetMenu>
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+      >
+        <Grid item>
+          <Typography color="text" colorBrightness="secondary">
+            pubkey
+          </Typography>
+          <Typography size="md">{pubkey}</Typography>
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+      >
+        <Grid item>
+          <Typography color="text" colorBrightness="secondary">
+            host
+          </Typography>
+          <Typography size="md">{host}</Typography>
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+      >
+        <Grid item>
+          <Typography color="text" colorBrightness="secondary">
+            port
+          </Typography>
+          <Typography size="md">{port}</Typography>
+        </Grid>
+      </Grid>
+
+      <Grid
+        container
+        direction="row"
+        justify="flex-start"
+        alignItems="center"
+      >
+        <Grid item>
+          <Typography color="text" colorBrightness="secondary">
+            connected
+          </Typography>
+          <Typography size="md">false</Typography>
+        </Grid>
+      </Grid>
+       </Widget>
+      </Grid>
+    )
+  }
+
+  function NoPubkeyContent() {
+    return (
+      <div>
+        No pubkey.
+      </div>
+    )
+  }
+
+  function PubkeyContent() {
+    return (
+      <>
+        <Grid container spacing={4}>
+          {NodeInfoGridItem()}
+        </Grid>
+      </>
+    )
+  }
+
+  function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+
+    return (
+      <div
+        role="tabpanel"
+        hidden={value !== index}
+        id={`simple-tabpanel-${index}`}
+        aria-labelledby={`simple-tab-${index}`}
+        {...other}
+      >
+        {value === index && (
+          <div>{children}</div>
+        )}
+      </div>
+    );
+  }
+
+  function LightningNodeTabs() {
+    return (
+      <>
+      <AppBar position="static" color="default">
+        <Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
+          <Tab label="Node Info" {...a11yProps(0)} />
+          <Tab label="Channels" {...a11yProps(1)} />
+          <Tab label="Pending Channels" {...a11yProps(2)} />
+        </Tabs>
+      </AppBar>
+      <TabPanel value={value} index={0}>
+        {PubkeyContent()}
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        fooo
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+        barrr
+      </TabPanel>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <PageTitle title={'Lightning Node: ' + pubkey} />
+      {pubkey
+        ? LightningNodeTabs()
+        : NoPubkeyContent()
+      }
+    </>
+  );
+}

frontend/squeak-node-frontend/src/pages/lightningnode/package.json

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

frontend/squeak-node-frontend/src/pages/lightningnode/styles.js

@@ -0,0 +1,15 @@
+import { makeStyles } from "@material-ui/styles";
+
+export default makeStyles(theme => ({
+  dashedBorder: {
+    border: "1px dashed",
+    borderColor: theme.palette.primary.main,
+    padding: theme.spacing(2),
+    paddingTop: theme.spacing(4),
+    paddingBottom: theme.spacing(4),
+    marginTop: theme.spacing(1),
+  },
+  text: {
+    marginBottom: theme.spacing(2),
+  },
+}));