Update headers with Etienne's work

MetaMask · May 12, 2020 · 3c618e2 · 3c618e2
1 parent 3f13d25
commit 3c618e2
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 72 deletions.
diff --git a/app/components/Views/ApproveView/Approve/index.js b/app/components/Views/ApproveView/Approve/index.js
@@ -10,29 +10,28 @@ import {
 	Alert,
 	InteractionManager
 } from 'react-native';
+import IonicIcon from 'react-native-vector-icons/Ionicons';
 import PropTypes from 'prop-types';
 import { getApproveNavbar } from '../../../UI/Navbar';
-import { colors, fontStyles, baseStyles } from '../../../../styles/common';
+import { colors, fontStyles } from '../../../../styles/common';
 import { connect } from 'react-redux';
 import { getHost } from '../../../../util/browser';
 import contractMap from 'eth-contract-metadata';
-import { safeToChecksumAddress, renderShortAddress, renderAccountName } from '../../../../util/address';
+import { safeToChecksumAddress, renderShortAddress } from '../../../../util/address';
 import Engine from '../../../../core/Engine';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import CustomGas from '../../SendFlow/CustomGas';
-import ActionModal from '../../../UI/ActionModal';
 import Modal from 'react-native-modal';
 import { strings } from '../../../../../locales/i18n';
 import { setTransactionObject } from '../../../../actions/transaction';
 import { BNToHex, hexToBN } from 'gaba/dist/util';
-import { renderFromWei, weiToFiatNumber, isBN, renderFromTokenMinimalUnit, isDecimal } from '../../../../util/number';
+import { renderFromWei, weiToFiatNumber, isBN, isDecimal } from '../../../../util/number';
 import { getTicker, decodeTransferData, generateApproveData } from '../../../../util/transactions';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import ErrorMessage from '../../SendFlow/ErrorMessage';
 import { showAlert } from '../../../../actions/alert';
 import Feather from 'react-native-vector-icons/Feather';
 import TransactionsNotificationManager from '../../../../core/TransactionsNotificationManager';
-import Identicon from '../../../UI/Identicon';
 import Analytics from '../../../../core/Analytics';
 import { ANALYTICS_EVENT_OPTS } from '../../../../util/analytics';
 import TransactionHeader from '../../../UI/TransactionHeader';
@@ -148,9 +147,12 @@ const styles = StyleSheet.create({
 	copyIcon: {
 		marginLeft: 8
 	},
-	customGasModalTitle: {
-		borderBottomColor: colors.grey100,
-		borderBottomWidth: 1
+	customGasHeader: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		width: '100%',
+		paddingBottom: 20
 	},
 	customGasModalTitleText: {
 		...fontStyles.bold,
@@ -229,30 +231,6 @@ const styles = StyleSheet.create({
 	errorMessageWrapper: {
 		marginTop: 16
 	},
-	fromGraphic: {
-		flex: 1,
-		borderColor: colors.grey100,
-		borderBottomWidth: 1,
-		alignItems: 'center',
-		flexDirection: 'row',
-		minHeight: 42,
-		paddingHorizontal: 16
-	},
-	addressText: {
-		...fontStyles.normal,
-		color: colors.black,
-		marginLeft: 8
-	},
-	tokenBalanceWrapper: {
-		flex: 1,
-		alignItems: 'flex-end'
-	},
-	tokenBalanceText: {
-		...fontStyles.normal,
-		color: colors.grey500,
-		fontSize: 14,
-		lineHeight: 20
-	},
 	bottomModal: {
 		justifyContent: 'flex-end',
 		margin: 0
@@ -283,18 +261,10 @@ class Approve extends PureComponent {
 		 * ETH to current currency conversion rate
 		 */
 		conversionRate: PropTypes.number,
-		/**
-		 * An object containing token balances for current account and network in the format address => balance
-		 */
-		contractBalances: PropTypes.object,
 		/**
 		 * Currency code of the currently-active currency
 		 */
 		currentCurrency: PropTypes.string,
-		/**
-		/* Identities object required to get account name
-		*/
-		identities: PropTypes.object,
 		/**
 		 * Transaction state
 		 */
@@ -528,44 +498,23 @@ class Approve extends PureComponent {
 		const {
 			host,
 			spendLimitUnlimitedSelected,
-			tokenDecimals,
 			tokenSymbol,
 			spendLimitCustomValue,
 			originalApproveAmount
 		} = this.state;
-		const {
-			identities,
-			transaction: { from, to },
-			contractBalances
-		} = this.props;
-		const checksummedTo = safeToChecksumAddress(to);
-		const tokenBalance =
-			checksummedTo in contractBalances
-				? renderFromTokenMinimalUnit(contractBalances[checksummedTo], tokenDecimals)
-				: 0;
 		return (
 			<View style={styles.section}>
-				<TouchableOpacity onPress={this.toggleEditPermission}>
-					<Text>Back</Text>
-				</TouchableOpacity>
-				<View style={styles.customGasModalTitle}>
+				<View style={styles.customGasHeader}>
+					{/* this needs a better style to actually be hitable */}
+					<TouchableOpacity onPress={this.toggleEditPermission}>
+						<IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} />
+					</TouchableOpacity>
 					<Text style={styles.customGasModalTitleText}>{strings('spend_limit_edition.title')}</Text>
+					{/* why is this here? */}
+					<IonicIcon name={'ios-arrow-back'} size={24} color={colors.white} />
 				</View>
 
 				<KeyboardAwareScrollView>
-					<View style={styles.fromGraphic}>
-						<Identicon address={from} diameter={18} />
-						<Text style={styles.addressText} numberOfLines={1}>
-							{renderAccountName(from, identities)}
-						</Text>
-						<View style={styles.tokenBalanceWrapper}>
-							<Text
-								style={styles.tokenBalanceText}
-								numberOfLines={1}
-							>{`${tokenBalance} ${tokenSymbol}`}</Text>
-						</View>
-					</View>
-
 					<View style={styles.spendLimitWrapper}>
 						<Text style={styles.spendLimitTitle}>{strings('spend_limit_edition.spend_limit')}</Text>
 						<Text style={styles.spendLimitSubtitle}>
@@ -771,9 +720,13 @@ class Approve extends PureComponent {
 						{viewDetails ? (
 							<>
 								<View style={styles.section}>
-									<TouchableOpacity onPress={this.toggleViewDetails}>
-										<Text>Back</Text>
-									</TouchableOpacity>
+									<View style={styles.customGasHeader}>
+										<TouchableOpacity onPress={this.toggleViewDetails}>
+											<IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} />
+										</TouchableOpacity>
+										<Text style={styles.customGasModalTitleText}>Transaction Details</Text>
+										<IonicIcon name={'ios-arrow-back'} size={24} color={colors.white} />
+									</View>
 									<View style={styles.sectionTitleRow}>
 										<FontAwesome5
 											name={'user-check'}

diff --git a/locales/en.json b/locales/en.json
@@ -543,7 +543,7 @@
 	"spend_limit_edition": {
 		"save": "Save",
 		"title": "Edit permission",
-		"spend_limit": "Spend limit edition",
+		"spend_limit": "Spend limit permission",
 		"allow": "Allow",
 		"allow_explanation": "to withdraw and spend up to the following amount:",
 		"unlimited": "Unlimited",