Include link to peer page in sent payments (#2077)

* Show link to peer page in sent payments

* Change spacing in received offers

* Update frontend build

frontend/src/features/payments/ReceivedPayments.js

@@ -24,13 +24,13 @@ const ReceivedPayments = (props) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-      window.scrollTo(0, 0)
-      console.log('fetchReceivedPayments');
-      dispatch(clearReceivedPayments());
-      dispatch(fetchReceivedPayments({
-        limit: 10,
-        lastReceivedPayment: null,
-      }));
+    window.scrollTo(0, 0)
+    console.log('fetchReceivedPayments');
+    dispatch(clearReceivedPayments());
+    dispatch(fetchReceivedPayments({
+      limit: 10,
+      lastReceivedPayment: null,
+    }));
   }, [])
 
   const fetchMore = () => {
@@ -41,38 +41,49 @@ const ReceivedPayments = (props) => {
   }
 
   const goToSqueak = (id) => {
-      props.history.push(`/app/squeak/${id}`)
+    props.history.push(`/app/squeak/${id}`)
   }
 
   const renderedListItems = receivedPayments.map(f=>{
     return <div key={f.getPaymentHash()} className="payment-wapper">
-              <div className="search-user-details">
-                  <div className="search-user-warp">
-                      <div className="search-user-info">
-                          <div className="payment-price">{f.getPriceMsat() / 1000} sats</div>
-                          <div className="payment-squeak-hash"><b>Squeak Hash</b>: <Link  style={{color: "blue", fontWeight: 'bold'}} to={`/app/squeak/${f.getSqueakHash()}`}>{f.getSqueakHash()}</Link></div>
-                          <div className="payment-peer-address"><b>Peer</b>: {f.getPeerAddress().getHost()}:{f.getPeerAddress().getPort()}</div>
-                          <div className="payment-time">{moment(f.getTimeMs()).format("h:mm A · MMM D, YYYY")}</div>
-                      </div>
-                  </div>
+      <div className="search-user-details">
+        <div className="search-user-warp">
+          <div className="search-user-info">
+            <div className="payment-price">
+              {f.getPriceMsat() / 1000} sats
+            </div>
+            <div className="payment-squeak-hash">
+              <b>Squeak Hash</b>:&nbsp;
+                <Link  style={{color: "blue", fontWeight: 'bold'}} to={`/app/squeak/${f.getSqueakHash()}`}>{f.getSqueakHash()}
+                </Link>
               </div>
-           </div>
-    })
-
-  return <>
-          {renderedListItems}
-
-          {receivedPaymentsStatus === 'loading' ?
-          <div className="todo-list">
-            <Loader />
+              <div className="payment-peer-address">
+                <b>Peer</b>:&nbsp;
+                  {f.getPeerAddress().getHost()}:{f.getPeerAddress().getPort()}
+                </div>
+                <div className="payment-time">
+                  {moment(f.getTimeMs()).format("h:mm A · MMM D, YYYY")}
+                </div>
+              </div>
+            </div>
           </div>
-          :
-          <div onClick={() => fetchMore()} className='squeak-btn-side squeak-btn-active'>
-            LOAD MORE
-          </div>
-          }
+        </div>
+      })
 
-         </>
-}
+      return <>
+      {renderedListItems}
 
-export default withRouter(ReceivedPayments)
+      {receivedPaymentsStatus === 'loading' ?
+        <div className="todo-list">
+          <Loader />
+        </div>
+        :
+        <div onClick={() => fetchMore()} className='squeak-btn-side squeak-btn-active'>
+          LOAD MORE
+        </div>
+      }
+
+      </>
+  }
+
+  export default withRouter(ReceivedPayments)

frontend/src/features/payments/SentPayments.js

@@ -45,6 +45,8 @@ const SentPayments = (props) => {
   }
 
   const renderedListItems = sentPayments.map(sentPayment=>{
+    const peerAddress = sentPayment.getPeerAddress();
+    const peerUrl = `/app/peer/${peerAddress.getNetwork()}/${peerAddress.getHost()}/${peerAddress.getPort()}`;
     return <div key={sentPayment.getPaymentHash()} className="payment-wapper">
       <div className="search-user-details">
         <div className="search-user-warp">
@@ -53,13 +55,19 @@ const SentPayments = (props) => {
               {sentPayment.getPriceMsat() / 1000} sats
             </div>
             <div className="payment-squeak-hash">
-              <b>Squeak Hash</b>: <Link style={{color: "blue", fontWeight: 'bold'}} to={`/app/squeak/${sentPayment.getSqueakHash()}`}>{sentPayment.getSqueakHash()}</Link>
+              <b>Squeak Hash</b>:&nbsp;
+                <Link style={{color: "blue", fontWeight: 'bold'}} to={`/app/squeak/${sentPayment.getSqueakHash()}`}>
+                {sentPayment.getSqueakHash()}
+              </Link>
             </div>
             <div className="payment-peer-address">
-              <b>Peer</b>: {sentPayment.getPeerAddress().getHost()}:{sentPayment.getPeerAddress().getPort()}
+              <b>Peer</b>:&nbsp;
+                <Link to={peerUrl} style={{color: "blue", fontWeight: 'bold'}}>
+                  {sentPayment.getPeerAddress().getHost()}:{sentPayment.getPeerAddress().getPort()}
+                </Link>
               </div>
               <div className="payment-lightning-node">
-                <b>Lightning Node</b>::&nbsp;
+                <b>Lightning Node</b>:&nbsp;
                   <a href={`https://amboss.space/node/${sentPayment.getNodePubkey()}`}
                     target="_blank" rel="noopener noreferrer"
                     style={{color: "blue", fontWeight: 'bold'}}

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

@@ -1,8 +1,8 @@
 {
   "files": {
     "main.css": "/static/css/main.a68e0912.chunk.css",
-    "main.js": "/static/js/main.8ee7fcc8.chunk.js",
-    "main.js.map": "/static/js/main.8ee7fcc8.chunk.js.map",
+    "main.js": "/static/js/main.6b5b6ca6.chunk.js",
+    "main.js.map": "/static/js/main.6b5b6ca6.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.35bfaaf4.js",
     "runtime-main.js.map": "/static/js/runtime-main.35bfaaf4.js.map",
     "static/js/2.60d4eb76.chunk.js": "/static/js/2.60d4eb76.chunk.js",
@@ -17,7 +17,7 @@
     "static/js/5.a08de681.chunk.js": "/static/js/5.a08de681.chunk.js",
     "static/js/5.a08de681.chunk.js.map": "/static/js/5.a08de681.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.7eed289b1197895cd1e9e9ee7580da7c.js": "/precache-manifest.7eed289b1197895cd1e9e9ee7580da7c.js",
+    "precache-manifest.1cc3be58e96215612a30a2111c96cd5c.js": "/precache-manifest.1cc3be58e96215612a30a2111c96cd5c.js",
     "service-worker.js": "/service-worker.js",
     "static/css/3.1f6bb621.chunk.css.map": "/static/css/3.1f6bb621.chunk.css.map",
     "static/css/4.6512f3a3.chunk.css.map": "/static/css/4.6512f3a3.chunk.css.map",
@@ -30,6 +30,6 @@
     "static/js/runtime-main.35bfaaf4.js",
     "static/js/2.60d4eb76.chunk.js",
     "static/css/main.a68e0912.chunk.css",
-    "static/js/main.8ee7fcc8.chunk.js"
+    "static/js/main.6b5b6ca6.chunk.js"
   ]
 }

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

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><link href="/static/css/main.a68e0912.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,o,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)o=i[s],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&p.push(a[o][0]),a[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,o=1;o<r.length;o++){var c=r[o];0!==a[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},a={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{3:1,4:1,5:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({}[e]||e)+"."+{3:"1f6bb621",4:"6512f3a3",5:"3aaab79d"}[e]+".chunk.css",a=i.p+n,u=document.getElementsByTagName("link"),c=0;c<u.length;c++){var l=(f=u[c]).getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(l===n||l===a))return t()}var s=document.getElementsByTagName("style");for(c=0;c<s.length;c++){var f;if((l=(f=s[c]).getAttribute("data-href"))===n||l===a)return t()}var p=document.createElement("link");p.rel="stylesheet",p.type="text/css",p.onload=t,p.onerror=function(t){var n=t&&t.target&&t.target.src||a,u=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");u.code="CSS_CHUNK_LOAD_FAILED",u.request=n,delete o[e],p.parentNode.removeChild(p),r(u)},p.href=a,document.getElementsByTagName("head")[0].appendChild(p)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var u,c=document.createElement("script");c.charset="utf-8",c.timeout=120,i.nc&&c.setAttribute("nonce",i.nc),c.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"4c775684",4:"6ef1a808",5:"a08de681"}[e]+".chunk.js"}(e);var l=new Error;u=function(t){c.onerror=c.onload=null,clearTimeout(s);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",l.name="ChunkLoadError",l.type=n,l.request=o,r[1](l)}a[e]=void 0}};var s=setTimeout((function(){u({type:"timeout",target:c})}),12e4);c.onerror=c.onload=u,document.head.appendChild(c)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i.oe=function(e){throw console.error(e),e};var c=this["webpackJsonptwitter-frontend"]=this["webpackJsonptwitter-frontend"]||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=l;r()}([])</script><script src="/static/js/2.60d4eb76.chunk.js"></script><script src="/static/js/main.8ee7fcc8.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#1da1f2"/><meta nam="description" content="Squeaknode!"/><meta name="og:title" content="Squeaknode"/><meta name="og:description" content="check out my the Squeaknode I made"/><link href="https://fonts.googleapis.com/css2?family=Assistant&display=swap" rel="stylesheet"><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Squeaknode</title><link href="/static/css/main.a68e0912.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,o,i=t[0],c=t[1],l=t[2],s=0,p=[];s<i.length;s++)o=i[s],Object.prototype.hasOwnProperty.call(a,o)&&a[o]&&p.push(a[o][0]),a[o]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(t);p.length;)p.shift()();return u.push.apply(u,l||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,o=1;o<r.length;o++){var c=r[o];0!==a[c]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},a={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.e=function(e){var t=[];o[e]?t.push(o[e]):0!==o[e]&&{3:1,4:1,5:1}[e]&&t.push(o[e]=new Promise((function(t,r){for(var n="static/css/"+({}[e]||e)+"."+{3:"1f6bb621",4:"6512f3a3",5:"3aaab79d"}[e]+".chunk.css",a=i.p+n,u=document.getElementsByTagName("link"),c=0;c<u.length;c++){var l=(f=u[c]).getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(l===n||l===a))return t()}var s=document.getElementsByTagName("style");for(c=0;c<s.length;c++){var f;if((l=(f=s[c]).getAttribute("data-href"))===n||l===a)return t()}var p=document.createElement("link");p.rel="stylesheet",p.type="text/css",p.onload=t,p.onerror=function(t){var n=t&&t.target&&t.target.src||a,u=new Error("Loading CSS chunk "+e+" failed.\n("+n+")");u.code="CSS_CHUNK_LOAD_FAILED",u.request=n,delete o[e],p.parentNode.removeChild(p),r(u)},p.href=a,document.getElementsByTagName("head")[0].appendChild(p)})).then((function(){o[e]=0})));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var n=new Promise((function(t,n){r=a[e]=[t,n]}));t.push(r[2]=n);var u,c=document.createElement("script");c.charset="utf-8",c.timeout=120,i.nc&&c.setAttribute("nonce",i.nc),c.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"4c775684",4:"6ef1a808",5:"a08de681"}[e]+".chunk.js"}(e);var l=new Error;u=function(t){c.onerror=c.onload=null,clearTimeout(s);var r=a[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",l.name="ChunkLoadError",l.type=n,l.request=o,r[1](l)}a[e]=void 0}};var s=setTimeout((function(){u({type:"timeout",target:c})}),12e4);c.onerror=c.onload=u,document.head.appendChild(c)}return Promise.all(t)},i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/",i.oe=function(e){throw console.error(e),e};var c=this["webpackJsonptwitter-frontend"]=this["webpackJsonptwitter-frontend"]||[],l=c.push.bind(c);c.push=t,c=c.slice();for(var s=0;s<c.length;s++)t(c[s]);var f=l;r()}([])</script><script src="/static/js/2.60d4eb76.chunk.js"></script><script src="/static/js/main.6b5b6ca6.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.1cc3be58e96215612a30a2111c96cd5c.js

@@ -1,6 +1,6 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "fb4d2aebab124e15b62913d7d3de421c",
+    "revision": "5bec2029ce8010c58ec25754c65649cc",
     "url": "/index.html"
   },
   {
@@ -16,7 +16,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/css/5.3aaab79d.chunk.css"
   },
   {
-    "revision": "a2be865908800ecbd7ff",
+    "revision": "24acd63689534d073a4f",
     "url": "/static/css/main.a68e0912.chunk.css"
   },
   {
@@ -40,8 +40,8 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
     "url": "/static/js/5.a08de681.chunk.js"
   },
   {
-    "revision": "a2be865908800ecbd7ff",
-    "url": "/static/js/main.8ee7fcc8.chunk.js"
+    "revision": "24acd63689534d073a4f",
+    "url": "/static/js/main.6b5b6ca6.chunk.js"
   },
   {
     "revision": "91b40683253465c795db",

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.7eed289b1197895cd1e9e9ee7580da7c.js"
+  "/precache-manifest.1cc3be58e96215612a30a2111c96cd5c.js"
 );
 
 self.addEventListener('message', (event) => {