diff --git a/frontend/squeak-node-frontend/src/components/Layout/Layout.js b/frontend/squeak-node-frontend/src/components/Layout/Layout.js
index 9ed2c952..50f6cd71 100644
--- a/frontend/squeak-node-frontend/src/components/Layout/Layout.js
+++ b/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) {
+
+
+
diff --git a/frontend/squeak-node-frontend/src/pages/lightningnode/LightningNode.js b/frontend/squeak-node-frontend/src/pages/lightningnode/LightningNode.js
new file mode 100644
index 00000000..05f773c4
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ pubkey
+
+ {pubkey}
+
+
+
+
+
+
+ host
+
+ {host}
+
+
+
+
+
+
+ port
+
+ {port}
+
+
+
+
+
+
+ connected
+
+ false
+
+
+
+
+ )
+ }
+
+ function NoPubkeyContent() {
+ return (
+
+ No pubkey.
+
+ )
+ }
+
+ function PubkeyContent() {
+ return (
+ <>
+
+ {NodeInfoGridItem()}
+
+ >
+ )
+ }
+
+ function TabPanel(props) {
+ const { children, value, index, ...other } = props;
+
+ return (
+
+ {value === index && (
+
{children}
+ )}
+
+ );
+ }
+
+ function LightningNodeTabs() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {PubkeyContent()}
+
+
+ fooo
+
+
+ barrr
+
+ >
+ )
+ }
+
+ return (
+ <>
+
+ {pubkey
+ ? LightningNodeTabs()
+ : NoPubkeyContent()
+ }
+ >
+ );
+}
diff --git a/frontend/squeak-node-frontend/src/pages/lightningnode/package.json b/frontend/squeak-node-frontend/src/pages/lightningnode/package.json
new file mode 100644
index 00000000..916552e2
--- /dev/null
+++ b/frontend/squeak-node-frontend/src/pages/lightningnode/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "LightningNode",
+ "version": "0.0.0",
+ "main": "LightningNode.js",
+ "private": true
+}
diff --git a/frontend/squeak-node-frontend/src/pages/lightningnode/styles.js b/frontend/squeak-node-frontend/src/pages/lightningnode/styles.js
new file mode 100644
index 00000000..976accde
--- /dev/null
+++ b/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),
+ },
+}));