Differential D7886 Diff 26706 native/account/registration/existing-ethereum-account.react.js

Changeset View

Standalone View

native/account/registration/existing-ethereum-account.react.js

// @flow		// @flow

import * as React from 'react';		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 { siweAuthActionTypes } from 'lib/actions/siwe-actions.js';
		import { useENSName } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.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 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 { NavigationRoute } from '../../navigation/route-names.js';		import type { NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';		import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import { useSIWEServerCall } from '../siwe-hooks.js';		import { useSIWEServerCall } from '../siwe-hooks.js';

const siweAuthLoadingStatusSelector =		const siweAuthLoadingStatusSelector =
createLoadingStatusSelector(siweAuthActionTypes);		createLoadingStatusSelector(siweAuthActionTypes);

export type ExistingEthereumAccountParams = {		export type ExistingEthereumAccountParams = SIWEResult;
+message: string,
+signature: string,
};

type Props = {		type Props = {
+navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>,		+navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>,		+route: NavigationRoute<'ExistingEthereumAccount'>,
};		};
function ExistingEthereumAccount(props: Props): React.Node {		function ExistingEthereumAccount(props: Props): React.Node {
const siweServerCallParams = React.useMemo(() => {		const siweServerCallParams = React.useMemo(() => {
const onServerCallFailure = () => {		const onServerCallFailure = () => {
Show All 9 Lines	function ExistingEthereumAccount(props: Props): React.Node {
const onProceedToLogIn = React.useCallback(() => {		const onProceedToLogIn = React.useCallback(() => {
siweServerCall(params);		siweServerCall(params);
}, [siweServerCall, params]);		}, [siweServerCall, params]);

const siweAuthCallLoading = useSelector(		const siweAuthCallLoading = useSelector(
state => siweAuthLoadingStatusSelector(state) === 'loading',		state => siweAuthLoadingStatusSelector(state) === 'loading',
);		);

		const { address } = params;
		const walletIdentifier = useENSName(address);
		const walletIdentifierTitle =
		walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';

const { goBack } = props.navigation;		const { goBack } = props.navigation;
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer>		<RegistrationContentContainer>
<Text style={styles.header}>		<Text style={styles.header}>Account already exists for wallet</Text>
Account already exists for Ethereum wallet
</Text>
<Text style={styles.body}>		<Text style={styles.body}>
You can proceed to log in with this wallet, or go back and use a		You can proceed to log in with this wallet, or go back and use a
different wallet.		different wallet.
</Text>		</Text>
		<View style={styles.walletTile}>
		<Text style={styles.walletIdentifierTitleText}>
		{walletIdentifierTitle}
		</Text>
		<View style={styles.walletIdentifier}>
		<Text style={styles.walletIdentifierText} numberOfLines={1}>
		{walletIdentifier}
		</Text>
		</View>
		</View>
</RegistrationContentContainer>		</RegistrationContentContainer>
<RegistrationButtonContainer>		<RegistrationButtonContainer>
<RegistrationButton		<RegistrationButton
onPress={onProceedToLogIn}		onPress={onProceedToLogIn}
label="Log in to account"		label="Log in to account"
variant={siweAuthCallLoading ? 'loading' : 'enabled'}		variant={siweAuthCallLoading ? 'loading' : 'enabled'}
/>		/>
<RegistrationButton		<RegistrationButton
Show All 11 Lines	header: {
fontSize: 24,		fontSize: 24,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
paddingBottom: 16,		paddingBottom: 16,
},		},
body: {		body: {
fontSize: 15,		fontSize: 15,
lineHeight: 20,		lineHeight: 20,
color: 'panelForegroundSecondaryLabel',		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;		export default ExistingEthereumAccount;