diff --git a/native/account/fullscreen-siwe-panel.react.js b/native/account/fullscreen-siwe-panel.react.js new file mode 100644 --- /dev/null +++ b/native/account/fullscreen-siwe-panel.react.js @@ -0,0 +1,32 @@ +// @flow + +import * as React from 'react'; +import { ActivityIndicator, View } from 'react-native'; + +import SIWEPanel from './siwe-panel.react.js'; + +type Props = { + +onClose: () => mixed, + +closing: boolean, +}; +function FullscreenSIWEPanel(props: Props): React.Node { + const [loading, setLoading] = React.useState(true); + + const activity = loading ? : null; + + const activityContainer = React.useMemo( + () => ({ + flex: 1, + }), + [], + ); + + return ( + <> + {activity} + + + ); +} + +export default FullscreenSIWEPanel; 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 @@ -23,12 +23,12 @@ import { fetchNewCookieFromNativeCredentials } from 'lib/utils/action-utils.js'; import { splashBackgroundURI } from './background-info.js'; +import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import LogInPanel from './log-in-panel.react.js'; import type { LogInState } from './log-in-panel.react.js'; import LoggedOutStaffInfo from './logged-out-staff-info.react.js'; import RegisterPanel from './register-panel.react.js'; import type { RegisterState } from './register-panel.react.js'; -import SIWEPanel from './siwe-panel.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import ConnectedStatusBar from '../connected-status-bar.react.js'; import { @@ -597,7 +597,7 @@ let siwePanel; if (this.state.mode === 'siwe') { siwePanel = ( - 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 @@ -2,7 +2,7 @@ import BottomSheet from '@gorhom/bottom-sheet'; import * as React from 'react'; -import { ActivityIndicator, View, Alert } from 'react-native'; +import { Alert } from 'react-native'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import WebView from 'react-native-webview'; @@ -37,6 +37,7 @@ type Props = { +onClose: () => mixed, +closing: boolean, + +setLoading: boolean => mixed, }; function SIWEPanel(props: Props): React.Node { const navContext = React.useContext(NavContext); @@ -243,24 +244,13 @@ ); } - let activity; - if (!getSIWENonceCallFailed && (isLoading || siweAuthCallLoading)) { - activity = ; - } - - const activityContainer = React.useMemo( - () => ({ - flex: 1, - }), - [], - ); + const setLoadingProp = props.setLoading; + const loading = !getSIWENonceCallFailed && (isLoading || siweAuthCallLoading); + React.useEffect(() => { + setLoadingProp(loading); + }, [setLoadingProp, loading]); - return ( - <> - {activity} - {bottomSheet} - - ); + return bottomSheet; } export default SIWEPanel;