[native] Handle loading state when joining a community
ClosedPublic
Actions

// @flow		// @flow

import type {		import type {
StackNavigationEventMap,		StackNavigationEventMap,
StackNavigationState,		StackNavigationState,
StackOptions,		StackOptions,
} from '@react-navigation/core';		} from '@react-navigation/core';
import invariant from 'invariant';		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 { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';		import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js';		import { useENSName } from 'lib/hooks/ens-cache.js';
import { useWalletLogIn } from 'lib/hooks/login-hooks.js';		import { useWalletLogIn } from 'lib/hooks/login-hooks.js';
		import type { SIWEBackupData } from 'lib/types/backup-types.js';
import type { SIWEResult } from 'lib/types/siwe-types.js';		import type { SIWEResult } from 'lib/types/siwe-types.js';
import { getMessageForException } from 'lib/utils/errors.js';		import { getMessageForException } from 'lib/utils/errors.js';
import { useDispatch } from 'lib/utils/redux-utils.js';		import { useDispatch } from 'lib/utils/redux-utils.js';
import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js';		import {
		usingCommServicesAccessToken,
		usingRestoreFlow,
		} from 'lib/utils/services-utils.js';

import type { AuthNavigationProp } from './auth-navigator.react.js';		import type { AuthNavigationProp } from './auth-navigator.react.js';
import { RegistrationContext } from './registration-context.js';		import { RegistrationContext } from './registration-context.js';
		import LinkButton from '../../components/link-button.react.js';
import PrimaryButton from '../../components/primary-button.react.js';		import PrimaryButton from '../../components/primary-button.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';		import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type {		import {
NavigationRoute,		type NavigationRoute,
ScreenParamList,		type ScreenParamList,
		QRCodeScreenRouteName,
		RestoreSIWEBackupRouteName,
} from '../../navigation/route-names.js';		} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import {		import {
unknownErrorAlertDetails,		unknownErrorAlertDetails,
appOutOfDateAlertDetails,		appOutOfDateAlertDetails,
} from '../../utils/alert-messages.js';		} from '../../utils/alert-messages.js';
import Alert from '../../utils/alert.js';		import Alert from '../../utils/alert.js';
import AuthButtonContainer from '../auth-components/auth-button-container.react.js';		import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
import AuthContainer from '../auth-components/auth-container.react.js';		import AuthContainer from '../auth-components/auth-container.react.js';
import AuthContentContainer from '../auth-components/auth-content-container.react.js';		import AuthContentContainer from '../auth-components/auth-content-container.react.js';
import { useLegacySIWEServerCall } from '../siwe-hooks.js';		import { useLegacySIWEServerCall } from '../siwe-hooks.js';

export type ExistingEthereumAccountParams = SIWEResult;		export type ExistingEthereumAccountParams = $ReadOnly<{
		...SIWEResult,
		+backupData: ?SIWEBackupData,
		}>;

type Props = {		type Props = {
+navigation: AuthNavigationProp<'ExistingEthereumAccount'>,		+navigation: AuthNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>,		+route: NavigationRoute<'ExistingEthereumAccount'>,
};		};
function ExistingEthereumAccount(props: Props): React.Node {		function ExistingEthereumAccount(props: Props): React.Node {
const legacySiweServerCall = useLegacySIWEServerCall();		const legacySiweServerCall = useLegacySIWEServerCall();
const walletLogIn = useWalletLogIn();		const walletLogIn = useWalletLogIn();

const [logInPending, setLogInPending] = React.useState(false);		const [logInPending, setLogInPending] = React.useState(false);

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

const { params } = props.route;		const { params } = props.route;
		const { address, message, signature, backupData } = params;
const dispatch = useDispatch();		const dispatch = useDispatch();
const { navigation } = props;		const { navigation } = props;
const goBackToHome = navigation.getParent<		const goBackToHome = navigation.getParent<
ScreenParamList,		ScreenParamList,
'Auth',		'Auth',
StackNavigationState,		StackNavigationState,
StackOptions,		StackOptions,
StackNavigationEventMap,		StackNavigationEventMap,
RootNavigationProp<'Auth'>,		RootNavigationProp<'Auth'>,
>()?.goBack;		>()?.goBack;

const onProceedToLogIn = React.useCallback(async () => {		const onProceedToLogIn = React.useCallback(async () => {
if (logInPending) {		if (logInPending) {
return;		return;
}		}
setLogInPending(true);		setLogInPending(true);
try {		try {
if (usingCommServicesAccessToken) {		if (usingCommServicesAccessToken) {
await walletLogIn(params.address, params.message, params.signature);		await walletLogIn(params.address, params.message, params.signature);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	const onProceedToLogIn = React.useCallback(async () => {
legacySiweServerCall,		legacySiweServerCall,
walletLogIn,		walletLogIn,
params,		params,
dispatch,		dispatch,
goBackToHome,		goBackToHome,
setCachedSelections,		setCachedSelections,
]);		]);

const { address } = params;		const useLegacyFlow = !backupData \|\| !usingRestoreFlow;

		const openRestoreFlow = React.useCallback(() => {
		if (useLegacyFlow \|\| !backupData) {
		return;
		}
		const {
		siweBackupMsgNonce,
		siweBackupMsgIssuedAt,
		siweBackupMsgStatement,
		} = backupData;
		navigation.navigate(RestoreSIWEBackupRouteName, {
		siweNonce: siweBackupMsgNonce,
		siweStatement: siweBackupMsgStatement,
		siweIssuedAt: siweBackupMsgIssuedAt,
		userIdentifier: address,
		signature,
		message,
		});
		}, [address, backupData, message, navigation, signature, useLegacyFlow]);

		const openQRScreen = React.useCallback(() => {
		navigation.navigate(QRCodeScreenRouteName);
		}, [navigation]);

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

const { goBack } = navigation;		const { goBack } = navigation;
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

		let newFlowSection = null;
		if (!useLegacyFlow) {
		newFlowSection = (
		<>
		<Text style={styles.section}>
		If you still have access to your logged-in device, you can use it to
		log in by scanning the QR code.
		</Text>
		<Text style={styles.section}>
		If you’ve lost access to your logged-in device, you can try recovering
		your Comm account. Note that after completing the recovery flow, you
		will be logged out from all of your other devices.
		</Text>
		<View style={styles.linkButton}>
		<LinkButton
		text="Not logged in on another phone?"
		onPress={openRestoreFlow}
		/>
		</View>
		</>
		);
		}

		const primaryAction = React.useMemo(() => {
		if (useLegacyFlow) {
		return (
		<PrimaryButton
		onPress={onProceedToLogIn}
		label="Log in to account"
		variant={logInPending ? 'loading' : 'enabled'}
		/>
		);
		}
		return (
		<PrimaryButton
		onPress={openQRScreen}
		label="Log in via QR code"
		variant="enabled"
		/>
		);
		}, [logInPending, onProceedToLogIn, openQRScreen, useLegacyFlow]);

return (		return (
<AuthContainer>		<AuthContainer>
<AuthContentContainer>		<AuthContentContainer>
<Text style={styles.header}>Account already exists for wallet</Text>		<Text style={styles.header}>Account already exists for 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}>		<View style={styles.walletTile}>
<Text style={styles.walletIdentifierTitleText}>		<Text style={styles.walletIdentifierTitleText}>
{walletIdentifierTitle}		{walletIdentifierTitle}
</Text>		</Text>
<View style={styles.walletIdentifier}>		<View style={styles.walletIdentifier}>
<Text style={styles.walletIdentifierText} numberOfLines={1}>		<Text style={styles.walletIdentifierText} numberOfLines={1}>
{walletIdentifier}		{walletIdentifier}
</Text>		</Text>
</View>		</View>
</View>		</View>
		{newFlowSection}
</AuthContentContainer>		</AuthContentContainer>
<AuthButtonContainer>		<AuthButtonContainer>
<PrimaryButton		{primaryAction}
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
<PrimaryButton		<PrimaryButton
onPress={goBack}		onPress={goBack}
label="Use a different wallet"		label="Use a different wallet"
variant="outline"		variant="outline"
/>		/>
</AuthButtonContainer>		</AuthButtonContainer>
</AuthContainer>		</AuthContainer>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
header: {		header: {
fontSize: 24,		fontSize: 24,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
paddingBottom: 16,		paddingBottom: 16,
},		},
body: {		body: {
fontFamily: 'Arial',		fontFamily: 'Arial',
fontSize: 15,		fontSize: 15,
lineHeight: 20,		lineHeight: 20,
color: 'panelForegroundSecondaryLabel',		color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
},		},
walletTile: {		walletTile: {
backgroundColor: 'panelForeground',		backgroundColor: 'panelForeground',
borderRadius: 8,		borderRadius: 8,
padding: 24,		padding: 24,
alignItems: 'center',		alignItems: 'center',
		marginTop: 40,
		marginBottom: 40,
},		},
walletIdentifierTitleText: {		walletIdentifierTitleText: {
fontSize: 17,		fontSize: 17,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
textAlign: 'center',		textAlign: 'center',
},		},
walletIdentifier: {		walletIdentifier: {
backgroundColor: 'panelSecondaryForeground',		backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8,		paddingVertical: 8,
paddingHorizontal: 24,		paddingHorizontal: 24,
borderRadius: 56,		borderRadius: 56,
marginTop: 8,		marginTop: 8,
alignItems: 'center',		alignItems: 'center',
},		},
walletIdentifierText: {		walletIdentifierText: {
fontSize: 15,		fontSize: 15,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
},		},
		section: {
		fontFamily: 'Arial',
		fontSize: 15,
		lineHeight: 20,
		color: 'panelForegroundSecondaryLabel',
		paddingBottom: 16,
		},
		linkButton: {
		alignItems: 'center',
		},
};		};

export default ExistingEthereumAccount;		export default ExistingEthereumAccount;

[native] Handle loading state when joining a communityClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 25778

native/navigation/invite-link-modal.react.js

[native] Handle loading state when joining a community
ClosedPublic
Actions

Revision Contents
Changeset List