robosats/frontend/src/components/BottomBar.js

560 lines
22 KiB
JavaScript
Raw Normal View History

2022-01-14 16:21:42 +00:00
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";
2022-01-28 14:30:45 +00:00
import MediaQuery from 'react-responsive'
2022-01-14 16:21:42 +00:00
// Icons
import SettingsIcon from '@mui/icons-material/Settings';
2022-01-15 10:21:36 +00:00
import PeopleIcon from '@mui/icons-material/People';
2022-01-14 16:21:42 +00:00
import InventoryIcon from '@mui/icons-material/Inventory';
import SellIcon from '@mui/icons-material/Sell';
import SmartToyIcon from '@mui/icons-material/SmartToy';
import PercentIcon from '@mui/icons-material/Percent';
2022-01-14 17:35:27 +00:00
import PriceChangeIcon from '@mui/icons-material/PriceChange';
2022-01-15 00:28:19 +00:00
import BoltIcon from '@mui/icons-material/Bolt';
import GitHubIcon from '@mui/icons-material/GitHub';
import EqualizerIcon from '@mui/icons-material/Equalizer';
2022-01-15 10:21:36 +00:00
import SendIcon from '@mui/icons-material/Send';
2022-01-15 15:45:44 +00:00
import PublicIcon from '@mui/icons-material/Public';
import NumbersIcon from '@mui/icons-material/Numbers';
import PasswordIcon from '@mui/icons-material/Password';
import ContentCopy from "@mui/icons-material/ContentCopy";
2022-01-14 16:21:42 +00:00
// pretty numbers
function pn(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
2022-01-14 16:21:42 +00:00
export default class BottomBar extends Component {
constructor(props) {
super(props);
this.state = {
2022-01-15 00:28:19 +00:00
openStatsForNerds: false,
2022-01-15 10:21:36 +00:00
openCommuniy: false,
2022-01-28 14:30:45 +00:00
openExchangeSummary:false,
2022-01-18 17:52:48 +00:00
num_public_buy_orders: 0,
num_public_sell_orders: 0,
active_robots_today: 0,
fee: 0,
today_avg_nonkyc_btc_premium: 0,
today_total_volume: 0,
lifetime_satoshis_settled: 0,
2022-01-27 22:51:57 +00:00
robosats_running_commit_hash: '000000000000000',
openProfile: false,
profileShown: false,
2022-01-14 16:21:42 +00:00
};
this.getInfo();
}
2022-01-14 16:21:42 +00:00
handleClickSuppport = () => {
window.open("https://t.me/robosats");
};
getInfo() {
this.setState(null)
fetch('/api/info/')
.then((response) => response.json())
.then((data) => this.setState(data) &
this.props.setAppState({nickname:data.nickname}));
2022-01-14 16:21:42 +00:00
}
2022-01-15 00:28:19 +00:00
handleClickOpenStatsForNerds = () => {
2022-01-15 10:21:36 +00:00
this.setState({openStatsForNerds: true});
2022-01-15 00:28:19 +00:00
};
2022-01-27 22:51:57 +00:00
2022-01-15 00:28:19 +00:00
handleClickCloseStatsForNerds = () => {
2022-01-15 10:21:36 +00:00
this.setState({openStatsForNerds: false});
2022-01-15 00:28:19 +00:00
};
StatsDialog =() =>{
2022-01-28 14:30:45 +00:00
2022-01-15 00:28:19 +00:00
return(
<Dialog
open={this.state.openStatsForNerds}
onClose={this.handleClickCloseStatsForNerds}
aria-labelledby="stats-for-nerds-dialog-title"
aria-describedby="stats-for-nerds-description"
>
<DialogContent>
<Typography component="h5" variant="h5">Stats For Nerds</Typography>
<List dense>
2022-01-15 00:28:19 +00:00
<Divider/>
<ListItem>
<ListItemIcon><BoltIcon/></ListItemIcon>
<ListItemText primary={this.state.lnd_version} secondary="LND version"/>
</ListItem>
2022-01-15 15:45:44 +00:00
2022-01-15 00:28:19 +00:00
<Divider/>
<ListItem>
<ListItemIcon><GitHubIcon/></ListItemIcon>
<ListItemText secondary="Currently running commit hash">
2022-01-15 00:28:19 +00:00
<a href={"https://github.com/Reckless-Satoshi/robosats/tree/"
2022-01-27 22:51:57 +00:00
+ this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
2022-01-15 00:28:19 +00:00
</a>
</ListItemText>
</ListItem>
2022-01-15 15:45:44 +00:00
2022-01-15 00:28:19 +00:00
<Divider/>
<ListItem>
<ListItemIcon><EqualizerIcon/></ListItemIcon>
<ListItemText primary={this.state.today_total_volume+" BTC"} secondary="Today traded volume"/>
2022-01-15 00:28:19 +00:00
</ListItem>
2022-01-15 15:45:44 +00:00
<Divider/>
<ListItem>
<ListItemIcon><EqualizerIcon/></ListItemIcon>
<ListItemText primary={pn(this.state.lifetime_satoshis_settled)+" Sats"} secondary="Lifetime settled volume"/>
</ListItem>
2022-01-15 15:45:44 +00:00
<Divider/>
<ListItem>
<ListItemIcon><PublicIcon/></ListItemIcon>
<ListItemText primary="Made with ❤️ and ⚡" secondary="... somewhere on Earth!"/>
</ListItem>
2022-01-15 00:28:19 +00:00
</List>
2022-01-15 15:45:44 +00:00
2022-01-15 00:28:19 +00:00
</DialogContent>
</Dialog>
)
}
2022-01-15 10:21:36 +00:00
handleClickOpenCommunity = () => {
this.setState({openCommuniy: true});
};
handleClickCloseCommunity = () => {
this.setState({openCommuniy: false});
};
CommunityDialog =() =>{
2022-01-28 14:30:45 +00:00
2022-01-15 10:21:36 +00:00
return(
<Dialog
open={this.state.openCommuniy}
onClose={this.handleClickCloseCommunity}
aria-labelledby="community-dialog-title"
aria-describedby="community-description"
>
<DialogContent>
<Typography component="h5" variant="h5">Community</Typography>
<Typography component="body2" variant="body2">
<p> Support is only offered via public channels.
Join our Telegram community if you have
2022-01-15 15:45:44 +00:00
questions or want to hang out with other cool robots.
Please, use our Github Issues if you find a bug or want
to see new features!
2022-01-15 10:21:36 +00:00
</p>
</Typography>
<List>
<Divider/>
<ListItemButton component="a" href="https://t.me/robosats">
<ListItemIcon><SendIcon/></ListItemIcon>
<ListItemText primary="Join the RoboSats group"
secondary="Telegram (English / Main)"/>
</ListItemButton>
<Divider/>
<ListItemButton component="a" href="https://t.me/robosats_es">
<ListItemIcon><SendIcon/></ListItemIcon>
<ListItemText primary="Unase al grupo RoboSats"
secondary="Telegram (Español)"/>
</ListItemButton>
<Divider/>
<ListItemButton component="a" href="https://github.com/Reckless-Satoshi/robosats/issues">
<ListItemIcon><GitHubIcon/></ListItemIcon>
<ListItemText primary="Tell us about a new feature or a bug"
secondary="Github Issues - The Robotic Satoshis Open Source Project"/>
</ListItemButton>
</List>
</DialogContent>
</Dialog>
)
}
handleClickOpenProfile = () => {
this.getInfo();
this.setState({openProfile: true, profileShown: true});
};
handleClickCloseProfile = () => {
this.setState({openProfile: false});
};
dialogProfile =() =>{
return(
<Dialog
open={this.state.openProfile}
onClose={this.handleClickCloseProfile}
aria-labelledby="profile-title"
aria-describedby="profile-description"
>
<DialogContent>
<Typography component="h5" variant="h5">Your Profile</Typography>
<List>
<Divider/>
<ListItem className="profileNickname">
<ListItemText secondary="Your robot">
<Typography component="h6" variant="h6">
{this.props.nickname ? "⚡"+this.props.nickname+"⚡" : ""}
</Typography>
</ListItemText>
<ListItemAvatar>
<Avatar className='profileAvatar'
sx={{ width: 65, height:65 }}
alt={this.props.nickname}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/>
</ListItemAvatar>
</ListItem>
<Divider/>
{this.state.active_order_id ?
// TODO Link to router and do this.props.history.push
<ListItemButton component="a" href={window.location.origin +'/order/'+this.state.active_order_id}>
<ListItemIcon>
<Badge badgeContent="" color="primary">
<NumbersIcon color="primary"/>
</Badge>
</ListItemIcon>
<ListItemText primary={'One active order #'+this.state.active_order_id} secondary="Your current order"/>
</ListItemButton>
:
<ListItem>
<ListItemIcon><NumbersIcon/></ListItemIcon>
<ListItemText primary="No active orders" secondary="Your current order"/>
</ListItem>
}
<ListItem>
<ListItemIcon>
<PasswordIcon/>
</ListItemIcon>
<ListItemText secondary="Your token">
{this.props.token ?
<TextField
disabled
label='Store safely'
value={this.props.token }
variant='filled'
size='small'
InputProps={{
endAdornment:
<IconButton onClick= {()=>navigator.clipboard.writeText(this.props.token)}>
<ContentCopy />
</IconButton>,
}}
/>
:
'Cannot remember'}
</ListItemText>
</ListItem>
</List>
</DialogContent>
</Dialog>
)
}
2022-01-15 10:21:36 +00:00
2022-01-28 14:30:45 +00:00
bottomBarDesktop =()=>{
return(
<Paper elevation={6} style={{height:40}}>
2022-01-15 00:28:19 +00:00
<this.StatsDialog/>
2022-01-15 10:21:36 +00:00
<this.CommunityDialog/>
<this.dialogProfile/>
2022-01-14 16:21:42 +00:00
<Grid container xs={12}>
2022-01-14 17:35:27 +00:00
<Grid item xs={2}>
<ListItemButton onClick={this.handleClickOpenProfile} >
<ListItemAvatar sx={{ width: 30, height: 30 }} >
<Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
<Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
alt={this.props.nickname}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/>
</Badge>
</ListItemAvatar>
<ListItemText primary={this.props.nickname}/>
</ListItemButton>
2022-01-14 16:21:42 +00:00
</Grid>
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
<InventoryIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_buy_orders}
secondary="Public Buy Orders" />
</ListItem>
</Grid>
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
<SellIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_sell_orders}
secondary="Public Sell Orders" />
</ListItem>
</Grid>
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
<SmartToyIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
2022-01-18 17:52:48 +00:00
primary={this.state.active_robots_today}
secondary="Today Active Robots" />
2022-01-14 16:21:42 +00:00
</ListItem>
</Grid>
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
2022-01-14 17:35:27 +00:00
<PriceChangeIcon/>
2022-01-14 16:21:42 +00:00
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.today_avg_nonkyc_btc_premium+"%"}
2022-01-28 14:30:45 +00:00
secondary="Today Avg Premium" />
2022-01-14 16:21:42 +00:00
</ListItem>
</Grid>
2022-01-14 17:35:27 +00:00
<Grid item xs={1}>
2022-01-14 17:35:27 +00:00
<ListItem className="bottomItem">
<ListItemIcon size="small">
<PercentIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.fee*100}
secondary="Trade Fee" />
2022-01-14 17:35:27 +00:00
</ListItem>
</Grid>
2022-01-14 16:21:42 +00:00
<Grid container item xs={1}>
<Grid item xs={6}>
2022-01-14 16:21:42 +00:00
<Select
size = 'small'
defaultValue={1}
inputProps={{
style: {textAlign:"center"}
}}>
<MenuItem value={1}>EN</MenuItem>
</Select>
</Grid>
<Grid item xs={3}>
2022-01-15 10:21:36 +00:00
<IconButton
color="primary"
aria-label="Community"
2022-01-15 10:21:36 +00:00
onClick={this.handleClickOpenCommunity} >
<PeopleIcon />
2022-01-14 16:21:42 +00:00
</IconButton>
</Grid>
<Grid item xs={3}>
<IconButton color="primary"
aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon />
</IconButton>
</Grid>
2022-01-14 17:35:27 +00:00
2022-01-14 16:21:42 +00:00
</Grid>
</Grid>
</Paper>
2022-01-28 14:30:45 +00:00
)
}
handleClickOpenExchangeSummary = () => {
this.getInfo();
2022-01-28 14:30:45 +00:00
this.setState({openExchangeSummary: true});
};
handleClickCloseExchangeSummary = () => {
this.setState({openExchangeSummary: false});
};
exchangeSummaryDialogPhone =() =>{
2022-01-28 14:30:45 +00:00
return(
<Dialog
open={this.state.openExchangeSummary}
onClose={this.handleClickCloseExchangeSummary}
aria-labelledby="exchange-summary-title"
aria-describedby="exchange-summary-description"
>
<DialogContent>
<Typography component="h5" variant="h5">Exchange Summary</Typography>
<List dense>
<ListItem >
<ListItemIcon size="small">
<InventoryIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_buy_orders}
secondary="Public buy orders" />
</ListItem>
<Divider/>
<ListItem >
<ListItemIcon size="small">
<SellIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_public_sell_orders}
secondary="Public sell orders" />
</ListItem>
<Divider/>
<ListItem >
<ListItemIcon size="small">
<SmartToyIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.active_robots_today}
secondary="Today active robots" />
</ListItem>
<Divider/>
<ListItem >
<ListItemIcon size="small">
<PriceChangeIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.today_avg_nonkyc_btc_premium+"%"}
secondary="Today non-KYC average premium" />
</ListItem>
<Divider/>
<ListItem >
<ListItemIcon size="small">
<PercentIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.fee*100+"%"}
secondary="Trading fee" />
</ListItem>
</List>
</DialogContent>
</Dialog>
)
}
bottomBarPhone =()=>{
return(
<Paper elevation={6} style={{height:40}}>
<this.StatsDialog/>
<this.CommunityDialog/>
<this.exchangeSummaryDialogPhone/>
<this.dialogProfile/>
2022-01-28 14:30:45 +00:00
<Grid container xs={12}>
<Grid item xs={1.6}>
<IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, top: -13, }} >
<Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "1": null} color="primary">
<Avatar className='flippedSmallAvatar'
alt={this.props.nickname}
src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
/>
</Badge>
</IconButton>
2022-01-28 14:30:45 +00:00
</Grid>
<Grid item xs={1.6} align="center">
2022-01-28 14:30:45 +00:00
<IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.num_public_buy_orders} color="action">
<InventoryIcon />
</Badge>
</IconButton>
</Grid>
<Grid item xs={1.6} align="center">
2022-01-28 14:30:45 +00:00
<IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.num_public_sell_orders} color="action">
<SellIcon />
</Badge>
</IconButton>
</Grid>
<Grid item xs={1.6} align="center">
2022-01-28 14:30:45 +00:00
<IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.active_robots_today} color="action">
<SmartToyIcon />
</Badge>
</IconButton>
</Grid>
<Grid item xs={1.8} align="center">
2022-01-28 14:30:45 +00:00
<IconButton onClick={this.handleClickOpenExchangeSummary} >
<Badge badgeContent={this.state.today_avg_nonkyc_btc_premium+"%"} color="action">
<PriceChangeIcon />
</Badge>
</IconButton>
</Grid>
<Grid container item xs={3.8}>
<Grid item xs={6}>
2022-01-28 14:30:45 +00:00
<Select
size = 'small'
defaultValue={1}
inputProps={{
style: {textAlign:"center"}
}}>
<MenuItem value={1}>EN</MenuItem>
</Select>
</Grid>
<Grid item xs={3}>
<IconButton color="primary"
aria-label="Stats for Nerds"
onClick={this.handleClickOpenStatsForNerds} >
<SettingsIcon />
</IconButton>
</Grid>
<Grid item xs={3}>
2022-01-28 14:30:45 +00:00
<IconButton
color="primary"
aria-label="Community"
2022-01-28 14:30:45 +00:00
onClick={this.handleClickOpenCommunity} >
<PeopleIcon />
</IconButton>
</Grid>
</Grid>
</Grid>
</Paper>
)
}
render() {
return (
<div>
<MediaQuery minWidth={1200}>
<this.bottomBarDesktop/>
</MediaQuery>
<MediaQuery maxWidth={1199}>
<this.bottomBarPhone/>
</MediaQuery>
</div>
2022-01-14 16:21:42 +00:00
)
}
}