SEL-479: Multi-ID onboarding mvp flow

app/ios/OpenPassport/Info.plist

@@ -21,7 +21,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>2.5.5</string>
+	<string>2.5.6</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

app/ios/Self.xcodeproj/project.pbxproj

@@ -407,7 +407,7 @@
 				CODE_SIGN_ENTITLEMENTS = OpenPassport/OpenPassportDebug.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 137;
+				CURRENT_PROJECT_VERSION = 140;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5B29R5LYHQ;
 				ENABLE_BITCODE = NO;
@@ -522,7 +522,7 @@
 					"$(PROJECT_DIR)",
 					"$(PROJECT_DIR)/MoproKit/Libs",
 				);
-				MARKETING_VERSION = 2.5.5;
+				MARKETING_VERSION = 2.5.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -548,7 +548,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = OpenPassport/OpenPassport.entitlements;
-				CURRENT_PROJECT_VERSION = 137;
+				CURRENT_PROJECT_VERSION = 140;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 5B29R5LYHQ;
 				FRAMEWORK_SEARCH_PATHS = (
@@ -662,7 +662,7 @@
 					"$(PROJECT_DIR)",
 					"$(PROJECT_DIR)/MoproKit/Libs",
 				);
-				MARKETING_VERSION = 2.5.5;
+				MARKETING_VERSION = 2.5.6;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

app/src/components/Tips.tsx

@@ -9,27 +9,51 @@ import { Caption } from './typography/Caption';
 export interface TipProps {
   title: string;
   body: string;
+  icon?: React.ReactNode;
 }
 
-function Tip({ title, body }: TipProps) {
+function Tip({ title, body, icon }: TipProps) {
   return (
-    <View>
-      <Caption size="large" color={slate500}>
-        <Text fontWeight={'bold'}>
-          {title}
-          {': '}
-        </Text>
-        {body}
-      </Caption>
+    <View
+      backgroundColor="#F6F8FA"
+      borderRadius={12}
+      flexDirection="row"
+      alignItems="flex-start"
+      padding={14}
+      gap={12}
+      shadowColor="#000"
+      shadowOpacity={0.04}
+      shadowRadius={4}
+      marginBottom={4}
+    >
+      {icon && (
+        <View
+          minWidth={28}
+          minHeight={28}
+          justifyContent="center"
+          alignItems="center"
+        >
+          {icon}
+        </View>
+      )}
+      <View flex={1}>
+        <Caption size="large" color={slate500}>
+          <Text fontWeight={'bold'}>
+            {title}
+            {': '}
+          </Text>
+          {body}
+        </Caption>
+      </View>
     </View>
   );
 }
 
 export default function Tips({ items }: { items: TipProps[] }) {
   return (
-    <View paddingVertical={20} gap={10}>
+    <View paddingVertical={10} gap={12}>
       {items.map((item, index) => (
-        <Tip key={index} title={item.title} body={item.body} />
+        <Tip key={index} {...item} />
       ))}
     </View>
   );

app/src/consts/analytics.ts

@@ -3,6 +3,7 @@
 export const AppEvents = {
   DISMISS_PRIVACY_DISCLAIMER: 'App: Dismiss Privacy Disclaimer',
   GET_STARTED: 'App: Get Started',
+  SUPPORTED_BIOMETRIC_IDS: 'App: Supported Biometric IDs',
   UPDATE_MODAL_CLOSED: 'App: Update Modal Closed',
   UPDATE_MODAL_OPENED: 'App: Update Modal Opened',
   UPDATE_STARTED: 'App: Update Started',

app/src/consts/links.ts

@@ -6,6 +6,9 @@ export const termsUrl = 'https://self.xyz/terms';
 
 export const privacyUrl = 'https://self.xyz/privacy';
 
+export const supportedBiometricIdsUrl =
+  'https://docs.self.xyz/use-self/self-map-countries-list';
+
 export const telegramUrl = 'https://t.me/self_xyz';
 
 export const gitHubUrl = 'https://github.com/selfxyz/self';

app/src/layouts/SimpleScrolledTitleLayout.tsx

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, YStack } from 'tamagui';
 
 import { PrimaryButton } from '../components/buttons/PrimaryButton';
@@ -15,6 +16,8 @@ interface DetailListProps
     onDismiss: () => void;
     secondaryButtonText?: string;
     onSecondaryButtonPress?: () => void;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
   }> {}
 
 export default function SimpleScrolledTitleLayout({
@@ -23,25 +26,31 @@ export default function SimpleScrolledTitleLayout({
   onDismiss,
   secondaryButtonText,
   onSecondaryButtonPress,
+  header,
+  footer,
 }: DetailListProps) {
+  const insets = useSafeAreaInsets();
   return (
     <ExpandableBottomLayout.Layout backgroundColor={white}>
       <ExpandableBottomLayout.FullSection paddingTop={0} flex={1}>
-        <ScrollView flex={1}>
-          <YStack paddingTop={20}>
-            <Title>{title}</Title>
-            <YStack paddingVertical={20} flex={1}>
-              {children}
-            </YStack>
+        <YStack paddingTop={insets.top + 12}>
+          <Title>{title}</Title>
+          {header}
+        </YStack>
+        <ScrollView flex={1} showsVerticalScrollIndicator={false}>
+          <YStack paddingTop={0} paddingBottom={20} flex={1}>
+            {children}
           </YStack>
         </ScrollView>
-
+        {footer && <YStack marginBottom={18}>{footer}</YStack>}
         {secondaryButtonText && onSecondaryButtonPress && (
           <SecondaryButton onPress={onSecondaryButtonPress} mb="$2">
             {secondaryButtonText}
           </SecondaryButton>
         )}
-        <PrimaryButton onPress={onDismiss}>Dismiss</PrimaryButton>
+        <YStack paddingBottom={insets.bottom + 12}>
+          <PrimaryButton onPress={onDismiss}>Dismiss</PrimaryButton>
+        </YStack>
       </ExpandableBottomLayout.FullSection>
     </ExpandableBottomLayout.Layout>
   );

app/src/navigation/misc.tsx

@@ -14,8 +14,10 @@ const miscScreens = {
   Launch: {
     screen: LaunchScreen,
     options: {
-      headerShown: false,
-      gestureEnabled: false,
+      header: () => (
+        <StatusBar barStyle="light-content" backgroundColor={black} />
+      ),
+      navigationBarColor: black,
     },
   },
   LoadingScreen: {
@@ -33,6 +35,7 @@ const miscScreens = {
       animation: 'fade',
     } as NativeStackNavigationOptions,
   },
+
   Splash: {
     screen: SplashScreen,
     options: {

app/src/screens/aesop/PassportOnboardingScreen.tsx

@@ -39,15 +39,15 @@ const PassportOnboardingScreen: React.FC<
           ref={animationRef}
           autoPlay={false}
           loop={false}
-          onAnimationFinish={() => {
-            setTimeout(() => {
-              animationRef.current?.play();
-            }, 5000); // Pause 5 seconds before playing again
-          }}
           source={passportOnboardingAnimation}
           style={styles.animation}
           cacheComposition={true}
           renderMode="HARDWARE"
+          onAnimationFinish={() => {
+            setTimeout(() => {
+              animationRef.current?.play();
+            }, 100);
+          }}
         />
       </ExpandableBottomLayout.TopSection>
       <ExpandableBottomLayout.BottomSection
@@ -100,8 +100,8 @@ export default PassportOnboardingScreen;
 const styles = StyleSheet.create({
   animation: {
     backgroundColor: slate100,
-    width: '115%',
-    height: '115%',
+    width: '100%',
+    height: '100%',
   },
   textIconWrapper: {
     width: '100%',