robosats/frontend/src/components/OrderPage.js

416 lines
14 KiB
JavaScript
Raw Normal View History

import React, { Component } from "react";
2022-01-14 12:00:53 +00:00
import { Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
import TradeBox from "./TradeBox";
2022-01-14 12:00:53 +00:00
// 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 MoneyIcon from '@mui/icons-material/Money';
import ArticleIcon from '@mui/icons-material/Article';
2022-01-08 15:34:09 +00:00
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_expiry: 300,
2022-01-14 14:19:25 +00:00
loading: true,
};
this.orderId = this.props.match.params.orderId;
this.getCurrencyDict();
this.getOrderDetails();
// Change refresh delay according to Order status
this.statusToDelay = {
"0": 3000, //'Waiting for maker bond'
"1": 30000, //'Public'
"2": 9999999, //'Deleted'
"3": 3000, //'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": 10000, //'Waiting only for buyer invoice'
"9": 10000, //'Sending fiat - In chatroom'
"10": 15000, //'Fiat sent - In chatroom'
"11": 300000, //'In dispute'
"12": 9999999,//'Collaboratively cancelled'
"13": 120000, //'Sending satoshis to buyer'
"14": 9999999,//'Sucessful trade'
"15": 10000, //'Failed lightning network routing'
"16": 9999999,//'Maker lost dispute'
"17": 9999999,//'Taker lost dispute'
}
}
getOrderDetails() {
2022-01-09 01:23:13 +00:00
this.setState(null)
fetch('/api/order' + '?order_id=' + this.orderId)
.then((response) => response.json())
2022-01-09 14:07:05 +00:00
.then((data) => {console.log(data) &
this.setState({
2022-01-14 14:19:25 +00:00
loading: false,
delay: this.setDelay(data.status),
2022-01-09 14:07:05 +00:00
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,
2022-01-10 12:10:32 +00:00
penalty: data.penalty,
expiresAt: data.expires_at,
badRequest: data.bad_request,
bondInvoice: data.bond_invoice,
bondSatoshis: data.bond_satoshis,
2022-01-08 17:19:30 +00:00
escrowInvoice: data.escrow_invoice,
escrowSatoshis: data.escrow_satoshis,
2022-01-09 12:14:11 +00:00
invoiceAmount: data.invoice_amount,
2022-01-14 12:00:53 +00:00
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
})
});
}
2022-01-09 01:23:13 +00:00
// These are used to refresh the data
componentDidMount() {
this.interval = setInterval(this.tick, this.state.delay);
}
componentDidUpdate() {
clearInterval(this.interval);
2022-01-09 01:23:13 +00:00
this.interval = setInterval(this.tick, this.state.delay);
}
2022-01-09 01:23:13 +00:00
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
this.getOrderDetails();
2022-01-14 12:00:53 +00:00
return null;
} else {
var col = 'black'
var fraction_left = (total/1000) / this.state.total_secs_expiry
2022-01-14 12:00:53 +00:00
// 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'}
2022-01-14 12:00:53 +00:00
// Render a countdown, bold when less than 25%
return (
fraction_left < 0.25 ? <b><span style={{color:col}}>{hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s </span></b>
:<span style={{color:col}}>{hours}h {zeroPad(minutes)}m {zeroPad(seconds)}s </span>
);
}
};
LinearDeterminate =()=> {
const [progress, setProgress] = React.useState(0);
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;
});
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
return (
<Box sx={{ width: '100%' }}>
<LinearProgress variant="determinate" value={progress} />
</Box>
);
}
handleClickTakeOrderButton=()=>{
console.log(this.state)
const requestOptions = {
method: 'POST',
2022-01-06 20:33:40 +00:00
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) => (this.setState({badRequest:data.bad_request})
& console.log(data)
& this.getOrderDetails(data.id)));
}
getCurrencyDict() {
fetch('/static/assets/currencies.json')
.then((response) => response.json())
.then((data) =>
this.setState({
currencies_dict: data
}));
}
2022-01-09 12:35:19 +00:00
// set delay to the one matching the order status. If no order status, set delay to 9999999
setDelay(val){
return val ? this.statusToDelay[val.toString()] : 99999999;
}
getCurrencyCode(val){
2022-01-09 15:28:12 +00:00
let code = val ? this.state.currencies_dict[val.toString()] : ""
return code
}
2022-01-08 15:34:09 +00:00
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(
<Grid container spacing={1}>
<Grid item xs={12} align="center">
<Typography component="h5" variant="h5">
2022-01-08 20:14:19 +00:00
{this.state.type ? "Sell " : "Buy "} Order Details
</Typography>
<Paper elevation={12} style={{ padding: 8,}}>
<List dense="true">
2022-01-05 02:03:03 +00:00
<ListItem >
<ListItemAvatar sx={{ width: 56, height: 56 }}>
<Avatar
alt={this.state.makerNick}
src={window.location.origin +'/static/assets/avatars/' + this.state.makerNick + '.png'}
/>
</ListItemAvatar>
2022-01-09 14:07:05 +00:00
<ListItemText primary={this.state.makerNick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
</ListItem>
<Divider />
2022-01-05 02:03:03 +00:00
{this.state.isParticipant ?
<>
{this.state.takerNick!='None' ?
<>
<ListItem align="left">
2022-01-09 14:07:05 +00:00
<ListItemText primary={this.state.takerNick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
2022-01-05 02:03:03 +00:00
<ListItemAvatar >
<Avatar
alt={this.state.makerNick}
src={window.location.origin +'/static/assets/avatars/' + this.state.takerNick + '.png'}
/>
</ListItemAvatar>
</ListItem>
<Divider />
</>:
""
2022-01-05 02:03:03 +00:00
}
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<ArticleIcon/>
</ListItemIcon>
<ListItemText primary={this.state.statusText} secondary="Order status"/>
</ListItem>
<Divider />
2022-01-05 02:03:03 +00:00
</>
:""
}
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<MoneyIcon/>
</ListItemIcon>
2022-01-08 15:34:09 +00:00
<ListItemText primary={parseFloat(parseFloat(this.state.amount).toFixed(4))+" "+this.state.currencyCode} secondary="Amount"/>
</ListItem>
<Divider />
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<PaymentsIcon/>
</ListItemIcon>
<ListItemText primary={this.state.paymentMethod} secondary="Accepted payment methods"/>
</ListItem>
<Divider />
2022-01-14 12:00:53 +00:00
{/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<PriceChangeIcon/>
</ListItemIcon>
{this.state.priceNow?
<ListItemText primary={pn(this.state.priceNow)+" "+this.state.currencyCode+"/BTC - Premium: "+this.state.premiumNow+"%"} secondary="Price and Premium"/>
:
(this.state.isExplicit ?
<ListItemText primary={pn(this.state.satoshis)} secondary="Amount of Satoshis"/>
:
<ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary="Premium over market price"/>
)
}
</ListItem>
<Divider />
2022-01-05 02:03:03 +00:00
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<NumbersIcon/>
</ListItemIcon>
<ListItemText primary={this.orderId} secondary="Order ID"/>
</ListItem>
2022-01-05 02:03:03 +00:00
<Divider />
<ListItem>
2022-01-14 12:00:53 +00:00
<ListItemIcon>
<AccessTimeIcon/>
</ListItemIcon>
<ListItemText secondary="Expires in">
2022-01-14 14:19:25 +00:00
<Countdown date={new Date(this.state.expiresAt)} renderer={this.countdownRenderer} />
</ListItemText>
2022-01-05 02:03:03 +00:00
</ListItem>
<this.LinearDeterminate />
</List>
2022-01-10 12:10:32 +00:00
{/* If the user has a penalty/limit */}
{this.state.penalty ?
<>
<Divider />
<Grid item xs={12} align="center">
<Alert severity="warning" sx={{maxWidth:360}}>
You cannot take an order yet! Wait {this.state.penalty} seconds
</Alert>
</Grid>
</>
: null}
2022-01-05 02:03:03 +00:00
</Paper>
</Grid>
{/* Participants cannot see the Back or Take Order buttons */}
{this.state.isParticipant ? "" :
<>
<Grid item xs={12} align="center">
<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
</Grid>
<Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
</Grid>
</>
}
2022-01-08 15:34:09 +00:00
{/* Makers can cancel before trade escrow deposited (status <9)*/}
{/* Only free cancel before bond locked (status 0)*/}
{this.state.isMaker & this.state.statusCode < 9 ?
2022-01-08 15:34:09 +00:00
<Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.handleClickCancelOrderButton}>Cancel</Button>
</Grid>
:""}
{this.state.isMaker & this.state.statusCode > 0 & this.state.statusCode < 9 ?
<Grid item xs={12} align="center">
<Typography color="secondary" variant="subtitle2" component="subtitle2">Cancelling now forfeits the maker bond</Typography>
</Grid>
:""}
2022-01-08 15:34:09 +00:00
{/* Takers can cancel before commiting the bond (status 3)*/}
{this.state.isTaker & this.state.statusCode == 3 ?
<Grid item xs={12} align="center">
<Button variant='contained' color='secondary' onClick={this.handleClickCancelOrderButton}>Cancel</Button>
</Grid>
:""}
</Grid>
)
}
2022-01-09 20:05:19 +00:00
orderDetailsPage (){
return(
this.state.badRequest ?
<div align='center'>
<Typography component="subtitle2" variant="subtitle2" color="secondary" >
{this.state.badRequest}<br/>
</Typography>
<Button variant='contained' color='secondary' onClick={this.handleClickBackButton}>Back</Button>
</div>
:
(this.state.isParticipant ?
<Grid container xs={12} align="center" spacing={2}>
<Grid item xs={6} align="left">
{this.orderBox()}
</Grid>
<Grid item xs={6} align="left">
<TradeBox data={this.state}/>
</Grid>
</Grid>
:
<Grid item xs={12} align="center">
{this.orderBox()}
</Grid>)
2022-01-09 20:05:19 +00:00
)
}
render (){
return (
// Only so nothing shows while requesting the first batch of data
2022-01-14 14:19:25 +00:00
this.state.loading ? <CircularProgress /> : this.orderDetailsPage()
);
}
}