bugfix: QR code scanning was failing to retrieve recipient's address in send flow

.changeset/spotty-jobs-poke.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+QR code scanning was failling to retrieve recipient's address in send flow

apps/ledger-live-mobile/src/components/Scanner.tsx

@@ -1,64 +1,115 @@
-import React, { useContext } from "react";
-import { StyleSheet, View } from "react-native";
-import { BarCodeScanningResult, Camera, CameraType } from "expo-camera/legacy";
-import { Flex } from "@ledgerhq/native-ui";
-import StyledStatusBar from "./StyledStatusBar";
-import CameraScreen from "./CameraScreen";
-import getWindowDimensions from "~/logic/getWindowDimensions";
-import RequiresCameraPermissions from "./RequiresCameraPermissions";
-import CameraPermissionContext from "./RequiresCameraPermissions/CameraPermissionContext";
-import ForceTheme from "./theme/ForceTheme";
+import React from "react";
+import { Box, Flex, Icons, NumberedList, ProgressBar, Text } from "@ledgerhq/native-ui";
+import { Trans, useTranslation } from "react-i18next";
+import { useTheme } from "styled-components/native";
+import { CameraView, BarcodeScanningResult } from "expo-camera";
+import RequiresCameraPermissions from "~/components/RequiresCameraPermissions";
+import CameraPermissionContext from "~/components/RequiresCameraPermissions/CameraPermissionContext";
+import ScanTargetSvg from "./CameraScreen/ScanTargetSvg";
 
 type Props = {
-  onResult: (_: string) => void;
-  liveQrCode?: boolean;
+  onResult: (data: string) => void;
+  liveQRCode?: boolean;
   progress?: number;
-  instruction?: React.ReactNode | string;
 };
 
-const Scanner = ({ onResult, liveQrCode, progress, instruction }: Props) => {
-  const hasPermission = useContext(CameraPermissionContext).permissionGranted;
-  const { width, height } = getWindowDimensions();
-
-  if (!hasPermission) return <View />;
+const ScanQrCode = ({ onResult, liveQRCode = false, progress }: Props) => {
+  const { t } = useTranslation();
+  const { colors } = useTheme();
+  const onBarCodeScanned = ({ data }: BarcodeScanningResult) => {
+    onResult(data);
+  };
 
   return (
-    <ForceTheme selectedPalette="dark">
-      <Flex flex={1}>
-        <StyledStatusBar barStyle="light-content" />
-        <Camera
-          style={styles.camera}
-          type={CameraType.back}
-          ratio="16:9"
-          onBarCodeScanned={({ data }: BarCodeScanningResult) => onResult(data)}
-          barCodeScannerSettings={{
-            barCodeTypes: ["qr"],
-          }}
+    <Flex
+      flex={1}
+      justifyContent="flex-start"
+      alignItems={"center"}
+      rowGap={24}
+      testID={"scan-camera"}
+    >
+      <Box height={100} />
+      <RequiresCameraPermissions optimisticallyMountChildren fallBackHasNoBackground>
+        <Flex
+          borderRadius={36}
+          overflow={"hidden"}
+          position={"relative"}
+          width={288}
+          height={288}
+          justifyContent={"center"}
+          alignItems={"center"}
         >
-          <CameraScreen
-            liveQrCode={liveQrCode}
-            progress={progress}
-            width={width}
-            height={height}
-            instruction={instruction}
-          />
-        </Camera>
-      </Flex>
-    </ForceTheme>
-  );
-};
+          <CameraPermissionContext.Consumer>
+            {({ permissionGranted }) =>
+              permissionGranted ? (
+                <CameraView
+                  active={permissionGranted ?? false}
+                  style={{
+                    backgroundColor: colors.neutral.c50,
+                    width: 280,
+                    height: 280,
+                  }}
+                  barcodeScannerSettings={{
+                    barcodeTypes: ["qr"],
+                  }}
+                  onBarcodeScanned={onBarCodeScanned}
+                />
+              ) : null
+            }
+          </CameraPermissionContext.Consumer>
+          <ScanTargetSvg style={{ position: "absolute" }} />
+        </Flex>
+        <Flex flexDirection={"row"} alignItems={"center"} columnGap={8}>
+          <Text variant="bodyLineHeight">
+            {t("walletSync.synchronize.qrCode.scan.description")}
+          </Text>
+          <Icons.QrCode />
+        </Flex>
+        {liveQRCode && (
+          <Flex p={3}>
+            <Text variant={"h5"} fontWeight={"semiBold"} mb={6}>
+              <Trans
+                i18nKey={liveQRCode ? "account.import.newScan.title" : "send.scan.descBottom"}
+              />
+            </Text>
 
-const ScannerWrappedInRequiresCameraPermission: React.FC<Props> = props => {
-  return (
-    <RequiresCameraPermissions optimisticallyMountChildren>
-      <Scanner {...props} />
-    </RequiresCameraPermissions>
+            <>
+              {progress !== undefined && progress > 0 ? (
+                <Box>
+                  <Text variant={"body"} color={"neutral.c80"} mb={6}>
+                    <Trans i18nKey={"account.import.newScan.hodl"} />
+                  </Text>
+                  <ProgressBar
+                    length={100}
+                    index={Math.floor((progress || 0) * 100)}
+                    bg={"neutral.c40"}
+                    height={8}
+                    borderRadius={2}
+                    activeBarProps={{ bg: "primary.c80", borderRadius: 2 }}
+                  />
+                </Box>
+              ) : (
+                <NumberedList
+                  items={[
+                    {
+                      description: <Trans i18nKey={"account.import.newScan.instructions.line1"} />,
+                    },
+                    {
+                      description: <Trans i18nKey={"account.import.newScan.instructions.line2"} />,
+                    },
+                    {
+                      description: <Trans i18nKey={"account.import.newScan.instructions.line3"} />,
+                    },
+                  ]}
+                  itemContainerProps={{ mb: 3 }}
+                />
+              )}
+            </>
+          </Flex>
+        )}
+      </RequiresCameraPermissions>
+    </Flex>
   );
 };
 
-export default ScannerWrappedInRequiresCameraPermission;
-const styles = StyleSheet.create({
-  camera: {
-    flex: 1,
-  },
-});
+export default ScanQrCode;

apps/ledger-live-mobile/src/locales/en/common.json

@@ -3725,7 +3725,7 @@
     "highFeeModal": "Be careful, network fees are greater than <1>10%</1> of the amount. Do you want to continue?",
     "scan": {
       "title": "Scan QR code",
-      "descBottom": "Please center the QR code inside the square.",
+      "descBottom": "Scan QR code",
       "fallback": {
         "header": "Scan QR code",
         "title": "Enable camera",

apps/ledger-live-mobile/src/screens/ImportAccounts/Scan.tsx

@@ -102,11 +102,11 @@ class Scan extends PureComponent<
   };
 
   render() {
-    const { progress, error } = this.state;
+    const { error, progress } = this.state;
     return (
       <View style={styles.root}>
         <TrackScreen category="Account Import Sync" />
-        <Scanner onResult={this.onBarCodeRead} progress={progress} liveQrCode />
+        <Scanner onResult={this.onBarCodeRead} liveQRCode progress={progress} />
         <GenericErrorBottomModal error={error} onClose={this.onCloseError} />
       </View>
     );

apps/ledger-live-mobile/src/screens/Settings/Debug/Broken/BenchmarkQRStream.tsx

@@ -87,7 +87,7 @@ class BenchmarkQRStream extends PureComponent<Props, State> {
           },
         ]}
       >
-        <Scanner onResult={this.onBarCodeRead} liveQrCode />
+        <Scanner onResult={this.onBarCodeRead} liveQRCode />
         <View style={[darkenStyle]} />
         <View style={[darkenStyle, styles.centered]}>
           <View style={styles.centered}>