refactor: identity root account and network root account

e2e/identityManipulation.spec.js

@@ -114,12 +114,6 @@ describe('Load test', async () => {
 		await testSetUpDefaultPath();
 	});
 
-	it('starts with a root account', async () => {
-		await testTap(PathsList.rootButton);
-		await expect(element(by.text('Root'))).toExist();
-		await tapBack();
-	});
-
 	it('is able to create custom path', async () => {
 		await tapBack();
 		await testTap(testIDs.AccountNetworkChooser.addNewNetworkButton);

e2e/testIDs.js

@@ -74,7 +74,6 @@ const testIDs = {
 	PathsList: {
 		deriveButton: 'path_list_derive_button',
 		pathCard: 'path_list_path_card',
-		rootButton: 'path_list_root_button',
 		scanButton: 'path_list_scan_button',
 		screen: 'path_list_screen'
 	},

specs/util/identitiesUtils.spec.js

@@ -87,7 +87,7 @@ const raw = [
 	},
 	{
 		address: 'addressRoot',
-		expectName: '',
+		expectName: 'Identity root',
 		name: '',
 		path: ''
 	},
@@ -162,19 +162,23 @@ describe('IdentitiesUtils', () => {
 		const groupResult = groupPaths(kusamaPaths);
 		expect(groupResult).toEqual([
 			{
-				paths: [paths[0]],
+				paths: ['//kusama'],
+				title: 'Kusama root'
+			},
+			{
+				paths: ['//kusama//default'],
 				title: '//default'
 			},
 			{
-				paths: [paths[2]],
+				paths: ['//kusama/softKey1'],
 				title: '/softKey1'
 			},
 			{
-				paths: [paths[4]],
+				paths: ['//kusama//staking/1'],
 				title: '//staking'
 			},
 			{
-				paths: [paths[1], paths[3]],
+				paths: ['//kusama//funding/1', '//kusama//funding/2'],
 				title: '//funding'
 			}
 		]);
@@ -192,8 +196,8 @@ describe('IdentitiesUtils', () => {
 		const groupResult = groupPaths(unKnownPaths);
 		expect(groupResult).toEqual([
 			{
-				paths: ['//polkadot//default'],
-				title: '//polkadot'
+				paths: [''],
+				title: 'Identity root'
 			},
 			{
 				paths: ['//custom'],
@@ -203,6 +207,10 @@ describe('IdentitiesUtils', () => {
 				paths: ['/polkadot/1'],
 				title: '/polkadot'
 			},
+			{
+				paths: ['//polkadot//default'],
+				title: '//polkadot'
+			},
 			{
 				paths: ['/kusama', '/kusama/1'],
 				title: '/kusama'

src/components/CompatibleCard.js

@@ -20,8 +20,6 @@ import PropTypes from 'prop-types';
 import AccountCard from './AccountCard';
 import PathCard from './PathCard';
 import React from 'react';
-import { getIdentityName } from '../util/identitiesUtils';
-import { defaultNetworkKey } from '../constants';
 
 const CompatibleCard = ({ account, accountsStore, titlePrefix }) =>
 	account.isLegacy === true || account.isLegacy === undefined ? (
@@ -30,12 +28,6 @@ const CompatibleCard = ({ account, accountsStore, titlePrefix }) =>
 			address={account.address}
 			networkKey={account.networkKey || ''}
 		/>
-	) : account.path === '' ? (
-		<AccountCard
-			title={getIdentityName(account, accountsStore.state.identities)}
-			address={account.address}
-			networkKey={defaultNetworkKey}
-		/>
 	) : (
 		<PathCard
 			identity={accountsStore.getIdentityByAccountId(account.accountId)}

src/components/ScreenHeading.js

@@ -29,8 +29,6 @@ import { Icon } from 'react-native-elements';
 import colors from '../colors';
 import AccountIcon from './AccountIcon';
 import { NETWORK_LIST } from '../constants';
-import TouchableItem from './TouchableItem';
-import FontAwesome from 'react-native-vector-icons/FontAwesome';
 
 const composeStyle = StyleSheet.compose;
 
@@ -77,7 +75,7 @@ const renderBack = onPress => {
 			iconName="arrowleft"
 			iconType="antdesign"
 			onPress={onPress}
-			style={[baseStyles.icon, { left: 0, top: -8 }]}
+			style={[baseStyles.icon, { left: 0 }]}
 			iconBgStyle={{ backgroundColor: 'transparent' }}
 		/>
 	);
@@ -91,12 +89,21 @@ const renderIcon = (iconName, iconType) => {
 	);
 };
 
-export function PathCardHeading({ title, networkKey }) {
+export function LeftScreenHeading({
+	title,
+	subtitle,
+	hasSubtitleIcon,
+	networkKey
+}) {
 	const titleStyle = composeStyle(
 		fontStyles.h2,
 		baseStyles.t_left,
 		baseStyles.t_normal
 	);
+	const titleStyleWithSubtitle = composeStyle(
+		baseStyles.text,
+		baseStyles.t_left
+	);
 	return (
 		<View style={baseStyles.bodyWithIcon}>
 			<AccountIcon
@@ -105,69 +112,43 @@ export function PathCardHeading({ title, networkKey }) {
 				style={baseStyles.networkIcon}
 			/>
 			<View>
-				<Text style={titleStyle}>{title}</Text>
+				<Text style={subtitle ? titleStyleWithSubtitle : titleStyle}>
+					{title}
+				</Text>
+				{renderSubtitle(subtitle, hasSubtitleIcon, true, false, false)}
 			</View>
 		</View>
 	);
 }
 
-export function PathListHeading({
+export function IdentityHeading({
 	title,
 	subtitle,
 	hasSubtitleIcon,
-	testID,
-	networkKey,
-	onPress
+	onPressBack
 }) {
 	return (
-		<TouchableItem
-			style={baseStyles.bodyWithIcon}
-			onPress={onPress}
-			testID={testID}
-		>
-			<AccountIcon
-				address={''}
-				network={NETWORK_LIST[networkKey]}
-				style={baseStyles.networkIcon}
-			/>
-			<View>
-				<Text style={[baseStyles.text, baseStyles.t_left]}>{title}</Text>
-				{renderSubtitle(subtitle, hasSubtitleIcon, true, false, false)}
-			</View>
-		</TouchableItem>
-	);
-}
-
-export function IdentityHeading({ onPress, title, subtitle, hasSubtitleIcon }) {
-	return (
-		<TouchableItem style={baseStyles.bodyWithIdentity} onPress={onPress}>
-			<View style={baseStyles.touchable}>
-				<View style={baseStyles.identityName}>
-					<Text
-						style={[baseStyles.text, baseStyles.t_left]}
-						numberOfLines={1}
-						ellipsizeMode="middle"
-					>
-						{title}
-					</Text>
-					<FontAwesome
-						style={baseStyles.linkIcon}
-						name="external-link"
-						color={colors.bg_button}
-						size={18}
-					/>
-				</View>
-				{renderSubtitle(subtitle, hasSubtitleIcon, true, false, false)}
+		<View style={baseStyles.bodyWithIdentity}>
+			<View style={baseStyles.identityName}>
+				<Text
+					style={[baseStyles.text, baseStyles.t_left]}
+					numberOfLines={1}
+					ellipsizeMode="middle"
+				>
+					{title}
+				</Text>
 			</View>
-		</TouchableItem>
+			{onPressBack && renderBack(onPressBack)}
+			{renderSubtitle(subtitle, hasSubtitleIcon, true, false, false)}
+		</View>
 	);
 }
 
 export default class ScreenHeading extends React.PureComponent {
 	static propTypes = {
 		onPress: PropTypes.func,
 		subtitle: PropTypes.string,
-		title: PropTypes.string
+		title: PropTypes.string.isRequired
 	};
 	render() {
 		const {
@@ -176,7 +157,6 @@ export default class ScreenHeading extends React.PureComponent {
 			subtitleL,
 			hasSubtitleIcon,
 			error,
-			onPress,
 			iconName,
 			iconType
 		} = this.props;
@@ -185,7 +165,6 @@ export default class ScreenHeading extends React.PureComponent {
 			<View style={baseStyles.body}>
 				<Text style={baseStyles.text}>{title}</Text>
 				{renderSubtitle(subtitle, hasSubtitleIcon, subtitleL, error, true)}
-				{renderBack(onPress)}
 				{renderIcon(iconName, iconType)}
 			</View>
 		);
@@ -203,7 +182,9 @@ const baseStyles = StyleSheet.create({
 		marginBottom: 16
 	},
 	bodyWithIdentity: {
+		flexDirection: 'column',
 		height: 42,
+		justifyContent: 'center',
 		paddingLeft: 72,
 		paddingRight: 32
 	},
@@ -241,10 +222,5 @@ const baseStyles = StyleSheet.create({
 	text: {
 		...fontStyles.h1,
 		textAlign: 'center'
-	},
-	touchable: {
-		flex: 1,
-		flexDirection: 'column',
-		justifyContent: 'center'
 	}
 });

src/constants.js

@@ -60,7 +60,7 @@ const unknownNetworkBase = {
 		prefix: 2,
 		protocol: NetworkProtocols.UNKNOWN,
 		secondaryColor: colors.card_bgSolid,
-		title: 'Unknown network'
+		title: 'Custom network'
 	}
 };
 

src/screens/AccountNetworkChooser.js

@@ -26,12 +26,10 @@ import {
 	NETWORK_LIST,
 	UnknownNetworkKeys,
 	SubstrateNetworkKeys,
-	NetworkProtocols,
-	defaultNetworkKey
+	NetworkProtocols
 } from '../constants';
 import {
 	navigateToPathsList,
-	navigateToRootPath,
 	navigateToSubstrateRoot,
 	unlockSeedPhrase
 } from '../util/navigationHelpers';
@@ -142,7 +140,7 @@ function AccountNetworkChooser({ navigation, accounts }) {
 			`//${pathId}`,
 			seedPhrase,
 			networkKey,
-			'Root'
+			`${networkParams.title} root`
 		);
 		onDerivationFinished(derivationSucceed, networkKey, true);
 	};
@@ -192,41 +190,14 @@ function AccountNetworkChooser({ navigation, accounts }) {
 			return <ScreenHeading title={'Create your first Keypair'} />;
 		} else if (shouldShowMoreNetworks) {
 			return (
-				<ScreenHeading
+				<IdentityHeading
 					title={'Choose Network'}
-					onPress={() => setShouldShowMoreNetworks(false)}
+					onPressBack={() => setShouldShowMoreNetworks(false)}
 				/>
 			);
 		} else {
 			const identityName = getIdentityName(currentIdentity, identities);
-			const rootAccount = currentIdentity.meta.get('');
-			const rootAddress = rootAccount ? rootAccount.address : '';
-			const onRootKeyPress = async () => {
-				if (rootAccount == null) {
-					const seedPhrase = await unlockSeedPhrase(navigation);
-					const derivationSucceed = await accounts.deriveNewPath(
-						'',
-						seedPhrase,
-						defaultNetworkKey,
-						''
-					);
-					if (!derivationSucceed) {
-						return alertPathDerivationError();
-					} else {
-						navigateToRootPath(navigation);
-					}
-				} else {
-					navigation.navigate('PathDetails', { path: '' });
-				}
-			};
-			return (
-				<IdentityHeading
-					title={identityName}
-					subtitle={rootAddress}
-					onPress={onRootKeyPress}
-					hasSubtitleIcon={true}
-				/>
-			);
+			return <IdentityHeading title={identityName} />;
 		}
 	};