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 = {