mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-26 05:43:34 +03:00
Rework components. Initialize book component.
This commit is contained in:
Reckless_Satoshi
parent
e06be9b22f
commit
7701f01936
@ -3,9 +3,25 @@ import React, { Component } from "react";
|
||||
export default class BookPage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
orders: null,
|
||||
};
|
||||
this.currency = 2;
|
||||
this.type = 1;
|
||||
this.getOrderDetails()
|
||||
}
|
||||
getOrderDetails() {
|
||||
fetch('/api/book' + '?currency=' + this.currency + "&type=" + this.type)
|
||||
.then((response) => response.json())
|
||||
.then((data) => console.log(data));
|
||||
// this.setState({orders: data}));
|
||||
}
|
||||
|
||||
render() {
|
||||
return <p>This is the order book page</p>;
|
||||
return (
|
||||
<div className="col">
|
||||
<h1>Book</h1>
|
||||
{/* {this.state.orders.map(order => <div>{order.maker_nick}</div>)} */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
|
||||
import { Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
function getCookie(name) {
|
||||
@ -111,130 +111,134 @@ export default class MakerPage extends Component {
|
||||
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>
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="h4" variant="h4">
|
||||
Make an Order
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Paper elevation={12} style={{ padding: 8,}}>
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl component="fieldset">
|
||||
<FormHelperText>
|
||||
<div align='center'>
|
||||
Choose Buy or Sell Bitcoin
|
||||
</div>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl >
|
||||
<TextField
|
||||
label="Amount of Fiat to Trade"
|
||||
type="number"
|
||||
required="true"
|
||||
defaultValue={this.defaultAmount}
|
||||
inputProps={{
|
||||
min:0 ,
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handleAmountChange}
|
||||
/>
|
||||
<Select
|
||||
label="Select Payment Currency"
|
||||
required="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>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl >
|
||||
<TextField
|
||||
label="Payment Method(s)"
|
||||
type="text"
|
||||
require={true}
|
||||
inputProps={{
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handlePaymentMethodChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</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.handleClickisExplicit}
|
||||
onShow="false"
|
||||
/>
|
||||
</RadioGroup>
|
||||
<FormHelperText >
|
||||
<div align='center'>
|
||||
Choose a Pricing Method
|
||||
</div>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
{/* conditional shows either Premium % field or Satoshis field based on pricing method */}
|
||||
{ this.state.isExplicit
|
||||
? <Grid item xs={12} align="center">
|
||||
<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>
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl >
|
||||
<TextField
|
||||
label="Explicit Amount in Satoshis"
|
||||
type="number"
|
||||
required="true"
|
||||
inputProps={{
|
||||
// TODO read these from .env file
|
||||
min:10000 ,
|
||||
max:500000 ,
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handleSatoshisChange}
|
||||
// defaultValue={this.defaultSatoshis}
|
||||
label="Amount of Fiat to Trade"
|
||||
type="number"
|
||||
required="true"
|
||||
defaultValue={this.defaultAmount}
|
||||
inputProps={{
|
||||
min:0 ,
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handleAmountChange}
|
||||
/>
|
||||
<Select
|
||||
label="Select Payment Currency"
|
||||
required="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>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} align="center">
|
||||
<FormControl >
|
||||
<TextField
|
||||
label="Payment Method(s)"
|
||||
type="text"
|
||||
require={true}
|
||||
inputProps={{
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handlePaymentMethodChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</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}
|
||||
/>
|
||||
</Grid>
|
||||
: <Grid item xs={12} align="center">
|
||||
<FormControlLabel
|
||||
value="explicit"
|
||||
control={<Radio color="secondary"/>}
|
||||
label="Explicit"
|
||||
labelPlacement="Top"
|
||||
onClick={this.handleClickisExplicit}
|
||||
onShow="false"
|
||||
/>
|
||||
</RadioGroup>
|
||||
<FormHelperText >
|
||||
<div align='center'>
|
||||
Choose a Pricing Method
|
||||
</div>
|
||||
</FormHelperText>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
{/* conditional shows either Premium % field or Satoshis field based on pricing method */}
|
||||
{ this.state.isExplicit
|
||||
? <Grid item xs={12} align="center">
|
||||
<TextField
|
||||
label="Premium over Market (%)"
|
||||
type="number"
|
||||
// defaultValue={this.defaultPremium}
|
||||
inputProps={{
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handlePremiumChange}
|
||||
/>
|
||||
</Grid>
|
||||
}
|
||||
label="Explicit Amount in Satoshis"
|
||||
type="number"
|
||||
required="true"
|
||||
inputProps={{
|
||||
// TODO read these from .env file
|
||||
min:10000 ,
|
||||
max:500000 ,
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handleSatoshisChange}
|
||||
// defaultValue={this.defaultSatoshis}
|
||||
/>
|
||||
</Grid>
|
||||
: <Grid item xs={12} align="center">
|
||||
<TextField
|
||||
label="Premium over Market (%)"
|
||||
type="number"
|
||||
// defaultValue={this.defaultPremium}
|
||||
inputProps={{
|
||||
style: {textAlign:"center"}
|
||||
}}
|
||||
onChange={this.handlePremiumChange}
|
||||
/>
|
||||
</Grid>
|
||||
}
|
||||
</Paper>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>
|
||||
Create Order
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { Component } from "react";
|
||||
import { Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
|
||||
import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider} from "@material-ui/core"
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
// pretty numbers
|
||||
@ -46,8 +46,9 @@ export default class OrderPage extends Component {
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} align="center">
|
||||
<Typography component="h5" variant="h5">
|
||||
Robosat BTC {this.state.type ? " Sell " : " Buy "} Order
|
||||
BTC {this.state.type ? " Sell " : " Buy "} Order
|
||||
</Typography>
|
||||
<Paper elevation={12} style={{ padding: 8,}}>
|
||||
<List component="nav" aria-label="mailbox folders">
|
||||
<ListItem>
|
||||
<ListItemAvatar sx={{ width: 56, height: 56 }}>
|
||||
@ -97,6 +98,7 @@ export default class OrderPage extends Component {
|
||||
<Grid item xs={12} align="center">
|
||||
{this.state.isParticipant ? "" : <Button variant='contained' color='primary' to='/home' component={Link}>Take Order</Button>}
|
||||
</Grid>
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
@ -131,9 +131,9 @@ export default class UserGenPage extends Component {
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
<ButtonGroup variant="contained" aria-label="outlined primary button group">
|
||||
<Button color='primary' to='/home' component={Link}>Buy BTC</Button>
|
||||
<Button color='primary' to='/make' component={Link}>Make Order</Button>
|
||||
<Button to='/home' component={Link}>INFO</Button>
|
||||
<Button color='secondary' to='/home' component={Link}>Sell BTC</Button>
|
||||
<Button color='secondary' to='/book' component={Link}>View Book</Button>
|
||||
</ButtonGroup>
|
||||
</Grid>
|
||||
<Grid item xs={12} align="center">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user