adds the dismisable note about privacy (#25)

app/android/app/src/main/AndroidManifest.xml

@@ -26,6 +26,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
         android:launchMode="singleTop"
+        android:screenOrientation="portrait"
         android:windowSoftInputMode="adjustResize"
         android:exported="true">
         <intent-filter>

app/src/Navigation.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import {
   StaticParamList,
@@ -104,6 +105,8 @@ const RootStack = createStackNavigator({
   screenOptions: {
     header: DefaultNavBar,
   },
+
+  layout: ({ children }) => <SafeAreaProvider>{children}</SafeAreaProvider>,
   screens: {
     Splash: {
       screen: SplashScreen,

app/src/layouts/ExpandableBottomLayout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { black, white } from '../utils/colors';
 
@@ -16,7 +17,7 @@ interface BottomSectionProps {
 }
 
 const Layout: React.FC<ExpandableBottomLayoutProps> = ({ children }) => {
-  return <View style={styles.layout}>{children}</View>;
+  return <SafeAreaView style={styles.layout}>{children}</SafeAreaView>;
 };
 
 const TopSection: React.FC<TopSectionProps> = ({ children }) => {

app/src/screens/DisclaimerScreen.tsx

@@ -7,10 +7,12 @@ import { Image, 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';
 
 const DisclaimerScreen: React.FC = () => {
   const navigation = useNavigation();
+  const { dismissPrivacyNote } = useSettingStore();
 
   return (
     <ExpandableBottomLayout.Layout>
@@ -45,7 +47,10 @@ const DisclaimerScreen: React.FC = () => {
           </Text>
           <PrimaryButton
             style={{ marginVertical: 30 }}
-            onPress={() => navigation.navigate('Home')}
+            onPress={() => {
+              dismissPrivacyNote();
+              navigation.navigate('Home');
+            }}
           >
             Dismiss
           </PrimaryButton>

app/src/screens/HomeScreen.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { useNavigation } from '@react-navigation/native';
-import { Button, Image, View, YStack, styled } from 'tamagui';
+import { Button, YStack, styled } from 'tamagui';
 
+import { BodyText } from '../components/typography/BodyText';
 import { Caption } from '../components/typography/Caption';
 import ScanIcon from '../images/icons/qr_scan.svg';
-import MAP from '../images/map.png';
-import { amber500, black, neutral700 } from '../utils/colors';
+import WarnIcon from '../images/icons/warning.svg';
+import SelfIdCard from '../images/self-id-card.svg';
+import { useSettingStore } from '../stores/settingStore';
+import { amber500, black, neutral700, slate800, white } from '../utils/colors';
 
 const ScanButton = styled(Button, {
   borderRadius: 20,
@@ -22,25 +26,61 @@ const ScanButton = styled(Button, {
 const HomeScreen: React.FC = () => {
   const navigation = useNavigation();
   return (
-    <YStack f={1} px="$4" bg={black}>
-      <YStack f={1} mt="$6" mb="$10" gap="$0" ai="center" jc="space-between">
-        <View ai="center" gap="$4">
-          <Image src={MAP} />
+    <SafeAreaView style={{ backgroundColor: black, flex: 1 }}>
+      <YStack
+        bg={black}
+        gap={20}
+        jc="space-between"
+        height={'100%'}
+        padding={20}
+      >
+        <YStack ai="center" gap={20} justifyContent="flex-start">
+          <SelfIdCard width="100%" />
           <Caption color={amber500} opacity={0.3} textTransform="uppercase">
             Only visible to you
           </Caption>
-        </View>
-        <View ai="center" gap="$3.5">
+          <PrivacyNote />
+        </YStack>
+        <YStack ai="center" gap={20} justifyContent="center" paddingBottom={20}>
           <ScanButton onPress={() => navigation.navigate('QRCodeViewFinder')}>
             <ScanIcon color={amber500} />
           </ScanButton>
           <Caption color={amber500} textTransform="uppercase">
             Prove your SELF ID
           </Caption>
-        </View>
+        </YStack>
       </YStack>
-    </YStack>
+    </SafeAreaView>
   );
 };
 
+function PrivacyNote() {
+  const { hasPrivacyNoteBeenDismissed } = useSettingStore();
+  const navigation = useNavigation();
+
+  if (hasPrivacyNoteBeenDismissed) {
+    return null;
+  }
+
+  return (
+    <Card onPressIn={() => navigation.navigate('Disclaimer')}>
+      <WarnIcon color={white} width={24} height={33} />
+      <BodyText color={white} textAlign="center" fontSize={18}>
+        A note on protecting your privacy
+      </BodyText>
+    </Card>
+  );
+}
+
 export default HomeScreen;
+
+const Card = styled(YStack, {
+  width: '100%',
+
+  flexGrow: 0,
+  backgroundColor: slate800,
+  borderRadius: 4,
+  gap: 12,
+  alignItems: 'center',
+  padding: 20,
+});

app/src/screens/ProveFlow/ViewFinder.tsx

@@ -67,7 +67,7 @@ const QRCodeViewFinderScreen: React.FC<QRCodeViewFinderScreenProps> = ({}) => {
         {null}
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection>
-        <YStack alignItems="center" gap="$2.5">
+        <YStack alignItems="center" gap="$2.5" paddingBottom={20}>
           <YStack alignItems="center" gap="$6" pb="$2.5">
             <Title>Verify your Self ID</Title>
             <XStack gap="$6" alignSelf="flex-start" alignItems="flex-start">

app/src/stores/settingStore.ts

@@ -0,0 +1,13 @@
+import { create } from 'zustand';
+
+interface SettingsState {
+  hasPrivacyNoteBeenDismissed: boolean;
+  dismissPrivacyNote: () => void;
+}
+
+export const useSettingStore = create<SettingsState>(set => ({
+  hasPrivacyNoteBeenDismissed: false,
+  dismissPrivacyNote: () => {
+    set({ hasPrivacyNoteBeenDismissed: true });
+  },
+}));