Add TradeBox and QR client side generation

api/models.py

@@ -193,7 +193,7 @@ class MarketTick(models.Model):
     Records tick by tick Non-KYC Bitcoin price. 
     Data to be aggregated and offered via public API.
 
-    It is checked against current cex prices for nice
+    It is checked against current CEX price for useful
     insight on the historical premium of Non-KYC BTC
 
     Price is set when both taker bond is locked. Both 

api/urls.py

@@ -4,7 +4,8 @@ from .views import MakerView, OrderView, UserView, BookView, InfoView
 urlpatterns = [
     path('make/', MakerView.as_view()),
     path('order/', OrderView.as_view({'get':'get','post':'take_update_confirm_dispute_cancel'})),
-    path('usergen/', UserView.as_view()),
+    path('user/', UserView.as_view()),
     path('book/', BookView.as_view()),
+    # path('robot/') # Profile Info
     path('info/', InfoView.as_view()),
     ]

frontend/package.json

@@ -28,6 +28,9 @@
     "@material-ui/icons": "^4.11.2",
     "@mui/system": "^5.2.6",
     "material-ui-image": "^3.3.2",
+    "react-native": "^0.66.4",
+    "react-native-svg": "^12.1.1",
+    "react-qr-code": "^2.0.3",
     "react-router-dom": "^5.2.0"
   }
 }

frontend/src/components/OrderPage.js

@@ -1,6 +1,7 @@
 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 TradeBox from "./TradeBox";
 
 function msToTime(duration) {
   var seconds = Math.floor((duration / 1000) % 60),
@@ -65,10 +66,15 @@ export default class OrderPage extends Component {
             makerNick: data.maker_nick,
             takerId: data.taker,
             takerNick: data.taker_nick,
-            isBuyer:data.buyer,
+            isMaker: data.is_maker,
-            isSeller:data.seller,
+            isTaker: data.is_taker,
+            isBuyer: data.is_buyer,
+            isSeller: data.is_seller,
             expiresAt: data.expires_at,
             badRequest: data.bad_request,
+            bondInvoice: data.bond_invoice,
+            bondSatoshis: data.bond_satoshis,
+            badRequest: data.bad_request,
         });
       });
   }
@@ -98,9 +104,7 @@ export default class OrderPage extends Component {
       .then((data) => (console.log(data) & this.getOrderDetails(data.id)));
   }
 
-  
+  orderBox=()=>{
-
-  render (){
     return(
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
@@ -173,16 +177,47 @@ export default class OrderPage extends Component {
             </List>
 
           </Paper>
+        </Grid>
 
+        {/* Participants cannot see the Back or Take Order buttons */}
+        {this.state.isParticipant ? "" :
+          <>
             <Grid item xs={12} align="center">
-          {this.state.isParticipant ? "" : <Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>}
+              <Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
             </Grid>
             <Grid item xs={12} align="center">
               <Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
             </Grid>
+          </>
+          }
+        </Grid>
+    )
+  }
   
+
+  render (){
+    return ( 
+      this.state.badRequest ?
+        <div align='center'>
+          <Typography component="subtitle2" variant="subtitle2" color="secondary" >
+            {this.state.badRequest}<br/>
+          </Typography>
+          <Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
+        </div>
+        :
+        (this.state.isParticipant ? 
+          <Grid container xs={12} align="center" spacing={2}>
+            <Grid item xs={6} align="left">
+              {this.orderBox()}
+            </Grid>
+            <Grid item xs={6} align="left">
+              <TradeBox data={this.state}/>
             </Grid>
           </Grid>
+          :
+          <Grid item xs={12} align="center">
+            {this.orderBox()}
+          </Grid>)
     );
   }
 }

frontend/src/components/TradeBox.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { Paper, FormControl , Grid, Typography, FormHelperText, TextField} 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
+  }
+
+  showInvoice=()=>{
+    return (
+      <Grid container spacing={1}>
+        <Grid item xs={12} align="center">
+          <Typography component="body2" variant="body2">
+            Robots around here usually show commitment
+          </Typography>
+        </Grid>
+        <Grid item xs={12} align="center">
+          {this.data.isMaker ?
+          <Typography component="subtitle1" variant="subtitle1">
+            <b>Lock {this.data.bondSatoshis} Sats to PUBLISH order </b>
+          </Typography>
+          : 
+          <Typography component="subtitle1" variant="subtitle1">
+            <b>Lock {this.data.bondSatoshis} Sats to TAKE the order </b>
+          </Typography>
+          }
+        </Grid>
+        <Grid item xs={12} align="center">
+          <QRCode value={this.data.bondInvoice} size={340}/>
+        </Grid> 
+        <Grid item xs={12} align="center">
+          <TextField 
+            hiddenLabel
+            variant="filled" 
+            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."
+            color = "secondary"
+          />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  render() {
+    return (
+      <Grid container spacing={1} style={{ width:360}}>
+        <Grid item xs={12} align="center">
+          <Typography component="h5" variant="h5">
+            TradeBox
+          </Typography>
+          <Paper elevation={12} style={{ padding: 8,}}>
+              {this.data.bondInvoice ? this.showInvoice() : ""}
+          </Paper>
+        </Grid>
+      </Grid>
+    );
+  }
+}

frontend/src/components/UserGenPage.js

@@ -41,7 +41,7 @@ export default class UserGenPage extends Component {
   }
 
   getGeneratedUser() {
-    fetch('/api/usergen' + '?token=' + this.state.token)
+    fetch('/api/user' + '?token=' + this.state.token)
       .then((response) => response.json())
       .then((data) => {
         this.setState({

frontend/webpack.config.js

@@ -29,4 +29,7 @@ module.exports = {
       },
     }),
   ],
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
 };

setup.md

@@ -66,6 +66,7 @@ npm install react-router-dom@5.2.0
 npm install @material-ui/icons
 npm install material-ui-image
 npm install @mui/system @emotion/react @emotion/styled
+npm install qrcodejs
 ```
 
 ### Launch the React render