Switch to a much better QR code scanning library

@nop33 let's double check that the new CSP rules are safe. They should be.

index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Official Alephium Wallet" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'; worker-src 'self' blob:" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

package.json

@@ -30,8 +30,7 @@
   "dependencies": {
     "electron-context-menu": "^3.1.2",
     "electron-is-dev": "^2.0.0",
-    "electron-updater": "^5.3.0",
-    "html5-qrcode": "^2.3.8"
+    "electron-updater": "^5.3.0"
   },
   "devDependencies": {
     "@alephium/sdk": "0.7.5",
@@ -91,6 +90,7 @@
     "nanoid": "^4.0.0",
     "posthog-js": "^1.52.0",
     "prettier": "^2.7.1",
+    "qr-scanner": "^1.4.2",
     "qrloop": "^1.4.1",
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.0",

src/components/QRScanner.tsx

@@ -15,22 +15,21 @@ GNU Lesser General Public License for more details.
 You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
-import { Html5Qrcode } from 'html5-qrcode'
+import Scanner from 'qr-scanner'
 import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import Select, { SelectOption } from '@/components/Inputs/Select'
 
 interface QRScannerProps {
-  onScanSuccess: (decodedText: string, decodedResult: any) => void
-  onScanFailure: (error: any) => void
+  onScanSuccess: (result: Scanner.ScanResult) => void
 }
 
-const QRScanner: React.FC<QRScannerProps> = ({ onScanSuccess, onScanFailure = () => null }) => {
-  const scannerId = 'qrScannerElement'
+const QRScanner: React.FC<QRScannerProps> = ({ onScanSuccess }) => {
+  const videoRef = useRef(null)
+  const qrCodeScannerRef = useRef<Scanner | null>(null)
   const [deviceOptions, setDeviceOptions] = useState<SelectOption<string>[]>([])
   const [selectedDeviceId, setSelectedDeviceId] = useState<string>('')
-  const html5QrCodeRef = useRef<Html5Qrcode | null>(null)
   const previousSelectedDeviceId = useRef<string | null>(null)
 
   useEffect(() => {
@@ -46,46 +45,26 @@ const QRScanner: React.FC<QRScannerProps> = ({ onScanSuccess, onScanFailure = ()
   }, [])
 
   useEffect(() => {
-    if (!selectedDeviceId) return
+    if (!selectedDeviceId || !videoRef.current) return
 
-    html5QrCodeRef.current = new Html5Qrcode(scannerId)
+    qrCodeScannerRef.current = new Scanner(videoRef.current, onScanSuccess, { highlightScanRegion: true })
 
-    const html5QrCode = html5QrCodeRef.current
+    const qrCodeScanner = qrCodeScannerRef.current
 
     previousSelectedDeviceId.current = selectedDeviceId
 
-    const startScanner = () => {
-      html5QrCode
-        .start(
-          selectedDeviceId,
-          {
-            fps: 10,
-            qrbox: { width: 300, height: 300 }
-          },
-          onScanSuccess,
-          onScanFailure
-        )
-        .catch((error) => {
-          onScanFailure(error)
-        })
-    }
-
-    if (!html5QrCode.isScanning) {
-      startScanner()
-    }
+    qrCodeScanner.setCamera(selectedDeviceId)
+    qrCodeScanner.setInversionMode('both')
+    qrCodeScanner.start()
 
     return () => {
-      if (html5QrCode.isScanning) {
-        html5QrCode.stop().catch((error) => {
-          console.error('Error stopping the QR scanner', error)
-        })
-      }
+      qrCodeScanner.stop()
     }
-  }, [selectedDeviceId, onScanSuccess, onScanFailure])
+  }, [selectedDeviceId, onScanSuccess])
 
   return (
     <ScannerContainer>
-      <Scanner id={scannerId} />
+      <ScannerVideo ref={videoRef} />
       <Select
         id="cameraSelect"
         label="Camera"
@@ -105,7 +84,7 @@ const ScannerContainer = styled.div`
   flex-direction: column;
 `
 
-const Scanner = styled.div`
+const ScannerVideo = styled.video`
   flex: 1;
   min-height: 400px;
   background-color: ${({ theme }) => theme.bg.secondary};

src/modals/SendModals/AddressInputs.tsx

@@ -16,8 +16,10 @@ You should have received a copy of the GNU Lesser General Public License
 along with the library. If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { isAddressValid } from '@alephium/sdk'
 import { motion } from 'framer-motion'
 import { AlbumIcon, ContactIcon, ScanLineIcon } from 'lucide-react'
+import Scanner from 'qr-scanner'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { useTheme } from 'styled-components'
@@ -101,10 +103,11 @@ const AddressInputs = ({
     moveFocusOnPreviousModal()
   }
 
-  const handleQRCodeScan = (addressHash: string) => {
-    console.log('SUCCESSSS')
+  const handleQRCodeScan = (scanResult: Scanner.ScanResult) => {
+    if (!isAddressValid(scanResult.data)) return // TODO: SHOW SNACKBAR
+
     if (onToAddressChange) {
-      onToAddressChange(addressHash)
+      onToAddressChange(scanResult.data)
       setIsScanningModalOpen(false)
     }
   }
@@ -209,7 +212,7 @@ const AddressInputs = ({
         )}
         {isScanningModalOpen && onToAddressChange && (
           <CenteredModal onClose={() => setIsScanningModalOpen(false)} title={t('QR code scanner')}>
-            <QRScanner onScanSuccess={handleQRCodeScan} onScanFailure={() => console.log('FAILL')} />
+            <QRScanner onScanSuccess={handleQRCodeScan} />
           </CenteredModal>
         )}
       </ModalPortal>