diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 100c285b..8bd94ade 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { render } from "react-dom";
+import ReactDOM from 'react-dom/client';
 import HomePage from "./HomePage";
 import { CssBaseline, IconButton} from "@mui/material";
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -46,5 +46,8 @@ export default class App extends Component {
   }
 }
 
-const appDiv = document.getElementById("app");
-render(<App />, appDiv);
\ No newline at end of file
+const root = ReactDOM.createRoot(
+  document.getElementById("app")
+);
+
+root.render(<App />);
diff --git a/frontend/src/components/AutocompletePayments.js b/frontend/src/components/AutocompletePayments.js
index 9d12f06b..0ac6a6c9 100644
--- a/frontend/src/components/AutocompletePayments.js
+++ b/frontend/src/components/AutocompletePayments.js
@@ -44,7 +44,7 @@ const InputWrapper = styled('div')(
   display: flex;
   flex-wrap: wrap;
   overflow-y:auto;
-  
+
   &:hover {
     border-color: ${theme.palette.mode === 'dark' ? (error? '#f44336':'#ffffff') : (error? '#dd0000' :'#2f2f2f')};
   }
@@ -233,7 +233,7 @@ export default function AutocompletePayments(props) {
     if(a || a == null){props.onAutocompleteChange(optionsToString(value))}
     return false
   };
-  
+
   return (
     <Root>
       <div style={{height:'5px'}}></div>
@@ -252,7 +252,7 @@ export default function AutocompletePayments(props) {
                 <ListHeader ><i>{props.listHeaderText+" "} </i> </ListHeader>
             </div>
           {groupedOptions.map((option, index) => (
-            <li {...getOptionProps({ option, index })}>
+            <li key={option.name} {...getOptionProps({ option, index })}>
               <Button fullWidth={true} color='inherit' size="small" sx={{textTransform: "none"}} style={{justifyContent: "flex-start"}}>
                   <div style={{position:'relative', right: '4px', top:'4px'}}>
                     <AddIcon style={{color : '#1976d2'}} sx={{width:18,height:18}} />
@@ -268,7 +268,7 @@ export default function AutocompletePayments(props) {
               :null)
             :null}
         </Listbox>
-      ) : 
+      ) :
       //Here goes what happens if there is no groupedOptions
       (getInputProps().value.length > 0 ?
         <Listbox {...getListboxProps()}>
@@ -278,4 +278,4 @@ export default function AutocompletePayments(props) {
       }
     </Root>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
index afec3d64..19586352 100644
--- a/frontend/src/components/BookPage.js
+++ b/frontend/src/components/BookPage.js
@@ -63,7 +63,7 @@ class BookPage extends Component {
     }
   }
 
-  
+
   // Colors for the status badges
   statusBadgeColor(status){
     if(status=='Active'){return("success")}
@@ -90,7 +90,7 @@ class BookPage extends Component {
             .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
-              robot: order.maker_nick, 
+              robot: order.maker_nick,
               robot_status: order.maker_status,
               type: order.type ? t("Seller"): t("Buyer"),
               amount: order.amount,
@@ -106,17 +106,17 @@ class BookPage extends Component {
         loading={this.props.bookLoading}
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
-          { field: 'robot', headerName: t("Robot"), width: 240, 
+          { field: 'robot', headerName: t("Robot"), width: 240,
             renderCell: (params) => {return (
               <ListItemButton style={{ cursor: "pointer" }}>
                 <ListItemAvatar>
-                <Tooltip placement="right" enterTouchDelay="0" title={t(params.row.robot_status)}>
+                <Tooltip placement="right" enterTouchDelay={0} title={t(params.row.robot_status)}>
                   <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
                   <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'
+                      <Image className='bookAvatar'
+                          disableError={true}
+                          disableSpinner={true}
                           color='null'
                           alt={params.row.robot}
                           src={params.row.avatar}
@@ -135,7 +135,7 @@ class BookPage extends Component {
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer" }}>{this.amountToString(params.row.amount,params.row.has_range, params.row.min_amount, params.row.max_amount)}</div>
           )}},
-          { field: 'currency', headerName: t("Currency"), width: 100, 
+          { field: 'currency', headerName: t("Currency"), width: 100,
           renderCell: (params) => {return (
             <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>)
           }},
@@ -152,7 +152,7 @@ class BookPage extends Component {
               <div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
             )} },
           ]}
-        
+
         components={{
           NoRowsOverlay: () => (
             <Stack height="100%" alignItems="center" justifyContent="center">
@@ -187,7 +187,7 @@ class BookPage extends Component {
           .map((order) =>
             ({id: order.id,
               avatar: window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png',
-              robot: order.maker_nick, 
+              robot: order.maker_nick,
               robot_status: order.maker_status,
               type: order.type ? t("Seller"): t("Buyer"),
               amount: order.amount,
@@ -203,14 +203,14 @@ class BookPage extends Component {
 
         columns={[
           // { field: 'id', headerName: 'ID', width: 40 },
-          { field: 'robot', headerName: t("Robot"), width: 64, 
+          { field: 'robot', headerName: t("Robot"), width: 64,
             renderCell: (params) => {return (
               <div style={{ position: "relative", left: "-5px" }}>
-                <Tooltip placement="right" enterTouchDelay="0" title={params.row.robot+" ("+t(params.row.robot_status)+")"}>
+                <Tooltip placement="right" enterTouchDelay={0} title={params.row.robot+" ("+t(params.row.robot_status)+")"}>
                   <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(params.row.robot_status)}>
                   <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' 
+                      <Image className='bookAvatar'
                           disableError='true'
                           disableSpinner='true'
                           color='null'
@@ -225,15 +225,15 @@ class BookPage extends Component {
             );
           } },
           { field: 'type', headerName: t("Is"), width: 60, hide:'true'},
-          { field: 'amount', headerName: t("Amount"), type: 'number', width: 84, 
+          { field: 'amount', headerName: t("Amount"), type: 'number', width: 84,
           renderCell: (params) => {return (
-            <Tooltip placement="right" enterTouchDelay="0" title={t(params.row.type)}>
+            <Tooltip placement="right" enterTouchDelay={0} title={t(params.row.type)}>
               <div style={{ cursor: "pointer" }}>{this.amountToString(params.row.amount,params.row.has_range, params.row.min_amount, params.row.max_amount)}</div>
             </Tooltip>
           )} },
-          { field: 'currency', headerName: t("Currency"), width: 85, 
+          { field: 'currency', headerName: t("Currency"), width: 85,
           renderCell: (params) => {return (
-            // <Tooltip placement="left" enterTouchDelay="0" title={params.row.payment_method}>
+            // <Tooltip placement="left" enterTouchDelay={0} title={params.row.payment_method}>
               <div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>{params.row.currency+" "}{getFlags(params.row.currency)}</div>
             // </Tooltip>
           )} },
@@ -248,12 +248,12 @@ class BookPage extends Component {
           )} },
           { field: 'premium', headerName: t("Premium"), type: 'number', width: 85,
             renderCell: (params) => {return (
-              <Tooltip placement="left" enterTouchDelay="0" title={pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
+              <Tooltip placement="left" enterTouchDelay={0} title={pn(params.row.price) + " " +params.row.currency+ "/BTC" }>
               <div style={{ cursor: "pointer" }}>{parseFloat(parseFloat(params.row.premium).toFixed(4))+"%" }</div>
               </Tooltip>
             )} },
           ]}
-        
+
         components={{
           NoRowsOverlay: () => (
             <Stack height="100%" alignItems="center" justifyContent="center">
@@ -347,9 +347,9 @@ class BookPage extends Component {
                       control={<Checkbox defaultChecked={true} 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 ? 
+                          {this.props.buyChecked ?
                             <Typography variant="caption" color="primary"><b>{t("Buy")}</b></Typography>
-                            : 
+                            :
                             <Typography variant="caption" color="text.secondary">{t("Buy")}</Typography>
                           }
                         </div>
@@ -363,9 +363,9 @@ class BookPage extends Component {
                       control={<Checkbox defaultChecked={true} 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 ? 
+                          {this.props.sellChecked ?
                             <Typography variant="caption" color="secondary"><b>{t("Sell")}</b></Typography>
-                            :  
+                            :
                             <Typography variant="caption" color="text.secondary">{t("Sell")}</Typography>
                           }
                         </div>
@@ -389,8 +389,8 @@ class BookPage extends Component {
                   //autoWidth={true}
                   sx={{width:120}}
                   label={t("Select Payment Currency")}
-                  required="true" 
-                  value={this.props.bookCurrency} 
+                  required={true}
+                  value={this.props.bookCurrency}
                   inputProps={{
                       style: {textAlign:"center"}
                   }}
@@ -398,7 +398,7 @@ class BookPage extends Component {
               >     <MenuItem value={0}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags('ANY')}{" "+t("ANY_currency")}</div></MenuItem>
                     {
                       Object.entries(currencyDict)
-                      .map( ([key, value]) => <MenuItem value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
+                      .map( ([key, value]) => <MenuItem key={key} value={parseInt(key)}><div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div></MenuItem> )
                     }
               </Select>
             </FormControl>
@@ -406,22 +406,22 @@ class BookPage extends Component {
         { this.props.bookNotFound ? "" :
           <Grid item xs={12} align="center">
             <Typography component="h5" variant="h5">
-               {this.props.bookType == 0 ? 
-                t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode}) 
-               : 
-                (this.props.bookType == 1 ? 
+               {this.props.bookType == 0 ?
+                t("You are SELLING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
+               :
+                (this.props.bookType == 1 ?
                   t("You are BUYING BTC for {{currencyCode}}",{currencyCode:this.props.bookCurrencyCode})
                 :
                   t("You are looking at all")
                 )
-               } 
+               }
             </Typography>
           </Grid>
           }
 
         { this.props.bookNotFound ?
           <this.NoOrdersFound/>
-          : 
+          :
           <Grid item xs={12} align="center">
             {/* Desktop Book */}
             <MediaQuery minWidth={930}>
@@ -445,7 +445,7 @@ class BookPage extends Component {
           </Grid>
         </Grid>
     );
-  };
+  }
 }
 
-export default withTranslation()(BookPage);
\ No newline at end of file
+export default withTranslation()(BookPage);
diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index a007d4a3..905e14ad 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -62,8 +62,12 @@ class BottomBar extends Component {
             showRewardsSpinner: false,
             withdrawn: false,
         };
+    }
+
+    componentDidMount() {
+        console.log("mount fernando");
         this.getInfo();
-      }
+    }
 
     getInfo() {
         this.setState(null)
@@ -336,7 +340,7 @@ class BottomBar extends Component {
                         size='small'
                         InputProps={{
                             endAdornment:
-                            <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+                            <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                                 <IconButton onClick= {()=> (navigator.clipboard.writeText(getCookie("robot_token")) & this.props.setAppState({copiedToken:true}))}>
                                     <ContentCopy color={this.props.copiedToken ? "inherit" : "primary"}/>
                                 </IconButton>
@@ -371,7 +375,7 @@ class BottomBar extends Component {
                             size='small'
                             InputProps={{
                                 endAdornment:
-                                <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+                                <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                                     <IconButton onClick= {()=>navigator.clipboard.writeText('http://'+this.getHost()+'/ref/'+this.state.referral_code)}>
                                         <ContentCopy />
                                     </IconButton>
@@ -543,7 +547,7 @@ bottomBarDesktop =()=>{
                             <this.LangSelect/>
                         </Grid>
                         <Grid item xs={3}>
-                        <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
+                        <Tooltip enterTouchDelay={250} title={t("Show community and support links")}>
                             <IconButton
                             color="primary"
                             aria-label="Community"
@@ -553,7 +557,7 @@ bottomBarDesktop =()=>{
                         </Tooltip>
                         </Grid>
                         <Grid item xs={3}>
-                            <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
+                            <Tooltip enterTouchDelay={250} title={t("Show stats for nerds")}>
                                 <IconButton color="primary"
                                     aria-label="Stats for Nerds"
                                     onClick={this.handleClickOpenStatsForNerds} >
@@ -736,7 +740,7 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("Number of public BUY orders")}>
+                        <Tooltip enterTouchDelay={300} title={t("Number of public BUY orders")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.num_public_buy_orders}  color="action">
                                 <InventoryIcon />
@@ -746,7 +750,7 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("Number of public SELL orders")}>
+                        <Tooltip enterTouchDelay={300} title={t("Number of public SELL orders")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.num_public_sell_orders}  color="action">
                                 <SellIcon />
@@ -756,7 +760,7 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("Today active robots")}>
+                        <Tooltip enterTouchDelay={300} title={t("Today active robots")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.active_robots_today}  color="action">
                                 <SmartToyIcon />
@@ -766,7 +770,7 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.8} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("24h non-KYC bitcoin premium")}>
+                        <Tooltip enterTouchDelay={300} title={t("24h non-KYC bitcoin premium")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"}  color="action">
                                 <PriceChangeIcon />
@@ -780,7 +784,7 @@ bottomBarPhone =()=>{
                             <this.LangSelect/>
                         </Grid>
                         <Grid item xs={3}>
-                        <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
+                        <Tooltip enterTouchDelay={250} title={t("Show community and support links")}>
                             <IconButton
                             color="primary"
                             aria-label="Community"
@@ -790,7 +794,7 @@ bottomBarPhone =()=>{
                         </Tooltip>
                         </Grid>
                         <Grid item xs={3}>
-                        <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
+                        <Tooltip enterTouchDelay={250} title={t("Show stats for nerds")}>
                             <IconButton color="primary"
                                 aria-label="Stats for Nerds"
                                 onClick={this.handleClickOpenStatsForNerds} >
@@ -819,4 +823,5 @@ bottomBarPhone =()=>{
         )
     }
 }
+
 export default withTranslation()(BottomBar);
diff --git a/frontend/src/components/Chat.js b/frontend/src/components/Chat.js
index 50f3cb5f..00e53a8f 100644
--- a/frontend/src/components/Chat.js
+++ b/frontend/src/components/Chat.js
@@ -75,7 +75,7 @@ class Chat extends Component {
         message: this.state.value,
         nick: this.props.ur_nick,
       }));
-      this.state.value = ''
+      this.setState({value: ""});
     }
     e.preventDefault();
   }
@@ -107,13 +107,13 @@ class Chat extends Component {
               {this.state.messages.map(message => <>
               <Card elevation={5} align="left" >
               {/* If message sender is not our nick, gray color, if it is our nick, green color */}
-              {message.userNick == this.props.ur_nick ? 
+              {message.userNick == this.props.ur_nick ?
                 <CardHeader sx={{color: '#111111'}}
                   avatar={
                     <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.connected ? "success" : "error"}>
                       <Avatar className="flippedSmallAvatar"
                         alt={message.userNick}
-                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'} 
+                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
                         />
                     </Badge>
                   }
@@ -128,7 +128,7 @@ class Chat extends Component {
                     <Badge variant="dot" overlap="circular" badgeContent="" color={this.state.peer_connected ? "success" : "error"}>
                       <Avatar className="flippedSmallAvatar"
                         alt={message.userNick}
-                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'} 
+                        src={window.location.origin +'/static/assets/avatars/' + message.userNick + '.png'}
                         />
                     </Badge>
                   }
@@ -136,7 +136,7 @@ class Chat extends Component {
                   title={message.userNick}
                   subheader={message.msg}
                   subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
-                />} 
+                />}
                 </Card>
               </>)}
               <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
@@ -170,4 +170,4 @@ class Chat extends Component {
   }
 }
 
-export default withTranslation()(Chat);
\ No newline at end of file
+export default withTranslation()(Chat);
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
index 2a6c36b0..2f986718 100644
--- a/frontend/src/components/HomePage.js
+++ b/frontend/src/components/HomePage.js
@@ -24,7 +24,7 @@ export default class HomePage extends Component {
         bookLoading: true,
       }
     }
-  
+
     setAppState=(newState)=>{
       this.setState(newState)
     }
@@ -51,4 +51,4 @@ export default class HomePage extends Component {
               </Router>
           );
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/InfoDialog.js b/frontend/src/components/InfoDialog.js
index 7f70cbc6..e53d2354 100644
--- a/frontend/src/components/InfoDialog.js
+++ b/frontend/src/components/InfoDialog.js
@@ -12,22 +12,22 @@ class InfoDialog extends Component {
         <DialogContent>
 
           <MediaQuery minWidth={475}>
-          <Grid container xs={12}>
+          <Grid container>
             <Grid item xs={8}>
               <Typography component="h4" variant="h4">{t("What is RoboSats?")}</Typography>
-              <Typography component="body2" variant="body2">
-                <p>{t("It is a BTC/FIAT peer-to-peer exchange over lightning.")} <br/> 
+              <Typography component="div" variant="body2">
+                <p>{t("It is a BTC/FIAT peer-to-peer exchange over lightning.")} <br/>
                 {t("It simplifies matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.")}</p>
-                
-                <p>{t("RoboSats is an open source project ")} <Link 
+
+                <p>{t("RoboSats is an open source project ")} <Link
                   href='https://github.com/reckless-satoshi/robosats'>{t("(GitHub).")}</Link>
                 </p>
               </Typography>
             </Grid>
             <Grid item xs={4} align="center">
               <Image className='newAvatar'
-                disableError='true'
-                cover='true'
+                disableError={true}
+                cover={true}
                 color='null'
                 src={window.location.origin +'/static/assets/images/v0.1.2-04.png'}
               />
@@ -37,23 +37,23 @@ class InfoDialog extends Component {
 
           <MediaQuery maxWidth={474}>
           <Typography component="h4" variant="h4">{t("What is RoboSats?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p>{t("It is a BTC/FIAT peer-to-peer exchange over lightning.")+" "} {t("It simplifies matchmaking and minimizes the need of trust. RoboSats focuses in privacy and speed.")}</p>
               <img
                 width='100%'
                 src={window.location.origin +'/static/assets/images/v0.1.2-03.png'}
               />
-            <p>{t("RoboSats is an open source project ")} <Link 
+            <p>{t("RoboSats is an open source project ")} <Link
               href='https://github.com/reckless-satoshi/robosats'>{t("(GitHub).")}</Link>
             </p>
           </Typography>
           </MediaQuery>
 
           <Typography component="h5" variant="h5">{t("How does it work?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("AnonymousAlice01 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. RoboSats locks the invoice until Alice confirms she received the fiat, then the satoshis are released to Bob. Enjoy your satoshis, Bob!")}</p>
 
-            <p>{t("At no point, AnonymousAlice01 and BafflingBob02 have to entrust the bitcoin funds to each other. In case they have a conflict, RoboSats staff will help resolving the dispute.")} 
+            <p>{t("At no point, AnonymousAlice01 and BafflingBob02 have to entrust the bitcoin funds to each other. In case they have a conflict, RoboSats staff will help resolving the dispute.")}
               {t("You can find a step-by-step description of the trade pipeline in ")}
               <Link href='https://github.com/Reckless-Satoshi/robosats/blob/main/README.md#how-it-works'>{t("How it works")}</Link>.
               {" "+t("You can also check the full guide in ")}
@@ -61,46 +61,46 @@ class InfoDialog extends Component {
           </Typography>
 
           <Typography component="h5" variant="h5">{t("What payment methods are accepted?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p>{t("All of them as long as they are fast. You can write down your preferred payment method(s). You will have to match with a peer who also accepts that method. The step to exchange fiat has a expiry time of 24 hours before a dispute is automatically open. We highly recommend using instant fiat payment rails.")} </p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("Are there trade limits?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p>{t("Maximum single trade size is {{maxAmount}} Satoshis to minimize lightning routing failure. There is no limits to the number of trades per day. A robot can only have one order at a time. However, you can use multiple robots simultaneously in different browsers (remember to back up your robot tokens!).", {maxAmount: '1,200,000'})} </p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("Is RoboSats private?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("RoboSats will never ask you for your name, country or ID. RoboSats does not custody your funds and does not care who you are. RoboSats does not collect or custody any personal data. For best anonymity use Tor Browser and access the .onion hidden service.")} </p>
             <p>{t("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">{t("What are the risks?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("This is an experimental application, things could go wrong. Trade small amounts!")}</p>
             <p> {t("The seller faces the same charge-back risk as with any other peer-to-peer service. Paypal or credit cards are not recommended.")}</p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("What is the trust model?")}</Typography>
-          <Typography component="body2" variant="body2">
-            <p> {t("The buyer and the seller never have to trust each other. Some trust on RoboSats is needed since linking the seller's hold invoice and buyer payment is not atomic (yet). In addition, disputes are solved by the RoboSats staff.")}</p> 
-            <p> {t("To be totally clear. Trust requirements are minimized. However, there is still one way RoboSats could run away with your satoshis: by not releasing the satoshis to the buyer. It could be argued that such move is not in RoboSats' interest as it would damage the reputation for a small payout. However, you should hesitate and only trade small quantities at a time. For large amounts use an onchain escrow service such as Bisq")}</p> 
+          <Typography component="div" variant="body2">
+            <p> {t("The buyer and the seller never have to trust each other. Some trust on RoboSats is needed since linking the seller's hold invoice and buyer payment is not atomic (yet). In addition, disputes are solved by the RoboSats staff.")}</p>
+            <p> {t("To be totally clear. Trust requirements are minimized. However, there is still one way RoboSats could run away with your satoshis: by not releasing the satoshis to the buyer. It could be argued that such move is not in RoboSats' interest as it would damage the reputation for a small payout. However, you should hesitate and only trade small quantities at a time. For large amounts use an onchain escrow service such as Bisq")}</p>
             <p> {t("You can build more trust on RoboSats by inspecting the source code.")} <Link href='https://github.com/reckless-satoshi/robosats'> {t("Project source code")}</Link>. </p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("What happens if RoboSats suddenly disappears?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("Your sats will return to you. Any hold invoice that is not settled would be automatically returned even if RoboSats goes down forever. This is true for both, locked bonds and trading escrows. However, there is a small window between the seller confirms FIAT RECEIVED and the moment the buyer receives the satoshis when the funds could be permanently lost if RoboSats disappears. This window is about 1 second long. Make sure to have enough inbound liquidity to avoid routing failures. If you have any problem, reach out trough the RoboSats public channels.")}</p>
           </Typography>
 
           <Typography component="h5" variant="h5">{t("Is RoboSats legal in my country?")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("In many countries using RoboSats 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">{t("Disclaimer")}</Typography>
-          <Typography component="body2" variant="body2">
+          <Typography component="div" variant="body2">
             <p> {t("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 ")}<Link href='https://t.me/robosats'>{t("(Telegram)")}</Link>{t(". RoboSats will never contact you. RoboSats will definitely never ask for your robot token.")}</p>
           </Typography>
           <DialogActions>
@@ -112,4 +112,4 @@ class InfoDialog extends Component {
   }
 }
 
-export default withTranslation()(InfoDialog);
\ No newline at end of file
+export default withTranslation()(InfoDialog);
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index dde2af9c..da6f058b 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -262,7 +262,7 @@ class MakerPage extends Component {
         const { t } = this.props;
         return(
             <Paper elevation={12} style={{ padding: 8, width:'260px', align:'center'}}>
-            <Grid item xs={12} align="center" spacing={1}>
+            <Grid item xs={12} align="center">
                 <div style={{position:'relative', left:'5px'}}>
                 <FormControl component="fieldset">
                     <FormHelperText sx={{textAlign:"center"}}>
@@ -287,9 +287,9 @@ class MakerPage extends Component {
                 </div>
             </Grid>
 
-            <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
+            <Grid containter alignItems="stretch" style={{ display: "flex" }}>
                     <div style={{maxWidth:150}}>
-                    <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Amount of fiat to exchange for bitcoin")}>
+                    <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Amount of fiat to exchange for bitcoin")}>
                         <TextField
                             disabled = {this.state.enableAmountRange}
                             variant = {this.state.enableAmountRange ? 'filled' : 'outlined'}
@@ -297,7 +297,7 @@ class MakerPage extends Component {
                             helperText={this.state.amount <= 0 & this.state.amount != "" ? t("Invalid") : null}
                             label={t("Amount")}
                             type="number"
-                            required="true"
+                            required={true}
                             value={this.state.amount}
                             inputProps={{
                                 min:0 ,
@@ -310,14 +310,14 @@ class MakerPage extends Component {
                         <div >
                             <Select
                                 sx={{width:'120px'}}
-                                required="true"
+                                required={true}
                                 defaultValue={this.defaultCurrency}
                                 inputProps={{
                                     style: {textAlign:"center"}
                                 }}
                                 onChange={this.handleCurrencyChange}>
                                     {Object.entries(currencyDict)
-                                    .map( ([key, value]) => <MenuItem value={parseInt(key)}>
+                                    .map( ([key, value]) => <MenuItem key={key} value={parseInt(key)}>
                                         <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>{getFlags(value)}{" "+value}</div>
                                         </MenuItem> )}
                             </Select>
@@ -325,7 +325,7 @@ class MakerPage extends Component {
 
             </Grid>
             <Grid item xs={12} align="center">
-                <Tooltip placement="top" enterTouchDelay="300" enterDelay="700" enterNextDelay="2000" title={t("Enter your preferred fiat payment methods. Fast methods are highly recommended.")}>
+                <Tooltip placement="top" enterTouchDelay={300} enterDelay={700} enterNextDelay={2000} title={t("Enter your preferred fiat payment methods. Fast methods are highly recommended.")}>
                     <AutocompletePayments
                         onAutocompleteChange={this.handlePaymentMethodChange}
                         optionsType={this.state.currency==1000 ? "swap":"fiat"}
@@ -346,7 +346,7 @@ class MakerPage extends Component {
                         </div>
                     </FormHelperText>
                     <RadioGroup row defaultValue="relative">
-                    <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Let the price move with the market")}>
+                    <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Let the price move with the market")}>
                         <FormControlLabel
                         value="relative"
                         control={<Radio color="primary"/>}
@@ -355,7 +355,7 @@ class MakerPage extends Component {
                         onClick={this.handleClickRelative}
                         />
                     </Tooltip>
-                    <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Set a fix amount of satoshis")}>
+                    <Tooltip placement="top" enterTouchDelay={0} enterDelay={1000} enterNextDelay={2000} title={t("Set a fix amount of satoshis")}>
                         <FormControlLabel
                         disabled={this.state.enableAmountRange}
                         value="explicit"
@@ -377,7 +377,7 @@ class MakerPage extends Component {
                             error={this.state.badSatoshis}
                             helperText={this.state.badSatoshis}
                             type="number"
-                            required="true"
+                            required={true}
                             value={this.state.satoshis}
                             inputProps={{
                                 min:this.minTradeSats ,
@@ -544,12 +544,12 @@ class MakerPage extends Component {
         return(
             <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
 
-            <Grid container xs={12}  spacing={1}>
+            <Grid container spacing={1}>
 
-            <Grid item xs={12} align="center" spacing={1}>
+            <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")}>
+                            <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")}
@@ -582,14 +582,14 @@ class MakerPage extends Component {
                     </FormControl>
                 </Grid>
 
-                <Grid item xs={12} align="center" spacing={1}>
+                <Grid item xs={12} align="center">
                     <Accordion elevation={0} sx={{width:'280px', position:'relative', left:'-12px'}}>
                         <AccordionSummary expandIcon={<ExpandMoreIcon color="primary"/>}>
                             <Typography sx={{flexGrow: 1, textAlign: "center"}} color="text.secondary">{t("Expiry Timers")}</Typography>
                         </AccordionSummary>
                         <AccordionDetails>
-                        <Grid container xs={12}  spacing={1}>
-                            <Grid item xs={12} align="center" spacing={1}>
+                        <Grid container spacing={1}>
+                            <Grid item xs={12} align="center">
                                 <LocalizationProvider dateAdapter={DateFnsUtils}>
                                     <TimePicker
                                         sx={{width:210, align:"center"}}
@@ -617,8 +617,8 @@ class MakerPage extends Component {
                                     />
                                 </LocalizationProvider>
                             </Grid>
-                            
-                            <Grid item xs={12} align="center" spacing={1}>
+
+                            <Grid item xs={12} align="center">
                                 <LocalizationProvider dateAdapter={DateFnsUtils}>
                                     <TimePicker
                                         sx={{width:210, align:"center"}}
@@ -652,9 +652,9 @@ class MakerPage extends Component {
                 </Grid>
 
 
-                <Grid item xs={12} align="center" spacing={1}>
+                <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")}>
+                    <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}}/>
@@ -677,8 +677,8 @@ class MakerPage extends Component {
                     </FormControl>
                 </Grid>
 
-                <Grid item xs={12} align="center" spacing={1}>
-                    <Tooltip enterTouchDelay="0" title={t("COMING SOON - High risk! Limited to {{limitSats}}K Sats",{ limitSats: this.maxBondlessSats/1000})}>
+                <Grid item xs={12} align="center">
+                    <Tooltip enterTouchDelay={0} title={t("COMING SOON - High risk! Limited to {{limitSats}}K Sats",{ limitSats: this.maxBondlessSats/1000})}>
                         <FormControlLabel
                             label={t("Allow bondless takers")}
                             control={
@@ -700,7 +700,7 @@ class MakerPage extends Component {
 
     StoreTokenDialog = () =>{
         const { t } = this.props;
-        
+
         // If there is a robot cookie, prompt user to store it
         // Else, prompt user to generate a robot
         if (getCookie("robot_token")){
@@ -781,7 +781,7 @@ class MakerPage extends Component {
                         </Tabs>
                     </Box>
 
-                    <Grid item xs={12} align="center" spacing={1}>
+                    <Grid item xs={12} align="center">
                         <div style={{ display: this.state.showAdvanced == false ? '':'none'}}>
                             <this.StandardMakerOptions/>
                         </div>
@@ -795,7 +795,7 @@ class MakerPage extends Component {
   render() {
     const { t } = this.props;
     return (
-            <Grid container xs={12} align="center" spacing={1} sx={{minWidth:380}}>
+            <Grid container align="center" spacing={1} sx={{minWidth:380}}>
                 {/* <Grid item xs={12} align="center" sx={{minWidth:380}}>
                     <Typography component="h4" variant="h4">
                         ORDER MAKER
@@ -815,12 +815,12 @@ class MakerPage extends Component {
                     (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
                     (!this.state.is_explicit & this.state.badPremium != null))
                     ?
-                    <Tooltip enterTouchDelay="0" title={t("You must fill the order correctly")}>
+                    <Tooltip enterTouchDelay={0} title={t("You must fill the order correctly")}>
                         <div><Button disabled color="primary" variant="contained">{t("Create Order")}</Button></div>
                     </Tooltip>
                     :
-                    <Button color="primary" 
-                        variant="contained" 
+                    <Button color="primary"
+                        variant="contained"
                         onClick={this.props.copiedToken ? this.handleCreateOfferButtonPressed : (() => this.setState({openStoreToken:true}))}
                         >
                         {t("Create Order")}
@@ -830,11 +830,11 @@ class MakerPage extends Component {
             </Grid>
             <Grid item xs={12} align="center">
                 {this.state.badRequest ?
-                <Typography component="subtitle2" variant="subtitle2" color="secondary">
+                <Typography component="h2" variant="subtitle2" color="secondary">
                     {this.state.badRequest} <br/>
                 </Typography>
                 : ""}
-                <Typography component="subtitle2" variant="subtitle2">
+                <Typography component="h2" variant="subtitle2">
                     <div align='center'>
                         {this.state.type==0 ?
                             t("Create a BTC buy order for ")
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 727d013f..c67bfcd8 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -182,7 +182,7 @@ class OrderPage extends Component {
           <this.InactiveMakerDialog/>
           <this.StoreTokenDialog/>
           <div style={{maxWidth:120}}>
-          <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Enter amount of fiat to exchange for bitcoin")}>
+          <Tooltip placement="top" enterTouchDelay={500} enterDelay={700} enterNextDelay={2000} title={t("Enter amount of fiat to exchange for bitcoin")}>
             <Paper elevation={5} sx={{maxHeight:40}}>
               <TextField
                   error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" }
@@ -190,7 +190,7 @@ class OrderPage extends Component {
                   label={t("Amount {{currencyCode}}", {currencyCode: this.state.currencyCode})}
                   size="small"
                   type="number"
-                  required="true"
+                  required={true}
                   value={this.state.takeAmount}
                   inputProps={{
                       min:this.state.min_amount ,
@@ -203,7 +203,7 @@ class OrderPage extends Component {
           </Tooltip>
           </div>
           <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}>
-            <Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title={t("You must specify an amount first")}>
+            <Tooltip placement="top" enterTouchDelay={0} enterDelay={500} enterNextDelay={1200} title={t("You must specify an amount first")}>
               <Paper elevation={4}>
                 <Button sx={{height:38}} variant='contained' color='primary'
                   disabled={true}>
@@ -243,7 +243,7 @@ class OrderPage extends Component {
       return ( <this.takeOrderButton/>);
     } else{
       return(
-      <Tooltip enterTouchDelay="0" title={t("Wait until you can take an order")}><div>
+      <Tooltip enterTouchDelay={0} title={t("Wait until you can take an order")}><div>
       <Button disabled={true} variant='contained' color='primary'>{t("Take Order")}</Button>
       </div></Tooltip>)
     }
@@ -558,7 +558,7 @@ class OrderPage extends Component {
           <List dense="true">
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>
-              <Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
+              <Tooltip placement="top" enterTouchDelay={0} title={t(this.state.maker_status)} >
                 <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
                 <Badge overlap="circular" anchorOrigin={{horizontal: 'right', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", left:"12px", top:"4px"}}> {!this.state.type ? <SendReceiveIcon sx={{transform: "scaleX(-1)"}} color="secondary"/> : <SendReceiveIcon color="primary"/>}</div>}>
                   <Avatar className="flippedSmallAvatar"
@@ -580,7 +580,7 @@ class OrderPage extends Component {
                     <ListItem align="left">
                       <ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
                       <ListItemAvatar >
-                        <Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
+                        <Tooltip enterTouchDelay={0} title={t(this.state.taker_status)} >
                           <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
                           <Badge overlap="circular" anchorOrigin={{horizontal: 'left', vertical: 'bottom'}} badgeContent={<div style={{position:"relative", right:"12px", top:"4px"}}> {this.state.type ? <SendReceiveIcon color="secondary"/> : <SendReceiveIcon sx={{transform: "scaleX(-1)"}} color="primary"/> }</div>}>
                             <Avatar className="smallAvatar"
diff --git a/frontend/src/components/PaymentText.js b/frontend/src/components/PaymentText.js
index 7c64f263..da4f3e59 100644
--- a/frontend/src/components/PaymentText.js
+++ b/frontend/src/components/PaymentText.js
@@ -21,7 +21,7 @@ class PaymentText extends Component {
             if(this.props.text.includes(method.name)){
                 custom_methods = custom_methods.replace(method.name,'')
                 rows.push(
-                    <Tooltip placement="top" enterTouchDelay="0" title={t(method.name)}>
+                    <Tooltip key={`${method.name}-${i}`} placement="top" enterTouchDelay={0} title={t(method.name)}>
                         <div style={{display: 'inline-block', width: this.props.size+2, height: this.props.size}}>
                             <PaymentIcon width={this.props.size} height={this.props.size} icon={method.icon}/>
                         </div>
@@ -32,9 +32,9 @@ class PaymentText extends Component {
 
         // Adds a Custom icon if there are words that do not match
         var chars_left = custom_methods.replace('   ','').replace('  ','').replace(' ','').replace(' ','').replace(' ','')
-        
+
         if(chars_left.length > 0){rows.push(
-            <Tooltip placement="top" enterTouchDelay="0" title={this.props.verbose ? this.props.othersText: this.props.othersText+": "+ custom_methods} >
+            <Tooltip key={"pushed"}  placement="top" enterTouchDelay={0} title={this.props.verbose ? this.props.othersText: this.props.othersText+": "+ custom_methods} >
                 <div style={{position:'relative', display: 'inline-block',width: this.props.size+2, maxHeight: this.props.size, top:'-1px'}}>
                     <PaymentIcon width={this.props.size*1.1} height={this.props.size*1.1} icon={"custom"}/>
                 </div>
@@ -49,12 +49,12 @@ class PaymentText extends Component {
     }
 
     render() {
-      return ( 
+      return (
         <div style={{display:'flex',alignItems:'center', flexWrap:'wrap'}}>
             {this.parseText()}
         </div>
       )
     }
-};
+}
 
-export default withTranslation()(PaymentText);
\ No newline at end of file
+export default withTranslation()(PaymentText);
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 8c495689..c4b0fa08 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -205,7 +205,7 @@ class TradeBox extends Component {
           <Box sx={{bgcolor:'#ffffff', width:'315px', position:'relative', left:'-5px'}} >
             <QRCode value={this.props.data.bond_invoice} size={305} style={{position:'relative', top:'3px'}}/>
           </Box>
-          <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+          <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
           </Tooltip>
         </Grid>
@@ -283,7 +283,7 @@ class TradeBox extends Component {
           <Box sx={{bgcolor:'#ffffff', width:'315px', position:'relative', left:'-5px'}} >
             <QRCode value={this.props.data.escrow_invoice} size={305} style={{position:'relative', top:'3px'}}/>
           </Box>
-          <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+          <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
           </Tooltip>
         </Grid>
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index f060cdac..1170b1fc 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -19,25 +19,28 @@ class UserGenPage extends Component {
     this.state = {
       openInfo: false,
       tokenHasChanged: false,
+      token: ""
     };
 
     this.refCode = this.props.match.params.refCode;
+  }
 
+  componentDidMount() {
     // Checks in parent HomePage if there is already a nick and token
     // Displays the existing one
     if (this.props.nickname != null){
-      this.state = {
+      this.setState({
         nickname: this.props.nickname,
         token: this.props.token? this.props.token : null,
         avatar_url: '/static/assets/avatars/' + this.props.nickname + '.png',
         loadingRobot: false
-      }
+      });
     }
     else{
       var newToken = this.genBase62Token(36)
-      this.state = {
+      this.setState({
         token: newToken
-      };
+      });
       this.getGeneratedUser(newToken);
     }
   }
@@ -78,12 +81,12 @@ class UserGenPage extends Component {
           token: token,
           avatarLoaded: false,
         })) & writeCookie("robot_token",token))
-        & 
+        &
         // If the robot has been found (recovered) we assume the token is backed up
         (data.found ? this.props.setAppState({copiedToken:true}) : null)
      });
   }
-  
+
   delGeneratedUser() {
     const requestOptions = {
       method: 'DELETE',
@@ -127,7 +130,7 @@ class UserGenPage extends Component {
   InfoDialog =() =>{
     return(
       <Dialog
-        open={this.state.openInfo}
+        open={Boolean(this.state.openInfo)}
         onClose={this.handleCloseInfo}
         aria-labelledby="info-dialog-title"
         aria-describedby="info-dialog-description"
@@ -158,13 +161,13 @@ class UserGenPage extends Component {
                 </Typography>
               </Grid>
               <Grid item xs={12} align="center">
-              <Tooltip enterTouchDelay="0" title={t("This is your trading avatar")}>
+              <Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
                 <div style={{ maxWidth: 200, maxHeight: 200 }}>
                   <Image className='newAvatar'
-                    disableError='true'
-                    cover='true'
+                    disableError={true}
+                    cover={true}
                     color='null'
-                    src={this.state.avatar_url}
+                    src={this.state.avatar_url || ""}
                   />
                 </div>
                 </Tooltip><br/>
@@ -187,7 +190,7 @@ class UserGenPage extends Component {
               <TextField sx={{maxWidth: 280}}
                 error={this.state.bad_request}
                 label={t("Store your token safely")}
-                required='true'
+                required={true}
                 value={this.state.token}
                 variant='standard'
                 helperText={this.state.bad_request}
@@ -200,13 +203,13 @@ class UserGenPage extends Component {
                 }}
                 InputProps={{
                   startAdornment:
-                  <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
+                  <Tooltip disableHoverListener enterTouchDelay={0} title={t("Copied!")}>
                     <IconButton  onClick= {()=> (navigator.clipboard.writeText(this.state.token) & this.props.setAppState({copiedToken:true}))}>
                       <ContentCopy color={this.props.avatarLoaded & !this.props.copiedToken & !this.state.bad_request ? 'primary' : 'inherit' } sx={{width:18, height:18}}/>
                     </IconButton>
                   </Tooltip>,
                   endAdornment:
-                  <Tooltip enterTouchDelay="250" title={t("Generate a new token")}>
+                  <Tooltip enterTouchDelay={250} title={t("Generate a new token")}>
                     <IconButton onClick={this.handleClickNewRandomToken}><CasinoIcon/></IconButton>
                   </Tooltip>,
                   }}
@@ -220,7 +223,7 @@ class UserGenPage extends Component {
               <span> {t("Generate Robot")}</span>
             </Button>
             :
-            <Tooltip enterTouchDelay="0" enterDelay="500" enterNextDelay="2000" title={t("You must enter a new token first")}>
+            <Tooltip enterTouchDelay={0} enterDelay={500} enterNextDelay={2000} title={t("You must enter a new token first")}>
               <div>
               <Button disabled={true} type="submit" size='small' >
                 <SmartToyIcon sx={{width:18, height:18}} />
@@ -239,12 +242,12 @@ class UserGenPage extends Component {
             </ButtonGroup>
           </Grid>
 
-          <Grid item xs={12} align="center" spacing={2} sx={{width:370}}>
+          <Grid item xs={12} align="center" sx={{width:370}}>
             <Grid item>
               <div style={{height:40}}/>
             </Grid>
             <div style={{width:370, left:30}}>
-              <Grid container xs={12} align="center">
+              <Grid container align="center">
                 <Grid item xs={0.8}/>
                 <Grid item xs={7.5} align="right">
                   <Typography component="h5" variant="h5">
diff --git a/frontend/src/components/getFlags.js b/frontend/src/components/getFlags.js
index c599f7ef..8f33c2af 100644
--- a/frontend/src/components/getFlags.js
+++ b/frontend/src/components/getFlags.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import Flags from 'country-flag-icons/react/3x2'
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import GoldIcon from './icons/GoldIcon';
@@ -7,7 +7,7 @@ import EarthIcon from './icons/EarthIcon'
 export default function getFlags(code){
     const props = {width:20,height:20}
     var flag = "";
-    
+
     if(code == 'AUD') flag = <Flags.AU {...props}/>;
     if(code == 'ARS') flag = <Flags.AR {...props}/>;
     if(code == 'BRL') flag = <Flags.BR {...props}/>;
@@ -75,4 +75,4 @@ export default function getFlags(code){
     if(code == 'XAU') flag = <GoldIcon {...props}/>;
     if(code == 'BTC') flag = <SwapCallsIcon color="primary"/>;
     return <div style={{width:28, height: 20}}>{flag}</div>;
-};
+}