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

Improve order dividers, status tooltips

Browse Source
This commit is contained in:
Reckless_Satoshi
2022-02-02 01:29:05 -08:00
parent 260c9ec335
commit 26bccdf9df
6 changed files with 78 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material"; import { Tooltip, Paper, Button , CircularProgress, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar, IconButton} from "@mui/material";
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { DataGrid } from '@mui/x-data-grid'; import { DataGrid } from '@mui/x-data-grid';
import MediaQuery from 'react-responsive' import MediaQuery from 'react-responsive'
@ -79,7 +79,7 @@ export default class BookPage extends Component {
({id: order.id, ({id: order.id,
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png', avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
robosat: order.maker_nick, robosat: order.maker_nick,
type: order.type ? "Sell": "Buy", type: order.type ? "Seller": "Buyer",
amount: parseFloat(parseFloat(order.amount).toFixed(4)), amount: parseFloat(parseFloat(order.amount).toFixed(4)),
currency: this.getCurrencyCode(order.currency), currency: this.getCurrencyCode(order.currency),
payment_method: order.payment_method, payment_method: order.payment_method,
@ -108,7 +108,7 @@ export default class BookPage extends Component {
</ListItemButton> </ListItemButton>
); );
} }, } },
{ field: 'type', headerName: 'Type', width: 60 }, { field: 'type', headerName: 'Is', width: 60 },
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 }, { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
{ field: 'currency', headerName: 'Currency', width: 100, { field: 'currency', headerName: 'Currency', width: 100,
renderCell: (params) => {return ( renderCell: (params) => {return (
@ -135,14 +135,14 @@ export default class BookPage extends Component {
bookListTablePhone=()=>{ bookListTablePhone=()=>{
return ( return (
<div style={{ height: 425, width: '100%' }}> <div style={{ height: 422, width: '100%' }}>
<DataGrid <DataGrid
rows={ rows={
this.state.orders.map((order) => this.state.orders.map((order) =>
({id: order.id, ({id: order.id,
avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png', avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
robosat: order.maker_nick, robosat: order.maker_nick,
type: order.type ? "Sell": "Buy", type: order.type ? "Seller": "Buyer",
amount: parseFloat(parseFloat(order.amount).toFixed(4)), amount: parseFloat(parseFloat(order.amount).toFixed(4)),
currency: this.getCurrencyCode(order.currency), currency: this.getCurrencyCode(order.currency),
payment_method: order.payment_method, payment_method: order.payment_method,
@ -155,9 +155,8 @@ export default class BookPage extends Component {
// { field: 'id', headerName: 'ID', width: 40 }, // { field: 'id', headerName: 'ID', width: 40 },
{ field: 'robosat', headerName: 'Robot', width: 80, { field: 'robosat', headerName: 'Robot', width: 80,
renderCell: (params) => {return ( renderCell: (params) => {return (
<ListItemButton style={{ cursor: "pointer" }}> <Tooltip placement="right" enterTouchDelay="0" title={params.row.robosat+" ("+params.row.type+")"}>
<ListItemAvatar> <div style={{ width: 45, height: 45 }}>
<div style={{ width: 48, height: 48 }}>
<Image className='bookAvatar' <Image className='bookAvatar'
disableError='true' disableError='true'
disableSpinner='true' disableSpinner='true'
@ -166,15 +165,16 @@ export default class BookPage extends Component {
src={params.row.avatar} src={params.row.avatar}
/> />
</div> </div>
</ListItemAvatar> </Tooltip>
</ListItemButton>
); );
} }, } },
{ field: 'type', headerName: 'Type', width: 60, hide:'true'}, { field: 'type', headerName: 'Is', width: 60, hide:'true'},
{ field: 'amount', headerName: 'Amount', type: 'number', width: 80 }, { field: 'amount', headerName: 'Amount', type: 'number', width: 80 },
{ field: 'currency', headerName: 'Currency', width: 100, { field: 'currency', headerName: 'Currency', width: 100,
renderCell: (params) => {return ( renderCell: (params) => {return (
<Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
<div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div> <div style={{ cursor: "pointer" }}>{params.row.currency + " " + getFlags(params.row.currency)}</div>
</Tooltip>
)} }, )} },
{ field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'}, { field: 'payment_method', headerName: 'Payment Method', width: 180, hide:'true'},
{ field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true', { field: 'price', headerName: 'Price', type: 'number', width: 140, hide:'true',
@ -183,7 +183,9 @@ export default class BookPage extends Component {
)} }, )} },
{ field: 'premium', headerName: 'Premium', type: 'number', width: 85, { field: 'premium', headerName: 'Premium', type: 'number', width: 85,
renderCell: (params) => {return ( renderCell: (params) => {return (
<Tooltip placement="left" enterTouchDelay="0" title={this.pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
<div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div> <div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
</Tooltip>
)} }, )} },
]} ]}

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

@ -484,10 +484,10 @@ bottomBarPhone =()=>{
<div style={{display: this.props.avatarLoaded ? '':'none'}}> <div style={{display: this.props.avatarLoaded ? '':'none'}}>
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false} <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
title="You have an active order"> title="You have an active order">
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} > <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary"> <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
<Avatar className='phoneFlippedSmallAvatar' <Avatar className='phoneFlippedSmallAvatar'
sx={{ width: 65, height:65 }} sx={{ width: 55, height:55 }}
alt={this.props.nickname} alt={this.props.nickname}
imgProps={{ imgProps={{
onLoad:() => this.props.setAppState({avatarLoaded: true}), onLoad:() => this.props.setAppState({avatarLoaded: true}),

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

@ -184,7 +184,7 @@ export default class MakerPage extends Component {
</Grid> </Grid>
<Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}> <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
<div style={{maxWidth:140}}> <div style={{maxWidth:140}}>
<Tooltip enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin"> <Tooltip placement="top" enterTouchDelay="0" title="Amount of fiat to exchange for bitcoin">
<TextField <TextField
error={this.state.amount <= 0} error={this.state.amount <= 0}
helperText={this.state.amount <= 0 ? 'Invalid' : null} helperText={this.state.amount <= 0 ? 'Invalid' : null}
@ -217,7 +217,7 @@ export default class MakerPage extends Component {
</Grid> </Grid>
<br/> <br/>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Tooltip enterTouchDelay="0" title="Input your prefered payment methods"> <Tooltip placement="top" enterTouchDelay="0" title="Enter your prefered payment methods">
<TextField <TextField
sx={{width:240}} sx={{width:240}}
label="Payment Method(s)" label="Payment Method(s)"
@ -242,7 +242,7 @@ export default class MakerPage extends Component {
</div> </div>
</FormHelperText> </FormHelperText>
<RadioGroup row defaultValue="relative"> <RadioGroup row defaultValue="relative">
<Tooltip enterTouchDelay="0" title="Let the price move with the market"> <Tooltip placement="top" enterTouchDelay="0" title="Let the price move with the market">
<FormControlLabel <FormControlLabel
value="relative" value="relative"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
@ -251,7 +251,7 @@ export default class MakerPage extends Component {
onClick={this.handleClickRelative} onClick={this.handleClickRelative}
/> />
</Tooltip> </Tooltip>
<Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis"> <Tooltip placement="top" enterTouchDelay="0" title="Set a fix amount of satoshis">
<FormControlLabel <FormControlLabel
value="explicit" value="explicit"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
@ -304,18 +304,19 @@ export default class MakerPage extends Component {
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Tooltip enterTouchDelay="0" title="You must fill the form correctly"> {/* conditions to disable the make button */}
<div><Button disabled={this.state.amount == null || {(this.state.amount == null ||
this.state.amount <= 0 || this.state.amount <= 0 ||
(this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
(!this.state.is_explicit & this.state.badPremium != null) (!this.state.is_explicit & this.state.badPremium != null))
} ?
color="primary" <Tooltip enterTouchDelay="0" title="You must fill the form correctly">
variant="contained" <div><Button disabled color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button></div>
onClick={this.handleCreateOfferButtonPressed} >
Create Order
</Button></div>
</Tooltip> </Tooltip>
:
<Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed} >Create Order</Button>
}
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.state.badRequest ? {this.state.badRequest ?

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

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material" import { Chip, Tooltip, Badge, Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown'; import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
import MediaQuery from 'react-responsive' import MediaQuery from 'react-responsive'
@ -161,7 +161,10 @@ export default class OrderPage extends Component {
// Render a completed state // Render a completed state
return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>); return (<Button variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>);
} else{ } else{
return(<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>) return(
<Tooltip enterTouchDelay="0" title="Wait until you can take an order"><div>
<Button disabled={true} variant='contained' color='primary' onClick={this.handleClickTakeOrderButton}>Take Order</Button>
</div></Tooltip>)
} }
}; };
@ -352,15 +355,16 @@ export default class OrderPage extends Component {
// Colors for the status badges // Colors for the status badges
statusBadgeColor(status){ statusBadgeColor(status){
if(status=='active'){ if(status=='active'){return("success")}
return("success") if(status=='seen_recently'){return("warning")}
} if(status=='inactive'){return('error')}
if(status=='seen_recently'){
return("warning")
}
if(status=='inactive'){
return('error')
} }
// Colors for the status badges
statusTooltip(status){
if(status=='active'){return("Active")}
if(status=='seen_recently'){return("Seen recently")}
if(status=='inactive'){return('Inactive')}
} }
orderBox=()=>{ orderBox=()=>{
@ -369,52 +373,56 @@ export default class OrderPage extends Component {
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<MediaQuery minWidth={920}> <MediaQuery minWidth={920}>
<Typography component="h5" variant="h5"> <Typography component="h5" variant="h5">
Order Details Order Box
</Typography> </Typography>
</MediaQuery> </MediaQuery>
<Paper elevation={12} style={{ padding: 8,}}> <Paper elevation={12} style={{ padding: 8,}}>
<List dense="true"> <List dense="true">
<ListItem > <ListItem >
<ListItemAvatar sx={{ width: 56, height: 56 }}> <ListItemAvatar sx={{ width: 56, height: 56 }}>
<Tooltip placement="top" enterTouchDelay="0" title={this.statusTooltip(this.state.maker_status)} >
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}> <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
<Avatar className="flippedSmallAvatar" <Avatar className="flippedSmallAvatar"
alt={this.state.maker_nick} alt={this.state.maker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
/> />
</Badge> </Badge>
</Tooltip>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/> <ListItemText primary={this.state.maker_nick + (this.state.type ? " (Seller)" : " (Buyer)")} secondary="Order maker" align="right"/>
</ListItem> </ListItem>
<Divider />
{this.state.is_participant ? {this.state.is_participant ?
<> <>
{this.state.taker_nick!='None' ? {this.state.taker_nick!='None' ?
<> <>
<Divider />
<ListItem align="left"> <ListItem align="left">
<ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/> <ListItemText primary={this.state.taker_nick + (this.state.type ? " (Buyer)" : " (Seller)")} secondary="Order taker"/>
<ListItemAvatar > <ListItemAvatar >
<Tooltip enterTouchDelay="0" title={this.statusTooltip(this.state.taker_status)} >
<Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}> <Badge variant="dot" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
<Avatar className="smallAvatar" <Avatar className="smallAvatar"
alt={this.state.taker_nick} alt={this.state.taker_nick}
src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'} src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
/> />
</Badge> </Badge>
</Tooltip>
</ListItemAvatar> </ListItemAvatar>
</ListItem> </ListItem>
<Divider />
</>: </>:
"" ""
} }
<Divider><Chip label='Order Details'/></Divider>
<ListItem> <ListItem>
<ListItemIcon> <ListItemIcon>
<ArticleIcon/> <ArticleIcon/>
</ListItemIcon> </ListItemIcon>
<ListItemText primary={this.state.status_message} secondary="Order status"/> <ListItemText primary={this.state.status_message} secondary="Order status"/>
</ListItem> </ListItem>
<Divider /> <Divider/>
</> </>
:"" :<Divider><Chip label='Order Details'/></Divider>
} }
<ListItem> <ListItem>
@ -559,8 +567,8 @@ export default class OrderPage extends Component {
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} variant="fullWidth" > <Tabs value={value} onChange={handleChange} variant="fullWidth" >
<Tab label="Order Details" {...this.a11yProps(0)} /> <Tab label="Order" {...this.a11yProps(0)} />
<Tab label="Contract Box" {...this.a11yProps(1)} /> <Tab label="Contract" {...this.a11yProps(1)} />
</Tabs> </Tabs>
</Box> </Box>
<Grid container spacing={2}> <Grid container spacing={2}>

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

@ -92,6 +92,7 @@ export default class UserGenPage extends Component {
this.setState({ this.setState({
token: this.genBase62Token(34), token: this.genBase62Token(34),
tokenHasChanged: true, tokenHasChanged: true,
copied: true,
}); });
} }
@ -192,7 +193,7 @@ export default class UserGenPage extends Component {
startAdornment: startAdornment:
<Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!"> <Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
<IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}> <IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
<ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'success' : 'inherit' } sx={{width:18, height:18}}/> <ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
</IconButton> </IconButton>
</Tooltip>, </Tooltip>,
endAdornment: endAdornment:
@ -204,10 +205,19 @@ export default class UserGenPage extends Component {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button disabled={!this.state.tokenHasChanged} type="submit" size='small' onClick= {this.handleClickSubmitToken}> {this.state.tokenHasChanged ?
<Button type="submit" size='small' onClick= {this.handleClickSubmitToken}>
<SmartToyIcon sx={{width:18, height:18}} /> <SmartToyIcon sx={{width:18, height:18}} />
<span> Generate Robot</span> <span> Generate Robot</span>
</Button> </Button>
:
<Tooltip enterTouchDelay="0" title="You must enter a new token first">
<Button disabled={true} type="submit" size='small' >
<SmartToyIcon sx={{width:18, height:18}} />
<span> Generate Robot</span>
</Button>
</Tooltip>
}
</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">

7
frontend/static/css/index.css
View File

@ -73,6 +73,13 @@ body {
filter: drop-shadow(0.7px 0.7px 0.7px #000000); filter: drop-shadow(0.7px 0.7px 0.7px #000000);
} }
.phoneFlippedSmallAvatar:after {
content: '';
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
}
.bookAvatar { .bookAvatar {
border-radius: 50%; border-radius: 50%;
transform: scaleX(-1); transform: scaleX(-1);