Make QR code scalable

app/components/DisplayAsQR.tsx

@@ -0,0 +1,42 @@
+import React, { useLayoutEffect, useState, useRef } from 'react';
+import { QRCodeCanvas } from 'qrcode.react';
+
+interface Props {
+    value: string;
+    className: string;
+}
+
+/**
+ * Displays the given value as a QR code. The size of the QR is controlled by className.
+ */
+export default function QR({ value, className }: Props) {
+    const [size, setSize] = useState(0);
+    const ref = useRef<HTMLDivElement>(null);
+    const [obs] = useState(
+        new ResizeObserver((entries) => {
+            setSize(
+                ref.current !== null
+                    ? Math.min(
+                          entries[0].contentRect.height,
+                          entries[0].contentRect.width
+                      )
+                    : 0
+            );
+        })
+    );
+
+    useLayoutEffect(() => {
+        if (ref.current) {
+            obs.observe(ref.current);
+            return () => obs.disconnect();
+        }
+        return () => {};
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref.current]);
+
+    return (
+        <div className={className} ref={ref}>
+            <QRCodeCanvas size={size} value={value} />
+        </div>
+    );
+}

app/pages/Accounts/Accounts.module.scss

@@ -90,3 +90,15 @@
     top: calc(50% - 17px);
     height: 34px;
 }
+
+.displayAddressQRBig {
+    height: calc(min(512px, 70%));
+    width: calc(min(512px, 70%));
+    margin-bottom: 50px;
+}
+
+.displayAddressQRSmall {
+    height: 200px;
+    width: 200px;
+    margin: 20px;
+}

app/pages/Accounts/ShowAccountAddress.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import QRCode from 'qrcode.react';
 import { push } from 'connected-react-router';
 import clsx from 'clsx';
 import ExpandIcon from '@resources/svg/expand.svg';
@@ -11,9 +10,10 @@ import DisplayAddress, {
     AddressDisplayFormat,
 } from '~/components/DisplayAddress';
 
-import { Account, ClassName } from '../../utils/types';
-import CopyButton from '../../components/CopyButton';
+import { Account, ClassName } from '~/utils/types';
+import CopyButton from '~/components/CopyButton';
 import VerifyAddress from './VerifyAddress';
+import DisplayAsQR from '~/components/DisplayAsQR';
 
 import styles from './Accounts.module.scss';
 import CloseButton from '~/cross-app-components/CloseButton';
@@ -35,7 +35,10 @@ export default function ShowAccountAddress({
 
     const display = (
         <>
-            <QRCode className="m20" value={account.address} size={200} />
+            <DisplayAsQR
+                className={styles.displayAddressQRSmall}
+                value={account.address}
+            />
             <div className={styles.displayAddress}>
                 <DisplayAddress
                     className="mH40"

app/pages/Accounts/ShowAccountAddressFull.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import QRCode from 'qrcode.react';
 import ShrinkIcon from '@resources/svg/shrink.svg';
 import { push } from 'connected-react-router';
 import { chosenAccountSelector } from '~/features/AccountSlice';
@@ -13,6 +12,7 @@ import DisplayAddress, {
     AddressDisplayFormat,
 } from '~/components/DisplayAddress';
 import VerifyAddress from './VerifyAddress';
+import DisplayAsQR from '~/components/DisplayAsQR';
 
 import styles from './Accounts.module.scss';
 
@@ -29,7 +29,10 @@ export default function ShowAccountAddress() {
 
     const display = (
         <>
-            <QRCode className="mB50" size={512} value={account.address} />
+            <DisplayAsQR
+                className={styles.displayAddressQRBig}
+                value={account.address}
+            />
             <div className="flex alignCenter mBauto">
                 <DisplayAddress
                     className="body2 mL20"

package.json

@@ -273,7 +273,7 @@
     "noble-ed25519": "^1.0.3",
     "process": "^0.11.10",
     "promise-worker": "^2.0.1",
-    "qrcode.react": "^1.0.1",
+    "qrcode.react": "^3.0.1",
     "rc-slider": "^9.7.5",
     "react": "^16.13.1",
     "react-datepicker": "^4.3.0",

yarn.lock

@@ -15796,24 +15796,15 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-[email protected]:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
-  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
-
 qrcode-terminal@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/qrcode-terminal/-/qrcode-terminal-0.10.0.tgz#a76a48e2610a18f97fa3a2bd532b682acff86c53"
   integrity sha1-p2pI4mEKGPl/o6K9UytoKs/4bFM=
 
-qrcode.react@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-1.0.1.tgz#2834bb50e5e275ffe5af6906eff15391fe9e38a5"
-  integrity sha512-8d3Tackk8IRLXTo67Y+c1rpaiXjoz/Dd2HpcMdW//62/x8J1Nbho14Kh8x974t9prsLHN6XqVgcnRiBGFptQmg==
-  dependencies:
-    loose-envify "^1.4.0"
-    prop-types "^15.6.0"
-    qr.js "0.0.0"
+qrcode.react@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.0.1.tgz#0cb1d7cfdf3955737fbd3509c193985795ca0612"
+  integrity sha512-uCNm16ClMCrdM2R20c/zqmdwHcbMQf3K7ey39EiK/UgEKbqWeM0iH2QxW3iDVFzjQKFzH23ICgOyG4gNsJ0/gw==
 
 [email protected]:
   version "6.7.0"