Add waiting indicator for lnd node connect disconnect (#1343)

* Add waiting indicator for lnd node page click connect or disconnect

* Improved lightning page so page doesn't reload on list peers response

* Fix react warning by making listPeers function useCallback

* Run frontend lint

* Update frontend build

docker/docker-compose.yml

@@ -30,3 +30,8 @@ services:
     sysctls:
       - net.ipv6.conf.all.disable_ipv6=0
     entrypoint: ["./start-lnd.sh"]
+
+  tor-socks-proxy:
+    container_name: tor-socks-proxy
+    image: peterdavehello/tor-socks-proxy:latest
+    restart: unless-stopped

docker/lnd/start-lnd.sh

@@ -73,6 +73,8 @@ elif [[ "$BACKEND" == "bitcoind" ]]; then
 	 --rpclisten=0.0.0.0:10009 \
 	 --debuglevel=$DEBUG \
 	 --tlsextradomain=lnd \
+	 --tor.active \
+	 --tor.socks=tor-socks-proxy:9150 \
 	 $@"
     echo $cmd
     sh ./wait-for-block-index.sh "$cmd"

frontend/src/pages/lightningnode/LightningNode.js

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useParams } from 'react-router-dom';
 import {
   Grid,
   Button,
@@ -7,6 +7,7 @@ import {
   Tabs,
   Tab,
   Box,
+  CircularProgress,
 } from '@material-ui/core';
 
 // styles
@@ -26,20 +27,17 @@ import {
   lndConnectPeerRequest,
   lndDisconnectPeerRequest,
 } from '../../squeakclient/requests';
-import {
-  reloadRoute,
-} from '../../navigation/navigation';
 
 export default function LightningNodePage() {
   const classes = useStyles();
 
-  const history = useHistory();
   const { pubkey, host, port } = useParams();
   const [value, setValue] = useState(0);
   const [peers, setPeers] = useState(null);
   const [channels, setChannels] = useState(null);
   const [pendingChannels, setPendingChannels] = useState(null);
   const [openChannelDialogOpen, setOpenChannelDialogOpen] = useState(false);
+  const [waitingForLightningNode, setWaitingForLightningNode] = useState(false);
 
   function a11yProps(index) {
     return {
@@ -70,6 +68,11 @@ export default function LightningNodePage() {
     disconnectPeer(pubkey);
   };
 
+  const handleListPeersResp = (resp) => {
+    setWaitingForLightningNode(false);
+    setPeers(resp);
+  };
+
   const isConnected = () => {
     if (peers == null) {
       return false;
@@ -96,9 +99,10 @@ export default function LightningNodePage() {
     return false;
   };
 
-  const listPeers = () => {
-    lndListPeersRequest(setPeers);
-  };
+  const listPeers = useCallback(() => {
+    lndListPeersRequest(handleListPeersResp);
+  },
+  []);
   const listChannels = () => {
     lndListChannelsRequest(setChannels);
   };
@@ -106,23 +110,28 @@ export default function LightningNodePage() {
     lndPendingChannelsRequest(setPendingChannels);
   };
   const connectPeer = (pubkey, host) => {
+    setWaitingForLightningNode(true);
     lndConnectPeerRequest(pubkey, host,
       () => {
-        reloadRoute(history);
+        // reloadRoute(history);
+        listPeers();
       },
       (err) => {
+        setWaitingForLightningNode(false);
         alert(err.message);
       });
   };
   const disconnectPeer = (pubkey) => {
+    setWaitingForLightningNode(true);
     lndDisconnectPeerRequest(pubkey, () => {
-      reloadRoute(history);
+      // reloadRoute(history);
+      listPeers();
     });
   };
 
   useEffect(() => {
     listPeers();
-  }, []);
+  }, [listPeers]);
   useEffect(() => {
     listChannels();
   }, []);
@@ -410,7 +419,9 @@ export default function LightningNodePage() {
           </Tabs>
         </AppBar>
         <TabPanel value={value} index={0}>
-          {PubkeyContent()}
+          {waitingForLightningNode
+            ? WaitingIndicator()
+            : PubkeyContent()}
         </TabPanel>
         <TabPanel value={value} index={1}>
           {ChannelsContent()}
@@ -431,6 +442,12 @@ export default function LightningNodePage() {
     );
   }
 
+  function WaitingIndicator() {
+    return (
+      <CircularProgress size={48} className={classes.buttonProgress} />
+    );
+  }
+
   return (
     <>
       {pubkey

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,14 +1,14 @@
 {
   "files": {
-    "main.js": "/static/js/main.8db1c9cb.chunk.js",
-    "main.js.map": "/static/js/main.8db1c9cb.chunk.js.map",
+    "main.js": "/static/js/main.1e7c8482.chunk.js",
+    "main.js.map": "/static/js/main.1e7c8482.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.9f0ba400.js",
     "runtime-main.js.map": "/static/js/runtime-main.9f0ba400.js.map",
     "static/css/2.ea4ba2f0.chunk.css": "/static/css/2.ea4ba2f0.chunk.css",
     "static/js/2.41487159.chunk.js": "/static/js/2.41487159.chunk.js",
     "static/js/2.41487159.chunk.js.map": "/static/js/2.41487159.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.267da555410f033430791308b393b65e.js": "/precache-manifest.267da555410f033430791308b393b65e.js",
+    "precache-manifest.33a28e4c8ace98dd5812e67edf627563.js": "/precache-manifest.33a28e4c8ace98dd5812e67edf627563.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
     "static/js/2.41487159.chunk.js.LICENSE.txt": "/static/js/2.41487159.chunk.js.LICENSE.txt",
@@ -20,6 +20,6 @@
     "static/js/runtime-main.9f0ba400.js",
     "static/css/2.ea4ba2f0.chunk.css",
     "static/js/2.41487159.chunk.js",
-    "static/js/main.8db1c9cb.chunk.js"
+    "static/js/main.1e7c8482.chunk.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><meta name="description" content="Squeaknode is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.41487159.chunk.js"></script><script src="/static/js/main.8db1c9cb.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><meta name="description" content="Squeaknode is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.41487159.chunk.js"></script><script src="/static/js/main.1e7c8482.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.33a28e4c8ace98dd5812e67edf627563.js

@@ -1,6 +1,6 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "89bd4659013a7e3c3f1bf257520718e9",
+    "revision": "ad7bf7cd09a6fecf28fc42e6407963b2",
     "url": "/index.html"
   },
   {
@@ -16,8 +16,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/js/2.41487159.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "fad86327af15245f60a9",
-    "url": "/static/js/main.8db1c9cb.chunk.js"
+    "revision": "0daf93d4ff023862af4f",
+    "url": "/static/js/main.1e7c8482.chunk.js"
   },
   {
     "revision": "cc9816de5a8639d377ea",

squeaknode/admin/webapp/static/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.267da555410f033430791308b393b65e.js"
+  "/precache-manifest.33a28e4c8ace98dd5812e67edf627563.js"
 );
 
 self.addEventListener('message', (event) => {