github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-04-05 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix loading screen to go to the correct screen when done. (#98)

Browse Source
This commit is contained in:
Aaron DeRuvo
2025-02-13 15:51:01 +01:00
committed by GitHub
parent 5749dbca70
commit e8a5e30e33
5 changed files with 103 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/Navigation.tsx
View File

@@ -17,10 +17,10 @@ import SaveRecoveryPhraseScreen from './screens/AccountFlow/SaveRecoveryPhraseSc
import DisclaimerScreen from './screens/DisclaimerScreen';
import HomeScreen from './screens/HomeScreen';
import LaunchScreen from './screens/LaunchScreen';
import LoadingScreen from './screens/LoadingScreen';
import MockDataScreen from './screens/MockDataScreen';
import NextScreen from './screens/NextScreen';
import ConfirmBelongingScreen from './screens/Onboarding/ConfirmBelongingScreen';
import LoadingScreen from './screens/Onboarding/LoadingScreen';
import PassportCameraScreen from './screens/Onboarding/PassportCameraScreen';
import PassportNFCScanScreen from './screens/Onboarding/PassportNFCScanScreen';
import PassportOnboardingScreen from './screens/Onboarding/PassportOnboardingScreen';

4
app/src/components/DefaultNavBar.tsx
View File

@@ -31,9 +31,9 @@ const DefaultNavBar = (props: NativeStackHeaderProps) => {
options.headerBackTitle || (canGoBack() ? 'back' : undefined)
}
onPress={goBack}
{...options.headerTitleStyle}
{...(options.headerTitleStyle as ViewStyle)}
/>
<NavBar.Title {...options.headerTitleStyle}>
<NavBar.Title {...(options.headerTitleStyle as ViewStyle)}>
{props.options.title}
</NavBar.Title>
</NavBar.Container>

101
app/src/screens/LoadingScreen.tsx
View File

@@ -1,101 +0,0 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import LottieView from 'lottie-react-native';
// Import passport data generation and payload functions from common
import { genMockPassportData } from '../../../common/src/utils/passports/genMockPassportData';
import { initPassportDataParsing } from '../../../common/src/utils/passports/passport';
import { PassportData } from '../../../common/src/utils/types';
// Import animations
import failAnimation from '../assets/animations/loading/fail.json';
import miscAnimation from '../assets/animations/loading/misc.json';
import successAnimation from '../assets/animations/loading/success.json';
import {
ProofStatusEnum,
updateGlobalProofStatus,
useProofInfo,
} from '../stores/proofProvider';
import useUserStore from '../stores/userStore';
import { sendDscPayload } from '../utils/proving/payload';
const LoadingScreen: React.FC = () => {
const navigation = useNavigation();
const [animationSource, setAnimationSource] = useState<any>(miscAnimation);
const { status } = useProofInfo();
// Ensure we only set the initial status once on mount (if needed)
useEffect(() => {
updateGlobalProofStatus(ProofStatusEnum.PENDING);
}, []);
useEffect(() => {
// Change animation based on the global proof status.
if (status === ProofStatusEnum.SUCCESS) {
setAnimationSource(successAnimation);
} else if (
status === ProofStatusEnum.FAILURE ||
status === ProofStatusEnum.ERROR
) {
setAnimationSource(failAnimation);
}
}, [status]);
useEffect(() => {
const processPayload = async () => {
// Generate passport data and update the store.
const passportData = genMockPassportData(
'sha1',
'sha256',
'rsa_sha256_65537_2048',
'FRA',
'000101',
'300101',
);
const passportDataInit = initPassportDataParsing(passportData);
await useUserStore.getState().registerPassportData(passportDataInit);
// This will trigger sendPayload(), which updates global status via your tee.ts code.
await sendDscPayload(
useUserStore.getState().passportData as PassportData,
);
};
processPayload();
}, [navigation]);
useEffect(() => {
// When proof status is no longer pending, navigate after a short delay.
if (status !== ProofStatusEnum.PENDING) {
const timeout = setTimeout(() => {
navigation.navigate('Home');
}, 1500);
return () => clearTimeout(timeout);
}
}, [status, navigation]);
return (
<LottieView
autoPlay
// Loop only the misc animation. Once payload processing completes,
// success or error animations will display without looping.
loop={animationSource === miscAnimation}
source={animationSource}
style={styles.animation}
resizeMode="cover"
renderMode="HARDWARE"
/>
);
};
const styles = StyleSheet.create({
animation: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default LoadingScreen;

93
app/src/screens/Onboarding/LoadingScreen.tsx Normal file
View File

@@ -0,0 +1,93 @@
import React, { useEffect, useState } from 'react';
import { StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';
// Import passport data generation and payload functions from common
import { genMockPassportData } from '../../../../common/src/utils/passports/genMockPassportData';
import { initPassportDataParsing } from '../../../../common/src/utils/passports/passport';
import { PassportData } from '../../../../common/src/utils/types';
// Import animations
import failAnimation from '../../assets/animations/loading/fail.json';
import miscAnimation from '../../assets/animations/loading/misc.json';
import useHapticNavigation from '../../hooks/useHapticNavigation';
import { ProofStatusEnum, useProofInfo } from '../../stores/proofProvider';
import useUserStore from '../../stores/userStore';
import { sendDscPayload } from '../../utils/proving/payload';
const LoadingScreen: React.FC = () => {
const goToSuccessScreen = useHapticNavigation(
'AccountVerifiedSuccess',
'default',
);
const [animationSource, setAnimationSource] = useState<any>(miscAnimation);
const { status, setStatus } = useProofInfo();
// Ensure we only set the initial status once on mount (if needed)
useEffect(() => {
setStatus(ProofStatusEnum.PENDING);
}, []);
useEffect(() => {
// Change animation based on the global proof status.
if (status === ProofStatusEnum.SUCCESS) {
goToSuccessScreen();
} else if (
status === ProofStatusEnum.FAILURE ||
status === ProofStatusEnum.ERROR
) {
setAnimationSource(failAnimation);
}
}, [status]);
useEffect(() => {
const processPayload = async () => {
try {
// Generate passport data and update the store.
const passportData = genMockPassportData(
'sha1',
'sha256',
'rsa_sha256_65537_2048',
'FRA',
'000101',
'300101',
);
const passportDataInit = initPassportDataParsing(passportData);
await useUserStore.getState().registerPassportData(passportDataInit);
// This will trigger sendPayload(), which updates global status via your tee.ts code.
await sendDscPayload(
useUserStore.getState().passportData as PassportData,
);
} catch (error) {
console.error('Error processing payload:', error);
setStatus(ProofStatusEnum.ERROR);
}
};
processPayload();
}, []);
return (
<LottieView
autoPlay
// Loop only the misc animation. Once payload processing completes,
// success or error animations will display without looping.
loop={animationSource === miscAnimation}
source={animationSource}
style={styles.animation}
resizeMode="cover"
renderMode="HARDWARE"
/>
);
};
const styles = StyleSheet.create({
animation: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
export default LoadingScreen;

13
app/src/screens/Settings/DevSettingsScreen.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react';
import Dialog from 'react-native-dialog';
import { useNavigation } from '@react-navigation/native';
import { Check, ChevronDown, Eraser, IterationCw } from '@tamagui/lucide-icons';
@@ -20,6 +19,8 @@ const items: (keyof RootStackParamList)[] = [
'PassportCamera',
'PassportNFCScan',
'PassportDataInfo',
'LoadingScreen',
'AccountVerifiedSuccess',
'ConfirmBelongingScreen',
'CreateMock',
'NextScreen',
@@ -128,7 +129,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
</Button>
</Fieldset>
<Fieldset gap="$4" mt="$1" horizontal>
<Fieldset gap="$4" mt="$1" horizontal marginBottom={30}>
<Label
color={textBlack}
width={200}
@@ -144,7 +145,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
borderWidth={1.2}
size="$3.5"
ml="$2"
onPress={clearPassportDataFromStorage}
// onPress={}
>
<Eraser color={textBlack} />
</Button>
@@ -189,7 +190,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
<Eraser color={textColor2} />
</Button>
</Fieldset> */}
<Dialog.Container visible={false}>
{/* <Dialog.Container visible={false}>
<Dialog.Title>Delete Secret</Dialog.Title>
<Dialog.Description>
You are about to delete your secret. Be careful! You will not be able
@@ -203,7 +204,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
// onPress={() => handleDeleteSecret()}
label="Delete secret"
/>
</Dialog.Container>
</Dialog.Container> */}
{/* <Fieldset gap="$4" mt="$1" horizontal>
<Label color={textBlack} width={200} justifyContent="flex-end" htmlFor="skip" >
registered = (!registered)
@@ -213,7 +214,7 @@ const DevSettingsScreen: React.FC<DevSettingsScreenProps> = ({}) => {
</Button>
</Fieldset> */}
<Fieldset gap="$4" mt="$1" horizontal>
<Fieldset marginTop={30} gap="$4" mt="$1" horizontal>
<Label color={textBlack} justifyContent="flex-end" htmlFor="skip">
Shortcut
</Label>