robosats/frontend/src/components/MakerPage.js

348 lines
15 KiB
JavaScript
Raw Normal View History

2022-01-02 00:37:04 +00:00
import React, { Component } from 'react';
import { Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
2022-01-02 00:37:04 +00:00
import { Link } from 'react-router-dom'
import getFlags from './getFlags'
2022-01-02 00:37:04 +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;
}
}
}
2022-01-02 00:37:04 +00:00
return cookieValue;
}
const csrftoken = getCookie('csrftoken');
// pretty numbers
function pn(x) {
2022-02-01 00:45:58 +00:00
if(x==null){
return(null)
}
var parts = x.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
2022-01-02 00:37:04 +00:00
export default class MakerPage extends Component {
defaultCurrency = 1;
defaultCurrencyCode = 'USD';
2022-01-10 01:12:58 +00:00
defaultPaymentMethod = "not specified";
2022-01-02 00:37:04 +00:00
defaultPremium = 0;
2022-01-10 01:12:58 +00:00
minTradeSats = 10000;
maxTradeSats = 500000;
2022-01-02 00:37:04 +00:00
constructor(props) {
super(props);
this.state={
is_explicit: false,
2022-01-02 00:37:04 +00:00
type: 0,
currency: this.defaultCurrency,
currencyCode: this.defaultCurrencyCode,
2022-01-02 09:40:19 +00:00
payment_method: this.defaultPaymentMethod,
2022-01-02 00:37:04 +00:00
premium: 0,
satoshis: null,
2022-01-08 11:51:55 +00:00
currencies_dict: {"1":"USD"}
2022-01-02 00:37:04 +00:00
}
2022-01-08 11:51:55 +00:00
this.getCurrencyDict()
2022-01-02 00:37:04 +00:00
}
handleTypeChange=(e)=>{
this.setState({
type: e.target.value,
});
}
handleCurrencyChange=(e)=>{
this.setState({
currency: e.target.value,
2022-01-08 11:51:55 +00:00
currencyCode: this.getCurrencyCode(e.target.value),
2022-01-02 00:37:04 +00:00
});
}
handleAmountChange=(e)=>{
this.setState({
amount: e.target.value,
});
}
2022-01-02 09:40:19 +00:00
handlePaymentMethodChange=(e)=>{
this.setState({
2022-02-01 00:45:58 +00:00
payment_method: e.target.value,
badPaymentMethod: e.target.value.length > 35,
2022-01-02 09:40:19 +00:00
});
}
2022-01-02 00:37:04 +00:00
handlePremiumChange=(e)=>{
2022-02-01 00:45:58 +00:00
if(e.target.value > 999){
var bad_premium = "Must be less than 999%"
}
if(e.target.value < -100){
var bad_premium = "Must be more than -100%"
}
2022-01-02 00:37:04 +00:00
this.setState({
2022-02-01 00:45:58 +00:00
premium: e.target.value,
badPremium: bad_premium,
2022-01-02 00:37:04 +00:00
});
}
2022-02-01 00:45:58 +00:00
2022-01-02 00:37:04 +00:00
handleSatoshisChange=(e)=>{
2022-02-01 00:45:58 +00:00
if(e.target.value > this.maxTradeSats){
var bad_sats = "Must be less than " + pn(this.maxTradeSats)
}
if(e.target.value < this.minTradeSats){
var bad_sats = "Must be more than "+pn(this.minTradeSats)
}
2022-01-10 01:12:58 +00:00
2022-01-02 00:37:04 +00:00
this.setState({
2022-01-10 01:12:58 +00:00
satoshis: e.target.value,
badSatoshis: bad_sats,
2022-02-01 00:45:58 +00:00
});
}
2022-01-02 00:37:04 +00:00
handleClickRelative=(e)=>{
this.setState({
is_explicit: false,
2022-01-02 00:37:04 +00:00
});
this.handlePremiumChange();
2022-01-02 00:37:04 +00:00
}
handleClickExplicit=(e)=>{
2022-01-02 00:37:04 +00:00
this.setState({
is_explicit: true,
2022-01-02 00:37:04 +00:00
});
this.handleSatoshisChange();
2022-01-02 00:37:04 +00:00
}
handleCreateOfferButtonPressed=()=>{
this.state.amount == null ? this.setState({amount: 0}) : null;
2022-01-02 00:37:04 +00:00
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken')},
2022-01-02 00:37:04 +00:00
body: JSON.stringify({
type: this.state.type,
currency: this.state.currency,
amount: this.state.amount,
2022-01-02 09:40:19 +00:00
payment_method: this.state.payment_method,
is_explicit: this.state.is_explicit,
2022-02-01 00:45:58 +00:00
premium: this.state.is_explicit ? null: this.state.premium,
satoshis: this.state.is_explicit ? this.state.satoshis: null,
2022-01-02 00:37:04 +00:00
}),
};
fetch("/api/make/",requestOptions)
.then((response) => response.json())
.then((data) => (this.setState({badRequest:data.bad_request})
& (data.id ? this.props.history.push('/order/' + data.id) :"")));
2022-01-02 00:37:04 +00:00
}
2022-01-08 11:51:55 +00:00
getCurrencyDict() {
fetch('/static/assets/currencies.json')
2022-01-08 11:51:55 +00:00
.then((response) => response.json())
.then((data) =>
this.setState({
currencies_dict: data
}));
}
getCurrencyCode(val){
return this.state.currencies_dict[val.toString()]
2022-01-02 00:37:04 +00:00
}
2022-02-01 00:45:58 +00:00
2022-01-02 00:37:04 +00:00
render() {
return (
<Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
{/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
<Typography component="h4" variant="h4">
ORDER MAKER
</Typography>
</Grid> */}
2022-01-10 01:12:58 +00:00
<Grid item xs={12} align="center" spacing={1}>
2022-02-01 00:45:58 +00:00
<Paper elevation={12} style={{ padding: 8, width:240, align:'center'}}>
2022-01-10 01:12:58 +00:00
<Grid item xs={12} align="center" spacing={1}>
<FormControl component="fieldset">
2022-01-10 01:12:58 +00:00
<FormHelperText>
Buy or Sell Bitcoin?
</FormHelperText>
<RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
<FormControlLabel
value="0"
control={<Radio color="primary"/>}
label="Buy"
labelPlacement="Top"
/>
<FormControlLabel
value="1"
control={<Radio color="secondary"/>}
label="Sell"
labelPlacement="Top"
/>
</RadioGroup>
</FormControl>
</Grid>
2022-02-01 00:45:58 +00:00
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:140}}>
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin">
2022-01-10 10:27:34 +00:00
<TextField
2022-02-01 00:45:58 +00:00
error={this.state.amount <= 0}
helperText={this.state.amount <= 0 ? 'Invalid' : null}
2022-01-10 01:12:58 +00:00
label="Amount"
type="number"
required="true"
inputProps={{
min:0 ,
style: {textAlign:"center"}
}}
onChange={this.handleAmountChange}
/>
</Tooltip>
</div>
2022-02-01 00:45:58 +00:00
<div >
<Select
required="true"
defaultValue={this.defaultCurrency}
inputProps={{
style: {textAlign:"center"}
}}
onChange={this.handleCurrencyChange}>
{Object.entries(this.state.currencies_dict)
.map( ([key, value]) => <MenuItem value={parseInt(key)}>
2022-02-19 18:44:02 +00:00
<div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
2022-02-01 00:45:58 +00:00
</MenuItem> )}
</Select>
</div>
2022-01-10 01:12:58 +00:00
</Grid>
<br/>
<Grid item xs={12} align="center">
<Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Enter your prefered payment methods">
<TextField
2022-02-01 00:45:58 +00:00
sx={{width:240}}
label={this.state.currency==1000 ? "Swap Destination (e.g. rBTC)":"Instant Payment Method(s)"}
2022-02-01 00:45:58 +00:00
error={this.state.badPaymentMethod}
helperText={this.state.badPaymentMethod ? "Must be shorter than 35 characters":""}
type="text"
require={true}
inputProps={{
style: {textAlign:"center"},
2022-01-08 00:29:04 +00:00
maxLength: 35
}}
onChange={this.handlePaymentMethodChange}
/>
</Tooltip>
</Grid>
2022-01-10 01:12:58 +00:00
<Grid item xs={12} align="center">
<FormControl component="fieldset">
2022-01-10 01:12:58 +00:00
<FormHelperText >
<div align='center'>
Choose a Pricing Method
</div>
</FormHelperText>
<RadioGroup row defaultValue="relative">
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title="Let the price move with the market">
<FormControlLabel
value="relative"
control={<Radio color="primary"/>}
label="Relative"
labelPlacement="Top"
onClick={this.handleClickRelative}
/>
</Tooltip>
<Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title="Set a fix amount of satoshis">
<FormControlLabel
value="explicit"
control={<Radio color="secondary"/>}
label="Explicit"
labelPlacement="Top"
onClick={this.handleClickExplicit}
/>
</Tooltip>
</RadioGroup>
</FormControl>
</Grid>
{/* conditional shows either Premium % field or Satoshis field based on pricing method */}
<Grid item xs={12} align="center">
<div style={{display: this.state.is_explicit ? '':'none'}}>
2022-02-01 00:45:58 +00:00
<TextField
sx={{width:240}}
label="Satoshis"
error={this.state.badSatoshis}
helperText={this.state.badSatoshis}
type="number"
required="true"
value={this.state.satoshis}
inputProps={{
// TODO read these from .env file
min:this.minTradeSats ,
max:this.maxTradeSats ,
style: {textAlign:"center"}
}}
onChange={this.handleSatoshisChange}
// defaultValue={this.defaultSatoshis}
/>
</div>
<div style={{display: this.state.is_explicit ? 'none':''}}>
<TextField
2022-02-01 00:45:58 +00:00
sx={{width:240}}
error={this.state.badPremium}
helperText={this.state.badPremium}
label="Premium over Market (%)"
type="number"
// defaultValue={this.defaultPremium}
inputProps={{
2022-02-01 00:45:58 +00:00
min: -100,
max: 999,
style: {textAlign:"center"}
}}
onChange={this.handlePremiumChange}
/>
</div>
</Grid>
</Paper>
2022-01-10 01:12:58 +00:00
</Grid>
2022-01-02 00:37:04 +00:00
<Grid item xs={12} align="center">
{/* conditions to disable the make button */}
{(this.state.amount == null ||
this.state.amount <= 0 ||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
(!this.state.is_explicit & this.state.badPremium != null))
?
<Tooltip enterTouchDelay="0" title="You must fill the form correctly">
<div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div>
</Tooltip>
:
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button>
}
</Grid>
<Grid item xs={12} align="center">
{this.state.badRequest ?
<Typography component="subtitle2" variant="subtitle2" color="secondary">
{this.state.badRequest} <br/>
</Typography>
: ""}
2022-01-02 00:37:04 +00:00
<Typography component="subtitle2" variant="subtitle2">
<div align='center'>
2022-02-01 00:45:58 +00:00
Create a BTC {this.state.type==0 ? "buy":"sell"} order for {pn(this.state.amount)} {this.state.currencyCode}
{this.state.is_explicit ? " of " + pn(this.state.satoshis) + " Satoshis" :
2022-01-02 00:37:04 +00:00
(this.state.premium == 0 ? " at market price" :
(this.state.premium > 0 ? " at a " + this.state.premium + "% premium":" at a " + -this.state.premium + "% discount")
)
}
</div>
</Typography>
2022-01-03 23:05:19 +00:00
<Grid item xs={12} align="center">
<Button color="secondary" variant="contained" to="/" component={Link}>
Back
</Button>
</Grid>
2022-01-02 00:37:04 +00:00
</Grid>
</Grid>
);
}
}