Fix QRCode scanner rerender issues

alephium · Nov 16, 2023 · e40ea95 · e40ea95
1 parent 3cec3d0
commit e40ea95
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/QRScanner.tsx b/src/components/QRScanner.tsx
@@ -59,6 +59,7 @@ const QRScanner: React.FC<QRScannerProps> = ({ onScanSuccess }) => {
 
     return () => {
       qrCodeScanner.stop()
+      qrCodeScanner.destroy()
     }
   }, [selectedDeviceId, onScanSuccess])
 

diff --git a/src/modals/SendModals/AddressInputs.tsx b/src/modals/SendModals/AddressInputs.tsx
@@ -19,7 +19,7 @@ along with the library. If not, see <http://www.gnu.org/licenses/>.
 import { isAddressValid } from '@alephium/sdk'
 import { AlbumIcon, ContactIcon, ScanLineIcon } from 'lucide-react'
 import Scanner from 'qr-scanner'
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled, { useTheme } from 'styled-components'
 
@@ -98,14 +98,17 @@ const AddressInputs = ({
     moveFocusOnPreviousModal()
   }
 
-  const handleQRCodeScan = (scanResult: Scanner.ScanResult) => {
-    if (!isAddressValid(scanResult.data)) return // TODO: SHOW SNACKBAR
+  const handleQRCodeScan = useCallback(
+    (scanResult: Scanner.ScanResult) => {
+      if (!isAddressValid(scanResult.data)) return // TODO: SHOW SNACKBAR
 
-    if (onToAddressChange) {
-      onToAddressChange(scanResult.data)
-      setIsScanningModalOpen(false)
-    }
-  }
+      if (onToAddressChange) {
+        onToAddressChange(scanResult.data)
+        setIsScanningModalOpen(false)
+      }
+    },
+    [onToAddressChange]
+  )
 
   return (
     <InputsContainer>