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

2024-12-25 13:22:38 +03:00 · 2022-08-30 12:55:53 -07:00 · 2022-08-30 12:55:53 -07:00 · e8852c2423
commit e8852c2423
parent 458f5ac4e7
10 changed files with 18116 additions and 3675 deletions
--- a/.github/workflows/frontend-build.yml
+++ b/.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
--- a/frontend/Dockerfile
+++ b/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

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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",
--- a/frontend/src/components/Charts/DepthChart/index.tsx
+++ b/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)}
          > 
--- a/frontend/src/components/Dialogs/Info.tsx
+++ b/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>
--- a/frontend/src/components/Robots/RobotAvatar/index.tsx
+++ b/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>
--- a/frontend/src/components/TradeBox.js
+++ b/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>
--- a/frontend/src/components/UserGenPage.js
+++ b/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, }}/>}
--- a/frontend/static/css/index.css
+++ b/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