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 @@ -27,7 +27,10 @@ import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { useDispatch } from 'lib/utils/redux-utils.js'; -import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; +import { + usingCommServicesAccessToken, + usingRestoreFlow, +} from 'lib/utils/services-utils.js'; import { splashBackgroundURI } from './background-info.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; @@ -57,7 +60,12 @@ let initialAppLoad = true; const safeAreaEdges = ['top', 'bottom']; -export type LoggedOutMode = 'loading' | 'prompt' | 'log-in' | 'siwe'; +export type LoggedOutMode = + | 'loading' + | 'prompt' + | 'log-in' + | 'siwe' + | 'restore'; const timingConfig = { duration: 250, @@ -496,17 +504,20 @@ } const signInButtons = []; - signInButtons.push( - - Sign in - , - ); - if (__DEV__) { + if (!usingRestoreFlow) { + signInButtons.push( + + Sign in + , + ); + } + if (__DEV__ || usingRestoreFlow) { + const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)'; signInButtons.push( - Sign in (QR) + {buttonText} , ); } + let siweSection = null; + if (!usingRestoreFlow) { + siweSection = ( + <> + + + + + Sign in with Ethereum + + + + or + + + + ); + } + return ( - - - - - Sign in with Ethereum - - - - or - - + {siweSection} {signInButtons} + {}} /> + + ); + } + return ( - - Log in to Comm - - Open the Comm app on your phone and scan the QR code below - - - - How to find the scanner: - - Go to - Profile - - - Select - Linked devices - - - Click - Add - on the top right + + + Log in to Comm + + Open the Comm app on your phone and scan the QR code below + + + How to find the scanner: + + Go to + Profile + + + Select + Linked devices + + + Click + Add + on the top right + + + {primaryRestoreButton} ); } const unboundStyles = { + screenContainer: { + flex: 1, + }, container: { flex: 1, alignItems: 'center', @@ -102,6 +120,10 @@ instructionsBold: { fontWeight: 'bold', }, + primaryRestoreButton: { + alignItems: 'center', + marginBottom: 20, + }, }; export default QRCodeScreen;