Upgrade MUI to V5

frontend/package-lock.json

@@ -1567,6 +1567,46 @@
         "react-is": "^16.8.0 || ^17.0.0"
       }
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.63",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.63.tgz",
+      "integrity": "sha512-/jURXlBAYqZaWw92XfJgc6aiHnDcNVuRxBskub57HXWCMK3OiVVdfUEWJEdCjOacCKiw3+Etc5alI9Omaqrg2g==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.2.3",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      }
+    },
+    "@mui/material": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.7.tgz",
+      "integrity": "sha512-JaDl9GJSV17QLf4OoDUZKvVjZ/7UvqOBAxwLwUTnKZEME4REaGTkaAeHrzLpcKCm0LlNGD2HOKAIeykI6WJiqg==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/base": "5.0.0-alpha.63",
+        "@mui/system": "^5.2.6",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
     "@mui/private-theming": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.2.3.tgz",
@@ -1626,6 +1666,11 @@
         "react-is": "^17.0.2"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
     "@react-native-community/cli-debugger-ui": {
       "version": "6.0.0-rc.0",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-6.0.0-rc.0.tgz",

frontend/package.json

@@ -26,6 +26,7 @@
     "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.11.2",
+    "@mui/material": "^5.2.7",
     "@mui/system": "^5.2.6",
     "material-ui-image": "^3.3.2",
     "react-native": "^0.66.4",

frontend/src/components/BookPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button , Divider, Card, CardActionArea, CardContent, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@material-ui/core"
+import { Button , Divider, ListItemButton, Typography, Grid, Select, MenuItem, FormControl, FormHelperText, List, ListItem, ListItemText, Avatar, RouterLink, ListItemAvatar} from "@mui/material";
 import { Link } from 'react-router-dom'
 
 export default class BookPage extends Component {
@@ -63,63 +63,72 @@ export default class BookPage extends Component {
     return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
   }
 
-  bookCards=()=>{
+  bookListItems=()=>{
     return (this.state.orders.map((order) =>
-    <Grid container item sm={4}>
+      <ListItemButton>
-      <Card elevation={6} sx={{ width: 945 }}>
+        <ListItemAvatar >
-
+          <Avatar
-        <CardActionArea value={order.id} onClick={() => this.handleCardClick(order.id)}>
+              alt={order.maker_nick}
-          <CardContent>
+              src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
-
+              />
-            <List dense="true">
+        </ListItemAvatar>
-              <ListItem >
+      </ListItemButton>
-              <ListItemAvatar >
-                  <Avatar
-                      alt={order.maker_nick}
-                      src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
-                      />
-                </ListItemAvatar>
-                <ListItemText>
-                  <Typography gutterBottom variant="h6">
-                    {order.maker_nick}
-                  </Typography>
-                </ListItemText>
-              </ListItem>
-
-              {/* CARD PARAGRAPH CONTENT */}
-              <ListItemText>
-                <Typography variant="subtitle1" color="text.secondary">
-                ◑{order.type == 0 ? <b> Buys </b>: <b> Sells </b>} 
-                  <b>{parseFloat(parseFloat(order.amount).toFixed(4))}
-                  {" " +this.getCurrencyCode(order.currency)}</b> <a> worth of bitcoin</a> 
-                </Typography>
-
-                <Typography variant="subtitle1" color="text.secondary">
-                ◑ Payment via <b>{order.payment_method}</b>
-                </Typography>
-{/* 
-                <Typography variant="subtitle1" color="text.secondary">
-                ◑ Priced {order.is_explicit ? 
-                  " explicitly at " + this.pn(order.satoshis) + " Sats" : (
-                  " at " + 
-                  parseFloat(parseFloat(order.premium).toFixed(4)) + "% over the market"                     
-                  )}
-                </Typography> */}
-
-                <Typography variant="subtitle1" color="text.secondary">
-                ◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b>  (Binance API)
-                </Typography>
-              </ListItemText>
-
-            </List>
-
-          </CardContent>
-        </CardActionArea>
-      </Card>
-      </Grid>
     ));
   }
 
+//     <Grid container item sm={4}>
+//       <Card elevation={6} sx={{ width: 945 }}>
+
+//         <CardActionArea value={order.id} onClick={() => this.handleCardClick(order.id)}>
+//           <CardContent>
+
+//             <List dense="true">
+//               <ListItem >
+//               <ListItemAvatar >
+//                   <Avatar
+//                       alt={order.maker_nick}
+//                       src={window.location.origin +'/static/assets/avatars/' + order.maker_nick + '.png'} 
+//                       />
+//                 </ListItemAvatar>
+//                 <ListItemText>
+//                   <Typography gutterBottom variant="h6">
+//                     {order.maker_nick}
+//                   </Typography>
+//                 </ListItemText>
+//               </ListItem>
+
+//               {/* CARD PARAGRAPH CONTENT */}
+//               <ListItemText>
+//                 <Typography variant="subtitle1" color="text.secondary">
+//                 ◑{order.type == 0 ? <b> Buys </b>: <b> Sells </b>} 
+//                   <b>{parseFloat(parseFloat(order.amount).toFixed(4))}
+//                   {" " +this.getCurrencyCode(order.currency)}</b> <a> worth of bitcoin</a> 
+//                 </Typography>
+
+//                 <Typography variant="subtitle1" color="text.secondary">
+//                 ◑ Payment via <b>{order.payment_method}</b>
+//                 </Typography>
+// {/* 
+//                 <Typography variant="subtitle1" color="text.secondary">
+//                 ◑ Priced {order.is_explicit ? 
+//                   " explicitly at " + this.pn(order.satoshis) + " Sats" : (
+//                   " at " + 
+//                   parseFloat(parseFloat(order.premium).toFixed(4)) + "% over the market"                     
+//                   )}
+//                 </Typography> */}
+
+//                 <Typography variant="subtitle1" color="text.secondary">
+//                 ◑ <b>{" 42,354 "}{this.getCurrencyCode(order.currency)}/BTC</b>  (Binance API)
+//                 </Typography>
+//               </ListItemText>
+
+//             </List>
+
+//           </CardContent>
+//         </CardActionArea>
+//       </Card>
+//       </Grid>
+
   render() {
       return (
         <Grid className='orderBook' container spacing={1}>
@@ -192,7 +201,12 @@ export default class BookPage extends Component {
                 Be the first one to create an order
               </Typography>
           </Grid>)
-          : this.bookCards()
+          : 
+          <Grid item>
+            <List>
+            {this.bookListItems()}
+            </List>
+          </Grid>
           }
           <Grid item xs={12} align="center">
               <Button color="secondary" variant="contained" to="/" component={Link}>

frontend/src/components/MakerPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Paper, Alert, AlertTitle, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@material-ui/core"
+import { Paper, Alert, AlertTitle, Button , Grid, Typography, TextField, Select, FormHelperText, MenuItem, FormControl, Radio, FormControlLabel, RadioGroup, Menu} from "@mui/material"
 import { Link } from 'react-router-dom'
 
 function getCookie(name) {

frontend/src/components/OrderPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@material-ui/core"
+import { Paper, Button , Grid, Typography, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, Box, LinearProgress} from "@mui/material"
 import TradeBox from "./TradeBox";
 
 function msToTime(duration) {

frontend/src/components/TradeBox.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Paper, Button, Grid, Typography, TextField, List, ListItem, ListItemText, Divider} from "@material-ui/core"
+import { Paper, Button, Grid, Typography, TextField, List, ListItem, ListItemText, Divider} from "@mui/material"
 import QRCode from "react-qr-code";
 
 function getCookie(name) {

frontend/src/components/UserGenPage.js

@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button , Grid, Typography, TextField, ButtonGroup} from "@material-ui/core"
+import { Button , Grid, Typography, TextField, ButtonGroup} from "@mui/material"
 import { Link } from 'react-router-dom'
 import Image from 'material-ui-image'
 
@@ -137,7 +137,7 @@ export default class UserGenPage extends Component {
           <Grid item xs={12} align="center">
             <ButtonGroup variant="contained" aria-label="outlined primary button group">
               <Button color='primary' to='/make/' component={Link}>Make Order</Button>
-              <Button to='/home' component={Link}>INFO</Button>
+              <Button color='inherit' to='/home' component={Link}>INFO</Button>
               <Button color='secondary' to='/book/' component={Link}>View Book</Button>
             </ButtonGroup>
           </Grid>

setup.md

@@ -69,7 +69,9 @@ npm install @mui/system @emotion/react @emotion/styled
 npm install react-native
 npm install react-native-svg
 npm install react-qr-code
+npm install @mui/material
 ```
+Note we are using mostly MaterialUI V5, but Image loading from V4 extentions (so both V4 and V5 are needed)
 
 ### Launch the React render
 from frontend/ directory