fix: qr-code (#801)

* fix: qr-code

* fix: linter warning

packages/react-qr/package.json

@@ -24,14 +24,12 @@
     "@polkadot/ui-settings": "3.8.2",
     "@polkadot/util": "^13.0.2",
     "@polkadot/util-crypto": "^13.0.2",
+    "@zxing/browser": "^0.1.5",
+    "@zxing/library": "^0.21.2",
     "qrcode-generator": "^1.4.4",
-    "react-qr-reader": "^2.2.1",
     "styled-components": "^6.1.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@types/react-qr-reader": "^2.1.7"
-  },
   "peerDependencies": {
     "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",

packages/react-qr/src/Scan.tsx

@@ -1,8 +1,8 @@
 // Copyright 2017-2024 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useCallback, useMemo } from 'react';
-import Reader from 'react-qr-reader';
+import { BrowserQRCodeReader, type IScannerControls } from '@zxing/browser';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { styled } from './styled.js';
 import { createImgSize } from './util.js';
@@ -23,6 +23,9 @@ const DEFAULT_ERROR = (error: Error): void => {
 };
 
 function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const controlsRef = useRef<IScannerControls | null>(null);
+
   const containerStyle = useMemo(
     () => createImgSize(size),
     [size]
@@ -33,21 +36,52 @@ function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR,
     [onError]
   );
 
-  const _onScan = useCallback(
-    (data: string | null) => data && onScan(data),
-    [onScan]
-  );
+  useEffect(() => {
+    const codeReader = new BrowserQRCodeReader();
+
+    const startScanning = async () => {
+      try {
+        const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
+        const selectedDeviceId = videoInputDevices[0].deviceId;
+
+        controlsRef.current = await codeReader.decodeFromVideoDevice(
+          selectedDeviceId,
+          videoRef.current ?? undefined,
+          (result, error) => {
+            if (result) {
+              onScan(result.getText());
+            }
+
+            if (error && !(error instanceof Error)) {
+              _onError(new Error(error));
+            }
+          }
+        );
+      } catch (error) {
+        _onError(error instanceof Error ? error : new Error('Unknown error occurred'));
+      }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    const timeoutId = setTimeout(startScanning, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+
+      if (controlsRef.current) {
+        controlsRef.current.stop();
+      }
+    };
+  }, [onScan, _onError, delay]);
 
   return (
     <StyledDiv
       className={className}
       style={containerStyle}
     >
-      <Reader
+      <video
         className='ui--qr-Scan'
-        delay={delay}
-        onError={_onError}
-        onScan={_onScan}
+        ref={videoRef}
         style={style}
       />
     </StyledDiv>
@@ -60,10 +94,6 @@ const StyledDiv = styled.div`
     height: 100%;
     transform: matrix(-1, 0, 0, 1, 0, 0);
     width: 100%;
-
-    video {
-      margin: 0;
-    }
   }
 `;
 

yarn.lock

@@ -1655,9 +1655,9 @@ __metadata:
     "@polkadot/ui-settings": "npm:3.8.2"
     "@polkadot/util": "npm:^13.0.2"
     "@polkadot/util-crypto": "npm:^13.0.2"
-    "@types/react-qr-reader": "npm:^2.1.7"
+    "@zxing/browser": "npm:^0.1.5"
+    "@zxing/library": "npm:^0.21.2"
     qrcode-generator: "npm:^1.4.4"
-    react-qr-reader: "npm:^2.2.1"
     styled-components: "npm:^6.1.1"
     tslib: "npm:^2.6.2"
   peerDependencies:
@@ -2844,15 +2844,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-qr-reader@npm:^2.1.7":
-  version: 2.1.7
-  resolution: "@types/react-qr-reader@npm:2.1.7"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10/fd008caeb7b4349e396985598c556460d8c9a00b4ba4ab382b9c43ade6a28db837aef87b5dfc0bb2ce453e587edfd7011f404dbcdd7280afce73d9968b2224f9
-  languageName: node
-  linkType: hard
-
 "@types/react@npm:*":
   version: 17.0.0
   resolution: "@types/react@npm:17.0.0"
@@ -3425,6 +3416,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@zxing/browser@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "@zxing/browser@npm:0.1.5"
+  dependencies:
+    "@zxing/text-encoding": "npm:^0.9.0"
+  peerDependencies:
+    "@zxing/library": ^0.21.0
+  dependenciesMeta:
+    "@zxing/text-encoding":
+      optional: true
+  checksum: 10/13df1471dc93b1a54c11df00caebe529fb5e4435d5876e606da048697a039098f5650724710e92cef2db746dbf89b72d04791fd89c6b9a6cf1c1b841dc24cb32
+  languageName: node
+  linkType: hard
+
+"@zxing/library@npm:^0.21.2":
+  version: 0.21.2
+  resolution: "@zxing/library@npm:0.21.2"
+  dependencies:
+    "@zxing/text-encoding": "npm:~0.9.0"
+    ts-custom-error: "npm:^3.2.1"
+  dependenciesMeta:
+    "@zxing/text-encoding":
+      optional: true
+  checksum: 10/29809998902511a34507c7e93b61b1de7be697ae9dbc9854a3371f3eebf95a479d15a050735b7e51045d11383834bbe21d78fec20d6923d85b737414d6f9d247
+  languageName: node
+  linkType: hard
+
+"@zxing/text-encoding@npm:^0.9.0, @zxing/text-encoding@npm:~0.9.0":
+  version: 0.9.0
+  resolution: "@zxing/text-encoding@npm:0.9.0"
+  checksum: 10/268e4ef64b8eaa32b990240bdfd1f7b3e2b501a6ed866a565f7c9747f04ac884fbe0537fe12bb05d9241b98fb111270c0fd0023ef0a02d23a6619b4589e98f6b
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
@@ -8484,13 +8509,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsqr@npm:^1.2.0":
-  version: 1.3.1
-  resolution: "jsqr@npm:1.3.1"
-  checksum: 10/aa87566a2d2928a447b529596292ee7e392eef70cf83258bb3029bb429db08953e54c2802e8f9c54daedf2bdba72f089a351b342f5796463c44be624aa8cd617
-  languageName: node
-  linkType: hard
-
 "jsx-ast-utils@npm:^2.4.1 || ^3.0.0":
   version: 3.2.0
   resolution: "jsx-ast-utils@npm:3.2.0"
@@ -10266,7 +10284,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -10536,20 +10554,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-qr-reader@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "react-qr-reader@npm:2.2.1"
-  dependencies:
-    jsqr: "npm:^1.2.0"
-    prop-types: "npm:^15.7.2"
-    webrtc-adapter: "npm:^7.2.1"
-  peerDependencies:
-    react: ~16
-    react-dom: ~16
-  checksum: 10/c0825017c0c836936fed376c107c6d64e3a0795fd8e54bba5f14fa46f17d0b00c6f9cfd9a3c4216cd52509d2042860f3e4fea25687167e9585dbf87642c2cc2d
-  languageName: node
-  linkType: hard
-
 "react-refresh@npm:^0.14.0":
   version: 0.14.0
   resolution: "react-refresh@npm:0.14.0"
@@ -11079,15 +11083,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rtcpeerconnection-shim@npm:^1.2.15":
-  version: 1.2.15
-  resolution: "rtcpeerconnection-shim@npm:1.2.15"
-  dependencies:
-    sdp: "npm:^2.6.0"
-  checksum: 10/cfd57301dc67dfe22a191c3809bfa0d6e5cf7fdab4632a9787743f2ab83c3a8f6870cfc7785fe132aca5df912a6193edb807217dc978fab2cf4919ba408e725b
-  languageName: node
-  linkType: hard
-
 "run-async@npm:^2.4.0":
   version: 2.4.1
   resolution: "run-async@npm:2.4.1"
@@ -11225,13 +11220,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sdp@npm:^2.12.0, sdp@npm:^2.6.0":
-  version: 2.12.0
-  resolution: "sdp@npm:2.12.0"
-  checksum: 10/2433d52c018e762147800103fec4d45389953810a6fee616be9baf4d6cccad108aef69f6e8cefd4de97419059f6c0353b92e37ec677726d72928b7aba5b77476
-  languageName: node
-  linkType: hard
-
 "select-hose@npm:^2.0.0":
   version: 2.0.0
   resolution: "select-hose@npm:2.0.0"
@@ -12213,6 +12201,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-custom-error@npm:^3.2.1":
+  version: 3.3.1
+  resolution: "ts-custom-error@npm:3.3.1"
+  checksum: 10/92e3a2c426bf6049579aeb889b6f9787e0cfb6bb715a1457e2571708be7fe739662ca9eb2a8c61b72a2d32189645f4fbcf1a370087e030d922e9e2a7b7c1c994
+  languageName: node
+  linkType: hard
+
 "ts-graphviz@npm:^1.5.0":
   version: 1.5.2
   resolution: "ts-graphviz@npm:1.5.2"
@@ -12887,16 +12882,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webrtc-adapter@npm:^7.2.1":
-  version: 7.7.0
-  resolution: "webrtc-adapter@npm:7.7.0"
-  dependencies:
-    rtcpeerconnection-shim: "npm:^1.2.15"
-    sdp: "npm:^2.12.0"
-  checksum: 10/f20f69a10a6f8e4b9be7aaa9af8b3dfac1dbb89fbed1ccedbf2437975071d9d33f8f10ca61fbeb705e3b43ed950e455e0b972340214308b921fb965e5dbc5674
-  languageName: node
-  linkType: hard
-
 "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4":
   version: 0.7.4
   resolution: "websocket-driver@npm:0.7.4"