Add send bitcoin dialog (#663)

* Add send coins dialog

* Fix send bitcoin dialog

* Send bitcoin dialog disable amount when sendall checked

* Update static build

frontend/src/components/SendBitcoinDialog/SendBitcoinDialog.js

@@ -0,0 +1,206 @@
+import React, {useState, useEffect} from 'react';
+import {
+  Paper,
+  IconButton,
+  Menu,
+  MenuItem,
+  Typography,
+  Grid,
+  Box,
+  Link,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+  FormControl,
+  FormControlLabel,
+  InputLabel,
+  Select,
+  Switch,
+} from "@material-ui/core";
+import { MoreVert as MoreIcon } from "@material-ui/icons";
+import {useHistory} from "react-router-dom";
+import classnames from "classnames";
+
+// styles
+import useStyles from "./styles";
+
+import Widget from "../../components/Widget";
+import SqueakThreadItem from "../../components/SqueakThreadItem";
+
+import {
+  lndSendCoins,
+} from "../../squeakclient/requests"
+
+
+
+export default function SendBitcoinDialog({
+  open,
+  handleClose,
+  ...props
+}) {
+  var classes = useStyles();
+  const history = useHistory();
+
+  var [address, setAddress] = useState('');
+  var [amount, setAmount] = useState('');
+  var [satperbyte, setSatperbyte] = useState('');
+  var [sendall, setSendall] = useState(false);
+
+  const resetFields = () => {
+    setAddress('');
+    setAmount('');
+    setSatperbyte('');
+    setSendall(false);
+  };
+
+  const handleChangeAddress = (event) => {
+    setAddress(event.target.value);
+  };
+
+  const handleChangeAmount = (event) => {
+    setAmount(event.target.value);
+  };
+
+  const handleChangeSatperbyte = (event) => {
+    setSatperbyte(event.target.value);
+  };
+
+  const handleChangeSendall = (event) => {
+    setSendall(event.target.checked);
+  };
+
+  const sendBitcoin = (address, amount, satperbyte, sendall) => {
+    lndSendCoins(address, amount, satperbyte, sendall, (response) => {
+      // setAddress(response.getAddress());
+      goToWalletPage();
+    });
+  };
+
+  const goToWalletPage = () => {
+    history.push("/app/wallet/");
+  };
+
+  function handleSubmit(event) {
+    event.preventDefault();
+    console.log( 'address:', address);
+    console.log( 'amount:', amount);
+    console.log( 'satperbyte:', satperbyte);
+    console.log( 'satperbyte number:', parseInt(satperbyte));
+    console.log( 'sendall:', sendall);
+    sendBitcoin(address, amount, parseInt(satperbyte), sendall);
+    handleClose();
+  }
+
+  function SendBitcoinAddess() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="Address"
+        required
+        autoFocus
+        value={address}
+        onChange={handleChangeAddress}
+        fullWidth
+      />
+    )
+  }
+
+  function SendBitcoinAmount() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="Amount"
+        required
+        autoFocus
+        value={amount}
+        onChange={handleChangeAmount}
+        disabled={sendall}
+        fullWidth
+      />
+    )
+  }
+
+  function SendBitcoinSatperbyte() {
+    return (
+      <TextField
+        id="standard-textarea"
+        label="Satperbyte"
+        required
+        autoFocus
+        value={satperbyte}
+        onChange={handleChangeSatperbyte}
+        fullWidth
+      />
+    )
+  }
+
+  function SendBitcoinSendall() {
+    return (
+      <FormControlLabel
+        className={classes.formControlLabel}
+        control={
+          <Switch
+            checked={sendall}
+            onChange={handleChangeSendall}
+            name="send-all"
+            size="small"
+          />
+        }
+        label="Send all"
+      />
+    )
+  }
+
+  function CancelButton() {
+    return (
+      <Button
+        onClick={handleClose}
+        variant="contained"
+        color="secondary"
+      >
+        Cancel
+      </Button>
+    )
+  }
+
+  function SendBitcoinButton() {
+    return (
+      <Button
+       type="submit"
+       variant="contained"
+       color="primary"
+       className={classes.button}
+       >
+       Send Bitcoin
+       </Button>
+    )
+  }
+
+  return (
+    <Dialog open={open} onEnter={resetFields} onClose={handleClose} aria-labelledby="form-dialog-title">
+  <DialogTitle id="form-dialog-title">Send Bitcoin</DialogTitle>
+  <form className={classes.root} onSubmit={handleSubmit} noValidate autoComplete="off">
+  <DialogContent>
+    {SendBitcoinAddess()}
+  </DialogContent>
+  <DialogContent>
+    {SendBitcoinAmount()}
+  </DialogContent>
+  <DialogContent>
+    {SendBitcoinSatperbyte()}
+  </DialogContent>
+  <DialogContent>
+    {SendBitcoinSendall()}
+  </DialogContent>
+  <DialogActions>
+    {CancelButton()}
+    {SendBitcoinButton()}
+  </DialogActions>
+  </form>
+    </Dialog>
+  )
+}

frontend/src/components/SendBitcoinDialog/package.json

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

frontend/src/components/SendBitcoinDialog/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/wallet/Wallet.js

@@ -19,6 +19,7 @@ import PageTitle from "../../components/PageTitle";
 import Widget from "../../components/Widget";
 import { Typography } from "../../components/Wrappers";
 import ReceiveBitcoinDialog from "../../components/ReceiveBitcoinDialog";
+import SendBitcoinDialog from "../../components/SendBitcoinDialog";
 import TransactionItem from "../../components/TransactionItem";
 import LightningPeerListItem from "../../components/LightningPeerListItem";
 import ChannelItem from "../../components/ChannelItem";
@@ -45,6 +46,7 @@ export default function WalletPage() {
   const [pendingChannels, setPendingChannels] = useState(null);
   const [value, setValue] = useState(0);
   const [receiveBitcoinDialogOpen, setReceiveBitcoinDialogOpen] = useState(false);
+  const [sendBitcoinDialogOpen, setSendBitcoinDialogOpen] = useState(false);
 
   function a11yProps(index) {
     return {
@@ -65,6 +67,14 @@ export default function WalletPage() {
      setReceiveBitcoinDialogOpen(false);
   };
 
+  const handleClickOpenSendBitcoinDialog = () => {
+    setSendBitcoinDialogOpen(true);
+  };
+
+  const handleCloseSendBitcoinDialog = () => {
+     setSendBitcoinDialogOpen(false);
+  };
+
   const getLndInfo = () => {
     lndGetInfoRequest(setLndInfo);
   };
@@ -125,6 +135,18 @@ export default function WalletPage() {
     )
   }
 
+  function SendBitcoinButton() {
+    return (
+       <Button
+          variant="contained"
+          className={classes.button}
+          onClick={() => {
+            handleClickOpenSendBitcoinDialog();
+          }}>Send Bitcoin
+       </Button>
+    )
+  }
+
   function NoBalanceContent() {
     return (
       <div>
@@ -223,6 +245,7 @@ export default function WalletPage() {
             </Grid>
           </Grid>
           {ReceiveBitcoinButton()}
+          {SendBitcoinButton()}
         </Widget>
       </Grid>
     )
@@ -418,6 +441,17 @@ export default function WalletPage() {
     )
   }
 
+  function SendBitcoinDialogContent() {
+    return (
+      <>
+        <SendBitcoinDialog
+          open={sendBitcoinDialogOpen}
+          handleClose={handleCloseSendBitcoinDialog}
+          ></SendBitcoinDialog>
+      </>
+    )
+  }
+
   return (
     <>
       <PageTitle title="Wallet" />
@@ -426,6 +460,7 @@ export default function WalletPage() {
         : NoBalanceContent()
       }
       {ReceiveBitcoinDialogContent()}
+      {SendBitcoinDialogContent()}
     </>
   );
 }

frontend/src/squeakclient/requests.js

@@ -12,6 +12,8 @@ import {
   CloseChannelRequest,
   ChannelPoint,
   NewAddressRequest,
+  SendCoinsRequest,
+  SendCoinsResponse,
   GetInfoResponse,
   WalletBalanceResponse,
   TransactionDetails,
@@ -924,6 +926,20 @@ export function lndNewAddressRequest(handleResponse) {
   );
 };
 
+export function lndSendCoins(address, amount, satperbyte, sendall, handleResponse) {
+  var request = new SendCoinsRequest();
+  request.setAddr(address);
+  request.setAmount(amount);
+  request.setSatPerByte(satperbyte);
+  request.setSendAll(sendall);
+  makeRequest(
+    'lndsendcoins',
+    request,
+    SendCoinsResponse.deserializeBinary,
+    handleResponse,
+  );
+};
+
 export function syncSqueakRequest(squeakHash, handleResponse) {
   var request = new SyncSqueakRequest();
   request.setSqueakHash(squeakHash);

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

@@ -1,17 +1,17 @@
 {
   "files": {
-    "main.js": "/static/js/main.2459d32c.chunk.js",
-    "main.js.map": "/static/js/main.2459d32c.chunk.js.map",
+    "main.js": "/static/js/main.0445cf36.chunk.js",
+    "main.js.map": "/static/js/main.0445cf36.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.7d5b0145.chunk.js": "/static/js/2.7d5b0145.chunk.js",
-    "static/js/2.7d5b0145.chunk.js.map": "/static/js/2.7d5b0145.chunk.js.map",
+    "static/js/2.b6c49ef8.chunk.js": "/static/js/2.b6c49ef8.chunk.js",
+    "static/js/2.b6c49ef8.chunk.js.map": "/static/js/2.b6c49ef8.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.824d585b793b16602d84bb1085d8ac6e.js": "/precache-manifest.824d585b793b16602d84bb1085d8ac6e.js",
+    "precache-manifest.09b89ac4f8fd483b9e957b1bbe6de6b5.js": "/precache-manifest.09b89ac4f8fd483b9e957b1bbe6de6b5.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
-    "static/js/2.7d5b0145.chunk.js.LICENSE.txt": "/static/js/2.7d5b0145.chunk.js.LICENSE.txt",
+    "static/js/2.b6c49ef8.chunk.js.LICENSE.txt": "/static/js/2.b6c49ef8.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.7d5b0145.chunk.js",
-    "static/js/main.2459d32c.chunk.js"
+    "static/js/2.b6c49ef8.chunk.js",
+    "static/js/main.0445cf36.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.7d5b0145.chunk.js"></script><script src="/static/js/main.2459d32c.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.b6c49ef8.chunk.js"></script><script src="/static/js/main.0445cf36.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.09b89ac4f8fd483b9e957b1bbe6de6b5.js

@@ -1,23 +1,23 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "749a403b99830fbe3a1489bc454b01c2",
+    "revision": "9c02859640631bd9d331d7af616724c7",
     "url": "/index.html"
   },
   {
-    "revision": "7e3eb2b6da238175f9bb",
+    "revision": "0451100f56cc6f33540c",
     "url": "/static/css/2.ea4ba2f0.chunk.css"
   },
   {
-    "revision": "7e3eb2b6da238175f9bb",
-    "url": "/static/js/2.7d5b0145.chunk.js"
+    "revision": "0451100f56cc6f33540c",
+    "url": "/static/js/2.b6c49ef8.chunk.js"
   },
   {
     "revision": "7156b2c9571000777b9be03b3c6006ee",
-    "url": "/static/js/2.7d5b0145.chunk.js.LICENSE.txt"
+    "url": "/static/js/2.b6c49ef8.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "dab9e3bd91447bcdcc6a",
-    "url": "/static/js/main.2459d32c.chunk.js"
+    "revision": "46ed0a3f3bd9be727702",
+    "url": "/static/js/main.0445cf36.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.824d585b793b16602d84bb1085d8ac6e.js"
+  "/precache-manifest.09b89ac4f8fd483b9e957b1bbe6de6b5.js"
 );
 
 self.addEventListener('message', (event) => {