Fix warnings in Tradebox and Chat

frontend/src/components/Chat.js

@@ -84,7 +84,7 @@ class Chat extends Component {
     const { t } = this.props;
     return (
       <Container component="main" maxWidth="xs" >
-            <Grid container xs={12} spacing={0.5}>
+        <Grid container spacing={0.5}>
           <Grid item xs={0.3}/>
           <Grid item xs={5.5}>
             <Paper elevation={1} style={this.state.connected ? {backgroundColor: '#e8ffe6'}: {backgroundColor: '#FFF1C5'}}>
@@ -104,7 +104,8 @@ class Chat extends Component {
           <Grid item xs={0.3}/>
         </Grid>
         <Paper elevation={1} style={{ height: '300px', maxHeight: '300px' , width: '280px' ,overflow: 'auto', backgroundColor: '#F7F7F7' }}>
-              {this.state.messages.map(message => <>
+          {this.state.messages.map((message, index) =>
+          <li style={{listStyleType:"none"}} key={index}>
             <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 ?
@@ -138,11 +139,11 @@ class Chat extends Component {
                 subheaderTypographyProps={{sx: {wordWrap: "break-word", width: '200px', color: '#444444'}}}
               />}
               </Card>
-              </>)}
+            </li>)}
           <div style={{ float:"left", clear: "both" }} ref={(el) => { this.messagesEnd = el; }}></div>
         </Paper>
         <form noValidate onSubmit={this.onButtonClicked}>
-              <Grid containter alignItems="stretch" style={{ display: "flex" }}>
+          <Grid alignItems="stretch" style={{ display: "flex" }}>
             <Grid item alignItems="stretch" style={{ display: "flex"}}>
               <TextField
                 label={t("Type a message")}

frontend/src/components/OrderPage.js

@@ -36,6 +36,7 @@ class OrderPage extends Component {
         openCancel: false,
         openCollaborativeCancel: false,
         openInactiveMaker: false,
+        openStoreToken: false,
         tabValue: 1,
         orderId: this.props.match.params.orderId,
     };
@@ -180,8 +181,8 @@ class OrderPage extends Component {
     if(this.state.has_range){
     return(
         <Grid container align="center" alignItems="stretch" justifyContent="center" style={{ display: "flex"}}>
-          <this.InactiveMakerDialog/>
+          {this.InactiveMakerDialog()}
-          <this.StoreTokenDialog/>
+          {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")}>
             <Paper elevation={5} sx={{maxHeight:40}}>
@@ -226,8 +227,8 @@ class OrderPage extends Component {
     }else{
       return(
         <>
-        <this.InactiveMakerDialog/>
+        {this.InactiveMakerDialog()}
-        <this.StoreTokenDialog/>
+        {this.StoreTokenDialog()}
         <Button sx={{height:38}} variant='contained' color='primary'
                 onClick={this.props.copiedToken ? (this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder) : (() => this.setState({openStoreToken:true}))}>
                 {t("Take Order")}
@@ -383,7 +384,7 @@ class OrderPage 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>
@@ -532,7 +533,7 @@ class OrderPage extends Component {
               {t("Order Box")}
             </Typography>
           </MediaQuery>
-          <Paper elevation={12} style={{ padding: 8,}}>
+          <Paper elevation={12} >
           <List dense={true}>
             <ListItem >
               <ListItemAvatar sx={{ width: 56, height: 56 }}>

frontend/src/components/TradeBox.js

@@ -636,11 +636,21 @@ class TradeBox extends Component {
               <b> {t("We have received your statement")} </b>
             </Typography>
           </Grid>
-          <Grid item xs={12} align="left">
+          <Grid item xs={12} align="center">
+            <List dense={true}>
+              <Divider/>
+              <ListItem>
                 <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>
+                  {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>{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>
+              </ListItem>
+              <ListItem>
+                <Typography  variant="body2">
+                  {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).")}
+                </Typography>
+              </ListItem>
+              <Divider/>
+            </List>
           </Grid>
           {this.showBondIsSettled()}
         </Grid>
@@ -752,10 +762,20 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
+          <List dense={true}>
+            <Divider/>
+            <ListItem>
               <Typography  variant="body2" align="left">
-            <p>{t("We are waiting for the seller lock the trade amount.")}</p>
+                {t("We are waiting for the seller lock the trade amount.")}
-            <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>
+            </ListItem>
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {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).")}
+              </Typography>
+            </ListItem>
+            <Divider/>
+          </List>
         </Grid>
         {this.showBondIsLocked()}
       </Grid>
@@ -774,10 +794,21 @@ class TradeBox extends Component {
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
+          <List dense={true}>
+            <Divider/>
+            <ListItem>
               <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>
+                {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>{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>
+            </ListItem>
+
+            <ListItem>
+              <Typography  variant="body2" align="left">
+                {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).")}
+              </Typography>
+            </ListItem>
+            <Divider/>
+          </List>
         </Grid>
         {this.showBondIsLocked()}
       </Grid>