Differential D7929 Diff 26819 native/account/fullscreen-siwe-panel.react.js

Changeset View

Standalone View

native/account/fullscreen-siwe-panel.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';
	import { Alert, ActivityIndicator, View } from 'react-native';			import { Alert, ActivityIndicator, View } from 'react-native';

	import type { SIWEResult } from 'lib/types/siwe-types.js';			import type { SIWEResult } from 'lib/types/siwe-types.js';

	import { useSIWEServerCall } from './siwe-hooks.js';			import { useSIWEServerCall } from './siwe-hooks.js';
	import SIWEPanel from './siwe-panel.react.js';			import SIWEPanel from './siwe-panel.react.js';

	type Props = {			type Props = {
	+onClose: () => mixed,			+goBackToPrompt: () => mixed,
	+closing: boolean,			+closing: boolean,
	};			};
	function FullscreenSIWEPanel(props: Props): React.Node {			function FullscreenSIWEPanel(props: Props): React.Node {
	const [loading, setLoading] = React.useState(true);			const [loading, setLoading] = React.useState(true);

	const activity = loading ? <ActivityIndicator size="large" /> : null;			const activity = loading ? <ActivityIndicator size="large" /> : null;

	const activityContainer = React.useMemo(			const activityContainer = React.useMemo(
	() => ({			() => ({
	flex: 1,			flex: 1,
	}),			}),
	[],			[],
	);			);

	const onCloseProp = props.onClose;			const { goBackToPrompt } = props;
	const siweServerCallParams = React.useMemo(() => {			const siweServerCallParams = React.useMemo(() => {
	const onServerCallFailure = () => {			const onServerCallFailure = () => {
	Alert.alert(			Alert.alert(
	'Unknown error',			'Unknown error',
	'Uhh... try again?',			'Uhh... try again?',
	[{ text: 'OK', onPress: onCloseProp }],			[{ text: 'OK', onPress: goBackToPrompt }],
	{ cancelable: false },			{ cancelable: false },
	);			);
	};			};
	return { onFailure: onServerCallFailure };			return { onFailure: onServerCallFailure };
	}, [onCloseProp]);			}, [goBackToPrompt]);
	const siweServerCall = useSIWEServerCall(siweServerCallParams);			const siweServerCall = useSIWEServerCall(siweServerCallParams);

	const successRef = React.useRef(false);			const successRef = React.useRef(false);
	const onSuccess = React.useCallback(			const onSuccess = React.useCallback(
	(result: SIWEResult) => {			(result: SIWEResult) => {
	successRef.current = true;			successRef.current = true;
	return siweServerCall(result);			return siweServerCall(result);
	},			},
	[siweServerCall],			[siweServerCall],
	);			);

	const onClose = React.useCallback(() => {			const ifBeforeSuccessGoBackToPrompt = React.useCallback(() => {
	if (!successRef.current) {			if (!successRef.current) {
	onCloseProp();			goBackToPrompt();
	}			}
	}, [onCloseProp]);			}, [goBackToPrompt]);

	const { closing } = props;			const { closing } = props;
	return (			return (
	<>			<>
	<View style={activityContainer}>{activity}</View>			<View style={activityContainer}>{activity}</View>
	<SIWEPanel			<SIWEPanel
	closing={closing}			closing={closing}
	onClosed={onClose}			onClosed={ifBeforeSuccessGoBackToPrompt}
	onClosing={onClose}			onClosing={ifBeforeSuccessGoBackToPrompt}
	onSuccessfulWalletSignature={onSuccess}			onSuccessfulWalletSignature={onSuccess}
	setLoading={setLoading}			setLoading={setLoading}
	/>			/>
	</>			</>
	);			);
	}			}

	export default FullscreenSIWEPanel;			export default FullscreenSIWEPanel;