diff --git a/api/views.py b/api/views.py
index b41826d8..404615da 100644
--- a/api/views.py
+++ b/api/views.py
@@ -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
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 6ac372c9..6cf5659a 100644
--- a/frontend/src/components/App.js
+++ b/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 (
-
-
-
+ <>
+
+
+
+
+
+
+ >
);
}
}
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
new file mode 100644
index 00000000..2d6bf033
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
diff --git a/frontend/static/assets/info.md b/frontend/static/assets/info.md
index a5f43bab..82e59f0c 100644
--- a/frontend/static/assets/info.md
+++ b/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?
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index def12e47..096f9b29 100644
--- a/frontend/static/css/index.css
+++ b/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%;