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,31 +131,22 @@ 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}
+        currentProposal={currentProposal}
+        setCurrentProposal={setCurrentProposal}
+        currentEthAddresses={currentEthAddresses}
+      />
 
-      <>
-        <PairingModal
-          visible={modalVisible}
-          setModalVisible={setModalVisible}
-          currentProposal={currentProposal}
-          setCurrentProposal={setCurrentProposal}
-          currentEthAddresses={currentEthAddresses}
-        />
-        <SignModal
-          visible={signModalVisible}
-          setModalVisible={setSignModalVisible}
-          requestEvent={requestEventData}
-          requestSession={requestSession}
-          currentEthAddresses={currentEthAddresses}
-        />
-      </>
+      <SignModal
+        visible={signModalVisible}
+        setModalVisible={setSignModalVisible}
+        requestEvent={requestEventData}
+        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,42 +1,102 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { Button, TextInput } from 'react-native-paper';
+import React, { useEffect, useState } from 'react';
+import { AppState, View } from 'react-native';
+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}>
-      <TextInput
-        mode="outlined"
-        onChangeText={setCurrentWCURI}
-        value={currentWCURI}
-        placeholder="Enter WalletConnect URI"
-      />
+      {!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.signButton}>
-        <Button mode="contained" onPress={pair}>
-          Pair Session
-        </Button>
-      </View>
+          <View style={styles.inputContainer}>
+            <TextInput
+              mode="outlined"
+              onChangeText={setCurrentWCURI}
+              value={currentWCURI}
+              placeholder="Enter WalletConnect URI"
+            />
+
+            <View style={styles.signButton}>
+              <Button mode="contained" onPress={pair}>
+                Pair Session
+              </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;
 };