From 8a43d3359d5d669a4567db2fbaef322eb1117366 Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Sat, 22 Jan 2022 15:05:03 -0800 Subject: [PATCH] Simplify orderpage vars, improve tradebox response times --- api/views.py | 8 ++ frontend/src/components/BookPage.js | 3 + frontend/src/components/Chat.js | 4 +- frontend/src/components/OrderPage.js | 142 +++++++++++---------- frontend/src/components/TradeBox.js | 179 +++++++++++++++------------ 5 files changed, 188 insertions(+), 148 deletions(-) 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} +
Be the first one to create an order +
+
) : 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 => <> {/* 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 ? { - 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( @@ -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( @@ -305,24 +315,24 @@ export default class OrderPage extends Component { - + - {this.state.isParticipant ? + {this.state.is_participant ? <> - {this.state.takerNick!='None' ? + {this.state.taker_nick!='None' ? <> - + @@ -334,7 +344,7 @@ export default class OrderPage extends Component { - + @@ -353,7 +363,7 @@ export default class OrderPage extends Component { - + @@ -362,8 +372,8 @@ export default class OrderPage extends Component { - {this.state.priceNow? - + {this.state.price_now? + : (this.state.isExplicit ? @@ -386,7 +396,7 @@ export default class OrderPage extends Component { - + @@ -408,7 +418,7 @@ export default class OrderPage extends Component { {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */} - {this.state.isParticipant ? + {this.state.is_participant ? : <> @@ -427,21 +437,21 @@ export default class OrderPage extends Component { orderDetailsPage (){ return( - this.state.badRequest ? + this.state.bad_request ?
- {this.state.badRequest}
+ {this.state.bad_request}
: - (this.state.isParticipant ? + (this.state.is_participant ? {this.orderBox()} - + : 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 { - {this.props.data.isMaker ? + {this.props.data.is_maker ? - Lock {pn(this.props.data.bondSatoshis)} Sats to PUBLISH order + Lock {pn(this.props.data.bond_satoshis)} Sats to PUBLISH order : - Lock {pn(this.props.data.bondSatoshis)} Sats to TAKE the order + Lock {pn(this.props.data.bond_satoshis)} Sats to TAKE the order } - - + + - 🔒 Your {this.props.data.isMaker ? 'maker' : 'taker'} bond is locked + 🔒 Your {this.props.data.is_maker ? 'maker' : 'taker'} bond is locked ); @@ -184,19 +184,19 @@ export default class TradeBox extends Component { - Deposit {pn(this.props.data.escrowSatoshis)} Sats as trade collateral + Deposit {pn(this.props.data.escrow_satoshis)} Sats as trade collateral - - + + - + @@ -272,7 +272,7 @@ export default class TradeBox extends Component { - @@ -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 { - Submit a LN invoice for {pn(this.props.data.invoiceAmount)} Sats + Submit a LN invoice for {pn(this.props.data.invoice_amount)} Sats 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. @@ -374,47 +374,65 @@ export default class TradeBox extends Component { } // Asks the user for a dispute statement. - showInDisputeStatement(){ - return ( - - // TODO Option to upload files - - - - - A dispute has been opened - + showInDisputeStatement=()=>{ + console.log(this.props.data.statement_submitted) + if(this.props.data.statement_submitted){ + return ( + + + + We have received your statement + + + + + We are waiting for your trade counterparty statement. + + + {this.showBondIsLocked()} - - - 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 (aka humans), so be as helpful - as possible to ensure a fair outcome. Max 5000 chars. - + ) + }else{ + return ( + + // TODO Option to upload files + + + + + A dispute has been opened + + + + + 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 (aka humans), so be as helpful + as possible to ensure a fair outcome. Max 5000 chars. + + + + + + + + + + + {this.showBondIsLocked()} - - - - - - - - - {this.showBondIsLocked()} - - ) + )} } 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)=>{ - Chatting with {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick} + Chatting with {this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick} - {this.props.data.isSeller ? + {this.props.data.is_seller ? Say hi! Be helpful and concise. Let them know how to send you {this.props.data.currencyCode}. @@ -571,7 +589,7 @@ handleRatingChange=(e)=>{ - + {showDisputeButton ? this.showOpenDisputeButton() : ""} {showSendButton ? this.showFiatSentButton() : ""} @@ -592,7 +610,7 @@ handleRatingChange=(e)=>{ - What do you think of {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}? + What do you think of {this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick}? @@ -616,33 +634,34 @@ handleRatingChange=(e)=>{ {/* 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 */} {/* */} {/* */}