github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-02-19 02:24:25 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feat/add logo confirmation screen (#1666)

Browse Source 
* feat: initial logoConfirmation screen

* fix: center text in buttons

* fix: ensure biometric logo is not cropped

* fix: add spacing to logo confirm screen, consistent padding for buttons

* feat: add popup to logo confirmation screen

* fix: handle Sumsub cancellation correctly in Other ID flow

* feat: add pathway from logo confirmation -> sumsub -> success

* feat: add document type pre-selection for Sumsub SDK

* feat: add KycFailureScreen for when user clicks on failure notification

* feat: add KycConnectionErrorScreen for sumsub_initiation error

* refactor: edit RegistrationFallbackScreen for new design

Now only to be used for MRZ/NFC scan errors, instead of kyc connection/registration issues. Also updated to newest design for screen from Figma

* refactor: update AadhaarUploadErrorScreen for new design

* fix: removed unused countryCode variable and useRoute import

* fix: Sorted imports (moved kyc after documents/selection imports)

fix CI

* chore: lint/prettier

* fix: CI error

* refactor: Split RegistrationFallbackScreen into MRZ/NFC error versions

* feat: add link from RegistrationFallbackNFCScreen -> DocumentNFCTrouble

Clicking on the question mark now takes user to this screen that can help them diagnose issue

* fix: on clicking question mark, dismiss screen returns to correct screen

* chore: yarn prettier

* test: fix failing test for CI
This commit is contained in:
Evi Nova
2026-02-06 22:27:50 +10:00
committed by GitHub
parent 141fcb67c3
commit 73ca37f3b9
25 changed files with 1536 additions and 450 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/src/assets/icons/epassport_logo.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="117" height="72" viewBox="0 0 210 297"><path d="M-111.5625 24.75V136.125H23.539306A82.5 82.5 0 0 1 105 66 82.5 82.5 0 0 1 186.5 136.125H321.5625V24.75ZM105 90.75A57.75 57.75 0 0 0 47.25 148.5 57.75 57.75 0 0 0 105 206.25 57.75 57.75 0 0 0 162.75 148.5 57.75 57.75 0 0 0 105 90.75Zm-216.5625 70.125V272.25h433.125V160.875H186.46068A82.5 82.5 0 0 1 105 231 82.5 82.5 0 0 1 23.5 160.875Z" stroke-width="81.90428162"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 467 B

3
app/src/assets/icons/shield_error.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="100" height="120" viewBox="0 0 100.078 119.796" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50.0391 119.796C49.4831 119.796 48.8278 119.677 48.0732 119.438C47.3187 119.24 46.5641 118.942 45.8096 118.545C37.3506 114.018 30.1823 109.927 24.3047 106.273C18.4668 102.66 13.7607 99.1051 10.1865 95.6104C6.65202 92.1156 4.07064 88.3626 2.44238 84.3516C0.814128 80.3008 0 75.5947 0 70.2334V26.3896C0 22.6169 0.714844 19.8171 2.14453 17.9902C3.61393 16.1237 5.95703 14.5352 9.17383 13.2246C10.4049 12.748 12.1523 12.0928 14.416 11.2588C16.7194 10.3851 19.2611 9.45182 22.041 8.45898C24.821 7.42643 27.5811 6.43359 30.3213 5.48047C33.1012 4.52734 35.6032 3.6735 37.8271 2.91895C40.0908 2.12467 41.8382 1.52897 43.0693 1.13184C44.1813 0.814128 45.333 0.55599 46.5244 0.357422C47.7555 0.119141 48.9271 0 50.0391 0C51.151 0 52.3226 0.119141 53.5537 0.357422C54.8245 0.55599 55.9961 0.814128 57.0684 1.13184C58.2995 1.52897 60.027 2.12467 62.251 2.91895C64.5146 3.6735 67.0166 4.5472 69.7568 5.54004C72.5368 6.49316 75.2969 7.46615 78.0371 8.45898C80.8171 9.45182 83.3389 10.3652 85.6025 11.1992C87.9059 12.0332 89.6732 12.7083 90.9043 13.2246C94.1608 14.5749 96.5039 16.1634 97.9336 17.9902C99.3633 19.8171 100.078 22.6169 100.078 26.3896V70.2334C100.078 75.5947 99.2839 80.3206 97.6953 84.4111C96.1465 88.5016 93.6048 92.334 90.0703 95.9082C86.5358 99.4427 81.8298 102.997 75.9521 106.571C70.1143 110.185 62.9062 114.176 54.3281 118.545C53.5339 118.942 52.7594 119.24 52.0049 119.438C51.2503 119.677 50.5951 119.796 50.0391 119.796ZM30.8574 82.3857C32.6842 82.3857 34.2132 81.79 35.4443 80.5986L50.1582 65.8252L64.9316 80.5986C66.0833 81.79 67.5527 82.3857 69.3398 82.3857C71.0872 82.3857 72.5566 81.79 73.748 80.5986C74.9395 79.4072 75.5352 77.9378 75.5352 76.1904C75.5352 74.4827 74.9196 73.0531 73.6885 71.9014L58.8555 57.0684L73.748 42.2354C74.9395 41.0042 75.5352 39.5745 75.5352 37.9463C75.5352 36.1989 74.9395 34.7493 73.748 33.5977C72.5964 32.4062 71.1667 31.8105 69.459 31.8105C67.7116 31.8105 66.2422 32.4062 65.0508 33.5977L50.1582 48.4307L35.3252 33.6572C34.0941 32.4658 32.6048 31.8701 30.8574 31.8701C29.1497 31.8701 27.7002 32.4658 26.5088 33.6572C25.3571 34.8089 24.7812 36.2585 24.7812 38.0059C24.7812 39.6341 25.377 41.0439 26.5684 42.2354L41.4609 57.0684L26.5684 71.9609C25.377 73.1523 24.7812 74.5622 24.7812 76.1904C24.7812 77.9378 25.3571 79.4072 26.5088 80.5986C27.7002 81.79 29.1497 82.3857 30.8574 82.3857Z" fill="#FACC15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

26
app/src/hooks/useSumsubLauncher.ts
View File

@@ -12,11 +12,7 @@ import { fetchAccessToken, launchSumsub } from '@/integrations/sumsub';
import type { SumsubResult } from '@/integrations/sumsub/types';
import type { RootStackParamList } from '@/navigation';
export type FallbackErrorSource =
| 'mrz_scan_failed'
| 'nfc_scan_failed'
| 'sumsub_initialization'
| 'sumsub_verification';
export type FallbackErrorSource = 'mrz_scan_failed' | 'nfc_scan_failed';
export interface UseSumsubLauncherOptions {
/**
@@ -90,10 +86,12 @@ export const useSumsubLauncher = (options: UseSumsubLauncherOptions) => {
if (onError) {
await onError(safeError, result);
} else {
navigation.navigate('RegistrationFallback', {
errorSource,
countryCode,
});
// Navigate to the appropriate fallback screen based on error source
if (errorSource === 'mrz_scan_failed') {
navigation.navigate('RegistrationFallbackMRZ', { countryCode });
} else {
navigation.navigate('RegistrationFallbackNFC', { countryCode });
}
}
return;
}
@@ -110,10 +108,12 @@ export const useSumsubLauncher = (options: UseSumsubLauncherOptions) => {
if (onError) {
await onError(safeError);
} else {
navigation.navigate('RegistrationFallback', {
errorSource,
countryCode,
});
// Navigate to the appropriate fallback screen based on error source
if (errorSource === 'mrz_scan_failed') {
navigation.navigate('RegistrationFallbackMRZ', { countryCode });
} else {
navigation.navigate('RegistrationFallbackNFC', { countryCode });
}
}
} finally {
setIsLoading(false);

44
app/src/integrations/sumsub/sumsubService.ts
View File

@@ -5,15 +5,30 @@
import { SUMSUB_TEE_URL } from '@env';
import SNSMobileSDK from '@sumsub/react-native-mobilesdk-module';
import { alpha2ToAlpha3 } from '@selfxyz/common';
import type {
AccessTokenResponse,
SumsubResult,
} from '@/integrations/sumsub/types';
// Maps Self document type codes to Sumsub document types
type SelfDocumentType = 'p' | 'i';
type SumsubDocumentType = 'PASSPORT' | 'ID_CARD';
const DOCUMENT_TYPE_MAP: Record<SelfDocumentType, SumsubDocumentType> = {
p: 'PASSPORT',
i: 'ID_CARD',
};
export interface SumsubConfig {
accessToken: string;
locale?: string;
debug?: boolean;
/** Self document type code ('p' for passport, 'i' for ID card) */
documentType?: SelfDocumentType;
/** ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB') */
countryCode?: string;
onStatusChanged?: (prevStatus: string, newStatus: string) => void;
onEvent?: (eventType: string, payload: unknown) => void;
}
@@ -78,7 +93,7 @@ export const fetchAccessToken = async (
export const launchSumsub = async (
config: SumsubConfig,
): Promise<SumsubResult> => {
const sdk = SNSMobileSDK.init(config.accessToken, async () => {
let sdk = SNSMobileSDK.init(config.accessToken, async () => {
// Token refresh not implemented for test flow
throw new Error(
'Sumsub token expired - refresh not implemented for test flow',
@@ -101,8 +116,29 @@ export const launchSumsub = async (
})
.withDebug(config.debug ?? __DEV__)
.withLocale(config.locale ?? 'en')
.withAnalyticsEnabled(true) // Device Intelligence requires this
.build();
.withAnalyticsEnabled(true); // Device Intelligence requires this
return sdk.launch();
// Pre-select document type and country if provided
// This skips the document selection step in Sumsub
if (config.documentType && config.countryCode) {
const sumsubDocType = DOCUMENT_TYPE_MAP[config.documentType];
// Handle both 2-letter (US) and 3-letter (USA) country codes
// alpha2ToAlpha3 returns undefined for 3-letter codes, so use the original if conversion fails
const alpha3Country =
alpha2ToAlpha3(config.countryCode) ?? config.countryCode;
if (sumsubDocType && alpha3Country) {
console.log(
`[Sumsub] Pre-selecting document: ${sumsubDocType} from ${alpha3Country}`,
);
sdk = sdk.withPreferredDocumentDefinitions({
IDENTITY: {
idDocType: sumsubDocType,
country: alpha3Country,
},
});
}
}
return sdk.build().launch();
};

55
app/src/navigation/documents.ts
View File

@@ -19,11 +19,15 @@ import DocumentCameraTroubleScreen from '@/screens/documents/scanning/DocumentCa
import DocumentNFCMethodSelectionScreen from '@/screens/documents/scanning/DocumentNFCMethodSelectionScreen';
import DocumentNFCScanScreen from '@/screens/documents/scanning/DocumentNFCScanScreen';
import DocumentNFCTroubleScreen from '@/screens/documents/scanning/DocumentNFCTroubleScreen';
import RegistrationFallbackScreen from '@/screens/documents/scanning/RegistrationFallbackScreen';
import RegistrationFallbackMRZScreen from '@/screens/documents/scanning/RegistrationFallbackMRZScreen';
import RegistrationFallbackNFCScreen from '@/screens/documents/scanning/RegistrationFallbackNFCScreen';
import ConfirmBelongingScreen from '@/screens/documents/selection/ConfirmBelongingScreen';
import CountryPickerScreen from '@/screens/documents/selection/CountryPickerScreen';
import DocumentOnboardingScreen from '@/screens/documents/selection/DocumentOnboardingScreen';
import IDPickerScreen from '@/screens/documents/selection/IDPickerScreen';
import LogoConfirmationScreen from '@/screens/documents/selection/LogoConfirmationScreen';
import KycConnectionErrorScreen from '@/screens/kyc/KycConnectionErrorScreen';
import KycFailureScreen from '@/screens/kyc/KycFailureScreen';
const documentsScreens = {
DocumentCamera: {
@@ -94,6 +98,16 @@ const documentsScreens = {
documentTypes: [],
},
},
LogoConfirmation: {
screen: LogoConfirmationScreen,
options: {
headerShown: false,
} as NativeStackNavigationOptions,
initialParams: {
documentType: '',
countryCode: '',
},
},
ConfirmBelonging: {
screen: ConfirmBelongingScreen,
options: {
@@ -148,22 +162,49 @@ const documentsScreens = {
AadhaarUploadError: {
screen: AadhaarUploadErrorScreen,
options: {
title: 'AADHAAR REGISTRATION',
header: AadhaarNavBar,
headerBackVisible: false,
headerShown: false,
} as NativeStackNavigationOptions,
initialParams: {
errorType: 'general',
},
},
RegistrationFallback: {
screen: RegistrationFallbackScreen,
RegistrationFallbackMRZ: {
screen: RegistrationFallbackMRZScreen,
options: {
title: 'REGISTRATION',
headerShown: false,
} as NativeStackNavigationOptions,
initialParams: {
errorSource: 'sumsub_initialization',
countryCode: '',
},
},
RegistrationFallbackNFC: {
screen: RegistrationFallbackNFCScreen,
options: {
title: 'REGISTRATION',
headerShown: false,
} as NativeStackNavigationOptions,
initialParams: {
countryCode: '',
},
},
KycFailure: {
screen: KycFailureScreen,
options: {
headerShown: false,
animation: 'fade',
} as NativeStackNavigationOptions,
initialParams: {
countryCode: '',
canRetry: true,
},
},
KycConnectionError: {
screen: KycConnectionErrorScreen,
options: {
headerShown: false,
} as NativeStackNavigationOptions,
initialParams: {
countryCode: '',
},
},

21
app/src/navigation/types.ts
View File

@@ -82,6 +82,10 @@ export type DocumentRoutesParamList = {
countryCode: string;
documentTypes: string[];
};
LogoConfirmation: {
documentType: string;
countryCode: string;
};
ConfirmBelonging:
| {
documentCategory?: DocumentCategory;
@@ -157,18 +161,23 @@ export type OnboardingRoutesParamList = {
userId?: string;
}
| undefined;
KycFailure: {
countryCode?: string;
canRetry?: boolean;
};
KycConnectionError: {
countryCode?: string;
};
};
// =============================================================================
// Registration Fallback Screens
// =============================================================================
export type RegistrationRoutesParamList = {
RegistrationFallback: {
errorSource:
| 'mrz_scan_failed'
| 'nfc_scan_failed'
| 'sumsub_initialization'
| 'sumsub_verification';
RegistrationFallbackMRZ: {
countryCode: string;
};
RegistrationFallbackNFC: {
countryCode: string;
};
};

29
app/src/providers/notificationTrackingProvider.tsx
View File

@@ -30,17 +30,26 @@ const executeNotificationNavigation = (
const status = remoteMessage.data?.status;
// Handle KYC result notifications
if (notificationType === 'kyc_result' && status === 'approved') {
navigationRef.navigate('KYCVerified', {
status: String(status),
userId: remoteMessage.data?.user_id
? String(remoteMessage.data.user_id)
: undefined,
});
return true;
if (notificationType === 'kyc_result') {
if (status === 'approved') {
navigationRef.navigate('KYCVerified', {
status: String(status),
userId: remoteMessage.data?.user_id
? String(remoteMessage.data.user_id)
: undefined,
});
return true;
} else if (status === 'rejected') {
navigationRef.navigate('KycFailure', {
canRetry: false,
});
return true;
} else if (status === 'retry') {
// Take user directly to verification flow to retry
navigationRef.navigate('CountryPicker');
return true;
}
}
// Add handling for other notification types here as needed
// For retry/rejected statuses, could navigate to appropriate screens in future
return true; // Navigation handled (or not applicable)
};

42
app/src/providers/selfClientProvider.tsx
View File

@@ -284,8 +284,7 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
});
addListener(SdkEvents.DOCUMENT_MRZ_READ_FAILURE, () => {
navigateIfReady('RegistrationFallback', {
errorSource: 'mrz_scan_failed',
navigateIfReady('RegistrationFallbackMRZ', {
countryCode: currentCountryCode,
});
});
@@ -318,10 +317,12 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
if (navigationRef.isReady()) {
switch (documentType) {
case 'p':
navigationRef.navigate('DocumentOnboarding');
break;
case 'i':
navigationRef.navigate('DocumentOnboarding');
// Navigate to logo confirmation screen for biometric IDs
navigationRef.navigate('LogoConfirmation', {
documentType,
countryCode,
});
break;
case 'a':
if (countryCode) {
@@ -348,8 +349,21 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
accessToken: accessToken.token,
});
// User cancelled - return silently
if (!result.success && result.status === 'Interrupted') {
console.log('[Sumsub] Result:', JSON.stringify(result));
// User cancelled/dismissed without completing verification
// Status values: 'Initial' (never started), 'Incomplete' (started but not finished),
// 'Interrupted' (explicitly cancelled)
const cancelledStatuses = [
'Initial',
'Incomplete',
'Interrupted',
];
if (cancelledStatuses.includes(result.status)) {
console.log(
'[Sumsub] User cancelled or closed without completing, status:',
result.status,
);
return;
}
@@ -370,15 +384,20 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
}
// Guard navigation call after async operations
if (navigationRef.isReady()) {
navigationRef.navigate('RegistrationFallback', {
errorSource: 'sumsub_verification',
navigationRef.navigate('KycFailure', {
countryCode,
canRetry: true,
});
}
return;
}
// Success case: navigate to KYC success screen
// User completed verification (status: 'Pending', 'Approved', etc.)
// Navigate to KYC success screen
console.log(
'[Sumsub] Verification submitted, status:',
result.status,
);
if (navigationRef.isReady()) {
navigationRef.navigate('KycSuccess', {
userId: accessToken.userId,
@@ -391,8 +410,7 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
console.error('Error in KYC flow:', safeInitError);
// Guard navigation call after async operations
if (navigationRef.isReady()) {
navigationRef.navigate('RegistrationFallback', {
errorSource: 'sumsub_initialization',
navigationRef.navigate('KycConnectionError', {
countryCode,
});
}

248
app/src/screens/documents/aadhaar/AadhaarUploadErrorScreen.tsx
View File

@@ -2,25 +2,34 @@
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React from 'react';
import { XStack, YStack } from 'tamagui';
import React, { useCallback } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, XStack, YStack } from 'tamagui';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { Image } from '@tamagui/lucide-icons';
import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
import { BodyText, PrimaryButton } from '@selfxyz/mobile-sdk-alpha/components';
import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
import { AadhaarEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';
import {
black,
cyan300,
slate100,
slate200,
slate300,
slate500,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
import { getErrorMessages } from '@selfxyz/mobile-sdk-alpha/onboarding/import-aadhaar';
import WarningIcon from '@/assets/images/warning.svg';
import { NavBar } from '@/components/navbar/BaseNavBar';
import { useSumsubLauncher } from '@/hooks/useSumsubLauncher';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
import { extraYPadding } from '@/utils/styleUtils';
type AadhaarUploadErrorRouteParams = {
@@ -32,81 +41,214 @@ type AadhaarUploadErrorRoute = RouteProp<
string
>;
const getErrorMessages = (
errorType: 'general' | 'expired',
): { title: string; description: string } => {
switch (errorType) {
case 'expired':
return {
title: 'Your Aadhaar document has expired',
description: 'Please upload a valid Aadhaar document',
};
case 'general':
default:
return {
title: 'There was a problem reading the code',
description: 'Make sure the QR code is valid and try again',
};
}
};
const AadhaarUploadErrorScreen: React.FC = () => {
const insets = useSafeAreaInsets();
const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
const navigation = useNavigation();
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<AadhaarUploadErrorRoute>();
const { trackEvent } = useSelfClient();
const errorType = route.params?.errorType || 'general';
const errorType = route.params?.errorType || 'general';
const { title, description } = getErrorMessages(errorType);
const { launchSumsubVerification, isLoading: isRetrying } = useSumsubLauncher(
{
countryCode: 'IND',
errorSource: 'mrz_scan_failed', // Use a compatible error source
onCancel: () => {
navigation.goBack();
},
onError: () => {
// Stay on this screen - user can try again
},
onSuccess: () => {
// Success - provider handles its own success UI
},
},
);
const handleClose = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleTryAgain = useCallback(() => {
trackEvent(AadhaarEvents.RETRY_BUTTON_PRESSED, { errorType });
navigation.goBack();
}, [errorType, navigation, trackEvent]);
const handleTryAlternative = useCallback(async () => {
trackEvent(AadhaarEvents.HELP_BUTTON_PRESSED, { errorType });
await launchSumsubVerification();
}, [errorType, launchSumsubVerification, trackEvent]);
return (
<YStack flex={1} backgroundColor={slate100}>
<YStack flex={1} paddingHorizontal={20} paddingTop={20}>
<YStack
flex={1}
justifyContent="center"
{/* Header */}
<YStack backgroundColor={slate100}>
<NavBar.Container
backgroundColor={slate100}
barStyle="dark"
paddingHorizontal="$4"
paddingTop={insets.top + extraYPadding}
paddingBottom={10}
alignItems="center"
paddingVertical={20}
justifyContent="space-between"
>
<WarningIcon width={120} height={120} />
<NavBar.LeftAction
component="close"
color={black}
onPress={handleClose}
/>
<NavBar.Title style={{ fontFamily: dinot, fontSize: 17 }}>
AADHAAR REGISTRATION
</NavBar.Title>
{/* Invisible spacer to balance header */}
<YStack width={30} height={30} />
</NavBar.Container>
{/* Progress Bar - Step 2 for Aadhaar upload */}
<YStack paddingHorizontal={40} paddingBottom={14} paddingTop={4}>
<XStack gap={3} height={6}>
{[1, 2, 3, 4].map(step => (
<YStack
key={step}
flex={1}
backgroundColor={step === 2 ? cyan300 : slate300}
borderRadius={10}
/>
))}
</XStack>
</YStack>
</YStack>
{/* Main Content Area */}
<YStack
flex={1}
backgroundColor={slate100}
borderBottomWidth={1}
borderBottomColor={slate200}
>
{/* Warning Icon */}
<YStack flex={1} paddingHorizontal={20} paddingBottom={20}>
<YStack flex={1} justifyContent="center" alignItems="center">
<WarningIcon width={150} height={150} />
</YStack>
</YStack>
{/* Error Message and Retry Button */}
<YStack
paddingHorizontal={20}
paddingTop={20}
paddingBottom={20}
gap={20}
borderTopWidth={1}
borderTopColor={slate200}
>
<YStack alignItems="center" gap={4}>
<BodyText
style={{ fontSize: 18, textAlign: 'center', color: black }}
>
{title}
</BodyText>
<BodyText
style={{
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
{description}
</BodyText>
</YStack>
{/* Retry Button - Primary style with icon */}
<Button
backgroundColor={black}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleTryAgain}
disabled={isRetrying}
>
<XStack alignItems="center" gap={8}>
<Image size={20} color={white} />
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: white,
}}
>
Try upload again
</BodyText>
</XStack>
</Button>
</YStack>
</YStack>
{/* Bottom Section */}
<YStack
paddingHorizontal={20}
paddingTop={20}
alignItems="center"
paddingVertical={25}
borderBlockWidth={1}
borderBlockColor={slate200}
paddingBottom={paddingBottom}
gap={10}
>
<BodyText style={{ fontSize: 19, textAlign: 'center', color: black }}>
{title}
</BodyText>
{/* Secondary Button - White fill, black text, rounded */}
<Button
backgroundColor={white}
borderWidth={1}
borderColor={slate200}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleTryAlternative}
disabled={isRetrying}
>
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: black,
}}
>
{isRetrying ? 'Loading...' : 'Try a different method'}
</BodyText>
</Button>
{/* Footer Text - Not italic */}
<BodyText
style={{
marginTop: 6,
fontSize: 17,
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
{description}
Registering with alternative methods may take longer to verify your
document.
</BodyText>
</YStack>
<YStack
paddingHorizontal={25}
backgroundColor={white}
paddingBottom={paddingBottom}
paddingTop={25}
>
<XStack gap="$3" alignItems="stretch">
<YStack flex={1}>
<PrimaryButton
onPress={() => {
trackEvent(AadhaarEvents.RETRY_BUTTON_PRESSED, { errorType });
// Navigate back to upload screen to try again
navigation.goBack();
}}
>
Try Again
</PrimaryButton>
</YStack>
{/* <YStack flex={1}>
<SecondaryButton
onPress={() => {
trackEvent(AadhaarEvents.HELP_BUTTON_PRESSED, { errorType });
// TODO: Implement help functionality
}}
>
Need Help?
</SecondaryButton>
</YStack> */}
</XStack>
</YStack>
</YStack>
);
};

29
app/src/screens/documents/scanning/DocumentCameraScreen.tsx
View File

@@ -2,10 +2,11 @@
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useRef } from 'react';
import React, { useEffect, useRef } from 'react';
import { StyleSheet } from 'react-native';
import { View, XStack, YStack } from 'tamagui';
import { useIsFocused } from '@react-navigation/native';
import { useIsFocused, useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import {
DelayedLottieView,
@@ -33,21 +34,45 @@ import {
import passportScanAnimation from '@/assets/animations/passport_scan.json';
import Scan from '@/assets/icons/passport_camera_scan.svg';
import { PassportCamera } from '@/components/native/PassportCamera';
import { useErrorInjection } from '@/hooks/useErrorInjection';
import useHapticNavigation from '@/hooks/useHapticNavigation';
import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
import type { RootStackParamList } from '@/navigation';
import { getDocumentScanPrompt } from '@/utils/documentAttributes';
const DocumentCameraScreen: React.FC = () => {
const isFocused = useIsFocused();
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const selfClient = useSelfClient();
const selectedDocumentType = selfClient.useMRZStore(
state => state.documentType,
);
const countryCode = selfClient.useMRZStore(state => state.countryCode);
const { shouldInjectError } = useErrorInjection();
// Add a ref to track when the camera screen is mounted
const scanStartTimeRef = useRef(Date.now());
const { onPassportRead } = useReadMRZ(scanStartTimeRef);
// Dev-only: Auto-trigger MRZ error after short delay if error injection is enabled
useEffect(() => {
if (
shouldInjectError('mrz_invalid_format') ||
shouldInjectError('mrz_unknown_error')
) {
const timer = setTimeout(() => {
console.log(
'[DEV] Injecting MRZ error - navigating to fallback screen',
);
navigation.navigate('RegistrationFallbackMRZ', {
countryCode: countryCode || '',
});
}, 1500); // 1.5 second delay to show camera briefly
return () => clearTimeout(timer);
}
}, [shouldInjectError, navigation, countryCode]);
const scanPrompt = getDocumentScanPrompt(selectedDocumentType);
const navigateToHome = useHapticNavigation('Home', {

2
app/src/screens/documents/scanning/DocumentCameraTroubleScreen.tsx
View File

@@ -58,7 +58,7 @@ const DocumentCameraTroubleScreen: React.FC = () => {
const kycEnabled = useSettingStore(state => state.kycEnabled);
const { launchSumsubVerification, isLoading } = useSumsubLauncher({
countryCode,
errorSource: 'sumsub_initialization',
errorSource: 'mrz_scan_failed',
});
// error screen, flush analytics

3
app/src/screens/documents/scanning/DocumentNFCScanScreen.tsx
View File

@@ -191,8 +191,7 @@ const DocumentNFCScanScreen: React.FC = () => {
},
{ message: sanitizeErrorMessage(message) },
);
navigation.navigate('RegistrationFallback', {
errorSource: 'nfc_scan_failed',
navigation.navigate('RegistrationFallbackNFC', {
countryCode,
});
},

14
app/src/screens/documents/scanning/DocumentNFCTroubleScreen.tsx
View File

@@ -2,10 +2,11 @@
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useEffect } from 'react';
import React, { useCallback, useEffect } from 'react';
import { View } from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { YStack } from 'tamagui';
import { useNavigation } from '@react-navigation/native';
import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
import { Caption, SecondaryButton } from '@selfxyz/mobile-sdk-alpha/components';
@@ -16,6 +17,7 @@ import Tips from '@/components/Tips';
import { useFeedbackAutoHide } from '@/hooks/useFeedbackAutoHide';
import useHapticNavigation from '@/hooks/useHapticNavigation';
import { useSumsubLauncher } from '@/hooks/useSumsubLauncher';
import { selectionChange } from '@/integrations/haptics';
import SimpleScrolledTitleLayout from '@/layouts/SimpleScrolledTitleLayout';
import { flushAllAnalytics } from '@/services/analytics';
import { openSupportForm, SUPPORT_FORM_BUTTON_TEXT } from '@/services/support';
@@ -49,7 +51,11 @@ const tips: TipProps[] = [
];
const DocumentNFCTroubleScreen: React.FC = () => {
const go = useHapticNavigation('DocumentNFCScan', { action: 'cancel' });
const navigation = useNavigation();
const handleDismiss = useCallback(() => {
selectionChange();
navigation.goBack();
}, [navigation]);
const goToNFCMethodSelection = useHapticNavigation(
'DocumentNFCMethodSelection',
);
@@ -59,7 +65,7 @@ const DocumentNFCTroubleScreen: React.FC = () => {
const kycEnabled = useSettingStore(state => state.kycEnabled);
const { launchSumsubVerification, isLoading } = useSumsubLauncher({
countryCode,
errorSource: 'sumsub_initialization',
errorSource: 'nfc_scan_failed',
});
useFeedbackAutoHide();
@@ -78,7 +84,7 @@ const DocumentNFCTroubleScreen: React.FC = () => {
return (
<SimpleScrolledTitleLayout
title="Having trouble verifying your ID?"
onDismiss={go}
onDismiss={handleDismiss}
secondaryButtonText="Open NFC Options"
onSecondaryButtonPress={goToNFCMethodSelection}
footer={

256
app/src/screens/documents/scanning/RegistrationFallbackMRZScreen.tsx Normal file
View File

@@ -0,0 +1,256 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, XStack, YStack } from 'tamagui';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
cyan300,
slate100,
slate200,
slate300,
slate500,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
import WarningIcon from '@/assets/images/warning.svg';
import { NavBar } from '@/components/navbar/BaseNavBar';
import { useSumsubLauncher } from '@/hooks/useSumsubLauncher';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
import { extraYPadding } from '@/utils/styleUtils';
type RegistrationFallbackMRZRouteParams = {
countryCode: string;
};
type RegistrationFallbackMRZRoute = RouteProp<
Record<string, RegistrationFallbackMRZRouteParams>,
string
>;
const getHeaderTitle = (documentType: string): string => {
switch (documentType) {
case 'p':
return 'PASSPORT REGISTRATION';
case 'i':
return 'ID CARD REGISTRATION';
default:
return 'DOCUMENT REGISTRATION';
}
};
const RegistrationFallbackMRZScreen: React.FC = () => {
const insets = useSafeAreaInsets();
const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<RegistrationFallbackMRZRoute>();
const selfClient = useSelfClient();
const { trackEvent, useMRZStore } = selfClient;
const storeCountryCode = useMRZStore(state => state.countryCode);
const documentType = useMRZStore(state => state.documentType);
// Use country code from route params, or fall back to MRZ store
const countryCode = route.params?.countryCode || storeCountryCode || '';
const headerTitle = getHeaderTitle(documentType);
const { launchSumsubVerification, isLoading: isRetrying } = useSumsubLauncher(
{
countryCode,
errorSource: 'mrz_scan_failed',
onCancel: () => {
navigation.goBack();
},
onError: (_error, _result) => {
// Stay on this screen - user can try again
// Error is already logged in the hook
},
onSuccess: () => {
// Success - provider handles its own success UI
// The screen will be navigated away by the provider's flow
},
},
);
const handleClose = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleTryAlternative = useCallback(async () => {
trackEvent('REGISTRATION_FALLBACK_TRY_ALTERNATIVE', {
errorSource: 'mrz_scan_failed',
});
await launchSumsubVerification();
}, [launchSumsubVerification, trackEvent]);
const handleRetryOriginal = useCallback(() => {
trackEvent('REGISTRATION_FALLBACK_RETRY_ORIGINAL', {
errorSource: 'mrz_scan_failed',
});
navigation.navigate('DocumentCamera');
}, [navigation, trackEvent]);
return (
<YStack flex={1} backgroundColor={slate100}>
{/* Header */}
<YStack backgroundColor={slate100}>
<NavBar.Container
backgroundColor={slate100}
barStyle="dark"
paddingHorizontal="$4"
paddingTop={insets.top + extraYPadding}
paddingBottom={10}
alignItems="center"
justifyContent="space-between"
>
<NavBar.LeftAction
component="close"
color={black}
onPress={handleClose}
/>
<NavBar.Title style={{ fontFamily: dinot, fontSize: 17 }}>
{headerTitle}
</NavBar.Title>
{/* Invisible spacer to balance header */}
<YStack width={30} height={30} />
</NavBar.Container>
{/* Progress Bar - Step 2 for MRZ */}
<YStack paddingHorizontal={40} paddingBottom={14} paddingTop={4}>
<XStack gap={3} height={6}>
{[1, 2, 3, 4].map(step => (
<YStack
key={step}
flex={1}
backgroundColor={step === 2 ? cyan300 : slate300}
borderRadius={10}
/>
))}
</XStack>
</YStack>
</YStack>
{/* Main Content Area */}
<YStack
flex={1}
backgroundColor={slate100}
borderBottomWidth={1}
borderBottomColor={slate200}
>
{/* Warning Icon */}
<YStack flex={1} paddingHorizontal={20} paddingBottom={20}>
<YStack flex={1} justifyContent="center" alignItems="center">
<WarningIcon width={150} height={150} />
</YStack>
</YStack>
{/* Error Message and Retry Button */}
<YStack
paddingHorizontal={20}
paddingTop={20}
paddingBottom={20}
gap={20}
borderTopWidth={1}
borderTopColor={slate200}
>
<YStack alignItems="center" gap={4}>
<BodyText
style={{ fontSize: 18, textAlign: 'center', color: black }}
>
We couldn't read your document's MRZ
</BodyText>
<BodyText
style={{
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
Make sure the machine-readable zone at the bottom is clearly
visible and try again
</BodyText>
</YStack>
{/* Retry Button - Primary style with very rounded corners */}
<Button
backgroundColor={black}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleRetryOriginal}
disabled={isRetrying}
>
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: white,
}}
>
Try scanning again
</BodyText>
</Button>
</YStack>
</YStack>
{/* Bottom Section */}
<YStack
paddingHorizontal={20}
paddingTop={20}
paddingBottom={paddingBottom}
gap={10}
>
{/* Secondary Button - White fill, black text, rounded */}
<Button
backgroundColor={white}
borderWidth={1}
borderColor={slate200}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleTryAlternative}
disabled={isRetrying}
>
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: black,
}}
>
{isRetrying ? 'Loading...' : 'Try a different method'}
</BodyText>
</Button>
{/* Footer Text - Not italic */}
<BodyText
style={{
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
Registering with alternative methods may take longer to verify your
document.
</BodyText>
</YStack>
</YStack>
);
};
export default RegistrationFallbackMRZScreen;

282
app/src/screens/documents/scanning/RegistrationFallbackNFCScreen.tsx Normal file
View File

@@ -0,0 +1,282 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, XStack, YStack } from 'tamagui';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
import { BodyText } from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
blue600,
cyan300,
slate100,
slate200,
slate300,
slate500,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
import WarningIcon from '@/assets/images/warning.svg';
import { NavBar } from '@/components/navbar/BaseNavBar';
import { useSumsubLauncher } from '@/hooks/useSumsubLauncher';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
import { extraYPadding } from '@/utils/styleUtils';
type RegistrationFallbackNFCRouteParams = {
countryCode: string;
};
type RegistrationFallbackNFCRoute = RouteProp<
Record<string, RegistrationFallbackNFCRouteParams>,
string
>;
const getHeaderTitle = (documentType: string): string => {
switch (documentType) {
case 'p':
return 'PASSPORT REGISTRATION';
case 'i':
return 'ID CARD REGISTRATION';
default:
return 'DOCUMENT REGISTRATION';
}
};
const RegistrationFallbackNFCScreen: React.FC = () => {
const insets = useSafeAreaInsets();
const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<RegistrationFallbackNFCRoute>();
const selfClient = useSelfClient();
const { trackEvent, useMRZStore } = selfClient;
const storeCountryCode = useMRZStore(state => state.countryCode);
const documentType = useMRZStore(state => state.documentType);
// Use country code from route params, or fall back to MRZ store
const countryCode = route.params?.countryCode || storeCountryCode || '';
const headerTitle = getHeaderTitle(documentType);
const { launchSumsubVerification, isLoading: isRetrying } = useSumsubLauncher(
{
countryCode,
errorSource: 'nfc_scan_failed',
onCancel: () => {
navigation.goBack();
},
onError: (_error, _result) => {
// Stay on this screen - user can try again
// Error is already logged in the hook
},
onSuccess: () => {
// Success - provider handles its own success UI
// The screen will be navigated away by the provider's flow
},
},
);
const handleClose = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleHelp = useCallback(() => {
buttonTap();
navigation.navigate('DocumentNFCTrouble');
}, [navigation]);
const handleTryAlternative = useCallback(async () => {
trackEvent('REGISTRATION_FALLBACK_TRY_ALTERNATIVE', {
errorSource: 'nfc_scan_failed',
});
await launchSumsubVerification();
}, [launchSumsubVerification, trackEvent]);
const handleRetryOriginal = useCallback(() => {
trackEvent('REGISTRATION_FALLBACK_RETRY_ORIGINAL', {
errorSource: 'nfc_scan_failed',
});
navigation.navigate('DocumentNFCScan', {});
}, [navigation, trackEvent]);
return (
<YStack flex={1} backgroundColor={slate100}>
{/* Header */}
<YStack backgroundColor={slate100}>
<NavBar.Container
backgroundColor={slate100}
barStyle="dark"
paddingHorizontal="$4"
paddingTop={insets.top + extraYPadding}
paddingBottom={10}
alignItems="center"
justifyContent="space-between"
>
<NavBar.LeftAction
component="close"
color={black}
onPress={handleClose}
/>
<NavBar.Title style={{ fontFamily: dinot, fontSize: 17 }}>
{headerTitle}
</NavBar.Title>
<Button unstyled onPress={handleHelp} aria-label="Help" hitSlop={8}>
<YStack
width={26}
height={26}
borderRadius={13}
backgroundColor={blue600}
alignItems="center"
justifyContent="center"
>
<BodyText
style={{
color: white,
fontSize: 16,
fontWeight: '900',
lineHeight: 18,
textAlign: 'center',
includeFontPadding: false,
}}
>
?
</BodyText>
</YStack>
</Button>
</NavBar.Container>
{/* Progress Bar - Step 3 for NFC */}
<YStack paddingHorizontal={40} paddingBottom={14} paddingTop={4}>
<XStack gap={3} height={6}>
{[1, 2, 3, 4].map(step => (
<YStack
key={step}
flex={1}
backgroundColor={step === 3 ? cyan300 : slate300}
borderRadius={10}
/>
))}
</XStack>
</YStack>
</YStack>
{/* Main Content Area */}
<YStack
flex={1}
backgroundColor={slate100}
borderBottomWidth={1}
borderBottomColor={slate200}
>
{/* Warning Icon */}
<YStack flex={1} paddingHorizontal={20} paddingBottom={20}>
<YStack flex={1} justifyContent="center" alignItems="center">
<WarningIcon width={150} height={150} />
</YStack>
</YStack>
{/* Error Message and Retry Button */}
<YStack
paddingHorizontal={20}
paddingTop={20}
paddingBottom={20}
gap={20}
borderTopWidth={1}
borderTopColor={slate200}
>
<YStack alignItems="center" gap={4}>
<BodyText
style={{ fontSize: 18, textAlign: 'center', color: black }}
>
There was a problem reading the chip
</BodyText>
<BodyText
style={{
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
Make sure NFC is enabled and try again
</BodyText>
</YStack>
{/* Retry Button - Primary style with very rounded corners */}
<Button
backgroundColor={black}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleRetryOriginal}
disabled={isRetrying}
>
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: white,
}}
>
Try reading again
</BodyText>
</Button>
</YStack>
</YStack>
{/* Bottom Section */}
<YStack
paddingHorizontal={20}
paddingTop={20}
paddingBottom={paddingBottom}
gap={10}
>
{/* Secondary Button - White fill, black text, rounded */}
<Button
backgroundColor={white}
borderWidth={1}
borderColor={slate200}
borderRadius={100}
height={52}
pressStyle={{ opacity: 0.8 }}
onPress={handleTryAlternative}
disabled={isRetrying}
>
<BodyText
style={{
fontSize: 17,
fontWeight: '500',
fontFamily: dinot,
color: black,
}}
>
{isRetrying ? 'Loading...' : 'Try a different method'}
</BodyText>
</Button>
{/* Footer Text - Not italic */}
<BodyText
style={{
fontSize: 16,
textAlign: 'center',
color: slate500,
}}
>
Registering with alternative methods may take longer to verify your
document.
</BodyText>
</YStack>
</YStack>
);
};
export default RegistrationFallbackNFCScreen;

326
app/src/screens/documents/scanning/RegistrationFallbackScreen.tsx
View File

@@ -1,326 +0,0 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, XStack, YStack } from 'tamagui';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { HelpCircle, X } from '@tamagui/lucide-icons';
import { useSelfClient } from '@selfxyz/mobile-sdk-alpha';
import {
BodyText,
PrimaryButton,
SecondaryButton,
} from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
cyan300,
slate100,
slate200,
slate300,
slate500,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
import WarningIcon from '@/assets/images/warning.svg';
import { useSumsubLauncher } from '@/hooks/useSumsubLauncher';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
import { extraYPadding } from '@/utils/styleUtils';
type FallbackErrorSource =
| 'mrz_scan_failed'
| 'nfc_scan_failed'
| 'sumsub_initialization'
| 'sumsub_verification';
type RegistrationFallbackRouteParams = {
errorSource: FallbackErrorSource;
countryCode: string;
};
type RegistrationFallbackRoute = RouteProp<
Record<string, RegistrationFallbackRouteParams>,
string
>;
const getHeaderTitle = (errorSource: FallbackErrorSource): string => {
switch (errorSource) {
case 'mrz_scan_failed':
return 'MRZ SCAN';
case 'nfc_scan_failed':
return 'NFC SCAN';
default:
return 'REGISTRATION';
}
};
const getCurrentStep = (errorSource: FallbackErrorSource): number => {
switch (errorSource) {
case 'mrz_scan_failed':
return 1; // Step 1: MRZ scanning
case 'nfc_scan_failed':
return 2; // Step 2: NFC reading
case 'sumsub_initialization':
case 'sumsub_verification':
return 3; // Step 3: Proving/verification
default:
return 1;
}
};
const getRetryButtonText = (errorSource: FallbackErrorSource): string => {
switch (errorSource) {
case 'mrz_scan_failed':
return 'Try scanning again';
case 'nfc_scan_failed':
return 'Try reading again';
default:
return 'Try again';
}
};
const getErrorMessages = (
errorSource: FallbackErrorSource,
): { title: string; description: string; canRetryOriginal: boolean } => {
switch (errorSource) {
case 'mrz_scan_failed':
return {
title: 'There was a problem scanning your document',
description: 'Make sure the document is clearly visible and try again',
canRetryOriginal: true,
};
case 'nfc_scan_failed':
return {
title: 'There was a problem reading the chip',
description: 'Make sure NFC is enabled and try again',
canRetryOriginal: true,
};
case 'sumsub_initialization':
return {
title: 'Connection Error',
description:
'Unable to connect to verification service. Please check your internet connection and try again.',
canRetryOriginal: false,
};
case 'sumsub_verification':
return {
title: 'Verification Error',
description:
'Something went wrong during the verification process. Please try again.',
canRetryOriginal: false,
};
}
};
const RegistrationFallbackScreen: React.FC = () => {
const insets = useSafeAreaInsets();
const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<RegistrationFallbackRoute>();
const selfClient = useSelfClient();
const { trackEvent, useMRZStore } = selfClient;
const storeCountryCode = useMRZStore(state => state.countryCode);
const errorSource = route.params?.errorSource || 'sumsub_initialization';
// Use country code from route params, or fall back to MRZ store
const countryCode = route.params?.countryCode || storeCountryCode || '';
const headerTitle = getHeaderTitle(errorSource);
const retryButtonText = getRetryButtonText(errorSource);
const currentStep = getCurrentStep(errorSource);
const { title, description, canRetryOriginal } =
getErrorMessages(errorSource);
const { launchSumsubVerification, isLoading: isRetrying } = useSumsubLauncher(
{
countryCode,
errorSource,
onCancel: () => {
navigation.goBack();
},
onError: (_error, _result) => {
// Stay on this screen - user can try again
// Error is already logged in the hook
},
onSuccess: () => {
// Success - provider handles its own success UI
// The screen will be navigated away by the provider's flow
},
},
);
const handleClose = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleTryAlternative = useCallback(async () => {
trackEvent('REGISTRATION_FALLBACK_TRY_ALTERNATIVE', { errorSource });
await launchSumsubVerification();
}, [errorSource, launchSumsubVerification, trackEvent]);
const handleRetryOriginal = useCallback(() => {
trackEvent('REGISTRATION_FALLBACK_RETRY_ORIGINAL', { errorSource });
// Navigate back to the appropriate screen based on error source
if (errorSource === 'mrz_scan_failed') {
navigation.navigate('DocumentCamera');
} else if (errorSource === 'nfc_scan_failed') {
navigation.navigate('DocumentNFCScan', {});
} else if (errorSource === 'sumsub_initialization') {
// Go back to ID Picker
navigation.goBack();
}
// TODO: Handle 'sumsub_verification' case - currently falls through without action
// which could leave users stuck when tapping "Try again" after Sumsub verification failure.
// Consider: calling launchSumsubVerification() or navigating to appropriate retry screen.
// Need to determine the correct retry behavior for failed Sumsub verifications.
}, [errorSource, navigation, trackEvent]);
return (
<YStack flex={1} backgroundColor={slate100}>
{/* Header */}
<YStack backgroundColor={slate100}>
<XStack
backgroundColor={slate100}
padding={20}
justifyContent="space-between"
alignItems="center"
paddingTop={Math.max(insets.top, 15) + extraYPadding}
paddingBottom={10}
>
<Button
unstyled
onPress={handleClose}
padding={8}
borderRadius={20}
hitSlop={10}
>
<X size={24} color={black} />
</Button>
<BodyText
style={{
fontSize: 16,
color: black,
fontWeight: '600',
fontFamily: dinot,
}}
>
{headerTitle}
</BodyText>
<Button
unstyled
padding={8}
borderRadius={20}
hitSlop={10}
width={32}
height={32}
justifyContent="center"
alignItems="center"
disabled
>
<HelpCircle size={20} color={black} opacity={0} />
</Button>
</XStack>
{/* Progress Bar */}
<YStack paddingHorizontal={40} paddingBottom={10}>
<XStack gap={3} height={6}>
{[1, 2, 3, 4].map(step => (
<YStack
key={step}
flex={1}
backgroundColor={step === currentStep ? cyan300 : slate300}
borderRadius={10}
/>
))}
</XStack>
</YStack>
</YStack>
{/* Warning Icon */}
<YStack flex={1} paddingHorizontal={20} paddingTop={20}>
<YStack
flex={1}
justifyContent="center"
alignItems="center"
paddingVertical={20}
>
<WarningIcon width={120} height={120} />
</YStack>
</YStack>
{/* Error Message */}
<YStack
paddingHorizontal={20}
paddingTop={20}
alignItems="center"
paddingVertical={25}
>
<BodyText style={{ fontSize: 19, textAlign: 'center', color: black }}>
{title}
</BodyText>
<BodyText
style={{
marginTop: 6,
fontSize: 17,
textAlign: 'center',
color: slate500,
}}
>
{description}
</BodyText>
</YStack>
{/* Top Button - Retry */}
{canRetryOriginal && (
<YStack paddingHorizontal={25} paddingBottom={20}>
<PrimaryButton onPress={handleRetryOriginal} disabled={isRetrying}>
{retryButtonText}
</PrimaryButton>
</YStack>
)}
{/* Bottom Section with Grey Line Separator */}
<YStack
paddingHorizontal={25}
backgroundColor={white}
paddingBottom={paddingBottom}
paddingTop={25}
gap="$3"
borderTopWidth={1}
borderTopColor={slate200}
>
<SecondaryButton onPress={handleTryAlternative} disabled={isRetrying}>
{isRetrying ? 'Loading...' : 'Try a different method'}
</SecondaryButton>
{/* Footer Text */}
<BodyText
style={{
fontSize: 15,
textAlign: 'center',
color: slate500,
fontStyle: 'italic',
marginTop: 8,
}}
>
Registering with alternative methods may take longer to verify your
document.
</BodyText>
</YStack>
</YStack>
);
};
export default RegistrationFallbackScreen;

152
app/src/screens/documents/selection/LogoConfirmationScreen.tsx Normal file
View File

@@ -0,0 +1,152 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import {
BodyText,
ButtonsContainer,
PrimaryButton,
SecondaryButton,
} from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
slate400,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { advercase, dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import EPassportLogo from '@/assets/icons/epassport_logo.svg';
import { DocumentFlowNavBar } from '@/components/navbar/DocumentFlowNavBar';
import useHapticNavigation from '@/hooks/useHapticNavigation';
import { buttonTap } from '@/integrations/haptics';
import {
fetchAccessToken,
launchSumsub,
} from '@/integrations/sumsub/sumsubService';
import { ExpandableBottomLayout } from '@/layouts/ExpandableBottomLayout';
import type { RootStackParamList } from '@/navigation';
import { useFeedback } from '@/providers/feedbackProvider';
type LogoConfirmationScreenRouteProp = RouteProp<
RootStackParamList,
'LogoConfirmation'
>;
const LogoConfirmationScreen: React.FC = () => {
const route = useRoute<LogoConfirmationScreenRouteProp>();
const { documentType, countryCode } = route.params;
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const { showModal } = useFeedback();
const navigateToOnboarding = useHapticNavigation('DocumentOnboarding');
const handleConfirm = useCallback(() => {
buttonTap();
navigateToOnboarding();
}, [navigateToOnboarding]);
const handleNotFound = useCallback(() => {
buttonTap();
showModal({
titleText: 'Document Not Supported',
bodyText:
"To complete registration of a document without a biometric chip, you'll be redirected to our third party verification partner.",
buttonText: 'Proceed with an external verifier',
onButtonPress: async () => {
try {
const accessToken = await fetchAccessToken();
const result = await launchSumsub({
accessToken: accessToken.token,
// Pre-select document type and country based on user's earlier selection
documentType: documentType as 'p' | 'i',
countryCode,
});
// User cancelled/dismissed without completing verification
const cancelledStatuses = ['Initial', 'Incomplete', 'Interrupted'];
if (cancelledStatuses.includes(result.status)) {
return;
}
// User completed verification - navigate to KycSuccessScreen
navigation.navigate('KycSuccess', { userId: accessToken.userId });
} catch (error) {
console.error('Error launching Sumsub:', error);
showModal({
titleText: 'Error',
bodyText: 'Unable to start verification. Please try again.',
buttonText: 'OK',
onButtonPress: () => {},
});
}
},
});
}, [documentType, countryCode, navigation, showModal]);
return (
<ExpandableBottomLayout.Layout backgroundColor={white}>
<DocumentFlowNavBar title="GETTING STARTED" />
<ExpandableBottomLayout.TopSection backgroundColor={white}>
<View style={styles.contentContainer}>
<BodyText style={styles.titleText}>
Does your document have this symbol?
</BodyText>
<View style={styles.logoContainer}>
<EPassportLogo width={160} height={98} />
</View>
<BodyText style={styles.descriptionText}>
This symbol indicates your document has a biometric chip, which is
required for registration.
</BodyText>
</View>
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection backgroundColor={white}>
<ButtonsContainer>
<PrimaryButton onPress={handleConfirm}>Yes</PrimaryButton>
<SecondaryButton onPress={handleNotFound}>No</SecondaryButton>
</ButtonsContainer>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
);
};
export default LogoConfirmationScreen;
const styles = StyleSheet.create({
contentContainer: {
alignItems: 'center',
gap: 24,
maxWidth: 340,
},
titleText: {
fontSize: 20,
fontFamily: advercase,
textAlign: 'center',
color: black,
},
logoContainer: {
backgroundColor: white,
borderRadius: 16,
padding: 24,
shadowColor: black,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
descriptionText: {
fontSize: 16,
fontFamily: dinot,
textAlign: 'center',
color: slate400,
},
});

175
app/src/screens/kyc/KycConnectionErrorScreen.tsx Normal file
View File

@@ -0,0 +1,175 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Button, XStack, YStack } from 'tamagui';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { X } from '@tamagui/lucide-icons';
import {
BodyText,
PrimaryButton,
SecondaryButton,
} from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
slate100,
slate200,
slate500,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import { dinot } from '@selfxyz/mobile-sdk-alpha/constants/fonts';
import { useSafeBottomPadding } from '@selfxyz/mobile-sdk-alpha/hooks';
import WarningIcon from '@/assets/images/warning.svg';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
import { extraYPadding } from '@/utils/styleUtils';
const KycConnectionErrorScreen: React.FC = () => {
const insets = useSafeAreaInsets();
const paddingBottom = useSafeBottomPadding(extraYPadding + 35);
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const handleClose = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleRetry = useCallback(() => {
buttonTap();
navigation.goBack();
}, [navigation]);
const handleTryDifferentMethod = useCallback(() => {
buttonTap();
navigation.navigate('CountryPicker');
}, [navigation]);
return (
<YStack flex={1} backgroundColor={slate100}>
{/* Header */}
<YStack backgroundColor={slate100}>
<XStack
backgroundColor={slate100}
padding={20}
justifyContent="space-between"
alignItems="center"
paddingTop={Math.max(insets.top, 15) + extraYPadding}
paddingBottom={10}
>
<Button
unstyled
onPress={handleClose}
padding={8}
borderRadius={20}
hitSlop={10}
>
<X size={24} color={black} />
</Button>
<BodyText
style={{
fontSize: 16,
color: black,
fontWeight: '600',
fontFamily: dinot,
}}
>
CONNECTION ERROR
</BodyText>
<Button
unstyled
padding={8}
borderRadius={20}
hitSlop={10}
width={32}
height={32}
justifyContent="center"
alignItems="center"
disabled
opacity={0}
>
<X size={20} color={black} />
</Button>
</XStack>
</YStack>
{/* Warning Icon */}
<YStack flex={1} paddingHorizontal={20} paddingTop={20}>
<YStack
flex={1}
justifyContent="center"
alignItems="center"
paddingVertical={20}
>
<WarningIcon width={120} height={120} />
</YStack>
</YStack>
{/* Error Message */}
<YStack
paddingHorizontal={20}
paddingTop={20}
alignItems="center"
paddingVertical={25}
>
<BodyText style={{ fontSize: 19, textAlign: 'center', color: black }}>
Connection Error
</BodyText>
<BodyText
style={{
marginTop: 6,
fontSize: 17,
textAlign: 'center',
color: slate500,
}}
>
Unable to connect to verification service. Please check your internet
connection and try again.
</BodyText>
</YStack>
{/* Retry Button */}
<YStack paddingHorizontal={25} paddingBottom={20}>
<PrimaryButton onPress={handleRetry}>Try again</PrimaryButton>
</YStack>
{/* Bottom Section with Grey Line Separator */}
<YStack
paddingHorizontal={25}
backgroundColor={white}
paddingBottom={paddingBottom}
paddingTop={25}
gap="$3"
borderTopWidth={1}
borderTopColor={slate200}
>
<SecondaryButton onPress={handleTryDifferentMethod}>
Try a different method
</SecondaryButton>
{/* Footer Text */}
<BodyText
style={{
fontSize: 15,
textAlign: 'center',
color: slate500,
fontStyle: 'italic',
marginTop: 8,
}}
>
Registering with alternative methods may take longer to verify your
document.
</BodyText>
</YStack>
</YStack>
);
};
export default KycConnectionErrorScreen;

126
app/src/screens/kyc/KycFailureScreen.tsx Normal file
View File

@@ -0,0 +1,126 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import React, { useCallback } from 'react';
import { StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { YStack } from 'tamagui';
import type { RouteProp } from '@react-navigation/native';
import { useNavigation, useRoute } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import {
AbstractButton,
Description,
Title,
} from '@selfxyz/mobile-sdk-alpha/components';
import {
black,
slate600,
white,
} from '@selfxyz/mobile-sdk-alpha/constants/colors';
import ShieldErrorIcon from '@/assets/icons/shield_error.svg';
import { buttonTap } from '@/integrations/haptics';
import type { RootStackParamList } from '@/navigation';
type KycFailureRouteParams = {
countryCode?: string;
canRetry?: boolean;
};
type KycFailureRoute = RouteProp<Record<string, KycFailureRouteParams>, string>;
const KycFailureScreen: React.FC = () => {
const navigation =
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
const route = useRoute<KycFailureRoute>();
const insets = useSafeAreaInsets();
const canRetry = route.params?.canRetry ?? true;
const handleDismiss = useCallback(() => {
buttonTap();
navigation.navigate('Home', {});
}, [navigation]);
const handleTryAgain = useCallback(() => {
buttonTap();
navigation.navigate('CountryPicker');
}, [navigation]);
return (
<View style={[styles.container, { paddingBottom: insets.bottom }]}>
<YStack
flex={1}
justifyContent="flex-end"
alignItems="center"
paddingBottom={60}
>
<ShieldErrorIcon width={150} height={150} />
</YStack>
<YStack
paddingHorizontal={32}
alignItems="center"
gap={16}
marginBottom={64}
>
<Title style={styles.title}>
Unfortunately we couldn't verify your ID
</Title>
<Description style={styles.description}>
This may be because the files you uploaded were unreadable for some
other issue.
</Description>
</YStack>
<YStack gap={12} paddingHorizontal={24} paddingBottom={32}>
<AbstractButton
bgColor="transparent"
color={white}
borderColor={slate600}
borderWidth={1}
style={styles.button}
onPress={handleDismiss}
>
Dismiss
</AbstractButton>
{canRetry && (
<AbstractButton
bgColor={white}
color={black}
style={styles.button}
onPress={handleTryAgain}
>
Try again
</AbstractButton>
)}
</YStack>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: black,
},
title: {
color: white,
textAlign: 'center',
fontSize: 36,
lineHeight: 44,
letterSpacing: 1,
},
description: {
color: white,
textAlign: 'center',
fontSize: 20,
lineHeight: 30,
},
button: {
borderRadius: 100,
},
});
export default KycFailureScreen;

6
app/tests/src/navigation.test.tsx
View File

@@ -86,8 +86,11 @@ describe('navigation', () => {
'IDPicker',
'IdDetails',
'KYCVerified',
'KycConnectionError',
'KycFailure',
'KycSuccess',
'Loading',
'LogoConfirmation',
'ManageDocuments',
'MockDataDeepLink',
'Modal',
@@ -103,7 +106,8 @@ describe('navigation', () => {
'QRCodeViewFinder',
'RecoverWithPhrase',
'Referral',
'RegistrationFallback',
'RegistrationFallbackMRZ',
'RegistrationFallbackNFC',
'SaveRecoveryPhrase',
'Settings',
'ShowRecoveryPhrase',

17
app/tests/src/providers/notificationTrackingProvider.test.tsx
View File

@@ -116,7 +116,7 @@ describe('NotificationTrackingProvider', () => {
});
});
it('should not navigate when status is retry', async () => {
it('should navigate to CountryPicker when status is retry', async () => {
let notificationHandler:
| ((message: FirebaseMessagingTypes.RemoteMessage) => void)
| null = null;
@@ -151,11 +151,10 @@ describe('NotificationTrackingProvider', () => {
expect(analytics.trackEvent).toHaveBeenCalled();
});
// Should not navigate for retry status
expect(mockNavigationRef.navigate).not.toHaveBeenCalled();
expect(mockNavigationRef.navigate).toHaveBeenCalledWith('CountryPicker');
});
it('should not navigate when status is rejected', async () => {
it('should navigate to KycFailure when status is rejected', async () => {
let notificationHandler:
| ((message: FirebaseMessagingTypes.RemoteMessage) => void)
| null = null;
@@ -190,8 +189,9 @@ describe('NotificationTrackingProvider', () => {
expect(analytics.trackEvent).toHaveBeenCalled();
});
// Should not navigate for rejected status
expect(mockNavigationRef.navigate).not.toHaveBeenCalled();
expect(mockNavigationRef.navigate).toHaveBeenCalledWith('KycFailure', {
canRetry: false,
});
});
it('should handle missing notification data gracefully', async () => {
@@ -331,7 +331,7 @@ describe('NotificationTrackingProvider', () => {
expect(mockNavigationRef.navigate).not.toHaveBeenCalled();
});
it('should not navigate when status is retry on cold start', async () => {
it('should navigate to CountryPicker when status is retry on cold start', async () => {
mockOnNotificationOpenedApp.mockReturnValue(jest.fn());
const remoteMessage = {
@@ -358,8 +358,7 @@ describe('NotificationTrackingProvider', () => {
);
});
// Should not navigate for retry status
expect(mockNavigationRef.navigate).not.toHaveBeenCalled();
expect(mockNavigationRef.navigate).toHaveBeenCalledWith('CountryPicker');
});
it('should queue navigation when navigationRef is not ready on cold start', async () => {

1
packages/mobile-sdk-alpha/src/components/buttons/AbstractButton.tsx
View File

@@ -131,6 +131,7 @@ const styles = StyleSheet.create({
borderRadius: 5,
},
text: {
flex: 1,
fontFamily: dinot,
textAlign: 'center',
fontSize: 18,

104
packages/mobile-sdk-alpha/src/flows/onboarding/logo-confirmation-screen.tsx Normal file
View File

@@ -0,0 +1,104 @@
// SPDX-FileCopyrightText: 2025 Social Connect Labs, Inc.
// SPDX-License-Identifier: BUSL-1.1
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
import type React from 'react';
import type { ReactNode } from 'react';
import { StyleSheet } from 'react-native';
import { BodyText, PrimaryButton, SecondaryButton, View, YStack } from '../../components';
import ButtonsContainer from '../../components/ButtonsContainer';
import { black, slate400, white } from '../../constants/colors';
import { advercase, dinot } from '../../constants/fonts';
import { useSelfClient } from '../../context';
import { buttonTap } from '../../haptic';
import { ExpandableBottomLayout } from '../../layouts/ExpandableBottomLayout';
import { SdkEvents } from '../../types/events';
type LogoConfirmationScreenProps = {
documentType: string;
countryCode: string;
logo: ReactNode;
safeAreaBottom?: number;
onConfirm?: () => void;
onNotFound?: () => void;
};
const LogoConfirmationScreen: React.FC<LogoConfirmationScreenProps> = ({
documentType,
countryCode,
logo,
safeAreaBottom,
onConfirm,
onNotFound,
}) => {
const selfClient = useSelfClient();
const onYesPress = () => {
buttonTap();
if (onConfirm) {
onConfirm();
} else {
selfClient.emit(SdkEvents.LOGO_CONFIRMED, { documentType, countryCode });
}
};
const onNoPress = () => {
buttonTap();
if (onNotFound) {
onNotFound();
} else {
selfClient.emit(SdkEvents.LOGO_NOT_FOUND, { documentType, countryCode });
}
};
return (
<ExpandableBottomLayout.Layout backgroundColor={white}>
<ExpandableBottomLayout.TopSection backgroundColor={white} safeAreaTop={0}>
<YStack alignItems="center" gap="$6" maxWidth={340}>
<BodyText style={styles.titleText}>Does your document have this symbol?</BodyText>
<View style={styles.logoContainer}>{logo}</View>
<BodyText style={styles.descriptionText}>
This symbol indicates your document has a biometric chip, which is required for registration.
</BodyText>
</YStack>
</ExpandableBottomLayout.TopSection>
<ExpandableBottomLayout.BottomSection backgroundColor={white} safeAreaBottom={safeAreaBottom}>
<ButtonsContainer>
<PrimaryButton onPress={onYesPress}>Yes</PrimaryButton>
<SecondaryButton onPress={onNoPress}>No</SecondaryButton>
</ButtonsContainer>
</ExpandableBottomLayout.BottomSection>
</ExpandableBottomLayout.Layout>
);
};
const styles = StyleSheet.create({
titleText: {
fontSize: 20,
fontFamily: advercase,
textAlign: 'center',
color: black,
},
logoContainer: {
backgroundColor: white,
borderRadius: 16,
padding: 24,
shadowColor: black,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
descriptionText: {
fontSize: 16,
fontFamily: dinot,
textAlign: 'center',
color: slate400,
},
});
export default LogoConfirmationScreen;

2
packages/mobile-sdk-alpha/src/index.ts
View File

@@ -70,6 +70,8 @@ export {
sdkError,
} from './errors';
export { default as LogoConfirmationScreen } from './flows/onboarding/logo-confirmation-screen';
export { NFCScannerScreen } from './components/screens/NFCScannerScreen';
export { type ProvingStateType } from './proving/provingMachine';

22
packages/mobile-sdk-alpha/src/types/events.ts
View File

@@ -165,6 +165,20 @@ export enum SdkEvents {
*
*/
DOCUMENT_OWNERSHIP_CONFIRMED = 'DOCUMENT_OWNERSHIP_CONFIRMED',
/**
* Emitted when the user confirms they see the e-passport chip logo on their document.
*
* **Required:** Navigate to the document scanning flow (DocumentOnboarding).
*/
LOGO_CONFIRMED = 'LOGO_CONFIRMED',
/**
* Emitted when the user indicates they do not see the e-passport chip logo on their document.
*
* **Required:** Show an error message indicating the document is not supported as it is not a biometric ID.
*/
LOGO_NOT_FOUND = 'LOGO_NOT_FOUND',
}
/**
@@ -223,6 +237,14 @@ export interface SDKEventMap {
signatureAlgorithm?: string;
curveOrExponent?: string;
};
[SdkEvents.LOGO_CONFIRMED]: {
documentType: string;
countryCode: string;
};
[SdkEvents.LOGO_NOT_FOUND]: {
documentType: string;
countryCode: string;
};
}
/**