Merge pull request #5241 from swaponline/fix-qr-code-generation

Fix: correct QR generation in deposit

Author: noxonsu

.gitignore

@@ -1,6 +1,7 @@
 # editors
 
 .idea
+.vscode
 .DS_Store
 .eslintcache
 *-lock.*

package.json

@@ -241,6 +241,7 @@
     "graphql-request": "^3.4.0",
     "history": "^4.9.0",
     "human-standard-token-abi": "^2.0.0",
+    "ip": "^2.0.1",
     "is-local-ip": "^1.1.0",
     "jdenticon": "^3.1.0",
     "json-stringify-safe": "^5.0.1",
@@ -272,6 +273,7 @@
     "react-items-carousel": "^2.8.0",
     "react-joyride": "^2.3.0",
     "react-loading-skeleton": "^3.0.1",
+    "react-qr-code": "^2.0.12",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/front/shared/components/QR/QR.tsx

@@ -1,57 +1,34 @@
 import React, { Component } from 'react'
 import CSSModules from 'react-css-modules'
-import animateFetching from 'components/loaders/ContentLoader/ElementLoading.scss'
+import QRCode from "react-qr-code"
 
 import styles from './QR.scss'
 
 type ComponentProps = {
   address: string
 }
 
-type ComponentState = {
-  qrIsLoaded: boolean
-}
-
-@CSSModules({ ...styles, ...animateFetching }, { allowMultiple: true })
-export default class QR extends Component<ComponentProps, ComponentState> {
+@CSSModules({ ...styles }, { allowMultiple: true })
+export default class QR extends Component<ComponentProps, any> {
 
   constructor(props) {
     super(props)
-
-    this.state = {
-      qrIsLoaded: false,
-    }
-  }
-
-  setSuccessLoading = () => {
-    const { qrIsLoaded } = this.state
-
-    if (!qrIsLoaded) {
-      this.setState(() => ({
-        qrIsLoaded: true
-      }))
-    }
   }
 
   render() {
     const { address } = this.props
-    const { qrIsLoaded } = this.state
-    const size = 270
 
     return (
-      <>
-        <div className={styles.relativeWrapper}>
-          <div className={styles.imageWrapper}>
-            <img
-              styleName={`${qrIsLoaded ? '' : 'hiddenEl'}`}
-              src={`https://chart.googleapis.com/chart?chs=${size}x${size}&cht=qr&chl=${address}`}
-              onLoad={this.setSuccessLoading}
-              alt={address}
-            />
-            <span styleName={`imageLoader ${qrIsLoaded ? 'hiddenEl' : 'animate-fetching'}`} />
-          </div>
+      <div className={styles.relativeWrapper}>
+        <div className={styles.imageWrapper}>
+          <QRCode
+            size={270}
+            value={address}
+            bgColor="var(--color-background)"
+            fgColor="var(--color)"
+          />
         </div>
-      </>
+      </div>
     )
   }
 }