help screen - UI/UX improvements

app/App.tsx

@@ -85,7 +85,7 @@ function App(): JSX.Element {
   
 
   const isDarkMode = useColorScheme() === 'dark';
-  const [passportNumber, setPassportNumber] = useState(DEFAULT_PNUMBER ?? '');
+  const [passportNumber, setPassportNumber] = useState(DEFAULT_PNUMBER ?? "");
   const [dateOfBirth, setDateOfBirth] = useState(DEFAULT_DOB ?? '');
   const [dateOfExpiry, setDateOfExpiry] = useState(DEFAULT_DOE ?? '');
   const [address, setAddress] = useState(DEFAULT_ADDRESS ?? '');
@@ -420,7 +420,14 @@ function App(): JSX.Element {
                       proofTime={proofTime}
                       handleMint={handleMint}
                       totalTime={totalTime}
-                      setStep={setStep}/>
+                      setStep={setStep}
+                      passportNumber={passportNumber}
+                      setPassportNumber={setPassportNumber}
+                      dateOfBirth={dateOfBirth}
+                      setDateOfBirth={setDateOfBirth}
+                      dateOfExpiry={dateOfExpiry}
+                      setDateOfExpiry={setDateOfExpiry}
+                      />
           </View>
         </ScrollView>
       </SafeAreaView>

app/src/screens/MainScreen.tsx

@@ -1,12 +1,14 @@
-import React, { useState} from 'react';
+import React, { useState, useEffect} from 'react';
 import { YStack, XStack, Text, Button } from 'tamagui';
-import { SizableText, Tabs, H5, styled } from 'tamagui'
-import { BadgeInfo , Scan, UserCheck} from '@tamagui/lucide-icons'; 
+import { SizableText, Tabs, H5, styled , Dialog, Adapt, Sheet, Label , Fieldset, Input, Unspaced, Switch} from 'tamagui'
+import { BadgeInfo , Scan, UserCheck , Settings , HelpCircle, XCircle , IterationCw} from '@tamagui/lucide-icons'; 
 import { ThemeableStack } from 'tamagui' // or '@tamagui/stacks'
 
 import ScanScreen from './ScanScreen';
 import ProveScreen from './ProveScreen';
 import { Steps } from '../utils/utils';
+import { Popover } from 'tamagui'
+import { CloseCircleIcon, InfoIcon } from '@gluestack-ui/themed';
 
 const MainScreen = (
     {onStartCameraScan,
@@ -17,7 +19,21 @@ const MainScreen = (
     address,
     setAddress,
     generatingProof,
-    handleProve,step,mintText ,proof,proofTime,handleMint,totalTime,setStep}
+    handleProve,
+    step,
+    mintText ,
+    proof,
+    proofTime,
+    handleMint,
+    totalTime,
+    setStep,
+    passportNumber,
+    setPassportNumber,
+    dateOfBirth,
+    setDateOfBirth,
+    dateOfExpiry,
+    setDateOfExpiry
+    }
 ) => {
   // placeholder function for button press
   const [selectedTab, setSelectedTab] = useState("scan");
@@ -25,13 +41,28 @@ const MainScreen = (
     console.log('Camera button pressed');
     // your camera opening logic goes here
   };
-
+  const [brokenCamera,setBrokenCamera] = useState(false);
+  const [open, setOpen] = useState(false)
   const MyCard = styled(ThemeableStack, {
     hoverTheme: true,
     pressTheme: true,
     focusTheme: true,
     elevate: true
   })
+  const handleRestart = () => {
+    setStep(Steps.MRZ_SCAN);
+    setPassportNumber("");
+    setDateOfBirth("");
+    setDateOfExpiry("");
+
+  }
+  useEffect(() => {
+    // Check if passportNumber length is 9 and either dateOfBirth or dateOfExpiry length is 6
+    if (passportNumber?.length === 9 && (dateOfBirth?.length === 6 && dateOfExpiry?.length === 6)) {
+        setStep(Steps.MRZ_SCAN_COMPLETED);
+    }
+    console.log("passportNumber");
+}, [passportNumber, dateOfBirth, dateOfExpiry]); // Dependencies array
 
   return (
     <YStack f={1} ai="center" jc="space-between" bc="#fff">
@@ -40,7 +71,112 @@ const MainScreen = (
         <XStack w="100%" jc="space-between" ai="center" ph="$4" pv="$2" bc="#fff" p="$3">
             <XStack></XStack>
             <Text>{selectedTab==="scan"?"Scan":"Prove"}</Text>
-            <BadgeInfo />
+
+            <Dialog
+      modal
+      onOpenChange={(open) => {
+        setOpen(open)
+      }}
+    >
+      <Dialog.Trigger asChild p="$2">
+        <HelpCircle/>
+      </Dialog.Trigger>
+
+      <Adapt when="sm" platform="touch">
+        <Sheet animation="medium" zIndex={200000} modal dismissOnSnapToBottom>
+          <Sheet.Frame padding="$4" gap="$4">
+            <Adapt.Contents />
+          </Sheet.Frame>
+          <Sheet.Overlay
+            animation="lazy"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+        </Sheet>
+      </Adapt>
+
+      <Dialog.Portal>
+        <Dialog.Overlay
+          key="overlay"
+          animation="quick"
+          opacity={0.5}
+          enterStyle={{ opacity: 0 }}
+          exitStyle={{ opacity: 0 }}
+        />
+
+        <Dialog.Content
+          bordered
+          elevate
+          key="content"
+          animateOnly={['transform', 'opacity']}
+          animation={[
+            'quick',
+            {
+              opacity: {
+                overshootClamping: true,
+              },
+            },
+          ]}
+          enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
+          exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
+          gap="$4"
+        >
+            <XStack space >
+            <Dialog.Title>Settings</Dialog.Title>
+
+            </XStack>
+
+            <Fieldset gap="$4" mt="$2" horizontal>
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
+              Restart to step 1
+            </Label>
+            <Button size="$4" m="$2" onPress={handleRestart}>
+            <IterationCw/>
+            </Button>
+          </Fieldset>
+          <Fieldset gap="$4" mt="$2" horizontal>
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
+              Broken camera
+            </Label>
+            <Switch size="$4" checked={brokenCamera} onCheckedChange={setBrokenCamera}>
+                <Switch.Thumb animation="bouncy" backgroundColor="white" color/>
+            </Switch>
+          </Fieldset>
+          {
+            brokenCamera &&
+          <YStack space >
+          <Fieldset gap="$4" horizontal>
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
+              Passport Number
+            </Label>
+            <Input borderColor={passportNumber?.length === 9? "green":"unset"} flex={1} id="passport_number" onChangeText={(text) => setPassportNumber(text.toUpperCase())} value={passportNumber} keyboardType="default"/>
+          </Fieldset>
+          <Fieldset gap="$4" mt="$2" horizontal>
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
+              Date of birth (yymmdd)
+            </Label>
+            <Input borderColor={dateOfBirth?.length === 6? "green":"unset"}  flex={1} id="date_of_birth" onChangeText={setDateOfBirth} value={dateOfBirth}  keyboardType="numeric"/>
+          </Fieldset>
+          <Fieldset gap="$4" mt="$2" horizontal>
+            <Label width={160} justifyContent="flex-end" htmlFor="name">
+              Date of expiry (yymmdd)
+            </Label>
+            <Input borderColor={dateOfExpiry?.length === 6? "green":"unset"}  flex={1} id="date_of_expiry" onChangeText={setDateOfExpiry} value={dateOfExpiry} keyboardType="numeric"/>
+          </Fieldset>
+          </YStack>
+          }
+          <YStack flex={1}>
+          <YStack flex={1}></YStack>
+          <Dialog.Close mb="$4" displayWhenAdapted asChild alignSelf='center'>
+                <XCircle size="$3"/>
+            </Dialog.Close>
+
+          </YStack>
+
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog>
+
         </XStack>
         <YStack  w="100%" h={2} backgroundColor="#DCDCDC" opacity={0.16}></YStack>
         </YStack>
@@ -88,8 +224,8 @@ const MainScreen = (
                     {step < Steps.NFC_SCAN_COMPLETED ?
                                     <Tabs.Tab unstyled value="scan" w="50%" backgroundColor="transparent">
                                         <YStack ai="center">
-                                            <UserCheck  color="gray"/> 
-                                            <SizableText color="gray">Prove</SizableText>
+                                            <UserCheck  color="#eeeeee"/> 
+                                            <SizableText color="#eeeeee">Prove</SizableText>
                                         </YStack>
                                     </Tabs.Tab>
                                     :

app/src/screens/ProveScreen.tsx

@@ -76,7 +76,7 @@ const PassportDataComponent = ({
       </Button>
     </>
   ) : (
-    <YStack>
+    <YStack m="$2">
       <Text>Zero-knowledge proof generated</Text>
 
       <Text fontWeight="bold">Proof:</Text>

app/src/screens/ScanScreen.tsx

@@ -1,76 +1,88 @@
-import React, {useState} from 'react';
-import { YStack, Text,Spinner , Circle, ZStack, XStack } from 'tamagui'; // Ensure correct import paths based on your project setup
+import React, {useState, useEffect} from 'react';
+import { YStack, Text,Spinner , Circle, ZStack, XStack, Input, View, SizableStack, SizableText, Square } from 'tamagui'; // Ensure correct import paths based on your project setup
 import { Steps } from '../utils/utils';
-
+import { Keyboard } from 'react-native';
 const ScanScreen = ({onStartCameraScan,nfcScan,step,setStep}) => {
 
-    const [camerastep,setcamerastep] = useState("camera");
-    const cameraPress = () => {
-    setcamerastep("scan");
-    onStartCameraScan();
-  };
+   
 
   return (
-    <YStack mb="$5">
-      <ZStack alignSelf='center' mb="$2" maxWidth={22} maxHeight={22} width={100} flex={1} space="$0">
+    <YStack >
+      <ZStack alignSelf='center'  maxWidth={50} maxHeight={50} width={50} flex={1} space="$0">
         <Circle
-          fullscreen
-          padding="$2"
-          borderColor="$color"
+          alignSelf='center'
+          h={22}
+          w={22}
           borderWidth={1.6}
+          p={0}
         />
-        <Text
-          borderColor="$color"
-          y={1}
+        <SizableText
+          alignSelf='center'
+          h={22}
+          w={22}          
+          y={-1}
           x={7}
+          color="black"
           fow="bold"
-        >1</Text>
+        >1</SizableText>
       </ZStack>
-
-      <Text textAlign='center' px="$4" fow={step === Steps.MRZ_SCAN ?"bold":"normal" } >Scan the machine readable zone on the main page of your passport</Text>
-      
-      <ZStack alignSelf='center' mt="$8" mb="$2" maxWidth={22} maxHeight={22} width={100} flex={1} space="$0">
-        <Circle
-          fullscreen
-          padding="$2"
-          borderColor="$color"
-          borderWidth={1.6}
-        />
-        <Text
-          borderColor="$color"
-          y={1}
-          x={7}
-          fow="bold"
-        >2</Text>
-      </ZStack>
-      <Text textAlign='center' px="$4" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING)  ? "bold":"normal" }>Hold your passport against your device to read the biometric chip</Text>
+      <Text textAlign='center' mt="$-3"  px="$4" fow={step === Steps.MRZ_SCAN ?"bold":"normal" } >Scan the machine readable zone on the main page of your passport</Text>
       
       
-      <ZStack alignSelf='center' mt="$8" mb="$2" maxWidth={22} maxHeight={22} width={100} flex={1} space="$0">
+      <ZStack alignSelf='center' mt="$8"  maxWidth={50} maxHeight={50} width={50} flex={1} space="$0">
         <Circle
-          fullscreen
-          padding="$2"
-          borderColor="$color"
+          alignSelf='center'
+          h={22}
+          w={22}
           borderWidth={1.6}
+          p={0}
         />
-        <Text
-          borderColor="$color"
-          y={1}
+        <SizableText
+          alignSelf='center'
+          h={22}
+          w={22}          
+          y={-1}
           x={7}
+          color="black"
           fow="bold"
-        >3</Text>
+        >2</SizableText>
       </ZStack>
-      <Text textAlign='center' px="$4" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold":"normal" }>Generate ZK proof</Text>
+      <Text textAlign='center' mt="$-3" px="$4" fow={(step === Steps.MRZ_SCAN_COMPLETED) || (step === Steps.NFC_SCANNING)  ? "bold":"normal" }>Hold your passport against your device to read the biometric chip</Text>
+      
+      <ZStack alignSelf='center' mt="$8"   maxWidth={50} maxHeight={50} width={50} flex={1} space="$0">
+        <Circle
+          alignSelf='center'
+          h={22}
+          w={22}
+          borderWidth={1.6}
+          p={0}
+        />
+        <SizableText
+          alignSelf='center'
+          h={22}
+          w={22}          
+          y={-1}
+          x={7}
+          color="black"
+          fow="bold"
+        >3</SizableText>
+      </ZStack>
+      <Text textAlign='center' mt="$-3" px="$4" fow={step >= Steps.NFC_SCAN_COMPLETED ? "bold":"normal" }>Generate ZK proof</Text>
       
       <YStack w="100%" ai="center">
       {
   step < Steps.NFC_SCAN_COMPLETED 
     ? (
         step < Steps.MRZ_SCAN_COMPLETED 
-          ? <Text onPress={cameraPress} mt="$10" size="$4" br="$2" color="#3185FC">Open camera</Text>
+          ? 
+          <YStack mt="$10">
+          <Text onPress={onStartCameraScan} size="$4" br="$2" color="#3185FC">Open camera</Text>
+          <Spinner mt="$4" color={step === Steps.NFC_SCANNING ? "#3185FC" : "transparent"} />
+
+          </YStack>
           : (
               <YStack mt="$10">
-                <Text mt="$4" size="$4" br="$2" color="#3185FC" onPress={nfcScan}>
+                <Text  size="$4" br="$2" color="#3185FC" onPress={nfcScan}>
                   {step === Steps.NFC_SCANNING ? "Scanning" : "Scan passport with NFC"}
                 </Text>
                 <Spinner mt="$4" color={step === Steps.NFC_SCANNING ? "#3185FC" : "transparent"} />
@@ -78,9 +90,9 @@ const ScanScreen = ({onStartCameraScan,nfcScan,step,setStep}) => {
             )
       )
     : <XStack/>
-}
-
+}     
       </YStack>
+
     </YStack>
   );
 };