Differential D8154 Diff 27619 native/account/registration/connect-ethereum.react.js

Changeset View

Standalone View

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

// @flow		// @flow

		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { Text, View } from 'react-native';		import { Text, View } from 'react-native';

import {		import {
exactSearchUser,		exactSearchUser,
exactSearchUserActionTypes,		exactSearchUserActionTypes,
} from 'lib/actions/user-actions.js';		} from 'lib/actions/user-actions.js';
import { ENSCacheContext } from 'lib/components/ens-cache-provider.react.js';		import { ENSCacheContext } from 'lib/components/ens-cache-provider.react.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 type { SIWEResult } from 'lib/types/siwe-types.js';
import {		import {
useServerCall,		useServerCall,
useDispatchActionPromise,		useDispatchActionPromise,
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.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 { RegistrationContext } from './registration-context.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';		import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { CoolOrNerdMode } from './registration-types.js';		import {
		type CoolOrNerdMode,
		ensAvatarSelection,
		} from './registration-types.js';
import {		import {
type NavigationRoute,		type NavigationRoute,
ExistingEthereumAccountRouteName,		ExistingEthereumAccountRouteName,
UsernameSelectionRouteName,		UsernameSelectionRouteName,
AvatarSelectionRouteName,		AvatarSelectionRouteName,
} from '../../navigation/route-names.js';		} 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';
Show All 15 Lines

type Props = {		type Props = {
+navigation: RegistrationNavigationProp<'ConnectEthereum'>,		+navigation: RegistrationNavigationProp<'ConnectEthereum'>,
+route: NavigationRoute<'ConnectEthereum'>,		+route: NavigationRoute<'ConnectEthereum'>,
};		};
function ConnectEthereum(props: Props): React.Node {		function ConnectEthereum(props: Props): React.Node {
const { params } = props.route;		const { params } = props.route;
const { userSelections } = props.route.params;		const { userSelections } = props.route.params;

		const registrationContext = React.useContext(RegistrationContext);
		invariant(registrationContext, 'registrationContext should be set');
		const { setCachedSelections } = registrationContext;

const isNerdMode = userSelections.coolOrNerdMode === 'nerd';		const isNerdMode = userSelections.coolOrNerdMode === 'nerd';
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

let body;		let body;
if (!isNerdMode) {		if (!isNerdMode) {
body = (		body = (
<Text style={styles.body}>		<Text style={styles.body}>
Connecting your Ethereum wallet allows you to use your ENS name and		Connecting your Ethereum wallet allows you to use your ENS name and
▲ Show 20 Lines • Show All 89 Lines • ▼ Show 20 Lines	async (result: SIWEResult) => {
name: ExistingEthereumAccountRouteName,		name: ExistingEthereumAccountRouteName,
params: result,		params: result,
});		});
return;		return;
}		}

const avatarURI = await avatarURIPromise;		const avatarURI = await avatarURIPromise;

const newUserSelections = {		const ethereumAccount = {
...userSelections,
accountSelection: {
accountType: 'ethereum',		accountType: 'ethereum',
...result,		...result,
avatarURI,		avatarURI,
},		};

		setCachedSelections(oldUserSelections => {
		const base = {
		...oldUserSelections,
		ethereumAccount,
		};
		if (base.avatarData \|\| !avatarURI) {
		return base;
		}
		return {
		...base,
		avatarData: ensAvatarSelection,
		};
		});

		const newUserSelections = {
		...userSelections,
		accountSelection: ethereumAccount,
};		};
navigate<'AvatarSelection'>({		navigate<'AvatarSelection'>({
name: AvatarSelectionRouteName,		name: AvatarSelectionRouteName,
params: { userSelections: newUserSelections },		params: { userSelections: newUserSelections },
});		});
},		},
[		[
userSelections,		userSelections,
exactSearchUserCall,		exactSearchUserCall,
dispatchActionPromise,		dispatchActionPromise,
		setCachedSelections,
navigate,		navigate,
ensCache,		ensCache,
],		],
);		);

let siwePanel;		let siwePanel;
if (panelState !== 'closed') {		if (panelState !== 'closed') {
siwePanel = (		siwePanel = (
▲ Show 20 Lines • Show All 92 Lines • Show Last 20 Lines