From 9af2e722be4511a7c3d328e482f18484b0906207 Mon Sep 17 00:00:00 2001
From: Reckless_Satoshi <reckless.satoshi@protonmail.com>
Date: Sun, 8 May 2022 08:43:08 -0700
Subject: [PATCH] Fix warnings, wip

---
 .../src/components/AutocompletePayments.js    |  11 +-
 frontend/src/components/BookPage.js           |  23 ++--
 frontend/src/components/BottomBar.js          |  14 +--
 .../src/components/CommunityDialog/index.ts   |   1 -
 .../CommunityDialog.tsx                       |   0
 .../{InfoDialog => Dialogs}/InfoDialog.tsx    |   0
 frontend/src/components/Dialogs/index.ts      |   2 +
 frontend/src/components/InfoDialog/index.ts   |   1 -
 frontend/src/components/MakerPage.js          |  77 ++++++------
 frontend/src/components/OrderPage.js          |  16 +--
 frontend/src/components/TradeBox.js           | 119 +++++++++---------
 frontend/src/components/UserGenPage.js        |   6 +-
 12 files changed, 134 insertions(+), 136 deletions(-)
 delete mode 100644 frontend/src/components/CommunityDialog/index.ts
 rename frontend/src/components/{CommunityDialog => Dialogs}/CommunityDialog.tsx (100%)
 rename frontend/src/components/{InfoDialog => Dialogs}/InfoDialog.tsx (100%)
 create mode 100644 frontend/src/components/Dialogs/index.ts
 delete mode 100644 frontend/src/components/InfoDialog/index.ts

diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js
index 0ac6a6c9..f2540cd7 100644
--- a/frontend/src/components/AutocompletePayments.js
+++ b/frontend/src/components/AutocompletePayments.js
@@ -2,15 +2,16 @@ import React, { useState } from "react";
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
 import { styled } from '@mui/material/styles';
-import PaymentIcon from './payment-methods/Icons'
-import {Button} from "@mui/material";
+import { Button}  from "@mui/material";
 import { paymentMethods, swapDestinations } from "./payment-methods/Methods";
 
+// Icons
 import DashboardCustomizeIcon from '@mui/icons-material/DashboardCustomize';
 import AddIcon from '@mui/icons-material/Add';
+import PaymentIcon from './payment-methods/Icons'
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
 
 const Root = styled('div')(
   ({ theme }) => `
@@ -191,7 +192,7 @@ const Listbox = styled('ul')(
 );
 
 export default function AutocompletePayments(props) {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const {
     getRootProps,
     getInputLabelProps,
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index ae3a284d..1c5f26ff 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { withTranslation, Trans} from "react-i18next";
+import { withTranslation } from "react-i18next";
 import { Badge, Tooltip, Stack, Paper, Button, FormControlLabel, Checkbox, RadioGroup, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, ListItemText, ListItemAvatar, IconButton, CircularProgress} from "@mui/material";
 import { Link } from 'react-router-dom'
 import { DataGrid } from '@mui/x-data-grid';
@@ -215,9 +215,9 @@ class BookPage extends Component {
                   <Badge overlap="circular" anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", left:"11px", top:"2px"}}> {params.row.type == t("Buyer") ? <SendReceiveIcon sx={{transform: "scaleX(-1)",height:"20px",width:"20px"}} color="secondary"/> : <SendReceiveIcon sx={{height:"20px",width:"20px"}} color="primary"/>}</div>}>
                     <div style={{ width: 45, height: 45 }}>
                       <Image className='bookAvatar'
-                          disableError='true'
-                          disableSpinner='true'
-                          color='null'
+                          disableError={true}
+                          disableSpinner={true}
+                          color={null}
                           alt={params.row.robot}
                           src={params.row.avatar}
                       />
@@ -311,6 +311,7 @@ class BookPage extends Component {
 
   NoOrdersFound=()=>{
     const { t } = this.props;
+
     return(
       <Grid item xs={12} align="center">
         <Grid item xs={12} align="center">
@@ -326,7 +327,7 @@ class BookPage extends Component {
         <Grid item>
           <Button size="large" variant="contained" color='primary' to='/make/' component={Link}>{t("Make Order")}</Button>
         </Grid>
-          <Typography color="primary" component="body1" variant="body1">
+          <Typography color="primary" variant="body1">
             {t("Be the first one to create an order")}
             <br/>
             <br/>
@@ -345,13 +346,13 @@ class BookPage extends Component {
 
           <Grid item xs={6} align="right">
             <FormControl align="center">
-              <FormHelperText align="center">
-                <div style={{position:"relative", left:"10px", textAlign:"center"}}>{t("I want to")} </div>
+              <FormHelperText align="center" sx={{position:"relative", left:"10px", textAlign:"center"}}>
+                {t("I want to")}
               </FormHelperText>
               <RadioGroup row>
                 <div style={{position:"relative", left:"20px"}}>
                   <FormControlLabel
-                      control={<Checkbox defaultChecked={true} icon={<BuySatsIcon sx={{width:"30px",height:"30px"}} color="inherit"/>} checkedIcon={<BuySatsCheckedIcon sx={{width:"30px",height:"30px"}} color="primary"/>}/>}
+                      control={<Checkbox icon={<BuySatsIcon sx={{width:"30px",height:"30px"}} color="inherit"/>} checkedIcon={<BuySatsCheckedIcon sx={{width:"30px",height:"30px"}} color="primary"/>}/>}
                       label={
                         <div style={{position:"relative",top:"-13px"}}>
                           {this.props.buyChecked ?
@@ -367,7 +368,7 @@ class BookPage extends Component {
                   />
                 </div>
                   <FormControlLabel
-                      control={<Checkbox defaultChecked={true} icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="inherit"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
+                      control={<Checkbox icon={<SellSatsIcon sx={{width:"30px",height:"30px"}} color="inherit"/>} checkedIcon={<SellSatsCheckedIcon sx={{width:"30px",height:"30px"}} color="secondary"/>}/>}
                       label={
                         <div style={{position:"relative",top:"-13px"}}>
                           {this.props.sellChecked ?
@@ -387,10 +388,8 @@ class BookPage extends Component {
 
           <Grid item xs={6} align="left">
             <FormControl align="center">
-              <FormHelperText align="center">
-                <div style={{textAlign:"center", position:"relative", left:"-5px"}}>
+              <FormHelperText align="center" sx={{textAlign:"center", position:"relative", left:"-5px"}}>
                   {this.props.bookType == 0 ? t("and receive") : (this.props.bookType == 1 ? t("and pay with") : t("and use") )}
-                </div>
               </FormHelperText>
               <Select
                   //autoWidth={true}
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 1eed0055..1b73540f 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -28,7 +28,7 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
-import CommunityDialog from './CommunityDialog';
+import { CommunityDialog } from './Dialogs';
 
 import { getCookie } from "../utils/cookies";
 import { pn } from "../utils/prettyNumbers";
@@ -409,12 +409,12 @@ bottomBarDesktop =()=>{
                                 <ListItemAvatar sx={{ width: 30, height: 30 }} >
                                     <Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
                                     <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
-                                    alt={this.props.nickname}
-                                    imgProps={{
-                                        onLoad:() => this.props.setAppState({avatarLoaded: true}),
-                                    }}
-                                    src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
-                                    />
+                                        alt={this.props.nickname}
+                                        imgProps={{
+                                            onLoad:() => this.props.setAppState({avatarLoaded: true}),
+                                        }}
+                                        src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
+                                        />
                                     </Badge>
                                 </ListItemAvatar>
                             </Tooltip>
diff --git a/frontend/src/components/CommunityDialog/index.ts b/frontend/src/components/CommunityDialog/index.ts
deleted file mode 100644
index 804be987..00000000
--- a/frontend/src/components/CommunityDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./CommunityDialog";
diff --git a/frontend/src/components/CommunityDialog/CommunityDialog.tsx b/frontend/src/components/Dialogs/CommunityDialog.tsx
similarity index 100%
rename from frontend/src/components/CommunityDialog/CommunityDialog.tsx
rename to frontend/src/components/Dialogs/CommunityDialog.tsx
diff --git a/frontend/src/components/InfoDialog/InfoDialog.tsx b/frontend/src/components/Dialogs/InfoDialog.tsx
similarity index 100%
rename from frontend/src/components/InfoDialog/InfoDialog.tsx
rename to frontend/src/components/Dialogs/InfoDialog.tsx
diff --git a/frontend/src/components/Dialogs/index.ts b/frontend/src/components/Dialogs/index.ts
new file mode 100644
index 00000000..db438bc6
--- /dev/null
+++ b/frontend/src/components/Dialogs/index.ts
@@ -0,0 +1,2 @@
+export { default as CommunityDialog } from "./CommunityDialog";
+export { default as InfoDialog } from "./InfoDialog";
diff --git a/frontend/src/components/InfoDialog/index.ts b/frontend/src/components/InfoDialog/index.ts
deleted file mode 100644
index 602c6933..00000000
--- a/frontend/src/components/InfoDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InfoDialog";
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index d2049cce..7ac4ccb1 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -346,10 +346,8 @@ class MakerPage extends Component {
 
             <Grid item xs={12} align="center">
                 <FormControl component="fieldset">
-                    <FormHelperText >
-                        <div align='center'>
-                            {t("Choose a Pricing Method")}
-                        </div>
+                    <FormHelperText sx={{textAlign:"center"}}>
+                        {t("Choose a Pricing Method")}
                     </FormHelperText>
                     <RadioGroup row defaultValue="relative">
                     <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Let the price move with the market")}>
@@ -524,37 +522,35 @@ class MakerPage extends Component {
 
             <Grid item xs={12} align="center">
                 <FormControl align="center">
-                        <FormHelperText>
-                            <Tooltip enterTouchDelay={0} placement="top" align="center" title={t("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, is_explicit: false})}/>
-                                {this.state.enableAmountRange & this.state.minAmount != null? this.rangeText() : t("Enable Amount Range")}
-                            </div>
-                            </Tooltip>
+                    <Tooltip enterTouchDelay={0} placement="top" align="center" title={t("Let the taker chose an amount within the range")}>
+                        <FormHelperText align="center" style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
+                            <Checkbox onChange={(e)=>this.setState({enableAmountRange:e.target.checked, is_explicit: false})}/>
+                            {this.state.enableAmountRange & this.state.minAmount != null? this.rangeText() : t("Enable Amount Range")}
                         </FormHelperText>
-                            <div style={{ display: this.state.loadingLimits == true ? '':'none'}}>
-                                <LinearProgress />
-                            </div>
-                            <div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
-                            <RangeSlider
-                                disableSwap={true}
-                                sx={{width:200, align:"center"}}
-                                disabled={!this.state.enableAmountRange || this.state.loadingLimits}
-                                value={[Number(this.state.minAmount), Number(this.state.maxAmount)]}
-                                step={(this.getMaxAmount()-this.getMinAmount())/5000}
-                                valueLabelDisplay="auto"
-                                components={{ Thumb: this.RangeThumbComponent }}
-                                valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)}
-                                marks={this.state.limits == null?
-                                    null
-                                    :
-                                    [{value: this.getMinAmount(),label: this.getMinAmount()+" "+ this.state.currencyCode},
-                                    {value: this.getMaxAmount(),label: this.getMaxAmount()+" "+this.state.currencyCode}]}
-                                min={this.getMinAmount()}
-                                max={this.getMaxAmount()}
-                                onChange={this.handleRangeAmountChange}
-                            />
-                            </div>
+                    </Tooltip>
+                    <div style={{ display: this.state.loadingLimits == true ? '':'none'}}>
+                        <LinearProgress />
+                    </div>
+                    <div style={{ display: this.state.loadingLimits == false ? '':'none'}}>
+                        <RangeSlider
+                            disableSwap={true}
+                            sx={{width:200, align:"center"}}
+                            disabled={!this.state.enableAmountRange || this.state.loadingLimits}
+                            value={[Number(this.state.minAmount), Number(this.state.maxAmount)]}
+                            step={(this.getMaxAmount()-this.getMinAmount())/5000}
+                            valueLabelDisplay="auto"
+                            components={{ Thumb: this.RangeThumbComponent }}
+                            valueLabelFormat={(x) => (parseFloat(Number(x).toPrecision(x < 100 ? 2 : 3))+" "+this.state.currencyCode)}
+                            marks={this.state.limits == null?
+                                null
+                                :
+                                [{value: this.getMinAmount(),label: this.getMinAmount()+" "+ this.state.currencyCode},
+                                {value: this.getMaxAmount(),label: this.getMaxAmount()+" "+this.state.currencyCode}]}
+                            min={this.getMinAmount()}
+                            max={this.getMaxAmount()}
+                            onChange={this.handleRangeAmountChange}
+                        />
+                    </div>
                     </FormControl>
                 </Grid>
 
@@ -627,15 +623,12 @@ class MakerPage extends Component {
                     </Accordion>
                 </Grid>
 
-
                 <Grid item xs={12} align="center">
                     <FormControl align="center">
                     <Tooltip enterDelay={800} enterTouchDelay={0} placement="top" title={t("Set the skin-in-the-game, increase for higher safety assurance")}>
-                        <FormHelperText>
-                                <div align="center" style={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
-                                    {t("Fidelity Bond Size")} <LockIcon sx={{height:20,width:20}}/>
-                                </div>
-                        </FormHelperText>
+                            <FormHelperText align="center" sx={{display:'flex',flexWrap:'wrap', transform: 'translate(20%, 0)'}}>
+                                {t("Fidelity Bond Size")} <LockIcon sx={{height:20,width:20}}/>
+                            </FormHelperText>
                         </Tooltip>
                         <Slider
                             sx={{width:220, align:"center"}}
@@ -704,9 +697,9 @@ class MakerPage extends Component {
                             InputProps={{
                                 endAdornment:
                                 <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
-                                    {/* <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
+                                    <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
                                         <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
-                                    </IconButton> */}
+                                    </IconButton>
                                 </Tooltip>,
                                 }}
                             />
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 78e2eee1..db35efdd 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -39,7 +39,6 @@ class OrderPage extends Component {
         tabValue: 1,
         orderId: this.props.match.params.orderId,
     };
-    this.getOrderDetails(this.props.match.params.orderId);
 
     // Refresh delays according to Order status
     this.statusToDelay = {
@@ -89,7 +88,6 @@ class OrderPage extends Component {
   }
 
   getOrderDetails =(id)=> {
-    this.setState(null)
     this.setState({orderId:id})
     fetch('/api/order' + '?order_id=' + id)
       .then((response) => response.json())
@@ -98,8 +96,10 @@ class OrderPage extends Component {
 
   // These are used to refresh the data
   componentDidMount() {
+    this.getOrderDetails(this.props.match.params.orderId);
     this.interval = setInterval(this.tick, this.state.delay);
   }
+
   componentDidUpdate() {
     clearInterval(this.interval);
       this.interval = setInterval(this.tick, this.state.delay);
@@ -179,7 +179,7 @@ class OrderPage extends Component {
     const { t } = this.props;
     if(this.state.has_range){
     return(
-        <Grid container xs={12} align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
+        <Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
           <this.InactiveMakerDialog/>
           <this.StoreTokenDialog/>
           <div style={{maxWidth:120}}>
@@ -533,7 +533,7 @@ class OrderPage extends Component {
             </Typography>
           </MediaQuery>
           <Paper elevation={12} style={{ padding: 8,}}>
-          <List dense="true">
+          <List dense={true}>
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
               <Tooltip placement="top" enterTouchDelay={0} title={t(this.state.maker_status)} >
@@ -587,7 +587,7 @@ class OrderPage extends Component {
 
             <ListItem>
               <ListItemIcon>
-                <div style={{zoom:1.25,opacity: 0.7, '-ms-zoom': 1.25, '-webkit-zoom': 1.25,'-moz-transform':  'scale(1.25,1.25)', '-moz-transform-origin': 'left center'}}>
+                <div style={{zoom:1.25,opacity: 0.7, msZoom: 1.25, WebkitZoom: 1.25, MozTransform:  'scale(1.25,1.25)', MozTransformOrigin: 'left center'}}>
                   <FlagWithProps code={this.state.currencyCode} />
                 </div>
               </ListItemIcon>
@@ -631,7 +631,7 @@ class OrderPage extends Component {
             <ListItemIcon>
                 <NumbersIcon/>
               </ListItemIcon>
-            <Grid container xs={12}>
+            <Grid container>
                 <Grid item xs={4.5}>
                   <ListItemText primary={this.state.orderId} secondary={t("Order ID")}/>
                 </Grid>
@@ -726,7 +726,7 @@ class OrderPage extends Component {
 
   doubleOrderPageDesktop=()=>{
     return(
-      <Grid container xs={12} align="center" spacing={2} >
+      <Grid container align="center" spacing={2} >
         <Grid item xs={6} align="left" style={{ width:330}} >
             {this.orderBox()}
         </Grid>
@@ -774,7 +774,7 @@ class OrderPage extends Component {
     return(
       this.state.bad_request ?
         <div align='center'>
-          <Typography component="subtitle2" variant="subtitle2" color="secondary" >
+          <Typography variant="subtitle2" color="secondary" >
             {/* IMPLEMENT I18N for bad_request */}
             {t(this.state.bad_request)}<br/>
           </Typography>
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 325c60e3..1d37f01a 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -40,7 +40,7 @@ class TradeBox extends Component {
 
 
 
-  Sound = ({soundFileName}) => (
+  Sound = (soundFileName) => (
     // Four filenames: "locked-invoice", "taker-found", "open-chat", "successful"
     <audio autoPlay src={`/static/assets/sounds/${soundFileName}.mp3`} />
   )
@@ -182,19 +182,19 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
             {t("Robots show commitment to their peers")}
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
           {this.props.data.is_maker ?
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
+          <Typography color="primary" variant="subtitle1">
             <b>
               {t("Lock {{amountSats}} Sats to PUBLISH order", {amountSats: pn(this.props.data.bond_satoshis)})}
             </b> {" " + this.stepXofY()}
           </Typography>
           :
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
+          <Typography color="primary" variant="subtitle1">
             <b>
               {t("Lock {{amountSats}} Sats to TAKE order", {amountSats: pn(this.props.data.bond_satoshis)})}
             </b> {" " + this.stepXofY()}
@@ -215,7 +215,7 @@ class TradeBox extends Component {
             variant="standard"
             size="small"
             defaultValue={this.props.data.bond_invoice}
-            disabled="true"
+            disabled={true}
             helperText={t("This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.")}
             color = "secondary"
           />
@@ -228,7 +228,7 @@ class TradeBox extends Component {
     const {t} = this.props
     return (
         <Grid item xs={12} align="center">
-          <Typography color="primary" component="subtitle1" variant="subtitle1" align="center">
+          <Typography color="primary" variant="subtitle1" align="center">
             <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
               <LockIcon/>
               {this.props.data.is_maker ? t("Your maker bond is locked") : t("Your taker bond is locked")}
@@ -242,7 +242,7 @@ class TradeBox extends Component {
     const { t } = this.props;
     return (
         <Grid item xs={12} align="center">
-          <Typography color="error" component="subtitle1" variant="subtitle1" align="center">
+          <Typography color="error" variant="subtitle1" align="center">
                 <div style={{display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap', align:"center"}} align="center">
                     <BalanceIcon/>
                     {this.props.data.is_maker ? t("Your maker bond was settled") : t("Your taker bond was settled")}
@@ -256,7 +256,7 @@ class TradeBox extends Component {
     const { t } = this.props;
     return (
         <Grid item xs={12} align="center">
-          <Typography color="green" component="subtitle1" variant="subtitle1" align="center">
+          <Typography color="green" variant="subtitle1" align="center">
             <div style={{display:'flex',alignItems:'center', justifyContent:'center', flexWrap:'wrap'}}>
               <LockOpenIcon/>
               {this.props.data.is_maker ? t("Your maker bond was unlocked") : t("Your taker bond was unlocked")}
@@ -271,9 +271,9 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         {/* Make confirmation sound for HTLC received. */}
-        {this.Sound(soundFileName="locked-invoice")}
+        {this.Sound("locked-invoice")}
         <Grid item xs={12} align="center">
-          <Typography color="green" component="subtitle1" variant="subtitle1">
+          <Typography color="green" variant="subtitle1">
             <b>
               {t("Lock {{amountSats}} Sats as collateral", {amountSats:pn(this.props.data.escrow_satoshis)})}
             </b>{" " + this.stepXofY()}
@@ -293,7 +293,7 @@ class TradeBox extends Component {
             variant="filled"
             size="small"
             defaultValue={this.props.data.escrow_invoice}
-            disabled="true"
+            disabled={true}
             helperText={t("This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})}
             color = "secondary"
           />
@@ -308,15 +308,15 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         {/* Make bell sound when taker is found */}
-        {this.Sound(soundFileName="taker-found")}
+        {this.Sound("taker-found")}
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography variant="subtitle1">
             <b>{t("A taker has been found!")}</b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Divider/>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
             {t("Please wait for the taker to lock a bond. If the taker does not lock a bond in time, the order will be made public again.")}
           </Typography>
         </Grid>
@@ -387,21 +387,26 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         {/* Make confirmation sound for HTLC received. */}
-        {this.Sound(soundFileName="locked-invoice")}
+        {this.Sound("locked-invoice")}
         {this.EnableTelegramDialog()}
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography variant="subtitle1">
             <b> {t("Your order is public")} </b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
 
-        <List dense="true">
+        <List dense={true}>
           <Divider/>
             <ListItem>
-              <Typography component="body2" variant="body2" align="left">
-                <p>{t("Be patient while robots check the book. This box will ring 🔊 once a robot takes your order, then you will have {{deposit_timer_hours}}h {{deposit_timer_minutes}}m to reply. If you do not reply, you risk losing your bond.", this.depositHoursMinutes() )} </p>
-                <p>{t("If the order expires untaken, your bond will return to you (no action needed).")}</p>
+              <Typography  variant="body2" align="left">
+                {t("Be patient while robots check the book. This box will ring 🔊 once a robot takes your order, then you will have {{deposit_timer_hours}}h {{deposit_timer_minutes}}m to reply. If you do not reply, you risk losing your bond.", this.depositHoursMinutes() )}
+              </Typography>
+            </ListItem>
+            
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {t("If the order expires untaken, your bond will return to you (no action needed).")}
               </Typography>
             </ListItem>
 
@@ -431,7 +436,7 @@ class TradeBox extends Component {
                   {this.props.pauseLoading ?
                   <CircularProgress sx={{width:"30px",height:"30px"}}/>
                   :
-                  <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Pause the public order")}>
+                  <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Pause the public order")}>
                     <Button color="primary" onClick={this.handleClickPauseOrder}>
                       <PauseCircleIcon sx={{width:"36px",height:"36px"}}/>
                     </Button>
@@ -464,16 +469,16 @@ class TradeBox extends Component {
       <Grid container align="center" spacing={1}>
 
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography variant="subtitle1">
             <b> {t("Your order is paused")} </b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
 
         <Grid item xs={12} align="center">
-          <List dense="true">
+          <List dense={true}>
             <Divider/>
               <ListItem>
-              <Typography component="body2" variant="body2" align="left">
+              <Typography  variant="body2" align="left">
                 {t("Your public order has been paused. At the moment it cannot be seen or taken by other robots. You can choose to unpause it at any time.")}
               </Typography>
             </ListItem>
@@ -566,14 +571,14 @@ class TradeBox extends Component {
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
           {/* Make confirmation sound for HTLC received. */}
-          {this.Sound(soundFileName="locked-invoice")}
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
+          {this.Sound("locked-invoice")}
+          <Typography color="primary" variant="subtitle1">
             <b> {t("Submit an invoice for {{amountSats}} Sats",{amountSats: pn(this.props.data.invoice_amount)})}
             </b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Grid item xs={12} align="left">
-          <Typography component="body2" variant="body2">
+          <Typography variant="body2">
             {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
             {amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)),
               currencyCode: this.props.data.currencyCode,
@@ -627,12 +632,12 @@ class TradeBox extends Component {
       return (
         <Grid container spacing={1}>
           <Grid item xs={12} align="center">
-            <Typography color="primary" component="subtitle1" variant="subtitle1">
+            <Typography color="primary" variant="subtitle1">
               <b> {t("We have received your statement")} </b>
             </Typography>
           </Grid>
           <Grid item xs={12} align="left">
-            <Typography component="body2" variant="body2">
+            <Typography  variant="body2">
               <p>{t("We are waiting for your trade counterpart statement. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com.")}</p>
               <p>{t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}</p>
             </Typography>
@@ -647,12 +652,12 @@ class TradeBox extends Component {
 
         <Grid container spacing={1}>
           <Grid item xs={12} align="center">
-            <Typography color="primary" component="subtitle1" variant="subtitle1">
+            <Typography color="primary"  variant="subtitle1">
               <b> {t("A dispute has been opened")} </b>
             </Typography>
           </Grid>
           <Grid item xs={12} align="left">
-            <Typography component="body2" variant="body2">
+            <Typography  variant="body2">
             {t("Please, submit your statement. Be clear and specific about what happened and provide the necessary evidence. You MUST provide a contact method: burner email, XMPP or telegram username to follow up with the staff. Disputes are solved at the discretion of real robots (aka humans), so be as helpful as possible to ensure a fair outcome. Max 5000 chars.")}
             </Typography>
           </Grid>
@@ -684,12 +689,12 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
+          <Typography color="primary"  variant="subtitle1">
             <b> {t("We have the statements")} </b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="left">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
             <p>{t("Both statements have been received, wait for the staff to resolve the dispute. If you are hesitant about the state of the dispute or want to add more information, contact robosats@protonmail.com. If you did not provide a contact method, or are unsure whether you wrote it right, write us immediately.")} </p>
             <p>{t("Please, save the information needed to identify your order and your payments: order ID; payment hashes of the bonds or escrow (check on your lightning wallet); exact amount of satoshis; and robot nickname. You will have to identify yourself as the user involved in this trade via email (or other contact methods).")}</p>
           </Typography>
@@ -704,12 +709,12 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography color="primary" component="subtitle1" variant="subtitle1">
+          <Typography color="primary"  variant="subtitle1">
             <b> {t("You have won the dispute")} </b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="left">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
             {t("You can claim the dispute resolution amount (escrow and fidelity bond) from your profile rewards. If there is anything the staff can help with, do not hesitate to contact to robosats@protonmail.com (or via your provided burner contact method).")}
           </Typography>
         </Grid>
@@ -723,12 +728,12 @@ class TradeBox extends Component {
     return (
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography color="error" component="subtitle1" variant="subtitle1">
+          <Typography color="error"  variant="subtitle1">
             <b> {t("You have lost the dispute")} </b>
           </Typography>
         </Grid>
         <Grid item xs={12} align="left">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
           {t("Unfortunately you have lost the dispute. If you think this is a mistake you can ask to re-open the case via email to robosats@protonmail.com. However, chances of it being investigated again are low.")}
           </Typography>
         </Grid>
@@ -742,12 +747,12 @@ class TradeBox extends Component {
     return(
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography  variant="subtitle1">
             <b>{t("Your invoice looks good!")}</b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="left">
+          <Typography  variant="body2" align="left">
             <p>{t("We are waiting for the seller lock the trade amount.")}</p>
             <p>{t("Just hang on for a moment. If the seller does not deposit, you will get your bond back automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p>
           </Typography>
@@ -762,14 +767,14 @@ class TradeBox extends Component {
     return(
       <Grid container spacing={1}>
         {/* Make confirmation sound for HTLC received. */}
-        {this.Sound(soundFileName="locked-invoice")}
+        {this.Sound("locked-invoice")}
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography  variant="subtitle1">
             <b>{t("The trade collateral is locked!")}</b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="left">
+          <Typography  variant="body2" align="left">
             <p>{t("We are waiting for the buyer to post a lightning invoice. Once he does, you will be able to directly communicate the fiat payment details.")} </p>
             <p>{t("Just hang on for a moment. If the buyer does not cooperate, you will get back the trade collateral and your bond automatically. In addition, you will receive a compensation (check the rewards in your profile).")}</p>
           </Typography>
@@ -892,13 +897,13 @@ handleRatingRobosatsChange=(e)=>{
     return(
       <Grid container spacing={1}>
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography  variant="subtitle1">
             <b>{t("The order has expired")}</b>
           </Typography>
         </Grid>
 
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2">
+          <Typography  variant="body2">
             {t(this.props.data.expiry_message)}
           </Typography>
         </Grid>
@@ -945,15 +950,15 @@ handleRatingRobosatsChange=(e)=>{
     return(
       <Grid container spacing={1}>
         {/* Make confirmation sound for Chat Open. */}
-        {this.Sound(soundFileName="chat-open")}
+        {this.Sound("chat-open")}
         <Grid item xs={12} align="center">
-          <Typography component="subtitle1" variant="subtitle1">
+          <Typography variant="subtitle1">
             <b> {this.props.data.is_seller ? t("Chat with the buyer"): t("Chat with the seller")}</b> {" " + this.stepXofY()}
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
           {this.props.data.is_seller ?
-          <Typography component="body2" variant="body2"  align="center">
+          <Typography variant="body2"  align="center">
             {this.props.data.status == 9?
             t("Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})
             :
@@ -961,7 +966,7 @@ handleRatingRobosatsChange=(e)=>{
             }
           </Typography>
           :
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             {this.props.data.status == 9?
             t("Say hi! Ask for payment details and click 'Confirm Sent' as soon as the payment is sent.")
             :
@@ -989,14 +994,14 @@ handleRatingRobosatsChange=(e)=>{
     return(
       <Grid container spacing={1}>
         {/* Make confirmation sound for Chat Open. */}
-        {this.Sound(soundFileName="successful")}
+        {this.Sound("successful")}
         <Grid item xs={12} align="center">
           <Typography component="h6" variant="h6">
             {t("🎉Trade finished!🥳")}
           </Typography>
         </Grid>
         {/* <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             What do you think of ⚡<b>{this.props.data.is_maker ? this.props.data.taker_nick : this.props.data.maker_nick}</b>⚡?
           </Typography>
         </Grid>
@@ -1004,7 +1009,7 @@ handleRatingRobosatsChange=(e)=>{
           <Rating name="size-large" defaultValue={0} size="large" onChange={this.handleRatingUserChange} />
         </Grid> */}
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             <Trans i18nKey="rate_robosats">What do you think of 🤖<b>RoboSats</b>⚡?</Trans>
           </Typography>
         </Grid>
@@ -1013,7 +1018,7 @@ handleRatingRobosatsChange=(e)=>{
         </Grid>
         {this.state.rating_platform==5 ?
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             <p><b>{t("Thank you! RoboSats loves you too ❤️")}</b></p>
             <p>{t("RoboSats gets better with more liquidity and users. Tell a bitcoiner friend about Robosats!")}</p>
           </Typography>
@@ -1021,7 +1026,7 @@ handleRatingRobosatsChange=(e)=>{
         : null}
         {this.state.rating_platform!=5 & this.state.rating_platform!=null ?
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             <p><b>{t("Thank you for using Robosats!")}</b></p>
             <p><Trans i18nKey="let_us_know_hot_to_improve">Let us know how the platform could improve (<Link target='_blank' href="https://t.me/robosats">Telegram</Link> / <Link target='_blank' href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</Trans></p>
           </Typography>
@@ -1056,7 +1061,7 @@ handleRatingRobosatsChange=(e)=>{
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             {t("RoboSats is trying to pay your lightning invoice. Remember that lightning nodes must be online in order to receive payments.")}
           </Typography>
         <br/>
@@ -1093,13 +1098,13 @@ handleRatingRobosatsChange=(e)=>{
             </Typography>
           </Grid>
           <Grid item xs={12} align="center">
-            <Typography component="body2" variant="body2" align="center">
+            <Typography  variant="body2" align="center">
               {t("Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ")}
               <Link href="https://github.com/Reckless-Satoshi/robosats/issues/44"> {t("Check the list of compatible wallets")}</Link>
             </Typography>
           </Grid>
           <Grid item xs={12} align="center">
-            <Typography color="primary" component="subtitle1" variant="subtitle1">
+            <Typography color="primary" variant="subtitle1">
               <b> {t("Submit an invoice for {{amountSats}} Sats",{amountSats: pn(this.props.data.invoice_amount)})}</b>
             </Typography>
           </Grid>
@@ -1133,7 +1138,7 @@ handleRatingRobosatsChange=(e)=>{
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          <Typography component="body2" variant="body2" align="center">
+          <Typography  variant="body2" align="center">
             {t("RoboSats will try to pay your invoice 3 times every 5 minutes. If it keeps failing, you will be able to submit a new invoice. Check whether you have enough inbound liquidity. Remember that lightning nodes must be online in order to receive payments.")}
           </Typography>
           <List>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 94c63e7b..ea8a5c66 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -1,9 +1,9 @@
 import React, { Component } from "react";
 import { withTranslation } from "react-i18next";
-import { Button , Tooltip, Dialog, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
+import { Button , Tooltip, Grid, Typography, TextField, ButtonGroup, CircularProgress, IconButton} from "@mui/material"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
-import InfoDialog from './InfoDialog'
+import { InfoDialog } from './Dialogs'
 
 import SmartToyIcon from '@mui/icons-material/SmartToy';
 import CasinoIcon from '@mui/icons-material/Casino';
@@ -31,7 +31,7 @@ class UserGenPage extends Component {
     if (this.props.nickname != null){
       this.setState({
         nickname: this.props.nickname,
-        token: this.props.token? this.props.token : null,
+        token: this.props.token? this.props.token : "",
         avatar_url: '/static/assets/avatars/' + this.props.nickname + '.png',
         loadingRobot: false
       });