Paths

Table of Contentst

-
lib/types/
-
types/
-
minimally-encoded-thread-permissions-types.js
-
minimally-encoded-thread-permissions-types.test.js

[lib] Introduce `MemberInfoSansPermissions`
ClosedPublic
Actions

Authored by atul on Jun 4 2024, 2:29 PM.

Details

Reviewers

ashoat
ginsu
tomek
varun

Commits

rCOMM9cc32873ab68: [lib] Introduce `MemberInfoSansPermissions`

Summary

Introduce MemberInfoSansPermissions, stripPermissionsFromMemberInfo, and some unit tests.

The type will eventually replace MemberInfoWithPermissions in RawThreadInfo, but for now it's convenient to use to "surface" flow issues.

Depends on D12296

Test Plan

flow + unit tests

Diff Detail

Repository

rCOMM Comm

Branch

arcpatch-D12315 (branched from master)

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

atul created this revision.Jun 4 2024, 2:29 PM

This is really mostly for my convenience so I can avoid stashing/unstashing while working through remainder of stack until ready to replace MemberInfoWithPermissions with MemberInfoSansPermissions.

atul published this revision for review.Jun 4 2024, 2:31 PM

Harbormaster completed remote builds in B29445: Diff 40974.Jun 4 2024, 2:46 PM

tomek accepted this revision.Jun 5 2024, 2:30 AM

tomek added inline comments.

lib/types/minimally-encoded-thread-permissions-types.js
108–113 ↗	(On Diff #40974)	How about using `$Diff`?

This revision is now accepted and ready to land.Jun 5 2024, 2:30 AM

tomek added inline comments.Jun 5 2024, 2:32 AM

lib/types/minimally-encoded-thread-permissions-types.js
108–113 ↗	(On Diff #40974)	Or even `$Rest` https://flow.org/en/docs/types/utilities/#toc-rest which is the type that represents the runtime object rest operation

Agree with @tomek's feedback

atul added a child revision: D12321: [lib] Add `MemberInfoSansPermissions` support to `threadOtherMembers`.Jun 5 2024, 2:42 PM

rebase before landing

use $Diff

Harbormaster completed remote builds in B29729: Diff 41423.Jun 17 2024, 5:59 PM

Harbormaster completed remote builds in B29730: Diff 41424.

Closed by commit rCOMM9cc32873ab68: [lib] Introduce `MemberInfoSansPermissions` (authored by atul). · Explain WhyJun 17 2024, 8:06 PM

This revision was automatically updated to reflect the committed changes.

atul added a commit: rCOMM9cc32873ab68: [lib] Introduce `MemberInfoSansPermissions`.

Revision Contents
Changeset List

Path

Size

lib/

types/

minimally-encoded-thread-permissions-types.js

13 lines

minimally-encoded-thread-permissions-types.test.js

29 lines

Diff 41424

View Options

lib/types/minimally-encoded-thread-permissions-types.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;