Add bottom bar

api/views.py

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

frontend/src/components/App.js

@@ -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>
+      </>
     );
   }
 }

frontend/src/components/BottomBar.js

@@ -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>
+        )
+    }
+}

frontend/static/assets/info.md

@@ -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?
 

frontend/static/css/index.css

@@ -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%;