Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-07 05:49:04 +00:00
Code Issues Actions 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 # add whether a collaborative cancel is pending
data['pending_cancel'] = order.is_pending_cancel 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) 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} No orders found to {this.state.type == 0 ? ' sell ' :' buy ' } BTC for {this.state.currencyCode}
</Typography> </Typography>
</Grid> </Grid>
<br/>
<Grid item> <Grid item>
<Button variant="contained" color='primary' to='/make/' component={Link}>Make Order</Button> <Button variant="contained" color='primary' to='/make/' component={Link}>Make Order</Button>
</Grid> </Grid>
<Typography component="body1" variant="body1"> <Typography component="body1" variant="body1">
Be the first one to create an order Be the first one to create an order
<br/>
<br/>
</Typography> </Typography>
</Grid>) </Grid>)
: :

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

@ -51,7 +51,7 @@ export default class Chat extends Component {
this.client.send(JSON.stringify({ this.client.send(JSON.stringify({
type: "message", type: "message",
message: this.state.value, message: this.state.value,
nick: this.props.urNick, nick: this.props.ur_nick,
})); }));
this.state.value = '' this.state.value = ''
e.preventDefault(); e.preventDefault();
@ -64,7 +64,7 @@ export default class Chat extends Component {
{this.state.messages.map(message => <> {this.state.messages.map(message => <>
<Card elevation={5} align="left" > <Card elevation={5} align="left" >
{/* If message sender is not our nick, gray color, if it is our nick, green color */} {/* 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 <CardHeader
avatar={ avatar={
<Avatar <Avatar

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

@ -42,7 +42,7 @@ export default class OrderPage extends Component {
isExplicit: false, isExplicit: false,
delay: 60000, // Refresh every 60 seconds by default delay: 60000, // Refresh every 60 seconds by default
currencies_dict: {"1":"USD"}, currencies_dict: {"1":"USD"},
total_secs_expiry: 300, total_secs_exp: 300,
loading: true, loading: true,
openCancel: false, 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 // 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. // Will need some renaming everywhere, but will decrease the mess.
setStateCool=(data)=>{ completeSetState=(newStateVars)=>{
this.setState({ console.log(newStateVars)
var otherStateVars = {
loading: false, loading: false,
delay: this.setDelay(data.status), delay: this.setDelay(newStateVars.status),
id: data.id, currencyCode: this.getCurrencyCode(newStateVars.currency),
statusCode: data.status, };
statusText: data.status_message, console.log(otherStateVars)
type: data.type, var completeStateVars = Object.assign({}, newStateVars, otherStateVars);
currency: data.currency, console.log(completeStateVars)
currencyCode: this.getCurrencyCode(data.currency), this.setState(completeStateVars);
amount: data.amount, // {
paymentMethod: data.payment_method, // loading: false,
isExplicit: data.is_explicit, // delay: this.setDelay(data.status),
premium: data.premium, // id: data.id,
satoshis: data.satoshis, // status: data.status,
makerId: data.maker, // status_message: data.status_message,
isParticipant: data.is_participant, // type: data.type,
urNick: data.ur_nick, // currency: data.currency,
makerNick: data.maker_nick, // currencyCode: this.getCurrencyCode(data.currency),
takerId: data.taker, // amount: data.amount,
takerNick: data.taker_nick, // payment_method: data.payment_method,
isMaker: data.is_maker, // isExplicit: data.is_explicit,
isTaker: data.is_taker, // premium: data.premium,
isBuyer: data.is_buyer, // satoshis: data.satoshis,
isSeller: data.is_seller, // makerId: data.maker,
penalty: data.penalty, // is_participant: data.is_participant,
expiresAt: data.expires_at, // urNick: data.ur_nick,
badRequest: data.bad_request, // maker_nick: data.maker_nick,
bondInvoice: data.bond_invoice, // takerId: data.taker,
bondSatoshis: data.bond_satoshis, // taker_nick: data.taker_nick,
escrowInvoice: data.escrow_invoice, // is_maker: data.is_maker,
escrowSatoshis: data.escrow_satoshis, // is_taker: data.is_taker,
invoiceAmount: data.invoice_amount, // is_buyer: data.is_buyer,
total_secs_expiry: data.total_secs_exp, // is_seller: data.is_seller,
numSimilarOrders: data.num_similar_orders, // penalty: data.penalty,
priceNow: data.price_now, // expires_at: data.expires_at,
premiumNow: data.premium_now, // bad_request: data.bad_request,
robotsInBook: data.robots_in_book, // bond_invoice: data.bond_invoice,
premiumPercentile: data.premium_percentile, // bondSatoshis: data.bond_satoshis,
numSimilarOrders: data.num_similar_orders // 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() { getOrderDetails() {
this.setState(null) this.setState(null)
fetch('/api/order' + '?order_id=' + this.orderId) fetch('/api/order' + '?order_id=' + this.orderId)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.setStateCool(data)); .then((data) => this.completeSetState(data));
} }
// These are used to refresh the data // These are used to refresh the data
@ -153,7 +163,7 @@ export default class OrderPage extends Component {
} else { } else {
var col = 'black' 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 // Make orange at 25% of time left
if (fraction_left < 0.25){col = 'orange'} if (fraction_left < 0.25){col = 'orange'}
// Make red at 10% of time left // Make red at 10% of time left
@ -172,8 +182,8 @@ export default class OrderPage extends Component {
React.useEffect(() => { React.useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
setProgress((oldProgress) => { setProgress((oldProgress) => {
var left = calcTimeDelta( new Date(this.state.expiresAt)).total /1000; var left = calcTimeDelta( new Date(this.state.expires_at)).total /1000;
return (left / this.state.total_secs_expiry) * 100; return (left / this.state.total_secs_exp) * 100;
}); });
}, 1000); }, 1000);
@ -200,7 +210,7 @@ export default class OrderPage extends Component {
}; };
fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions) fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.setStateCool(data)); .then((data) => this.completeSetState(data));
} }
getCurrencyDict() { getCurrencyDict() {
fetch('/static/assets/currencies.json') 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. // If maker and Waiting for Bond. Or if taker and Waiting for bond.
// Simply allow to cancel without showing the cancel dialog. // 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( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.handleClickConfirmCancelButton}>Cancel</Button> <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 // If the order does not yet have an escrow deposited. Show dialog
// to confirm forfeiting the bond // 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( return(
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<this.CancelDialog/> <this.CancelDialog/>
@ -305,24 +315,24 @@ export default class OrderPage extends Component {
<ListItem > <ListItem >
<ListItemAvatar sx={{ width: 56, height: 56 }}> <ListItemAvatar sx={{ width: 56, height: 56 }}>
<Avatar <Avatar
alt={this.state.makerNick} alt={this.state.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
/> />
</ListItemAvatar> </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> </ListItem>
<Divider /> <Divider />
{this.state.isParticipant ? {this.state.is_participant ?
<> <>
{this.state.takerNick!='None' ? {this.state.taker_nick!='None' ?
<> <>
<ListItem align="left"> <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 > <ListItemAvatar >
<Avatar <Avatar
alt={this.state.makerNick} alt={this.state.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.takerNick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
/> />
</ListItemAvatar> </ListItemAvatar>
</ListItem> </ListItem>
@ -334,7 +344,7 @@ export default class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<ArticleIcon/> <ArticleIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.state.statusText} secondary="Order status"/> <ListItemText primary={this.state.status_message} secondary="Order status"/>
</ListItem> </ListItem>
<Divider /> <Divider />
</> </>
@ -353,7 +363,7 @@ export default class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<PaymentsIcon/> <PaymentsIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.state.paymentMethod} secondary="Accepted payment methods"/> <ListItemText primary={this.state.payment_method} secondary="Accepted payment methods"/>
</ListItem> </ListItem>
<Divider /> <Divider />
@ -362,8 +372,8 @@ export default class OrderPage extends Component {
<ListItemIcon> <ListItemIcon>
<PriceChangeIcon/> <PriceChangeIcon/>
</ListItemIcon> </ListItemIcon>
{this.state.priceNow? {this.state.price_now?
<ListItemText primary={pn(this.state.priceNow)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premiumNow+"%"} secondary="Price and Premium"/> <ListItemText primary={pn(this.state.price_now)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premium_now+"%"} secondary="Price and Premium"/>
: :
(this.state.isExplicit ? (this.state.isExplicit ?
<ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/> <ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/>
@ -386,7 +396,7 @@ export default class OrderPage extends Component {
<AccessTimeIcon/> <AccessTimeIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText secondary="Expires in"> <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> </ListItemText>
</ListItem> </ListItem>
<this.LinearDeterminate /> <this.LinearDeterminate />
@ -408,7 +418,7 @@ export default class OrderPage extends Component {
</Grid> </Grid>
{/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */} {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
{this.state.isParticipant ? {this.state.is_participant ?
<this.CancelButton/> <this.CancelButton/>
: :
<> <>
@ -427,21 +437,21 @@ export default class OrderPage extends Component {
orderDetailsPage (){ orderDetailsPage (){
return( return(
this.state.badRequest ? this.state.bad_request ?
<div align='center'> <div align='center'>
<Typography component="subtitle2" variant="subtitle2" color="secondary" > <Typography component="subtitle2" variant="subtitle2" color="secondary" >
{this.state.badRequest}<br/> {this.state.bad_request}<br/>
</Typography> </Typography>
<Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button> <Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
</div> </div>
: :
(this.state.isParticipant ? (this.state.is_participant ?
<Grid container xs={12} align="center" spacing={2}> <Grid container xs={12} align="center" spacing={2}>
<Grid item xs={6} align="left"> <Grid item xs={6} align="left">
{this.orderBox()} {this.orderBox()}
</Grid> </Grid>
<Grid item xs={6} align="left"> <Grid item xs={6} align="left">
<TradeBox data={this.state}/> <TradeBox data={this.state} completeSetState={this.completeSetState} />
</Grid> </Grid>
</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) fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.props.data = data)); .then((data) => this.props.completeSetState(data));
this.handleClickCloseConfirmDispute(); this.handleClickCloseConfirmDispute();
} }
@ -140,26 +140,26 @@ export default class TradeBox extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.props.data.isMaker ? {this.props.data.is_maker ?
<Typography color="primary" component="subtitle1" variant="subtitle1"> <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>
: :
<Typography color="primary" component="subtitle1" variant="subtitle1"> <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> </Typography>
} }
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<QRCode value={this.props.data.bondInvoice} size={305}/> <QRCode value={this.props.data.bond_invoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bondInvoice)}} align="center"> 📋Copy to clipboard</Button> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> 📋Copy to clipboard</Button>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
hiddenLabel hiddenLabel
variant="standard" variant="standard"
size="small" size="small"
defaultValue={this.props.data.bondInvoice} defaultValue={this.props.data.bond_invoice}
disabled="true" 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." 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" color = "secondary"
@ -173,7 +173,7 @@ export default class TradeBox extends Component {
return ( return (
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="primary" component="subtitle1" variant="subtitle1" 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> </Typography>
</Grid> </Grid>
); );
@ -184,19 +184,19 @@ export default class TradeBox extends Component {
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="green" component="subtitle1" variant="subtitle1"> <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> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<QRCode value={this.props.data.escrowInvoice} size={305}/> <QRCode value={this.props.data.escrow_invoice} size={305}/>
<Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrowInvoice)}} align="center"> 📋Copy to clipboard</Button> <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> 📋Copy to clipboard</Button>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<TextField <TextField
hiddenLabel hiddenLabel
variant="filled" variant="filled"
size="small" size="small"
defaultValue={this.props.data.escrowInvoice} defaultValue={this.props.data.escrow_invoice}
disabled="true" 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+"."} 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" color = "secondary"
@ -264,7 +264,7 @@ export default class TradeBox extends Component {
<ListItemIcon> <ListItemIcon>
<BookIcon/> <BookIcon/>
</ListItemIcon> </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> </ListItem>
<Divider/> <Divider/>
@ -272,7 +272,7 @@ export default class TradeBox extends Component {
<ListItemIcon> <ListItemIcon>
<PercentIcon/> <PercentIcon/>
</ListItemIcon> </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)"} /> secondary={"Among public " + this.props.data.currencyCode + " orders (higher is cheaper)"} />
</ListItem> </ListItem>
<Divider/> <Divider/>
@ -305,7 +305,7 @@ export default class TradeBox extends Component {
fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.setState({badInvoice:data.bad_invoice}) .then((data) => this.setState({badInvoice:data.bad_invoice})
& console.log(data)); & this.props.completeSetState(data));
} }
handleInputDisputeChanged=(e)=>{ handleInputDisputeChanged=(e)=>{
@ -329,7 +329,7 @@ export default class TradeBox extends Component {
fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => this.setState({badStatement:data.bad_statement}) .then((data) => this.setState({badStatement:data.bad_statement})
& console.log(data)); & this.props.completeSetState(data));
} }
showInputInvoice(){ showInputInvoice(){
@ -340,14 +340,14 @@ export default class TradeBox extends Component {
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography color="primary" component="subtitle1" variant="subtitle1"> <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> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="left"> <Grid item xs={12} align="left">
<Typography component="body2" variant="body2"> <Typography component="body2" variant="body2">
The taker is committed! Before letting you send {" "+ parseFloat(parseFloat(this.props.data.amount).toFixed(4))+ 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 " "+ 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> </Typography>
</Grid> </Grid>
@ -374,47 +374,65 @@ export default class TradeBox extends Component {
} }
// Asks the user for a dispute statement. // Asks the user for a dispute statement.
showInDisputeStatement(){ showInDisputeStatement=()=>{
return ( console.log(this.props.data.statement_submitted)
if(this.props.data.statement_submitted){
// TODO Option to upload files return (
<Grid container spacing={1}>
<Grid container spacing={1}> <Grid item xs={12} align="center">
<Grid item xs={12} align="center"> <Typography color="primary" component="subtitle1" variant="subtitle1">
<Typography color="primary" component="subtitle1" variant="subtitle1"> <b> We have received your statement </b>
<b> A dispute has been opened </b> </Typography>
</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>
<Grid item xs={12} align="left"> )
<Typography component="body2" variant="body2"> }else{
Please, submit your statement. Be clear and specific about what happened and provide the necessary return (
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 // TODO Option to upload files
as possible to ensure a fair outcome. Max 5000 chars.
</Typography> <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>
)}
<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(){ showWaitingForEscrow(){
@ -470,7 +488,7 @@ export default class TradeBox extends Component {
}; };
fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.props.data = data)); .then((data) => this.props.completeSetState(data));
} }
handleRatingChange=(e)=>{ handleRatingChange=(e)=>{
@ -484,7 +502,7 @@ handleRatingChange=(e)=>{
}; };
fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.props.data = data)); .then((data) => this.props.completeSetState(data));
} }
showFiatSentButton(){ showFiatSentButton(){
@ -528,24 +546,24 @@ handleRatingChange=(e)=>{
showChat=()=>{ showChat=()=>{
//In Chatroom - No fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton) //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 showSendButton=true;
var showReveiceButton=false; var showReveiceButton=false;
var showDisputeButton=true; 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 showSendButton=false;
var showReveiceButton=false; var showReveiceButton=false;
var showDisputeButton=true; var showDisputeButton=true;
} }
//In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton) //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 showSendButton=false;
var showReveiceButton=false; var showReveiceButton=false;
var showDisputeButton=true; 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 showSendButton=false;
var showReveiceButton=true; var showReveiceButton=true;
var showDisputeButton=true; var showDisputeButton=true;
@ -555,11 +573,11 @@ handleRatingChange=(e)=>{
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="subtitle1" variant="subtitle1"> <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> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.props.data.isSeller ? {this.props.data.is_seller ?
<Typography component="body2" variant="body2" align="center"> <Typography component="body2" variant="body2" align="center">
Say hi! Be helpful and concise. Let them know how to send you {this.props.data.currencyCode}. Say hi! Be helpful and concise. Let them know how to send you {this.props.data.currencyCode}.
</Typography> </Typography>
@ -571,7 +589,7 @@ handleRatingChange=(e)=>{
<Divider/> <Divider/>
</Grid> </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"> <Grid item xs={12} align="center">
{showDisputeButton ? this.showOpenDisputeButton() : ""} {showDisputeButton ? this.showOpenDisputeButton() : ""}
{showSendButton ? this.showFiatSentButton() : ""} {showSendButton ? this.showFiatSentButton() : ""}
@ -592,7 +610,7 @@ handleRatingChange=(e)=>{
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="body2" variant="body2" 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> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -616,33 +634,34 @@ handleRatingChange=(e)=>{
</Typography> </Typography>
<Paper elevation={12} style={{ padding: 8,}}> <Paper elevation={12} style={{ padding: 8,}}>
{/* Maker and taker Bond request */} {/* 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 */} {/* Waiting for taker and taker bond request */}
{this.props.data.isMaker & this.props.data.statusCode == 1 ? this.showMakerWait() : ""} {this.props.data.is_maker & this.props.data.status == 1 ? this.showMakerWait() : ""}
{this.props.data.isMaker & this.props.data.statusCode == 3 ? this.showTakerFound() : ""} {this.props.data.is_maker & this.props.data.status == 3 ? this.showTakerFound() : ""}
{/* Send Invoice (buyer) and deposit collateral (seller) */} {/* Send Invoice (buyer) and deposit collateral (seller) */}
{this.props.data.isSeller & this.props.data.escrowInvoice != null ? this.showEscrowQRInvoice() : ""} {this.props.data.is_seller & (this.props.data.status == 6 || this.props.data.status == 7 ) ? this.showEscrowQRInvoice() : ""}
{this.props.data.isBuyer & this.props.data.invoiceAmount != null ? this.showInputInvoice() : ""} {this.props.data.is_buyer & (this.props.data.status == 6 || this.props.data.status == 8 )? this.showInputInvoice() : ""}
{this.props.data.isBuyer & this.props.data.statusCode == 7 ? this.showWaitingForEscrow() : ""} {this.props.data.is_buyer & this.props.data.status == 7 ? this.showWaitingForEscrow() : ""}
{this.props.data.isSeller & this.props.data.statusCode == 8 ? this.showWaitingForBuyerInvoice() : ""} {this.props.data.is_seller & this.props.data.status == 8 ? this.showWaitingForBuyerInvoice() : ""}
{/* In Chatroom */} {/* 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 */} {/* Trade Finished */}
{(this.props.data.isSeller & this.props.data.statusCode > 12 & this.props.data.statusCode < 15) ? this.showRateSelect() : ""} {(this.props.data.is_seller & this.props.data.status > 12 & this.props.data.status < 15) ? this.showRateSelect() : ""}
{(this.props.data.isBuyer & this.props.data.statusCode == 14) ? this.showRateSelect() : ""} {(this.props.data.is_buyer & this.props.data.status == 14) ? this.showRateSelect() : ""}
{/* Trade Finished - Payment Routing Failed */} {/* 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 */} {/* Trade Finished - TODO Needs more planning */}
{this.props.data.statusCode == 11 ? this.showInDisputeStatement() : ""} {this.props.data.status == 11 ? this.showInDisputeStatement() : ""}
{/* Order has expired */} {/* Order has expired */}
{this.props.data.statusCode == 5 ? this.showOrderExpired() : ""} {this.props.data.status == 5 ? this.showOrderExpired() : ""}
{/* TODO */} {/* TODO */}
{/* */} {/* */}
{/* */} {/* */}