Differential D7928 Diff 26908 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 { 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,			+onClose: () => 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 { onClose } = props;			const onCloseProp = props.onClose;
	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: onClose }],			[{ text: 'OK', onPress: onCloseProp }],
	{ cancelable: false },			{ cancelable: false },
	);			);
	};			};
	return { onFailure: onServerCallFailure };			return { onFailure: onServerCallFailure };
	}, [onClose]);			}, [onCloseProp]);
	const siweServerCall = useSIWEServerCall(siweServerCallParams);			const siweServerCall = useSIWEServerCall(siweServerCallParams);

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

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

	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={onClose}
	onClosing={onClose}			onClosing={onClose}
	onSuccessfulWalletSignature={siweServerCall}			onSuccessfulWalletSignature={onSuccess}
	setLoading={setLoading}			setLoading={setLoading}
	/>			/>
	</>			</>
	);			);
	}			}

	export default FullscreenSIWEPanel;			export default FullscreenSIWEPanel;