diff --git a/App.tsx b/App.tsx index e3a81b1..9bdcb74 100644 --- a/App.tsx +++ b/App.tsx @@ -7,6 +7,7 @@ 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 { StackParamsList } from './types'; @@ -58,6 +59,13 @@ const App = (): React.JSX.Element => { headerBackVisible: false, }} /> + ); diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 4558d99..fa040e2 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -1,6 +1,7 @@ + + + { + navigation.navigate('QRScanner'); + }}> + + Connect Wallet + + diff --git a/components/QRScanner.tsx b/components/QRScanner.tsx new file mode 100644 index 0000000..bd85501 --- /dev/null +++ b/components/QRScanner.tsx @@ -0,0 +1,107 @@ +import React, { useEffect, useState } from 'react'; +import { Alert, StyleSheet, View, AppState } from 'react-native'; +import { Text, Button } from 'react-native-paper'; +import { + Camera, + useCameraDevice, + useCameraPermission, + useCodeScanner, +} from 'react-native-vision-camera'; + +import { useNavigation } from '@react-navigation/native'; +import { NativeStackNavigationProp } from '@react-navigation/native-stack'; + +import { StackParamsList } from '../types'; + +const QRScanner = () => { + const navigation = + useNavigation>(); + + const { hasPermission, requestPermission } = useCameraPermission(); + + const [isActive, setIsActive] = useState(AppState.currentState === 'active'); + const device = useCameraDevice('back'); + const [isScanning, setScanning] = useState(true); + const codeScanner = useCodeScanner({ + codeTypes: ['qr'], + onCodeScanned: codes => { + if (isScanning) { + codes.forEach(code => { + if (code.value) { + Alert.alert(`Scanned: ${code.value}`, undefined, [ + { + text: 'OK', + onPress: () => { + navigation.navigate('Laconic'); + }, + }, + ]); + + setScanning(false); + } + }); + } + }, + }); + + useEffect(() => { + const handleAppStateChange = (newState: string) => { + setIsActive(newState === 'active'); + }; + + AppState.addEventListener('change', handleAppStateChange); + + if (!hasPermission) { + requestPermission(); + } + }, [hasPermission, isActive, requestPermission]); + + if (!hasPermission) { + return ( + + No Camera Permission! + + + ); + } + + if (!device) { + return ( + + No Camera Selected! + + ); + } + + return ( + + {isActive ? ( + + ) : ( + No Camera Selected! + )} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + camera: { + width: 400, + height: 500, + borderRadius: 50, + overflow: 'hidden', + }, +}); + +export default QRScanner; diff --git a/package.json b/package.json index c17f2b3..8528009 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-native-safe-area-context": "^4.9.0", "react-native-screens": "^3.29.0", "react-native-vector-icons": "^10.0.3", + "react-native-vision-camera": "^3.9.0", "text-encoding-polyfill": "^0.6.7" }, "devDependencies": { diff --git a/types.ts b/types.ts index 3fafac2..43b38ad 100644 --- a/types.ts +++ b/types.ts @@ -5,6 +5,7 @@ export type StackParamsList = { | { network: string; address: string; message: string } | undefined; InvalidPath: undefined; + QRScanner: undefined; }; export type Account = { diff --git a/yarn.lock b/yarn.lock index 432e0ec..c35962f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6604,6 +6604,11 @@ react-native-vector-icons@^10.0.3: prop-types "^15.7.2" yargs "^16.1.1" +react-native-vision-camera@^3.9.0: + version "3.9.0" + resolved "https://registry.yarnpkg.com/react-native-vision-camera/-/react-native-vision-camera-3.9.0.tgz#6a96a6cbad53c2db84d671c388b250327681a553" + integrity sha512-q0HejFTS56s5DXWHZhlWLLZMKn/8OXALrqET+FySPIKskwYEdJ5rOV2aDlD6hlo67qCNFGUIMZWGFFc9L2os1g== + react-native@0.73.3: version "0.73.3" resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.73.3.tgz#aae18b4c6da84294c1f8e1d6446b46c887bf087c"