diff --git a/native/account/restore-prompt-screen.react.js b/native/account/restore-prompt-screen.react.js --- a/native/account/restore-prompt-screen.react.js +++ b/native/account/restore-prompt-screen.react.js @@ -2,13 +2,15 @@ import MaterialIcon from '@expo/vector-icons/MaterialCommunityIcons.js'; import * as React from 'react'; -import { Text, View } from 'react-native'; +import { ActivityIndicator, Text, View } from 'react-native'; import PromptButton from './prompt-button.react.js'; import RegistrationButtonContainer from './registration/registration-button-container.react.js'; import RegistrationContainer from './registration/registration-container.react.js'; import RegistrationContentContainer from './registration/registration-content-container.react.js'; import type { SignInNavigationProp } from './sign-in-navigator.react'; +import { useSIWEPanelState } from './siwe-hooks.js'; +import SIWEPanel from './siwe-panel.react.js'; import type { NavigationRoute } from '../navigation/route-names'; import { RestorePasswordAccountScreenRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; @@ -25,43 +27,85 @@ props.navigation.navigate(RestorePasswordAccountScreenRouteName); }, [props.navigation]); + const siweSignatureRequestData = React.useMemo( + () => ({ + messageType: 'msg_auth', + }), + [], + ); + + const { + panelState, + openPanel, + onPanelClosed, + onPanelClosing, + siwePanelSetLoading, + } = useSIWEPanelState(); + let siwePanel; + if (panelState !== 'closed') { + siwePanel = ( + {}} + siweSignatureRequestData={siweSignatureRequestData} + setLoading={siwePanelSetLoading} + /> + ); + } + + let activityIndicator = null; + if (panelState === 'opening') { + activityIndicator = ( + + + + + ); + } + return ( - - - Restore account - - If you’ve lost access to your primary device, you can try recovering - your Comm account. - - - To proceed, select the same login method that you used during - registration. - - - Note that after completing the recovery flow, you will be logged out - from all of your other devices. - - - - - - - - {}} - variant="siwe" - /> - - - - - - + <> + + + Restore account + + If you’ve lost access to your primary device, you can try recovering + your Comm account. + + + To proceed, select the same login method that you used during + registration. + + + Note that after completing the recovery flow, you will be logged out + from all of your other devices. + + + + + + + + + + + + + + + {activityIndicator} + {siwePanel} + ); } @@ -89,6 +133,22 @@ scrollViewContentContainer: { flexGrow: 1, }, + loadingContainer: { + position: 'absolute', + top: 0, + bottom: 0, + left: 0, + right: 0, + alignItems: 'center', + justifyContent: 'center', + }, + backdrop: { + backgroundColor: 'black', + opacity: 0.6, + width: '100%', + height: '100%', + position: 'absolute', + }, }; export default RestorePromptScreen;