Page MenuHomePhorge
Files F32424020

D8004.1765352292.diff
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

D8004.1765352292.diff
View Options

diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/avatar-selection.react.js
@@ -0,0 +1,69 @@
+// @flow
+
+import * as React from 'react';
+import { Text } from 'react-native';
+
+import type { SIWEResult } from 'lib/types/siwe-types.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 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';
+
+type EthereumAccountSelections = {
+ +accountType: 'ethereum',
+ ...SIWEResult,
+};
+
+type UsernameAccountSelections = {
+ +accountType: 'username',
+ +username: string,
+ +password: string,
+};
+
+export type AvatarSelectionParams = {
+ +userSelections: {
+ +coolOrNerdMode: CoolOrNerdMode,
+ +keyserverUsername: string,
+ +accountSelections: EthereumAccountSelections | UsernameAccountSelections,
+ },
+};
+
+type Props = {
+ +navigation: RegistrationNavigationProp<'AvatarSelection'>,
+ +route: NavigationRoute<'AvatarSelection'>,
+};
+// eslint-disable-next-line no-unused-vars
+function AvatarSelection(props: Props): React.Node {
+ const onProceed = React.useCallback(() => {}, []);
+
+ const styles = useStyles(unboundStyles);
+ return (
+ <RegistrationContainer>
+ <RegistrationContentContainer>
+ <Text style={styles.header}>Pick an avatar</Text>
+ </RegistrationContentContainer>
+ <RegistrationButtonContainer>
+ <RegistrationButton
+ onPress={onProceed}
+ label="Next"
+ variant="disabled"
+ />
+ </RegistrationButtonContainer>
+ </RegistrationContainer>
+ );
+}
+
+const unboundStyles = {
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+};
+
+export default AvatarSelection;
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
@@ -24,6 +24,7 @@
type NavigationRoute,
ExistingEthereumAccountRouteName,
UsernameSelectionRouteName,
+ AvatarSelectionRouteName,
} from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
@@ -137,11 +138,22 @@
name: ExistingEthereumAccountRouteName,
params: result,
});
- } else {
- // show avatar selection screen
+ return;
}
+
+ const newUserSelections = {
+ ...userSelections,
+ accountSelections: {
+ accountType: 'ethereum',
+ ...result,
+ },
+ };
+ navigate<'AvatarSelection'>({
+ name: AvatarSelectionRouteName,
+ params: { userSelections: newUserSelections },
+ });
},
- [exactSearchUserCall, dispatchActionPromise, navigate],
+ [userSelections, exactSearchUserCall, dispatchActionPromise, navigate],
);
let siwePanel;
diff --git a/native/account/registration/password-selection.react.js b/native/account/registration/password-selection.react.js
--- a/native/account/registration/password-selection.react.js
+++ b/native/account/registration/password-selection.react.js
@@ -12,7 +12,10 @@
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import RegistrationTextInput from './registration-text-input.react.js';
import type { CoolOrNerdMode } from './registration-types.js';
-import type { NavigationRoute } from '../../navigation/route-names.js';
+import {
+ type NavigationRoute,
+ AvatarSelectionRouteName,
+} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';
import type { KeyPressEvent } from '../../types/react-native.js';
@@ -30,7 +33,6 @@
+navigation: RegistrationNavigationProp<'PasswordSelection'>,
+route: NavigationRoute<'PasswordSelection'>,
};
-// eslint-disable-next-line no-unused-vars
function PasswordSelection(props: Props): React.Node {
const [password, setPassword] = React.useState('');
const [confirmPassword, setConfirmPassword] = React.useState('');
@@ -57,11 +59,28 @@
return potentiallyClearErrors();
}, [passwordsMatch, passwordIsEmpty, potentiallyClearErrors]);
+ const { userSelections } = props.route.params;
+ const { navigate } = props.navigation;
const onProceed = React.useCallback(() => {
if (!checkPasswordValidity()) {
return;
}
- }, [checkPasswordValidity]);
+
+ const { coolOrNerdMode, keyserverUsername, username } = userSelections;
+ const newUserSelections = {
+ coolOrNerdMode,
+ keyserverUsername,
+ accountSelections: {
+ accountType: 'username',
+ username,
+ password,
+ },
+ };
+ navigate<'AvatarSelection'>({
+ name: AvatarSelectionRouteName,
+ params: { userSelections: newUserSelections },
+ });
+ }, [checkPasswordValidity, userSelections, password, navigate]);
const styles = useStyles(unboundStyles);
let errorText;
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
@@ -7,6 +7,7 @@
} from '@react-navigation/stack';
import * as React from 'react';
+import AvatarSelection from './avatar-selection.react.js';
import ConnectEthereum from './connect-ethereum.react.js';
import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
import ExistingEthereumAccount from './existing-ethereum-account.react.js';
@@ -21,6 +22,7 @@
ExistingEthereumAccountRouteName,
UsernameSelectionRouteName,
PasswordSelectionRouteName,
+ AvatarSelectionRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -77,6 +79,10 @@
name={PasswordSelectionRouteName}
component={PasswordSelection}
/>
+ <Registration.Screen
+ name={AvatarSelectionRouteName}
+ component={AvatarSelection}
+ />
</Registration.Navigator>
);
}
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
@@ -4,6 +4,7 @@
import type { ActionResultModalParams } from './action-result-modal.react.js';
import type { InviteLinkModalParams } from './invite-link-modal.react';
+import type { AvatarSelectionParams } from '../account/registration/avatar-selection.react.js';
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';
@@ -111,6 +112,7 @@
export const CommunityCreationMembersRouteName = 'CommunityCreationMembers';
export const MessageSearchRouteName = 'MessageSearch';
export const PasswordSelectionRouteName = 'PasswordSelection';
+export const AvatarSelectionRouteName = 'AvatarSelection';
export type RootParamList = {
+LoggedOutModal: void,
@@ -208,6 +210,7 @@
+ExistingEthereumAccount: ExistingEthereumAccountParams,
+UsernameSelection: UsernameSelectionParams,
+PasswordSelection: PasswordSelectionParams,
+ +AvatarSelection: AvatarSelectionParams,
};
export type InviteLinkParamList = {

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 10, 7:38 AM (18 h, 41 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5862132
Default Alt Text
D8004.1765352292.diff (7 KB)

Event Timeline