Differential D7927 Diff 26907 native/account/registration/connect-ethereum.react.js

Changeset View

Standalone View

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

// @flow		// @flow

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 { 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 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 } from './registration-types.js';
import {		import {
type NavigationRoute,		type NavigationRoute,
ExistingEthereumAccountRouteName,		ExistingEthereumAccountRouteName,
UsernameSelectionRouteName,		UsernameSelectionRouteName,
} from '../../navigation/route-names.js';		} from '../../navigation/route-names.js';
		import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js';		import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js';
import SIWEPanel from '../siwe-panel.react.js';		import SIWEPanel from '../siwe-panel.react.js';

		const exactSearchUserLoadingStatusSelector = createLoadingStatusSelector(
		exactSearchUserActionTypes,
		);

export type ConnectEthereumParams = {		export type ConnectEthereumParams = {
+userSelections: {		+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,		+coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string,		+keyserverUsername: string,
},		},
};		};

type PanelState = 'closed' \| 'opening' \| 'open' \| 'closing';		type PanelState = 'closed' \| 'opening' \| 'open' \| 'closing';
▲ Show 20 Lines • Show All 107 Lines • ▼ Show 20 Lines	siwePanel = (
onClosed={onPanelClosed}		onClosed={onPanelClosed}
closing={panelState === 'closing'}		closing={panelState === 'closing'}
onSuccessfulWalletSignature={onSuccessfulWalletSignature}		onSuccessfulWalletSignature={onSuccessfulWalletSignature}
setLoading={siwePanelSetLoading}		setLoading={siwePanelSetLoading}
/>		/>
);		);
}		}

		const exactSearchUserCallLoading = useSelector(
		state => exactSearchUserLoadingStatusSelector(state) === 'loading',
		);
		const connectButtonVariant =
		exactSearchUserCallLoading \|\| panelState === 'opening'
		? 'loading'
		: 'enabled';

return (		return (
<>		<>
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer style={styles.scrollViewContentContainer}>		<RegistrationContentContainer style={styles.scrollViewContentContainer}>
<Text style={styles.header}>		<Text style={styles.header}>
Do you want to connect an Ethereum wallet?		Do you want to connect an Ethereum wallet?
</Text>		</Text>
{body}		{body}
<View style={styles.ethereumLogoContainer}>		<View style={styles.ethereumLogoContainer}>
<EthereumLogoDark />		<EthereumLogoDark />
</View>		</View>
</RegistrationContentContainer>		</RegistrationContentContainer>
<RegistrationButtonContainer>		<RegistrationButtonContainer>
<RegistrationButton		<RegistrationButton
onPress={openPanel}		onPress={openPanel}
label="Connect Ethereum wallet"		label="Connect Ethereum wallet"
variant={panelState === 'opening' ? 'loading' : 'enabled'}		variant={connectButtonVariant}
/>		/>
<RegistrationButton		<RegistrationButton
onPress={onSkip}		onPress={onSkip}
label="Do not connect"		label="Do not connect"
variant="outline"		variant="outline"
/>		/>
</RegistrationButtonContainer>		</RegistrationButtonContainer>
</RegistrationContainer>		</RegistrationContainer>
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines