move duplicated code into component and fix merge error

src/components/AccountCard.js

@@ -29,6 +29,7 @@ import fontStyles from '../fontStyles';
 import TouchableItem from './TouchableItem';
 import colors from '../colors';
 import { getAddressFromAccountId } from '../util/identitiesUtils';
+import { AccountPrefixedTitle } from './AccountPrefixedTitle';
 
 export default class AccountCard extends React.PureComponent {
 	static propTypes = {
@@ -65,7 +66,7 @@ export default class AccountCard extends React.PureComponent {
 		const network =
 			NETWORK_LIST[networkKey] || NETWORK_LIST[NetworkProtocols.UNKNOWN];
 
-		const extractAddress = getAddressFromAccountId(accountId, network.protocol);
+		const extractAddress = getAddressFromAccountId(accountId);
 
 		return (
 			<TouchableItem
@@ -99,20 +100,7 @@ export default class AccountCard extends React.PureComponent {
 								</Text>
 							</View>
 						)}
-						<View style={{ flexDirection: 'row', marginTop: -2 }}>
-							<Text
-								numberOfLines={1}
-								style={[
-									fontStyles.t_codeS,
-									{ color: colors.bg_button, marginTop: 7 }
-								]}
-							>
-								{titlePrefix}
-							</Text>
-							<Text numberOfLines={1} style={fontStyles.h2}>
-								{title}
-							</Text>
-						</View>
+						<AccountPrefixedTitle title={title} titlePrefix={titlePrefix} />
 						{accountId !== '' && (
 							<Address address={extractAddress} protocol={network.protocol} />
 						)}

src/components/AccountPrefixedTitle.js

+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+'use strict';
+
+import React from 'react';
+import { Text, View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import fontStyles from '../fontStyles';
+import colors from '../colors';
+
+AccountPrefixedTitle.propTypes = {
+	title: PropTypes.string.isRequired,
+	titlePrefix: PropTypes.string
+};
+
+export function AccountPrefixedTitle({ titlePrefix, title }) {
+	return (
+		<View style={{ flexDirection: 'row' }}>
+			{titlePrefix && (
+				<Text
+					numberOfLines={1}
+					style={[
+						fontStyles.t_codeS,
+						{ color: colors.bg_button, marginTop: 5 }
+					]}
+				>
+					{titlePrefix}
+				</Text>
+			)}
+			<Text numberOfLines={1} style={[fontStyles.h2, { marginTop: -2 }]}>
+				{title}
+			</Text>
+		</View>
+	);
+}

src/components/PathCard.js

@@ -33,6 +33,7 @@ import Address from './Address';
 import colors from '../colors';
 import fontStyles from '../fontStyles';
 import TouchableItem from './TouchableItem';
+import { AccountPrefixedTitle } from './AccountPrefixedTitle';
 
 PathCard.propTypes = {
 	identity: PropTypes.object.isRequired,
@@ -82,22 +83,7 @@ export default function PathCard({
 							{network.title}
 						</Text>
 					</View>
-					<View style={{ flexDirection: 'row' }}>
-						{!!titlePrefix && (
-							<Text
-								numberOfLines={1}
-								style={[
-									fontStyles.t_codeS,
-									{ color: colors.bg_button, marginTop: 5 }
-								]}
-							>
-								{titlePrefix}
-							</Text>
-						)}
-						<Text numberOfLines={1} style={[fontStyles.h2, { marginTop: -2 }]}>
-							{pathName}
-						</Text>
-					</View>
+					<AccountPrefixedTitle title={pathName} titlePrefix={titlePrefix} />
 					<Address address={extractAddress} protocol={network.protocol} />
 				</View>
 				<View
@@ -127,25 +113,7 @@ export default function PathCard({
 						style={styles.icon}
 					/>
 					<View style={styles.desc}>
-						<View style={{ flexDirection: 'row' }}>
-							{!!titlePrefix && (
-								<Text
-									numberOfLines={1}
-									style={[
-										fontStyles.t_codeS,
-										{ color: colors.bg_button, marginTop: 5 }
-									]}
-								>
-									{titlePrefix}
-								</Text>
-							)}
-							<Text
-								numberOfLines={1}
-								style={[fontStyles.h2, { marginTop: -2 }]}
-							>
-								{pathName}
-							</Text>
-						</View>
+						<AccountPrefixedTitle title={pathName} titlePrefix={titlePrefix} />
 						<View style={{ alignItems: 'center', flexDirection: 'row' }}>
 							<AntIcon name="user" size={10} color={colors.bg_text_sec} />
 							<Text style={fontStyles.t_codeS}>{path}</Text>

src/screens/TxDetails.js

@@ -112,6 +112,7 @@ export class TxDetailsView extends React.PureComponent {
 			gasPrice,
 			prehash,
 			sender,
+			recipient,
 			value,
 			onNext
 		} = this.props;
@@ -153,10 +154,9 @@ export class TxDetailsView extends React.PureComponent {
 								/>
 								<Text style={styles.title}>Recipient</Text>
 								<CompatibleCard
-									account={sender}
+									account={recipient}
 									accountsStore={accountsStore}
 								/>
-								/>
 							</View>
 						) : (
 							<PayloadDetailsCard