add scan window

This commit is contained in:
Michele Balistreri 2024-09-30 13:29:56 +02:00
parent 3853cf27e6
commit 349b817fb9
No known key found for this signature in database
GPG Key ID: E9567DA33A4F791A

View File

@ -1,7 +1,13 @@
import {FC, useEffect } from "react"; import {FC, useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native"; import { SafeAreaView, StyleSheet, Text, View } from "react-native";
import Button from "../Button"; import Button from "../Button";
import { useCameraDevice, useCameraPermission, useCodeScanner } from "react-native-vision-camera"; import { Camera, useCameraDevice, useCameraPermission, useCodeScanner } from "react-native-vision-camera";
enum HomeSteps {
Home,
ScanCode,
ShowAddress,
}
type HomeScreenProps = { type HomeScreenProps = {
walletKey: string; walletKey: string;
@ -11,12 +17,15 @@ type HomeScreenProps = {
const HomeScreen: FC<HomeScreenProps> = props => { const HomeScreen: FC<HomeScreenProps> = props => {
const {walletKey, onPressFunc, onCancelFunc} = props; const {walletKey, onPressFunc, onCancelFunc} = props;
const cameraDevice = useCameraDevice('back') const [step, setStep] = useState(HomeSteps.Home);
const { hasPermission, requestPermission } = useCameraPermission(); const cameraDevice = useCameraDevice('back');
const {hasPermission, requestPermission} = useCameraPermission();
const codeScanner = useCodeScanner({ const codeScanner = useCodeScanner({
codeTypes: ['qr'], codeTypes: ['qr'],
onCodeScanned: (codes) => { onCodeScanned: (codes) => {
console.log(`Scanned ${codes.length} codes!`) console.log(`Scanned ${codes.length} codes!`)
//TODO: implement
setStep(HomeSteps.Home);
} }
}); });
@ -32,15 +41,19 @@ const HomeScreen: FC<HomeScreenProps> = props => {
} }
}); });
return ( if (step == HomeSteps.Home) {
<View> return <SafeAreaView>
<View> <Text style={styles.prompt}>{walletAddress()}</Text>
<Text style={styles.heading}> Success</Text> <Button label="Scan" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ScanCode)} btnJustifyContent='center'></Button>
<Text style={styles.prompt}>{walletAddress()}</Text> <Button label="Receive" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={() => setStep(HomeSteps.ShowAddress)} btnJustifyContent='center'></Button>
<Button label="Home" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button> <Button label="Cancel" disabled={false} btnColor="#199515" btnBorderColor="#199515" btnFontSize={17} btnBorderWidth={1} btnWidth="100%" onChangeFunc={onCancelFunc} btnJustifyContent='center'></Button>
</View> </SafeAreaView>
</View> } else if (step == HomeSteps.ScanCode) {
)}; return <Camera style={StyleSheet.absoluteFill} device={cameraDevice!} isActive={true} codeScanner={codeScanner}/>
} else {
return <SafeAreaView></SafeAreaView>
}
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
heading: { heading: {