Page MenuHomePhabricator
Differential D14115

[native] implement screen when connecting secondary device
ClosedPublic
Actions

Authored by kamil on Dec 11 2024, 8:16 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sat, Mar 15, 12:21 AM
Unknown Object (File)
Sat, Mar 15, 12:21 AM
Unknown Object (File)
Sat, Mar 15, 12:20 AM
Unknown Object (File)
Feb 12 2025, 6:24 PM
Unknown Object (File)
Feb 12 2025, 6:24 PM
Unknown Object (File)
Feb 12 2025, 6:23 PM
Unknown Object (File)
Feb 6 2025, 6:21 PM
Unknown Object (File)
Feb 6 2025, 6:21 PM
View All 50 Files
Subscribers
None

Details

Reviewers
ashoat
tomek
Commits
rCOMM9d05d9a88292: [native] implement screen when connecting secondary device
Summary

ENG-9959.

Copy is taken from existing Alert.

This diff is just UI, navigating to it and logic is implemented later in the stack.

In ENG-9968 there is an example of how the flow looks like.

IMG_4787 (1).PNG (1×828 px, 51 KB)

Depends on D14114

Test Plan

Navigate to screen

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

kamil created this revision.Dec 11 2024, 8:16 AM
kamil held this revision as a draft.
kamil added a child revision: D14116: [native] navigate to proper screen after scanning QR code.
kamil edited the summary of this revision. (Show Details)Dec 11 2024, 8:22 AM
kamil published this revision for review.Dec 11 2024, 8:30 AM
kamil added inline comments.
native/account/qr-auth/qr-auth-context-provider.js
96–98

Here we should navigate to the success screen, this will be added later in the stack

Harbormaster completed remote builds in B33015: Diff 46333.Dec 11 2024, 9:58 AM
ashoat accepted this revision.Dec 12 2024, 11:00 AM
ashoat added 1 blocking reviewer(s): tomek.

Would appreciate @tomek's help in reviewing the QRAuthContext part... it's hard for me to track the whole flow and where connectingInProgress should be set

native/navigation/route-names.js
360–362

We usually define the params type in the file that has the component, and import it in this file

tomek accepted this revision.Dec 13 2024, 6:15 AM
This revision is now accepted and ready to land.Dec 13 2024, 6:15 AM
kamil updated this revision to Diff 46537.Dec 17 2024, 4:36 AM

move params definition to /qr-auth/connect-secondary-device.react.js

Harbormaster completed remote builds in B33158: Diff 46537.Dec 17 2024, 5:09 AM
Closed by commit rCOMM9d05d9a88292: [native] implement screen when connecting secondary device (authored by kamil). · Explain WhyDec 17 2024, 7:06 AM
This revision was automatically updated to reflect the committed changes.
kamil added a commit: rCOMM9d05d9a88292: [native] implement screen when connecting secondary device.

Revision Contents
Changeset List

Diff 46333

View Options

native/account/qr-auth/connect-secondary-device.react.js

  • This file was moved from native/qr-code/qr-code-sign-in-navigator.react.js.
// @flow // @flow
import type { import type {
StackNavigationProp, StackNavigationProp,
StackNavigationHelpers, StackNavigationHelpers,
} from '@react-navigation/core'; } from '@react-navigation/core';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import QRCodeScreen from './qr-code-screen.react.js'; import QRCodeScreen from './qr-code-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import { import {
type ScreenParamList, type ScreenParamList,
type QRCodeSignInParamList, type SignInParamList,
QRCodeScreenRouteName, QRCodeScreenRouteName,
} from '../navigation/route-names.js'; } from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js'; import { useStyles, useColors } from '../themes/colors.js';
const safeAreaEdges = ['bottom']; const safeAreaEdges = ['bottom'];
export type QRCodeSignInNavigationProp< export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
RouteName: $Keys<QRCodeSignInParamList>, StackNavigationProp<ScreenParamList, RouteName>;
> = StackNavigationProp<ScreenParamList, RouteName>;
const QRCodeSignInStack = createStackNavigator< const SignInStack = createStackNavigator<
ScreenParamList, ScreenParamList,
QRCodeSignInParamList, SignInParamList,
StackNavigationHelpers<ScreenParamList>, StackNavigationHelpers<ScreenParamList>,
>(); >();
type QRCodeSignInNavigatorProps = { type SignInNavigatorProps = {
+navigation: RootNavigationProp<'QRCodeSignInNavigator'>, +navigation: RootNavigationProp<'SignInNavigator'>,
... ...
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node { function SignInNavigator(props: SignInNavigatorProps): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const colors = useColors(); const colors = useColors();
const screenOptions = React.useMemo( const screenOptions = React.useMemo(
() => ({ () => ({
headerTransparent: true, headerTransparent: true,
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: '', headerTitle: '',
headerTintColor: colors.panelForegroundLabel, headerTintColor: colors.panelForegroundLabel,
headerLeftContainerStyle: { headerLeftContainerStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}), }),
[colors.panelForegroundLabel], [colors.panelForegroundLabel],
); );
return ( return (
<SafeAreaView style={styles.safeArea} edges={safeAreaEdges}> <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
<QRCodeSignInStack.Navigator screenOptions={screenOptions}> <SignInStack.Navigator screenOptions={screenOptions}>
<QRCodeSignInStack.Screen <SignInStack.Screen
name={QRCodeScreenRouteName} name={QRCodeScreenRouteName}
component={QRCodeScreen} component={QRCodeScreen}
/> />
</QRCodeSignInStack.Navigator> </SignInStack.Navigator>
</SafeAreaView> </SafeAreaView>
); );
} }
const unboundStyles = { const unboundStyles = {
safeArea: { safeArea: {
flex: 1, flex: 1,
backgroundColor: 'panelBackground', backgroundColor: 'panelBackground',
}, },
headerLeftStyle: { headerLeftStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}; };
export default QRCodeSignInNavigator; export default SignInNavigator;
View Options

native/account/qr-auth/qr-auth-context-provider.js

  • This file was moved from native/qr-code/qr-code-sign-in-navigator.react.js.
// @flow // @flow
import type { import type {
StackNavigationProp, StackNavigationProp,
StackNavigationHelpers, StackNavigationHelpers,
} from '@react-navigation/core'; } from '@react-navigation/core';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import QRCodeScreen from './qr-code-screen.react.js'; import QRCodeScreen from './qr-code-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import { import {
type ScreenParamList, type ScreenParamList,
type QRCodeSignInParamList, type SignInParamList,
QRCodeScreenRouteName, QRCodeScreenRouteName,
} from '../navigation/route-names.js'; } from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js'; import { useStyles, useColors } from '../themes/colors.js';
const safeAreaEdges = ['bottom']; const safeAreaEdges = ['bottom'];
export type QRCodeSignInNavigationProp< export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
RouteName: $Keys<QRCodeSignInParamList>, StackNavigationProp<ScreenParamList, RouteName>;
> = StackNavigationProp<ScreenParamList, RouteName>;
const QRCodeSignInStack = createStackNavigator< const SignInStack = createStackNavigator<
ScreenParamList, ScreenParamList,
QRCodeSignInParamList, SignInParamList,
StackNavigationHelpers<ScreenParamList>, StackNavigationHelpers<ScreenParamList>,
>(); >();
type QRCodeSignInNavigatorProps = { type SignInNavigatorProps = {
+navigation: RootNavigationProp<'QRCodeSignInNavigator'>, +navigation: RootNavigationProp<'SignInNavigator'>,
... ...
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node { function SignInNavigator(props: SignInNavigatorProps): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const colors = useColors(); const colors = useColors();
const screenOptions = React.useMemo( const screenOptions = React.useMemo(
() => ({ () => ({
headerTransparent: true, headerTransparent: true,
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: '', headerTitle: '',
headerTintColor: colors.panelForegroundLabel, headerTintColor: colors.panelForegroundLabel,
headerLeftContainerStyle: { headerLeftContainerStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}), }),
[colors.panelForegroundLabel], [colors.panelForegroundLabel],
); );
return ( return (
<SafeAreaView style={styles.safeArea} edges={safeAreaEdges}> <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
<QRCodeSignInStack.Navigator screenOptions={screenOptions}> <SignInStack.Navigator screenOptions={screenOptions}>
<QRCodeSignInStack.Screen <SignInStack.Screen
name={QRCodeScreenRouteName} name={QRCodeScreenRouteName}
component={QRCodeScreen} component={QRCodeScreen}
/> />
</QRCodeSignInStack.Navigator> </SignInStack.Navigator>
</SafeAreaView> </SafeAreaView>
); );
} }
const unboundStyles = { const unboundStyles = {
safeArea: { safeArea: {
flex: 1, flex: 1,
backgroundColor: 'panelBackground', backgroundColor: 'panelBackground',
}, },
headerLeftStyle: { headerLeftStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}; };
export default QRCodeSignInNavigator; export default SignInNavigator;
View Options

native/account/qr-auth/qr-auth-context.js

  • This file was moved from native/qr-code/qr-code-sign-in-navigator.react.js.
// @flow // @flow
import type { import type {
StackNavigationProp, StackNavigationProp,
StackNavigationHelpers, StackNavigationHelpers,
} from '@react-navigation/core'; } from '@react-navigation/core';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import QRCodeScreen from './qr-code-screen.react.js'; import QRCodeScreen from './qr-code-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import { import {
type ScreenParamList, type ScreenParamList,
type QRCodeSignInParamList, type SignInParamList,
QRCodeScreenRouteName, QRCodeScreenRouteName,
} from '../navigation/route-names.js'; } from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js'; import { useStyles, useColors } from '../themes/colors.js';
const safeAreaEdges = ['bottom']; const safeAreaEdges = ['bottom'];
export type QRCodeSignInNavigationProp< export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
RouteName: $Keys<QRCodeSignInParamList>, StackNavigationProp<ScreenParamList, RouteName>;
> = StackNavigationProp<ScreenParamList, RouteName>;
const QRCodeSignInStack = createStackNavigator< const SignInStack = createStackNavigator<
ScreenParamList, ScreenParamList,
QRCodeSignInParamList, SignInParamList,
StackNavigationHelpers<ScreenParamList>, StackNavigationHelpers<ScreenParamList>,
>(); >();
type QRCodeSignInNavigatorProps = { type SignInNavigatorProps = {
+navigation: RootNavigationProp<'QRCodeSignInNavigator'>, +navigation: RootNavigationProp<'SignInNavigator'>,
... ...
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node { function SignInNavigator(props: SignInNavigatorProps): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const colors = useColors(); const colors = useColors();
const screenOptions = React.useMemo( const screenOptions = React.useMemo(
() => ({ () => ({
headerTransparent: true, headerTransparent: true,
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: '', headerTitle: '',
headerTintColor: colors.panelForegroundLabel, headerTintColor: colors.panelForegroundLabel,
headerLeftContainerStyle: { headerLeftContainerStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}), }),
[colors.panelForegroundLabel], [colors.panelForegroundLabel],
); );
return ( return (
<SafeAreaView style={styles.safeArea} edges={safeAreaEdges}> <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
<QRCodeSignInStack.Navigator screenOptions={screenOptions}> <SignInStack.Navigator screenOptions={screenOptions}>
<QRCodeSignInStack.Screen <SignInStack.Screen
name={QRCodeScreenRouteName} name={QRCodeScreenRouteName}
component={QRCodeScreen} component={QRCodeScreen}
/> />
</QRCodeSignInStack.Navigator> </SignInStack.Navigator>
</SafeAreaView> </SafeAreaView>
); );
} }
const unboundStyles = { const unboundStyles = {
safeArea: { safeArea: {
flex: 1, flex: 1,
backgroundColor: 'panelBackground', backgroundColor: 'panelBackground',
}, },
headerLeftStyle: { headerLeftStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}; };
export default QRCodeSignInNavigator; export default SignInNavigator;
View Options

native/account/qr-auth/qr-auth-navigator.react.js

  • This file was moved from native/qr-code/qr-code-sign-in-navigator.react.js.
// @flow // @flow
import type { import type {
StackNavigationProp, StackNavigationProp,
StackNavigationHelpers, StackNavigationHelpers,
} from '@react-navigation/core'; } from '@react-navigation/core';
import { createStackNavigator } from '@react-navigation/stack'; import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react'; import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import QRCodeScreen from './qr-code-screen.react.js'; import QRCodeScreen from './qr-code-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import { import {
type ScreenParamList, type ScreenParamList,
type QRCodeSignInParamList, type SignInParamList,
QRCodeScreenRouteName, QRCodeScreenRouteName,
} from '../navigation/route-names.js'; } from '../navigation/route-names.js';
import { useStyles, useColors } from '../themes/colors.js'; import { useStyles, useColors } from '../themes/colors.js';
const safeAreaEdges = ['bottom']; const safeAreaEdges = ['bottom'];
export type QRCodeSignInNavigationProp< export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
RouteName: $Keys<QRCodeSignInParamList>, StackNavigationProp<ScreenParamList, RouteName>;
> = StackNavigationProp<ScreenParamList, RouteName>;
const QRCodeSignInStack = createStackNavigator< const SignInStack = createStackNavigator<
ScreenParamList, ScreenParamList,
QRCodeSignInParamList, SignInParamList,
StackNavigationHelpers<ScreenParamList>, StackNavigationHelpers<ScreenParamList>,
>(); >();
type QRCodeSignInNavigatorProps = { type SignInNavigatorProps = {
+navigation: RootNavigationProp<'QRCodeSignInNavigator'>, +navigation: RootNavigationProp<'SignInNavigator'>,
... ...
}; };
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
function QRCodeSignInNavigator(props: QRCodeSignInNavigatorProps): React.Node { function SignInNavigator(props: SignInNavigatorProps): React.Node {
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
const colors = useColors(); const colors = useColors();
const screenOptions = React.useMemo( const screenOptions = React.useMemo(
() => ({ () => ({
headerTransparent: true, headerTransparent: true,
headerBackTitleVisible: false, headerBackTitleVisible: false,
headerTitle: '', headerTitle: '',
headerTintColor: colors.panelForegroundLabel, headerTintColor: colors.panelForegroundLabel,
headerLeftContainerStyle: { headerLeftContainerStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}), }),
[colors.panelForegroundLabel], [colors.panelForegroundLabel],
); );
return ( return (
<SafeAreaView style={styles.safeArea} edges={safeAreaEdges}> <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
<QRCodeSignInStack.Navigator screenOptions={screenOptions}> <SignInStack.Navigator screenOptions={screenOptions}>
<QRCodeSignInStack.Screen <SignInStack.Screen
name={QRCodeScreenRouteName} name={QRCodeScreenRouteName}
component={QRCodeScreen} component={QRCodeScreen}
/> />
</QRCodeSignInStack.Navigator> </SignInStack.Navigator>
</SafeAreaView> </SafeAreaView>
); );
} }
const unboundStyles = { const unboundStyles = {
safeArea: { safeArea: {
flex: 1, flex: 1,
backgroundColor: 'panelBackground', backgroundColor: 'panelBackground',
}, },
headerLeftStyle: { headerLeftStyle: {
paddingLeft: 12, paddingLeft: 12,
}, },
}; };
export default QRCodeSignInNavigator; export default SignInNavigator;
View Options

native/navigation/route-names.js

Loading...