Add lottie animations (#21)

Co-authored-by: Nicolas Brugneaux <nicolas.brugneaux@gmail.com>

app/.prettierignore

@@ -1,4 +1,6 @@
 android/
 deployments/
 ios/
-node_modules/
+node_modules/
+src/assets/animations/
+witnesscalc/

app/package.json

@@ -44,6 +44,7 @@
     "ethers": "^6.11.0",
     "expo-modules-core": "^1.11.12",
     "js-sha256": "^0.9.0",
+    "lottie-react-native": "^7.2.2",
     "msgpack-lite": "^0.1.26",
     "node-forge": "^1.3.1",
     "pako": "^2.1.0",

app/src/Navigation.tsx

@@ -26,9 +26,9 @@ import PassportOnboardingScreen from './screens/Onboarding/PassportOnboardingScr
 import ProveScreen from './screens/ProveFlow/ProveScreen';
 import ValidProofScreen from './screens/ProveFlow/ValidProofScreen';
 import QRCodeViewFinderScreen from './screens/ProveFlow/ViewFinder';
+import WrongProofScreen from './screens/ProveFlow/WrongProofScreen';
 import AccountRecoveryScreen from './screens/Settings/AccountRecoveryScreen';
 import ShowRecoveryPhraseScreen from './screens/Settings/ShowRecoveryPhraseScreen';
-import WrongProofScreen from './screens/ProveFlow/WrongProofScreen';
 import SettingsScreen from './screens/SettingsScreen';
 import SplashScreen from './screens/SplashScreen';
 import StartScreen from './screens/StartScreen';

app/src/screens/DisclaimerScreen.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
-import { Image, Text, YStack } from 'tamagui';
+import LottieView from 'lottie-react-native';
+import { Text, YStack } from 'tamagui';
 
 import { PrimaryButton } from '../components/buttons/PrimaryButton';
-import Warning from '../images/icons/warning.svg';
 import { ExpandableBottomLayout } from '../layouts/ExpandableBottomLayout';
 import { useSettingStore } from '../stores/settingStore';
-import { amber50, amber500, slate700, yellow500 } from '../utils/colors';
+import { slate700, white } from '../utils/colors';
 
 const DisclaimerScreen: React.FC = () => {
   const navigation = useNavigation();
@@ -17,22 +17,18 @@ const DisclaimerScreen: React.FC = () => {
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        <Image
-          source={require('../images/texture.png')}
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../assets/animations/warning.json')}
           style={{
-            opacity: 0.1,
             position: 'absolute',
+            width: '125%',
+            height: '125%',
           }}
         />
-        <YStack gap="$2.5">
-          <Warning
-            height={63}
-            width={69}
-            color={yellow500}
-            style={{ margin: 'auto' }}
-          />
-          <Text style={styles.header}>Be Cautious</Text>
-          <Text style={styles.subheader}>Protecting your privacy</Text>
+        <YStack f={1} jc="flex-end" pb="$4">
+          <Text style={styles.subheader}>Caution</Text>
         </YStack>
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
@@ -63,15 +59,8 @@ const DisclaimerScreen: React.FC = () => {
 export default DisclaimerScreen;
 
 const styles = StyleSheet.create({
-  header: {
-    color: amber50,
-    fontFamily: 'Advercase-Regular',
-    fontSize: 48,
-    letterSpacing: 1,
-    textAlign: 'center',
-  },
   subheader: {
-    color: amber500,
+    color: white,
     fontFamily: 'DINOT-Medium',
     fontSize: 15,
     fontWeight: '500',

app/src/screens/Onboarding/PassportCameraScreen.tsx

@@ -6,6 +6,7 @@ import {
   useIsFocused,
   useNavigation,
 } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 import { View, XStack, YStack } from 'tamagui';
 
 import { SecondaryButton } from '../../components/buttons/SecondaryButton';
@@ -58,6 +59,16 @@ const PassportCameraScreen: React.FC<PassportNFCScanScreen> = ({}) => {
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
         <PassportCamera onPassportRead={onPassportRead} isMounted={isFocused} />
+        <LottieView
+          autoPlay
+          loop
+          source={require('../../assets/animations/passport_scan.json')}
+          style={{
+            position: 'absolute',
+            width: '115%',
+            height: '115%',
+          }}
+        />
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
         <YStack alignItems="center" gap="$2.5">

app/src/screens/Onboarding/PassportNFCScanScreen.tsx

@@ -9,7 +9,8 @@ import {
 import NfcManager from 'react-native-nfc-manager';
 
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import { Image, View } from 'tamagui';
+import LottieView from 'lottie-react-native';
+import { Image } from 'tamagui';
 
 import ButtonsContainer from '../../components/ButtonsContainer';
 import TextsContainer from '../../components/TextsContainer';
@@ -20,7 +21,7 @@ import { Title } from '../../components/typography/Title';
 import NFC_IMAGE from '../../images/nfc.png';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
 import useUserStore from '../../stores/userStore';
-import { black } from '../../utils/colors';
+import { slate100 } from '../../utils/colors';
 import { scan } from '../../utils/nfcScannerNew';
 
 interface PassportNFCScanScreenProps {}
@@ -106,8 +107,16 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        {/* TODO a placeholder for animation */}
-        <View height={400} bg={black} />
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../../assets/animations/passport_verify.json')}
+          style={{
+            backgroundColor: slate100,
+            width: '115%',
+            height: '115%',
+          }}
+        />
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
         {isNfcSheetOpen ? (

app/src/screens/Onboarding/PassportOnboardingScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useNavigation } from '@react-navigation/native';
-import { Image } from 'tamagui';
+import LottieView from 'lottie-react-native';
 
 import ButtonsContainer from '../../components/ButtonsContainer';
 import TextsContainer from '../../components/TextsContainer';
@@ -10,8 +10,8 @@ import { SecondaryButton } from '../../components/buttons/SecondaryButton';
 import Additional from '../../components/typography/Additional';
 import Description from '../../components/typography/Description';
 import { Title } from '../../components/typography/Title';
-import Passport from '../../images/passport.png';
 import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
+import { slate100 } from '../../utils/colors';
 
 interface PassportOnboardingScreenProps {}
 
@@ -23,13 +23,14 @@ const PassportOnboardingScreen: React.FC<
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        <Image
-          resizeMethod="auto"
-          source={{ uri: Passport }}
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../../assets/animations/passport_onboarding.json')}
           style={{
-            width: '90%',
-            height: '90%',
-            aspectRatio: 0.69,
+            backgroundColor: slate100,
+            width: '115%',
+            height: '115%',
           }}
         />
       </ExpandableBottomLayout.TopSection>

app/src/screens/ProveFlow/ValidProofScreen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
 import Description from '../../components/typography/Description';
@@ -17,8 +18,15 @@ const SuccessScreen: React.FC = () => {
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        <></>
-        {/* TODO Animation */}
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../../assets/animations/proof_success.json')}
+          style={{
+            width: '125%',
+            height: '125%',
+          }}
+        />
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
         <View style={styles.content}>

app/src/screens/ProveFlow/ViewFinder.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { useIsFocused, useNavigation } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 import { View, XStack, YStack } from 'tamagui';
 
 import { SecondaryButton } from '../../components/buttons/SecondaryButton';
@@ -62,7 +63,19 @@ const QRCodeViewFinderScreen: React.FC<QRCodeViewFinderScreenProps> = ({}) => {
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
         {!doneScanningQR && (
-          <QRCodeScannerView onQRData={onQRData} isMounted={isFocused} />
+          <>
+            <QRCodeScannerView onQRData={onQRData} isMounted={isFocused} />
+            <LottieView
+              autoPlay
+              loop
+              source={require('../../assets/animations/qr_scan.json')}
+              style={{
+                position: 'absolute',
+                width: '115%',
+                height: '115%',
+              }}
+            />
+          </>
         )}
         {null}
       </ExpandableBottomLayout.TopSection>

app/src/screens/ProveFlow/WrongProofScreen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
+import LottieView from 'lottie-react-native';
 
 import { PrimaryButton } from '../../components/buttons/PrimaryButton';
 import Description from '../../components/typography/Description';
@@ -66,8 +67,15 @@ const WrongProofScreen: React.FC = () => {
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        <></>
-        {/* TODO Animation */}
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../../assets/animations/proof_failed.json')}
+          style={{
+            width: '125%',
+            height: '125%',
+          }}
+        />
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
         <View style={styles.content}>

app/src/screens/SplashScreen.tsx

@@ -1,12 +1,10 @@
-import React, { useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import { useNavigation } from '@react-navigation/native';
-import { Image, Spinner } from 'tamagui';
+import LottieView from 'lottie-react-native';
 
-import Logo from '../images/logo.svg';
 import { ExpandableBottomLayout } from '../layouts/ExpandableBottomLayout';
 import useUserStore from '../stores/userStore';
-import { amber500 } from '../utils/colors';
 
 interface SplashScreenProps {}
 
@@ -14,28 +12,27 @@ const SplashScreen: React.FC<SplashScreenProps> = ({}) => {
   const navigation = useNavigation();
   const { userLoaded, passportData } = useUserStore();
 
-  useEffect(() => {
-    if (userLoaded) {
-      if (passportData) {
-        navigation.navigate('Home');
-      } else {
-        navigation.navigate('Launch');
-      }
+  const redirect = useCallback(() => {
+    if (passportData) {
+      navigation.navigate('Home');
+    } else {
+      navigation.navigate('Launch');
     }
-  }, [userLoaded]);
+  }, [passportData, userLoaded]);
 
   return (
     <ExpandableBottomLayout.Layout>
       <ExpandableBottomLayout.TopSection>
-        <Image
-          source={require('../images/texture.png')}
+        <LottieView
+          autoPlay
+          loop={false}
+          source={require('../assets/animations/splash.json')}
           style={{
-            opacity: 0.1,
-            position: 'absolute',
+            width: '115%',
+            height: '115%',
           }}
+          onAnimationFinish={redirect}
         />
-        <Logo />
-        <Spinner width={80} height={80} color={amber500} />
       </ExpandableBottomLayout.TopSection>
     </ExpandableBottomLayout.Layout>
   );

app/yarn.lock

@@ -10973,6 +10973,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lottie-react-native@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "lottie-react-native@npm:7.2.2"
+  peerDependencies:
+    "@lottiefiles/dotlottie-react": ^0.6.5
+    react: "*"
+    react-native: ">=0.46"
+    react-native-windows: ">=0.63.x"
+  peerDependenciesMeta:
+    "@lottiefiles/dotlottie-react":
+      optional: true
+    react-native-windows:
+      optional: true
+  checksum: 10c0/d0ee7c6ed639ad1b5cfe04dd3b704f3f968806c59a6361986fbb22ebd1b332d9cb13ee7d78ed49848f8d416d468ae2fdc9077815280023dac0b66e841b5ce840
+  languageName: node
+  linkType: hard
+
 "lower-case@npm:^2.0.2":
   version: 2.0.2
   resolution: "lower-case@npm:2.0.2"
@@ -12236,6 +12253,7 @@ __metadata:
     expo-modules-core: "npm:^1.11.12"
     jest: "npm:^29.6.3"
     js-sha256: "npm:^0.9.0"
+    lottie-react-native: "npm:^7.2.2"
     metro-react-native-babel-preset: "npm:0.76.7"
     msgpack-lite: "npm:^0.1.26"
     node-forge: "npm:^1.3.1"