diff --git a/native/account/fullscreen-siwe-panel.react.js b/native/account/fullscreen-siwe-panel.react.js --- a/native/account/fullscreen-siwe-panel.react.js +++ b/native/account/fullscreen-siwe-panel.react.js @@ -1,14 +1,21 @@ // @flow +import { useNavigation } from '@react-navigation/native'; import * as React from 'react'; import { ActivityIndicator, View } from 'react-native'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import type { SIWEResult } from 'lib/types/siwe-types.js'; +import { ServerError } from 'lib/utils/errors.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; +import { useGetEthereumAccountFromSIWEResult } from './registration/ethereum-utils.js'; import { useSIWEServerCall } from './siwe-hooks.js'; import SIWEPanel from './siwe-panel.react.js'; +import { + AccountDoesNotExistRouteName, + RegistrationRouteName, +} from '../navigation/route-names.js'; import Alert from '../utils/alert.js'; type Props = { @@ -27,16 +34,37 @@ [], ); + const getEthereumAccountFromSIWEResult = + useGetEthereumAccountFromSIWEResult(); + const { navigate } = useNavigation(); + const { goBackToPrompt } = props; + const onAccountDoesNotExist = React.useCallback( + async (result: SIWEResult) => { + await getEthereumAccountFromSIWEResult(result); + goBackToPrompt(); + navigate<'Registration'>(RegistrationRouteName, { + screen: AccountDoesNotExistRouteName, + }); + }, + [getEthereumAccountFromSIWEResult, navigate, goBackToPrompt], + ); + const siweServerCall = useSIWEServerCall(); const successRef = React.useRef(false); const dispatch = useDispatch(); - const { goBackToPrompt } = props; const onSuccess = React.useCallback( async (result: SIWEResult) => { successRef.current = true; try { await siweServerCall({ ...result, doNotRegister: true }); } catch (e) { + if ( + e instanceof ServerError && + e.message === 'account_does_not_exist' + ) { + await onAccountDoesNotExist(result); + return; + } Alert.alert( 'Unknown error', 'Uhh... try again?', @@ -52,7 +80,7 @@ }, }); }, - [siweServerCall, dispatch, goBackToPrompt], + [siweServerCall, dispatch, goBackToPrompt, onAccountDoesNotExist], ); const ifBeforeSuccessGoBackToPrompt = React.useCallback(() => { diff --git a/native/account/registration/account-does-not-exist.react.js b/native/account/registration/account-does-not-exist.react.js new file mode 100644 --- /dev/null +++ b/native/account/registration/account-does-not-exist.react.js @@ -0,0 +1,79 @@ +// @flow + +import * as React from 'react'; +import { Text, View, Image } 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 commSwooshSource from '../../img/comm-swoosh.png'; +import { + type NavigationRoute, + CoolOrNerdModeSelectionRouteName, +} from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; + +type Props = { + +navigation: RegistrationNavigationProp<'AccountDoesNotExist'>, + +route: NavigationRoute<'AccountDoesNotExist'>, +}; +function AccountDoesNotExist(props: Props): React.Node { + const { navigate } = props.navigation; + const onSubmit = React.useCallback(() => { + navigate(CoolOrNerdModeSelectionRouteName); + }, [navigate]); + + const styles = useStyles(unboundStyles); + return ( + + + New Comm account + + It looks like this is your first time logging into Comm. + + + Let’s get started with registering your Ethereum account! + + + + + + + + + + ); +} + +const unboundStyles = { + scrollViewContentContainer: { + flexGrow: 1, + }, + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + body: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, + commSwooshContainer: { + flexGrow: 1, + flexShrink: 1, + alignItems: 'center', + justifyContent: 'center', + }, + commSwoosh: { + resizeMode: 'center', + width: '100%', + height: '100%', + }, +}; + +export default AccountDoesNotExist; 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 @@ import { createStackNavigator } from '@react-navigation/stack'; import * as React from 'react'; +import AccountDoesNotExist from './account-does-not-exist.react.js'; import AvatarSelection from './avatar-selection.react.js'; import ConnectEthereum from './connect-ethereum.react.js'; import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js'; @@ -29,6 +30,7 @@ EmojiAvatarSelectionRouteName, RegistrationUserAvatarCameraModalRouteName, RegistrationTermsRouteName, + AccountDoesNotExistRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; @@ -106,6 +108,10 @@ name={RegistrationTermsRouteName} component={RegistrationTerms} /> + ); } 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 @@ -145,6 +145,7 @@ export const AddKeyserverRouteName = 'AddKeyserver'; export const KeyserverSelectionBottomSheetRouteName = 'KeyserverSelectionBottomSheet'; +export const AccountDoesNotExistRouteName = 'AccountDoesNotExist'; export type RootParamList = { +LoggedOutModal: void, @@ -258,6 +259,7 @@ +EmojiAvatarSelection: EmojiAvatarSelectionParams, +RegistrationUserAvatarCameraModal: void, +RegistrationTerms: RegistrationTermsParams, + +AccountDoesNotExist: void, }; export type InviteLinkParamList = {