Changeset View
Changeset View
Standalone 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; |