Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-07-26 21:03:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revamp maker page

Browse Source
This commit is contained in:
Reckless_Satoshi
2022-01-31 16:45:58 -08:00
parent bd8d2d8512
commit fd0b0faac6
2 changed files with 68 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/components/MakerPage.js
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material" import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, dividerClasses} from "@mui/material"
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import getFlags from './getFlags' import getFlags from './getFlags'
@ -22,6 +22,9 @@ const csrftoken = getCookie('csrftoken');
// pretty numbers // pretty numbers
function pn(x) { function pn(x) {
if(x==null){
return(null)
}
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} }
@ -67,24 +70,35 @@ export default class MakerPage extends Component {
handlePaymentMethodChange=(e)=>{ handlePaymentMethodChange=(e)=>{
this.setState({ this.setState({
payment_method: e.target.value, payment_method: e.target.value,
badPaymentMethod: e.target.value.length > 35,
}); });
} }
handlePremiumChange=(e)=>{ handlePremiumChange=(e)=>{
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%"
}
this.setState({ this.setState({
premium: e.target.value, premium: e.target.value,
badPremium: bad_premium,
}); });
} }
handleSatoshisChange=(e)=>{ handleSatoshisChange=(e)=>{
var bad_sats = e.target.value > this.maxTradeSats ? if(e.target.value > this.maxTradeSats){
("Must be less than "+pn(this.maxTradeSats)): var bad_sats = "Must be less than " + pn(this.maxTradeSats)
(e.target.value < this.minTradeSats ? }
("Must be more than "+pn(this.minTradeSats)): null) if(e.target.value < this.minTradeSats){
var bad_sats = "Must be more than "+pn(this.minTradeSats)
}
this.setState({ this.setState({
satoshis: e.target.value, satoshis: e.target.value,
badSatoshis: bad_sats, badSatoshis: bad_sats,
}) });
;
} }
handleClickRelative=(e)=>{ handleClickRelative=(e)=>{
this.setState({ this.setState({
@ -112,8 +126,8 @@ export default class MakerPage extends Component {
amount: this.state.amount, amount: this.state.amount,
payment_method: this.state.payment_method, payment_method: this.state.payment_method,
is_explicit: this.state.is_explicit, is_explicit: this.state.is_explicit,
premium: this.state.premium, premium: this.state.is_explicit ? null: this.state.premium,
satoshis: this.state.satoshis, satoshis: this.state.is_explicit ? this.state.satoshis: null,
}), }),
}; };
fetch("/api/make/",requestOptions) fetch("/api/make/",requestOptions)
@ -136,16 +150,17 @@ export default class MakerPage extends Component {
return this.state.currencies_dict[val.toString()] return this.state.currencies_dict[val.toString()]
} }
render() { render() {
return ( return (
<Grid container xs={12} align="center" spacing={1}> <Grid container xs={12} align="center" spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center" sx={{minWidth:380}}>
<Typography component="h2" variant="h2"> <Typography component="h2" variant="h2">
Order Maker Order Maker
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<Paper elevation={12} style={{ padding: 8, width:350, align:'center'}}> <Paper elevation={12} style={{ padding: 8, width:240, align:'center'}}>
<Grid item xs={12} align="center" spacing={1}> <Grid item xs={12} align="center" spacing={1}>
<FormControl component="fieldset"> <FormControl component="fieldset">
<FormHelperText> <FormHelperText>
@ -167,10 +182,11 @@ export default class MakerPage extends Component {
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
<Grid containter xs={8} alignItems="stretch" style={{ display: "flex" }}> <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:140}}>
<TextField <TextField
error={this.state.amount == 0} error={this.state.amount <= 0}
helperText={this.state.amount == 0 ? 'Must be more than 0' : null} helperText={this.state.amount <= 0 ? 'Invalid' : null}
label="Amount" label="Amount"
type="number" type="number"
required="true" required="true"
@ -179,29 +195,31 @@ export default class MakerPage extends Component {
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleAmountChange} onChange={this.handleAmountChange}
/> /></div>
<Select <div >
required="true" <Select
defaultValue={this.defaultCurrency} required="true"
inputProps={{ defaultValue={this.defaultCurrency}
style: {textAlign:"center"} inputProps={{
}} style: {textAlign:"center"}
onChange={this.handleCurrencyChange} }}
> onChange={this.handleCurrencyChange}>
{ {Object.entries(this.state.currencies_dict)
Object.entries(this.state.currencies_dict) .map( ([key, value]) => <MenuItem value={parseInt(key)}>
.map( ([key, value]) => <MenuItem value={parseInt(key)}> {getFlags(value) + " " + value}
{getFlags(value) + " " + value} </MenuItem> )}
</MenuItem> ) </Select>
} </div>
</Select>
</Grid> </Grid>
<br/> <br/>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<FormControl > <FormControl >
<TextField <TextField
sx={{width:240}}
label="Payment Method(s)" label="Payment Method(s)"
error={this.state.badPaymentMethod}
helperText={this.state.badPaymentMethod ? "Must be shorter than 35 characters":""}
type="text" type="text"
require={true} require={true}
inputProps={{ inputProps={{
@ -242,6 +260,7 @@ export default class MakerPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<div style={{display: this.state.is_explicit ? '':'none'}}> <div style={{display: this.state.is_explicit ? '':'none'}}>
<TextField <TextField
sx={{width:240}}
label="Satoshis" label="Satoshis"
error={this.state.badSatoshis} error={this.state.badSatoshis}
helperText={this.state.badSatoshis} helperText={this.state.badSatoshis}
@ -260,10 +279,15 @@ export default class MakerPage extends Component {
</div> </div>
<div style={{display: this.state.is_explicit ? 'none':''}}> <div style={{display: this.state.is_explicit ? 'none':''}}>
<TextField <TextField
sx={{width:240}}
error={this.state.badPremium}
helperText={this.state.badPremium}
label="Premium over Market (%)" label="Premium over Market (%)"
type="number" type="number"
// defaultValue={this.defaultPremium} // defaultValue={this.defaultPremium}
inputProps={{ inputProps={{
min: -100,
max: 999,
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handlePremiumChange} onChange={this.handlePremiumChange}
@ -273,7 +297,14 @@ export default class MakerPage extends Component {
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} > <Button disabled={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)
}
color="primary"
variant="contained"
onClick={this.handleCreateOfferButtonPressed} >
Create Order Create Order
</Button> </Button>
</Grid> </Grid>
@ -285,8 +316,8 @@ export default class MakerPage extends Component {
: ""} : ""}
<Typography component="subtitle2" variant="subtitle2"> <Typography component="subtitle2" variant="subtitle2">
<div align='center'> <div align='center'>
Create a BTC {this.state.type==0 ? "buy":"sell"} order for {this.state.amount} {this.state.currencyCode} Create a BTC {this.state.type==0 ? "buy":"sell"} order for {pn(this.state.amount)} {this.state.currencyCode}
{this.state.is_explicit ? " of " + this.state.satoshis + " Satoshis" : {this.state.is_explicit ? " of " + pn(this.state.satoshis) + " Satoshis" :
(this.state.premium == 0 ? " at market price" : (this.state.premium == 0 ? " at market price" :
(this.state.premium > 0 ? " at a " + this.state.premium + "% premium":" at a " + -this.state.premium + "% discount") (this.state.premium > 0 ? " at a " + this.state.premium + "% premium":" at a " + -this.state.premium + "% discount")
) )

2
frontend/src/components/TradeBox.js
View File

@ -677,7 +677,7 @@ handleRatingChange=(e)=>{
<Rating name="size-large" defaultValue={2} size="large" onChange={this.handleRatingChange} /> <Rating name="size-large" defaultValue={2} size="large" onChange={this.handleRatingChange} />
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button color='primary' onClick={this.props.push('/')}>Start Again</Button> <Button color='primary' onClick={() => {this.props.push('/')}}>Start Again</Button>
</Grid> </Grid>
</Grid> </Grid>
) )