feat: add qr code to register nano contract

Author: alexruzenhack

src/App.js

@@ -90,6 +90,7 @@ import ShowPushNotificationTxDetails from './components/ShowPushNotificationTxDe
 import { NanoContractDetailsScreen } from './screens/NanoContract/NanoContractDetailsScreen';
 import { NanoContractTransactionScreen } from './screens/NanoContract/NanoContractTransactionScreen';
 import { NanoContractRegisterScreen } from './screens/NanoContract/NanoContractRegisterScreen';
+import { NanoContractRegisterQrCodeScreen } from './screens/NanoContractRegisterQrCodeScreen';
 
 /**
  * This Stack Navigator is exhibited when there is no wallet initialized on the local storage.
@@ -286,6 +287,72 @@ const RegisterTokenStack = ({ navigation }) => {
   );
 };
 
+/**
+ * Stack of screens dedicated to the nano contract registration process
+ */
+const RegisterNanoContractStack = ({ navigation }) => {
+  const Stack = createStackNavigator();
+  const dispatch = useDispatch();
+  const isCameraAvailable = useSelector((state) => state.isCameraAvailable);
+
+  /**
+   * Defines which screen will be the initial one, according to app camera permissions
+   * @param {null|boolean} cameraStatus
+   * @returns {string} Route name
+   */
+  const decideRouteByCameraAvailablity = (cameraStatus) => {
+    switch (isCameraAvailable) {
+      case true:
+        return 'NanoContractRegisterQrCodeScreen';
+      case false:
+        return 'NanoContractRegisterScreen';
+      default:
+        return 'RegisterCameraPermissionScreen';
+    }
+  };
+
+  // Initial screen set on component initial rendering
+  const [initialRoute, setInitialRoute] = useState(
+    decideRouteByCameraAvailablity(isCameraAvailable)
+  );
+
+  /*
+   * Request camera permission on initialization only if permission is not already set
+   */
+  useEffect(() => {
+    if (isCameraAvailable === null) {
+      dispatch(requestCameraPermission());
+    }
+  }, []);
+
+  // Listen to camera permission changes from user input and navigate to the relevant screen
+  useEffect(() => {
+    const newScreenName = decideRouteByCameraAvailablity(isCameraAvailable);
+
+    // Navigator screen already correct: no further action.
+    if (initialRoute === newScreenName) {
+      return;
+    }
+
+    // Set initial route and navigate there according to new permission set
+    setInitialRoute(newScreenName);
+    navigation.replace(newScreenName);
+  }, [isCameraAvailable]);
+
+  return (
+    <Stack.Navigator
+      initialRouteName={initialRoute}
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name='RegisterCameraPermissionScreen' component={CameraPermissionScreen} />
+      <Stack.Screen name='NanoContractRegisterQrCodeScreen' component={NanoContractRegisterQrCodeScreen} />
+      <Stack.Screen name='NanoContractRegisterScreen' component={NanoContractRegisterScreen} />
+    </Stack.Navigator>
+  );
+};
+
 const tabBarIconMap = {
   Home: 'icDashboard',
   Send: 'icSend',
@@ -397,6 +464,8 @@ const AppStack = () => {
         />
         <Stack.Screen name='PaymentRequestDetail' component={PaymentRequestDetail} />
         <Stack.Screen name='RegisterToken' component={RegisterTokenStack} />
+        <Stack.Screen name='RegisterNanoContract' component={RegisterNanoContractStack} />
+        <Stack.Screen name='Register' component={RegisterTokenStack} />
         <Stack.Screen name='ChangeToken' component={ChangeToken} />
         <Stack.Screen name={NetworkSettingsFlowNav} component={NetworkSettingsFlowStack} />
         <Stack.Screen

src/components/NanoContract/RegisterNewNanoContractButton.js

@@ -14,7 +14,7 @@ import SimpleButton from '../SimpleButton';
 export const RegisterNanoContract = () => {
   const navigation = useNavigation();
   const navigatesToRegisterNanoContract = () => {
-    navigation.navigate('NanoContractRegisterScreen');
+    navigation.navigate('RegisterNanoContract');
   };
 
   return (

src/screens/NanoContract/NanoContractRegisterScreen.js

@@ -21,6 +21,7 @@ import {
   useSelector
 } from 'react-redux';
 import { t } from 'ttag';
+import QRCode from 'react-native-qrcode-svg';
 import HathorHeader from '../../components/HathorHeader';
 import { CircleInfoIcon } from '../../components/Icons/CircleInfo.icon';
 import NewHathorButton from '../../components/NewHathorButton';
@@ -61,7 +62,9 @@ function validate(formModel) {
   return invalidModel;
 }
 
-export function NanoContractRegisterScreen({ navigation }) {
+export function NanoContractRegisterScreen({ navigation, route }) {
+  const ncIdFromQrCode = route.params?.ncId;
+
   const dispatch = useDispatch();
   const { address, error } = useSelector((state) => state.firstAddress);
   const registerState = useSelector((state) => ({
@@ -116,7 +119,7 @@ export function NanoContractRegisterScreen({ navigation }) {
       const { ncId } = formModel;
       dispatch(nanoContractRegisterRequest({ address, ncId }));
     },
-    [formModel]
+    [formModel, address]
   );
 
   const handleFeedbackModalDismiss = () => {
@@ -129,6 +132,11 @@ export function NanoContractRegisterScreen({ navigation }) {
   };
 
   useEffect(() => {
+    if (ncIdFromQrCode) {
+      // Set ncId in the input when given
+      handleInputChange('ncId')(ncIdFromQrCode);
+    }
+
     if (!address) {
       dispatch(firstAddressRequest());
     }

src/screens/NanoContractRegisterQrCodeScreen.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Hathor Labs and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import { View } from 'react-native';
+import { t } from 'ttag';
+
+import HathorHeader from '../components/HathorHeader';
+import QRCodeReader from '../components/QRCodeReader';
+import SimpleButton from '../components/SimpleButton';
+import { COLORS } from '../styles/themes';
+
+export const NanoContractRegisterQrCodeScreen = ({ navigation }) => {
+  const onSuccess = (e) => {
+    navigation.navigate('NanoContractRegisterScreen', { ncId: e.data });
+  }
+
+  const renderHeaderRightElement = () => (
+    <SimpleButton
+      // translator: Used when the QR Code Scanner is opened, and user will manually
+      // enter the information.
+      title={t`Manual info`}
+      onPress={() => navigation.navigate('NanoContractRegisterScreen')}
+    />
+  );
+
+  return (
+    <View style={{
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: COLORS.lowContrastDetail,
+      alignSelf: 'stretch',
+    }}
+    >
+      <View style={{
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        alignSelf: 'stretch',
+      }}
+      >
+        <HathorHeader
+          title={t`Register Nano Contract`.toUpperCase()}
+          onBackPress={() => navigation.pop()}
+          rightElement={renderHeaderRightElement()}
+        />
+        <View style={{
+          flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          margin: 16,
+          alignSelf: 'stretch',
+        }}
+        >
+          <QRCodeReader
+            navigation={navigation}
+            onSuccess={onSuccess}
+            bottomText={t`Scan the token QR code`}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default NanoContractRegisterQrCodeScreen;