diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js index f24b7cab1..4302f3b7f 100644 --- a/native/account/registration/connect-ethereum.react.js +++ b/native/account/registration/connect-ethereum.react.js @@ -1,220 +1,219 @@ // @flow import * as React from 'react'; import { Text, View } from 'react-native'; import { exactSearchUser, exactSearchUserActionTypes, } from 'lib/actions/user-actions.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, } 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'; 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 isNerdMode = props.route.params.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 onSkip = React.useCallback(() => { // show username selection screen }, []); const exactSearchUserCall = useServerCall(exactSearchUser); const dispatchActionPromise = useDispatchActionPromise(); const { navigate } = props.navigation; const onSuccessfulWalletSignature = React.useCallback( async (result: SIWEResult) => { const searchPromise = exactSearchUserCall(result.address); dispatchActionPromise(exactSearchUserActionTypes, searchPromise); const { userInfo } = await searchPromise; if (userInfo) { - const { message, signature } = result; navigate<'ExistingEthereumAccount'>({ name: ExistingEthereumAccountRouteName, - params: { message, signature }, + params: result, }); } else { // show avatar selection screen } }, [exactSearchUserCall, dispatchActionPromise, navigate], ); let siwePanel; if (panelState !== 'closed') { siwePanel = ( ); } return ( <> Do you want to connect an Ethereum wallet? {body} {siwePanel} ); } const unboundStyles = { scrollViewContentContainer: { flexGrow: 1, }, header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, ethereumLogoContainer: { flexGrow: 1, alignItems: 'center', justifyContent: 'center', }, list: { paddingBottom: 16, }, listItem: { flexDirection: 'row', }, listItemNumber: { fontWeight: 'bold', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', }, listItemContent: { flexShrink: 1, fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', }, }; export default ConnectEthereum; diff --git a/native/account/registration/existing-ethereum-account.react.js b/native/account/registration/existing-ethereum-account.react.js index 92bcf3066..06c160bc3 100644 --- a/native/account/registration/existing-ethereum-account.react.js +++ b/native/account/registration/existing-ethereum-account.react.js @@ -1,94 +1,129 @@ // @flow import * as React from 'react'; -import { Text, Alert } from 'react-native'; +import { Text, View, Alert } from 'react-native'; import { siweAuthActionTypes } from 'lib/actions/siwe-actions.js'; +import { useENSName } from 'lib/hooks/ens-cache.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; +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 { NavigationRoute } from '../../navigation/route-names.js'; import { useSelector } from '../../redux/redux-utils.js'; import { useStyles } from '../../themes/colors.js'; import { useSIWEServerCall } from '../siwe-hooks.js'; const siweAuthLoadingStatusSelector = createLoadingStatusSelector(siweAuthActionTypes); -export type ExistingEthereumAccountParams = { - +message: string, - +signature: string, -}; +export type ExistingEthereumAccountParams = SIWEResult; type Props = { +navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>, +route: NavigationRoute<'ExistingEthereumAccount'>, }; function ExistingEthereumAccount(props: Props): React.Node { const siweServerCallParams = React.useMemo(() => { const onServerCallFailure = () => { Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], { cancelable: false, }); }; return { onFailure: onServerCallFailure }; }, []); const siweServerCall = useSIWEServerCall(siweServerCallParams); const { params } = props.route; const onProceedToLogIn = React.useCallback(() => { siweServerCall(params); }, [siweServerCall, params]); const siweAuthCallLoading = useSelector( state => siweAuthLoadingStatusSelector(state) === 'loading', ); + const { address } = params; + const walletIdentifier = useENSName(address); + const walletIdentifierTitle = + walletIdentifier === address ? 'Ethereum wallet' : 'ENS name'; + const { goBack } = props.navigation; const styles = useStyles(unboundStyles); return ( - - Account already exists for Ethereum wallet - + Account already exists for wallet You can proceed to log in with this wallet, or go back and use a different wallet. + + + {walletIdentifierTitle} + + + + {walletIdentifier} + + + ); } const unboundStyles = { header: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, body: { fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', - paddingBottom: 16, + paddingBottom: 40, + }, + walletTile: { + backgroundColor: 'panelForeground', + borderRadius: 8, + padding: 24, + alignItems: 'center', + }, + walletIdentifierTitleText: { + fontSize: 17, + color: 'panelForegroundLabel', + textAlign: 'center', + }, + walletIdentifier: { + backgroundColor: 'panelSecondaryForeground', + paddingVertical: 8, + paddingHorizontal: 24, + borderRadius: 56, + marginTop: 8, + alignItems: 'center', + }, + walletIdentifierText: { + fontSize: 15, + color: 'panelForegroundLabel', }, }; export default ExistingEthereumAccount;