diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js --- a/native/account/registration/connect-ethereum.react.js +++ b/native/account/registration/connect-ethereum.react.js @@ -22,6 +22,7 @@ import { type NavigationRoute, ExistingEthereumAccountRouteName, + UsernameSelectionRouteName, } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js'; @@ -41,8 +42,9 @@ +route: NavigationRoute<'ConnectEthereum'>, }; function ConnectEthereum(props: Props): React.Node { - const isNerdMode = - props.route.params.userSelections.coolOrNerdMode === 'nerd'; + const { params } = props.route; + const { userSelections } = props.route.params; + const isNerdMode = userSelections.coolOrNerdMode === 'nerd'; const styles = useStyles(unboundStyles); let body; @@ -107,14 +109,17 @@ [panelState], ); + const { navigate } = props.navigation; const onSkip = React.useCallback(() => { - // show username selection screen - }, []); + navigate<'UsernameSelection'>({ + name: UsernameSelectionRouteName, + params, + }); + }, [navigate, params]); const exactSearchUserCall = useServerCall(exactSearchUser); const dispatchActionPromise = useDispatchActionPromise(); - const { navigate } = props.navigation; const onSuccessfulWalletSignature = React.useCallback( async (result: SIWEResult) => { const searchPromise = exactSearchUserCall(result.address); diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js --- a/native/account/registration/registration-navigator.react.js +++ b/native/account/registration/registration-navigator.react.js @@ -11,12 +11,14 @@ import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js'; import ExistingEthereumAccount from './existing-ethereum-account.react.js'; import KeyserverSelection from './keyserver-selection.react.js'; +import UsernameSelection from './username-selection.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { KeyserverSelectionRouteName, CoolOrNerdModeSelectionRouteName, ConnectEthereumRouteName, ExistingEthereumAccountRouteName, + UsernameSelectionRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; @@ -65,6 +67,10 @@ name={ExistingEthereumAccountRouteName} component={ExistingEthereumAccount} /> + ); } diff --git a/native/account/registration/username-selection.react.js b/native/account/registration/username-selection.react.js new file mode 100644 --- /dev/null +++ b/native/account/registration/username-selection.react.js @@ -0,0 +1,55 @@ +// @flow + +import * as React from 'react'; +import { Text } 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 type { CoolOrNerdMode } from './registration-types.js'; +import type { NavigationRoute } from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; + +export type UsernameSelectionParams = { + +userSelections: { + +coolOrNerdMode: CoolOrNerdMode, + +keyserverUsername: string, + }, +}; + +type Props = { + +navigation: RegistrationNavigationProp<'UsernameSelection'>, + +route: NavigationRoute<'UsernameSelection'>, +}; +// eslint-disable-next-line no-unused-vars +function UsernameSelection(props: Props): React.Node { + const onProceed = React.useCallback(() => {}, []); + + const styles = useStyles(unboundStyles); + return ( + + + Pick a username + + + + + + ); +} + +const unboundStyles = { + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, +}; + +export default UsernameSelection; 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 @@ -7,6 +7,7 @@ import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js'; import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js'; import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js'; +import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; import type { ComposeSubchannelParams } from '../chat/compose-subchannel.react.js'; @@ -97,6 +98,7 @@ export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount'; +export const UsernameSelectionRouteName = 'UsernameSelection'; export type RootParamList = { +LoggedOutModal: void, @@ -189,6 +191,7 @@ +KeyserverSelection: KeyserverSelectionParams, +ConnectEthereum: ConnectEthereumParams, +ExistingEthereumAccount: ExistingEthereumAccountParams, + +UsernameSelection: UsernameSelectionParams, }; export type ScreenParamList = {