Robosats/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-07-23 06:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework components. Initialize book component.

Browse Source
This commit is contained in:
Reckless_Satoshi
2022-01-03 11:15:13 -08:00
parent e06be9b22f
commit 7701f01936
4 changed files with 145 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/BookPage.js
View File

@ -3,9 +3,25 @@ import React, { Component } from "react";
export default class BookPage extends Component { export default class BookPage extends Component {
constructor(props) { constructor(props) {
super(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() { 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>
);
} }
} }

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

@ -1,5 +1,5 @@
import React, { Component } from 'react'; 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' import { Link } from 'react-router-dom'
function getCookie(name) { function getCookie(name) {
@ -111,130 +111,134 @@ export default class MakerPage extends Component {
return ( return (
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="h4" variant="h4"> <Grid item xs={12} align="center">
Make an Order <Typography component="h4" variant="h4">
</Typography> Make an Order
</Grid> </Typography>
<Grid item xs={12} align="center"> </Grid>
<FormControl component="fieldset"> <Paper elevation={12} style={{ padding: 8,}}>
<RadioGroup row defaultValue="0" onChange={this.handleTypeChange}> <Grid item xs={12} align="center">
<FormControlLabel <FormControl component="fieldset">
value="0"
control={<Radio color="primary"/>}
label="Buy"
labelPlacement="Top"
/>
<FormControlLabel
value="1"
control={<Radio color="secondary"/>}
label="Sell"
labelPlacement="Top"
/>
</RadioGroup>
<FormHelperText> <FormHelperText>
<div align='center'> <div align='center'>
Choose Buy or Sell Bitcoin Choose Buy or Sell Bitcoin
</div> </div>
</FormHelperText> </FormHelperText>
</FormControl> <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
</Grid> <FormControlLabel
<Grid item xs={12} align="center"> value="0"
<FormControl > control={<Radio color="primary"/>}
<TextField label="Buy"
label="Amount of Fiat to Trade" labelPlacement="Top"
type="number" />
required="true" <FormControlLabel
defaultValue={this.defaultAmount} value="1"
inputProps={{ control={<Radio color="secondary"/>}
min:0 , label="Sell"
style: {textAlign:"center"} labelPlacement="Top"
}} />
onChange={this.handleAmountChange} </RadioGroup>
/> </FormControl>
<Select </Grid>
label="Select Payment Currency" <Grid item xs={12} align="center">
required="true" <FormControl >
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">
<TextField <TextField
label="Explicit Amount in Satoshis" label="Amount of Fiat to Trade"
type="number" type="number"
required="true" required="true"
inputProps={{ defaultValue={this.defaultAmount}
// TODO read these from .env file inputProps={{
min:10000 , min:0 ,
max:500000 , style: {textAlign:"center"}
style: {textAlign:"center"} }}
}} onChange={this.handleAmountChange}
onChange={this.handleSatoshisChange} />
// defaultValue={this.defaultSatoshis} <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> <FormControlLabel
: <Grid item xs={12} align="center"> 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 <TextField
label="Premium over Market (%)" label="Explicit Amount in Satoshis"
type="number" type="number"
// defaultValue={this.defaultPremium} required="true"
inputProps={{ inputProps={{
style: {textAlign:"center"} // TODO read these from .env file
}} min:10000 ,
onChange={this.handlePremiumChange} max:500000 ,
/> style: {textAlign:"center"}
</Grid> }}
} 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"> <Grid item xs={12} align="center">
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}> <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>
Create Order Create Order

6
frontend/src/components/OrderPage.js
View File

@ -1,5 +1,5 @@
import React, { Component } from "react"; 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' import { Link } from 'react-router-dom'
// pretty numbers // pretty numbers
@ -46,8 +46,9 @@ export default class OrderPage extends Component {
<Grid container spacing={1}> <Grid container spacing={1}>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Typography component="h5" variant="h5"> <Typography component="h5" variant="h5">
Robosat BTC {this.state.type ? " Sell " : " Buy "} Order BTC {this.state.type ? " Sell " : " Buy "} Order
</Typography> </Typography>
<Paper elevation={12} style={{ padding: 8,}}>
<List component="nav" aria-label="mailbox folders"> <List component="nav" aria-label="mailbox folders">
<ListItem> <ListItem>
<ListItemAvatar sx={{ width: 56, height: 56 }}> <ListItemAvatar sx={{ width: 56, height: 56 }}>
@ -97,6 +98,7 @@ export default class OrderPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.state.isParticipant ? "" : <Button variant='contained' color='primary' to='/home' component={Link}>Take Order</Button>} {this.state.isParticipant ? "" : <Button variant='contained' color='primary' to='/home' component={Link}>Take Order</Button>}
</Grid> </Grid>
</Paper>
</Grid> </Grid>
</Grid> </Grid>
); );

4
frontend/src/components/UserGenPage.js
View File

@ -131,9 +131,9 @@ export default class UserGenPage extends Component {
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<ButtonGroup variant="contained" aria-label="outlined primary button group"> <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 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> </ButtonGroup>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">