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 @@ -19,7 +19,10 @@ 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 { + type NavigationRoute, + ExistingEthereumAccountRouteName, +} from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js'; import SIWEPanel from '../siwe-panel.react.js'; @@ -111,6 +114,7 @@ const exactSearchUserCall = useServerCall(exactSearchUser); const dispatchActionPromise = useDispatchActionPromise(); + const { navigate } = props.navigation; const onSuccessfulWalletSignature = React.useCallback( async (result: SIWEResult) => { const searchPromise = exactSearchUserCall(result.address); @@ -118,12 +122,16 @@ const { userInfo } = await searchPromise; if (userInfo) { - // show duplicate account screen + const { message, signature } = result; + navigate<'ExistingEthereumAccount'>({ + name: ExistingEthereumAccountRouteName, + params: { message, signature }, + }); } else { // show avatar selection screen } }, - [exactSearchUserCall, dispatchActionPromise], + [exactSearchUserCall, dispatchActionPromise, navigate], ); let siwePanel; @@ -144,7 +152,7 @@ - Do you want to connect an Ethereum Wallet to your account? + Do you want to connect an Ethereum wallet? {body} diff --git a/native/account/registration/existing-ethereum-account.react.js b/native/account/registration/existing-ethereum-account.react.js new file mode 100644 --- /dev/null +++ b/native/account/registration/existing-ethereum-account.react.js @@ -0,0 +1,71 @@ +// @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 { NavigationRoute } from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; + +export type ExistingEthereumAccountParams = { + +message: string, + +signature: string, +}; + +type Props = { + +navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>, + +route: NavigationRoute<'ExistingEthereumAccount'>, +}; +function ExistingEthereumAccount(props: Props): React.Node { + const styles = useStyles(unboundStyles); + + const { goBack } = props.navigation; + + const onProceedToLogIn = React.useCallback(() => {}, []); + + return ( + + + + Account already exists for Ethereum wallet + + + You can proceed to log in with this wallet, or go back and use a + different wallet. + + + + + + + + ); +} + +const unboundStyles = { + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + body: { + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, +}; + +export default ExistingEthereumAccount; 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 @@ -9,12 +9,14 @@ 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'; import KeyserverSelection from './keyserver-selection.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { KeyserverSelectionRouteName, CoolOrNerdModeSelectionRouteName, ConnectEthereumRouteName, + ExistingEthereumAccountRouteName, type ScreenParamList, type RegistrationParamList, } from '../../navigation/route-names.js'; @@ -59,6 +61,10 @@ name={ConnectEthereumRouteName} component={ConnectEthereum} /> + ); } 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 @@ -5,6 +5,7 @@ import type { ActionResultModalParams } from './action-result-modal.react.js'; import type { InviteLinkModalParams } from './invite-link-modal.react'; 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 { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; @@ -95,6 +96,7 @@ export const KeyserverSelectionRouteName = 'KeyserverSelection'; export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; +export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount'; export type RootParamList = { +LoggedOutModal: void, @@ -186,6 +188,7 @@ +CoolOrNerdModeSelection: void, +KeyserverSelection: KeyserverSelectionParams, +ConnectEthereum: ConnectEthereumParams, + +ExistingEthereumAccount: ExistingEthereumAccountParams, }; export type ScreenParamList = {