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

Add bottom bar

Browse Source
This commit is contained in:
Reckless_Satoshi
2022-01-14 08:21:42 -08:00
parent ad58f66968
commit 4087bb9936
5 changed files with 143 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/views.py
View File

@ -438,8 +438,8 @@ class InfoView(ListAPIView):
avg_premium = sum(premiums) / len(premiums)
total_volume = sum(volumes)
else:
avg_premium = None
total_volume = None
avg_premium = 0
total_volume = 0
context['today_avg_nonkyc_btc_premium'] = avg_premium
context['today_total_volume'] = total_volume

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

@ -2,6 +2,7 @@ import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
import BottomBar from "./BottomBar";
export default class App extends Component {
constructor(props) {
@ -10,9 +11,14 @@ export default class App extends Component {
render() {
return (
<>
<div className='appCenter'>
<HomePage />
</div>
<div className='bottomBar'>
<BottomBar />
</div>
</>
);
}
}

119
frontend/src/components/BottomBar.js Normal file
View File

@ -0,0 +1,119 @@
import React, { Component } from 'react'
import {Paper, Grid, IconButton, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon} from "@mui/material";
// Icons
import SettingsIcon from '@mui/icons-material/Settings';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
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';
export default class BottomBar extends Component {
constructor(props) {
super(props);
this.state = {
num_public_buy_orders: 0,
num_active_robotsats: 0,
num_public_sell_orders: 0,
fee: 0,
today_avg_nonkyc_btc_premium: 0,
today_volume: 0,
};
this.getInfo();
}
handleClickSuppport = () => {
window.open("https://t.me/robosats");
};
getInfo() {
this.setState(null)
fetch('/api/info/')
.then((response) => response.json())
.then((data) => {console.log(data) &
this.setState(data)
});
}
render() {
return (
<Paper elevation={6} style={{height:40}}>
<Grid container xs={12}>
<Grid item xs={1}>
<IconButton color="primary" aria-label="Stats for Nerds" component="span">
<SettingsIcon />
</IconButton>
</Grid>
<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>
<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>
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
<SmartToyIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.num_active_robotsats}
secondary="Num Active RoboSats" />
</ListItem>
</Grid>
<Grid item xs={2}>
<ListItem className="bottomItem">
<ListItemIcon size="small">
<PercentIcon/>
</ListItemIcon>
<ListItemText
primaryTypographyProps={{fontSize: '14px'}}
secondaryTypographyProps={{fontSize: '12px'}}
primary={this.state.today_avg_nonkyc_btc_premium}
secondary="Today Avg Premium" />
</ListItem>
</Grid>
<Grid item xs={2}/>
<Grid container item xs={1}>
<Grid item xs={2}/>
<Grid item xs={6}>
<Select
size = 'small'
defaultValue={1}
inputProps={{
style: {textAlign:"center"}
}}>
<MenuItem value={1}>EN</MenuItem>
</Select>
</Grid>
<Grid item xs={4}>
<IconButton color="primary" aria-label="Telegram" onClick={this.handleClickSuppport}>
<SupportAgentIcon />
</IconButton>
</Grid>
</Grid>
</Grid>
</Paper>
)
}
}

2
frontend/static/assets/info.md
View File

@ -1,4 +1,4 @@
# Buy and sell non-KYC Bitcoin using the lightning network.
# Simple and Private P2P Bitcoin Exchanging in the Lightning Network.
## What is this?

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

@ -25,6 +25,18 @@ body {
transform: translate(-50%,-50%);
}
.bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
}
.bottomItem {
margin: 0;
top: -14px;
}
.newAvatar {
background-color:white;
border-radius: 50%;