Move "Advanced" toggle above lockup and update wording

MetaMask · Mar 27, 2020 · d5efd0b · d5efd0b
1 parent 7d16404
commit d5efd0b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 21 deletions.
diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js
@@ -16,12 +16,21 @@ import { getTicker } from '../../../util/transactions';
 import Radio from '../Radio';
 
 const styles = StyleSheet.create({
+	labelText: {
+		...fontStyles.bold,
+		color: colors.grey400,
+		fontSize: 16
+	},
 	titleContainer: {
 		flex: 1,
 		width: '100%',
 		flexDirection: 'row',
 		justifyContent: 'space-between'
 	},
+	titleMargin: {
+		marginBottom: 10,
+		alignItems: 'flex-end'
+	},
 	radio: {
 		marginLeft: 'auto'
 	},
@@ -49,8 +58,7 @@ const styles = StyleSheet.create({
 	},
 	advancedOptions: {
 		textAlign: 'right',
-		alignItems: 'flex-end',
-		marginTop: 10
+		alignItems: 'flex-end'
 	},
 	slow: {
 		borderBottomStartRadius: 6,
@@ -81,7 +89,8 @@ const styles = StyleSheet.create({
 		textTransform: 'none'
 	},
 	textAdvancedOptions: {
-		color: colors.blue
+		color: colors.blue,
+		fontSize: 14
 	},
 	gasInput: {
 		...fontStyles.bold,
@@ -135,7 +144,11 @@ class CustomGas extends PureComponent {
 		/**
 		 * Current provider ticker
 		 */
-		ticker: PropTypes.string
+		ticker: PropTypes.string,
+		/**
+		 * Displayed when there is a gas station error
+		 */
+		gasError: PropTypes.string
 	};
 
 	state = {
@@ -378,18 +391,25 @@ class CustomGas extends PureComponent {
 	render = () => {
 		if (this.state.ready) {
 			const { advancedCustomGas } = this.state;
+			const { gasError } = this.props;
 			return (
 				<View style={baseStyles.flexGrow}>
-					{advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()}
-					<View style={styles.advancedOptions}>
-						<TouchableOpacity onPress={this.onAdvancedOptions}>
-							<Text style={styles.textAdvancedOptions}>
-								{advancedCustomGas
-									? strings('custom_gas.hide_advanced_options')
-									: strings('custom_gas.advanced_options')}
-							</Text>
-						</TouchableOpacity>
+					<View style={[styles.titleContainer, styles.titleMargin]}>
+						<View>
+							<Text style={styles.labelText}>{strings('transaction.gas_fee')}:</Text>
+							{gasError ? <Text style={styles.error}>{gasError}</Text> : null}
+						</View>
+						<View style={styles.advancedOptions}>
+							<TouchableOpacity onPress={this.onAdvancedOptions}>
+								<Text style={styles.textAdvancedOptions}>
+									{advancedCustomGas
+										? strings('custom_gas.hide_advanced_options')
+										: strings('custom_gas.advanced_options')}
+								</Text>
+							</TouchableOpacity>
+						</View>
 					</View>
+					{advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()}
 				</View>
 			);
 		}

diff --git a/app/components/UI/TransactionEdit/index.js b/app/components/UI/TransactionEdit/index.js
@@ -429,17 +429,12 @@ class TransactionEdit extends PureComponent {
 						{!paymentChannelTransaction && (
 							<>
 								<View style={[styles.formRow, styles.row, styles.notAbsolute]}>
-									<View>
-										<Text style={styles.labelText}>{strings('transaction.gas_fee')}:</Text>
-										{gasError ? <Text style={styles.error}>{gasError}</Text> : null}
-									</View>
-								</View>
-								<View style={[styles.formRow, styles.row]}>
 									<CustomGas
 										handleGasFeeSelection={this.updateGas}
 										totalGas={totalGas}
 										gas={gas}
 										gasPrice={gasPrice}
+										gasError={gasError}
 										onPress={this.closeDropdowns}
 									/>
 								</View>

diff --git a/locales/en.json b/locales/en.json
@@ -511,8 +511,8 @@
 		"not_enough_for_gas": "You have 0 ETH in your account to pay for transaction fees. Buy some ETH or deposit from another account."
 	},
 	"custom_gas": {
-		"advanced_options": "Show advanced options",
-		"hide_advanced_options": "Hide advanced options",
+		"advanced_options": "Advanced",
+		"hide_advanced_options": "Hide advanced",
 		"gas_limit": "Gas Limit:",
 		"gas_price": "Gas Price: (GWEI)",
 		"warning_gas_limit": "Gas limit must be greater than 20999 and less than 7920027",