robosats/frontend/src/components/MakerPage.js

289 lines
11 KiB
JavaScript
Raw Normal View History

2022-01-02 00:37:04 +00:00
import React, { Component } from 'react';
import { Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
import { Link } from 'react-router-dom'
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');
2022-01-02 00:37:04 +00:00
export default class MakerPage extends Component {
defaultCurrency = 1;
defaultCurrencyCode = 'USD';
defaultAmount = 0 ;
2022-01-02 09:40:19 +00:00
defaultPaymentMethod = "Not specified";
2022-01-02 00:37:04 +00:00
defaultPremium = 0;
constructor(props) {
super(props);
this.state={
isExplicit: false,
type: 0,
currency: this.defaultCurrency,
currencyCode: this.defaultCurrencyCode,
amount: this.defaultAmount,
2022-01-02 09:40:19 +00:00
payment_method: this.defaultPaymentMethod,
2022-01-02 00:37:04 +00:00
premium: 0,
satoshis: null,
}
}
handleTypeChange=(e)=>{
this.setState({
type: e.target.value,
});
}
handleCurrencyChange=(e)=>{
var code = (e.target.value == 1 ) ? "USD": ((e.target.value == 2 ) ? "EUR":"ETH")
this.setState({
currency: e.target.value,
currencyCode: code,
});
}
handleAmountChange=(e)=>{
this.setState({
amount: e.target.value,
});
}
2022-01-02 09:40:19 +00:00
handlePaymentMethodChange=(e)=>{
this.setState({
payment_method: e.target.value,
});
}
2022-01-02 00:37:04 +00:00
handlePremiumChange=(e)=>{
this.setState({
premium: e.target.value,
});
}
handleSatoshisChange=(e)=>{
this.setState({
satoshis: e.target.value,
});
}
2022-01-02 00:37:04 +00:00
handleClickRelative=(e)=>{
this.setState({
isExplicit: false,
satoshis: null,
premium: 0,
});
}
handleClickExplicit=(e)=>{
this.setState({
isExplicit: true,
satoshis: 10000,
premium: null,
});
}
handleCreateOfferButtonPressed=()=>{
console.log(this.state)
const requestOptions = {
method: 'POST',
headers: {'Content-Type':'application/json', 'X-CSRFToken': csrftoken},
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,
2022-01-02 00:37:04 +00:00
premium: this.state.premium,
satoshis: this.state.satoshis,
}),
};
fetch("/api/make/",requestOptions)
.then((response) => response.json())
.then((data) => console.log(data));
}
render() {
return (
<Grid container spacing={1}>
<Grid item xs={12} align="center">
<Typography component="h4" variant="h4">
Make an Order
</Typography>
</Grid>
<Grid item xs={12} align="center">
<FormControl component="fieldset">
<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>
<FormHelperText>
<div align='center'>
2022-01-02 09:40:19 +00:00
Choose Buy or Sell Bitcoin
2022-01-02 00:37:04 +00:00
</div>
</FormHelperText>
2022-01-02 09:40:19 +00:00
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl >
2022-01-02 00:37:04 +00:00
<Select
require={true}
defaultValue={this.defaultCurrency}
inputProps={{
style: {textAlign:"center"}
}}
onChange={this.handleCurrencyChange}
>
<MenuItem value={1}>USD</MenuItem>
<MenuItem value={2}>EUR</MenuItem>
<MenuItem value={3}>ETH</MenuItem>
</Select>
<FormHelperText>
<div align='center'>
2022-01-02 09:40:19 +00:00
Select Payment Currency
2022-01-02 00:37:04 +00:00
</div>
</FormHelperText>
2022-01-02 09:40:19 +00:00
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl >
2022-01-02 00:37:04 +00:00
<TextField
type="number"
require={true}
defaultValue={this.defaultAmount}
inputProps={{
min:0 ,
style: {textAlign:"center"}
}}
onChange={this.handleAmountChange}
/>
</FormControl>
2022-01-02 09:40:19 +00:00
<FormHelperText>
<div align='center'>
Amount of Fiat to Trade
</div>
</FormHelperText>
</Grid>
<Grid item xs={12} align="center">
<FormControl >
<TextField
type="text"
require={true}
inputProps={{
style: {textAlign:"center"}
}}
onChange={this.handlePaymentMethodChange}
/>
<FormHelperText>
<div align='center'>
Enter the Payment Method(s)
</div>
</FormHelperText>
</FormControl>
2022-01-02 00:37:04 +00:00
</Grid>
<Grid item xs={12} align="center">
<FormControl component="fieldset">
<RadioGroup row defaultValue="relative">
<FormControlLabel
value="relative"
control={<Radio color="primary"/>}
label="Relative"
labelPlacement="Top"
onClick={this.handleClickRelative}
/>
<FormControlLabel
value="explicit"
control={<Radio color="secondary"/>}
label="Explicit"
labelPlacement="Top"
onClick={this.handleClickExplicit}
onShow="false"
/>
</RadioGroup>
2022-01-02 09:40:19 +00:00
<FormHelperText >
<div align='center'>
Choose a Pricing Method
</div>
</FormHelperText>
2022-01-02 00:37:04 +00:00
</FormControl>
</Grid>
{/* conditional shows either Premium % field or Satoshis field based on pricing method */}
{ this.state.isExplicit
? <Grid item xs={12} align="center">
<FormControl >
<TextField
type="number"
require={true}
inputProps={{
2022-01-02 09:40:19 +00:00
// TODO read these from .env file
2022-01-02 00:37:04 +00:00
min:10000 ,
2022-01-02 09:40:19 +00:00
max:500000 ,
2022-01-02 00:37:04 +00:00
style: {textAlign:"center"}
}}
onChange={this.handleSatoshisChange}
defaultValue={this.defaultSatoshis}
/>
<FormHelperText>
<div align='center'>
2022-01-02 09:40:19 +00:00
Explicit Amount in Satoshis
2022-01-02 00:37:04 +00:00
</div>
</FormHelperText>
2022-01-02 09:40:19 +00:00
</FormControl>
</Grid>
: <Grid item xs={12} align="center">
<FormControl >
2022-01-02 00:37:04 +00:00
<TextField
type="number"
require={true}
defaultValue={this.defaultPremium}
inputProps={{
style: {textAlign:"center"}
}}
onChange={this.handlePremiumChange}
/>
2022-01-02 09:40:19 +00:00
<FormHelperText>
<div align='center'>
Premium Relative to Market Price (%)
</div>
</FormHelperText>
2022-01-02 00:37:04 +00:00
</FormControl>
</Grid>
}
<Grid item xs={12} align="center">
2022-01-02 09:40:19 +00:00
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>
Create Order
</Button>
2022-01-02 00:37:04 +00:00
<Typography component="subtitle2" variant="subtitle2">
<div align='center'>
Create a BTC {this.state.type==0 ? "buy":"sell"} order for {this.state.amount} {this.state.currencyCode}
{this.state.isExplicit ? " of " + this.state.satoshis + " Satoshis" :
(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>
</Grid>
<Grid item xs={12} align="center">
<Button color="secondary" variant="contained" to="/" component={Link}>
Back
</Button>
</Grid>
</Grid>
);
}
}