Complete redesigns for approval flow

app/components/UI/AccountInfoCard/__snapshots__/index.test.js.snap

@@ -45,6 +45,7 @@ exports[`AccountInfoCard should render correctly 1`] = `
         numberOfLines={1}
         style={
           Object {
+            "color": "#000000",
             "fontFamily": "CircularStd-Medium",
             "fontSize": 16,
             "fontWeight": "600",
@@ -59,6 +60,7 @@ exports[`AccountInfoCard should render correctly 1`] = `
         numberOfLines={1}
         style={
           Object {
+            "color": "#000000",
             "flexGrow": 1,
             "fontFamily": "CircularStd-Medium",
             "fontSize": 16,
@@ -76,6 +78,7 @@ exports[`AccountInfoCard should render correctly 1`] = `
       style={
         Object {
           "alignSelf": "flex-start",
+          "color": "#000000",
           "fontFamily": "CircularStd-Medium",
           "fontSize": 14,
           "fontWeight": "100",

app/components/UI/AccountInfoCard/index.js

@@ -37,17 +37,20 @@ const styles = StyleSheet.create({
 		maxWidth: Device.isMediumDevice() ? '35%' : '45%',
 		...fontStyles.bold,
 		fontSize: 16,
-		marginRight: 2
+		marginRight: 2,
+		color: colors.black
 	},
 	accountAddress: {
 		flexGrow: 1,
 		...fontStyles.bold,
-		fontSize: 16
+		fontSize: 16,
+		color: colors.black
 	},
 	balanceText: {
 		...fontStyles.thin,
 		fontSize: 14,
-		alignSelf: 'flex-start'
+		alignSelf: 'flex-start',
+		color: colors.black
 	}
 });
 

app/components/UI/ConnectHeader/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import PropTypes from 'prop-types';
+import IonicIcon from 'react-native-vector-icons/Ionicons';
+import { colors, fontStyles } from '../../../styles/common';
+
+const styles = StyleSheet.create({
+	header: {
+		width: '100%',
+		position: 'relative',
+		paddingBottom: 20
+	},
+	title: {
+		...fontStyles.bold,
+		color: colors.black,
+		fontSize: 14,
+		textAlign: 'center',
+		paddingVertical: 12
+	},
+	back: {
+		position: 'absolute',
+		zIndex: 1,
+		paddingVertical: 10,
+		paddingRight: 10
+	}
+});
+
+class ConnectHeader extends Component {
+	static propTypes = {
+		action: PropTypes.func.isRequired,
+		title: PropTypes.string.isRequired
+	};
+
+	render() {
+		const { title, action } = this.props;
+		return (
+			<View style={styles.header}>
+				<TouchableOpacity style={styles.back} onPress={action}>
+					<IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} />
+				</TouchableOpacity>
+				<Text style={styles.title}>{title}</Text>
+			</View>
+		);
+	}
+}
+
+export default ConnectHeader;

app/components/UI/TransactionHeader/index.js

@@ -94,12 +94,13 @@ class TransactionHeader extends PureComponent {
 	 */
 	renderSecureIcon = () => {
 		const { url } = this.props.currentPageInformation;
-		const secureIcon =
-			getUrlObj(url).protocol === 'https:' ? (
-				<FontAwesome name={'lock'} size={15} style={styles.secureIcon} />
-			) : (
-				<FontAwesome name={'warning'} size={15} style={styles.secureIcon} />
-			);
+		const secureIcon = (
+			<FontAwesome
+				name={getUrlObj(url).protocol === 'https:' ? 'lock' : 'warning'}
+				size={15}
+				style={styles.secureIcon}
+			/>
+		);
 		return secureIcon;
 	};
 

app/components/UI/TransactionReview/TransactionReivewDetailsCard/index.js

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+import { colors, fontStyles } from '../../../../styles/common';
+import PropTypes from 'prop-types';
+import IonicIcon from 'react-native-vector-icons/Ionicons';
+import { strings } from '../../../../../locales/i18n';
+import Feather from 'react-native-vector-icons/Feather';
+import ConnectHeader from '../../../UI/ConnectHeader';
+
+const styles = StyleSheet.create({
+	uppercase: {
+		textTransform: 'capitalize'
+	},
+	viewData: {
+		borderWidth: 1,
+		borderColor: colors.grey200,
+		borderRadius: 10,
+		padding: 16,
+		marginTop: 20
+	},
+	viewDataRow: {
+		display: 'flex',
+		flexDirection: 'row',
+		flexWrap: 'wrap'
+	},
+	viewDataTitle: {
+		...fontStyles.bold,
+		color: colors.black,
+		fontSize: 14
+	},
+	viewDataText: {
+		marginTop: 20
+	},
+	viewDataArrow: {
+		marginLeft: 'auto'
+	},
+	transactionDetails: {
+		borderWidth: 1,
+		borderColor: colors.grey200,
+		borderRadius: 10,
+		padding: 16
+	},
+	transactionDetailsRow: {
+		display: 'flex',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		paddingVertical: 4
+	},
+	transactionDetailsTextLeft: {
+		...fontStyles.thin,
+		color: colors.black,
+		fontSize: 14
+	},
+	transactionDetailsTextRight: {
+		...fontStyles.bold,
+		color: colors.black,
+		fontSize: 14,
+		textAlign: 'right',
+		flexDirection: 'row',
+		marginLeft: 'auto'
+	},
+	section: {
+		minWidth: '100%',
+		width: '100%'
+	},
+	copyIcon: {
+		marginLeft: 1,
+		marginTop: 2
+	},
+	address: {
+		...fontStyles.bold,
+		color: colors.blue
+	}
+});
+
+export default class TransactionReviewDetailsCard extends Component {
+	static propTypes = {
+		toggleViewDetails: PropTypes.func,
+		copyContractAddress: PropTypes.func,
+		toggleViewData: PropTypes.func,
+		address: PropTypes.string,
+		host: PropTypes.string,
+		allowance: PropTypes.string,
+		tokenSymbol: PropTypes.string,
+		data: PropTypes.string,
+		displayViewData: PropTypes.bool,
+		method: PropTypes.string
+	};
+
+	render() {
+		const {
+			toggleViewDetails,
+			toggleViewData,
+			copyContractAddress,
+			address,
+			host,
+			allowance,
+			tokenSymbol,
+			data,
+			method,
+			displayViewData
+		} = this.props;
+
+		return (
+			<>
+				<View style={styles.section}>
+					<ConnectHeader
+						action={toggleViewDetails}
+						title={strings('spend_limit_edition.transaction_details')}
+					/>
+					<View style={styles.transactionDetails}>
+						<View style={styles.transactionDetailsRow}>
+							<Text style={styles.transactionDetailsTextLeft}>
+								{strings('spend_limit_edition.site_url')}
+							</Text>
+							<Text style={styles.transactionDetailsTextRight}>{host}</Text>
+						</View>
+						<View style={styles.transactionDetailsRow}>
+							<Text style={styles.transactionDetailsTextLeft}>
+								{strings('spend_limit_edition.contract_address')}
+							</Text>
+							<View style={styles.transactionDetailsTextRight}>
+								<Text style={styles.address}>{address}</Text>
+								<Feather
+									name="copy"
+									size={16}
+									color={colors.blue}
+									style={styles.copyIcon}
+									onPress={copyContractAddress}
+								/>
+							</View>
+						</View>
+						<View style={styles.transactionDetailsRow}>
+							<Text style={styles.transactionDetailsTextLeft}>
+								{strings('spend_limit_edition.allowance')}
+							</Text>
+							<Text style={styles.transactionDetailsTextRight}>
+								{allowance} {tokenSymbol}
+							</Text>
+						</View>
+					</View>
+					<View style={styles.viewData}>
+						<TouchableOpacity style={styles.viewDataRow} onPress={toggleViewData}>
+							<Text style={styles.viewDataTitle}>{strings('spend_limit_edition.view_data')}</Text>
+							<View style={styles.viewDataArrow}>
+								<IonicIcon
+									name={`ios-arrow-${displayViewData ? 'up' : 'down'}`}
+									size={16}
+									color={colors.grey500}
+								/>
+							</View>
+						</TouchableOpacity>
+						{displayViewData ? (
+							<>
+								<Text style={[styles.viewDataText, styles.uppercase]}>
+									{strings('spend_limit_edition.function')}: {method}
+								</Text>
+								<Text style={styles.viewDataText}>{data}</Text>
+							</>
+						) : null}
+					</View>
+				</View>
+			</>
+		);
+	}
+}

app/components/Views/ApproveView/Approve/__snapshots__/index.test.js.snap

@@ -10,11 +10,7 @@ exports[`Approve should render correctly 1`] = `
     }
   }
   accountsLength={1}
-  contractBalances={
-    Object {
-      "0x2": "0",
-    }
-  }
+  activeTabUrl="https://metamask.github.io/test-dapp/"
   conversionRate={100}
   currentCurrency="USD"
   identities={
@@ -24,6 +20,7 @@ exports[`Approve should render correctly 1`] = `
       },
     }
   }
+  primaryCurrency="Fiat"
   setTransactionObject={[Function]}
   showAlert={[Function]}
   ticker="ETH"