)
}
};
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 (
);
}
takeOrder=()=>{
this.setState({loading:true})
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
body: JSON.stringify({
'action':'take',
'amount':this.state.takeAmount,
}),
};
fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
.then((response) => response.json())
.then((data) => this.completeSetState(data));
}
// set delay to the one matching the order status. If null order status, delay goes to 9999999.
setDelay = (status)=>{
return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
}
getCurrencyCode(val){
let code = val ? currencyDict[val.toString()] : ""
return code
}
handleClickConfirmCancelButton=()=>{
this.setState({loading:true})
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
body: JSON.stringify({
'action':'cancel',
}),
};
fetch('/api/order/' + '?order_id=' + this.state.orderId, requestOptions)
.then((response) => response.json())
.then(() => (this.getOrderDetails(this.state.orderId) & this.setState({status:4})));
this.handleClickCloseConfirmCancelDialog();
}
handleClickOpenConfirmCancelDialog = () => {
this.setState({openCancel: true});
};
handleClickCloseConfirmCancelDialog = () => {
this.setState({openCancel: false});
};
CancelDialog =() =>{
const { t } = this.props;
return(
)
}
handleClickOpenInactiveMakerDialog = () => {
this.setState({openInactiveMaker: true});
};
handleClickCloseInactiveMakerDialog = () => {
this.setState({openInactiveMaker: false});
};
InactiveMakerDialog =() =>{
const { t } = this.props;
return(
)
}
handleClickConfirmCollaborativeCancelButton=()=>{
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
body: JSON.stringify({
'action':'cancel',
}),
};
fetch('/api/order/' + '?order_id=' + this.state.state.orderId, requestOptions)
.then((response) => response.json())
.then(() => (this.getOrderDetails(this.state.orderId) & this.setState({status:4})));
this.handleClickCloseCollaborativeCancelDialog();
}
handleClickOpenCollaborativeCancelDialog = () => {
this.setState({openCollaborativeCancel: true});
};
handleClickCloseCollaborativeCancelDialog = () => {
this.setState({openCollaborativeCancel: false});
};
CollaborativeCancelDialog =() =>{
const { t } = this.props;
return(
)
}
BackButton = () => {
const { t } = this.props;
// If order has expired, show back button.
if (this.state.status == 5){
return(
)}
return(null)
}
CancelButton = () => {
const { t } = this.props;
// 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.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){
return(
)}
// If the order does not yet have an escrow deposited. Show dialog
// to confirm forfeiting the bond
if ([3,6,7].includes(this.state.status)){
return(
)}
// If the escrow is Locked, show the collaborative cancel button.
if ([8,9].includes(this.state.status)){
return(
)}
// If none of the above do not return a cancel button.
return(null)
}
// Colors for the status badges
statusBadgeColor(status){
if(status=='Active'){return("success")}
if(status=='Seen recently'){return("warning")}
if(status=='Inactive'){return('error')}
}
orderBox=()=>{
const { t } = this.props;
return(
{t("Order Box")}
{!this.state.type ? : }}>
{this.state.is_participant ?
<>
{this.state.taker_nick!='None' ?
<>
{this.state.type ? : }}>
:
""
}
:
}
{getFlags(this.state.currencyCode)}
{this.state.has_range & this.state.amount == null ?
:
}
} secondary={this.state.currency==1000 ? t("Swap destination"):t("Accepted payment methods")}/>
{/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
{this.state.price_now?
:
(this.state.is_explicit ?
:
)
}
{/* If the user has a penalty/limit */}
{this.state.penalty ?
<>
: null}
{/* If the counterparty asked for collaborative cancel */}
{this.state.pending_cancel ?
<>
{t("{{nickname}} is asking for a collaborative cancel", {nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick})}
: null}
{/* If the user has asked for a collaborative cancel */}
{this.state.asked_for_cancel ?
<>
{t("You asked for a collaborative cancellation")}
: null}
{/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
{this.state.is_participant ?
<>
:
}
)
}
doubleOrderPageDesktop=()=>{
return(
{this.orderBox()}
)
}
a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
doubleOrderPagePhone=()=>{
const { t } = this.props;
const [value, setValue] = React.useState(this.state.showContractBox);
const handleChange = (event, newValue) => {
this.setState({showContractBox:newValue})
setValue(newValue);
};
return(