Differential D6068 Diff 20231 native/account/siwe-panel.react.js

Changeset View

Standalone View

native/account/siwe-panel.react.js

Show All 25 Lines
import { defaultLandingURLPrefix } from '../utils/url-utils';		import { defaultLandingURLPrefix } from '../utils/url-utils';
import type { LoggedOutMode } from './logged-out-modal.react';		import type { LoggedOutMode } from './logged-out-modal.react';

const commSIWE = `${defaultLandingURLPrefix}/siwe`;		const commSIWE = `${defaultLandingURLPrefix}/siwe`;

const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(		const getSIWENonceLoadingStatusSelector = createLoadingStatusSelector(
getSIWENonceActionTypes,		getSIWENonceActionTypes,
);		);
		const siweAuthLoadingStatusSelector = createLoadingStatusSelector(
		siweAuthActionTypes,
		);

type Props = {		type Props = {
+onClose: () => mixed,		+onClose: () => mixed,
+nextMode: LoggedOutMode,		+nextMode: LoggedOutMode,
};		};
function SIWEPanel(props: Props): React.Node {		function SIWEPanel(props: Props): React.Node {
const navContext = React.useContext(NavContext);		const navContext = React.useContext(NavContext);
const dispatchActionPromise = useDispatchActionPromise();		const dispatchActionPromise = useDispatchActionPromise();
const getSIWENonceCall = useServerCall(getSIWENonce);		const getSIWENonceCall = useServerCall(getSIWENonce);
const siweAuthCall = useServerCall(siweAuth);		const siweAuthCall = useServerCall(siweAuth);

const logInExtraInfo = useSelector(state =>		const logInExtraInfo = useSelector(state =>
nativeLogInExtraInfoSelector({		nativeLogInExtraInfoSelector({
redux: state,		redux: state,
navContext,		navContext,
}),		}),
);		);

const getSIWENonceCallFailed = useSelector(		const getSIWENonceCallFailed = useSelector(
state => getSIWENonceLoadingStatusSelector(state) === 'error',		state => getSIWENonceLoadingStatusSelector(state) === 'error',
);		);
		const siweAuthCallLoading = useSelector(
		state => siweAuthLoadingStatusSelector(state) === 'loading',
		);

const [nonce, setNonce] = React.useState<?string>(null);		const [nonce, setNonce] = React.useState<?string>(null);

React.useEffect(() => {		React.useEffect(() => {
(async () => {		(async () => {
dispatchActionPromise(		dispatchActionPromise(
getSIWENonceActionTypes,		getSIWENonceActionTypes,
(async () => {		(async () => {
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines	({ message, signature }) => {
undefined,		undefined,
({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),		({ calendarQuery: extraInfo.calendarQuery }: LogInStartingPayload),
);		);
},		},
[logInExtraInfo, dispatchActionPromise, siweAuthCall],		[logInExtraInfo, dispatchActionPromise, siweAuthCall],
);		);
const closeBottomSheet = bottomSheetRef.current?.close;		const closeBottomSheet = bottomSheetRef.current?.close;
const { onClose, nextMode } = props;		const { onClose, nextMode } = props;
		const disableOnClose = React.useRef(false);
const handleMessage = React.useCallback(		const handleMessage = React.useCallback(
event => {		event => {
const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data);		const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data);
if (data.type === 'siwe_success') {		if (data.type === 'siwe_success') {
const { address, message, signature } = data;		const { address, message, signature } = data;
if (address && signature) {		if (address && signature) {
		disableOnClose.current = true;
		closeBottomSheet?.();
handleSIWE({ message, signature });		handleSIWE({ message, signature });
}		}
} else if (data.type === 'siwe_closed') {		} else if (data.type === 'siwe_closed') {
onClose();		onClose();
closeBottomSheet?.();		closeBottomSheet?.();
} else if (data.type === 'walletconnect_modal_update') {		} else if (data.type === 'walletconnect_modal_update') {
setWalletConnectModalOpen(data.state === 'open');		setWalletConnectModalOpen(data.state === 'open');
}		}
Show All 33 Lines	const bottomSheetHandleIndicatorStyle = React.useMemo(
() => ({		() => ({
backgroundColor: 'white',		backgroundColor: 'white',
}),		}),
[],		[],
);		);

const onBottomSheetChange = React.useCallback(		const onBottomSheetChange = React.useCallback(
(index: number) => {		(index: number) => {
		if (disableOnClose.current) {
		disableOnClose.current = false;
		return;
		}
if (index === -1) {		if (index === -1) {
onClose();		onClose();
}		}
},		},
[onClose],		[onClose],
);		);

let bottomSheet;		let bottomSheet;
Show All 16 Lines	bottomSheet = (
/>		/>
</BottomSheet>		</BottomSheet>
);		);
}		}

let activity;		let activity;
if (getSIWENonceCallFailed) {		if (getSIWENonceCallFailed) {
activity = <Text>Oops, try again later!</Text>;		activity = <Text>Oops, try again later!</Text>;
} else if (isLoading) {		} else if (isLoading \|\| siweAuthCallLoading) {
activity = <ActivityIndicator size="large" />;		activity = <ActivityIndicator size="large" />;
}		}

const activityContainer = React.useMemo(		const activityContainer = React.useMemo(
() => ({		() => ({
flex: 1,		flex: 1,
}),		}),
[],		[],
Show All 11 Lines