fix: v4.3 UX according to user feedback (#643)

* move the derive button to the button

* remove unused button

* refactor redirection function

* change the redirection after derivation

* refactor e2e tests to fit new work flow

* add version in about

* validate pin input without button tapped

* Update NetworkSelector.tsx

* update westend genesis hash

* fix e2e test

* move two tabs in the bottom to one

* fix e2e test

* bump version to 4.3.2

* bump dependencies

* remove password length limitation

* update xcode settings

* fix e2e test

package.json

@@ -51,9 +51,9 @@
     "@polkadot/util": "2.11.1",
     "@polkadot/util-crypto": "2.11.1",
     "@react-native-community/masked-view": "^0.1.6",
+    "@react-navigation/native": "^5.5.1",
+    "@react-navigation/stack": "^5.5.1",
     "@react-native-community/netinfo": "^5.9.3",
-    "@react-navigation/native": "^5.3.2",
-    "@react-navigation/stack": "^5.3.5",
     "bignumber.js": "^9.0.0",
     "hoist-non-react-statics": "^3.3.0",
     "node-libs-react-native": "^1.0.3",
@@ -96,7 +96,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-rewrite-require": "^1.14.5",
     "babel-plugin-tester": "^9.0.1",
-    "detox": "^16.5.1",
+    "detox": "^16.8.2",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.10.1",
     "eslint-import-resolver-typescript": "^2.0.0",

src/components/ButtonNewDerivation.tsx → src/components/QRScannerAndDerivationTab.tsx

@@ -15,47 +15,64 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 
 import TouchableItem from './TouchableItem';
 import Separator from './Separator';
 
+import QrScannerTab from 'components/QrScannerTab';
 import colors from 'styles/colors';
 import fontStyles from 'styles/fontStyles';
 import { ButtonListener } from 'types/props';
 
-export default class ButtonNewDerivation extends React.PureComponent<{
+export default class QRScannerAndDerivationTab extends React.PureComponent<{
 	onPress: ButtonListener;
 	title: string;
-	testID?: string;
+	derivationTestID?: string;
 }> {
 	render(): React.ReactElement {
-		const { onPress, title, testID } = this.props;
+		const { onPress, title, derivationTestID } = this.props;
 		return (
-			<TouchableItem onPress={onPress} testID={testID} style={styles.body}>
+			<View style={styles.body}>
 				<Separator
 					shadow={true}
 					style={{ backgroundColor: 'transparent', marginVertical: 0 }}
 					shadowStyle={{ height: 16, marginTop: -16 }}
 				/>
-				<Text style={styles.icon}>//</Text>
-				<Text style={styles.textLabel}>{title}</Text>
-			</TouchableItem>
+				<View style={styles.tab}>
+					<QrScannerTab />
+				</View>
+				<View style={styles.tab}>
+					<TouchableItem
+						onPress={onPress}
+						style={styles.derivationButton}
+						testID={derivationTestID}
+					>
+						<Text style={styles.icon}>//</Text>
+						<Text style={styles.textLabel}>{title}</Text>
+					</TouchableItem>
+				</View>
+			</View>
 		);
 	}
 }
 
 const styles = StyleSheet.create({
-	body: {
+	body: { flexDirection: 'row' },
+	derivationButton: {
 		alignItems: 'center',
-		backgroundColor: colors.background.app,
-		height: 68
+		backgroundColor: colors.background.os,
+		height: 72
 	},
 	icon: {
 		...fontStyles.i_large,
 		color: colors.signal.main,
 		marginTop: 8
 	},
+	tab: {
+		flex: 1,
+		flexGrow: 1
+	},
 	textLabel: {
 		...fontStyles.a_text,
 		color: colors.text.faded,

src/components/ScreenHeading.tsx

@@ -22,6 +22,7 @@ import { Icon } from 'react-native-elements';
 import ButtonIcon from './ButtonIcon';
 import AccountIcon from './AccountIcon';
 
+import testIDs from 'e2e/testIDs';
 import { NETWORK_LIST } from 'constants/networkSpecs';
 import fontStyles from 'styles/fontStyles';
 import fonts from 'styles/fonts';
@@ -74,6 +75,7 @@ const renderBack = (onPress?: ButtonListener): ReactNode => {
 			iconName="arrowleft"
 			iconType="antdesign"
 			onPress={onPress}
+			testID={testIDs.Main.backButton}
 			style={StyleSheet.flatten([baseStyles.icon, { left: 0 }])}
 			iconBgStyle={{ backgroundColor: 'transparent' }}
 		/>

src/constants/networkSpecs.ts

@@ -75,7 +75,7 @@ export const SubstrateNetworkKeys: {
 		'0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
 	SUBSTRATE_DEV:
 		'0x0d667fd278ec412cd9fccdb066f09ed5b4cfd9c9afa9eb747213acb02b1e70bc', // substrate --dev commit ac6a2a783f0e1f4a814cf2add40275730cd41be1 hosted on wss://dev-node.substrate.dev .
-	WESTEND: '0x4a31f96525a77959d97e267c8fc3066ca333d9ade161720e1b7de8d35ccc6bd2'
+	WESTEND: '0xe143f23803ac50e8f6f8e62695d1ce9e4e1d68aa36c1cd2cfd15340213f3423e'
 });
 
 const unknownNetworkBase: { [key: string]: UnknownNetworkParams } = {

src/modules/main/components/NetworkSelector.tsx

@@ -15,7 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { ReactElement, useState } from 'react';
-import { BackHandler, FlatList } from 'react-native';
+import { BackHandler, FlatList, FlatListProps } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import { NetworkCard } from 'components/AccountCard';
@@ -38,10 +38,10 @@ import { NavigationAccountIdentityProps } from 'types/props';
 import { alertPathDerivationError } from 'utils/alertUtils';
 import { getExistedNetworkKeys, getIdentityName } from 'utils/identitiesUtils';
 import {
-	navigateToPathDerivation,
 	navigateToPathDetails,
 	navigateToPathsList,
-	unlockSeedPhrase
+	unlockSeedPhrase,
+	useUnlockSeed
 } from 'utils/navigationHelpers';
 import { useSeedRef } from 'utils/seedRefHooks';
 import QrScannerTab from 'components/QrScannerTab';
@@ -64,7 +64,7 @@ export default function NetworkSelector({
 	const [shouldShowMoreNetworks, setShouldShowMoreNetworks] = useState(false);
 	const { identities, currentIdentity } = accounts.state;
 	const seedRefHooks = useSeedRef(currentIdentity.encryptedSeed);
-
+	const { unlockWithoutPassword } = useUnlockSeed(seedRefHooks.isSeedRefValid);
 	// catch android back button and prevent exiting the app
 	useFocusEffect(
 		React.useCallback((): any => {
@@ -84,6 +84,12 @@ export default function NetworkSelector({
 		}, [shouldShowMoreNetworks])
 	);
 
+	const onAddCustomPath = (): Promise<void> =>
+		unlockWithoutPassword({
+			name: 'PathDerivation',
+			params: { parentPath: '' }
+		});
+
 	const sortNetworkKeys = (
 		[, params1]: [any, NetworkParams],
 		[, params2]: [any, NetworkParams]
@@ -161,32 +167,32 @@ export default function NetworkSelector({
 		}
 	};
 
-	const renderCustomPathCard = (): React.ReactElement => (
-		<NetworkCard
-			isAdd={true}
-			onPress={(): Promise<void> =>
-				navigateToPathDerivation(navigation, '', seedRefHooks.isSeedRefValid)
-			}
-			testID={testIDs.Main.addCustomNetworkButton}
-			title="Create Custom Path"
-			networkColor={colors.background.app}
-		/>
-	);
-
-	const renderAddButton = (): React.ReactElement => {
-		if (isNew) return renderCustomPathCard();
-		if (!shouldShowMoreNetworks) {
-			return (
-				<NetworkCard
-					isAdd={true}
-					onPress={(): void => setShouldShowMoreNetworks(true)}
-					testID={testIDs.Main.addNewNetworkButton}
-					title="Add Network Account"
-					networkColor={colors.background.app}
-				/>
-			);
+	const getListOptions = (): Partial<FlatListProps<any>> => {
+		if (isNew) return {};
+		if (shouldShowMoreNetworks) {
+			return {
+				ListHeaderComponent: (
+					<NetworkCard
+						isAdd={true}
+						onPress={onAddCustomPath}
+						testID={testIDs.Main.addCustomNetworkButton}
+						title="Create Custom Path"
+						networkColor={colors.background.app}
+					/>
+				)
+			};
 		} else {
-			return renderCustomPathCard();
+			return {
+				ListFooterComponent: (
+					<NetworkCard
+						isAdd={true}
+						onPress={(): void => setShouldShowMoreNetworks(true)}
+						testID={testIDs.Main.addNewNetworkButton}
+						title="Add Network Account"
+						networkColor={colors.background.app}
+					/>
+				)
+			};
 		}
 	};
 
@@ -260,7 +266,7 @@ export default function NetworkSelector({
 				keyExtractor={(item: [string, NetworkParams]): string => item[0]}
 				renderItem={renderNetwork}
 				testID={testIDs.Main.chooserScreen}
-				ListFooterComponent={renderAddButton}
+				{...getListOptions()}
 			/>
 			{!shouldShowMoreNetworks && !isNew && <QrScannerTab />}
 		</SafeAreaViewContainer>

src/modules/unlock/screens/PinUnlock.tsx

@@ -23,10 +23,10 @@ import { getSubtitle, onPinInputChange } from 'modules/unlock/utils';
 import testIDs from 'e2e/testIDs';
 import ScreenHeading from 'components/ScreenHeading';
 import { NavigationTargetIdentityProps } from 'types/props';
+import { debounce } from 'utils/debounce';
 import { withAccountStore, withTargetIdentity } from 'utils/HOC';
 import { unlockIdentitySeedWithReturn } from 'utils/identitiesUtils';
 import { useSeedRef } from 'utils/seedRefHooks';
-import Button from 'components/Button';
 
 function PinUnlock({
 	targetIdentity,
@@ -35,8 +35,7 @@ function PinUnlock({
 	const [state, updateState, resetState] = usePinState();
 	const { createSeedRef } = useSeedRef(targetIdentity.encryptedSeed);
 
-	async function submit(): Promise<void> {
-		const { pin } = state;
+	async function submit(pin: string): Promise<void> {
 		if (pin.length >= 6 && targetIdentity) {
 			try {
 				if (route.params.shouldReturnSeed) {
@@ -55,13 +54,19 @@ function PinUnlock({
 					resolve();
 				}
 			} catch (e) {
-				updateState({ pin: '', pinMismatch: true });
-				//TODO record error times;
+				updateState({ pin, pinMismatch: true });
 			}
 		} else {
-			updateState({ pinTooShort: true });
+			updateState({ pin, pinTooShort: true });
 		}
 	}
+
+	const onPinInput = (pin: string): void => {
+		onPinInputChange('pin', updateState)(pin);
+		const debounceSubmit = debounce(() => submit(pin), 500);
+		debounceSubmit();
+	};
+
 	return (
 		<KeyboardAwareContainer
 			contentContainerStyle={{
@@ -78,16 +83,9 @@ function PinUnlock({
 				autoFocus
 				testID={testIDs.IdentityPin.unlockPinInput}
 				returnKeyType="done"
-				onChangeText={onPinInputChange('pin', updateState)}
-				onSubmitEditing={submit}
+				onChangeText={onPinInput}
 				value={state.pin}
 			/>
-			<Button
-				title={t.doneButton.pinUnlock}
-				onPress={submit}
-				testID={testIDs.IdentityPin.unlockPinButton}
-				aboveKeyboard
-			/>
 		</KeyboardAwareContainer>
 	);
 }

src/modules/unlock/screens/PinUnlockWithPassword.tsx

@@ -100,7 +100,6 @@ function PinUnlockWithPassword({
 				title={t.doneButton.pinUnlock}
 				onPress={submit}
 				testID={testIDs.IdentityPin.unlockPinButton}
-				aboveKeyboard
 			/>
 		</KeyboardAwareContainer>
 	);

src/screens/About.tsx

@@ -17,6 +17,8 @@
 import React from 'react';
 import { Linking, StyleSheet, Text, View } from 'react-native';
 
+import { version } from '../../package.json';
+
 import colors from 'styles/colors';
 import fonts from 'styles/fonts';
 import CustomScrollView from 'components/CustomScrollView';
@@ -25,7 +27,7 @@ export default class About extends React.PureComponent {
 	render(): React.ReactElement {
 		return (
 			<CustomScrollView contentContainerStyle={{ padding: 20 }}>
-				<Text style={styles.title}>PARITY SIGNER</Text>
+				<Text style={styles.title}>PARITY SIGNER v{version}</Text>
 				<View>
 					<Text style={styles.text}>
 						The Parity Signer mobile application is a secure air-gapped wallet

src/screens/PathDerivation.tsx

@@ -29,8 +29,8 @@ import {
 	getNetworkKeyByPathId,
 	validateDerivedPath
 } from 'utils/identitiesUtils';
-import { navigateToPathsList, unlockSeedPhrase } from 'utils/navigationHelpers';
-import { alertPathDerivationError } from 'utils/alertUtils';
+import { unlockSeedPhrase } from 'utils/navigationHelpers';
+import { alertDeriveSuccess, alertPathDerivationError } from 'utils/alertUtils';
 import Separator from 'components/Separator';
 import ScreenHeading from 'components/ScreenHeading';
 import PathCard from 'components/PathCard';
@@ -92,7 +92,8 @@ function PathDerivation({
 				keyPairsName,
 				password
 			);
-			navigateToPathsList(navigation, currentNetworkKey);
+			alertDeriveSuccess();
+			navigation.goBack();
 		} catch (error) {
 			alertPathDerivationError(error.message);
 		}