Replace material-ui-image, delete qrscanner, fix dependencies

.github/workflows/frontend-build.yml

@@ -27,13 +27,15 @@ jobs:
     - name: 'Setup node'
       uses: actions/setup-node@v3
       with:
-        node-version: 16.16.0
+        node-version: 16.17.0
         cache: npm
         cache-dependency-path: frontend/package-lock.json
     - name: 'Install NPM Dependencies'
       run: |
         cd frontend
-        npm ci
+        npm install --legacy-peer-deps 
+      # npm force install with legacy-peer-deps until new @nivo/core and @nivo/line support react 18
+
     - name:  'Test'
       run: |
         cd frontend

frontend/Dockerfile

@@ -10,8 +10,8 @@ COPY package.json package.json
 COPY package-lock.json package-lock.json
 
 # packages we use
-
-RUN npm install
+# Remove --legacy-peer-deps once @nivo/core and @nivo/line are react18 compatible
+RUN npm install --legacy-peer-deps
 
 # launch
 

frontend/package.json

@@ -36,10 +36,9 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@date-io/date-fns": "^2.15.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
     "@mui/base": "^5.0.0-alpha.77",
     "@mui/icons-material": "^5.2.5",
     "@mui/lab": "^5.0.0-alpha.73",
@@ -53,17 +52,19 @@
     "i18next": "^21.6.14",
     "i18next-browser-languagedetector": "^6.1.4",
     "i18next-http-backend": "^1.4.0",
+    "install": "^0.13.0",
     "js-sha256": "^0.9.0",
-    "material-ui-image": "^3.3.2",
+    "npm": "^8.19.1",
     "openpgp": "^5.2.1",
     "react": "^18.2.0",
     "react-countdown": "^2.3.2",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.16.2",
+    "react-image": "^4.0.3",
     "react-qr-code": "^2.0.3",
-    "react-qr-reader": "^2.2.1",
     "react-responsive": "^9.0.0-beta.6",
     "react-router-dom": "^5.2.0",
+    "react-smooth-image": "^1.1.0",
     "react-world-flags": "^1.4.0",
     "reconnecting-websocket": "^4.4.0",
     "simple-plist": "^1.3.1",

frontend/src/components/Charts/DepthChart/index.tsx

@@ -264,6 +264,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
       >
         <Grid container justifyContent="flex-start" alignItems="flex-start" style={{ paddingLeft: 20 }}>
           <Select
+            variant="standard"
             value={xType}
             onChange={(e) => setXType(e.target.value)}
           > 

frontend/src/components/Dialogs/Info.tsx

@@ -12,7 +12,7 @@ import {
   AccordionDetails,
   AccordionSummary,
 } from "@mui/material"
-import Image from 'material-ui-image'
+import SmoothImage from 'react-smooth-image'
 import MediaQuery from 'react-responsive'
 
 // Icons
@@ -54,11 +54,13 @@ const InfoDialog = ({
             </Typography>
           </Grid>
           <Grid item xs={4}>
-            <Image className='newAvatar'
-              disableError={true}
-              cover={true}
-              color='null'
+            <SmoothImage
               src={window.location.origin +'/static/assets/images/v0.1.2-04.png'}
+              imageStyles={{borderRadius: "50%",
+                border: "2px solid #555", 
+                filter: "drop-shadow(1px 1px 1px #000000)",
+                height: "170px",
+                width: "170px"}}
             />
           </Grid>
         </Grid>

frontend/src/components/Robots/RobotAvatar/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Badge, Tooltip } from "@mui/material";
-import Image from 'material-ui-image'
+import SmoothImage from 'react-smooth-image'
 
 import Order from "../../../models/Order.model"
 import { useTranslation } from "react-i18next";
@@ -44,12 +44,12 @@ const RobotAvatar: React.FC<DepthChartProps> = ({ order }) => {
           badgeContent={statusBadge}
         >
           <div style={{ width: 45, height: 45 }}>
-            <Image className='bookAvatar'
-                disableError={true}
-                disableSpinner={true}
-                color='null'
-                alt={order.maker_nick}
-                src={avatarSrc}
+            <SmoothImage
+              src={avatarSrc}
+              imageStyles={{borderRadius: "50%", 
+                transform: "scaleX(-1)",
+                border: "0.3px solid #555", 
+                filter: "dropShadow(0.5px 0.5px 0.5px #000000)"}}
             />
           </div>
         </Badge>

frontend/src/components/TradeBox.js

@@ -6,13 +6,11 @@ import Countdown, { zeroPad} from 'react-countdown';
 import Chat from "./EncryptedChat"
 import TradeSummary from "./TradeSummary"
 import MediaQuery from 'react-responsive'
-import QrReader from 'react-qr-reader'
 import { copyToClipboard } from "../utils/clipboard";
 
 // Icons
 import PercentIcon from '@mui/icons-material/Percent';
 import BookIcon from '@mui/icons-material/Book';
-import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner';
 import SendIcon from '@mui/icons-material/Send';
 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -46,7 +44,6 @@ class TradeBox extends Component {
       badInvoice: false,
       badAddress: false,
       badStatement: false,
-      qrscanner: false,
     }
   }
 
@@ -616,9 +613,6 @@ class TradeBox extends Component {
     console.error(err)
   }
 
-  handleQRbutton = () => {
-    this.setState({qrscanner: !this.state.qrscanner});
-  }
   compatibleWalletsButton = () =>{
     const { t } = this.props;
 
@@ -698,22 +692,11 @@ class TradeBox extends Component {
                       }}
                       multiline
                       minRows={4}
-                      maxRows={this.state.qrscanner ? 4 : 8}
+                      maxRows={8}
                       onChange={this.handleInputInvoiceChanged}
                   />
                 </Grid>
-                {this.state.qrscanner ?
                 <Grid item xs={12} align="center">
-                  <QrReader
-                      delay={300}
-                      onError={this.handleError}
-                      onScan={this.handleScan}
-                      style={{ width: '75%' }}
-                    />
-                  </Grid>
-                  : null }
-                <Grid item xs={12} align="center">
-                  <IconButton><QrCodeScannerIcon onClick={this.handleQRbutton}/></IconButton>
                   <Button onClick={this.handleClickSubmitInvoiceButton} variant='contained' color='primary'>{t("Submit")}</Button>
                 </Grid>
               </Grid>

frontend/src/components/UserGenPage.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import { withTranslation } from "react-i18next";
 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 SmoothImage from 'react-smooth-image'
 import { InfoDialog } from './Dialogs'
 
 import SmartToyIcon from '@mui/icons-material/SmartToy';
@@ -187,7 +187,7 @@ class UserGenPage extends Component {
           <div className='clickTrough'/>
         </Grid>
         <Grid item xs={12} align="center" sx={{width:370, height:260}}>
-          {!this.state.loadingRobot ?
+          {!this.state.loadingRobot && this.state.avatarUrl ?
             <div>
               <Grid item xs={12} align="center">
                 <Typography component="h5" variant="h5">
@@ -201,15 +201,17 @@ class UserGenPage extends Component {
               <Grid item xs={12} align="center">
               <Tooltip enterTouchDelay={0} title={t("This is your trading avatar")}>
                 <div style={{ maxWidth: 200, maxHeight: 200 }}>
-                  <Image 
-                    className='newAvatar'
-                    disableError={true}
-                    cover={true}
-                    color='null'
-                    src={getCookie("sessionid") ? this.state.avatarUrl || "" : ""}
+                  <SmoothImage
+                    src={this.state.avatarUrl}
+                    imageStyles={{borderRadius: "50%",
+                      border: "2px solid #555", 
+                      filter: "drop-shadow(1px 1px 1px #000000)",
+                      height: "195px",
+                      width: "200px"}}
                   />
                 </div>
-                </Tooltip><br/>
+                </Tooltip>
+                <br/>
               </Grid>
             </div>
             : <CircularProgress sx={{position: 'relative', top: 100, }}/>}

frontend/static/css/index.css

@@ -87,14 +87,6 @@ input[type=number] {
   left: -16px;
 }
 
-.newAvatar {
-  border-radius: 50%; 
-  border: 2px solid #555; 
-  filter: drop-shadow(1px 1px 1px #000000);
-  height: 200px;
-  width: 200px;
-}
-
 .profileAvatar {
   border: 0.5px solid #555; 
   filter: drop-shadow(0.5px 0.5px 0.5px #000000);
@@ -128,13 +120,6 @@ input[type=number] {
   box-shadow: inset 0px 0px 35px rgb(255, 255, 255);
 }
 
-.bookAvatar {
-  border-radius: 50%; 
-  transform: scaleX(-1);
-  border: 0.3px solid #555; 
-  filter: drop-shadow(0.5px 0.5px 0.5px #000000);
-}
-
 .MuiButton-textInherit {color : '#111111';}
 
 ::-webkit-scrollbar