Differential D8046 Diff 27365 native/account/registration/avatar-selection.react.js

Changeset View

Standalone View

native/account/registration/avatar-selection.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { Text } from 'react-native';		import { Text, View } from 'react-native';

import type { SIWEResult } from 'lib/types/siwe-types.js';		import type { SIWEResult } from 'lib/types/siwe-types.js';

import RegistrationButtonContainer from './registration-button-container.react.js';		import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';		import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';		import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';		import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';		import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { CoolOrNerdMode } from './registration-types.js';		import type { CoolOrNerdMode } from './registration-types.js';
		import EditUserAvatar from '../../avatars/edit-user-avatar.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';		import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';

type EthereumAccountSelections = {		type EthereumAccountSelections = {
+accountType: 'ethereum',		+accountType: 'ethereum',
...SIWEResult,		...SIWEResult,
};		};

Show All 10 Lines	+userSelections: {
+accountSelections: EthereumAccountSelections \| UsernameAccountSelections,		+accountSelections: EthereumAccountSelections \| UsernameAccountSelections,
},		},
};		};

type Props = {		type Props = {
+navigation: RegistrationNavigationProp<'AvatarSelection'>,		+navigation: RegistrationNavigationProp<'AvatarSelection'>,
+route: NavigationRoute<'AvatarSelection'>,		+route: NavigationRoute<'AvatarSelection'>,
};		};
// eslint-disable-next-line no-unused-vars
function AvatarSelection(props: Props): React.Node {		function AvatarSelection(props: Props): React.Node {
		const { userSelections } = props.route.params;
		const { accountSelections } = userSelections;
		const username =
		accountSelections.accountType === 'username'
		? accountSelections.username
		: accountSelections.address;

		const [avatarData] = React.useState();

const onProceed = React.useCallback(() => {}, []);		const onProceed = React.useCallback(() => {}, []);

		const clientAvatar = avatarData?.clientAvatar;
		const userInfoOverride = React.useMemo(
		() => ({
		username,
		avatar: clientAvatar,
		}),
		[username, clientAvatar],
		);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer>		<RegistrationContentContainer style={styles.scrollViewContentContainer}>
<Text style={styles.header}>Pick an avatar</Text>		<Text style={styles.header}>Pick an avatar</Text>
		<View style={styles.stagedAvatarSection}>
		<View style={styles.editUserAvatar}>
		<EditUserAvatar userInfo={userInfoOverride} disabled={false} />
		</View>
		</View>
</RegistrationContentContainer>		</RegistrationContentContainer>
<RegistrationButtonContainer>		<RegistrationButtonContainer>
<RegistrationButton		<RegistrationButton
onPress={onProceed}		onPress={onProceed}
label="Next"		label="Next"
variant="disabled"		variant="disabled"
/>		/>
</RegistrationButtonContainer>		</RegistrationButtonContainer>
</RegistrationContainer>		</RegistrationContainer>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
		scrollViewContentContainer: {
		paddingHorizontal: 0,
		},
header: {		header: {
fontSize: 24,		fontSize: 24,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
paddingBottom: 16,		paddingBottom: 16,
		paddingHorizontal: 16,
		},
		stagedAvatarSection: {
		marginTop: 16,
		backgroundColor: 'panelForeground',
		paddingVertical: 24,
		alignItems: 'center',
		},
		editUserAvatar: {
		alignItems: 'center',
		justifyContent: 'center',
},		},
};		};

export default AvatarSelection;		export default AvatarSelection;