import React, { Component } from "react";
import { Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
import TradeBox from "./TradeBox";
import getFlags from './getFlags'
// icons
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import NumbersIcon from '@mui/icons-material/Numbers';
import PriceChangeIcon from '@mui/icons-material/PriceChange';
import PaymentsIcon from '@mui/icons-material/Payments';
import ArticleIcon from '@mui/icons-material/Article';
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,
delay: 60000, // Refresh every 60 seconds by default
currencies_dict: {"1":"USD"},
total_secs_exp: 300,
loading: true,
openCancel: false,
openCollaborativeCancel: false,
};
this.orderId = this.props.match.params.orderId;
this.getCurrencyDict();
this.getOrderDetails();
// Refresh delays according to Order status
this.statusToDelay = {
"0": 2000, //'Waiting for maker bond'
"1": 15000, //'Public'
"2": 9999999, //'Deleted'
"3": 2000, //'Waiting for taker bond'
"4": 9999999, //'Cancelled'
"5": 999999, //'Expired'
"6": 3000, //'Waiting for trade collateral and buyer invoice'
"7": 3000, //'Waiting only for seller trade collateral'
"8": 8000, //'Waiting only for buyer invoice'
"9": 10000, //'Sending fiat - In chatroom'
"10": 10000, //'Fiat sent - In chatroom'
"11": 30000, //'In dispute'
"12": 9999999, //'Collaboratively cancelled'
"13": 3000, //'Sending satoshis to buyer'
"14": 9999999, //'Sucessful trade'
"15": 10000, //'Failed lightning network routing'
"16": 9999999, //'Maker lost dispute'
"17": 9999999, //'Taker lost dispute'
}
}
completeSetState=(newStateVars)=>{
// In case the reply only has "bad_request"
// Do not substitute these two for "undefined" as
// otherStateVars will fail to assign values
if (newStateVars.currency == null){
newStateVars.currency = this.state.currency
newStateVars.status = this.state.status
}
var otherStateVars = {
loading: false,
delay: this.setDelay(newStateVars.status),
currencyCode: this.getCurrencyCode(newStateVars.currency),
};
var completeStateVars = Object.assign({}, newStateVars, otherStateVars);
this.setState(completeStateVars);
}
getOrderDetails() {
this.setState(null)
fetch('/api/order' + '?order_id=' + this.orderId)
.then((response) => response.json())
.then((data) => this.completeSetState(data));
}
// These are used to refresh the data
componentDidMount() {
this.interval = setInterval(this.tick, this.state.delay);
}
componentDidUpdate() {
clearInterval(this.interval);
this.interval = setInterval(this.tick, this.state.delay);
}
componentWillUnmount() {
clearInterval(this.interval);
}
tick = () => {
this.getOrderDetails();
}
// Fix to use proper react props
handleClickBackButton=()=>{
window.history.back();
}
// Countdown Renderer callback with condition
countdownRenderer = ({ total, hours, minutes, seconds, completed }) => {
if (completed) {
// Render a completed state
return ( The order has expired);
} else {
var col = 'black'
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
if (fraction_left < 0.1){col = 'red'}
// Render a countdown, bold when less than 25%
return (
fraction_left < 0.25 ? {hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s
:{hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s
);
}
};
LinearDeterminate =()=> {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
var left = calcTimeDelta( new Date(this.state.expires_at)).total /1000;
return (left / this.state.total_secs_exp) * 100;
});
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (