RoboSats/robosats
1
1
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-26 22:06:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Simplify orderpage vars, improve tradebox response times

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-01-22 15:05:03 -08:00
parent 28abd0380f
commit 8a43d3359d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
5 changed files with 188 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/views.py
View File

@ -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)

3
frontend/src/components/BookPage.js
View File

@ -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>)
:

4
frontend/src/components/Chat.js
View File

@ -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

142
frontend/src/components/OrderPage.js
View File

@ -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>
:

179
frontend/src/components/TradeBox.js
View File

@ -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 */}
{/* */}
{/* */}