Add functionality to scan QR while connecting wallet (#40)

* Connect with dapp using WalletConnect

* Pair dapp with wallet

* Sign message taken from dapp and return the signature

* Add todos

* Move wallet connect functions to seperate screen

* Change ui for wc modals

* Make review changes

* Add dependancy to useEffect

* Move pairing modal methods

* Integrate QR in walletconnect page

* Move styles

* Add currentEthAddresses

* Handle review changes

---------

Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>
Co-authored-by: Adw8 <adwait@deepstacksoft.com>

App.tsx

@@ -8,7 +8,6 @@ import SignMessage from './components/SignMessage';
 import HomeScreen from './components/HomeScreen';
 import SignRequest from './components/SignRequest';
 import InvalidPath from './components/InvalidPath';
-import QRScanner from './components/QRScanner';
 import PairingModal from './components/PairingModal';
 import SignModal from './components/SignModal';
 import WalletConnect from './components/WalletConnect';
@@ -132,16 +131,7 @@ const App = (): React.JSX.Element => {
             title: 'Connect Wallet',
           }}
         />
-        <Stack.Screen
-          name="QRScanner"
-          component={QRScanner}
-          options={{
-            title: 'Connect Wallet',
-          }}
-        />
       </Stack.Navigator>
-
-      <>
       <PairingModal
         visible={modalVisible}
         setModalVisible={setModalVisible}
@@ -149,6 +139,7 @@ const App = (): React.JSX.Element => {
         setCurrentProposal={setCurrentProposal}
         currentEthAddresses={currentEthAddresses}
       />
+
       <SignModal
         visible={signModalVisible}
         setModalVisible={setSignModalVisible}
@@ -156,7 +147,6 @@ const App = (): React.JSX.Element => {
         requestSession={requestSession}
         currentEthAddresses={currentEthAddresses}
       />
-      </>
     </NavigationContainer>
   );
 };

components/PairingModal.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import { Image, View, Modal } from 'react-native';
 import { Button, Text } from 'react-native-paper';
 
+import { SessionTypes } from '@walletconnect/types';
+import { getSdkError } from '@walletconnect/utils';
+
 import { PairingModalProps } from '../types';
 import styles from '../styles/stylesheet';
 import { web3wallet } from '../utils/wallet-connect/WalletConnectUtils';
 
-import { SessionTypes } from '@walletconnect/types';
-import { getSdkError } from '@walletconnect/utils';
-
 const PairingModal = ({
   visible,
-  currentEthAddresses,
   currentProposal,
+  currentEthAddresses,
   setCurrentProposal,
   setModalVisible,
 }: PairingModalProps) => {

components/WalletConnect.tsx

@@ -1,28 +1,86 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { View } from 'react-native';
+import { AppState, View } from 'react-native';
-import { Button, TextInput } from 'react-native-paper';
+import { Button, Text, TextInput } from 'react-native-paper';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+} from 'react-native-vision-camera';
 
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { web3WalletPair } from '../utils/wallet-connect/WalletConnectUtils';
 import styles from '../styles/stylesheet';
 import { StackParamsList } from '../types';
 
 const WalletConnect = () => {
-  const [currentWCURI, setCurrentWCURI] = useState<string>('');
-
   const navigation =
     useNavigation<NativeStackNavigationProp<StackParamsList>>();
 
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice('back');
+
+  const [currentWCURI, setCurrentWCURI] = useState<string>('');
+  const [isActive, setIsActive] = useState(AppState.currentState === 'active');
+  const [isScanning, setScanning] = useState(true);
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: codes => {
+      if (isScanning) {
+        codes.forEach(code => {
+          if (code.value) {
+            setCurrentWCURI(code.value);
+            setScanning(false);
+          }
+        });
+      }
+    },
+  });
+
   const pair = async () => {
     const pairing = await web3WalletPair({ uri: currentWCURI });
     navigation.navigate('Laconic');
     return pairing;
   };
 
+  useEffect(() => {
+    const handleAppStateChange = (newState: string) => {
+      setIsActive(newState === 'active');
+    };
+
+    AppState.addEventListener('change', handleAppStateChange);
+
+    if (!hasPermission) {
+      requestPermission();
+    }
+  }, [hasPermission, isActive, requestPermission]);
+
   return (
     <View style={styles.appContainer}>
+      {!hasPermission || !device ? (
+        <Text>
+          {!hasPermission ? 'No Camera Permission!' : 'No Camera Selected!'}
+        </Text>
+      ) : (
+        <>
+          <View style={styles.cameraContainer}>
+            {isActive ? (
+              <Camera
+                style={styles.camera}
+                device={device}
+                isActive={isActive}
+                codeScanner={codeScanner}
+                video={false}
+              />
+            ) : (
+              <Text>No Camera Selected!</Text>
+            )}
+          </View>
+
+          <View style={styles.inputContainer}>
             <TextInput
               mode="outlined"
               onChangeText={setCurrentWCURI}
@@ -36,7 +94,9 @@ const WalletConnect = () => {
               </Button>
             </View>
           </View>
+        </>
+      )}
+    </View>
   );
 };
-
 export default WalletConnect;

styles/stylesheet.js

@@ -191,6 +191,17 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     marginVertical: 20,
   },
+  cameraContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  inputContainer: {
+    marginTop: 20,
+  },
+  camera: {
+    width: 400,
+    height: 400,
+  },
 });
 
 export default styles;

types.ts

@@ -7,7 +7,6 @@ export type StackParamsList = {
     | { network: string; address: string; message: string }
     | undefined;
   InvalidPath: undefined;
-  QRScanner: undefined;
   WalletConnect: undefined;
 };