diff --git a/api/views.py b/api/views.py
index 6e529a40..6141c20d 100644
--- a/api/views.py
+++ b/api/views.py
@@ -217,6 +217,14 @@ class OrderView(viewsets.ViewSet):
                 # add whether a collaborative cancel is pending
                 data['pending_cancel'] = order.is_pending_cancel
 
+        # 9) If status is 'DIS' and all HTLCS are in LOCKED
+        elif order.status == Order.Status.DIS:# TODO Add the other status
+
+            # add whether the dispute statement has been received
+            if data['is_maker']:
+                data['statement_submitted'] = (order.maker_statement != None and order.maker_statement != "")
+            elif data['is_taker']:
+                data['statement_submitted'] = (order.taker_statement != None and order.maker_statement != "")
         
         return Response(data, status.HTTP_200_OK)
 
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index cebc14cb..241c5273 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -194,11 +194,14 @@ export default class BookPage extends Component {
                 No orders found to {this.state.type == 0 ? ' sell ' :' buy ' } BTC for {this.state.currencyCode}
               </Typography>
             </Grid>
+            <br/>
             <Grid item>
               <Button variant="contained" color='primary' to='/make/' component={Link}>Make Order</Button>
             </Grid>
               <Typography component="body1" variant="body1">
                 Be the first one to create an order
+                <br/>
+                <br/>
               </Typography>
           </Grid>)
           : 
diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
index d38441fd..e9445554 100644
--- a/frontend/src/components/Chat.js
+++ b/frontend/src/components/Chat.js
@@ -51,7 +51,7 @@ export default class Chat extends Component {
     this.client.send(JSON.stringify({
       type: "message",
       message: this.state.value,
-      nick: this.props.urNick,
+      nick: this.props.ur_nick,
     }));
     this.state.value = ''
     e.preventDefault();
@@ -64,7 +64,7 @@ export default class Chat extends Component {
               {this.state.messages.map(message => <>
               <Card elevation={5} align="left" >
               {/* If message sender is not our nick, gray color, if it is our nick, green color */}
-              {message.userNick == this.props.urNick ? 
+              {message.userNick == this.props.ur_nick ? 
                   <CardHeader
                   avatar={
                     <Avatar
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 1b27044d..d03553d6 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -42,7 +42,7 @@ export default class OrderPage extends Component {
         isExplicit: false,
         delay: 60000, // Refresh every 60 seconds by default
         currencies_dict: {"1":"USD"},
-        total_secs_expiry: 300,
+        total_secs_exp: 300,
         loading: true,
         openCancel: false,
     };
@@ -75,53 +75,63 @@ export default class OrderPage extends Component {
 
   // Unneeded for the most part. Let's keep variable names as they come from the API
   // Will need some renaming everywhere, but will decrease the mess.
-  setStateCool=(data)=>{
-    this.setState({
+  completeSetState=(newStateVars)=>{
+    console.log(newStateVars)
+    var otherStateVars = {
       loading: false,
-      delay: this.setDelay(data.status),
-      id: data.id,
-      statusCode: data.status,
-      statusText: data.status_message,
-      type: data.type,
-      currency: data.currency,
-      currencyCode: this.getCurrencyCode(data.currency),
-      amount: data.amount,
-      paymentMethod: data.payment_method,
-      isExplicit: data.is_explicit,
-      premium: data.premium,
-      satoshis: data.satoshis,
-      makerId: data.maker, 
-      isParticipant: data.is_participant,
-      urNick: data.ur_nick,
-      makerNick: data.maker_nick,
-      takerId: data.taker,
-      takerNick: data.taker_nick,
-      isMaker: data.is_maker,
-      isTaker: data.is_taker,
-      isBuyer: data.is_buyer,
-      isSeller: data.is_seller,
-      penalty: data.penalty,
-      expiresAt: data.expires_at,
-      badRequest: data.bad_request,
-      bondInvoice: data.bond_invoice,
-      bondSatoshis: data.bond_satoshis,
-      escrowInvoice: data.escrow_invoice,
-      escrowSatoshis: data.escrow_satoshis,
-      invoiceAmount: data.invoice_amount,
-      total_secs_expiry: data.total_secs_exp,
-      numSimilarOrders: data.num_similar_orders,
-      priceNow: data.price_now,
-      premiumNow: data.premium_now,
-      robotsInBook: data.robots_in_book,
-      premiumPercentile: data.premium_percentile,
-      numSimilarOrders: data.num_similar_orders
-  })
+      delay: this.setDelay(newStateVars.status),
+      currencyCode: this.getCurrencyCode(newStateVars.currency),
+    };
+    console.log(otherStateVars)
+    var completeStateVars = Object.assign({}, newStateVars, otherStateVars);
+    console.log(completeStateVars)
+    this.setState(completeStateVars);
+  //   {
+  //     loading: false,
+  //     delay: this.setDelay(data.status),
+  //     id: data.id,
+  //     status: data.status,
+  //     status_message: data.status_message,
+  //     type: data.type,
+  //     currency: data.currency,
+  //     currencyCode: this.getCurrencyCode(data.currency),
+  //     amount: data.amount,
+  //     payment_method: data.payment_method,
+  //     isExplicit: data.is_explicit,
+  //     premium: data.premium,
+  //     satoshis: data.satoshis,
+  //     makerId: data.maker, 
+  //     is_participant: data.is_participant,
+  //     urNick: data.ur_nick,
+  //     maker_nick: data.maker_nick,
+  //     takerId: data.taker,
+  //     taker_nick: data.taker_nick,
+  //     is_maker: data.is_maker,
+  //     is_taker: data.is_taker,
+  //     is_buyer: data.is_buyer,
+  //     is_seller: data.is_seller,
+  //     penalty: data.penalty,
+  //     expires_at: data.expires_at,
+  //     bad_request: data.bad_request,
+  //     bond_invoice: data.bond_invoice,
+  //     bondSatoshis: data.bond_satoshis,
+  //     escrow_invoice: data.escrow_invoice,
+  //     escrowSatoshis: data.escrow_satoshis,
+  //     invoice_amount: data.invoice_amount,
+  //     total_secs_exp: data.total_secs_exp,
+  //     num_similar_orders: data.num_similar_orders,
+  //     price_now: data.price_now,
+  //     premium_now: data.premium_now,
+  //     probots_in_book: data.robots_in_book,
+  //     premium_percentile: data.premium_percentile,
+  //     num_similar_orders: data.num_similar_orders
+  // })
   }
   getOrderDetails() {
     this.setState(null)
     fetch('/api/order' + '?order_id=' + this.orderId)
       .then((response) => response.json())
-      .then((data) => this.setStateCool(data));
+      .then((data) => this.completeSetState(data));
   }
 
   // These are used to refresh the data
@@ -153,7 +163,7 @@ export default class OrderPage extends Component {
 
   } else {
     var col = 'black'
-    var fraction_left = (total/1000) / this.state.total_secs_expiry
+    var fraction_left = (total/1000) / this.state.total_secs_exp
     // Make orange at 25% of time left
     if (fraction_left < 0.25){col = 'orange'}
     // Make red at 10% of time left
@@ -172,8 +182,8 @@ export default class OrderPage extends Component {
     React.useEffect(() => {
       const timer = setInterval(() => {
         setProgress((oldProgress) => {
-          var left = calcTimeDelta( new Date(this.state.expiresAt)).total /1000;
-          return (left / this.state.total_secs_expiry) * 100;
+          var left = calcTimeDelta( new Date(this.state.expires_at)).total /1000;
+          return (left / this.state.total_secs_exp) * 100;
         });
       }, 1000);
   
@@ -200,7 +210,7 @@ export default class OrderPage extends Component {
       };
       fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
       .then((response) => response.json())
-      .then((data) => this.setStateCool(data));
+      .then((data) => this.completeSetState(data));
   }
   getCurrencyDict() {
     fetch('/static/assets/currencies.json')
@@ -271,7 +281,7 @@ export default class OrderPage extends Component {
 
     // If maker and Waiting for Bond. Or if taker and Waiting for bond.
     // Simply allow to cancel without showing the cancel dialog. 
-    if ((this.state.isMaker & this.state.statusCode == 0) || this.state.isTaker & this.state.statusCode == 3){
+    if ((this.state.is_maker & this.state.status == 0) || this.state.is_taker & this.state.status == 3){
       return(
         <Grid item xs={12} align="center">
           <Button variant='contained' color='secondary' onClick={this.handleClickConfirmCancelButton}>Cancel</Button>
@@ -279,7 +289,7 @@ export default class OrderPage extends Component {
       )}
     // If the order does not yet have an escrow deposited. Show dialog
     // to confirm forfeiting the bond
-    if (this.state.statusCode in [0,1,3,6,7]){
+    if (this.state.status in [0,1,3,6,7]){
       return(
         <Grid item xs={12} align="center">
           <this.CancelDialog/>
@@ -305,24 +315,24 @@ export default class OrderPage extends Component {
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
                 <Avatar 
-                  alt={this.state.makerNick} 
-                  src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} 
+                  alt={this.state.maker_nick} 
+                  src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} 
                   />
               </ListItemAvatar>
-              <ListItemText primary={this.state.makerNick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
+              <ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
             </ListItem>
             <Divider />
 
-            {this.state.isParticipant ?
+            {this.state.is_participant ?
               <>
-                {this.state.takerNick!='None' ?
+                {this.state.taker_nick!='None' ?
                   <>
                     <ListItem align="left">
-                      <ListItemText primary={this.state.takerNick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
+                      <ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
                       <ListItemAvatar > 
                         <Avatar
-                          alt={this.state.makerNick} 
-                          src={window.location.origin +'/static/assets/avatars/' + this.state.takerNick + '.png'}
+                          alt={this.state.maker_nick} 
+                          src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
                           />
                       </ListItemAvatar>
                     </ListItem>
@@ -334,7 +344,7 @@ export default class OrderPage extends Component {
                     <ListItemIcon>
                       <ArticleIcon/>
                     </ListItemIcon>
-                    <ListItemText primary={this.state.statusText} secondary="Order status"/>
+                    <ListItemText primary={this.state.status_message} secondary="Order status"/>
                   </ListItem>
                   <Divider />
               </>
@@ -353,7 +363,7 @@ export default class OrderPage extends Component {
               <ListItemIcon>
                 <PaymentsIcon/>
               </ListItemIcon>
-              <ListItemText primary={this.state.paymentMethod} secondary="Accepted payment methods"/>
+              <ListItemText primary={this.state.payment_method} secondary="Accepted payment methods"/>
             </ListItem>
             <Divider />
 
@@ -362,8 +372,8 @@ export default class OrderPage extends Component {
               <ListItemIcon>
                 <PriceChangeIcon/>
               </ListItemIcon>
-            {this.state.priceNow? 
-                <ListItemText primary={pn(this.state.priceNow)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premiumNow+"%"} secondary="Price and Premium"/>
+            {this.state.price_now? 
+                <ListItemText primary={pn(this.state.price_now)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premium_now+"%"} secondary="Price and Premium"/>
             :
               (this.state.isExplicit ? 
                 <ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/>
@@ -386,7 +396,7 @@ export default class OrderPage extends Component {
                 <AccessTimeIcon/>
               </ListItemIcon>
               <ListItemText secondary="Expires in">
-                <Countdown date={new Date(this.state.expiresAt)} renderer={this.countdownRenderer} />
+                <Countdown date={new Date(this.state.expires_at)} renderer={this.countdownRenderer} />
               </ListItemText>
             </ListItem>
             <this.LinearDeterminate />
@@ -408,7 +418,7 @@ export default class OrderPage extends Component {
         </Grid>
 
         {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
-        {this.state.isParticipant ? 
+        {this.state.is_participant ? 
           <this.CancelButton/>
          :
           <>
@@ -427,21 +437,21 @@ export default class OrderPage extends Component {
   
   orderDetailsPage (){
     return(
-      this.state.badRequest ?
+      this.state.bad_request ?
         <div align='center'>
           <Typography component="subtitle2" variant="subtitle2" color="secondary" >
-            {this.state.badRequest}<br/>
+            {this.state.bad_request}<br/>
           </Typography>
           <Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
         </div>
         :
-        (this.state.isParticipant ? 
+        (this.state.is_participant ? 
           <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}/>
+              <TradeBox data={this.state} completeSetState={this.completeSetState} />
             </Grid>
           </Grid>
           :
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 7b91e9cc..b132ebf4 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -61,7 +61,7 @@ export default class TradeBox extends Component {
     };
     fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
     .then((response) => response.json())
-    .then((data) => (this.props.data = data));
+    .then((data) => this.props.completeSetState(data));
     this.handleClickCloseConfirmDispute();
   }
 
@@ -140,26 +140,26 @@ export default class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          {this.props.data.isMaker ?
+          {this.props.data.is_maker ?
           <Typography color="primary" component="subtitle1" variant="subtitle1">
-            <b>Lock {pn(this.props.data.bondSatoshis)} Sats to PUBLISH order </b>
+            <b>Lock {pn(this.props.data.bond_satoshis)} Sats to PUBLISH order </b>
           </Typography>
           : 
           <Typography color="primary" component="subtitle1" variant="subtitle1">
-            <b>Lock {pn(this.props.data.bondSatoshis)} Sats to TAKE the order </b>
+            <b>Lock {pn(this.props.data.bond_satoshis)} Sats to TAKE the order </b>
           </Typography>
           }
         </Grid>
         <Grid item xs={12} align="center">
-          <QRCode value={this.props.data.bondInvoice} size={305}/>
-          <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bondInvoice)}} align="center"> 📋Copy to clipboard</Button>
+          <QRCode value={this.props.data.bond_invoice} size={305}/>
+          <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> 📋Copy to clipboard</Button>
         </Grid> 
         <Grid item xs={12} align="center">
         <TextField 
             hiddenLabel
             variant="standard" 
             size="small"
-            defaultValue={this.props.data.bondInvoice} 
+            defaultValue={this.props.data.bond_invoice} 
             disabled="true"
             helperText="This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute."
             color = "secondary"
@@ -173,7 +173,7 @@ export default class TradeBox extends Component {
     return (
         <Grid item xs={12} align="center">
           <Typography color="primary" component="subtitle1" variant="subtitle1" align="center">
-            🔒 Your {this.props.data.isMaker ? 'maker' : 'taker'} bond is locked
+            🔒 Your {this.props.data.is_maker ? 'maker' : 'taker'} bond is locked
           </Typography>
         </Grid>
     );
@@ -184,19 +184,19 @@ export default class TradeBox extends Component {
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
           <Typography color="green" component="subtitle1" variant="subtitle1">
-            <b>Deposit {pn(this.props.data.escrowSatoshis)} Sats as trade collateral </b>
+            <b>Deposit {pn(this.props.data.escrow_satoshis)} Sats as trade collateral </b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <QRCode value={this.props.data.escrowInvoice} size={305}/>
-          <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrowInvoice)}} align="center"> 📋Copy to clipboard</Button>
+          <QRCode value={this.props.data.escrow_invoice} size={305}/>
+          <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> 📋Copy to clipboard</Button>
         </Grid> 
         <Grid item xs={12} align="center">
           <TextField 
             hiddenLabel
             variant="filled" 
             size="small"
-            defaultValue={this.props.data.escrowInvoice} 
+            defaultValue={this.props.data.escrow_invoice} 
             disabled="true"
             helperText={"This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the "+this.props.data.currencyCode+"."}
             color = "secondary"
@@ -264,7 +264,7 @@ export default class TradeBox extends Component {
               <ListItemIcon>
                 <BookIcon/>
               </ListItemIcon>
-                <ListItemText primary={this.props.data.numSimilarOrders} secondary={"Public orders for " + this.props.data.currencyCode}/>
+                <ListItemText primary={this.props.data.num_similar_orders} secondary={"Public orders for " + this.props.data.currencyCode}/>
               </ListItem>
               
             <Divider/>
@@ -272,7 +272,7 @@ export default class TradeBox extends Component {
               <ListItemIcon>
                 <PercentIcon/>
               </ListItemIcon>
-                <ListItemText primary={"Premium rank " + this.props.data.premiumPercentile*100+"%"} 
+                <ListItemText primary={"Premium rank " + this.props.data.premium_percentile*100+"%"} 
                   secondary={"Among public " + this.props.data.currencyCode + " orders (higher is cheaper)"} />
               </ListItem>
             <Divider/>
@@ -305,7 +305,7 @@ export default class TradeBox extends Component {
       fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
       .then((response) => response.json())
       .then((data) => this.setState({badInvoice:data.bad_invoice})
-      & console.log(data));
+      & this.props.completeSetState(data));
   }
 
   handleInputDisputeChanged=(e)=>{
@@ -329,7 +329,7 @@ export default class TradeBox extends Component {
     fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
     .then((response) => response.json())
     .then((data) => this.setState({badStatement:data.bad_statement})
-    & console.log(data));
+    & this.props.completeSetState(data));
 }
 
   showInputInvoice(){
@@ -340,14 +340,14 @@ export default class TradeBox extends Component {
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
           <Typography color="primary" component="subtitle1" variant="subtitle1">
-            <b> Submit a LN invoice for {pn(this.props.data.invoiceAmount)} Sats </b>
+            <b> Submit a LN invoice for {pn(this.props.data.invoice_amount)} Sats </b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="left">
           <Typography component="body2" variant="body2">
             The taker is committed! Before letting you send {" "+ parseFloat(parseFloat(this.props.data.amount).toFixed(4))+
             " "+ this.props.data.currencyCode}, we want to make sure you are able to receive the BTC. Please provide a 
-            valid invoice for {pn(this.props.data.invoiceAmount)} Satoshis.
+            valid invoice for {pn(this.props.data.invoice_amount)} Satoshis.
           </Typography>
         </Grid>
 
@@ -374,47 +374,65 @@ export default class TradeBox extends Component {
   }
 
   // Asks the user for a dispute statement.
-  showInDisputeStatement(){
-    return (
-
-      // TODO Option to upload files
-
-      <Grid container spacing={1}>
-        <Grid item xs={12} align="center">
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
-            <b> A dispute has been opened </b>
-          </Typography>
+  showInDisputeStatement=()=>{
+    console.log(this.props.data.statement_submitted)
+    if(this.props.data.statement_submitted){
+      return (
+        <Grid container spacing={1}>
+          <Grid item xs={12} align="center">
+            <Typography color="primary" component="subtitle1" variant="subtitle1">
+              <b> We have received your statement </b>
+            </Typography>
+          </Grid>
+          <Grid item xs={12} align="left">
+            <Typography component="body2" variant="body2">
+              We are waiting for your trade counterparty statement.
+            </Typography>
+          </Grid>
+          {this.showBondIsLocked()}
         </Grid>
-        <Grid item xs={12} align="left">
-          <Typography component="body2" variant="body2">
-            Please, submit your statement. Be clear and specific about what happened and provide the necessary 
-            evidence. It is best to provide a burner email, XMPP or telegram username to follow up with the staff.
-            Disputes are solved at the discretion of real robots <i>(aka humans)</i>, so be as helpful 
-            as possible to ensure a fair outcome. Max 5000 chars.
-          </Typography>
+      )
+    }else{
+      return (
+  
+        // TODO Option to upload files
+  
+        <Grid container spacing={1}>
+          <Grid item xs={12} align="center">
+            <Typography color="primary" component="subtitle1" variant="subtitle1">
+              <b> A dispute has been opened </b>
+            </Typography>
+          </Grid>
+          <Grid item xs={12} align="left">
+            <Typography component="body2" variant="body2">
+              Please, submit your statement. Be clear and specific about what happened and provide the necessary 
+              evidence. It is best to provide a burner email, XMPP or telegram username to follow up with the staff.
+              Disputes are solved at the discretion of real robots <i>(aka humans)</i>, so be as helpful 
+              as possible to ensure a fair outcome. Max 5000 chars.
+            </Typography>
+          </Grid>
+  
+          <Grid item xs={12} align="center">
+            <TextField 
+                error={this.state.badStatement}
+                helperText={this.state.badStatement ? this.state.badStatement : "" }
+                label={"Submit dispute statement"}
+                required
+                inputProps={{
+                    style: {textAlign:"center"}
+                }}
+                multiline
+                rows={4}
+                onChange={this.handleInputDisputeChanged}
+            />
+          </Grid>
+          <Grid item xs={12} align="center">
+            <Button onClick={this.handleClickSubmitStatementButton} variant='contained' color='primary'>Submit</Button>
+          </Grid>
+  
+          {this.showBondIsLocked()}
         </Grid>
-
-        <Grid item xs={12} align="center">
-          <TextField 
-              error={this.state.badStatement}
-              helperText={this.state.badStatement ? this.state.badStatement : "" }
-              label={"Submit dispute statement"}
-              required
-              inputProps={{
-                  style: {textAlign:"center"}
-              }}
-              multiline
-              rows={4}
-              onChange={this.handleInputDisputeChanged}
-          />
-        </Grid>
-        <Grid item xs={12} align="center">
-          <Button onClick={this.handleClickSubmitStatementButton} variant='contained' color='primary'>Submit</Button>
-        </Grid>
-
-        {this.showBondIsLocked()}
-      </Grid>
-    )
+      )}
   }
 
   showWaitingForEscrow(){
@@ -470,7 +488,7 @@ export default class TradeBox extends Component {
     };
     fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
     .then((response) => response.json())
-    .then((data) => (this.props.data = data));
+    .then((data) => this.props.completeSetState(data));
 }
 
 handleRatingChange=(e)=>{
@@ -484,7 +502,7 @@ handleRatingChange=(e)=>{
   };
   fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
   .then((response) => response.json())
-  .then((data) => (this.props.data = data));
+  .then((data) => this.props.completeSetState(data));
 }
 
   showFiatSentButton(){
@@ -528,24 +546,24 @@ handleRatingChange=(e)=>{
 
   showChat=()=>{
     //In Chatroom - No fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
-      if(this.props.data.isBuyer & this.props.data.statusCode == 9){
+      if(this.props.data.is_buyer & this.props.data.status == 9){
         var showSendButton=true;
         var showReveiceButton=false;
         var showDisputeButton=true;
       }
-      if(this.props.data.isSeller & this.props.data.statusCode == 9){
+      if(this.props.data.is_seller & this.props.data.status == 9){
         var showSendButton=false;
         var showReveiceButton=false;
         var showDisputeButton=true;
       }
           
     //In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
-      if(this.props.data.isBuyer & this.props.data.statusCode == 10){
+      if(this.props.data.is_buyer & this.props.data.status == 10){
         var showSendButton=false;
         var showReveiceButton=false;
         var showDisputeButton=true;
       }
-      if(this.props.data.isSeller & this.props.data.statusCode == 10){
+      if(this.props.data.is_seller & this.props.data.status == 10){
         var showSendButton=false;
         var showReveiceButton=true;
         var showDisputeButton=true;
@@ -555,11 +573,11 @@ handleRatingChange=(e)=>{
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
           <Typography component="subtitle1" variant="subtitle1">
-            <b>Chatting with {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}</b>
+            <b>Chatting with {this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick}</b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          {this.props.data.isSeller ? 
+          {this.props.data.is_seller ? 
           <Typography component="body2" variant="body2"  align="center">
             Say hi! Be helpful and concise. Let them know how to send you {this.props.data.currencyCode}. 
           </Typography>
@@ -571,7 +589,7 @@ handleRatingChange=(e)=>{
           <Divider/>
         </Grid>
 
-        <Chat orderId={this.props.data.id} urNick={this.props.data.urNick}/>
+        <Chat orderId={this.props.data.id} ur_nick={this.props.data.ur_nick}/>
         <Grid item xs={12} align="center">
           {showDisputeButton ? this.showOpenDisputeButton() : ""}
           {showSendButton ? this.showFiatSentButton() : ""}
@@ -592,7 +610,7 @@ handleRatingChange=(e)=>{
         </Grid>
         <Grid item xs={12} align="center">
           <Typography component="body2" variant="body2" align="center">
-            What do you think of <b>{this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}</b>?
+            What do you think of <b>{this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick}</b>?
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
@@ -616,33 +634,34 @@ handleRatingChange=(e)=>{
           </Typography>
           <Paper elevation={12} style={{ padding: 8,}}>
             {/* Maker and taker Bond request */}
-              {this.props.data.bondInvoice ? this.showQRInvoice() : ""}
+              {this.props.data.is_maker & this.props.data.status == 0 ? this.showQRInvoice() : ""}
+              {this.props.data.is_taker & this.props.data.status == 3 ? this.showQRInvoice() : ""}
 
             {/* Waiting for taker and taker bond request */}
-              {this.props.data.isMaker & this.props.data.statusCode == 1 ? this.showMakerWait() : ""}
-              {this.props.data.isMaker & this.props.data.statusCode == 3 ? this.showTakerFound() : ""}
+              {this.props.data.is_maker & this.props.data.status == 1 ? this.showMakerWait() : ""}
+              {this.props.data.is_maker & this.props.data.status == 3 ? this.showTakerFound() : ""}
 
             {/* Send Invoice (buyer) and deposit collateral (seller) */}
-              {this.props.data.isSeller & this.props.data.escrowInvoice != null ? this.showEscrowQRInvoice() : ""}
-              {this.props.data.isBuyer & this.props.data.invoiceAmount != null ? this.showInputInvoice() : ""}
-              {this.props.data.isBuyer & this.props.data.statusCode == 7 ? this.showWaitingForEscrow() : ""}
-              {this.props.data.isSeller & this.props.data.statusCode == 8 ? this.showWaitingForBuyerInvoice() : ""}
+              {this.props.data.is_seller & (this.props.data.status == 6 || this.props.data.status == 7 ) ? this.showEscrowQRInvoice() : ""}
+              {this.props.data.is_buyer & (this.props.data.status == 6 || this.props.data.status == 8 )? this.showInputInvoice() : ""}
+              {this.props.data.is_buyer & this.props.data.status == 7 ? this.showWaitingForEscrow() : ""}
+              {this.props.data.is_seller & this.props.data.status == 8 ? this.showWaitingForBuyerInvoice() : ""}
 
             {/* In Chatroom  */}
-              {this.props.data.statusCode == 9 || this.props.data.statusCode == 10 ? this.showChat(): ""}
+              {this.props.data.status == 9 || this.props.data.status == 10 ? this.showChat(): ""}
 
             {/* Trade Finished */}
-              {(this.props.data.isSeller & this.props.data.statusCode > 12 & this.props.data.statusCode < 15) ? this.showRateSelect()  : ""}
-              {(this.props.data.isBuyer & this.props.data.statusCode == 14) ? this.showRateSelect()  : ""}
+              {(this.props.data.is_seller & this.props.data.status > 12 & this.props.data.status < 15) ? this.showRateSelect()  : ""}
+              {(this.props.data.is_buyer & this.props.data.status == 14) ? this.showRateSelect()  : ""}
 
             {/* Trade Finished - Payment Routing Failed */}
-              {this.props.data.isBuyer & this.props.data.statusCode == 15 ? this.showUpdateInvoice()  : ""}
+              {this.props.data.is_buyer & this.props.data.status == 15 ? this.showUpdateInvoice()  : ""}
 
             {/* Trade Finished - TODO Needs more planning */}
-            {this.props.data.statusCode == 11 ? this.showInDisputeStatement() : ""}
+            {this.props.data.status == 11 ? this.showInDisputeStatement() : ""}
             
             {/* Order has expired */}
-            {this.props.data.statusCode == 5 ? this.showOrderExpired() : ""}
+            {this.props.data.status == 5 ? this.showOrderExpired() : ""}
               {/* TODO */}
               {/*  */}
               {/*  */}