Merge pull request #1543 from alephium/camera

Camera improvements

Author: nop33

.changeset/shaky-numbers-arrive.md

@@ -0,0 +1,5 @@
+---
+'@alephium/mobile-wallet': patch
+---
+
+Show warning when using wrong QR code to import wallet from desktop wallet

apps/mobile-wallet/locales/en-US/translation.json

@@ -508,5 +508,7 @@
   "Unknown address": "Unknown address",
   "The destination address has never been used before and does not appear in your transaction history. Please, ensure the address is correct before sending.": "The destination address has never been used before and does not appear in your transaction history. Please, ensure the address is correct before sending.",
   "The app can adjust the brightness when displaying QR codes.": "The app can adjust the brightness when displaying QR codes.",
-  "Allow": "Allow"
+  "Allow": "Allow",
+  "This is not the QR code you are looking for.": "This is not the QR code you are looking for.",
+  "To import from the desktop wallet, find the \"Export current wallet\" feature in the desktop wallet app settings.": "To import from the desktop wallet, find the \"Export current wallet\" feature in the desktop wallet app settings."
 }

apps/mobile-wallet/src/components/QRCodeScannerModal.tsx

@@ -1,17 +1,20 @@
-import { BarcodeScanningResult, Camera, CameraView } from 'expo-camera'
+import { isValidAddress } from '@alephium/web3'
+import { BarcodeScanningResult, CameraView, useCameraPermissions } from 'expo-camera'
 import { Camera as CameraIcon } from 'lucide-react-native'
 import { areFramesComplete, framesToData, parseFramesReducer, progressOfFrames, State as FrameState } from 'qrloop'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Dimensions } from 'react-native'
 import { Bar as ProgressBar } from 'react-native-progress'
 import styled, { useTheme } from 'styled-components/native'
 
 import AppText from '~/components/AppText'
+import Button from '~/components/buttons/Button'
 import InfoBox from '~/components/InfoBox'
 import Screen, { ScreenSection } from '~/components/layout/Screen'
 import ModalWithBackdrop from '~/components/ModalWithBackdrop'
-import { BORDER_RADIUS } from '~/style/globalStyle'
+import { BORDER_RADIUS, VERTICAL_GAP } from '~/style/globalStyle'
+import { showToast, ToastDuration } from '~/utils/layout'
 
 interface QRCodeScannerModalProps {
   onClose: () => void
@@ -25,22 +28,26 @@ let frames: FrameState
 const QRCodeScannerModal = ({ onClose, onQRCodeScan, qrCodeMode = 'simple', text }: QRCodeScannerModalProps) => {
   const theme = useTheme()
   const { t } = useTranslation()
+  const [permission, requestPermission] = useCameraPermissions()
 
-  const [hasPermission, setHasPermission] = useState<boolean>()
   const [scanned, setScanned] = useState(false)
   const [progress, setProgress] = useState(0)
 
-  useEffect(() => {
-    const getCameraPermissions = async () => {
-      const { status } = await Camera.requestCameraPermissionsAsync()
-      setHasPermission(status === 'granted')
-    }
-
-    getCameraPermissions()
-  }, [qrCodeMode])
-
   const handleBarCodeScanned = ({ data }: BarcodeScanningResult) => {
     if (qrCodeMode === 'animated') {
+      if (isValidAddress(data)) {
+        onClose()
+        showToast({
+          text1: t('This is not the QR code you are looking for.'),
+          text2: t(
+            'To import from the desktop wallet, find the "Export current wallet" feature in the desktop wallet app settings.'
+          ),
+          type: 'error',
+          visibilityTime: ToastDuration.LONG
+        })
+        return
+      }
+
       try {
         frames = parseFramesReducer(frames, data)
 
@@ -88,7 +95,7 @@ const QRCodeScannerModal = ({ onClose, onQRCodeScan, qrCodeMode = 'simple', text
   return (
     <ModalWithBackdrop visible closeModal={onClose} color={theme.bg.primary} showCloseButton animationType="fade">
       <ScreenStyled>
-        {!scanned && hasPermission && (
+        {!scanned && permission?.status === 'granted' && (
           <CameraStyled
             facing="back"
             onBarcodeScanned={handleBarCodeScanned}
@@ -98,10 +105,13 @@ const QRCodeScannerModal = ({ onClose, onQRCodeScan, qrCodeMode = 'simple', text
           </CameraStyled>
         )}
 
-        {hasPermission === false && (
+        {permission?.granted === false && (
           <ScreenSection fill verticallyCentered>
             <InfoBox title={t('Camera permissions required')} Icon={CameraIcon}>
               <AppText>{t('Please, enable access to camera through the settings of your device.')}</AppText>
+              {permission.canAskAgain && (
+                <Button title={t('Allow')} onPress={requestPermission} style={{ marginTop: VERTICAL_GAP }} />
+              )}
             </InfoBox>
           </ScreenSection>
         )}