ui

app/App.tsx

@@ -88,7 +88,7 @@ function App(): JSX.Element {
   const [dateOfBirth, setDateOfBirth] = useState(DEFAULT_DOB ?? '');
   const [dateOfExpiry, setDateOfExpiry] = useState(DEFAULT_DOE ?? '');
   const [address, setAddress] = useState(DEFAULT_ADDRESS ?? '');
-  const [passportData, setPassportData] = useState(mockPassportData);
+  const [passportData, setPassportData] = useState(samplePassportData);
   const [step, setStep] = useState('enterDetails');
   const [testResult, setTestResult] = useState<any>(null);
   const [error, setError] = useState<any>(null);
@@ -417,7 +417,8 @@ function App(): JSX.Element {
                       handleDisclosureChange={handleDisclosureChange}
                       address={address}
                       setAddress={setAddress}
-                      generatingProof={generatingProof}/>
+                      generatingProof={generatingProof}
+                      handleProve={handleProve}/>
                     
             ) : null}
             {step === 'scanning' ? (

app/src/screens/MainScreen.tsx

@@ -9,12 +9,13 @@ import ProveScreen from './ProveScreen';
 const MainScreen = (
     {onStartCameraScan,
     nfcScan,
-passportData,
-disclosure,
-handleDisclosureChange,
-address,
-setAddress,
-generatingProof}
+    passportData,
+    disclosure,
+    handleDisclosureChange,
+    address,
+    setAddress,
+    generatingProof,
+    handleProve}
 ) => {
   // placeholder function for button press
   const [selectedTab, setSelectedTab] = useState("scan");
@@ -42,13 +43,15 @@ generatingProof}
                 </Tabs.Content>
                 <Tabs.Content value="generate">
                 <ProveScreen
-        passportData={passportData}
-        disclosure={disclosure}
-        handleDisclosureChange={handleDisclosureChange}
-        address={address}
-        setAddress={setAddress}
-        generatingProof={generatingProof}
-      />                </Tabs.Content>
+                    passportData={passportData}
+                    disclosure={disclosure}
+                    handleDisclosureChange={handleDisclosureChange}
+                    address={address}
+                    setAddress={setAddress}
+                    generatingProof={generatingProof}
+                    handleProve={handleProve}
+                    />
+                 </Tabs.Content>
 
                 <Tabs.List>
                     <Tabs.Tab unstyled value="scan" w="50%" backgroundColor="transparent" >

app/src/screens/ProveScreen.tsx

@@ -1,119 +1,78 @@
-import React from 'react';
-import { 
-  Checkbox, 
-  Text, 
-  Input, 
-  Button, 
-  Spinner, 
-  YStack, // Tamagui's version of View with flex direction column
-  XStack, // for row layout 
-  Theme, // for accessing theme values
-  useTheme
-} from 'tamagui';
+import { View, Text, Checkbox, Input, Button } from 'tamagui';
+import { CheckIcon, ButtonSpinner, ButtonText, InputField, CheckboxIndicator } from '@tamagui/lucide-icons'; 
 import { getFirstName } from '../../utils/utils';
-import { 
-  SafeAreaView, 
-  ScrollView, 
-  StatusBar, 
-  StyleSheet, 
-  useColorScheme, 
-  NativeModules, 
-  DeviceEventEmitter, 
-  TextInput 
-} from 'react-native';
+import { attributeToPosition } from '../../../common/src/constants/constants';
+const PassportDataComponent = ({ passportData, disclosure, handleDisclosureChange, address, setAddress, generatingProof, handleProve }) => {
 
-const ProveScreen = ({
-  passportData,
-  disclosure,
-  handleDisclosureChange,
-  address,
-  setAddress,
-  generatingProof,
-}) => {
-  const { space } = useTheme(); // for margins and padding
+
+    const attributeToPosition = {
+        issuing_state: [2, 5],
+        name: [5, 44],
+        passport_number: [44, 52],
+        nationality: [54, 57],
+        date_of_birth: [57, 63],
+        gender: [64, 65],
+        expiry_date: [65, 71],
+      }
 
   return (
-    <YStack space="$4" padding="$4">
-      <Text size="$4" fontWeight="bold" textAlign="center">
-        Hi {getFirstName(passportData.mrz)}
-      </Text>
-      <YStack space="$2">
-        <Text>Signature algorithm: {passportData.signatureAlgorithm}</Text>
-        <Text>What do you want to disclose?</Text>
+    <View>
+      <Text f={2} mb="$4">Hi {getFirstName(passportData.mrz)}</Text>
+      
+      <View my="$4">
+        <Text mb="$2">Signature algorithm: {passportData.signatureAlgorithm}</Text>
+        <Text mb="$4">What do you want to disclose ?</Text>
+         
         {Object.keys(disclosure).map((key) => {
-          // ... your logic for mapping disclosure keys
+          const keyy = key as keyof typeof disclosure;
+          const indexes = attributeToPosition[keyy];
+          const keyFormatted = keyy.replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+          const mrzAttribute = passportData.mrz.slice(indexes[0], indexes[1]);
+          const mrzAttributeFormatted = mrzAttribute.replace(/</g, ' ');
+
           return (
-            <XStack key={key} space="$2" width="100%">
-              <YStack flex={1}>
-                {/* ... your text components */}
-              </YStack>
+            <View key={key} m="$2" w="$full" flexDirection="row" jc="space-between">
+              <View maxW="83%">
+                <Text fw="bold">{keyFormatted}: </Text>
+                <Text>{mrzAttributeFormatted}</Text>
+              </View>
+              {/* 
               <Checkbox
                 value={key}
-                checked={disclosure[key]}
-                onChange={() => handleDisclosureChange(key)}
-                size="$4"
-              />
-            </XStack>
+                checked={disclosure[keyy]}
+                onChange={() => handleDisclosureChange(keyy)}
+                size="lg"
+                aria-label={key}
+              >
+                <CheckboxIndicator mr="$2">
+                  <CheckIcon />
+                </CheckboxIndicator>
+              </Checkbox>
+              */}
+            </View>
           );
-        })}
-      </YStack>
+        })}  
+      </View>
+      {/*
       <Text>Enter your address or ens</Text>
-      <Input
-        variant="outline"
-        size="$4"
-        space="$2"
-        value={address}
-        onChangeText={setAddress}
-        placeholder="Your Address or ens name"
-      />
-      <Button onPress={generatingProof ? handleProve : undefined}>
-        {generatingProof ? (
-          <>
-            <Spinner size="$2" />
-            <Text>Generating zk proof</Text>
-          </>
-        ) : (
-          <Text>Generate zk proof</Text>
-        )}
-      </Button>
-    </YStack>
+      <Input variant="outline" size="md" mb="$4" mt="$2">
+        <InputField
+          value={address}
+          onChangeText={setAddress}
+          placeholder="Your Address or ens name"
+        />
+      </Input>
+      {generatingProof ?
+        <Button onPress={handleProve}>
+          <ButtonSpinner mr="$1" />
+          <ButtonText>Generating zk proof</ButtonText>
+        </Button> :
+        <Button onPress={handleProve}>
+          <ButtonText>Generate zk proof</ButtonText>
+        </Button>
+      } */}
+    </View>
   );
 };
 
-
-const styles = StyleSheet.create({
-    view: {
-      flex: 1,
-    },
-    sectionContainer: {
-      marginTop: 32,
-      paddingHorizontal: 24,
-    },
-    sectionTitle: {
-      fontSize: 24,
-      fontWeight: '600',
-    },
-    sectionDescription: {
-      marginTop: 8,
-      fontSize: 18,
-      fontWeight: '400',
-    },
-    highlight: {
-      fontWeight: '700',
-    },
-    header: {
-      fontSize: 22,
-      fontWeight: 'bold',
-      textAlign: 'center',
-      marginTop: 20,
-    },
-    testSection: {
-      backgroundColor: '#f2f2f2', // different background color
-      padding: 10,
-      borderTopWidth: 1,
-      borderTopColor: '#dcdcdc', // adding a border top with a light color
-      marginTop: 15,
-    },
-  });
-
-export default ProveScreen;
+export default PassportDataComponent;

common/src/utils/types.ts

@@ -10,7 +10,7 @@ export type PassportData = {
 };
 // Mock data for PassportData
 export const mockPassportData: PassportData = {
-  mrz: 'YourMockMRZ',
+  mrz: 'YourMockMR<<ZYourMoc<<kMRZYourMockMRZYourMockMRZ',
   signatureAlgorithm: 'RSA',
   pubKey: {
     modulus: 'YourModulus',