add toast & update ui

app/src/components/ToastMessage.tsx

@@ -18,16 +18,16 @@ export const ToastMessage = () => {
         toast.customData?.type === 'success'
           ? greenColorLight
           : toast.customData?.type === 'error'
-          ? redColorLight
-          : blueColorLight
+            ? redColorLight
+            : blueColorLight
       }
       animation="100ms"
       enterStyle={{ y: -20, opacity: 0 }}
       exitStyle={{ y: -20, opacity: 0 }}
       opacity={1}
       x={0}
       key={toast?.id}
-      duration={toast?.duration}
+      duration={3000}
     >
       <YStack ai="center" jc="center">
         <Toast.Title fow="bold" color={'white'}>{toast?.title}</Toast.Title>

app/src/screens/CameraScreen.tsx

@@ -16,10 +16,10 @@ const CameraScreen: React.FC<CameraScreenProps> = ({ setSheetIsOpen }) => {
 
   return (
     <YStack f={1} p="$3">
-      <YStack f={1} mt="$16">
+      <YStack f={1} mt="$10">
         <Text ml="$1" fontSize={34} color={textBlack}><Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>Scan</Text> or type your passport ID</Text>
         <Text ml="$2" mt="$8" fontSize="$8" color={textBlack}>Open your passport on the <Text style={{ textDecorationLine: 'underline', textDecorationColor: bgGreen }}>main page</Text> to scan it.</Text>
-        <Text ml="$2" mt="$2" fontSize="$8" color={textBlack} style={{ opacity: 0.7 }}>Your data never leaves your device.</Text>
+        <Text ml="$2" mt="$3" fontSize="$8" color={textBlack} style={{ opacity: 0.7 }}>Your data never leaves your device.</Text>
         <XStack f={1} />
       </YStack>
       <XStack p="$3" onPress={() => setSelectedTab("mock")} ai="center" jc="center">

app/src/screens/MainScreen.tsx

@@ -597,30 +597,29 @@ const MainScreen: React.FC = () => {
             <Sheet.Frame bg={bgWhite} borderTopLeftRadius="$9" borderTopRightRadius="$9" pt="$2" >
               <YStack p="$4" f={1} gap="$3">
                 <XStack>
-                  <Text fontSize="$8" mb="$2">👋 Not registered yet?</Text>
+                  <Text fontSize="$8" mb="$2">👋 Scan your passport</Text>
                   <XStack f={1} />
                   <XStack onPress={() => setSheetRegisterIsOpen(false)} p="$2">
                     <X color={borderColor} size="$1.5" mr="$2" />
                   </XStack>
                 </XStack>
                 <Separator borderColor={separatorColor} />
                 <YStack gap="$2">
-                  <Text fontSize="$7" color={textBlack}>Registering to OpenPassport does not leak anything about your personal information.</Text>
-                  <Text fontSize="$6" onPress={() => Linking.openURL('https://zk-passport.github.io/posts/how-to-scan-your-passport-using-nfc/')} color={blueColorLight} style={{ textDecorationLine: 'underline', fontStyle: 'italic' }}>Learn more.</Text>
+                  <Text fontSize="$7" color={textBlack}>Scan your passport to start using OpenPassport</Text>
+                  <Text fontSize="$6" style={{ opacity: 0.7 }} color={textBlack}>You can also use mock data to test the app.</Text>
+                  {/* <Text fontSize="$6" onPress={() => Linking.openURL('https://zk-passport.github.io/posts/how-to-scan-your-passport-using-nfc/')} color={blueColorLight} style={{ textDecorationLine: 'underline', fontStyle: 'italic' }}>Learn more.</Text> */}
                 </YStack>
 
                 <XStack f={1} />
-                <YStack gap="$2">
-                  <CustomButton
-                    text="Register"
-                    Icon={<UserPlus color={textBlack} />}
-                    onPress={() => {
-                      setSheetRegisterIsOpen(false);
-                      setSelectedTab("start");
+                <CustomButton
+                  text="Let's start"
+                  Icon={<ArrowRight color={textBlack} />}
+                  onPress={() => {
+                    setSheetRegisterIsOpen(false);
+                    setSelectedTab("scan");
 
-                    }}
-                  />
-                </YStack>
+                  }}
+                />
                 <XStack f={1} />
 
               </YStack>

app/src/screens/MockDataScreen.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { YStack, XStack, Text, Select, Adapt, Sheet, Fieldset, Button } from 'tamagui';
+import React, { useState, useCallback } from 'react';
+import { YStack, XStack, Text, Select, Adapt, Sheet, Fieldset, Button, Spinner } from 'tamagui';
 import { CalendarSearch, Check, ChevronDown, ChevronUp, Cpu } from '@tamagui/lucide-icons';
 import { bgGreen, textBlack } from '../utils/colors';
 import useUserStore from '../stores/userStore';
@@ -21,21 +21,36 @@ const MockDataScreen: React.FC = () => {
   const [dateOfBirthDatePickerIsOpen, setDateOfBirthDatePickerIsOpen] = useState(false)
   const [dateOfExpiryDatePickerIsOpen, setDateOfExpiryDatePickerIsOpen] = useState(false)
   const [nationality, setNationality] = useState("FRA")
+  const [isGenerating, setIsGenerating] = useState(false)
 
   const castDate = (date: Date) => {
     return (date.toISOString().slice(2, 4) + date.toISOString().slice(5, 7) + date.toISOString().slice(8, 10)).toString();
   }
-
-  const handleGenerate = () => {
-
-    const mockPassportData = genMockPassportData(signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", nationality as keyof typeof countryCodes, castDate(dateOfBirthDatePicker), castDate(dateOfExpiryDatePicker));
-    useUserStore.getState().registerPassportData(mockPassportData)
-    useUserStore.getState().setRegistered(true);
-    const sigAlgName = getSignatureAlgorithm(mockPassportData.dsc as string);
-    const circuitName = getCircuitName("prove", sigAlgName.signatureAlgorithm, sigAlgName.hashFunction);
-    downloadZkey(circuitName as any);
+  const { toast } = useNavigationStore()
+
+  const handleGenerate = useCallback(async () => {
+    setIsGenerating(true);
+
+    await new Promise(resolve => setTimeout(() => {
+      const mockPassportData = genMockPassportData(signatureAlgorithm as "rsa_sha256" | "rsa_sha1" | "rsapss_sha256", nationality as keyof typeof countryCodes, castDate(dateOfBirthDatePicker), castDate(dateOfExpiryDatePicker));
+      useUserStore.getState().registerPassportData(mockPassportData);
+      useUserStore.getState().setRegistered(true);
+      const sigAlgName = getSignatureAlgorithm(mockPassportData.dsc as string);
+      const circuitName = getCircuitName("prove", sigAlgName.signatureAlgorithm, sigAlgName.hashFunction);
+      downloadZkey(circuitName as any);
+      resolve(null);
+    }, 0));
+
+    toast.show("🤖", {
+      message: "Passport generated",
+      customData: {
+        type: "success",
+      },
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
     useNavigationStore.getState().setSelectedTab("next");
-  };
+  }, [signatureAlgorithm, nationality, dateOfBirthDatePicker, dateOfExpiryDatePicker]);
 
   return (
     <YStack p="$3" f={1} gap="$5">
@@ -224,7 +239,7 @@ const MockDataScreen: React.FC = () => {
       </Fieldset>
 
       <YStack f={1} />
-      <CustomButton onPress={handleGenerate} text="Generate passport data" Icon={<Cpu color={textBlack} />} />
+      <CustomButton onPress={handleGenerate} text="Generate passport data" Icon={isGenerating ? <Spinner /> : <Cpu color={textBlack} />} isDisabled={isGenerating} />
     </YStack>
   );
 };

app/src/screens/NextScreen.tsx

@@ -38,7 +38,7 @@ const NextScreen: React.FC = () => {
   };
 
   return (
-    <YStack p="$3" f={1} mb={Platform.OS === 'ios' ? "$5" : "$0"}>
+    <YStack p="$3" f={1}>
       <YStack flex={1} mx="$2" gap="$2" mt="$2">
         <YStack alignSelf='center' my="$3">
           {hideData
@@ -104,9 +104,9 @@ const NextScreen: React.FC = () => {
 
         <YStack f={1} />
 
-        <XStack bg="#ffff" borderRadius={100} py="$2.5" px="$3">
+        <XStack bg="#ffff" borderRadius={100} py="$2.5" px="$3.5" gap="$2">
           <Info alignSelf='center' size={24} color={textBlack} />
-          <Text ml="$3" pr="$6" fontSize="$2" color={textBlack}>Your information will remain confidential and will not be used or shared without your explicit consent.</Text>
+          <Text pr="$6" fontSize="$2" color={textBlack}>Your information will remain confidential and will not be used or shared without your explicit consent.</Text>
         </XStack>
 
         <YStack f={1} />

app/src/screens/ProveScreen.tsx

@@ -70,7 +70,27 @@ const ProveScreen: React.FC<ProveScreenProps> = ({ setSheetRegisterIsOpen }) =>
       console.log('Proof verification result:', result);
       setProofVerificationResult(JSON.parse(result));
       console.log("result", result);
-      setSelectedTab(JSON.parse(result).valid ? "valid" : "wrong");
+      if (JSON.parse(result).valid) {
+        toast.show("✅", {
+          message: "Proof verified",
+          customData: {
+            type: "success",
+          },
+        });
+        setTimeout(() => {
+          setSelectedTab("valid");
+        }, 1000);
+      } else {
+        toast.show("❌", {
+          message: "Proof not verified",
+          customData: {
+            type: "error",
+          },
+        });
+        setTimeout(() => {
+          setSelectedTab("wrong");
+        }, 1000);
+      }
     });
 
     setSocket(newSocket);