import React, { Component } from "react"; import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@material-ui/core" import TradeBox from "./TradeBox"; function msToTime(duration) { var seconds = Math.floor((duration / 1000) % 60), minutes = Math.floor((duration / (1000 * 60)) % 60), hours = Math.floor((duration / (1000 * 60 * 60)) % 24); minutes = (minutes < 10) ? "0" + minutes : minutes; seconds = (seconds < 10) ? "0" + seconds : seconds; return hours + "h " + minutes + "m " + seconds + "s"; } // TO DO fix Progress bar to go from 100 to 0, from total_expiration time, showing time_left function LinearDeterminate() { const [progress, setProgress] = React.useState(0); React.useEffect(() => { const timer = setInterval(() => { setProgress((oldProgress) => { if (oldProgress === 0) { return 100; } const diff = 1; return Math.max(oldProgress - diff, 0); }); }, 500); return () => { clearInterval(timer); }; }, []); return ( ); } 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 OrderPage extends Component { constructor(props) { super(props); this.state = { isExplicit: false, }; this.orderId = this.props.match.params.orderId; this.getOrderDetails(); } getOrderDetails() { fetch('/api/order' + '?order_id=' + this.orderId) .then((response) => response.json()) .then((data) => { this.setState({ 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, 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, expiresAt: data.expires_at, badRequest: data.bad_request, bondInvoice: data.bond_invoice, bondSatoshis: data.bond_satoshis, escrowInvoice: data.escrow_invoice, escrowSatoshis: data.escrow_satoshis, badRequest: data.bad_request, }); }); } // Gets currency code (3 letters) from numeric (e.g., 1 -> USD) // Improve this function so currencies are read from json getCurrencyCode(val){ return (val == 1 ) ? "USD": ((val == 2 ) ? "EUR":"ETH") } // Fix to use proper react props handleClickBackButton=()=>{ window.history.back(); } handleClickTakeOrderButton=()=>{ console.log(this.state) const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action':'take', }), }; fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions) .then((response) => response.json()) .then((data) => (console.log(data) & this.getOrderDetails(data.id))); } handleClickCancelOrderButton=()=>{ console.log(this.state) const requestOptions = { method: 'POST', headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),}, body: JSON.stringify({ 'action':'cancel', }), }; fetch('/api/order/' + '?order_id=' + this.orderId, requestOptions) .then((response) => response.json()) .then((data) => (console.log(data) & this.getOrderDetails(data.id))); } orderBox=()=>{ return( BTC {this.state.type ? " Sell " : " Buy "} Order {this.state.isParticipant ? <> {this.state.takerNick!='None' ? <> : "" } :"" } {this.state.isExplicit ? : } {/* Participants cannot see the Back or Take Order buttons */} {this.state.isParticipant ? "" : <> } {/* Makers can cancel before commiting the bond (status 0)*/} {this.state.isMaker & this.state.statusCode == 0 ? :""} {/* Takers can cancel before commiting the bond (status 3)*/} {this.state.isTaker & this.state.statusCode == 3 ? :""} ) } render (){ return ( this.state.badRequest ?
{this.state.badRequest}
: (this.state.isParticipant ? {this.orderBox()} : {this.orderBox()} ) ); } }