implement submenu

src/Main.tsx

@@ -283,7 +283,7 @@ const Main = () => {
       {step == Step.Initialization && <InitializationScreen onPressFunc={initPin} onCancelFunc={cancel}></InitializationScreen>}
       {step == Step.Loading && <MnemonicScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} onPressFunc={loadMnemonic} onCancelFunc={cancel}></MnemonicScreen>}
       {step == Step.Authentication && <Dialpad pinRetryCounter={pinDisplayCounter()} prompt={"Enter PIN"} onCancelFunc={cancel} onNextFunc={authenticate}></Dialpad>}
-      {step == Step.Home && <HomeScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} walletKey={walletKey.current} onPressFunc={login} onCancelFunc={cancel}></HomeScreen>}
+      {step == Step.Home && <HomeScreen pinRequired={pinRef.current ? false : true} pinRetryCounter={pinDisplayCounter()} walletKey={walletKey.current} onPressFunc={login} onCancelFunc={cancel} onFactoryResetFunc={startFactoryReset}></HomeScreen>}
       {step == Step.FactoryReset && <FactoryResetScreen pinRetryCounter={pinDisplayCounter()} onPressFunc={connectCard} onCancelFunc={cancel}></FactoryResetScreen>}
       <NFCModal isVisible={isModalVisible} onChangeFunc={stopNFC}></NFCModal>
     </SafeAreaView>

src/Styles.tsx

@@ -98,10 +98,10 @@ const Styles = StyleSheet.create({
       },
       navContainer: {
         flexDirection: 'row',
-        width: '95%',
-        marginLeft: '2.5%',
-        marginRight: '2.55%'
-      }
+        width: '90%',
+        marginLeft: '5%',
+        marginRight: '5%'
+      },
 });
 
 export default Styles

src/components/SubMenuModal.tsx

@@ -0,0 +1,57 @@
+import React, {FC} from "react";
+import {StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import Modal from "react-native-modal/dist/modal";
+import Styles from "../Styles";
+import Button from "./Button";
+
+type SubMenuProps = {
+  isVisible: boolean;
+  onLogout: () => void;
+  onFactoryReset: () => void;
+  onChangeFunc: () => void;
+};
+
+const SubMenuModal: FC<SubMenuProps> = props => {
+  const {isVisible, onLogout, onFactoryReset, onChangeFunc} = props;
+
+  return (
+    <Modal isVisible={isVisible} backdropOpacity={0} onBackdropPress={onChangeFunc} style={styles.container} animationIn={"bounceIn"} animationOut={"bounceOut"}>
+        <View style={styles.submenuContent}>
+            <TouchableOpacity onPress={onFactoryReset} style={styles.itemContainer}>
+                <Text style={styles.menuText}>Factory Reset</Text>
+            </TouchableOpacity>
+            <View style={{borderBottomColor: 'white', borderBottomWidth: StyleSheet.hairlineWidth}}
+/>
+            <TouchableOpacity onPress={onLogout} style={styles.itemContainer}>
+                <Text style={styles.menuText}>Logout</Text>
+            </TouchableOpacity>
+        </View>
+    </Modal>
+  )};
+
+  const styles = StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        top: '15%',
+        right: '2.5%',
+        margin: 0,
+        position: 'absolute',
+        backgroundColor: '#333333',
+        borderRadius: 5,
+      },
+    submenuContent: {
+
+    },
+    itemContainer: {
+        paddingVertical: 20,
+        paddingLeft: 20,
+        paddingRight: 80
+    },
+    menuText: {
+        color: 'white',
+        fontFamily: 'Inter',
+        fontSize: 14
+    }
+  });
+
+export default SubMenuModal;

src/components/steps/HomeScreen.tsx

@@ -1,5 +1,5 @@
 import {FC, useEffect, useRef, useState } from "react";
-import { SafeAreaView, StyleSheet, Text, View } from "react-native";
+import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import Button from "../Button";
 import { Camera, useCameraDevice, useCameraPermission, useCodeScanner } from "react-native-vision-camera";
 import { hexToBytes } from "@noble/hashes/utils";
@@ -8,6 +8,9 @@ import { ripemd160 } from "@noble/hashes/ripemd160";
 import { sha256 } from "@noble/hashes/sha256";
 import ReceiveModal from "../../ReceiveModal";
 import Dialpad from "../Dialpad";
+import Styles from "../../Styles";
+import Icon from 'react-native-vector-icons/Feather';
+import SubMenuModal from "../SubMenuModal";
 
 enum HomeSteps {
   Home,
@@ -21,12 +24,14 @@ type HomeScreenProps = {
   walletKey: string;
   onPressFunc: (sessionId: string, challenge: string, p?: string) => void;
   onCancelFunc: () => void;
+  onFactoryResetFunc: () => void;
 };
 
 const  HomeScreen: FC<HomeScreenProps> = props => {
-  const {pinRequired, pinRetryCounter, walletKey, onPressFunc, onCancelFunc} = props;
+  const {pinRequired, pinRetryCounter, walletKey, onPressFunc, onCancelFunc, onFactoryResetFunc} = props;
   const [step, setStep] = useState(HomeSteps.Home);
-  const [receiveVisible, setReceiveVisible] = useState(false)
+  const [receiveVisible, setReceiveVisible] = useState(false);
+  const [isMenuVisible, setMenuVisible] = useState<boolean>(false);
   const challengeRef = useRef("");
   const sessionRef = useRef("");
   
@@ -80,6 +85,10 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
     return bech32.encode('bc', words);
   }
 
+  const openSubMenu = () => {
+    setMenuVisible(true);
+  }
+
   useEffect(() => {
     if (!hasPermission) {
       if (!requestPermission()) {
@@ -88,9 +97,14 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
     }
   });
 
-  return <View style={styles.container}>
+  return <View style={Styles.container}>
     {step == HomeSteps.Home && 
     <View>
+      <View style={styles.homeTextContainer}>
+        <Text style={styles.homeHeading}>My Operators</Text>
+        <TouchableOpacity style={styles.subMenu} onPress={openSubMenu}><Icon name="more-horizontal" size={24} color="white" /></TouchableOpacity>
+      </View>
+      <SubMenuModal isVisible={isMenuVisible} onFactoryReset={onFactoryResetFunc} onLogout={onCancelFunc} onChangeFunc={() => {setMenuVisible(false)}}/>
       <Button label="Scan" disabled={false}  onChangeFunc={() => setStep(HomeSteps.ScanCode)}></Button>
       <Button label="Receive" disabled={false}  onChangeFunc={() => setReceiveVisible(true)}></Button>
       <Button label="Cancel" disabled={false}  onChangeFunc={onCancelFunc}></Button>
@@ -98,7 +112,7 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
     </View>
     }
     {step == HomeSteps.ScanCode && 
-    <View style={styles.container}>
+    <View style={Styles.container}>
       <Camera style={StyleSheet.absoluteFill} device={cameraDevice!} isActive={true} codeScanner={codeScanner}/>
     </View>
     }
@@ -107,16 +121,27 @@ const  HomeScreen: FC<HomeScreenProps> = props => {
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'black',
+  homeTextContainer: {
+    paddingTop: 45,
+    flexDirection: 'row',
+    width: '95%',
+    marginLeft: '2.5%',
+    marginRight: '2.5%'
   },
-  heading: {
+  homeHeading: {
     textAlign: 'center',
-    fontSize: 30,
+    fontSize: 28,
     fontFamily: 'Inter',
-    color: '#199515',
-    marginTop: '50%'
+    color: 'white',
+    lineHeight: 36,
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: 'auto'
+  },
+  subMenu: {
+    flexGrow: 0,
+    flexShrink: 1,
+    flexBasis: 24
   },
   prompt: {
     textAlign: 'center',