diff --git a/native/account/qr-auth/qr-auth-navigator.react.js b/native/account/qr-auth/qr-auth-navigator.react.js new file mode 100644 --- /dev/null +++ b/native/account/qr-auth/qr-auth-navigator.react.js @@ -0,0 +1,63 @@ +// @flow + +import type { + StackNavigationHelpers, + StackNavigationProp, +} from '@react-navigation/core'; +import { createStackNavigator } from '@react-navigation/stack'; +import * as React from 'react'; + +import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; +import { + type NavigationRoute, + type QRAuthNavigatorParamList, + type ScreenParamList, + SecondaryDeviceQRCodeScannerRouteName, +} from '../../navigation/route-names.js'; +import SecondaryDeviceQRCodeScanner from '../../profile/secondary-device-qr-code-scanner.react.js'; +import { deviceIsEmulator } from '../../utils/url-utils.js'; + +export type QRAuthNavigationProp> = + StackNavigationProp; + +const QRAuthStack = createStackNavigator< + ScreenParamList, + QRAuthNavigatorParamList, + StackNavigationHelpers, +>(); + +type Props = { + +navigation: RootNavigationProp<'QRAuthNavigator'>, + +route: NavigationRoute<'QRAuthNavigator'>, +}; + +const screenOptions = { + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerTitle: '', + headerTintColor: 'white', + headerLeftContainerStyle: { + paddingLeft: 12, + }, + gestureEnabled: true, +}; +const secondaryDeviceQRCodeScannerOptions = { + headerTitle: deviceIsEmulator ? 'Link device' : '', + headerBackTitleVisible: false, +}; + +// eslint-disable-next-line no-unused-vars +function QRAuthNavigator(props: Props): React.Node { + return ( + + + + ); +} + +export default QRAuthNavigator; diff --git a/native/navigation/deep-links-context-provider.react.js b/native/navigation/deep-links-context-provider.react.js --- a/native/navigation/deep-links-context-provider.react.js +++ b/native/navigation/deep-links-context-provider.react.js @@ -30,7 +30,7 @@ import { InviteLinkModalRouteName, - SecondaryDeviceQRCodeScannerRouteName, + QRAuthNavigatorRouteName, } from './route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { @@ -155,7 +155,7 @@ showVersionUnsupportedAlert(); return; } - navigation.navigate(SecondaryDeviceQRCodeScannerRouteName); + navigation.navigate(QRAuthNavigatorRouteName); } })(); }, [ diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -57,8 +57,10 @@ CreateMissingSIWEBackupMessageRouteName, RestoreSIWEBackupRouteName, LinkedDevicesBottomSheetRouteName, + QRAuthNavigatorRouteName, } from './route-names.js'; import LoggedOutModal from '../account/logged-out-modal.react.js'; +import QRAuthNavigator from '../account/qr-auth/qr-auth-navigator.react.js'; import CreateMissingSIWEBackupMessage from '../account/registration/missing-registration-data/missing-siwe-backup-message.react.js'; import RegistrationNavigator from '../account/registration/registration-navigator.react.js'; import SignInNavigator from '../account/sign-in-navigator.react.js'; @@ -316,6 +318,11 @@ name={RestoreSIWEBackupRouteName} component={RestoreSIWEBackup} /> + ); } diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js --- a/native/navigation/route-names.js +++ b/native/navigation/route-names.js @@ -179,6 +179,7 @@ export const HomeTabTipRouteName = 'HomeTabTip'; export const MutedTabTipRouteName = 'MutedTabTip'; export const NUXTipOverlayBackdropRouteName = 'NUXTipOverlayBackdrop'; +export const QRAuthNavigatorRouteName = 'QRAuthNavigator'; export type RootParamList = { +LoggedOutModal: void, @@ -207,6 +208,7 @@ +TagFarcasterChannelNavigator: void, +CreateMissingSIWEBackupMessage: void, +RestoreSIWEBackup: RestoreSIWEBackupParams, + +QRAuthNavigator: void, }; export type NUXTipRouteNames = @@ -289,7 +291,6 @@ +FriendList: void, +BlockList: void, +LinkedDevices: void, - +SecondaryDeviceQRCodeScanner: void, +BackupMenu: void, +TunnelbrokerMenu: void, +KeyserverSelectionList: void, @@ -351,6 +352,10 @@ +UserRelationshipTooltipModal: UserRelationshipTooltipModalParams, }; +export type QRAuthNavigatorParamList = { + +SecondaryDeviceQRCodeScanner: void, +}; + export type ScreenParamList = { ...RootParamList, ...OverlayParamList, @@ -367,6 +372,7 @@ ...SignInParamList, ...UserProfileBottomSheetParamList, ...TagFarcasterChannelParamList, + ...QRAuthNavigatorParamList, }; export type NavigationRoute> = diff --git a/native/profile/linked-devices-header-right-button.react.js b/native/profile/linked-devices-header-right-button.react.js --- a/native/profile/linked-devices-header-right-button.react.js +++ b/native/profile/linked-devices-header-right-button.react.js @@ -4,13 +4,13 @@ import * as React from 'react'; import HeaderRightTextButton from '../navigation/header-right-text-button.react.js'; -import { SecondaryDeviceQRCodeScannerRouteName } from '../navigation/route-names.js'; +import { QRAuthNavigatorRouteName } from '../navigation/route-names.js'; function LinkedDevicesHeaderRightButton(): React.Node { const { navigate } = useNavigation(); const navigateToQRCodeScanner = React.useCallback(() => { - navigate(SecondaryDeviceQRCodeScannerRouteName); + navigate(QRAuthNavigatorRouteName); }, [navigate]); return ( diff --git a/native/profile/profile.react.js b/native/profile/profile.react.js --- a/native/profile/profile.react.js +++ b/native/profile/profile.react.js @@ -28,7 +28,6 @@ import ProfileHeader from './profile-header.react.js'; import ProfileScreen from './profile-screen.react.js'; import RelationshipList from './relationship-list.react.js'; -import SecondaryDeviceQRCodeScanner from './secondary-device-qr-code-scanner.react.js'; import TunnelbrokerMenu from './tunnelbroker-menu.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import CommunityDrawerButton from '../navigation/community-drawer-button.react.js'; @@ -46,7 +45,6 @@ DefaultNotificationsPreferencesRouteName, BlockListRouteName, LinkedDevicesRouteName, - SecondaryDeviceQRCodeScannerRouteName, BackupMenuRouteName, KeyserverSelectionListRouteName, AddKeyserverRouteName, @@ -57,7 +55,6 @@ } from '../navigation/route-names.js'; import type { TabNavigationProp } from '../navigation/tab-navigator.react.js'; import { useStyles, useColors } from '../themes/colors.js'; -import { deviceIsEmulator } from '../utils/url-utils.js'; const header = (props: StackHeaderProps) => ; const profileScreenOptions = { headerTitle: 'Profile' }; @@ -78,10 +75,6 @@ const addKeyserverOptions = { headerTitle: 'Add keyserver' }; const backupMenuOptions = { headerTitle: 'Backup menu' }; const tunnelbrokerMenuOptions = { headerTitle: 'Tunnelbroker menu' }; -const secondaryDeviceQRCodeScannerOptions = { - headerTitle: deviceIsEmulator ? 'Link device' : '', - headerBackTitleVisible: false, -}; const buildInfoOptions = { headerTitle: 'Build info' }; const devToolsOptions = { headerTitle: 'Developer tools' }; const appearanceOptions = { headerTitle: 'Appearance' }; @@ -189,11 +182,6 @@ component={TunnelbrokerMenu} options={tunnelbrokerMenuOptions} /> - , + +navigation: QRAuthNavigationProp<'SecondaryDeviceQRCodeScanner'>, +route: NavigationRoute<'SecondaryDeviceQRCodeScanner'>, };