adds new unsupported passport screen (#116)

app/src/Navigation.tsx

@@ -25,6 +25,7 @@ import LoadingScreen from './screens/Onboarding/LoadingScreen';
 import PassportCameraScreen from './screens/Onboarding/PassportCameraScreen';
 import PassportNFCScanScreen from './screens/Onboarding/PassportNFCScanScreen';
 import PassportOnboardingScreen from './screens/Onboarding/PassportOnboardingScreen';
+import UnsupportedPassportScreen from './screens/Onboarding/UnsupportedPassport';
 import ProofRequestStatusScreen from './screens/ProveFlow/ProofRequestStatusScreen';
 import ProveScreen from './screens/ProveFlow/ProveScreen';
 import QRCodeViewFinderScreen from './screens/ProveFlow/ViewFinder';
@@ -112,6 +113,12 @@ const AppNavigation = createNativeStackNavigator({
         headerShown: false,
       },
     },
+    UnsupportedPassport: {
+      screen: UnsupportedPassportScreen,
+      options: {
+        headerShown: false,
+      },
+    },
     LoadingScreen: {
       screen: LoadingScreen,
       options: {

app/src/screens/Onboarding/UnsupportedPassport.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+
+import LottieView from 'lottie-react-native';
+
+import warnAnimation from '../../assets/animations/warning.json';
+import { PrimaryButton } from '../../components/buttons/PrimaryButton';
+import { Caption } from '../../components/typography/Caption';
+import Description from '../../components/typography/Description';
+import { Title } from '../../components/typography/Title';
+import useHapticNavigation from '../../hooks/useHapticNavigation';
+import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
+import { black, white } from '../../utils/colors';
+import { notificationError } from '../../utils/haptic';
+import { styles } from '../ProveFlow/ProofRequestStatusScreen';
+
+const UnsupportedPassportScreen: React.FC = () => {
+  // whereto?
+  const onPress = useHapticNavigation('Launch', { action: 'cancel' });
+  useEffect(() => {
+    notificationError();
+  }, []);
+
+  return (
+    <>
+      <ExpandableBottomLayout.Layout backgroundColor={black}>
+        <ExpandableBottomLayout.TopSection backgroundColor={black}>
+          <LottieView
+            autoPlay
+            loop={false}
+            source={warnAnimation}
+            style={styles.animation}
+            cacheComposition={true}
+            renderMode="HARDWARE"
+          />
+        </ExpandableBottomLayout.TopSection>
+        <ExpandableBottomLayout.BottomSection gap={20} backgroundColor={white}>
+          <Title textAlign="center">There was a problem</Title>
+          <Description textAlign="center" style={{ color: black }}>
+            It looks like your passport is not currently supported by Self.
+          </Description>
+          <Caption size="small" textAlign="center" textBreakStrategy="balanced">
+            Don't panic, we're working hard to extend support to more regions.
+          </Caption>
+          <PrimaryButton onPress={onPress}>Dismiss</PrimaryButton>
+        </ExpandableBottomLayout.BottomSection>
+      </ExpandableBottomLayout.Layout>
+    </>
+  );
+};
+
+export default UnsupportedPassportScreen;

app/src/screens/Settings/DevSettingsScreen.tsx

@@ -34,6 +34,7 @@ const items: (keyof RootStackParamList)[] = [
   'RecoverWithPhrase',
   'ShowRecoveryPhrase',
   'CloudBackupSettings',
+  'UnsupportedPassport',
 ];
 const ScreenSelector = ({}) => {
   const navigation = useNavigation();