import React, { Component } from "react"; import { Link, Paper, Rating, Button, Grid, Typography, TextField, List, ListItem, ListItemText, Divider} from "@mui/material" import QRCode from "react-qr-code"; function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // Does this cookie string begin with the name we want? if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } const csrftoken = getCookie('csrftoken'); // pretty numbers function pn(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } export default class TradeBox extends Component { constructor(props) { super(props); this.state = { badInvoice: false, } } showQRInvoice=()=>{ return ( Robosats show commitment to their peers {this.props.data.isMaker ? Lock {pn(this.props.data.bondSatoshis)} Sats to PUBLISH order : Lock {pn(this.props.data.bondSatoshis)} Sats to TAKE the order } ); } showEscrowQRInvoice=()=>{ return ( Deposit {pn(this.props.data.escrowSatoshis)} Sats as trade collateral ); } showTakerFound=()=>{ // TODO Make some sound here! The maker might have been waiting for long return ( A taker has been found! Please wait for the taker to confirm his commitment by locking a bond. ); } showMakerWait=()=>{ return ( Your order is public. Wait for a taker.

Be patient while robots check the book. It might take some time. This box will ring πŸ”Š once a robot takes your order.

Please note that if your premium is too high, or if your currency or payment methods are not popular, your order might expire untaken. Your bond will return to you (no action needed).

πŸ”’ Your maker bond is safely locked {/* TODO API sends data for a more confortable wait */}
) } handleInputInvoiceChanged=(e)=>{ this.setState({ invoice: e.target.value, badInvoice: false, }); } // Fix this. It's clunky because it takes time. this.props.data does not refresh until next refresh of OrderPage. handleClickSubmitInvoiceButton=()=>{ this.setState({badInvoice:false}); const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action':'update_invoice', 'invoice': this.state.invoice, }), }; 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)); } showInputInvoice(){ return ( // TODO Camera option to read QR Submit a LN invoice for {pn(this.props.data.invoiceAmount)} 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. ) } showWaitingForEscrow(){ return( Your invoice looks good!

We are waiting for the seller to deposit the full trade BTC amount into the escrow.

Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically.

) } showWaitingForBuyerInvoice(){ return( The trade collateral is locked! :D

We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.

Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically.

) } handleClickConfirmButton=()=>{ const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action': "confirm", }), }; fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) .then((response) => response.json()) .then((data) => (this.props.data = data)); } handleClickOpenDisputeButton=()=>{ const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action': "dispute", }), }; fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) .then((response) => response.json()) .then((data) => (this.props.data = data)); } handleRatingChange=(e)=>{ const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action': "rate", 'rating': e.target.value, }), }; fetch('/api/order/' + '?order_id=' + this.props.data.id, requestOptions) .then((response) => response.json()) .then((data) => (this.props.data = data)); } showFiatSentButton(){ return( ) } showFiatReceivedButton(){ // TODO, show alert and ask for double confirmation (Have you check you received the fiat? Confirming fiat received settles the trade.) // Ask for double confirmation. return( ) } showOpenDisputeButton(){ // TODO, show alert about how opening a dispute might involve giving away personal data and might mean losing the bond. Ask for double confirmation. return( ) } showChat(sendFiatButton, receivedFiatButton, openDisputeButton){ return( Chatting with {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick} {this.props.data.isSeller ? Say hi to your peer robot! Be helpful and concise. Let him know how to send you {this.props.data.currencyCode}. : Say hi to your peer robot! Ask for payment details and click 'Confirm {this.props.data.currencyCode} sent' as soon as you send the payment. } CHAT PLACEHOLDER {sendFiatButton ? this.showFiatSentButton() : ""} {receivedFiatButton ? this.showFiatReceivedButton() : ""} {openDisputeButton ? this.showOpenDisputeButton() : ""} ) } // showFiatReceivedButton(){ // } // showOpenDisputeButton(){ // } showRateSelect(){ return( πŸŽ‰Trade finished!πŸ₯³ What do you think of {this.props.data.isMaker ? this.props.data.takerNick : this.props.data.makerNick}? ) } render() { return ( TradeBox {/* Maker and taker Bond request */} {this.props.data.bondInvoice ? 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() : ""} {/* 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() : ""} {/* In Chatroom - No fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton) */} {this.props.data.isBuyer & this.props.data.statusCode == 9 ? this.showChat(true,false,true) : ""} {this.props.data.isSeller & this.props.data.statusCode == 9 ? this.showChat(false,false,true) : ""} {/* In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton) */} {this.props.data.isBuyer & this.props.data.statusCode == 10 ? this.showChat(false,false,true) : ""} {this.props.data.isSeller & this.props.data.statusCode == 10 ? this.showChat(false,true,true) : ""} {/* 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() : ""} {/* Trade Finished - Payment Routing Failed */} {this.props.data.isBuyer & this.props.data.statusCode == 15 ? this.showUpdateInvoice() : ""} {/* Trade Finished - Payment Routing Failed - TODO Needs more planning */} {this.props.data.statusCode == 11 ? this.showInDispute() : ""} {/* TODO */} {/* */} {/* */} ); } }