Show external address in dialog on button click and remove from page … (#1258)

* Show external address in dialog on button click and remove from page text

* Run frontend lint

* Remove unused reset fields function

* Update frontend build

frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+} from '@material-ui/core';
+
+// styles
+import useStyles from './styles';
+
+import {
+  getExternalAddressRequest,
+} from '../../squeakclient/requests';
+
+export default function ShowExternalAddressDialog({
+  open,
+  handleClose,
+  ...props
+}) {
+  const classes = useStyles();
+
+  const [externalAddress, setExternalAddress] = useState(null);
+
+  const getExternalAddress = () => {
+    getExternalAddressRequest(setExternalAddress);
+  };
+
+  function load(event) {
+    getExternalAddress();
+  }
+
+  function cancel(event) {
+    event.stopPropagation();
+    handleClose();
+  }
+
+  function ignore(event) {
+    event.stopPropagation();
+  }
+
+  function DisplayExternalAddress() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="external-address"
+        required
+        autoFocus
+        value={externalAddress && `${externalAddress.getHost()}:${externalAddress.getPort()}`}
+        fullWidth
+        inputProps={{
+          readOnly: true,
+        }}
+      />
+    );
+  }
+
+  return (
+    <Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
+      <DialogTitle id="form-dialog-title">Show External Address</DialogTitle>
+      <form className={classes.root} noValidate autoComplete="off">
+        <DialogContent>
+          {DisplayExternalAddress()}
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}

frontend/src/components/ShowExternalAddressDialog/package.json

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

frontend/src/components/ShowExternalAddressDialog/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/src/pages/peers/Peers.js

@@ -18,14 +18,13 @@ import CreatePeerDialog from '../../components/CreatePeerDialog';
 import ConnectPeerDialog from '../../components/ConnectPeerDialog';
 import PeerListItem from '../../components/PeerListItem';
 import SavedPeerListItem from '../../components/SavedPeerListItem';
+import ShowExternalAddressDialog from '../../components/ShowExternalAddressDialog';
 
 // data
 
 import {
   getPeersRequest,
   getConnectedPeersRequest,
-  // subscribeConnectedPeersRequest,
-  getExternalAddressRequest,
 } from '../../squeakclient/requests';
 
 const useStyles = makeStyles((theme) => ({
@@ -43,7 +42,7 @@ export default function Peers() {
   const [createPeerDialogOpen, setCreatePeerDialogOpen] = useState(false);
   const [connectPeerDialogOpen, setConnectPeerDialogOpen] = useState(false);
   const [value, setValue] = useState(0);
-  const [externalAddress, setExternalAddress] = useState(null);
+  const [showExternalAddressDialogOpen, setShowExternalAddressDialogOpen] = useState(false);
 
   function a11yProps(index) {
     return {
@@ -60,10 +59,6 @@ export default function Peers() {
     getConnectedPeersRequest(setConnectedPeers);
   };
 
-  const getExternalAddress = () => {
-    getExternalAddressRequest(setExternalAddress);
-  };
-
   // const subscribeConnectedPeers = () => subscribeConnectedPeersRequest(setConnectedPeers);
 
   const getSqueakPeers = () => {
@@ -86,6 +81,14 @@ export default function Peers() {
     setConnectPeerDialogOpen(false);
   };
 
+  const handleClickOpenShowExternalAddressDialog = () => {
+    setShowExternalAddressDialogOpen(true);
+  };
+
+  const handleCloseShowExternalAddressDialog = () => {
+    setShowExternalAddressDialogOpen(false);
+  };
+
   useEffect(() => {
     getConnectedPeers();
   }, []);
@@ -96,9 +99,6 @@ export default function Peers() {
   useEffect(() => {
     getSqueakPeers();
   }, []);
-  useEffect(() => {
-    getExternalAddress();
-  }, []);
 
   function TabPanel(props) {
     const {
@@ -157,15 +157,31 @@ export default function Peers() {
     );
   }
 
+  function ShowExternalAddressButton() {
+    return (
+      <>
+        <Grid item xs={12}>
+          <div className={classes.root}>
+            <Button
+              variant="contained"
+              onClick={() => {
+                handleClickOpenShowExternalAddressDialog();
+              }}
+            >
+              Show External Address
+            </Button>
+          </div>
+        </Grid>
+      </>
+    );
+  }
+
   function PeersCountSummary() {
     return (
       <Grid item xs={12}>
         <Box
           p={1}
         >
-          <Typography variant="h5" component="h5">
-            {`External Address: ${externalAddress && externalAddress.getHost()}:${externalAddress && externalAddress.getPort()}`}
-          </Typography>
           <Typography variant="h5" component="h5">
             {`Number of connected peers: ${connectedPeers.length}`}
           </Typography>
@@ -238,6 +254,7 @@ export default function Peers() {
           <Grid item xs={12}>
             <Widget disableWidgetMenu>
               {ConnectPeerButton()}
+              {ShowExternalAddressButton()}
               {PeersCountSummary()}
               {PeersGridItem()}
             </Widget>
@@ -284,6 +301,17 @@ export default function Peers() {
     );
   }
 
+  function ShowExternalAddressDialogContent() {
+    return (
+      <>
+        <ShowExternalAddressDialog
+          open={showExternalAddressDialogOpen}
+          handleClose={handleCloseShowExternalAddressDialog}
+        />
+      </>
+    );
+  }
+
   function GridContent() {
     return (
       <Grid container spacing={0}>
@@ -300,6 +328,7 @@ export default function Peers() {
       {GridContent()}
       {CreatePeerDialogContent()}
       {ConnectPeerDialogContent()}
+      {ShowExternalAddressDialogContent()}
     < />
   );
 }

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

@@ -1,17 +1,17 @@
 {
   "files": {
-    "main.js": "/static/js/main.a29531ff.chunk.js",
-    "main.js.map": "/static/js/main.a29531ff.chunk.js.map",
+    "main.js": "/static/js/main.cff5165c.chunk.js",
+    "main.js.map": "/static/js/main.cff5165c.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.4181937e.chunk.js": "/static/js/2.4181937e.chunk.js",
-    "static/js/2.4181937e.chunk.js.map": "/static/js/2.4181937e.chunk.js.map",
+    "static/js/2.32cf15fd.chunk.js": "/static/js/2.32cf15fd.chunk.js",
+    "static/js/2.32cf15fd.chunk.js.map": "/static/js/2.32cf15fd.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.0cf8a28a26850a92a324181a7adf39fe.js": "/precache-manifest.0cf8a28a26850a92a324181a7adf39fe.js",
+    "precache-manifest.8a854d951397712ca7cea95f8ebfd0d2.js": "/precache-manifest.8a854d951397712ca7cea95f8ebfd0d2.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
-    "static/js/2.4181937e.chunk.js.LICENSE.txt": "/static/js/2.4181937e.chunk.js.LICENSE.txt",
+    "static/js/2.32cf15fd.chunk.js.LICENSE.txt": "/static/js/2.32cf15fd.chunk.js.LICENSE.txt",
     "static/media/font-awesome.min.css": "/static/media/fontawesome-webfont.fee66e71.woff",
     "static/media/google.svg": "/static/media/google.695a3160.svg",
     "static/media/logo.svg": "/static/media/logo.a0185b04.svg"
@@ -19,7 +19,7 @@
   "entrypoints": [
     "static/js/runtime-main.9f0ba400.js",
     "static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.4181937e.chunk.js",
-    "static/js/main.a29531ff.chunk.js"
+    "static/js/2.32cf15fd.chunk.js",
+    "static/js/main.cff5165c.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>Squeak Node</title><meta name="description" content="Squeak Node 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.4181937e.chunk.js"></script><script src="/static/js/main.a29531ff.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>Squeak Node</title><meta name="description" content="Squeak Node 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.32cf15fd.chunk.js"></script><script src="/static/js/main.cff5165c.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.8a854d951397712ca7cea95f8ebfd0d2.js

@@ -1,23 +1,23 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "f866d127db890825a94ca4afe2baa336",
+    "revision": "9afdb7c1ea831aea9aa0e9f2dd5e9972",
     "url": "/index.html"
   },
   {
-    "revision": "f1e946917c419318e8ac",
+    "revision": "6718651bd8fedd76a898",
     "url": "/static/css/2.ea4ba2f0.chunk.css"
   },
   {
-    "revision": "f1e946917c419318e8ac",
-    "url": "/static/js/2.4181937e.chunk.js"
+    "revision": "6718651bd8fedd76a898",
+    "url": "/static/js/2.32cf15fd.chunk.js"
   },
   {
     "revision": "279b8724b89bf7d504758b3fa917239f",
-    "url": "/static/js/2.4181937e.chunk.js.LICENSE.txt"
+    "url": "/static/js/2.32cf15fd.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "7145646c98c9fdf9aa76",
-    "url": "/static/js/main.a29531ff.chunk.js"
+    "revision": "9aa69063a22180ef01c4",
+    "url": "/static/js/main.cff5165c.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.0cf8a28a26850a92a324181a7adf39fe.js"
+  "/precache-manifest.8a854d951397712ca7cea95f8ebfd0d2.js"
 );
 
 self.addEventListener('message', (event) => {