Add Info and Stats for nerds popups

api/utils.py

@@ -15,7 +15,6 @@ def get_exchange_rate(currency):
     exchange_rates = []
 
     for api_url in APIS:
-        print(api_url)
         try:
             if 'blockchain.info' in api_url:
                 blockchain_prices = requests.get(api_url).json()

frontend/src/components/BottomBar.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Paper, Grid, IconButton, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon} from "@mui/material";
+import {Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, Divider, Dialog, DialogContent} from "@mui/material";
 
 // Icons
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -9,11 +9,15 @@ import SellIcon from '@mui/icons-material/Sell';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import PercentIcon from '@mui/icons-material/Percent';
 import PriceChangeIcon from '@mui/icons-material/PriceChange';
+import BoltIcon from '@mui/icons-material/Bolt';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import EqualizerIcon from '@mui/icons-material/Equalizer';
 
 export default class BottomBar extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            openStatsForNerds: false,
             num_public_buy_orders: null,
             num_active_robotsats: null,
             num_public_sell_orders: null,
@@ -37,13 +41,60 @@ export default class BottomBar extends Component {
           });
       }
 
+    handleClickOpenStatsForNerds = () => {
+    this.setState({openStatsForNerds: true});
+    };
+
+    handleClickCloseStatsForNerds = () => {
+    this.setState({openStatsForNerds: false});
+    };
+
+    StatsDialog =() =>{
+    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>
+                <Divider/>
+                <ListItem>
+                    <ListItemIcon><BoltIcon/></ListItemIcon>
+                    <ListItemText primary={this.state.lnd_version} secondary="LND version"/>
+                </ListItem>
+                <Divider/>
+                <ListItem>
+                    <ListItemIcon><GitHubIcon/></ListItemIcon>
+                    <ListItemText secondary="Currently running commit height">
+                        <a href={"https://github.com/Reckless-Satoshi/robosats/tree/" 
+                        + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash}
+                        </a>
+                    </ListItemText>
+                </ListItem>
+                <Divider/>
+                <ListItem>
+                    <ListItemIcon><EqualizerIcon/></ListItemIcon>
+                    <ListItemText primary={this.state.today_volume} secondary="Today traded volume"/>
+                </ListItem>
+            </List>
+            </DialogContent>
+        </Dialog>
+    )
+    }
+
     render() {
         return (
             <Paper elevation={6} style={{height:40}}>
+                <this.StatsDialog/>
                 <Grid container xs={12}>
 
                     <Grid item xs={1}>
-                        <IconButton color="primary" aria-label="Stats for Nerds" component="span">
+                        <IconButton color="primary" 
+                            aria-label="Stats for Nerds" 
+                            onClick={this.handleClickOpenStatsForNerds} >
                             <SettingsIcon />
                         </IconButton>
                     </Grid>

frontend/src/components/HomePage.js

@@ -5,7 +5,7 @@ import UserGenPage from "./UserGenPage";
 import MakerPage from "./MakerPage";
 import BookPage from "./BookPage";
 import OrderPage from "./OrderPage";
-import InfoPage from "./InfoPage";
+import InfoPage from "./InfoPageMd";
 
 export default class HomePage extends Component {
     constructor(props) {

frontend/src/components/InfoDialog.js

@@ -0,0 +1,126 @@
+
+import {Typography, DialogTitle,  DialogContent, DialogContentText, Button } from "@mui/material"
+import React, { Component } from 'react'
+
+export default class InfoDialog extends Component {
+  render() {
+    return (
+      <div>
+        <DialogContent>
+          <Typography component="h5" variant="h5">What is <i>RoboSats</i>?</Typography>
+          <Typography component="body2" variant="body2">
+            <p>It is a BTC/FIAT peer-to-peer exchange over lightning. It simplifies 
+              matchmaking and minimizes the trust needed to trade with a peer.</p>
+            
+            <p>RoboSats is an open source project <a 
+              href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
+            </p>
+          </Typography>
+          
+          <Typography component="h5" variant="h5">How does it work?</Typography>
+          <Typography component="body2" variant="body2">
+            <p>AdequateAlice01 wants to sell bitcoin, so she posts a sell order. 
+              BafflingBob02 wants to buy bitcoin and he takes Alice's order. 
+              Both have to post a small bond using lightning to prove they are real 
+              robots. Then, Alice posts the trade collateral also using a lightning 
+              hold invoice. RobotSats locks the invoice until Bob confirms he sent 
+              the fiat to Alice. Once Alice confirms she received the fiat, she 
+              tells <i>RoboSats</i> to release the satoshis to Bob. Enjoy your satoshis, 
+              Bob!</p>
+
+            <p>At no point, AdequateAlice01 and BafflingBob02 have to trust the 
+              bitcoin to each other. In case they have a conflict, <i>RoboSats</i> staff 
+              will help resolving the dispute.</p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">What payment methods are accepted?</Typography>
+          <Typography component="body2" variant="body2">
+            <p>Basically all of them. You can write down your preferred payment 
+              method(s). You will have to match with a peer who also accepts 
+              that method. Lightning is fast, so we highly recommend using instant 
+              fiat payment rails. </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">Are there trade limits?</Typography>
+          <Typography component="body2" variant="body2">
+            <p>Maximum single trade size is 500,000 Satoshis to minimize lightninh
+              routing failures. This limit will be raised as the Lightning Network 
+              matures. There is no limits to the number of trades per day
+              or number of simultaneous Robots you can use. </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">Is <i>RoboSats</i> private?</Typography>
+          <Typography component="body2" variant="body2">
+            <p> RoboSats will never ask you for your name, country or ID. For 
+              best anonymity use Tor Browser and access the .onion hidden service. </p>
+
+            <p>Your trading peer is the only one who can potentially guess 
+              anything about you. Keep your chat short and concise. Avoid 
+              providing non-essential information other than strictly necessary 
+              for the fiat payment. </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">What are the risks?</Typography>
+          <Typography component="body2" variant="body2">
+            <p> This is an experimental application, things could go wrong. 
+              Trade small amounts!  </p>
+
+            <p>The seller faces the same chargeback risk as with any 
+              other peer-to-peer service. Paypal or credit cards are 
+              not adviced.</p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">What is the trust model?</Typography>
+          <Typography component="body2" variant="body2">
+            <p> The buyer and the seller never have to trust each other. 
+              Some trust on <i>RoboSats</i> staff is needed since linking 
+              the seller's hold invoice and buyer payment is not atomic. 
+              In addition, disputes are solved by the <i>RoboSats</i> staff.
+            </p> 
+
+            <p> While trust requirements are minimized, <i>RoboSats</i> could 
+              run away with your satoshis. It could be argued that it is not 
+              worth it, as it would instantly destroy <i>RoboSats</i> reputation. 
+              However, you should hesitate and only trade small quantities at a 
+              time. For large amounts use an onchain escrow service such as <i>Bisq</i>
+            </p> 
+
+            <p> You can build more trust on <i>RoboSats</i> by <a href='https://github.com/reckless-satoshi/robosats'>
+              inspecting the source code </a> </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">What happens if <i>RoboSats</i> suddently disapears?</Typography>
+          <Typography component="body2" variant="body2">
+            <p> Your sats will most likely return to you. Any hold invoice that is not 
+              settled would be automatically returned even if <i>RoboSats</i> goes down 
+              forever. This is true for both, locked bonds and trading escrows. However, 
+              in the window between the buyer confirms FIAT SENT and the moment the moment
+              the seller releases the satoshis, the fund could be lost.
+            </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">It <i>RoboSats</i> legal in my country?</Typography>
+          <Typography component="body2" variant="body2">
+            <p> In many countries using <i>RoboSats</i> is no different than using Ebay 
+              or Craiglist. Your regulation may vary. It is your responsibility
+              to comply.
+            </p>
+          </Typography>
+
+          <Typography component="h5" variant="h5">Disclaimer</Typography>
+          <Typography component="body2" variant="body2">
+            <p> This lightning application is provided as is. It is in active 
+              development: trade with the utmost caution. There is no private 
+              support. Support is only offered via public channels <a href='https://t.me/robosats'>
+              (Telegram)</a>. <i>RoboSats</i> will never contact you.
+              <i>RoboSats</i> will definitely never ask for your user token.
+            </p>
+          </Typography>
+
+      
+        </DialogContent>
+
+      </div>
+    )
+  }
+}

frontend/src/components/InfoPageMd.js

@@ -28,9 +28,6 @@ export default class InfoPage extends Component {
                 <ReactMarkdown children={this.state.info} />
             </Paper>
             <Grid item xs={12} align="center">
-              <Button color="secondary" variant="contained" to="/" component={Link}>
-                  Back
-              </Button>
           </Grid>
           </Grid>
         )

frontend/src/components/UserGenPage.js

@@ -1,7 +1,8 @@
 import React, { Component } from "react";
-import { Button , Grid, Typography, TextField, ButtonGroup} from "@mui/material"
+import { Button , Dialog, Grid, Typography, TextField, ButtonGroup} from "@mui/material"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
+import InfoDialog from './InfoDialog'
 
 function getCookie(name) {
   let cookieValue = null;
@@ -25,6 +26,7 @@ export default class UserGenPage extends Component {
     super(props);
     this.state = {
       token: this.genBase62Token(34),
+      openInfo: false,
     };
     this.getGeneratedUser(this.state.token);
   }
@@ -65,16 +67,11 @@ export default class UserGenPage extends Component {
       .then((data) => console.log(data));
   }
 
-  // Fix next two handler functions so they work sequentially
-  // at the moment they make the request generate a new user in parallel
-  // to updating the token in the state. So the it works a bit weird.
-
   handleAnotherButtonPressed=(e)=>{
     this.delGeneratedUser()
     this.setState({
       token: this.genBase62Token(34),
     })
-    this.reload_for_csrf_to_work();
   }
 
   handleChangeToken=(e)=>{
@@ -85,11 +82,29 @@ export default class UserGenPage extends Component {
     this.getGeneratedUser(e.target.value);
   }
 
-  // TO FIX CSRF TOKEN IS NOT UPDATED UNTIL WINDOW IS RELOADED
+  handleClickOpenInfo = () => {
-  reload_for_csrf_to_work=()=>{
+    this.setState({openInfo: true});
-    window.location.reload()
+  };
+
+  handleCloseInfo = () => {
+    this.setState({openInfo: false});
+  };
+
+  InfoDialog =() =>{
+    return(
+      <Dialog
+        open={this.state.openInfo}
+        onClose={this.handleCloseInfo}
+        aria-labelledby="info-dialog-title"
+        aria-describedby="info-dialog-description"
+        scroll="paper"
+      >
+        <InfoDialog/>
+      </Dialog>
+    )
   }
 
+
   render() {
     return (
       <Grid container spacing={1}>
@@ -137,7 +152,8 @@ export default class UserGenPage extends Component {
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
               <Button color='primary' to='/make/' component={Link}>Make Order</Button>
-              <Button color='inherit' to='/info' component={Link}>INFO</Button>
+              <Button color='inherit' onClick={this.handleClickOpenInfo}>Info</Button>
+              <this.InfoDialog/>
               <Button color='secondary' to='/book/' component={Link}>View Book</Button>
             </ButtonGroup>
           </Grid>