Add maker waiting room

frontend/src/components/OrderPage.js

@@ -1,6 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
-import { Link } from 'react-router-dom'
+import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@material-ui/core"
 import TradeBox from "./TradeBox";
 
 function msToTime(duration) {
@@ -14,6 +13,33 @@ function msToTime(duration) {
   return hours + "h " + minutes + "m " + seconds + "s";
 }
 
+// TO DO fix Progress bar to go from 100 to 0, from total_expiration time, showing time_left
+function LinearDeterminate() {
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      setProgress((oldProgress) => {
+        if (oldProgress === 0) {
+          return 100;
+        }
+        const diff = 1;
+        return Math.max(oldProgress - diff, 0);
+      });
+    }, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <LinearProgress variant="determinate" value={progress} />
+    </Box>
+  );
+}
+
 function getCookie(name) {
   let cookieValue = null;
   if (document.cookie && document.cookie !== '') {
@@ -104,6 +130,20 @@ export default class OrderPage extends Component {
       .then((data) => (console.log(data) & this.getOrderDetails(data.id)));
   }
 
+  handleClickCancelOrderButton=()=>{
+    console.log(this.state)
+      const requestOptions = {
+          method: 'POST',
+          headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
+          body: JSON.stringify({
+            'action':'cancel',
+          }),
+      };
+      fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
+      .then((response) => response.json())
+      .then((data) => (console.log(data) & this.getOrderDetails(data.id)));
+  }
+
   orderBox=()=>{
     return(
       <Grid container spacing={1}>
@@ -150,7 +190,7 @@ export default class OrderPage extends Component {
             }
             
             <ListItem>
-              <ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))+" "+this.state.currencyCode} secondary="Amount and currency requested"/>
+              <ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))+" "+this.state.currencyCode} secondary="Amount"/>
             </ListItem>
             <Divider />
             <ListItem>
@@ -170,10 +210,10 @@ export default class OrderPage extends Component {
               <ListItemText primary={'#'+this.orderId} secondary="Order ID"/>
             </ListItem>
             <Divider />
-
             <ListItem>
               <ListItemText primary={msToTime( new Date(this.state.expiresAt) - Date.now())} secondary="Expires in "/>
             </ListItem>
+            <LinearDeterminate />
             </List>
 
           </Paper>
@@ -190,6 +230,21 @@ export default class OrderPage extends Component {
             </Grid>
           </>
           }
+
+        {/* Makers can cancel before commiting the bond  (status 0)*/}
+        {this.state.isMaker & this.state.statusCode == 0 ?
+        <Grid item xs={12} align="center">
+          <Button variant='contained' color='secondary' onClick={this.handleClickCancelOrderButton}>Cancel</Button>
+        </Grid>
+        :""}
+
+        {/* Takers can cancel before commiting the bond (status 3)*/}
+        {this.state.isTaker & this.state.statusCode == 3 ?
+        <Grid item xs={12} align="center">
+          <Button variant='contained' color='secondary' onClick={this.handleClickCancelOrderButton}>Cancel</Button>
+        </Grid>
+        :""}
+
         </Grid>
     )
   }

frontend/src/components/TradeBox.js

@@ -1,11 +1,10 @@
 import React, { Component } from "react";
-import { Paper, FormControl , Grid, Typography, FormHelperText, TextField} from "@material-ui/core"
+import { Paper, FormControl , Grid, Typography, FormHelperText, TextField, List, ListItem, ListItemText, Divider} from "@material-ui/core"
 import QRCode from "react-qr-code"
 
 export default class TradeBox extends Component {
   constructor(props) {
     super(props);
-    // props.state = null
     this.data = this.props.data
   }
 
@@ -29,7 +28,7 @@ export default class TradeBox extends Component {
           }
         </Grid>
         <Grid item xs={12} align="center">
-          <QRCode value={this.data.bondInvoice} size={340}/>
+          <QRCode value={this.data.bondInvoice} size={305}/>
         </Grid> 
         <Grid item xs={12} align="center">
           <TextField 
@@ -38,24 +37,67 @@ export default class TradeBox extends Component {
             size="small"
             defaultValue={this.data.bondInvoice} 
             disabled="true"
-            helperText="This is a HODL LN invoice will not be charged if the order succeeds or expires.
-            It will be charged if the order is canceled or you lose a dispute."
+            helperText="This is a HODL LN invoice. It will not be charged if the order succeeds or expires.
+            It will be charged if the order is cancelled or you lose a dispute."
             color = "secondary"
           />
         </Grid>
       </Grid>
     );
   }
+  showMakerWait=()=>{
+    return (
+      <Grid container spacing={1}>
+        <Grid item xs={12} align="center">
+          <Typography component="subtitle1" variant="subtitle1">
+            <b> Your order is public, wait for a taker. </b>
+          </Typography>
+        </Grid>
+        <Grid item xs={12} align="center">
+
+        <List dense="true">
+          <Divider/>
+            <ListItem>
+              <Typography component="body2" variant="body2" align="left">
+                <p>Be patient while robots check the book. 
+                It might take some time. This box will ring 🔊 once a robot takes your order. </p>
+                <p>Please note that if your premium is too high, or if your currency or payment
+                  methods are not popular, your order might expire untaken. Your bond will
+                  return to you (no action needed).</p> 
+              </Typography>
+            </ListItem>
+
+            {/* TODO API sends data for a more confortable wait */}
+            <Divider/>
+              <ListItem>
+                <ListItemText primary={999} secondary="Robots looking at the book"/>
+              </ListItem>
+
+            <Divider/>
+              <ListItem>
+                <ListItemText primary={999} secondary={"Active orders for" + this.data.currencyCode}/>
+              </ListItem>
+              
+            <Divider/>
+              <ListItem>
+                <ListItemText primary="33%" secondary="Premium percentile" />
+              </ListItem>
+          </List>
+        </Grid>
+      </Grid>
+    )
+  }
 
   render() {
     return (
-      <Grid container spacing={1} style={{ width:360}}>
+      <Grid container spacing={1} style={{ width:330}}>
         <Grid item xs={12} align="center">
           <Typography component="h5" variant="h5">
             TradeBox
           </Typography>
           <Paper elevation={12} style={{ padding: 8,}}>
               {this.data.bondInvoice ? this.showInvoice() : ""}
+              {this.data.isMaker & this.data.statusCode == 1 ? this.showMakerWait() : ""}
           </Paper>
         </Grid>
       </Grid>