upgrade qr code scanner and fix #1476

package-lock.json

@@ -19,7 +19,7 @@
         "@prisma/client": "^5.20.0",
         "@slack/web-api": "^7.6.0",
         "@svgr/webpack": "^8.1.0",
-        "@yudiel/react-qr-scanner": "^1.2.10",
+        "@yudiel/react-qr-scanner": "^2.0.8",
         "acorn": "^8.12.1",
         "ajv": "^8.17.1",
         "async-mutex": "^0.5.0",
@@ -5683,6 +5683,16 @@
         "@types/ms": "*"
       }
     },
+    "node_modules/@types/dom-webcodecs": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/@types/dom-webcodecs/-/dom-webcodecs-0.1.13.tgz",
+      "integrity": "sha512-O5hkiFIcjjszPIYyUSyvScyvrBoV3NOEEZx/pMlsu44TKzWNkLVBBxnxJz42in5n3QIolYOcBYFCPZZ0h8SkwQ=="
+    },
+    "node_modules/@types/emscripten": {
+      "version": "1.39.13",
+      "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.39.13.tgz",
+      "integrity": "sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw=="
+    },
     "node_modules/@types/estree": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -6190,37 +6200,18 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
     "node_modules/@yudiel/react-qr-scanner": {
-      "version": "1.2.10",
+      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-1.2.10.tgz",
+      "resolved": "https://registry.npmjs.org/@yudiel/react-qr-scanner/-/react-qr-scanner-2.0.8.tgz",
-      "integrity": "sha512-I94AyrEu/2oZxXT6TEOK9+K2IfjqfPmic/GUah7alMIxfgXP9rs9+IZE56JhQr4pZ7Iz2RUC4JFfeaysFYNEIA==",
+      "integrity": "sha512-/7WHsdC1a/Z909J2zZxqgpUQ1iI554fZxIagucH/tFu1MhZkNIeykYI1OdZgDEwV4CzuSi+h90wwNrhmETcmRw==",
       "dependencies": {
-        "@zxing/library": "^0.20.0"
+        "barcode-detector": "^2.2.7",
+        "webrtc-adapter": "9.0.1"
       },
       "peerDependencies": {
-        "react": "^18.0.0",
+        "react": "^17 || ^18",
-        "react-dom": "^18.0.0"
+        "react-dom": "^17 || ^18"
       }
     },
-    "node_modules/@zxing/library": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.20.0.tgz",
-      "integrity": "sha512-6Ev6rcqVjMakZFIDvbUf0dtpPGeZMTfyxYg4HkVWioWeN7cRcnUWT3bU6sdohc82O1nPXcjq6WiGfXX2Pnit6A==",
-      "dependencies": {
-        "ts-custom-error": "^3.2.1"
-      },
-      "engines": {
-        "node": ">= 10.4.0"
-      },
-      "optionalDependencies": {
-        "@zxing/text-encoding": "~0.9.0"
-      }
-    },
-    "node_modules/@zxing/text-encoding": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
-      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
-      "optional": true
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -6927,6 +6918,15 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/barcode-detector": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-2.2.11.tgz",
+      "integrity": "sha512-N50XZ6Rav2sxTgHXOc38/mkpVJMan11GZ8Yqi1pPMZpTJSXuZ/FpIee6OtLehZX/Vs4ZOzGbp1DgXzFCfKggWA==",
+      "dependencies": {
+        "@types/dom-webcodecs": "^0.1.13",
+        "zxing-wasm": "1.2.14"
+      }
+    },
     "node_modules/base-x": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/base-x/-/base-x-3.0.10.tgz",
@@ -18030,6 +18030,11 @@
       "resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.9.tgz",
       "integrity": "sha512-qGVDoreyYiP1pkQnbnFAUIS5AjenNwwQBdl7zeos9etl+hYKWahjRTfzAZZYBv5xNHx7vNKCmaLDQZ6Fr2AEXg=="
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
+    },
     "node_modules/secp256k1": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/secp256k1/-/secp256k1-4.0.3.tgz",
@@ -19351,14 +19356,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/ts-custom-error": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
-      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/ts-invariant": {
       "version": "0.10.3",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.10.3.tgz",
@@ -20296,6 +20293,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
+      "integrity": "sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==",
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
@@ -20980,6 +20989,14 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/zxing-wasm": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/zxing-wasm/-/zxing-wasm-1.2.14.tgz",
+      "integrity": "sha512-UaYfzSmFPIEmYDt/KyPvs/H02t8jO470BBFHUIlvtmloAm8f2zdAmOL93iWYQ5QYfSnTyFPg0yzZwznlBjfg4A==",
+      "dependencies": {
+        "@types/emscripten": "^1.39.13"
+      }
     }
   }
 }

package.json

@@ -24,7 +24,7 @@
     "@prisma/client": "^5.20.0",
     "@slack/web-api": "^7.6.0",
     "@svgr/webpack": "^8.1.0",
-    "@yudiel/react-qr-scanner": "^1.2.10",
+    "@yudiel/react-qr-scanner": "^2.0.8",
     "acorn": "^8.12.1",
     "ajv": "^8.17.1",
     "async-mutex": "^0.5.0",

pages/wallet/index.js

@@ -22,7 +22,7 @@ import HiddenWalletSummary from '@/components/hidden-wallet-summary'
 import AccordianItem from '@/components/accordian-item'
 import { lnAddrOptions } from '@/lib/lnurl'
 import useDebounceCallback from '@/components/use-debounce-callback'
-import { QrScanner } from '@yudiel/react-qr-scanner'
+import { Scanner } from '@yudiel/react-qr-scanner'
 import CameraIcon from '@/svgs/camera-line.svg'
 import { useShowModal } from '@/components/modal'
 import { useField } from 'formik'
@@ -282,17 +282,24 @@ function InvoiceScanner ({ fieldName }) {
       onClick={() => {
         showModal(onClose => {
           return (
-            <QrScanner
+            <Scanner
-              onDecode={(result) => {
+              formats={['qr_code']}
+              onScan={([{ rawValue: result }]) => {
+                result = result.toLowerCase()
                 if (result.split('lightning=')[1]) {
-                  helpers.setValue(result.split('lightning=')[1].split(/[&?]/)[0].toLowerCase())
+                  helpers.setValue(result.split('lightning=')[1].split(/[&?]/)[0])
                 } else if (decode(result.replace(/^lightning:/, ''))) {
-                  helpers.setValue(result.replace(/^lightning:/, '').toLowerCase())
+                  helpers.setValue(result.replace(/^lightning:/, ''))
                 } else {
                   throw new Error('Not a proper lightning payment request')
                 }
                 onClose()
               }}
+              styles={{
+                video: {
+                  aspectRatio: '1 / 1'
+                }
+              }}
               onError={(error) => {
                 if (error instanceof DOMException) {
                   console.log(error)