From e40ea9502972e2472b4531e15ebafacf7ae836f5 Mon Sep 17 00:00:00 2001
From: mvaivre <m.vaivre@gmail.com>
Date: Thu, 16 Nov 2023 16:41:53 +0100
Subject: [PATCH] Fix QRCode scanner rerender issues

---
 src/components/QRScanner.tsx            |  1 +
 src/modals/SendModals/AddressInputs.tsx | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/QRScanner.tsx b/src/components/QRScanner.tsx
index 271a33ce9..51873e3e7 100644
--- 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
index 11f3baa0d..faf78267d 100644
--- 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>