added steps

src/Main.tsx

@@ -1,23 +1,70 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Platform, SafeAreaView, StyleSheet, useColorScheme, DeviceEventEmitter } from 'react-native';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
-import StartScreen from './components/StartScreen';
+import DiscoveryScreen from './components/steps/DiscoveryScreen';
 
 //@ts-ignore
 import Keycard from "react-native-status-keycard";
+import InitializationScreen from './components/steps/InitializationScreen';
+import NFCModal from './NFCModal';
+
+enum Step {
+  Discovery,
+  Initialization,
+  Loading,
+  Authentication
+}
 
 const Main = () => {
   const isDarkMode = useColorScheme() === 'dark';
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
-  const didMount = useRef(false)
+  const didMount = useRef(false);
+  const [step, setStep] = useState(Step.Discovery);
+  const [pin, setPin] = useState(null || String);
 
+  const keycardConnectHandler = async () => {
+    try {
+      const appInfo = await Keycard.getApplicationInfo();
+
+      switch (step) {
+        case Step.Discovery:
+          if (appInfo["initialized?"]) {
+            if (appInfo["has-master-key?"]) {
+              setStep(Step.Authentication);
+            } else {
+              setStep(Step.Loading);
+            }
+          } else {
+            setStep(Step.Initialization);
+          }
+          break;
+        case Step.Initialization:
+          setStep(Step.Loading);
+          break;
+        case Step.Loading:
+          setStep(Step.Authentication);
+          break;
+        case Step.Authentication:
+          setStep(Step.Discovery);
+          break;
+        default:
+          setStep(Step.Discovery);
+          break;
+      }
+
+      if (pin) {
+        await Keycard.unpair(pin);
+      }
+    } catch (err) {
+      console.log(err);
+    }
+
+    setIsModalVisible(false);
+  }
   useEffect(() => {
     if (!didMount.current) {
       didMount.current = true;
-      DeviceEventEmitter.addListener("keyCardOnConnected", async () => {
-        console.log(await Keycard.getApplicationInfo());
-        setIsModalVisible(false);
-      });
+      DeviceEventEmitter.addListener("keyCardOnConnected", keycardConnectHandler);
       DeviceEventEmitter.addListener("keyCardOnDisconnected", () => console.log("keycard disconnected"));
       DeviceEventEmitter.addListener("keyCardOnNFCEnabled", () => console.log("nfc enabled"));
       DeviceEventEmitter.addListener("keyCardOnNFCDisabled", () => console.log("nfc disabled"));
@@ -28,7 +75,7 @@ const Main = () => {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  const exitFunc = async () => {
+  const connectCard = async () => {
     if (await Keycard.nfcIsSupported() && !await Keycard.nfcIsEnabled()) {
       await Keycard.openNfcSettings();
     }
@@ -42,7 +89,9 @@ const Main = () => {
 
   return (
     <SafeAreaView style={[backgroundStyle, styles.container]}>
-      <StartScreen onExitBtnFunc={exitFunc} isModalVisible={isModalVisible} modalVisibilityFunc={setIsModalVisible}></StartScreen>
+      {step == Step.Discovery && <DiscoveryScreen onPressFunc={connectCard}></DiscoveryScreen>}
+      {step == Step.Initialization && <InitializationScreen onPressFunc={connectCard}></InitializationScreen>}
+      <NFCModal isVisible={isModalVisible} onChangeFunc={setIsModalVisible}></NFCModal>
     </SafeAreaView>
   );
 }

src/components/StartScreen.tsx

@@ -1,34 +0,0 @@
-import {FC } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import NFCModal from "../NFCModal";
-import Button from "./Button";
-
-type StartScreenProps = {
-  onExitBtnFunc: () => void;
-  isModalVisible: boolean;
-  modalVisibilityFunc: (val: boolean) => void;
-};
-
-const  StartScreen: FC<StartScreenProps> = props => {
-  const {onExitBtnFunc, isModalVisible, modalVisibilityFunc} = props;
-
-  return (
-    <View>
-      <View>
-        <Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
-        <Button label="Exit" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onExitBtnFunc} btnJustifyContent='center'></Button>
-      </View>
-      <View>
-      <NFCModal isVisible={isModalVisible} onChangeFunc={modalVisibilityFunc}></NFCModal>
-    </View>
-    </View>
-  )};
-
-const styles = StyleSheet.create({
-  heading: {
-    textAlign: 'center',
-    fontSize: 16
-  }
-});
-
-export default StartScreen;

src/components/steps/DiscoveryScreen.tsx

@@ -0,0 +1,30 @@
+import {FC } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../Button";
+
+type DiscoveryScreenProps = {
+  onPressFunc: () => void;
+};
+
+const  DiscoveryScreen: FC<DiscoveryScreenProps> = props => {
+  const {onPressFunc} = props;
+
+  return (
+    <View>
+      <View>
+        <Text style={styles.heading}> We are recruiting Operators to be the founders of a new, self-sovereign world in cyberspace</Text>
+        <Button label="Discover" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
+      </View>
+      <View>
+    </View>
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+  heading: {
+    textAlign: 'center',
+    fontSize: 16
+  }
+});
+
+export default DiscoveryScreen;

src/components/steps/InitializationScreen.tsx

@@ -0,0 +1,30 @@
+import {FC } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import Button from "../Button";
+
+type InitializationScreenProps = {
+  onPressFunc: () => void;
+};
+
+const  InitializationScreen: FC<InitializationScreenProps> = props => {
+  const {onPressFunc} = props;
+
+  return (
+    <View>
+      <View>
+        <Text style={styles.heading}> Hello world</Text>
+        <Button label="Next" disabled={false} btnColor="#4A646C" btnWidth="100%" onChangeFunc={onPressFunc} btnJustifyContent='center'></Button>
+      </View>
+      <View>
+    </View>
+    </View>
+  )};
+
+const styles = StyleSheet.create({
+  heading: {
+    textAlign: 'center',
+    fontSize: 16
+  }
+});
+
+export default InitializationScreen;