feat: replace react-qr-svg with react-qrcode-logo

updated error correction to 25%

package.json

@@ -117,7 +117,7 @@
     "react-h5-audio-player": "^3.2.0",
     "react-intersection-observer": "^9.7.0",
     "react-mentions": "^4.4.9",
-    "react-qr-svg": "^2.2.1",
+    "react-qrcode-logo": "^2.10.0",
     "react-redux": "8.0.4",
     "react-toastify": "^6.0.9",
     "react-use": "^17.4.0",

stylesheets/_session.scss

@@ -413,21 +413,6 @@ label {
   }
 }
 
-.qr-image {
-  display: flex;
-  justify-content: center;
-
-  background: var(--white-color);
-  padding: 0.5rem;
-  svg {
-    width: 135px;
-    height: 135px;
-    border-radius: 3px;
-    padding: var(--margins-xs);
-    background-color: var(--white-color);
-  }
-}
-
 .conversation-loader {
   position: absolute;
   top: 50%;
@@ -447,15 +432,6 @@ label {
   background-color: var(--background-secondary-color);
 }
 
-#qr svg,
-.qr-image svg {
-  width: $session-modal-size-sm;
-  height: $session-modal-size-sm;
-  padding: var(--margins-xs);
-  background-color: var(--white-color);
-  border-radius: 3px;
-}
-
 .messages li {
   transition: var(--default-duration) !important;
 }

ts/components/dialog/EditProfileDialog.tsx

@@ -1,7 +1,6 @@
-import { useDispatch } from 'react-redux';
-// eslint-disable-next-line import/no-named-default
 import { ChangeEvent, MouseEvent, useState } from 'react';
-import { QRCode } from 'react-qr-svg';
+import { QRCode } from 'react-qrcode-logo';
+import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 
@@ -17,33 +16,31 @@ import { editProfileModal, updateEditProfilePictureModel } from '../../state/duc
 import { saveQRCode } from '../../util/saveQRCode';
 import { setLastProfileUpdateTimestamp } from '../../util/storage';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonType } from '../basic/SessionButton';
 import { SessionIconButton } from '../icon';
 import { SessionSpinner } from '../loading';
 
+const qrCodeId = 'session-account-id';
 const handleSaveQRCode = (event: MouseEvent) => {
   event.preventDefault();
-  saveQRCode('session-id', '220px', '220px', 'var(--white-color)', 'var(--black-color)');
+  saveQRCode(qrCodeId);
 };
 
-const StyledQRView = styled.div`
+const StyledQRView = styled(Flex)`
   cursor: pointer;
 `;
 
 const QRView = ({ sessionID }: { sessionID: string }) => {
   return (
     <StyledQRView
+      container={true}
       aria-label={window.i18n('clickToTrustContact')}
       title={window.i18n('clickToTrustContact')}
       className="qr-image"
       onClick={handleSaveQRCode}
     >
-      <QRCode
+      <QRCode id={qrCodeId} value={sessionID} ecLevel={'Q'} size={220} quietZone={10} />
-        value={sessionID}
-        bgColor="var(--white-color)"
-        fgColor="var(--black-color)"
-        level="L"
-      />
     </StyledQRView>
   );
 };

ts/components/dialog/SessionSeedModal.tsx

@@ -1,9 +1,9 @@
 import { MouseEvent, useState } from 'react';
-import { QRCode } from 'react-qr-svg';
 import { useDispatch } from 'react-redux';
 import useMount from 'react-use/lib/useMount';
 import styled from 'styled-components';
 
+import { QRCode } from 'react-qrcode-logo';
 import { Data } from '../../data/data';
 import { ToastUtils } from '../../session/utils';
 import { matchesHash } from '../../util/passwordUtils';
@@ -15,6 +15,7 @@ import { SpacerSM } from '../basic/Text';
 import { saveQRCode } from '../../util/saveQRCode';
 import { getCurrentRecoveryPhrase } from '../../util/storage';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 
 interface PasswordProps {
@@ -99,28 +100,20 @@ interface SeedProps {
 
 const StyledRecoveryPhrase = styled.i``;
 
-const StyledQRImage = styled.div`
+const StyledQRImage = styled(Flex)`
-  width: fit-content;
   margin: 0 auto var(--margins-lg);
   cursor: pointer;
 `;
 
+const qrCodeId = 'session-recovery-password';
 const handleSaveQRCode = (event: MouseEvent) => {
   event.preventDefault();
-  saveQRCode(
+  saveQRCode(qrCodeId);
-    'session-recovery-phrase',
-    '220px',
-    '220px',
-    'var(--white-color)',
-    'var(--black-color)'
-  );
 };
 
 const Seed = (props: SeedProps) => {
   const { recoveryPhrase, onClickCopy } = props;
   const i18n = window.i18n;
-  const bgColor = 'var(--white-color)';
-  const fgColor = 'var(--black-color)';
   const dispatch = useDispatch();
 
   const hexEncodedSeed = mnDecode(recoveryPhrase, 'english');
@@ -150,12 +143,13 @@ const Seed = (props: SeedProps) => {
         </p>
 
         <StyledQRImage
+          container={true}
           aria-label={window.i18n('clickToTrustContact')}
           title={window.i18n('clickToTrustContact')}
           className="qr-image"
           onClick={handleSaveQRCode}
         >
-          <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
+          <QRCode id={qrCodeId} value={hexEncodedSeed} ecLevel={'Q'} size={220} quietZone={10} />
         </StyledQRImage>
 
         <StyledRecoveryPhrase

ts/util/saveQRCode.ts

@@ -1,28 +1,14 @@
 import { saveURLAsFile } from './saveURLAsFile';
 
-export function saveQRCode(
+export function saveQRCode(id: string): void {
-  filename: string,
+  const qrCanvas = document.querySelector(`#${id}`) as HTMLCanvasElement;
-  width: string,
+  if (qrCanvas) {
-  height: string,
-  backgroundColor: string,
-  foregroundColor: string
-): void {
-  const qrSVG = document.querySelector('.qr-image svg');
-  if (qrSVG) {
-    qrSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    qrSVG.setAttribute('width', width);
-    qrSVG.setAttribute('height', height);
-    let content = qrSVG.outerHTML;
-    content = content.replaceAll(backgroundColor, 'white');
-    content = content.replaceAll(foregroundColor, 'black');
-    const file = new Blob([content], { type: 'text/plain' });
-    const url = URL.createObjectURL(file);
     saveURLAsFile({
-      filename: `${filename}-${new Date().toISOString()}.svg`,
+      filename: `${id}-${new Date().toISOString()}.png`,
-      url,
+      url: qrCanvas.toDataURL(),
       document,
     });
   } else {
-    window.log.info('[saveQRCode] QR code not found');
+    window.log.error('[saveQRCode] QR code not found!');
   }
 }

yarn.lock

@@ -8177,10 +8177,10 @@ pupa@^2.1.1:
   dependencies:
     escape-goat "^2.0.0"
 
-qr.js@0.0.0:
+qrcode-generator@^1.4.1:
-  version "0.0.0"
+  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
-  integrity sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
 
 querystringify@^2.1.1:
   version "2.2.0"
@@ -8371,13 +8371,13 @@ react-native@*:
     ws "^6.2.2"
     yargs "^17.6.2"
 
-react-qr-svg@^2.2.1:
+react-qrcode-logo@^2.10.0:
-  version "2.4.0"
+  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/react-qr-svg/-/react-qr-svg-2.4.0.tgz#c703d95907b9713192730a5bbeffb57e4aa782bd"
+  resolved "https://registry.yarnpkg.com/react-qrcode-logo/-/react-qrcode-logo-2.10.0.tgz#1d29010f3c4f27860cc152b658a5c4e30c11b2f3"
-  integrity sha512-3Q/LyjBi+eWjJ0WyZvBzyY3rCMlUBZyRnbTcKbXQ39J1bd0/vgqYhXoYai7XlDTS42Ro50BBY4TmeUVyIZh+nA==
+  integrity sha512-Q1+jLtcyDl5rLR29YdkXVLzYk62p3+541x00HxURVBQhs6SqFyEZZVhvkU/VQ082ytXa3GdCmGWMLK5z0Vhe7g==
   dependencies:
-    prop-types "^15.5.8"
+    lodash.isequal "^4.5.0"
-    qr.js "0.0.0"
+    qrcode-generator "^1.4.1"
 
 react-redux@8.0.4:
   version "8.0.4"