Add dark mode, text input for amount range, basic/advance tabs

frontend/src/components/App.js

@@ -1,9 +1,13 @@
 import React, { Component } from "react";
 import { render } from "react-dom";
 import HomePage from "./HomePage";
+import { CssBaseline, IconButton} from "@mui/material";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import UnsafeAlert from "./UnsafeAlert";
 
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+import LightModeIcon from '@mui/icons-material/LightMode';
+
 export default class App extends Component {
   constructor(props) {
     super(props);
@@ -25,7 +29,7 @@ export default class App extends Component {
     palette: {
       mode: 'dark',
       background: {
-        default: "#222222"
+        default: "#070707"
       },
     },
   });
@@ -33,6 +37,10 @@ export default class App extends Component {
   render() {
     return (
       <ThemeProvider theme={this.state.dark ? this.darkTheme : this.lightTheme}>
+        <CssBaseline/>
+        <IconButton sx={{position:'fixed',right:'0px'}} onClick={()=>this.setState({dark:!this.state.dark})}>
+          {this.state.dark ? <LightModeIcon/>:<DarkModeIcon/>}
+        </IconButton>
         <UnsafeAlert className="unsafeAlert"/>
         <HomePage setAppState={this.setAppState}/>
       </ThemeProvider>

frontend/src/components/BottomBar.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
-import {FormControlLabel, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
+import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
 import MediaQuery from 'react-responsive'
-import { Link } from 'react-router-dom'
+import { Link as LinkRouter } from 'react-router-dom'
 
 // Icons
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -90,8 +90,8 @@ export default class BottomBar extends Component {
         this.setState(null)
         fetch('/api/info/')
           .then((response) => response.json())
-          .then((data) => this.setState(data) &
+          .then((data) => this.setState(data) & this.setState({active_order_id: data.active_order_id ? data.active_order_id : null})
-          this.props.setAppState({nickname:data.nickname, loading:false}));
+          & this.props.setAppState({nickname:data.nickname, loading:false}));
       }
 
     handleClickOpenStatsForNerds = () => {
@@ -125,18 +125,18 @@ export default class BottomBar extends Component {
                 <ListItem>
                     <ListItemIcon><DnsIcon/></ListItemIcon>
                     <ListItemText secondary={this.state.node_alias}>
-                         <a target="_blank" href={"https://1ml.com/testnet/node/" 
+                         <Link target="_blank" href={"https://1ml.com/testnet/node/" 
                         + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
-                        </a>
+                        </Link>
                     </ListItemText>
                 </ListItem>
                 :
                 <ListItem>
                     <ListItemIcon><AmbossIcon/></ListItemIcon>
                     <ListItemText secondary={this.state.node_alias}>
-                            <a target="_blank" href={"https://amboss.space/node/" 
+                            <Link target="_blank" href={"https://amboss.space/node/" 
                         + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
-                        </a>
+                        </Link>
                     </ListItemText>
                 </ListItem>
                 }
@@ -145,8 +145,8 @@ export default class BottomBar extends Component {
                 <ListItem>
                     <ListItemIcon><WebIcon/></ListItemIcon>
                     <ListItemText secondary={this.state.alternative_name}>
-                        <a target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
+                        <Link target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
-                        </a>
+                        </Link>
                     </ListItemText>
                 </ListItem>
 
@@ -154,9 +154,9 @@ export default class BottomBar extends Component {
                 <ListItem>
                     <ListItemIcon><GitHubIcon/></ListItemIcon>
                     <ListItemText secondary="Currently running commit hash">
-                        <a target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/" 
+                        <Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/" 
                         + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
-                        </a>
+                        </Link>
                     </ListItemText>
                 </ListItem>
 
@@ -305,8 +305,7 @@ export default class BottomBar extends Component {
 
                 <Divider/>
                 {this.state.active_order_id ? 
-                // TODO Link to router and do this.props.history.push
+                <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
-                <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={Link}>
                     <ListItemIcon>
                         <Badge badgeContent="" color="primary"> 
                             <NumbersIcon color="primary"/>

frontend/src/components/Chat.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {Button, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
+import {Button, Link, Badge, TextField, Grid, Container, Card, CardHeader, Paper, Avatar, FormHelperText, Typography} from "@mui/material";
 import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export default class Chat extends Component {
@@ -160,7 +160,7 @@ export default class Chat extends Component {
               </Grid>
             </form>
             <FormHelperText>
-              The chat has no memory: if you leave, messages are lost. <a target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> Learn easy PGP encryption.</a>
+              The chat has no memory: if you leave, messages are lost. <Link target="_blank" href="https://github.com/Reckless-Satoshi/robosats/blob/main/docs/sensitive-data-PGP-guide.md/"> Learn easy PGP encryption.</Link>
             </FormHelperText>
       </Container>
     )

frontend/src/components/InfoDialog.js

@@ -1,5 +1,5 @@
 
-import {Typography, DialogActions,  DialogContent, Button, Grid} from "@mui/material"
+import {Typography, Link, DialogActions,  DialogContent, Button, Grid} from "@mui/material"
 import React, { Component } from 'react'
 import Image from 'material-ui-image'
 import MediaQuery from 'react-responsive'
@@ -18,8 +18,8 @@ export default class InfoDialog extends Component {
                 <p>It is a BTC/FIAT peer-to-peer exchange over lightning. <br/> It simplifies 
                   matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.</p>
                 
-                <p>RoboSats is an open source project <a 
+                <p>RoboSats is an open source project <Link 
-                  href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
+                  href='https://github.com/reckless-satoshi/robosats'>(GitHub).</Link>
                 </p>
               </Typography>
             </Grid>
@@ -43,8 +43,8 @@ export default class InfoDialog extends Component {
                 width='100%'
                 src={window.location.origin +'/static/assets/images/robosats_0.1.0_banner.png'}
               />
-            <p>RoboSats is an open source project <a 
+            <p>RoboSats is an open source project <Link 
-              href='https://github.com/reckless-satoshi/robosats'>(GitHub).</a>
+              href='https://github.com/reckless-satoshi/robosats'>(GitHub).</Link>
             </p>
           </Typography>
           </MediaQuery>
@@ -62,8 +62,8 @@ export default class InfoDialog extends Component {
             <p>At no point, AnonymousAlice01 and BafflingBob02 have to trust the 
               bitcoin funds to each other. In case they have a conflict, <i>RoboSats</i> staff 
               will help resolving the dispute. You can find a step-by-step 
-              description of the trade pipeline in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</a>
+              description of the trade pipeline in <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>How it works</Link>
-              You can also check the full guide in <a href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>How to use</a></p>
+              You can also check the full guide in <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/docs/how-to-use.md'>How to use</Link></p>
           </Typography>
 
           <Typography component="h5" variant="h5">What payment methods are accepted?</Typography>
@@ -120,8 +120,8 @@ export default class InfoDialog extends Component {
               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'>
+            <p> You can build more trust on <i>RoboSats</i> by <Link href='https://github.com/reckless-satoshi/robosats'>
-              inspecting the source code. </a> </p>
+              inspecting the source code. </Link> </p>
           </Typography>
 
           <Typography component="h5" variant="h5">What happens if <i>RoboSats</i> suddenly disappears?</Typography>
@@ -149,8 +149,8 @@ export default class InfoDialog extends Component {
           <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'>
+              support. Support is only offered via public channels <Link href='https://t.me/robosats'>
-              (Telegram)</a>. <i>RoboSats</i> will never contact you. <i>
+              (Telegram)</Link>. <i>RoboSats</i> will never contact you. <i>
               RoboSats</i> will definitely never ask for your robot token.
             </p>
           </Typography>

frontend/src/components/MakerPage.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { LinearProgress, Checkbox, Slider, SliderThumb, Switch, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
+import { LinearProgress, Link, Checkbox, Slider, Box, Tab, Tabs, SliderThumb, Tooltip, Paper, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup} from "@mui/material"
 import { LocalizationProvider, TimePicker}  from '@mui/lab';
 import DateFnsUtils from "@date-io/date-fns";
-import { Link } from 'react-router-dom'
+import { Link as LinkRouter } from 'react-router-dom'
 import { styled } from '@mui/material/styles';
 import getFlags from './getFlags'
 
@@ -79,10 +79,17 @@ export default class MakerPage extends Component {
           limits:data, 
           loadingLimits:false,
           minAmount: parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)), 
-          maxAmount: parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
+          maxAmount: this.state.amount ? this.state.amount : parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
         }));
   }
 
+  a11yProps(index) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
   handleTypeChange=(e)=>{
       this.setState({
           type: e.target.value,     
@@ -105,6 +112,16 @@ export default class MakerPage extends Component {
             amount: e.target.value,     
         });
     }
+    handleMinAmountChange=(e)=>{
+        this.setState({
+            minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),     
+        });
+    }
+    handleMaxAmountChange=(e)=>{
+        this.setState({
+            maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),  
+        });
+    }
 
     handleRangeAmountChange = (e, newValue, activeThumb) => {
         var maxAmount = this.getMaxAmount();
@@ -136,8 +153,8 @@ export default class MakerPage extends Component {
         }
         
         this.setState({
-            minAmount: parseFloat(Number(lowerValue).toPrecision(2)),
+            minAmount: parseFloat(Number(lowerValue).toPrecision(lowerValue < 100 ? 2 : 3)),
-            maxAmount: parseFloat(Number(upperValue).toPrecision(2)),
+            maxAmount: parseFloat(Number(upperValue).toPrecision(upperValue < 100 ? 2 : 3)),
         });
     }
 
@@ -235,7 +252,7 @@ export default class MakerPage extends Component {
 
     StandardMakerOptions = () => {
         return(
-            <Paper elevation={12} style={{ padding: 8, width:240, align:'center'}}>
+            <Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
             <Grid item xs={12} align="center" spacing={1}>
                 <FormControl component="fieldset">
                     <FormHelperText>
@@ -257,6 +274,7 @@ export default class MakerPage extends Component {
                     </RadioGroup>
                 </FormControl>
             </Grid>
+            
             <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
                     <div style={{maxWidth:140}}>
                     <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title="Amount of fiat to exchange for bitcoin">
@@ -461,9 +479,36 @@ export default class MakerPage extends Component {
         );
     }
 
+    rangeText =()=> {
+        return (
+            <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                <span style={{width: 40}}>From</span>
+                <TextField
+                    variant="standard"
+                    size="small"
+                    value={this.state.minAmount}
+                    onChange={this.handleMinAmountChange}
+                    error={this.state.minAmount < this.getMinAmount()}
+                    sx={{width: this.state.minAmount.toString().length * 10, maxWidth: 40}}
+                  />
+                <span style={{width: 20}}>to</span>
+                <TextField
+                    variant="standard"
+                    size="small"
+                    value={this.state.maxAmount}
+                    error={this.state.maxAmount > this.getMaxAmount()}
+                    onChange={this.handleMaxAmountChange}
+                    sx={{width: this.state.maxAmount.toString().length * 10, maxWidth: 50}}
+                  />
+                <span>{this.state.currencyCode}</span>
+            </div>
+            )
+
+      }
+
     AdvancedMakerOptions = () => {
         return(
-            <Paper elevation={12} style={{ padding: 8, width:250, align:'center'}}>
+            <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
             
             <Grid container xs={12}  spacing={1}>
 
@@ -473,8 +518,7 @@ export default class MakerPage extends Component {
                             <Tooltip enterTouchDelay="0" placement="top" align="center"title={"Let the taker chose an amount within the range"}>
                             <div align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
                                 <Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked}) & (e.target.checked ? this.getLimits() : null)}/>
-                                {this.state.enableAmountRange & this.state.minAmount != null? 
+                                {this.state.enableAmountRange & this.state.minAmount != null? <this.rangeText/> : "Enable Amount Range"}
-                                    "From "+this.state.minAmount+" to "+this.state.maxAmount +" "+this.state.currencyCode: "Enable Amount Range"}
                             </div>
                             </Tooltip>
                         </FormHelperText>
@@ -487,10 +531,10 @@ export default class MakerPage extends Component {
                                 sx={{width:200, align:"center"}}
                                 disabled={!this.state.enableAmountRange || this.state.loadingLimits}
                                 value={[this.state.minAmount, this.state.maxAmount]}
-                                step={(this.getMaxAmount()-this.getMinAmount())/100}
+                                step={(this.getMaxAmount()-this.getMinAmount())/5000}
                                 valueLabelDisplay="auto"
                                 components={{ Thumb: this.RangeThumbComponent }}
-                                valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(2))+" "+this.state.currencyCode)}
+                                valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)}
                                 marks={this.state.limits == null?
                                     null
                                     :
@@ -507,6 +551,7 @@ export default class MakerPage extends Component {
                 <Grid item xs={12} align="center" spacing={1}>
                     <LocalizationProvider dateAdapter={DateFnsUtils}>
                         <TimePicker
+                            sx={{width:210, align:"center"}}
                             ampm={false}
                             openTo="hours"
                             views={['hours', 'minutes']}
@@ -550,7 +595,7 @@ export default class MakerPage extends Component {
                 <Grid item xs={12} align="center" spacing={1}>
                     <Tooltip enterTouchDelay="0" title={"COMING SOON - High risk! Limited to "+ this.maxBondlessSats/1000 +"K Sats"}>
                         <FormControlLabel
-                            label={<a>Allow bondless taker (<a href="https://git.robosats.com" target="_blank">info</a>)</a>}
+                            label={<a>Allow bondless taker (<Link href="https://git.robosats.com" target="_blank">info</Link>)</a>}
                             control={
                                 <Checkbox
                                     disabled
@@ -567,30 +612,22 @@ export default class MakerPage extends Component {
             </Paper>
         )
     }
-  render() {
+
+    makeOrderBox=()=>{
+        const [value, setValue] = React.useState(this.state.showAdvanced);
+
+        const handleChange = (event, newValue) => {
+        this.setState({showAdvanced:newValue})
+        setValue(newValue);
+        };
         return(
-            <Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
+            <Box sx={{ width: this.state.showAdvanced? '275px':'252px'}}>
-                {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
+                    <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-                    <Typography component="h4" variant="h4">
+                    <Tabs value={value? value:0} onChange={handleChange} variant="fullWidth" >
-                        ORDER MAKER
+                        <Tab label="Basic" {...this.a11yProps(0)} />
-                    </Typography>
+                        <Tab label="Advanced" {...this.a11yProps(1)} />
-                </Grid> */}
+                    </Tabs>
-                <Grid item xs={12} align="center">
+                    </Box>
-                    <div className="advancedSwitch">
-                    {/* <Tooltip enterTouchDelay="0" title="Coming soon"> */}
-                        <FormControlLabel
-                            size="small"
-                            disableTypography={true}
-                            label={<Typography variant="body2">Advanced</Typography>} 
-                            labelPlacement="start" control={
-                            <Switch
-                                size="small"
-                                checked={this.state.showAdvanced} 
-                                onChange={()=> this.setState({showAdvanced: !this.state.showAdvanced})}/>}
-                        />
-                    {/* </Tooltip> */}
-                    </div>
-                </Grid>
                             
                     <Grid item xs={12} align="center" spacing={1}>
                         <div style={{ display: this.state.showAdvanced == false ? '':'none'}}>
@@ -600,10 +637,25 @@ export default class MakerPage extends Component {
                             <this.AdvancedMakerOptions/>
                         </div>
                     </Grid>
+                </Box>
+        )
+    }
+  render() {
+
+    return (
+            <Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
+                {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
+                    <Typography component="h4" variant="h4">
+                        ORDER MAKER
+                    </Typography>
+                </Grid> */}
+                <Grid item xs={12} align="center">
+                <this.makeOrderBox/>
+                </Grid>
 
             <Grid item xs={12} align="center">
                 {/* conditions to disable the make button */}
-                {(this.state.amount == null & (this.state.enableAmountRange == false & this.state.minAmount != null) || 
+                {(this.state.amount == null & (this.state.enableAmountRange == false & this.state.minAmount == null) || 
                     this.state.amount <= 0 & !this.state.enableAmountRange || 
                     (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || 
                     (!this.state.is_explicit & this.state.badPremium != null))
@@ -634,7 +686,7 @@ export default class MakerPage extends Component {
                     </div>
                 </Typography>
                 <Grid item xs={12} align="center">
-                    <Button color="secondary" variant="contained" to="/" component={Link}>
+                    <Button color="secondary" variant="contained" to="/" component={LinkRouter}>
                         Back
                     </Button>
                 </Grid>

frontend/src/components/OrderPage.js

@@ -131,7 +131,7 @@ export default class OrderPage extends Component {
     return (<span> The order has expired</span>);
 
   } else {
-    var col = 'black'
+    var col = 'inherit'
     var fraction_left = (total/1000) / this.state.total_secs_exp
     // Make orange at 25% of time left
     if (fraction_left < 0.25){col = 'orange'}

frontend/src/components/TradeBox.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { IconButton, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
+import { IconButton, Link, Paper, Rating, Button, Tooltip, CircularProgress, Grid, Typography, TextField, List, ListItem, ListItemText, Divider, ListItemIcon, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import QRCode from "react-qr-code";
 import Countdown, { zeroPad} from 'react-countdown';
 import Chat from "./Chat"
@@ -910,7 +910,7 @@ handleRatingRobosatsChange=(e)=>{
           <Typography component="body2" variant="body2" align="center">
             <p><b>Thank you for using Robosats!</b></p> 
             <p>Let us know how the platform could improve
-            (<a href="https://t.me/robosats">Telegram</a> / <a href="https://github.com/Reckless-Satoshi/robosats/issues">Github</a>)</p>
+            (<Link href="https://t.me/robosats">Telegram</Link> / <Link href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</p>
           </Typography>
         </Grid>
         : null}
@@ -970,8 +970,8 @@ handleRatingRobosatsChange=(e)=>{
           <Grid item xs={12} align="center">
             <Typography component="body2" variant="body2" align="center">
               Your invoice has expired or more than 3 payment attempts have been made. 
-              Muun wallet is not recommended, <a href="https://github.com/Reckless-Satoshi/robosats/issues/44">check the list of
+              Muun wallet is not recommended, <Link href="https://github.com/Reckless-Satoshi/robosats/issues/44">check the list of
-              compatible wallets</a>
+              compatible wallets</Link>
             </Typography>
           </Grid>
           <Grid item xs={12} align="center">

frontend/src/components/UnsafeAlert.js

@@ -1,5 +1,5 @@
 
-import {Paper, Alert, AlertTitle, Button, Grid, Typography} from "@mui/material"
+import {Paper, Alert, AlertTitle, Button, Link} from "@mui/material"
 import React, { Component } from 'react'
 import MediaQuery from 'react-responsive'
 
@@ -28,22 +28,22 @@ export default class UnsafeAlert extends Component {
       <div>
       <MediaQuery minWidth={800}>
         <Paper elevation={6} className="alertUnsafe">
-        <Alert severity="warning"  sx={{maxHeight:100}} 
+        <Alert severity="warning"  sx={{maxHeight:"100px"}} 
           action={<Button onClick={() => this.setState({show:false})}>Hide</Button>}
           >
           <AlertTitle>You are not using RoboSats privately</AlertTitle>
             Some features are disabled for your protection (e.g. chat) and you will not be able to complete a 
-            trade without them. To protect your privacy and fully enable RoboSats, use <a href='https://www.torproject.org/download/' target="_blank">Tor Browser</a> and visit the <a href='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</a> site.         
+            trade without them. To protect your privacy and fully enable RoboSats, use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link chref='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.         
         </Alert>
         </Paper>
       </MediaQuery>
 
       <MediaQuery maxWidth={799}>
         <Paper elevation={6} className="alertUnsafe">
-        <Alert severity="warning" sx={{maxHeight:100}}>
+        <Alert severity="warning" sx={{maxHeight:"120px"}}>
         <AlertTitle>You are not using RoboSats privately</AlertTitle>
           You will not be able to complete a 
-          trade. Use <a href='https://www.torproject.org/download/' target="_blank">Tor Browser</a> and visit the <a href='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</a> site.         
+          trade. Use <Link href='https://www.torproject.org/download/' target="_blank">Tor Browser</Link> and visit the <Link chref='http://robosats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion' target="_blank">Onion</Link> site.
         <div style={{width: '100%'}}>
         </div>
         <div align="center">

frontend/static/frontend/main.js.LICENSE.txt

@@ -242,6 +242,10 @@
   !*** ./node_modules/@mui/material/Grow/Grow.js ***!
   \*************************************************/
 
+/*!*************************************************!*\
+  !*** ./node_modules/@mui/material/Link/Link.js ***!
+  \*************************************************/
+
 /*!*************************************************!*\
   !*** ./node_modules/@mui/material/List/List.js ***!
   \*************************************************/
@@ -662,6 +666,10 @@
   !*** ./node_modules/webrtc-adapter/src/js/utils.js ***!
   \*****************************************************/
 
+/*!******************************************************!*\
+  !*** ./node_modules/@mui/icons-material/DarkMode.js ***!
+  \******************************************************/
+
 /*!******************************************************!*\
   !*** ./node_modules/@mui/icons-material/LockOpen.js ***!
   \******************************************************/
@@ -750,6 +758,10 @@
   !*** ./node_modules/@mui/icons-material/Inventory.js ***!
   \*******************************************************/
 
+/*!*******************************************************!*\
+  !*** ./node_modules/@mui/icons-material/LightMode.js ***!
+  \*******************************************************/
+
 /*!*******************************************************!*\
   !*** ./node_modules/@mui/icons-material/SwapCalls.js ***!
   \*******************************************************/
@@ -882,6 +894,10 @@
   !*** ./node_modules/@mui/material/Grid/gridClasses.js ***!
   \********************************************************/
 
+/*!********************************************************!*\
+  !*** ./node_modules/@mui/material/Link/linkClasses.js ***!
+  \********************************************************/
+
 /*!********************************************************!*\
   !*** ./node_modules/@mui/material/List/ListContext.js ***!
   \********************************************************/
@@ -1586,6 +1602,10 @@
   !*** ./node_modules/@mui/material/ButtonGroup/ButtonGroup.js ***!
   \***************************************************************/
 
+/*!***************************************************************!*\
+  !*** ./node_modules/@mui/material/CssBaseline/CssBaseline.js ***!
+  \***************************************************************/
+
 /*!***************************************************************!*\
   !*** ./node_modules/@mui/material/DialogTitle/DialogTitle.js ***!
   \***************************************************************/