Paths

Table of Contentst

-
lib/
-
actions/
-
link-actions.js
-
types/
-
redux-types.js

[lib] Allow calling link verification from clients
ClosedPublic
Actions

Authored by tomek on Apr 19 2023, 5:10 AM.

Details

Reviewers

bartek
kamil
inka

Commits

rCOMM237302e4fe9a: [lib] Allow calling link verification from clients

Summary

This diff adds some code that allows calling link verification endpoint.

Depends on D7521

Test Plan

Tested in combination with next diffs - every call from link handler (introduced later) verifies this code.

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

tomek created this revision.Apr 19 2023, 5:10 AM

Herald added subscribers: atul, ashoat. · View Herald TranscriptApr 19 2023, 5:10 AM

Harbormaster completed remote builds in B18501: Diff 25337.Apr 19 2023, 5:29 AM

tomek requested review of this revision.Apr 19 2023, 5:29 AM

tomek added a child revision: D7524: [native] Create invitation modal.Apr 19 2023, 5:34 AM

inka added inline comments.Apr 19 2023, 6:25 AM

lib/actions/link-actions.js
21 ↗	(On Diff #25337)	It seems we usually don't return right away, but do something like const response = await callServerEndpoint('verify_invite_link', request); return { field: response.field; ... }; I'm not sure why, probably so that the potential type errors are thrown from here, and not later. Can you follow the same pattern or explain why it's not needed please?

bartek accepted this revision.Apr 21 2023, 2:25 AM

This revision is now accepted and ready to land.Apr 21 2023, 2:25 AM

tomek added inline comments.Apr 26 2023, 1:47 AM

lib/actions/link-actions.js
21 ↗	(On Diff #25337)	You're right. The purpose of this pattern is that the result of `callServerEndpoint` could have more fields, e.g. `success`. We don't want these fields further down.

Don't return response directly

Harbormaster failed remote builds in B18802: Diff 25758!Apr 26 2023, 5:10 AM

Rebase

Harbormaster completed remote builds in B18813: Diff 25773.Apr 26 2023, 1:07 PM

bartek mentioned this in D7620: [lib][keyserver] Expose upload_media_metadata endpoint.Apr 27 2023, 3:47 AM

Closed by commit rCOMM237302e4fe9a: [lib] Allow calling link verification from clients (authored by tomek). · Explain WhyApr 27 2023, 7:15 AM

This revision was automatically updated to reflect the committed changes.

tomek added a commit: rCOMM237302e4fe9a: [lib] Allow calling link verification from clients.

Revision Contents
Changeset List

Path

Size

lib/

actions/

link-actions.js

33 lines

types/

redux-types.js

17 lines

Diff 25758

View Options

lib/actions/link-actions.js

// @flow		// @flow

import type {		import type {
StackNavigationEventMap,		StackNavigationEventMap,
StackNavigationState,		StackNavigationState,
StackOptions,		StackOptions,
} from '@react-navigation/core';		} from '@react-navigation/core';
import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { Text, View } from 'react-native';		import { Text, View } from 'react-native';

import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';		import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js';		import { useENSName } from 'lib/hooks/ens-cache.js';
import { useWalletLogIn } from 'lib/hooks/login-hooks.js';		import { useWalletLogIn } from 'lib/hooks/login-hooks.js';
		import type { SIWEBackupData } from 'lib/types/backup-types.js';
import type { SIWEResult } from 'lib/types/siwe-types.js';		import type { SIWEResult } from 'lib/types/siwe-types.js';
import { getMessageForException } from 'lib/utils/errors.js';		import { getMessageForException } from 'lib/utils/errors.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 type { AuthNavigationProp } from './auth-navigator.react.js';		import type { AuthNavigationProp } from './auth-navigator.react.js';
import { RegistrationContext } from './registration-context.js';		import { RegistrationContext } from './registration-context.js';
		import LinkButton from '../../components/link-button.react.js';
import PrimaryButton from '../../components/primary-button.react.js';		import PrimaryButton from '../../components/primary-button.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';		import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type {		import {
NavigationRoute,		type NavigationRoute,
ScreenParamList,		type ScreenParamList,
		QRCodeScreenRouteName,
		RestoreSIWEBackupRouteName,
} from '../../navigation/route-names.js';		} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import {		import {
unknownErrorAlertDetails,		unknownErrorAlertDetails,
appOutOfDateAlertDetails,		appOutOfDateAlertDetails,
} from '../../utils/alert-messages.js';		} from '../../utils/alert-messages.js';
import Alert from '../../utils/alert.js';		import Alert from '../../utils/alert.js';
import AuthButtonContainer from '../auth-components/auth-button-container.react.js';		import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
import AuthContainer from '../auth-components/auth-container.react.js';		import AuthContainer from '../auth-components/auth-container.react.js';
import AuthContentContainer from '../auth-components/auth-content-container.react.js';		import AuthContentContainer from '../auth-components/auth-content-container.react.js';
import { useLegacySIWEServerCall } from '../siwe-hooks.js';		import { useLegacySIWEServerCall } from '../siwe-hooks.js';

export type ExistingEthereumAccountParams = SIWEResult;		export type ExistingEthereumAccountParams = $ReadOnly<{
		...SIWEResult,
		+backupData: ?SIWEBackupData,
		}>;

type Props = {		type Props = {
+navigation: AuthNavigationProp<'ExistingEthereumAccount'>,		+navigation: AuthNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>,		+route: NavigationRoute<'ExistingEthereumAccount'>,
};		};
function ExistingEthereumAccount(props: Props): React.Node {		function ExistingEthereumAccount(props: Props): React.Node {
const legacySiweServerCall = useLegacySIWEServerCall();		const legacySiweServerCall = useLegacySIWEServerCall();
const walletLogIn = useWalletLogIn();		const walletLogIn = useWalletLogIn();

const [logInPending, setLogInPending] = React.useState(false);		const [logInPending, setLogInPending] = React.useState(false);

const registrationContext = React.useContext(RegistrationContext);		const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set');		invariant(registrationContext, 'registrationContext should be set');
const { setCachedSelections } = registrationContext;		const { setCachedSelections } = registrationContext;

const { params } = props.route;		const { params } = props.route;
		const { address, message, signature, backupData } = params;
const dispatch = useDispatch();		const dispatch = useDispatch();
const { navigation } = props;		const { navigation } = props;
const goBackToHome = navigation.getParent<		const goBackToHome = navigation.getParent<
ScreenParamList,		ScreenParamList,
'Auth',		'Auth',
StackNavigationState,		StackNavigationState,
StackOptions,		StackOptions,
StackNavigationEventMap,		StackNavigationEventMap,
RootNavigationProp<'Auth'>,		RootNavigationProp<'Auth'>,
>()?.goBack;		>()?.goBack;

const onProceedToLogIn = React.useCallback(async () => {		const onProceedToLogIn = React.useCallback(async () => {
if (logInPending) {		if (logInPending) {
return;		return;
}		}
setLogInPending(true);		setLogInPending(true);
try {		try {
if (usingCommServicesAccessToken) {		if (usingCommServicesAccessToken) {
await walletLogIn(params.address, params.message, params.signature);		await walletLogIn(params.address, params.message, params.signature);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines	const onProceedToLogIn = React.useCallback(async () => {
legacySiweServerCall,		legacySiweServerCall,
walletLogIn,		walletLogIn,
params,		params,
dispatch,		dispatch,
goBackToHome,		goBackToHome,
setCachedSelections,		setCachedSelections,
]);		]);

const { address } = params;		const useLegacyFlow = !backupData \|\| !usingRestoreFlow;

		const openRestoreFlow = React.useCallback(() => {
		if (useLegacyFlow \|\| !backupData) {
		return;
		}
		const {
		siweBackupMsgNonce,
		siweBackupMsgIssuedAt,
		siweBackupMsgStatement,
		} = backupData;
		navigation.navigate(RestoreSIWEBackupRouteName, {
		siweNonce: siweBackupMsgNonce,
		siweStatement: siweBackupMsgStatement,
		siweIssuedAt: siweBackupMsgIssuedAt,
		userIdentifier: address,
		signature,
		message,
		});
		}, [address, backupData, message, navigation, signature, useLegacyFlow]);

		const openQRScreen = React.useCallback(() => {
		navigation.navigate(QRCodeScreenRouteName);
		}, [navigation]);

const walletIdentifier = useENSName(address);		const walletIdentifier = useENSName(address);
const walletIdentifierTitle =		const walletIdentifierTitle =
walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';		walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';

const { goBack } = navigation;		const { goBack } = navigation;
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

		let newFlowSection = null;
		if (!useLegacyFlow) {
		newFlowSection = (
		<>
		<Text style={styles.section}>
		If you still have access to your logged-in device, you can use it to
		log in by scanning the QR code.
		</Text>
		<Text style={styles.section}>
		If you’ve lost access to your logged-in device, you can try recovering
		your Comm account. Note that after completing the recovery flow, you
		will be logged out from all of your other devices.
		</Text>
		<View style={styles.linkButton}>
		<LinkButton
		text="Not logged in on another phone?"
		onPress={openRestoreFlow}
		/>
		</View>
		</>
		);
		}

		const primaryAction = React.useMemo(() => {
		if (useLegacyFlow) {
		return (
		<PrimaryButton
		onPress={onProceedToLogIn}
		label="Log in to account"
		variant={logInPending ? 'loading' : 'enabled'}
		/>
		);
		}
		return (
		<PrimaryButton
		onPress={openQRScreen}
		label="Log in via QR code"
		variant="enabled"
		/>
		);
		}, [logInPending, onProceedToLogIn, openQRScreen, useLegacyFlow]);

return (		return (
<AuthContainer>		<AuthContainer>
<AuthContentContainer>		<AuthContentContainer>
<Text style={styles.header}>Account already exists for wallet</Text>		<Text style={styles.header}>Account already exists for wallet</Text>
<Text style={styles.body}>		<Text style={styles.body}>
You can proceed to log in with this wallet, or go back and use a		You can proceed to log in with this wallet, or go back and use a
different wallet.		different wallet.
</Text>		</Text>
<View style={styles.walletTile}>		<View style={styles.walletTile}>
<Text style={styles.walletIdentifierTitleText}>		<Text style={styles.walletIdentifierTitleText}>
{walletIdentifierTitle}		{walletIdentifierTitle}
</Text>		</Text>
<View style={styles.walletIdentifier}>		<View style={styles.walletIdentifier}>
<Text style={styles.walletIdentifierText} numberOfLines={1}>		<Text style={styles.walletIdentifierText} numberOfLines={1}>
{walletIdentifier}		{walletIdentifier}
</Text>		</Text>
</View>		</View>
</View>		</View>
		{newFlowSection}
</AuthContentContainer>		</AuthContentContainer>
<AuthButtonContainer>		<AuthButtonContainer>
<PrimaryButton		{primaryAction}
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
<PrimaryButton		<PrimaryButton
onPress={goBack}		onPress={goBack}
label="Use a different wallet"		label="Use a different wallet"
variant="outline"		variant="outline"
/>		/>
</AuthButtonContainer>		</AuthButtonContainer>
</AuthContainer>		</AuthContainer>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
header: {		header: {
fontSize: 24,		fontSize: 24,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
paddingBottom: 16,		paddingBottom: 16,
},		},
body: {		body: {
fontFamily: 'Arial',		fontFamily: 'Arial',
fontSize: 15,		fontSize: 15,
lineHeight: 20,		lineHeight: 20,
color: 'panelForegroundSecondaryLabel',		color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
},		},
walletTile: {		walletTile: {
backgroundColor: 'panelForeground',		backgroundColor: 'panelForeground',
borderRadius: 8,		borderRadius: 8,
padding: 24,		padding: 24,
alignItems: 'center',		alignItems: 'center',
		marginTop: 40,
		marginBottom: 40,
},		},
walletIdentifierTitleText: {		walletIdentifierTitleText: {
fontSize: 17,		fontSize: 17,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
textAlign: 'center',		textAlign: 'center',
},		},
walletIdentifier: {		walletIdentifier: {
backgroundColor: 'panelSecondaryForeground',		backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8,		paddingVertical: 8,
paddingHorizontal: 24,		paddingHorizontal: 24,
borderRadius: 56,		borderRadius: 56,
marginTop: 8,		marginTop: 8,
alignItems: 'center',		alignItems: 'center',
},		},
walletIdentifierText: {		walletIdentifierText: {
fontSize: 15,		fontSize: 15,
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
},		},
		section: {
		fontFamily: 'Arial',
		fontSize: 15,
		lineHeight: 20,
		color: 'panelForegroundSecondaryLabel',
		paddingBottom: 16,
		},
		linkButton: {
		alignItems: 'center',
		},
};		};

export default ExistingEthereumAccount;		export default ExistingEthereumAccount;