mirror of
https://github.com/status-im/keycard-exit.git
synced 2025-01-21 00:00:43 +00:00
add scan window
This commit is contained in:
parent
3853cf27e6
commit
349b817fb9
@ -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: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user