diff --git a/native/account/registration/account-does-not-exist.react.js b/native/account/registration/account-does-not-exist.react.js index fc98b54e9..7088887bc 100644 --- a/native/account/registration/account-does-not-exist.react.js +++ b/native/account/registration/account-does-not-exist.react.js @@ -1,79 +1,79 @@ // @flow import * as React from 'react'; import { Text, View, Image } from 'react-native'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; import commSwooshSource from '../../img/comm-swoosh.png'; import { type NavigationRoute, - ConnectEthereumRouteName, + ConnectFarcasterRouteName, } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; type Props = { +navigation: RegistrationNavigationProp<'AccountDoesNotExist'>, +route: NavigationRoute<'AccountDoesNotExist'>, }; function AccountDoesNotExist(props: Props): React.Node { const { navigate } = props.navigation; const onSubmit = React.useCallback(() => { - navigate(ConnectEthereumRouteName); + navigate(ConnectFarcasterRouteName); }, [navigate]); const styles = useStyles(unboundStyles); return ( New Comm account It looks like this is your first time logging into Comm. Let’s get started with registering your Ethereum account! ); } const unboundStyles = { scrollViewContentContainer: { flexGrow: 1, }, header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, commSwooshContainer: { flexGrow: 1, flexShrink: 1, alignItems: 'center', justifyContent: 'center', }, commSwoosh: { resizeMode: 'center', width: '100%', height: '100%', }, }; export default AccountDoesNotExist; diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js index 1a7f6d315..059ceb539 100644 --- a/native/account/registration/connect-ethereum.react.js +++ b/native/account/registration/connect-ethereum.react.js @@ -1,332 +1,336 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { Text, View } from 'react-native'; import { exactSearchUser, exactSearchUserActionTypes, } from 'lib/actions/user-actions.js'; import { useLegacyAshoatKeyserverCall } from 'lib/keyserver-conn/legacy-keyserver-call.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { type SIWEResult, SIWEMessageTypes } from 'lib/types/siwe-types.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; import { useGetEthereumAccountFromSIWEResult } from './ethereum-utils.js'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import { RegistrationContext } from './registration-context.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; import type { CoolOrNerdMode } from './registration-types.js'; import { commRustModule } from '../../native-modules.js'; import { type NavigationRoute, ExistingEthereumAccountRouteName, - ConnectFarcasterRouteName, + UsernameSelectionRouteName, + AvatarSelectionRouteName, } from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles } from '../../themes/colors.js'; import { defaultURLPrefix } from '../../utils/url-utils.js'; import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js'; import SIWEPanel from '../siwe-panel.react.js'; const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector( exactSearchUserActionTypes, ); -export type ConnectEthereumParams = ?{ - +userSelections?: { - +coolOrNerdMode: CoolOrNerdMode, - +keyserverURL: string, +export type ConnectEthereumParams = { + +userSelections: { + +coolOrNerdMode?: CoolOrNerdMode, + +keyserverURL?: string, + +farcasterID: ?string, }, }; type PanelState = 'closed' | 'opening' | 'open' | 'closing'; type Props = { +navigation: RegistrationNavigationProp<'ConnectEthereum'>, +route: NavigationRoute<'ConnectEthereum'>, }; function ConnectEthereum(props: Props): React.Node { const { params } = props.route; const registrationContext = React.useContext(RegistrationContext); invariant(registrationContext, 'registrationContext should be set'); const { cachedSelections } = registrationContext; const userSelections = params?.userSelections; const isNerdMode = userSelections?.coolOrNerdMode === 'nerd'; const styles = useStyles(unboundStyles); let body; if (!isNerdMode) { body = ( Connecting your Ethereum wallet allows you to use your ENS name and avatar in the app. You’ll also be able to log in with your wallet instead of a password. ); } else { body = ( <> Connecting your Ethereum wallet has three benefits: {'1. '} Your peers will be able to cryptographically verify that your Comm account is associated with your Ethereum wallet. {'2. '} You’ll be able to use your ENS name and avatar in the app. {'3. '} You can choose to skip setting a password, and to log in with your Ethereum wallet instead. ); } const [panelState, setPanelState] = React.useState('closed'); const openPanel = React.useCallback(() => { setPanelState('opening'); }, []); const onPanelClosed = React.useCallback(() => { setPanelState('closed'); }, []); const onPanelClosing = React.useCallback(() => { setPanelState('closing'); }, []); const siwePanelSetLoading = React.useCallback( (loading: boolean) => { if (panelState === 'closing' || panelState === 'closed') { return; } setPanelState(loading ? 'opening' : 'open'); }, [panelState], ); const { navigate } = props.navigation; const onSkip = React.useCallback(() => { - navigate<'ConnectFarcaster'>({ - name: ConnectFarcasterRouteName, + navigate<'UsernameSelection'>({ + name: UsernameSelectionRouteName, params: { - userSelections: { - ...userSelections, - }, + userSelections, }, }); }, [navigate, userSelections]); const keyserverURL = userSelections?.keyserverURL ?? defaultURLPrefix; const serverCallParamOverride = React.useMemo( () => ({ urlPrefix: keyserverURL, }), [keyserverURL], ); const exactSearchUserCall = useLegacyAshoatKeyserverCall( exactSearchUser, serverCallParamOverride, ); const dispatchActionPromise = useDispatchActionPromise(); const getEthereumAccountFromSIWEResult = useGetEthereumAccountFromSIWEResult(); const onSuccessfulWalletSignature = React.useCallback( async (result: SIWEResult) => { let userAlreadyExists; if (usingCommServicesAccessToken) { const findUserIDResponseString = await commRustModule.findUserIDForWalletAddress(result.address); const findUserIDResponse = JSON.parse(findUserIDResponseString); userAlreadyExists = !!findUserIDResponse.userID || findUserIDResponse.isReserved; } else { const searchPromise = exactSearchUserCall(result.address); void dispatchActionPromise(exactSearchUserActionTypes, searchPromise); const { userInfo } = await searchPromise; userAlreadyExists = !!userInfo; } if (userAlreadyExists) { navigate<'ExistingEthereumAccount'>({ name: ExistingEthereumAccountRouteName, params: result, }); return; } const ethereumAccount = await getEthereumAccountFromSIWEResult(result); const newUserSelections = { ...userSelections, - ethereumAccount, + accountSelection: ethereumAccount, }; - navigate<'ConnectFarcaster'>({ - name: ConnectFarcasterRouteName, - params: { userSelections: newUserSelections }, + navigate<'AvatarSelection'>({ + name: AvatarSelectionRouteName, + params: { + userSelections: newUserSelections, + }, }); }, [ userSelections, exactSearchUserCall, dispatchActionPromise, navigate, getEthereumAccountFromSIWEResult, ], ); let siwePanel; if (panelState !== 'closed') { siwePanel = ( ); } const { ethereumAccount } = cachedSelections; const alreadyHasConnected = !!ethereumAccount; const exactSearchUserCallLoading = useSelector( state => exactSearchUserLoadingStatusSelector(state) === 'loading', ); const defaultConnectButtonVariant = alreadyHasConnected ? 'outline' : 'enabled'; const connectButtonVariant = exactSearchUserCallLoading || panelState === 'opening' ? 'loading' : defaultConnectButtonVariant; const connectButtonText = alreadyHasConnected ? 'Connect new Ethereum wallet' : 'Connect Ethereum wallet'; const onUseAlreadyConnectedWallet = React.useCallback(() => { invariant( ethereumAccount, 'ethereumAccount should be set in onUseAlreadyConnectedWallet', ); const newUserSelections = { ...userSelections, - ethereumAccount, + accountSelection: ethereumAccount, }; - navigate<'ConnectFarcaster'>({ - name: ConnectFarcasterRouteName, - params: { userSelections: newUserSelections }, + navigate<'AvatarSelection'>({ + name: AvatarSelectionRouteName, + params: { + userSelections: newUserSelections, + }, }); }, [ethereumAccount, userSelections, navigate]); let alreadyConnectedButton; if (alreadyHasConnected) { alreadyConnectedButton = ( ); } return ( <> Do you want to connect an Ethereum wallet? {body} {alreadyConnectedButton} {siwePanel} ); } const unboundStyles = { scrollViewContentContainer: { flexGrow: 1, }, header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, ethereumLogoContainer: { flexGrow: 1, alignItems: 'center', justifyContent: 'center', }, list: { paddingBottom: 16, }, listItem: { flexDirection: 'row', }, listItemNumber: { fontFamily: 'Arial', fontWeight: 'bold', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', }, listItemContent: { fontFamily: 'Arial', flexShrink: 1, fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', }, }; export default ConnectEthereum; diff --git a/native/account/registration/connect-farcaster.react.js b/native/account/registration/connect-farcaster.react.js index aa04cff5e..8d9d55ee4 100644 --- a/native/account/registration/connect-farcaster.react.js +++ b/native/account/registration/connect-farcaster.react.js @@ -1,223 +1,228 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { Alert } from 'react-native'; import { IdentityClientContext } from 'lib/shared/identity-client-context.js'; import { useIsAppForegrounded } from 'lib/shared/lifecycle-utils.js'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import { RegistrationContext } from './registration-context.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; -import type { - CoolOrNerdMode, - EthereumAccountSelection, -} from './registration-types.js'; +import type { CoolOrNerdMode } from './registration-types.js'; import FarcasterPrompt from '../../components/farcaster-prompt.react.js'; import FarcasterWebView from '../../components/farcaster-web-view.react.js'; import type { FarcasterWebViewState } from '../../components/farcaster-web-view.react.js'; import { type NavigationRoute, - UsernameSelectionRouteName, + ConnectEthereumRouteName, AvatarSelectionRouteName, } from '../../navigation/route-names.js'; -export type ConnectFarcasterParams = { - +userSelections: { +export type ConnectFarcasterParams = ?{ + +userSelections?: { +coolOrNerdMode?: CoolOrNerdMode, +keyserverURL?: string, - +ethereumAccount?: EthereumAccountSelection, }, }; type Props = { +navigation: RegistrationNavigationProp<'ConnectFarcaster'>, +route: NavigationRoute<'ConnectFarcaster'>, }; function ConnectFarcaster(prop: Props): React.Node { const { navigation, route } = prop; const { navigate } = navigation; - const { params } = route; + const userSelections = route.params?.userSelections; const registrationContext = React.useContext(RegistrationContext); invariant(registrationContext, 'registrationContext should be set'); - const { cachedSelections, setCachedSelections } = registrationContext; + const { + cachedSelections, + setCachedSelections, + skipEthereumLoginOnce, + setSkipEthereumLoginOnce, + } = registrationContext; const [webViewState, setWebViewState] = React.useState('closed'); + const { ethereumAccount } = cachedSelections; const goToNextStep = React.useCallback( (fid?: ?string) => { setWebViewState('closed'); - const { ethereumAccount, ...restUserSelections } = params.userSelections; - - if (ethereumAccount) { - navigate<'AvatarSelection'>({ - name: AvatarSelectionRouteName, - params: { - ...params, - userSelections: { - ...restUserSelections, - accountSelection: ethereumAccount, - farcasterID: fid, - }, - }, - }); - } else { - navigate<'UsernameSelection'>({ - name: UsernameSelectionRouteName, + if (!skipEthereumLoginOnce || !ethereumAccount) { + navigate<'ConnectEthereum'>({ + name: ConnectEthereumRouteName, params: { - ...params, userSelections: { - ...restUserSelections, + ...userSelections, farcasterID: fid, }, }, }); + return; } + + const newUserSelections = { + ...userSelections, + farcasterID: fid, + accountSelection: ethereumAccount, + }; + setSkipEthereumLoginOnce(false); + navigate<'AvatarSelection'>({ + name: AvatarSelectionRouteName, + params: { userSelections: newUserSelections }, + }); }, - [navigate, params], + [ + navigate, + skipEthereumLoginOnce, + setSkipEthereumLoginOnce, + ethereumAccount, + userSelections, + ], ); const onSkip = React.useCallback(() => goToNextStep(), [goToNextStep]); const identityServiceClient = React.useContext(IdentityClientContext); const getFarcasterUsers = identityServiceClient?.identityClient.getFarcasterUsers; invariant(getFarcasterUsers, 'Could not get getFarcasterUsers'); const [queuedAlert, setQueuedAlert] = React.useState(); const onSuccess = React.useCallback( async (fid: string) => { try { const commFCUsers = await getFarcasterUsers([fid]); if (commFCUsers.length > 0 && commFCUsers[0].farcasterID === fid) { const commUsername = commFCUsers[0].username; setQueuedAlert({ title: 'Farcaster account already linked', body: `That Farcaster account is already linked to ${commUsername}`, }); setWebViewState('closed'); } else { goToNextStep(fid); setCachedSelections(oldUserSelections => ({ ...oldUserSelections, farcasterID: fid, })); } } catch (e) { setQueuedAlert({ title: 'Failed to query Comm', body: 'We failed to query Comm to see if that Farcaster account is ' + 'already linked', }); setWebViewState('closed'); } }, [goToNextStep, setCachedSelections, getFarcasterUsers], ); const isAppForegrounded = useIsAppForegrounded(); React.useEffect(() => { if (!queuedAlert || !isAppForegrounded) { return; } Alert.alert(queuedAlert.title, queuedAlert.body); setQueuedAlert(null); }, [queuedAlert, isAppForegrounded]); const { farcasterID } = cachedSelections; const alreadyHasConnected = !!farcasterID; const onPressConnectFarcaster = React.useCallback(() => { setWebViewState('opening'); }, []); const defaultConnectButtonVariant = alreadyHasConnected ? 'outline' : 'enabled'; const connectButtonVariant = webViewState === 'opening' ? 'loading' : defaultConnectButtonVariant; const connectButtonText = alreadyHasConnected ? 'Connect new Farcaster account' : 'Connect Farcaster account'; const onUseAlreadyConnectedAccount = React.useCallback(() => { invariant( farcasterID, 'farcasterID should be set in onUseAlreadyConnectedAccount', ); goToNextStep(farcasterID); }, [farcasterID, goToNextStep]); const alreadyConnectedButton = React.useMemo(() => { if (!alreadyHasConnected) { return null; } return ( ); }, [alreadyHasConnected, onUseAlreadyConnectedAccount]); const connectFarcaster = React.useMemo( () => ( {alreadyConnectedButton} ), [ alreadyConnectedButton, connectButtonText, connectButtonVariant, onPressConnectFarcaster, onSkip, onSuccess, webViewState, ], ); return connectFarcaster; } const styles = { scrollViewContentContainer: { flexGrow: 1, }, }; export default ConnectFarcaster; diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js index 4b29fc79d..3ce7990af 100644 --- a/native/account/registration/keyserver-selection.react.js +++ b/native/account/registration/keyserver-selection.react.js @@ -1,274 +1,251 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { Text, View, TextInput } from 'react-native'; import { getVersionActionTypes } from 'lib/actions/device-actions.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { useIsKeyserverURLValid } from 'lib/shared/keyserver-utils.js'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import { RegistrationContext } from './registration-context.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; import RegistrationTextInput from './registration-text-input.react.js'; import { RegistrationTile, RegistrationTileHeader, } from './registration-tile.react.js'; import type { CoolOrNerdMode } from './registration-types.js'; import CommIcon from '../../components/comm-icon.react.js'; import { type NavigationRoute, - ConnectEthereumRouteName, ConnectFarcasterRouteName, } from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles, useColors } from '../../themes/colors.js'; import { defaultURLPrefix } from '../../utils/url-utils.js'; type Selection = 'ashoat' | 'custom'; export type KeyserverSelectionParams = { +userSelections: { +coolOrNerdMode: CoolOrNerdMode, }, }; const getVersionLoadingStatusSelector = createLoadingStatusSelector( getVersionActionTypes, ); type KeyserverSelectionError = 'cant_reach_keyserver'; type Props = { +navigation: RegistrationNavigationProp<'KeyserverSelection'>, +route: NavigationRoute<'KeyserverSelection'>, }; function KeyserverSelection(props: Props): React.Node { const registrationContext = React.useContext(RegistrationContext); invariant(registrationContext, 'registrationContext should be set'); - const { - cachedSelections, - setCachedSelections, - skipEthereumLoginOnce, - setSkipEthereumLoginOnce, - } = registrationContext; + const { cachedSelections, setCachedSelections } = registrationContext; const initialKeyserverURL = cachedSelections.keyserverURL; const [customKeyserver, setCustomKeyserver] = React.useState( initialKeyserverURL === defaultURLPrefix ? '' : initialKeyserverURL, ); const customKeyserverTextInputRef = React.useRef>(); let initialSelection; if (initialKeyserverURL === defaultURLPrefix) { initialSelection = 'ashoat'; } else if (initialKeyserverURL) { initialSelection = 'custom'; } const [error, setError] = React.useState(); const [currentSelection, setCurrentSelection] = React.useState(initialSelection); const selectAshoat = React.useCallback(() => { setCurrentSelection('ashoat'); customKeyserverTextInputRef.current?.blur(); if (currentSelection !== 'ashoat') { setError(undefined); } }, [currentSelection]); const customKeyserverEmpty = !customKeyserver; const selectCustom = React.useCallback(() => { setCurrentSelection('custom'); if (customKeyserverEmpty) { customKeyserverTextInputRef.current?.focus(); } if (currentSelection !== 'custom') { setError(undefined); } }, [customKeyserverEmpty, currentSelection]); const onCustomKeyserverFocus = React.useCallback(() => { setCurrentSelection('custom'); setError(undefined); }, []); let keyserverURL; if (currentSelection === 'ashoat') { keyserverURL = defaultURLPrefix; } else if (currentSelection === 'custom' && customKeyserver) { keyserverURL = customKeyserver; } const versionLoadingStatus = useSelector(getVersionLoadingStatusSelector); let buttonState = keyserverURL ? 'enabled' : 'disabled'; if (versionLoadingStatus === 'loading') { buttonState = 'loading'; } const isKeyserverURLValidPromiseCallback = useIsKeyserverURLValid(keyserverURL); const { navigate } = props.navigation; const { coolOrNerdMode } = props.route.params.userSelections; - const { ethereumAccount } = cachedSelections; const onSubmit = React.useCallback(async () => { setError(undefined); const isKeyserverURLValid = await isKeyserverURLValidPromiseCallback(); if (!isKeyserverURLValid) { setError('cant_reach_keyserver'); return; } setCachedSelections(oldUserSelections => ({ ...oldUserSelections, keyserverURL, })); const userSelections = { coolOrNerdMode, keyserverURL }; - if (!skipEthereumLoginOnce || !ethereumAccount) { - navigate<'ConnectEthereum'>({ - name: ConnectEthereumRouteName, - params: { userSelections }, - }); - return; - } - - const userSelectionsWithAccount = { - ...userSelections, - ethereumAccount, - }; - setSkipEthereumLoginOnce(false); navigate<'ConnectFarcaster'>({ name: ConnectFarcasterRouteName, - params: { userSelections: userSelectionsWithAccount }, + params: { userSelections }, }); }, [ keyserverURL, isKeyserverURLValidPromiseCallback, setCachedSelections, navigate, coolOrNerdMode, - skipEthereumLoginOnce, - ethereumAccount, - setSkipEthereumLoginOnce, ]); const styles = useStyles(unboundStyles); let errorText; if (error === 'cant_reach_keyserver') { errorText = ( Can’t reach that keyserver :( ); } const colors = useColors(); return ( Select a keyserver to join Chat communities on Comm are hosted on keyservers, which are user-operated backends. Keyservers allow Comm to offer strong privacy guarantees without sacrificing functionality. ashoat Ashoat is Comm’s founder, and his keyserver currently hosts most of the communities on Comm. Enter a keyserver {errorText} ); } const unboundStyles = { header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, tileTitleText: { flex: 1, fontSize: 18, color: 'panelForegroundLabel', }, tileBody: { fontFamily: 'Arial', fontSize: 13, color: 'panelForegroundSecondaryLabel', }, cloud: { marginRight: 8, }, error: { marginTop: 16, }, errorText: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'redText', }, }; export default KeyserverSelection; diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js index 92a4d0270..3903fcc6f 100644 --- a/native/account/registration/registration-navigator.react.js +++ b/native/account/registration/registration-navigator.react.js @@ -1,134 +1,134 @@ // @flow import type { StackNavigationProp, StackNavigationHelpers, } from '@react-navigation/core'; import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; import AccountDoesNotExist from './account-does-not-exist.react.js'; import AvatarSelection from './avatar-selection.react.js'; import ConnectEthereum from './connect-ethereum.react.js'; import ConnectFarcaster from './connect-farcaster.react.js'; import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js'; import EmojiAvatarSelection from './emoji-avatar-selection.react.js'; import ExistingEthereumAccount from './existing-ethereum-account.react.js'; import KeyserverSelection from './keyserver-selection.react.js'; import PasswordSelection from './password-selection.react.js'; import RegistrationTerms from './registration-terms.react.js'; import { CreateSIWEBackupMessage } from './siwe-backup-message-creation.react.js'; import UsernameSelection from './username-selection.react.js'; import RegistrationUserAvatarCameraModal from '../../media/registration-user-avatar-camera-modal.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { KeyserverSelectionRouteName, CoolOrNerdModeSelectionRouteName, ConnectEthereumRouteName, CreateSIWEBackupMessageRouteName, ExistingEthereumAccountRouteName, UsernameSelectionRouteName, ConnectFarcasterRouteName, PasswordSelectionRouteName, AvatarSelectionRouteName, EmojiAvatarSelectionRouteName, RegistrationUserAvatarCameraModalRouteName, RegistrationTermsRouteName, AccountDoesNotExistRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; export type RegistrationNavigationProp< RouteName: $Keys = $Keys, > = StackNavigationProp; const Registration = createStackNavigator< ScreenParamList, RegistrationParamList, StackNavigationHelpers, >(); const screenOptions = { headerTransparent: true, headerBackTitleVisible: false, headerTitle: '', headerTintColor: 'white', headerLeftContainerStyle: { paddingLeft: 12, }, }; const cameraScreenOptions = { headerShown: false, }; type Props = { +navigation: RootNavigationProp<'Registration'>, ... }; // eslint-disable-next-line no-unused-vars function RegistrationNavigator(props: Props): React.Node { return ( ); } export default RegistrationNavigator;