Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-05 22:10:10 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add circular loading on Orders and book

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-01-10 02:13:54 -08:00
parent 9bc6757ba3
commit 33df480301
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Box, Button , Divider, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material"; import { Box, Button , Divider, CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
export default class BookPage extends Component { export default class BookPage extends Component {
@ -9,7 +9,8 @@ export default class BookPage extends Component {
orders: new Array(), orders: new Array(),
currency: 0, currency: 0,
type: 1, type: 1,
currencies_dict: {"0":"ANY"} currencies_dict: {"0":"ANY"},
loading: true,
}; };
this.getCurrencyDict() this.getCurrencyDict()
this.getOrderDetails(this.state.type,this.state.currency) this.getOrderDetails(this.state.type,this.state.currency)
@ -23,6 +24,7 @@ export default class BookPage extends Component {
this.setState({ this.setState({
orders: data, orders: data,
not_found: data.not_found, not_found: data.not_found,
loading: false,
})); }));
} }
@ -34,6 +36,7 @@ export default class BookPage extends Component {
handleTypeChange=(e)=>{ handleTypeChange=(e)=>{
this.setState({ this.setState({
type: e.target.value, type: e.target.value,
loading: true,
}); });
this.getOrderDetails(e.target.value,this.state.currency); this.getOrderDetails(e.target.value,this.state.currency);
} }
@ -41,6 +44,7 @@ export default class BookPage extends Component {
this.setState({ this.setState({
currency: e.target.value, currency: e.target.value,
currencyCode: this.getCurrencyCode(e.target.value), currencyCode: this.getCurrencyCode(e.target.value),
loading: true,
}) })
this.getOrderDetails(this.state.type, e.target.value); this.getOrderDetails(this.state.type, e.target.value);
} }
@ -223,6 +227,11 @@ export default class BookPage extends Component {
</Typography> </Typography>
</Grid> </Grid>
} }
{/* If loading, show circular progressbar */}
{this.state.loading ?
<Grid item xs={12} align="center">
<CircularProgress />
</Grid> : ""}
{ this.state.not_found ? { this.state.not_found ?
(<Grid item xs={12} align="center"> (<Grid item xs={12} align="center">

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

@ -19,6 +19,11 @@ function getCookie(name) {
} }
const csrftoken = getCookie('csrftoken'); const csrftoken = getCookie('csrftoken');
// pretty numbers
function pn(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
export default class MakerPage extends Component { export default class MakerPage extends Component {
defaultCurrency = 1; defaultCurrency = 1;
defaultCurrencyCode = 'USD'; defaultCurrencyCode = 'USD';
@ -72,9 +77,9 @@ export default class MakerPage extends Component {
} }
handleSatoshisChange=(e)=>{ handleSatoshisChange=(e)=>{
var bad_sats = e.target.value > this.maxTradeSats ? var bad_sats = e.target.value > this.maxTradeSats ?
("Must be less than "+this.maxTradeSats): ("Must be less than "+pn(this.maxTradeSats)):
(e.target.value < this.minTradeSats ? (e.target.value < this.minTradeSats ?
("Must be more than "+this.minTradeSats): null) ("Must be more than "+pn(this.minTradeSats)): null)
this.setState({ this.setState({
satoshis: e.target.value, satoshis: e.target.value,
@ -92,7 +97,6 @@ export default class MakerPage extends Component {
handleClickExplicit=(e)=>{ handleClickExplicit=(e)=>{
this.setState({ this.setState({
isExplicit: true, isExplicit: true,
satoshis: 10000,
premium: null, premium: null,
}); });
} }
@ -238,6 +242,7 @@ export default class MakerPage extends Component {
<TextField <TextField
label="Satoshis" label="Satoshis"
error={this.state.badSatoshis} error={this.state.badSatoshis}
helperText={this.state.badSatoshis}
type="number" type="number"
required="true" required="true"
inputProps={{ inputProps={{

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

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material" import { Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
import TradeBox from "./TradeBox"; import TradeBox from "./TradeBox";
function msToTime(duration) { function msToTime(duration) {
@ -312,7 +312,7 @@ export default class OrderPage extends Component {
render (){ render (){
return ( return (
// Only so nothing shows while requesting the first batch of data // Only so nothing shows while requesting the first batch of data
(this.state.statusCode == null & this.state.badRequest == null) ? "" : this.orderDetailsPage() (this.state.statusCode == null & this.state.badRequest == null) ? <CircularProgress /> : this.orderDetailsPage()
); );
} }
} }