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

QA feedback bugs (#91)

Browse Source
This commit is contained in:
Justin Hernandez
2025-02-13 08:25:12 -06:00
committed by GitHub
parent c166bd8496
commit 5749dbca70
9 changed files with 116 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/src/Navigation.tsx
View File

@@ -1,23 +1,15 @@
import React from 'react';
import 'react-native-gesture-handler';
import {
SafeAreaProvider,
useSafeAreaInsets,
} from 'react-native-safe-area-context';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import {
StaticParamList,
createStaticNavigation,
} from '@react-navigation/native';
import {
NativeStackHeaderProps,
createNativeStackNavigator,
} from '@react-navigation/native-stack';
import { Button, TextStyle, ViewStyle } from 'tamagui';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavBar } from './components/NavBar';
import ActivityIcon from './images/icons/activity.svg';
import SettingsIcon from './images/icons/settings.svg';
import DefaultNavBar from './components/DefaultNavBar';
import HomeNavBar from './components/HomeNavBar';
import AccountRecoveryScreen from './screens/AccountFlow/AccountRecoveryScreen';
import AccountVerifiedSuccessScreen from './screens/AccountFlow/AccountVerifiedSuccessScreen';
import RecoverWithPhraseScreen from './screens/AccountFlow/RecoverWithPhraseScreen';
@@ -41,81 +33,7 @@ import ShowRecoveryPhraseScreen from './screens/Settings/ShowRecoveryPhraseScree
import SettingsScreen from './screens/SettingsScreen';
import SplashScreen from './screens/SplashScreen';
import StartScreen from './screens/StartScreen';
import { black, neutral400, slate300, white } from './utils/colors';
const DefaultNavBar = (props: NativeStackHeaderProps) => {
const { goBack, canGoBack } = props.navigation;
const { options } = props;
const headerStyle = (options.headerStyle || {}) as ViewStyle;
const insets = useSafeAreaInsets();
return (
<NavBar.Container
gap={14}
paddingHorizontal={20}
paddingTop={Math.max(insets.top, 12)}
paddingBottom={20}
backgroundColor={headerStyle.backgroundColor as string}
barStyle={
options.headerTintColor === white ||
(options.headerTitleStyle as TextStyle)?.color === white
? 'light-content'
: 'dark-content'
}
>
<NavBar.LeftAction
component={
options.headerBackTitle || (canGoBack() ? 'back' : undefined)
}
onPress={goBack}
{...options.headerTitleStyle}
/>
<NavBar.Title {...options.headerTitleStyle}>
{props.options.title}
</NavBar.Title>
</NavBar.Container>
);
};
const HomeNavBar = (props: NativeStackHeaderProps) => {
const insets = useSafeAreaInsets();
return (
<NavBar.Container
backgroundColor={black}
barStyle={'light-content'}
padding={16}
justifyContent="space-between"
paddingTop={Math.max(insets.top, 20)}
>
<NavBar.LeftAction
component={
<Button
size="$3"
unstyled
icon={
<ActivityIcon width={'35'} height={'100%'} color={neutral400} />
}
/>
}
onPress={() => props.navigation.navigate('Activity')}
/>
<NavBar.Title size="large" color={white}>
{props.options.title}
</NavBar.Title>
<NavBar.RightAction
component={
<Button
size={'$3'}
unstyled
icon={
<SettingsIcon width={'35'} height={'100%'} color={neutral400} />
}
/>
}
onPress={() => props.navigation.navigate('Settings')}
/>
</NavBar.Container>
);
};
import { black, slate300, white } from './utils/colors';
const AppNavigation = createNativeStackNavigator({
initialRouteName: 'Splash',

43
app/src/components/DefaultNavBar.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NativeStackHeaderProps } from '@react-navigation/native-stack';
import { TextStyle, ViewStyle } from 'tamagui';
import { white } from '../utils/colors';
import { NavBar } from './NavBar';
const DefaultNavBar = (props: NativeStackHeaderProps) => {
const { goBack, canGoBack } = props.navigation;
const { options } = props;
const headerStyle = (options.headerStyle || {}) as ViewStyle;
const insets = useSafeAreaInsets();
return (
<NavBar.Container
gap={14}
paddingHorizontal={20}
paddingTop={Math.max(insets.top, 12)}
paddingBottom={20}
backgroundColor={headerStyle.backgroundColor as string}
barStyle={
options.headerTintColor === white ||
(options.headerTitleStyle as TextStyle)?.color === white
? 'light-content'
: 'dark-content'
}
>
<NavBar.LeftAction
component={
options.headerBackTitle || (canGoBack() ? 'back' : undefined)
}
onPress={goBack}
{...options.headerTitleStyle}
/>
<NavBar.Title {...options.headerTitleStyle}>
{props.options.title}
</NavBar.Title>
</NavBar.Container>
);
};
export default DefaultNavBar;

53
app/src/components/HomeNavBar.tsx Normal file
View File

@@ -0,0 +1,53 @@
import React from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { NativeStackHeaderProps } from '@react-navigation/native-stack';
import { Button } from 'tamagui';
import ActivityIcon from '../images/icons/activity.svg';
import SettingsIcon from '../images/icons/settings.svg';
import { black, neutral400, white } from '../utils/colors';
import { NavBar } from './NavBar';
const HomeNavBar = (props: NativeStackHeaderProps) => {
const insets = useSafeAreaInsets();
return (
<NavBar.Container
backgroundColor={black}
barStyle={'light-content'}
padding={16}
justifyContent="space-between"
paddingTop={Math.max(insets.top, 20)}
>
<NavBar.LeftAction
component={
<Button
size="$3"
unstyled
icon={
<ActivityIcon width={'24'} height={'100%'} color={neutral400} />
}
/>
}
onPress={() => props.navigation.navigate('Activity')}
/>
<NavBar.Title size="large" color={white}>
{props.options.title}
</NavBar.Title>
<NavBar.RightAction
component={
<Button
size={'$3'}
unstyled
icon={
<SettingsIcon width={'24'} height={'100%'} color={neutral400} />
}
/>
}
onPress={() => props.navigation.navigate('Settings')}
/>
</NavBar.Container>
);
};
export default HomeNavBar;

13
app/src/hooks/useHapticNavigation.ts
View File

@@ -8,23 +8,30 @@ import { impactLight, impactMedium, selectionChange } from '../utils/haptic';
type NavigationAction = 'default' | 'cancel' | 'confirm';
const useHapticNavigation = (
screen: keyof RootStackParamList,
screen: keyof RootStackParamList | null,
action: NavigationAction = 'default',
) => {
const navigation = useNavigation();
if (screen === null && action !== 'cancel') {
throw new Error('Only cancel actions can have null screens');
}
return useCallback(() => {
switch (action) {
case 'cancel':
selectionChange();
break;
navigation.goBack();
return;
case 'confirm':
impactMedium();
break;
default:
impactLight();
}
navigation.navigate(screen);
if (screen) {
navigation.navigate(screen);
}
}, [navigation, screen, action]);
};

2
app/src/screens/LaunchScreen.tsx
View File

@@ -17,7 +17,7 @@ import { advercase, dinot } from '../utils/fonts';
interface LaunchScreenProps {}
const LaunchScreen: React.FC<LaunchScreenProps> = ({}) => {
const onStartPress = useHapticNavigation('PassportCamera');
const onStartPress = useHapticNavigation('PassportOnboarding');
return (
<ExpandableBottomLayout.Layout backgroundColor={black}>

2
app/src/screens/Onboarding/PassportCameraScreen.tsx
View File

@@ -73,7 +73,7 @@ const PassportCameraScreen: React.FC<PassportNFCScanScreen> = ({}) => {
},
[store, navigation],
);
const onCancelPress = useHapticNavigation('PassportOnboarding', 'cancel');
const onCancelPress = useHapticNavigation(null, 'cancel');
return (
<ExpandableBottomLayout.Layout backgroundColor={white}>

2
app/src/screens/Onboarding/PassportNFCScanScreen.tsx
View File

@@ -90,7 +90,7 @@ const PassportNFCScanScreen: React.FC<PassportNFCScanScreenProps> = ({}) => {
}
}
}, [isNfcSupported, isNfcEnabled, passportNumber, dateOfBirth, dateOfExpiry]);
const onCancelPress = useHapticNavigation('PassportCamera', 'cancel');
const onCancelPress = useHapticNavigation(null, 'cancel');
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const _cancelScanIfRunning = useCallback(async () => {

2
app/src/screens/Onboarding/PassportOnboardingScreen.tsx
View File

@@ -21,7 +21,7 @@ const PassportOnboardingScreen: React.FC<
PassportOnboardingScreenProps
> = ({}) => {
const handleCameraPress = useHapticNavigation('PassportCamera');
const onCancelPress = useHapticNavigation('Launch', 'cancel');
const onCancelPress = useHapticNavigation(null, 'cancel');
return (
<ExpandableBottomLayout.Layout backgroundColor={black}>

2
app/src/screens/ProveFlow/ViewFinder.tsx
View File

@@ -64,7 +64,7 @@ const QRCodeViewFinderScreen: React.FC<QRCodeViewFinderScreenProps> = ({}) => {
},
[doneScanningQR, navigation, startAppListener],
);
const onCancelPress = useHapticNavigation('Home', 'cancel');
const onCancelPress = useHapticNavigation(null, 'cancel');
return (
<>