diff --git a/native/account/qr-code-screen.react.js b/native/account/qr-code-screen.react.js index fa36bca2b..b4a736263 100644 --- a/native/account/qr-code-screen.react.js +++ b/native/account/qr-code-screen.react.js @@ -1,126 +1,150 @@ // @flow import * as React from 'react'; import { View, Text, useWindowDimensions } from 'react-native'; import QRCode from 'react-native-qrcode-svg'; import { useQRAuthContext } from 'lib/components/qr-auth-provider.react.js'; import { qrCodeLinkURL } from 'lib/facts/links.js'; import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js'; import { getConfig } from 'lib/utils/config.js'; +import { usingRestoreFlow } from 'lib/utils/services-utils.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.js'; +import LinkButton from '../components/link-button.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; +import { RestorePromptScreenRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; type QRCodeScreenProps = { +navigation: SignInNavigationProp<'QRCodeScreen'>, +route: NavigationRoute<'QRCodeScreen'>, }; -// eslint-disable-next-line no-unused-vars function QRCodeScreen(props: QRCodeScreenProps): React.Node { const { qrData, generateQRCode } = useQRAuthContext(); React.useEffect(() => { void generateQRCode(); }, [generateQRCode]); const { platform } = getConfig().platformDetails; const qrCodeURL = React.useMemo(() => { if (!qrData) { return undefined; } const deviceType = platformToIdentityDeviceType[platform]; return qrCodeLinkURL(qrData.aesKey, qrData.deviceID, deviceType); }, [platform, qrData]); const styles = useStyles(unboundStyles); + let primaryRestoreButton = null; + const goToRestoreFlow = React.useCallback(() => { + props.navigation.navigate(RestorePromptScreenRouteName); + }, [props.navigation]); + if (usingRestoreFlow) { + primaryRestoreButton = ( + + + + + + ); + } + const { width } = useWindowDimensions(); const qrCodeSize = width * 0.7; return ( Log in to Comm Open the Comm app on your logged-in phone and scan the QR code below How to find the scanner: {'\u2022 Go to '} Profile {'\u2022 Select '} Linked devices {'\u2022 Click '} Add on the top right + {primaryRestoreButton} ); } const unboundStyles = { container: { flex: 1, backgroundColor: 'panelBackground', }, heading: { fontSize: 24, color: 'panelForegroundLabel', paddingBottom: 16, }, headingSubtext: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 32, }, instructionsBox: { alignSelf: 'stretch', marginTop: 32, }, instructionsTitle: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, color: 'panelForegroundSecondaryLabel', paddingBottom: 15, }, instructionsStep: { fontFamily: 'Arial', fontSize: 15, lineHeight: 20, padding: 1, color: 'panelForegroundTertiaryLabel', }, instructionsBold: { fontWeight: 'bold', }, qrCodeContainer: { padding: 5, backgroundColor: 'panelForegroundLabel', alignSelf: 'center', }, + primaryRestoreButton: { + alignItems: 'center', + }, }; export default QRCodeScreen;