diff --git a/app/App.tsx b/app/App.tsx index 55ac60a2a..2fa7e0286 100644 --- a/app/App.tsx +++ b/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} + /> diff --git a/app/src/screens/MainScreen.tsx b/app/src/screens/MainScreen.tsx index 93eb3dca0..a559eaa15 100644 --- a/app/src/screens/MainScreen.tsx +++ b/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 ( @@ -40,7 +71,112 @@ const MainScreen = ( {selectedTab==="scan"?"Scan":"Prove"} - + + { + setOpen(open) + }} + > + + + + + + + + + + + + + + + + + + + Settings + + + +
+ + +
+
+ + + + +
+ { + brokenCamera && + +
+ + setPassportNumber(text.toUpperCase())} value={passportNumber} keyboardType="default"/> +
+
+ + +
+
+ + +
+ + } + + + + + + + + + + + + @@ -88,8 +224,8 @@ const MainScreen = ( {step < Steps.NFC_SCAN_COMPLETED ? - - Prove + + Prove : diff --git a/app/src/screens/ProveScreen.tsx b/app/src/screens/ProveScreen.tsx index 3c1efbd4d..c7dd9b722 100644 --- a/app/src/screens/ProveScreen.tsx +++ b/app/src/screens/ProveScreen.tsx @@ -76,7 +76,7 @@ const PassportDataComponent = ({ ) : ( - + Zero-knowledge proof generated Proof: diff --git a/app/src/screens/ScanScreen.tsx b/app/src/screens/ScanScreen.tsx index 9788f7c43..fe5bcbed2 100644 --- a/app/src/screens/ScanScreen.tsx +++ b/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 ( - - + + - 1 + >1 - - Scan the machine readable zone on the main page of your passport - - - - 2 - - Hold your passport against your device to read the biometric chip + Scan the machine readable zone on the main page of your passport - + - 3 + >2 - = Steps.NFC_SCAN_COMPLETED ? "bold":"normal" }>Generate ZK proof + Hold your passport against your device to read the biometric chip + + + + 3 + + = Steps.NFC_SCAN_COMPLETED ? "bold":"normal" }>Generate ZK proof { step < Steps.NFC_SCAN_COMPLETED ? ( step < Steps.MRZ_SCAN_COMPLETED - ? Open camera + ? + + Open camera + + + : ( - + {step === Steps.NFC_SCANNING ? "Scanning" : "Scan passport with NFC"} @@ -78,9 +90,9 @@ const ScanScreen = ({onStartCameraScan,nfcScan,step,setStep}) => { ) ) : -} - +} + ); };