Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-13 10:56:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tooltips userPage, bottomBar, makerPage

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-02-01 14:05:49 -08:00
parent d589dc276b
commit 260c9ec335
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
5 changed files with 109 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import {Badge, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material"; import {Badge, Tooltip, TextField, ListItemAvatar, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
import MediaQuery from 'react-responsive' import MediaQuery from 'react-responsive'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
@ -264,17 +264,25 @@ bottomBarDesktop =()=>{
<Grid container xs={12}> <Grid container xs={12}>
<Grid item xs={2}> <Grid item xs={2}>
<div style={{display: this.props.avatarLoaded ? '':'none'}}>
<ListItemButton onClick={this.handleClickOpenProfile} > <ListItemButton onClick={this.handleClickOpenProfile} >
<Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
title="You have an active order">
<ListItemAvatar sx={{ width: 30, height: 30 }} > <ListItemAvatar sx={{ width: 30, height: 30 }} >
<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='flippedSmallAvatar' sx={{margin: 0, top: -13}} <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
alt={this.props.nickname} alt={this.props.nickname}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} imgProps={{
onLoad:() => this.props.setAppState({avatarLoaded: true}),
}}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/> />
</Badge> </Badge>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary={this.props.nickname}/> </Tooltip>
</ListItemButton> <ListItemText primary={this.props.nickname}/>
</ListItemButton>
</div>
</Grid> </Grid>
<Grid item xs={2}> <Grid item xs={2}>
@ -354,19 +362,23 @@ bottomBarDesktop =()=>{
</Select> </Select>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<Tooltip enterTouchDelay="250" title="Show community and support links">
<IconButton <IconButton
color="primary" color="primary"
aria-label="Community" aria-label="Community"
onClick={this.handleClickOpenCommunity} > onClick={this.handleClickOpenCommunity} >
<PeopleIcon /> <PeopleIcon />
</IconButton> </IconButton>
</Tooltip>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<IconButton color="primary" <Tooltip enterTouchDelay="250" title="Show stats for nerds">
aria-label="Stats for Nerds" <IconButton color="primary"
onClick={this.handleClickOpenStatsForNerds} > aria-label="Stats for Nerds"
<SettingsIcon /> onClick={this.handleClickOpenStatsForNerds} >
</IconButton> <SettingsIcon />
</IconButton>
</Tooltip>
</Grid> </Grid>
</Grid> </Grid>
@ -470,51 +482,62 @@ bottomBarPhone =()=>{
<Grid item xs={1.6}> <Grid item xs={1.6}>
<div style={{display: this.props.avatarLoaded ? '':'none'}}> <div style={{display: this.props.avatarLoaded ? '':'none'}}>
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} > <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary"> title="You have an active order">
<Avatar className='phoneFlippedSmallAvatar' <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 22, right: 8}} >
sx={{ width: 65, height:65 }} <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
alt={this.props.nickname} <Avatar className='phoneFlippedSmallAvatar'
imgProps={{ sx={{ width: 65, height:65 }}
onLoad:() => this.props.setAppState({avatarLoaded: true}), alt={this.props.nickname}
}} imgProps={{
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} onLoad:() => this.props.setAppState({avatarLoaded: true}),
/> }}
</Badge> src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
</IconButton> />
</Badge>
</IconButton>
</Tooltip>
</div> </div>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<IconButton onClick={this.handleClickOpenExchangeSummary} > <Tooltip enterTouchDelay="300" title="Number of public BUY orders">
<Badge badgeContent={this.state.num_public_buy_orders} color="action"> <IconButton onClick={this.handleClickOpenExchangeSummary} >
<InventoryIcon /> <Badge badgeContent={this.state.num_public_buy_orders} color="action">
</Badge> <InventoryIcon />
</IconButton> </Badge>
</IconButton>
</Tooltip>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<IconButton onClick={this.handleClickOpenExchangeSummary} > <Tooltip enterTouchDelay="300" title="Number of public SELL orders">
<Badge badgeContent={this.state.num_public_sell_orders} color="action"> <IconButton onClick={this.handleClickOpenExchangeSummary} >
<SellIcon /> <Badge badgeContent={this.state.num_public_sell_orders} color="action">
</Badge> <SellIcon />
</IconButton> </Badge>
</IconButton>
</Tooltip>
</Grid> </Grid>
<Grid item xs={1.6} align="center"> <Grid item xs={1.6} align="center">
<IconButton onClick={this.handleClickOpenExchangeSummary} > <Tooltip enterTouchDelay="300" title="Today active robots">
<Badge badgeContent={this.state.active_robots_today} color="action"> <IconButton onClick={this.handleClickOpenExchangeSummary} >
<SmartToyIcon /> <Badge badgeContent={this.state.active_robots_today} color="action">
</Badge> <SmartToyIcon />
</IconButton> </Badge>
</IconButton>
</Tooltip>
</Grid> </Grid>
<Grid item xs={1.8} align="center"> <Grid item xs={1.8} align="center">
<IconButton onClick={this.handleClickOpenExchangeSummary} > <Tooltip enterTouchDelay="300" title="Today non-KYC bitcoin premium">
<Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"} color="action"> <IconButton onClick={this.handleClickOpenExchangeSummary} >
<PriceChangeIcon /> <Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"} color="action">
</Badge> <PriceChangeIcon />
</IconButton> </Badge>
</IconButton>
</Tooltip>
</Grid> </Grid>
<Grid container item xs={3.8}> <Grid container item xs={3.8}>
@ -529,19 +552,23 @@ bottomBarPhone =()=>{
</Select> </Select>
</Grid> </Grid>
<Grid item xs={3}> <Grid item xs={3}>
<IconButton color="primary" <Tooltip enterTouchDelay="250" title="Show community and support links">
aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon />
</IconButton>
</Grid>
<Grid item xs={3}>
<IconButton <IconButton
color="primary" color="primary"
aria-label="Community" aria-label="Community"
onClick={this.handleClickOpenCommunity} > onClick={this.handleClickOpenCommunity} >
<PeopleIcon /> <PeopleIcon />
</IconButton> </IconButton>
</Tooltip>
</Grid>
<Grid item xs={3}>
<Tooltip enterTouchDelay="250" title="Show stats for nerds">
<IconButton color="primary"
aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon />
</IconButton>
</Tooltip>
</Grid> </Grid>
</Grid> </Grid>

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

@ -30,7 +30,7 @@ export default class HomePage extends Component {
<Router > <Router >
<div className='appCenter'> <div className='appCenter'>
<Switch> <Switch>
<Route exact path='/' render={(props) => <UserGenPage setAppState={this.setAppState}/>}/> <Route exact path='/' render={(props) => <UserGenPage {...this.state} setAppState={this.setAppState}/>}/>
<Route path='/make' component={MakerPage}/> <Route path='/make' component={MakerPage}/>
<Route path='/book' component={BookPage}/> <Route path='/book' component={BookPage}/>
<Route path="/order/:orderId" component={OrderPage}/> <Route path="/order/:orderId" component={OrderPage}/>

21
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, dividerClasses} from "@mui/material" import { Tooltip, 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'
@ -184,6 +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">
<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}
@ -195,7 +196,9 @@ export default class MakerPage extends Component {
style: {textAlign:"center"} style: {textAlign:"center"}
}} }}
onChange={this.handleAmountChange} onChange={this.handleAmountChange}
/></div> />
</Tooltip>
</div>
<div > <div >
<Select <Select
required="true" required="true"
@ -214,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">
<FormControl > <Tooltip enterTouchDelay="0" title="Input your prefered payment methods">
<TextField <TextField
sx={{width:240}} sx={{width:240}}
label="Payment Method(s)" label="Payment Method(s)"
@ -228,7 +231,7 @@ export default class MakerPage extends Component {
}} }}
onChange={this.handlePaymentMethodChange} onChange={this.handlePaymentMethodChange}
/> />
</FormControl> </Tooltip>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
@ -239,6 +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">
<FormControlLabel <FormControlLabel
value="relative" value="relative"
control={<Radio color="primary"/>} control={<Radio color="primary"/>}
@ -246,6 +250,8 @@ export default class MakerPage extends Component {
labelPlacement="Top" labelPlacement="Top"
onClick={this.handleClickRelative} onClick={this.handleClickRelative}
/> />
</Tooltip>
<Tooltip enterTouchDelay="0" title="Set a fix amount of satoshis">
<FormControlLabel <FormControlLabel
value="explicit" value="explicit"
control={<Radio color="secondary"/>} control={<Radio color="secondary"/>}
@ -253,6 +259,7 @@ export default class MakerPage extends Component {
labelPlacement="Top" labelPlacement="Top"
onClick={this.handleClickExplicit} onClick={this.handleClickExplicit}
/> />
</Tooltip>
</RadioGroup> </RadioGroup>
</FormControl> </FormControl>
</Grid> </Grid>
@ -297,7 +304,8 @@ export default class MakerPage extends Component {
</Paper> </Paper>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Button disabled={this.state.amount == null || <Tooltip enterTouchDelay="0" title="You must fill the form correctly">
<div><Button disabled={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)
@ -306,7 +314,8 @@ export default class MakerPage extends Component {
variant="contained" variant="contained"
onClick={this.handleCreateOfferButtonPressed} > onClick={this.handleCreateOfferButtonPressed} >
Create Order Create Order
</Button> </Button></div>
</Tooltip>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
{this.state.badRequest ? {this.state.badRequest ?

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

@ -1,11 +1,13 @@
import React, { Component } from "react"; import React, { Component } from "react";
import { Button , Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material" import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import Image from 'material-ui-image' import Image from 'material-ui-image'
import InfoDialog from './InfoDialog' import InfoDialog from './InfoDialog'
import SmartToyIcon from '@mui/icons-material/SmartToy'; import SmartToyIcon from '@mui/icons-material/SmartToy';
import CasinoIcon from '@mui/icons-material/Casino'; import CasinoIcon from '@mui/icons-material/Casino';
import ContentCopy from "@mui/icons-material/ContentCopy"; import ContentCopy from "@mui/icons-material/ContentCopy";
import InfoIcon from '@mui/icons-material/Info';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
function getCookie(name) { function getCookie(name) {
let cookieValue = null; let cookieValue = null;
@ -103,7 +105,7 @@ export default class UserGenPage extends Component {
handleClickSubmitToken=()=>{ handleClickSubmitToken=()=>{
this.delGeneratedUser(); this.delGeneratedUser();
this.getGeneratedUser(this.state.token); this.getGeneratedUser(this.state.token);
this.setState({loadingRobot: true, tokenHasChanged: false}); this.setState({loadingRobot: true, tokenHasChanged: false, copied: false});
this.props.setAppState({avatarLoaded: false, nickname: null, token: null}); this.props.setAppState({avatarLoaded: false, nickname: null, token: null});
} }
@ -141,6 +143,7 @@ export default class UserGenPage extends Component {
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} align="center"> <Grid item xs={12} align="center">
<Tooltip enterTouchDelay="0" title="This is your trading avatar">
<div style={{ maxWidth: 200, maxHeight: 200 }}> <div style={{ maxWidth: 200, maxHeight: 200 }}>
<Image className='newAvatar' <Image className='newAvatar'
disableError='true' disableError='true'
@ -148,7 +151,8 @@ export default class UserGenPage extends Component {
color='null' color='null'
src={this.state.avatar_url} src={this.state.avatar_url}
/> />
</div><br/> </div>
</Tooltip><br/>
</Grid> </Grid>
</div> </div>
: <CircularProgress sx={{position: 'relative', top: 100, }}/>} : <CircularProgress sx={{position: 'relative', top: 100, }}/>}
@ -171,7 +175,7 @@ export default class UserGenPage extends Component {
// style: { color: 'green' }, // style: { color: 'green' },
// }} // }}
error={this.state.bad_request} error={this.state.bad_request}
label='Store your token safely' label={"Store your token safely"}
required='true' required='true'
value={this.state.token} value={this.state.token}
variant='standard' variant='standard'
@ -186,11 +190,15 @@ export default class UserGenPage extends Component {
}} }}
InputProps={{ InputProps={{
startAdornment: startAdornment:
<IconButton onClick= {()=>navigator.clipboard.writeText(this.state.token)}> <Tooltip disableHoverListener open={this.state.copied} enterTouchDelay="0" title="Copied!">
<ContentCopy color={this.state.tokenHasChanged ? 'inherit' : 'primary' } sx={{width:18, height:18}} /> <IconButton onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.setState({copied:true}))}>
</IconButton>, <ContentCopy color={this.props.avatarLoaded & !this.state.copied & !this.state.bad_request ? 'success' : 'inherit' } sx={{width:18, height:18}}/>
</IconButton>
</Tooltip>,
endAdornment: endAdornment:
<IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>, <Tooltip enterTouchDelay="250" title="Generate a new token">
<IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>
</Tooltip>,
}} }}
/> />
</Grid> </Grid>

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

@ -68,12 +68,9 @@ body {
} }
.phoneFlippedSmallAvatar { .phoneFlippedSmallAvatar {
transform: translate(-20, -20);
bottom: 50;
right: 50;
transform: scaleX(-1); transform: scaleX(-1);
border: 0.8px solid #555; border: 1.3px solid #555;
filter: drop-shadow(0.5px 0.5px 0.5px #000000); filter: drop-shadow(0.7px 0.7px 0.7px #000000);
} }
.bookAvatar { .bookAvatar {