Add community pop up

frontend/src/components/BottomBar.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react'
-import {Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, Divider, Dialog, DialogContent} from "@mui/material";
+import {Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 
 // Icons
 import SettingsIcon from '@mui/icons-material/Settings';
-import SupportAgentIcon from '@mui/icons-material/SupportAgent';
+import PeopleIcon from '@mui/icons-material/People';
 import InventoryIcon from '@mui/icons-material/Inventory';
 import SellIcon from '@mui/icons-material/Sell';
 import SmartToyIcon from '@mui/icons-material/SmartToy';
@@ -12,12 +12,14 @@ 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';
+import SendIcon from '@mui/icons-material/Send';
 
 export default class BottomBar extends Component {
     constructor(props) {
         super(props);
         this.state = {
             openStatsForNerds: false,
+            openCommuniy: false,
             num_public_buy_orders: null,
             num_active_robotsats: null,
             num_public_sell_orders: null,
@@ -42,11 +44,10 @@ export default class BottomBar extends Component {
       }
 
     handleClickOpenStatsForNerds = () => {
-    this.setState({openStatsForNerds: true});
+        this.setState({openStatsForNerds: true});
     };
-
     handleClickCloseStatsForNerds = () => {
-    this.setState({openStatsForNerds: false});
+        this.setState({openStatsForNerds: false});
     };
 
     StatsDialog =() =>{
@@ -85,10 +86,66 @@ export default class BottomBar extends Component {
     )
     }
 
+    handleClickOpenCommunity = () => {
+        this.setState({openCommuniy: true});
+    };
+    handleClickCloseCommunity = () => {
+        this.setState({openCommuniy: false});
+    };
+
+    CommunityDialog =() =>{
+        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.
+                    For questions and hanging out with other robots
+                    join the Telegram Groups. If you find a bug
+                    or want to see new features, use the Github
+                    Issues page.
+                </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>
+    )
+    }
+
+
     render() {
         return (
             <Paper elevation={6} style={{height:40}}>
                 <this.StatsDialog/>
+                <this.CommunityDialog/>
                 <Grid container xs={12}>
 
                     <Grid item xs={1}>
@@ -177,8 +234,11 @@ export default class BottomBar extends Component {
                             </Select>
                         </Grid>
                         <Grid item xs={4}>
-                            <IconButton color="primary" aria-label="Telegram" onClick={this.handleClickSuppport}>
-                                <SupportAgentIcon />
+                            <IconButton 
+                            color="primary" 
+                            aria-label="Telegram" 
+                            onClick={this.handleClickOpenCommunity} >
+                                <PeopleIcon />
                             </IconButton>
                         </Grid>
 

frontend/src/components/InfoDialog.js

@@ -19,11 +19,11 @@ export default class InfoDialog extends Component {
           
           <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. 
+            <p>AdequateAlice01 wants to sell bitcoin. 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 
+              hold invoice. <i>RoboSats</i> 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>
@@ -43,7 +43,7 @@ export default class InfoDialog extends Component {
 
           <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
+            <p>Maximum single trade size is 500,000 Satoshis to minimize lightning
               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>
@@ -94,8 +94,8 @@ export default class InfoDialog extends Component {
             <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.
+              in the window between the buyer confirms FIAT SENT and the moment the
+              seller releases the satoshis, the fund could be lost.
             </p>
           </Typography>