diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js --- a/native/account/logged-out-modal.react.js +++ b/native/account/logged-out-modal.react.js @@ -88,7 +88,12 @@ } = Animated; /* eslint-enable import/no-named-as-default-member */ -type LoggedOutMode = 'loading' | 'prompt' | 'log-in' | 'register' | 'siwe'; +export type LoggedOutMode = + | 'loading' + | 'prompt' + | 'log-in' + | 'register' + | 'siwe'; const modeNumbers: { [LoggedOutMode]: number } = { 'loading': 0, 'prompt': 1, @@ -121,6 +126,7 @@ }; type State = { +mode: LoggedOutMode, + +nextMode: LoggedOutMode, +logInState: StateContainer, +registerState: StateContainer, }; @@ -164,8 +170,10 @@ }), ); + const initialMode = props.persistedStateLoaded ? 'prompt' : 'loading'; this.state = { - mode: props.persistedStateLoaded ? 'prompt' : 'loading', + mode: initialMode, + nextMode: initialMode, logInState: { state: { usernameInputText: null, @@ -182,9 +190,7 @@ setState: setRegisterState, }, }; - if (props.persistedStateLoaded) { - this.nextMode = 'prompt'; - } + this.nextMode = initialMode; this.contentHeight = new Value(props.dimensions.safeAreaHeight); this.modeValue = new Value(modeNumbers[this.nextMode]); @@ -202,7 +208,7 @@ setMode(newMode: LoggedOutMode) { this.nextMode = newMode; - this.guardedSetState({ mode: newMode }); + this.guardedSetState({ mode: newMode, nextMode: newMode }); this.modeValue.setValue(modeNumbers[newMode]); } @@ -446,6 +452,7 @@ goBackToPrompt = () => { this.nextMode = 'prompt'; + this.guardedSetState({ nextMode: 'prompt' }); this.keyboardHeightValue.setValue(0); this.modeValue.setValue(modeNumbers['prompt']); Keyboard.dismiss(); @@ -556,7 +563,12 @@ let siwePanel; if (this.state.mode === 'siwe') { - siwePanel = ; + siwePanel = ( + + ); } const backgroundSource = { uri: splashBackgroundURI }; diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js --- a/native/account/siwe-panel.react.js +++ b/native/account/siwe-panel.react.js @@ -23,6 +23,7 @@ import { useSelector } from '../redux/redux-utils'; import { nativeLogInExtraInfoSelector } from '../selectors/account-selectors'; import { defaultLandingURLPrefix } from '../utils/url-utils'; +import type { LoggedOutMode } from './logged-out-modal.react'; import { setNativeCredentials } from './native-credentials'; const commSIWE = `${defaultLandingURLPrefix}/siwe`; @@ -33,6 +34,7 @@ type Props = { +onClose: () => mixed, + +nextMode: LoggedOutMode, }; function SIWEPanel(props: Props): React.Node { const navContext = React.useContext(NavContext); @@ -108,7 +110,7 @@ [logInExtraInfo, dispatchActionPromise, registerAction], ); const closeBottomSheet = bottomSheetRef.current?.close; - const { onClose } = props; + const { onClose, nextMode } = props; const handleMessage = React.useCallback( event => { const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data); @@ -126,6 +128,13 @@ }, [handleSIWE, onClose, closeBottomSheet], ); + const prevNextModeRef = React.useRef(); + React.useEffect(() => { + if (nextMode === 'prompt' && prevNextModeRef.current === 'siwe') { + closeBottomSheet?.(); + } + prevNextModeRef.current = nextMode; + }, [nextMode, closeBottomSheet]); const source = React.useMemo( () => ({