Implement responsive order page

frontend/src/components/BottomBar.js

@@ -33,6 +33,7 @@ export default class BottomBar extends Component {
             today_avg_nonkyc_btc_premium: 0,
             today_total_volume: 0,
             lifetime_satoshis_settled: 0,
+            robosats_running_commit_hash: '000000000000000',
         };
         this.getInfo();
       }
@@ -45,14 +46,13 @@ export default class BottomBar extends Component {
         this.setState(null)
         fetch('/api/info/')
           .then((response) => response.json())
-          .then((data) => {console.log(data) &
-            this.setState(data)
-          });
+          .then((data) => this.setState(data));
       }
 
     handleClickOpenStatsForNerds = () => {
         this.setState({openStatsForNerds: true});
     };
+
     handleClickCloseStatsForNerds = () => {
         this.setState({openStatsForNerds: false});
     };
@@ -79,7 +79,7 @@ export default class BottomBar extends Component {
                     <ListItemIcon><GitHubIcon/></ListItemIcon>
                     <ListItemText secondary="Currently running commit hash">
                         <a href={"https://github.com/Reckless-Satoshi/robosats/tree/" 
-                        + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash}
+                        + this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
                         </a>
                     </ListItemText>
                 </ListItem>

frontend/src/components/Chat.js

@@ -111,7 +111,7 @@ export default class Chat extends Component {
                 </Grid>
               </Grid>
             </form>
-            <FormHelperText>This chat has no memory. If you reload the page messages are lost.</FormHelperText>
+            <FormHelperText>This chat has no memory. If you leave and come back the messages are lost.</FormHelperText>
       </Container>
     )
   }

frontend/src/components/OrderPage.js

@@ -1,6 +1,9 @@
 import React, { Component } from "react";
-import { Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
+import PropTypes from 'prop-types';
+import { Tab, Tabs, Alert, Paper, CircularProgress, Button , Grid, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle} from "@mui/material"
 import Countdown, { zeroPad, calcTimeDelta } from 'react-countdown';
+import MediaQuery from 'react-responsive'
+
 import TradeBox from "./TradeBox";
 import getFlags from './getFlags'
 
@@ -33,6 +36,39 @@ function pn(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
 
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+TabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}
+
+
 export default class OrderPage extends Component {
   constructor(props) {
     super(props);
@@ -342,11 +378,13 @@ export default class OrderPage extends Component {
 
   orderBox=()=>{
     return(
-      <Grid container spacing={1}>
+      <Grid container spacing={1} >
         <Grid item xs={12} align="center">
-          <Typography component="h5" variant="h5">
-          Order Details
-          </Typography>
+          <MediaQuery minWidth={920}>
+            <Typography component="h5" variant="h5">
+              Order Details
+            </Typography>
+          </MediaQuery>
           <Paper elevation={12} style={{ padding: 8,}}>
           <List dense="true">
             <ListItem >
@@ -497,6 +535,47 @@ export default class OrderPage extends Component {
     )
   }
   
+  doubleOrderPageDesktop=()=>{
+    return(
+      <Grid container xs={12} align="center" spacing={2} >
+        <Grid item xs={6} align="left" style={{ width:330}} >
+            {this.orderBox()}
+        </Grid>
+        <Grid item xs={6} align="left">
+          <TradeBox data={this.state} completeSetState={this.completeSetState} />
+        </Grid>
+      </Grid>
+    )
+  }
+  
+  doubleOrderPagePhone=()=>{
+
+    const [value, setValue] = React.useState(1);
+
+    const handleChange = (event, newValue) => {
+      setValue(newValue);
+    };
+
+    return(
+      <Box sx={{ width: '100%' }}>
+        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+          <Tabs value={value} onChange={handleChange} aria-label="basic tabs" variant="fullWidth">
+            <Tab label="Order Details" {...a11yProps(0)} />
+            <Tab label="Contract Box" {...a11yProps(1)} />
+          </Tabs>
+        </Box>
+        <TabPanel value={value} index={0}>
+          <Grid container style={{ width:330}}>
+            {this.orderBox()}
+          </Grid>
+        </TabPanel>
+        <TabPanel value={value} index={1}>
+          <TradeBox data={this.state} completeSetState={this.completeSetState} />
+        </TabPanel>
+      </Box>
+  );
+  }
+
   orderDetailsPage (){
     return(
       this.state.bad_request ?
@@ -508,16 +587,19 @@ export default class OrderPage extends Component {
         </div>
         :
         (this.state.is_participant ? 
-          <Grid container xs={12} align="center" spacing={2}>
-            <Grid item xs={6} align="left">
-              {this.orderBox()}
-            </Grid>
-            <Grid item xs={6} align="left">
-              <TradeBox data={this.state} completeSetState={this.completeSetState} />
-            </Grid>
-          </Grid>
+          <>
+            {/* Desktop View */}
+            <MediaQuery minWidth={920}>
+              <this.doubleOrderPageDesktop/>
+            </MediaQuery>
+
+            {/* SmarPhone View */}
+            <MediaQuery maxWidth={919}>
+              <this.doubleOrderPagePhone/>
+            </MediaQuery>
+          </>
           :
-          <Grid item xs={12} align="center">
+          <Grid item xs={12} align="center" style={{ width:330}}>
             {this.orderBox()}
           </Grid>)
     )

frontend/src/components/TradeBox.js

@@ -3,14 +3,12 @@ import { Paper, Rating, Button, Grid, Typography, TextField, List, ListItem, Lis
 import QRCode from "react-qr-code";
 import Countdown from 'react-countdown';
 import Chat from "./Chat"
+import MediaQuery from 'react-responsive'
 
 // Icons
-import SmartToyIcon from '@mui/icons-material/SmartToy';
 import PercentIcon from '@mui/icons-material/Percent';
 import BookIcon from '@mui/icons-material/Book';
 
-
-
 function getCookie(name) {
   let cookieValue = null;
   if (document.cookie && document.cookie !== '') {
@@ -265,14 +263,6 @@ export default class TradeBox extends Component {
               </Typography>
             </ListItem>
             {/* TODO API sends data for a more confortable wait */}
-            <Divider/>
-              <ListItem>
-                <ListItemIcon>
-                  <SmartToyIcon/>
-                </ListItemIcon>
-                <ListItemText primary={'coming soon'} secondary="Robots looking at the book"/>
-              </ListItem>
-
             <Divider/>
               <ListItem>
               <ListItemIcon>
@@ -374,9 +364,12 @@ export default class TradeBox extends Component {
               label={"Payout Lightning Invoice"}
               required
               inputProps={{
-                  style: {textAlign:"center"}
+                  style: {textAlign:"center"},
+                  maxHeight: 200,
               }}
               multiline
+              minRows={4}
+              maxRows={12}
               onChange={this.handleInputInvoiceChanged}
           />
         </Grid>
@@ -750,9 +743,11 @@ handleRatingChange=(e)=>{
         <this.ConfirmDisputeDialog/>
         <this.ConfirmFiatReceivedDialog/>
         <Grid item xs={12} align="center">
-          <Typography component="h5" variant="h5">
-            Contract Box
-          </Typography>
+          <MediaQuery minWidth={920}>
+            <Typography component="h5" variant="h5">
+              Contract Box
+            </Typography>
+          </MediaQuery>
           <Paper elevation={12} style={{ padding: 8,}}>
             {/* Maker and taker Bond request */}
               {this.props.data.is_maker & this.props.data.status == 0 ? this.showQRInvoice() : ""}