diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js index 31717c4be..2e1666245 100644 --- a/native/account/registration/avatar-selection.react.js +++ b/native/account/registration/avatar-selection.react.js @@ -1,160 +1,160 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { Text, View } 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, AccountSelection, AvatarData, } from './registration-types.js'; import { EditUserAvatarContext, type UserAvatarSelection, } from '../../avatars/edit-user-avatar-provider.react.js'; import EditUserAvatar from '../../avatars/edit-user-avatar.react.js'; import type { NavigationRoute } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; export type AvatarSelectionParams = { +userSelections: { +coolOrNerdMode: CoolOrNerdMode, +keyserverUsername: string, - +accountSelections: AccountSelection, + +accountSelection: AccountSelection, }, }; const ensDefaultSelection = { needsUpload: false, updateUserAvatarRequest: { type: 'ens' }, clientAvatar: { type: 'ens' }, }; type Props = { +navigation: RegistrationNavigationProp<'AvatarSelection'>, +route: NavigationRoute<'AvatarSelection'>, }; function AvatarSelection(props: Props): React.Node { const { userSelections } = props.route.params; - const { accountSelections } = userSelections; + const { accountSelection } = userSelections; const username = - accountSelections.accountType === 'username' - ? accountSelections.username - : accountSelections.address; + accountSelection.accountType === 'username' + ? accountSelection.username + : accountSelection.address; const editUserAvatarContext = React.useContext(EditUserAvatarContext); invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); const { setRegistrationMode } = editUserAvatarContext; const prefetchedAvatarURI = - accountSelections.accountType === 'ethereum' - ? accountSelections.avatarURI + accountSelection.accountType === 'ethereum' + ? accountSelection.avatarURI : undefined; const [avatarData, setAvatarData] = React.useState( prefetchedAvatarURI ? ensDefaultSelection : undefined, ); const setClientAvatarFromSelection = React.useCallback( (selection: UserAvatarSelection) => { if (selection.needsUpload) { setAvatarData({ ...selection, clientAvatar: { type: 'image', uri: selection.mediaSelection.uri, }, }); } else if (selection.updateUserAvatarRequest.type !== 'remove') { const clientRequest = selection.updateUserAvatarRequest; invariant( clientRequest.type !== 'image', 'image avatars need to be uploaded', ); setAvatarData({ ...selection, clientAvatar: clientRequest, }); } else { setAvatarData(undefined); } }, [], ); React.useEffect(() => { setRegistrationMode({ registrationMode: 'on', successCallback: setClientAvatarFromSelection, }); return () => { setRegistrationMode({ registrationMode: 'off' }); }; }, [setRegistrationMode, setClientAvatarFromSelection]); const onProceed = React.useCallback(() => {}, []); const clientAvatar = avatarData?.clientAvatar; const userInfoOverride = React.useMemo( () => ({ username, avatar: clientAvatar, }), [username, clientAvatar], ); const styles = useStyles(unboundStyles); return ( Pick an avatar ); } const unboundStyles = { scrollViewContentContainer: { paddingHorizontal: 0, }, header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, paddingHorizontal: 16, }, stagedAvatarSection: { marginTop: 16, backgroundColor: 'panelForeground', paddingVertical: 24, alignItems: 'center', }, editUserAvatar: { alignItems: 'center', justifyContent: 'center', }, }; export default AvatarSelection; diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js index 9ba06891f..55bb4f93d 100644 --- a/native/account/registration/connect-ethereum.react.js +++ b/native/account/registration/connect-ethereum.react.js @@ -1,276 +1,276 @@ // @flow import * as React from 'react'; import { Text, View } from 'react-native'; import { exactSearchUser, exactSearchUserActionTypes, } from 'lib/actions/user-actions.js'; import { ENSCacheContext } from 'lib/components/ens-cache-provider.react.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import type { SIWEResult } from 'lib/types/siwe-types.js'; import { useServerCall, useDispatchActionPromise, } from 'lib/utils/action-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 type { RegistrationNavigationProp } from './registration-navigator.react.js'; import type { CoolOrNerdMode } from './registration-types.js'; import { type NavigationRoute, ExistingEthereumAccountRouteName, UsernameSelectionRouteName, AvatarSelectionRouteName, } from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles } from '../../themes/colors.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, +keyserverUsername: 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 { userSelections } = props.route.params; 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<'UsernameSelection'>({ name: UsernameSelectionRouteName, params, }); }, [navigate, params]); const exactSearchUserCall = useServerCall(exactSearchUser); const dispatchActionPromise = useDispatchActionPromise(); const cacheContext = React.useContext(ENSCacheContext); const { ensCache } = cacheContext; const onSuccessfulWalletSignature = React.useCallback( async (result: SIWEResult) => { const searchPromise = exactSearchUserCall(result.address); dispatchActionPromise(exactSearchUserActionTypes, searchPromise); // We want to figure out if the user has an ENS avatar now // so that we can default to the ENS avatar in AvatarSelection const avatarURIPromise = (async () => { if (!ensCache) { return null; } return await ensCache.getAvatarURIForAddress(result.address); })(); const { userInfo } = await searchPromise; if (userInfo) { navigate<'ExistingEthereumAccount'>({ name: ExistingEthereumAccountRouteName, params: result, }); return; } const avatarURI = await avatarURIPromise; const newUserSelections = { ...userSelections, - accountSelections: { + accountSelection: { accountType: 'ethereum', ...result, avatarURI, }, }; navigate<'AvatarSelection'>({ name: AvatarSelectionRouteName, params: { userSelections: newUserSelections }, }); }, [ userSelections, exactSearchUserCall, dispatchActionPromise, navigate, ensCache, ], ); let siwePanel; if (panelState !== 'closed') { siwePanel = ( ); } const exactSearchUserCallLoading = useSelector( state => exactSearchUserLoadingStatusSelector(state) === 'loading', ); const connectButtonVariant = exactSearchUserCallLoading || panelState === 'opening' ? 'loading' : 'enabled'; return ( <> Do you want to connect an Ethereum wallet? {body} {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/password-selection.react.js b/native/account/registration/password-selection.react.js index d5417b2ed..b94568d19 100644 --- a/native/account/registration/password-selection.react.js +++ b/native/account/registration/password-selection.react.js @@ -1,225 +1,225 @@ // @flow import * as React from 'react'; import { View, Text, Platform } from 'react-native'; import sleep from 'lib/utils/sleep.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 RegistrationTextInput from './registration-text-input.react.js'; import type { CoolOrNerdMode } from './registration-types.js'; import { type NavigationRoute, AvatarSelectionRouteName, } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; import type { KeyPressEvent } from '../../types/react-native.js'; export type PasswordSelectionParams = { +userSelections: { +coolOrNerdMode: CoolOrNerdMode, +keyserverUsername: string, +username: string, }, }; type PasswordError = 'passwords_dont_match' | 'empty_password'; type Props = { +navigation: RegistrationNavigationProp<'PasswordSelection'>, +route: NavigationRoute<'PasswordSelection'>, }; function PasswordSelection(props: Props): React.Node { const [password, setPassword] = React.useState(''); const [confirmPassword, setConfirmPassword] = React.useState(''); const passwordsMatch = password === confirmPassword; const passwordIsEmpty = password === ''; const [passwordError, setPasswordError] = React.useState(); const potentiallyClearErrors = React.useCallback(() => { if (!passwordsMatch || passwordIsEmpty) { return false; } setPasswordError(null); return true; }, [passwordsMatch, passwordIsEmpty]); const checkPasswordValidity = React.useCallback(() => { if (!passwordsMatch) { setPasswordError('passwords_dont_match'); return false; } else if (passwordIsEmpty) { setPasswordError('empty_password'); return false; } return potentiallyClearErrors(); }, [passwordsMatch, passwordIsEmpty, potentiallyClearErrors]); const { userSelections } = props.route.params; const { navigate } = props.navigation; const onProceed = React.useCallback(() => { if (!checkPasswordValidity()) { return; } const { coolOrNerdMode, keyserverUsername, username } = userSelections; const newUserSelections = { coolOrNerdMode, keyserverUsername, - accountSelections: { + accountSelection: { accountType: 'username', username, password, }, }; navigate<'AvatarSelection'>({ name: AvatarSelectionRouteName, params: { userSelections: newUserSelections }, }); }, [checkPasswordValidity, userSelections, password, navigate]); const styles = useStyles(unboundStyles); let errorText; if (passwordError === 'passwords_dont_match') { errorText = ( Passwords don’t match ); } else if (passwordError === 'empty_password') { errorText = Password cannot be empty; } const confirmPasswordInputRef = React.useRef(); const focusConfirmPasswordInput = React.useCallback(() => { confirmPasswordInputRef.current?.focus(); }, []); const iosPasswordBeingAutoFilled = React.useRef(false); const confirmPasswordEmpty = confirmPassword.length === 0; const onPasswordKeyPress = React.useCallback( (event: KeyPressEvent) => { const { key } = event.nativeEvent; // On iOS, paste doesn't trigger onKeyPress, but password autofill does // Password autofill calls onKeyPress with `key` set to the whole password if ( key.length > 1 && key !== 'Backspace' && key !== 'Enter' && confirmPasswordEmpty ) { iosPasswordBeingAutoFilled.current = true; } }, [confirmPasswordEmpty], ); const passwordInputRef = React.useRef(); const passwordLength = password.length; const onChangePasswordInput = React.useCallback( (input: string) => { setPassword(input); if (iosPasswordBeingAutoFilled.current) { // On iOS, paste doesn't trigger onKeyPress, but password autofill does iosPasswordBeingAutoFilled.current = false; setConfirmPassword(input); passwordInputRef.current?.blur(); } else if ( Platform.OS === 'android' && input.length - passwordLength > 1 && confirmPasswordEmpty ) { // On Android, password autofill doesn't trigger onKeyPress. Instead we // rely on observing when the password field changes by more than one // character at a time. This means we treat paste the same way as // password autofill setConfirmPassword(input); passwordInputRef.current?.blur(); } }, [passwordLength, confirmPasswordEmpty], ); /* eslint-disable react-hooks/rules-of-hooks */ if (Platform.OS === 'android') { // It's okay to call this hook conditionally because // the condition is guaranteed to never change React.useEffect(() => { (async () => { await sleep(250); passwordInputRef.current?.focus(); })(); }, []); } /* eslint-enable react-hooks/rules-of-hooks */ return ( Pick a password {errorText} ); } const unboundStyles = { header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, error: { marginTop: 16, }, errorText: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'redText', }, confirmPassword: { marginTop: 16, }, }; export default PasswordSelection;