Work tradebox logics

frontend/src/components/HomePage.js

@@ -2,11 +2,9 @@ import React, { Component } from "react";
 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom";
 
 import UserGenPage from "./UserGenPage";
-import LoginPage from "./LoginPage.js";
 import MakerPage from "./MakerPage";
 import BookPage from "./BookPage";
 import OrderPage from "./OrderPage";
-import WaitingRoomPage from "./WaitingRoomPage";
 
 export default class HomePage extends Component {
     constructor(props) {
@@ -19,11 +17,9 @@ export default class HomePage extends Component {
                   <Switch>
                       <Route exact path='/' component={UserGenPage}/>
                       <Route path='/home'><p>You are at the start page</p></Route>
-                      <Route path='/login'component={LoginPage}/>
                       <Route path='/make' component={MakerPage}/>
                       <Route path='/book' component={BookPage}/>
                       <Route path="/order/:orderId" component={OrderPage}/>
-                      <Route path='/wait' component={WaitingRoomPage}/>
                   </Switch>
               </Router>
           );

frontend/src/components/LoginPage.js

@@ -1,11 +0,0 @@
-import React, { Component } from "react";
-
-export default class LoginPage extends Component {
-    constructor(props) {
-      super(props);
-    }
-
-    render() {
-        return <p>This is the login page</p>;
-    }
-}

frontend/src/components/OrderPage.js

@@ -105,6 +105,7 @@ export default class OrderPage extends Component {
             bondSatoshis: data.bond_satoshis,
             escrowInvoice: data.escrow_invoice,
             escrowSatoshis: data.escrow_satoshis,
+            invoiceAmount: data.invoice_amount,
             badRequest: data.bad_request,
         });
       });

frontend/src/components/TradeBox.js

@@ -6,7 +6,7 @@ export default class TradeBox extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      delay: 5000, // Refresh every 5 seconds
+      delay: 100, // checks for new state in OrderPage ever 100 ms
     };
     this.data = this.props.data
   }
@@ -33,7 +33,7 @@ export default class TradeBox extends Component {
     this.data = this.props.data;
   }
   
-  showInvoice=()=>{
+  showQRInvoice=()=>{
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
@@ -70,7 +70,7 @@ export default class TradeBox extends Component {
       </Grid>
     );
   }
-  showEscrowInvoice=()=>{
+  showEscrowQRInvoice=()=>{
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
@@ -88,7 +88,7 @@ export default class TradeBox extends Component {
             size="small"
             defaultValue={this.data.escrowInvoice} 
             disabled="true"
-            helperText="This is a HODL LN invoice. It will be charged once you confirm you have received the fiat."
+            helperText="This is a HODL LN invoice. It will be charged once the buyer confirms he sent the fiat."
             color = "secondary"
           />
         </Grid>
@@ -160,6 +160,33 @@ export default class TradeBox extends Component {
     )
   }
 
+  showInputInvoice(){
+
+  }
+
+  showWaitingForEscrow(){
+
+  }
+  showWaitingForBuyerInvoice({
+
+  })
+
+  showFiatSentButton(){
+
+  }
+  showFiatReceivedButton(){
+
+  }
+
+  showOpenDisputeButton(){
+
+  }
+
+  showRateSelect(){
+
+  }
+
+
   render() {
     return (
       <Grid container spacing={1} style={{ width:330}}>
@@ -168,10 +195,32 @@ export default class TradeBox extends Component {
             TradeBox
           </Typography>
           <Paper elevation={12} style={{ padding: 8,}}>
-              {this.data.bondInvoice ? this.showInvoice() : ""}
+            {/* Maker and taker Bond request */}
+              {this.data.bondInvoice ? this.showQRInvoice() : ""}
+
+            {/* Waiting for taker and taker bond request */}
               {this.data.isMaker & this.data.statusCode == 1 ? this.showMakerWait() : ""}
               {this.data.isMaker & this.data.statusCode == 3 ? this.showTakerFound() : ""}
-              {this.data.isSeller & this.data.escrowInvoice != null ? this.showEscrowInvoice() : ""}
+
+            {/* Send Invoice (buyer) and deposit collateral (seller) */}
+              {this.data.isSeller & this.data.escrowInvoice != null ? this.showEscrowQRInvoice() : ""}
+              {this.data.isBuyer & this.data.invoiceAmount != null ? this.showInputInvoice() : ""}
+              {this.data.isBuyer & this.data.statusCode == 7 ? this.showWaitingForEscrow() : ""}
+              {this.data.isSeller & this.data.statusCode == 8 ? this.showWaitingForBuyerInvoice() : ""}
+
+            {/* In Chatroom */}
+              {this.data.isBuyer & this.data.statusCode == 9 ? this.showChat() & this.showFiatSentButton() : ""}
+              {this.data.isSeller & this.data.statusCode ==9 ? this.showChat()  : ""}
+              {this.data.isBuyer & this.data.statusCode == 10 ? this.showChat() & this.showOpenDisputeButton() : ""}
+              {this.data.isSeller & this.data.statusCode == 10 ? this.showChat() & this.showFiatReceivedButton() & this.showOpenDisputeButton(): ""}
+
+            {/* Trade Finished */}
+              {this.data.isSeller & this.data.statusCode > 12 & this.data.statusCode < 15 ? this.showRateSelect()  : ""}
+              {/* TODO */}
+              {/*  */}
+              {/*  */}
+
+              
           </Paper>
         </Grid>
       </Grid>

frontend/src/components/WaitingRoomPage.js

@@ -1,11 +0,0 @@
-import React, { Component } from "react";
-
-export default class WaitingRoomPage extends Component {
-    constructor(props) {
-      super(props);
-    }
-
-    render() {
-        return <p>This is the waiting room</p>;
-    }
-}