Page MenuHomePhabricator
Differential D14090

[native] Navigate to a SIWE backup screen
ClosedPublic
Actions

Authored by tomek on Dec 6 2024, 9:37 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 16, 3:34 PM
Unknown Object (File)
Sat, Apr 5, 4:43 PM
Unknown Object (File)
Mar 6 2025, 1:59 PM
Unknown Object (File)
Mar 6 2025, 1:59 PM
Unknown Object (File)
Mar 3 2025, 6:22 AM
Unknown Object (File)
Feb 6 2025, 6:12 PM
Unknown Object (File)
Feb 6 2025, 6:10 PM
Unknown Object (File)
Feb 6 2025, 6:10 PM
View All 83 Files
Subscribers
ashoat

Details

Reviewers
kamil
bartek
Commits
rCOMM609f9084992c: [native] Navigate to a SIWE backup screen
Summary

After successful login a user should be redirected to sign a backup

https://linear.app/comm/issue/ENG-8203/implement-navigation-flow-for-new-siwe-log-in

Depends on D14164

Test Plan

Connect the wallet using restore flow. The user should get navigated to the new screen.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Dec 6 2024, 9:37 AM
Herald added a subscriber: ashoat. · View Herald TranscriptDec 6 2024, 9:37 AM
Harbormaster completed remote builds in B32952: Diff 46246.Dec 6 2024, 9:55 AM
tomek requested review of this revision.Dec 6 2024, 9:55 AM
tomek updated this revision to Diff 46289.Dec 10 2024, 6:55 AM

Rebase

Harbormaster completed remote builds in B32983: Diff 46289.Dec 10 2024, 7:22 AM
tomek edited the summary of this revision. (Show Details)Dec 17 2024, 7:30 AM
tomek edited the test plan for this revision. (Show Details)
tomek added a parent revision: D14164: [native] Update the SIWE backup restore screen.
tomek removed a parent revision: D14085: [native] Render SIWE restore panel.
tomek updated this revision to Diff 46557.Dec 17 2024, 7:32 AM

Rebase and update the approach

tomek edited the summary of this revision. (Show Details)Dec 17 2024, 7:33 AM
tomek added a child revision: D14165: [native] Perform the backup restoration.Dec 17 2024, 7:36 AM
Harbormaster completed remote builds in B33166: Diff 46557.Dec 17 2024, 7:58 AM
tomek updated this revision to Diff 46577.Dec 19 2024, 3:28 AM

Remove a button from the backup menu

kamil accepted this revision.Dec 19 2024, 3:28 AM
kamil added inline comments.
native/account/restore-prompt-screen.react.js
82 ↗(On Diff #46557)

nit: we can remove useCallback now

104 ↗(On Diff #46557)

This is something we need to update as part of removing social proof refresh during restore but for now looks good

native/profile/backup-menu.react.js
229 ↗(On Diff #46557)

This will be removed I think

This revision is now accepted and ready to land.Dec 19 2024, 3:28 AM
tomek mentioned this in D14164: [native] Update the SIWE backup restore screen.Dec 19 2024, 3:30 AM
tomek updated this revision to Diff 46578.Dec 19 2024, 3:32 AM

Shorthand

Harbormaster completed remote builds in B33181: Diff 46577.Dec 19 2024, 3:46 AM
Harbormaster completed remote builds in B33182: Diff 46578.Dec 19 2024, 3:48 AM
Closed by commit rCOMM609f9084992c: [native] Navigate to a SIWE backup screen (authored by tomek). · Explain WhyDec 19 2024, 6:32 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM609f9084992c: [native] Navigate to a SIWE backup screen.

Revision Contents
Changeset List

Diff 46586

View Options

native/account/restore-backup-screen.react.js

Show All 21 Lines
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js';
import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js'; import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js';
import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js'; import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.js';
import { useDispatch } from 'lib/utils/redux-utils.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 { splashBackgroundURI } from './background-info.js';
import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
import LogInPanel from './log-in-panel.react.js'; import LogInPanel from './log-in-panel.react.js';
import type { LogInState } 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 LoggedOutStaffInfo from './logged-out-staff-info.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js'; import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
▲ Show 20 Lines • Show All 452 Lines • ▼ Show 20 Lines const buttonsViewStyle = React.useMemo(
[styles.buttonContainer, buttonsViewOpacity], [styles.buttonContainer, buttonsViewOpacity],
); );
const buttons = React.useMemo(() => { const buttons = React.useMemo(() => {
if (mode.curMode !== 'prompt') { if (mode.curMode !== 'prompt') {
return null; return null;
} }
const signInButtons = []; const signInButtons = [];
if (!usingRestoreFlow) {
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressLogIn} onPress={onPressLogIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="login-form" key="login-form"
> >
<Text style={classicAuthButtonTextStyle}>Sign in</Text> <Text style={classicAuthButtonTextStyle}>Sign in</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
if (__DEV__) { }
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressQRCodeSignIn} onPress={onPressQRCodeSignIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="qr-code-login" key="qr-code-login"
> >
<Text style={classicAuthButtonTextStyle}>Sign in (QR)</Text> <Text style={classicAuthButtonTextStyle}>{buttonText}</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
} }
return ( let siweSection = null;
<AnimatedView style={buttonsViewStyle}> if (!usingRestoreFlow) {
<LoggedOutStaffInfo /> siweSection = (
<>
<TouchableOpacity <TouchableOpacity
onPress={onPressSIWE} onPress={onPressSIWE}
style={siweAuthButtonStyle} style={siweAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
> >
<View style={styles.siweIcon}> <View style={styles.siweIcon}>
<EthereumLogo /> <EthereumLogo />
</View> </View>
<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text> <Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.siweOr}> <View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} /> <View style={styles.siweOrLeftHR} />
<Text style={styles.siweOrText}>or</Text> <Text style={styles.siweOrText}>or</Text>
<View style={styles.siweOrRightHR} /> <View style={styles.siweOrRightHR} />
</View> </View>
</>
);
}
return (
<AnimatedView style={buttonsViewStyle}>
<LoggedOutStaffInfo />
{siweSection}
<View style={styles.signInButtons}>{signInButtons}</View> <View style={styles.signInButtons}>{signInButtons}</View>
<View style={styles.registerButtons}> <View style={styles.registerButtons}>
<TouchableOpacity <TouchableOpacity
onPress={onPressNewRegister} onPress={onPressNewRegister}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="new" key="new"
> >
▲ Show 20 Lines • Show All 110 Lines • Show Last 20 Lines
View Options

native/account/restore-password-account-screen.react.js

Show All 21 Lines
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js';
import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js'; import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js';
import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js'; import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.js';
import { useDispatch } from 'lib/utils/redux-utils.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 { splashBackgroundURI } from './background-info.js';
import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
import LogInPanel from './log-in-panel.react.js'; import LogInPanel from './log-in-panel.react.js';
import type { LogInState } 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 LoggedOutStaffInfo from './logged-out-staff-info.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js'; import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
▲ Show 20 Lines • Show All 452 Lines • ▼ Show 20 Lines const buttonsViewStyle = React.useMemo(
[styles.buttonContainer, buttonsViewOpacity], [styles.buttonContainer, buttonsViewOpacity],
); );
const buttons = React.useMemo(() => { const buttons = React.useMemo(() => {
if (mode.curMode !== 'prompt') { if (mode.curMode !== 'prompt') {
return null; return null;
} }
const signInButtons = []; const signInButtons = [];
if (!usingRestoreFlow) {
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressLogIn} onPress={onPressLogIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="login-form" key="login-form"
> >
<Text style={classicAuthButtonTextStyle}>Sign in</Text> <Text style={classicAuthButtonTextStyle}>Sign in</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
if (__DEV__) { }
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressQRCodeSignIn} onPress={onPressQRCodeSignIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="qr-code-login" key="qr-code-login"
> >
<Text style={classicAuthButtonTextStyle}>Sign in (QR)</Text> <Text style={classicAuthButtonTextStyle}>{buttonText}</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
} }
return ( let siweSection = null;
<AnimatedView style={buttonsViewStyle}> if (!usingRestoreFlow) {
<LoggedOutStaffInfo /> siweSection = (
<>
<TouchableOpacity <TouchableOpacity
onPress={onPressSIWE} onPress={onPressSIWE}
style={siweAuthButtonStyle} style={siweAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
> >
<View style={styles.siweIcon}> <View style={styles.siweIcon}>
<EthereumLogo /> <EthereumLogo />
</View> </View>
<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text> <Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.siweOr}> <View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} /> <View style={styles.siweOrLeftHR} />
<Text style={styles.siweOrText}>or</Text> <Text style={styles.siweOrText}>or</Text>
<View style={styles.siweOrRightHR} /> <View style={styles.siweOrRightHR} />
</View> </View>
</>
);
}
return (
<AnimatedView style={buttonsViewStyle}>
<LoggedOutStaffInfo />
{siweSection}
<View style={styles.signInButtons}>{signInButtons}</View> <View style={styles.signInButtons}>{signInButtons}</View>
<View style={styles.registerButtons}> <View style={styles.registerButtons}>
<TouchableOpacity <TouchableOpacity
onPress={onPressNewRegister} onPress={onPressNewRegister}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="new" key="new"
> >
▲ Show 20 Lines • Show All 110 Lines • Show Last 20 Lines
View Options

native/account/restore-prompt-screen.react.js

Show All 21 Lines
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js';
import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js'; import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js';
import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js'; import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.js';
import { useDispatch } from 'lib/utils/redux-utils.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 { splashBackgroundURI } from './background-info.js';
import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
import LogInPanel from './log-in-panel.react.js'; import LogInPanel from './log-in-panel.react.js';
import type { LogInState } 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 LoggedOutStaffInfo from './logged-out-staff-info.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js'; import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
▲ Show 20 Lines • Show All 452 Lines • ▼ Show 20 Lines const buttonsViewStyle = React.useMemo(
[styles.buttonContainer, buttonsViewOpacity], [styles.buttonContainer, buttonsViewOpacity],
); );
const buttons = React.useMemo(() => { const buttons = React.useMemo(() => {
if (mode.curMode !== 'prompt') { if (mode.curMode !== 'prompt') {
return null; return null;
} }
const signInButtons = []; const signInButtons = [];
if (!usingRestoreFlow) {
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressLogIn} onPress={onPressLogIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="login-form" key="login-form"
> >
<Text style={classicAuthButtonTextStyle}>Sign in</Text> <Text style={classicAuthButtonTextStyle}>Sign in</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
if (__DEV__) { }
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressQRCodeSignIn} onPress={onPressQRCodeSignIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="qr-code-login" key="qr-code-login"
> >
<Text style={classicAuthButtonTextStyle}>Sign in (QR)</Text> <Text style={classicAuthButtonTextStyle}>{buttonText}</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
} }
return ( let siweSection = null;
<AnimatedView style={buttonsViewStyle}> if (!usingRestoreFlow) {
<LoggedOutStaffInfo /> siweSection = (
<>
<TouchableOpacity <TouchableOpacity
onPress={onPressSIWE} onPress={onPressSIWE}
style={siweAuthButtonStyle} style={siweAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
> >
<View style={styles.siweIcon}> <View style={styles.siweIcon}>
<EthereumLogo /> <EthereumLogo />
</View> </View>
<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text> <Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.siweOr}> <View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} /> <View style={styles.siweOrLeftHR} />
<Text style={styles.siweOrText}>or</Text> <Text style={styles.siweOrText}>or</Text>
<View style={styles.siweOrRightHR} /> <View style={styles.siweOrRightHR} />
</View> </View>
</>
);
}
return (
<AnimatedView style={buttonsViewStyle}>
<LoggedOutStaffInfo />
{siweSection}
<View style={styles.signInButtons}>{signInButtons}</View> <View style={styles.signInButtons}>{signInButtons}</View>
<View style={styles.registerButtons}> <View style={styles.registerButtons}>
<TouchableOpacity <TouchableOpacity
onPress={onPressNewRegister} onPress={onPressNewRegister}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="new" key="new"
> >
▲ Show 20 Lines • Show All 110 Lines • Show Last 20 Lines
View Options

native/backup/restore-siwe-backup.react.js

Show All 21 Lines
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js'; import { useIsLoggedInToAuthoritativeKeyserver } from 'lib/hooks/account-hooks.js';
import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js'; import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js';
import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js'; import { usePersistedStateLoaded } from 'lib/selectors/app-state-selectors.js';
import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js';
import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.js';
import { useDispatch } from 'lib/utils/redux-utils.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 { splashBackgroundURI } from './background-info.js';
import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';
import LogInPanel from './log-in-panel.react.js'; import LogInPanel from './log-in-panel.react.js';
import type { LogInState } 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 LoggedOutStaffInfo from './logged-out-staff-info.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js'; import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
▲ Show 20 Lines • Show All 452 Lines • ▼ Show 20 Lines const buttonsViewStyle = React.useMemo(
[styles.buttonContainer, buttonsViewOpacity], [styles.buttonContainer, buttonsViewOpacity],
); );
const buttons = React.useMemo(() => { const buttons = React.useMemo(() => {
if (mode.curMode !== 'prompt') { if (mode.curMode !== 'prompt') {
return null; return null;
} }
const signInButtons = []; const signInButtons = [];
if (!usingRestoreFlow) {
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressLogIn} onPress={onPressLogIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="login-form" key="login-form"
> >
<Text style={classicAuthButtonTextStyle}>Sign in</Text> <Text style={classicAuthButtonTextStyle}>Sign in</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
if (__DEV__) { }
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push( signInButtons.push(
<TouchableOpacity <TouchableOpacity
onPress={onPressQRCodeSignIn} onPress={onPressQRCodeSignIn}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="qr-code-login" key="qr-code-login"
> >
<Text style={classicAuthButtonTextStyle}>Sign in (QR)</Text> <Text style={classicAuthButtonTextStyle}>{buttonText}</Text>
</TouchableOpacity>, </TouchableOpacity>,
); );
} }
return ( let siweSection = null;
<AnimatedView style={buttonsViewStyle}> if (!usingRestoreFlow) {
<LoggedOutStaffInfo /> siweSection = (
<>
<TouchableOpacity <TouchableOpacity
onPress={onPressSIWE} onPress={onPressSIWE}
style={siweAuthButtonStyle} style={siweAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
> >
<View style={styles.siweIcon}> <View style={styles.siweIcon}>
<EthereumLogo /> <EthereumLogo />
</View> </View>
<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text> <Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.siweOr}> <View style={styles.siweOr}>
<View style={styles.siweOrLeftHR} /> <View style={styles.siweOrLeftHR} />
<Text style={styles.siweOrText}>or</Text> <Text style={styles.siweOrText}>or</Text>
<View style={styles.siweOrRightHR} /> <View style={styles.siweOrRightHR} />
</View> </View>
</>
);
}
return (
<AnimatedView style={buttonsViewStyle}>
<LoggedOutStaffInfo />
{siweSection}
<View style={styles.signInButtons}>{signInButtons}</View> <View style={styles.signInButtons}>{signInButtons}</View>
<View style={styles.registerButtons}> <View style={styles.registerButtons}>
<TouchableOpacity <TouchableOpacity
onPress={onPressNewRegister} onPress={onPressNewRegister}
style={classicAuthButtonStyle} style={classicAuthButtonStyle}
activeOpacity={0.6} activeOpacity={0.6}
key="new" key="new"
> >
▲ Show 20 Lines • Show All 110 Lines • Show Last 20 Lines
View Options

native/profile/backup-menu.react.js

Loading...