Feature/high gas warn

app/components/UI/ApproveTransactionReview/index.js

@@ -93,7 +93,7 @@ const styles = StyleSheet.create({
 		color: colors.blue,
 		fontSize: 12,
 		lineHeight: 16,
-		marginTop: 20,
+		marginTop: 8,
 		textAlign: 'center'
 	},
 	actionTouchable: {
@@ -115,7 +115,6 @@ const styles = StyleSheet.create({
 		textAlign: 'right'
 	},
 	errorWrapper: {
-		// marginHorizontal: 24,
 		marginTop: 12,
 		paddingHorizontal: 10,
 		paddingVertical: 8,
@@ -205,6 +204,10 @@ class ApproveTransactionReview extends PureComponent {
 		 * Error coming from gas component
 		 */
 		gasError: PropTypes.string,
+		/**
+		 * Warning coming from high gas set in CustomGas component
+		 */
+		warningGasPriceHigh: PropTypes.string,
 		/**
 		 * Primary currency, either ETH or Fiat
 		 */
@@ -485,7 +488,8 @@ class ApproveTransactionReview extends PureComponent {
 			activeTabUrl,
 			transaction: { origin },
 			network,
-			over
+			over,
+			warningGasPriceHigh
 		} = this.props;
 		const is_main_net = isMainNet(network);
 		const isFiat = primaryCurrency.toLowerCase() === 'fiat';
@@ -564,18 +568,6 @@ class ApproveTransactionReview extends PureComponent {
 														</View>
 													</View>
 												</TouchableOpacity>
-												{!gasError && (
-													<TouchableOpacity
-														style={styles.actionTouchable}
-														onPress={this.toggleViewDetails}
-													>
-														<View style={styles.viewDetailsWrapper}>
-															<Text style={styles.viewDetailsText}>
-																{strings('spend_limit_edition.view_details')}
-															</Text>
-														</View>
-													</TouchableOpacity>
-												)}
 												{gasError && (
 													<View style={styles.errorWrapper}>
 														<TouchableOpacity onPress={errorPress}>
@@ -589,6 +581,23 @@ class ApproveTransactionReview extends PureComponent {
 														</TouchableOpacity>
 													</View>
 												)}
+												{!!warningGasPriceHigh && (
+													<View style={styles.errorWrapper}>
+														<Text style={styles.error}>{warningGasPriceHigh}</Text>
+													</View>
+												)}
+												{!gasError && (
+													<TouchableOpacity
+														style={styles.actionTouchable}
+														onPress={this.toggleViewDetails}
+													>
+														<View>
+															<Text style={styles.viewDetailsText}>
+																{strings('spend_limit_edition.view_details')}
+															</Text>
+														</View>
+													</TouchableOpacity>
+												)}
 											</View>
 										</View>
 									</View>

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

@@ -534,6 +534,7 @@ exports[`CustomGas should render correctly 1`] = `
             "borderColor": "#d6d9dc",
             "borderRadius": 8,
             "borderWidth": 1,
+            "color": "#000000",
             "flex": 1,
             "fontFamily": "EuclidCircularB-Bold",
             "fontSize": 14,
@@ -579,6 +580,7 @@ exports[`CustomGas should render correctly 1`] = `
             "borderColor": "#d6d9dc",
             "borderRadius": 8,
             "borderWidth": 1,
+            "color": "#000000",
             "flex": 1,
             "fontFamily": "EuclidCircularB-Bold",
             "fontSize": 14,
@@ -598,6 +600,7 @@ exports[`CustomGas should render correctly 1`] = `
           "alignSelf": "center",
           "justifyContent": "center",
           "marginBottom": 10,
+          "textAlign": "center",
           "width": "100%",
         }
       }
@@ -611,6 +614,7 @@ exports[`CustomGas should render correctly 1`] = `
               "borderColor": "#D73A49",
               "borderRadius": 8,
               "borderWidth": 1,
+              "flexWrap": "wrap",
               "justifyContent": "center",
               "paddingHorizontal": 10,
               "paddingVertical": 8,
@@ -627,6 +631,7 @@ exports[`CustomGas should render correctly 1`] = `
               "fontFamily": "EuclidCircularB-Regular",
               "fontSize": 12,
               "fontWeight": "400",
+              "textAlign": "center",
             }
           }
         >

app/components/UI/CustomGas/index.js

@@ -66,6 +66,7 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		justifyContent: 'center',
 		alignSelf: 'center',
+		textAlign: 'center',
 		width: '100%',
 		marginBottom: 10
 	},
@@ -78,11 +79,13 @@ const styles = StyleSheet.create({
 		borderRadius: 8,
 		borderWidth: 1,
 		justifyContent: 'center',
-		alignItems: 'center'
+		alignItems: 'center',
+		flexWrap: 'wrap'
 	},
 	warningText: {
 		color: colors.red,
 		fontSize: 12,
+		textAlign: 'center',
 		...fontStyles.normal
 	},
 	invisible: {
@@ -180,6 +183,20 @@ const styles = StyleSheet.create({
 		...fontStyles.bold,
 		backgroundColor: colors.white,
 		borderColor: colors.grey100,
+		color: colors.black,
+		borderRadius: 8,
+		borderWidth: 1,
+		fontSize: 14,
+		paddingHorizontal: 10,
+		paddingVertical: 8,
+		position: 'relative'
+	},
+	gasInputError: {
+		flex: 1,
+		...fontStyles.bold,
+		backgroundColor: colors.white,
+		borderColor: colors.grey100,
+		color: colors.red,
 		borderRadius: 8,
 		borderWidth: 1,
 		fontSize: 14,
@@ -307,6 +324,7 @@ class CustomGas extends PureComponent {
 		customGasLimitBN: this.props.gas,
 		warningGasLimit: '',
 		warningGasPrice: '',
+		warningGasPriceHigh: '',
 		warningSufficientFunds: '',
 		headerHeight: null,
 		gasInputHeight: null
@@ -355,7 +373,8 @@ class CustomGas extends PureComponent {
 		this.setState({
 			gasSpeedSelected: 'fast',
 			customGasPrice: fastGwei,
-			customGasPriceBNWei: gasPriceBN
+			customGasPriceBNWei: gasPriceBN,
+			warningGasPriceHigh: ''
 		});
 	};
 
@@ -369,7 +388,8 @@ class CustomGas extends PureComponent {
 		this.setState({
 			gasSpeedSelected: 'average',
 			customGasPrice: averageGwei,
-			customGasPriceBNWei: gasPriceBN
+			customGasPriceBNWei: gasPriceBN,
+			warningGasPriceHigh: ''
 		});
 	};
 
@@ -383,7 +403,8 @@ class CustomGas extends PureComponent {
 		this.setState({
 			gasSpeedSelected: 'slow',
 			customGasPrice: safeLowGwei,
-			customGasPriceBNWei: gasPriceBN
+			customGasPriceBNWei: gasPriceBN,
+			warningGasPriceHigh: ''
 		});
 	};
 
@@ -441,8 +462,19 @@ class CustomGas extends PureComponent {
 		const gasPriceBNWei = apiEstimateModifiedToWEI(gasPrice);
 		const warningSufficientFunds = this.hasSufficientFunds(customGasLimitBN, gasPriceBNWei);
 		let warningGasPrice;
+		let warningGasPriceHigh = '';
 		if (parseInt(gasPrice) < parseInt(this.props.basicGasEstimates.safeLowGwei))
 			warningGasPrice = strings('transaction.low_gas_price');
+		//Warning should be displayed when the gas fee is 1.5 times higher than the fast rate
+		if (parseInt(gasPrice) > parseInt(this.props.basicGasEstimates.fastGwei) * 1.5) {
+			const currentGasPrice = getRenderableFiatGasFee(
+				gasPrice,
+				this.props.conversionRate,
+				this.props.currentCurrency,
+				customGasLimitBN
+			);
+			warningGasPriceHigh = strings('transaction.high_gas_price', { currentGasPrice });
+		}
 		if (!value || value === '' || !isDecimal(value) || value <= 0)
 			warningGasPrice = strings('transaction.invalid_gas_price');
 		if (gasPriceBNWei && !isBN(gasPriceBNWei)) warningGasPrice = strings('transaction.invalid_gas_price');
@@ -451,13 +483,14 @@ class CustomGas extends PureComponent {
 			customGasPriceBNWei: gasPriceBNWei,
 			customGasPriceBN: gasPriceBN,
 			warningGasPrice,
+			warningGasPriceHigh,
 			warningSufficientFunds
 		});
 	};
 
 	//Handle gas fee selection when save button is pressed instead of everytime a change is made, otherwise cannot switch back to review mode if there is an error
 	saveCustomGasSelection = () => {
-		const { gasSpeedSelected, customGasLimit, customGasPriceBNWei } = this.state;
+		const { gasSpeedSelected, customGasLimit, customGasPrice } = this.state;
 		const {
 			review,
 			gas,
@@ -466,14 +499,23 @@ class CustomGas extends PureComponent {
 			basicGasEstimates: { fastGwei, averageGwei, safeLowGwei }
 		} = this.props;
 		if (advancedCustomGas) {
-			handleGasFeeSelection(new BN(customGasLimit), customGasPriceBNWei, {
-				mode: 'advanced'
-			});
+			handleGasFeeSelection(
+				new BN(customGasLimit),
+				apiEstimateModifiedToWEI(customGasPrice),
+				this.state.warningGasPriceHigh,
+				{
+					mode: 'advanced'
+				}
+			);
 		} else {
 			const mode = { mode: gasSpeedSelected };
-			if (gasSpeedSelected === 'slow') handleGasFeeSelection(gas, apiEstimateModifiedToWEI(safeLowGwei), mode);
-			if (gasSpeedSelected === 'average') handleGasFeeSelection(gas, apiEstimateModifiedToWEI(averageGwei), mode);
-			if (gasSpeedSelected === 'fast') handleGasFeeSelection(gas, apiEstimateModifiedToWEI(fastGwei), mode);
+			const noGasWarning = '';
+			if (gasSpeedSelected === 'slow')
+				handleGasFeeSelection(gas, apiEstimateModifiedToWEI(safeLowGwei), noGasWarning, mode);
+			if (gasSpeedSelected === 'average')
+				handleGasFeeSelection(gas, apiEstimateModifiedToWEI(averageGwei), noGasWarning, mode);
+			if (gasSpeedSelected === 'fast')
+				handleGasFeeSelection(gas, apiEstimateModifiedToWEI(fastGwei), noGasWarning, mode);
 		}
 		review();
 	};
@@ -585,10 +627,11 @@ class CustomGas extends PureComponent {
 	};
 
 	renderCustomGasInput = () => {
-		const { customGasLimitBN, customGasPriceBNWei, customGasPriceBN } = this.state;
+		const { customGasLimitBN, customGasPriceBNWei, customGasPriceBN, warningGasPriceHigh } = this.state;
 		const { generateTransform } = this.props;
 		const totalGas = customGasLimitBN && customGasLimitBN.mul(customGasPriceBNWei);
 		const ticker = getTicker(this.props.ticker);
+
 		return (
 			<Animated.View
 				style={[
@@ -619,7 +662,7 @@ class CustomGas extends PureComponent {
 					<Text style={styles.advancedOptionsText}>{strings('custom_gas.gas_price')}</Text>
 					<TextInput
 						keyboardType="numeric"
-						style={styles.gasInput}
+						style={warningGasPriceHigh ? styles.gasInputError : styles.gasInput}
 						onChangeText={this.onGasPriceChange}
 						value={customGasPriceBN ? customGasPriceBN.toString() : ''}
 					/>
@@ -630,9 +673,10 @@ class CustomGas extends PureComponent {
 	};
 
 	renderGasError = () => {
-		const { warningGasLimit, warningGasPrice, warningSufficientFunds } = this.state;
+		const { warningGasLimit, warningGasPrice, warningGasPriceHigh, warningSufficientFunds } = this.state;
 		const { gasError } = this.props;
-		const gasErrorMessage = warningGasPrice || warningGasLimit || warningSufficientFunds || gasError;
+		const gasErrorMessage =
+			warningGasPrice || warningGasLimit || warningSufficientFunds || warningGasPriceHigh || gasError;
 		return (
 			<View style={styles.warningWrapper}>
 				<View style={[styles.warningTextWrapper, !gasErrorMessage ? styles.invisible : null]}>

app/components/UI/CustomGas/index.test.js

@@ -44,6 +44,7 @@ describe('CustomGas', () => {
 				generateTransform={generateTransform}
 				gas={new BN(0)}
 				gasPrice={new BN(0)}
+				warningGasPriceHigh=""
 			/>,
 			{
 				context: { store: mockStore(initialState) }

app/components/UI/Swaps/QuotesView.js

@@ -308,6 +308,8 @@ function SwapsQuotesView({
 	const [apiGasPrice] = useGasPrice();
 	const [customGasPrice, setCustomGasPrice] = useState(null);
 	const [customGasLimit, setCustomGasLimit] = useState(null);
+	const [warningGasPriceHigh, setWarningGasPriceHigh] = useState(null);
+
 	// TODO: use this variable in the future when calculating savings
 	const [isSaving] = useState(false);
 	const [isInFetch, setIsInFetch] = useState(false);
@@ -657,10 +659,11 @@ function SwapsQuotesView({
 	]);
 
 	const onHandleGasFeeSelection = useCallback(
-		(customGasLimit, customGasPrice, details) => {
+		(customGasLimit, customGasPrice, warningGasPriceHigh, details) => {
 			const { SwapsController } = Engine.context;
 			const newGasLimit = new BigNumber(customGasLimit);
 			const newGasPrice = new BigNumber(customGasPrice);
+			setWarningGasPriceHigh(warningGasPriceHigh);
 			if (newGasPrice.toString(16) !== gasPrice) {
 				setCustomGasPrice(newGasPrice);
 				SwapsController.updateQuotesWithGasPrice(newGasPrice.toString(16));
@@ -1035,7 +1038,13 @@ function SwapsQuotesView({
 						</Alert>
 					</View>
 				)}
-
+				{!!warningGasPriceHigh && !(!hasEnoughTokenBalance || !hasEnoughEthBalance) && (
+					<View style={styles.alertBar}>
+						<Alert small type="error">
+							<Text reset>{warningGasPriceHigh}</Text>
+						</Alert>
+					</View>
+				)}
 				{!!selectedQuote && hasEnoughTokenBalance && hasEnoughEthBalance && shouldDisplaySlippage && (
 					<View style={styles.alertBar}>
 						<ActionAlert

app/components/UI/TransactionEditor/index.js

@@ -179,9 +179,15 @@ class TransactionEditor extends PureComponent {
 	 *
 	 * @param {object} gasLimit - BN object containing gasLimit value
 	 * @param {object} gasPrice - BN object containing gasPrice value
+	 * @param {object} warningGasPriceHigh - string object warning for custom gas price set higher than 'Fast'
 	 */
-	handleGasFeeSelection = (gasLimit, gasPrice) => {
-		this.props.setTransactionObject({ gas: gasLimit, gasPrice });
+	handleGasFeeSelection = (gasLimit, gasPrice, warningGasPriceHigh) => {
+		const transactionObject = {
+			gas: gasLimit,
+			gasPrice,
+			warningGasPriceHigh
+		};
+		this.props.setTransactionObject(transactionObject);
 	};
 
 	/**
@@ -584,8 +590,8 @@ class TransactionEditor extends PureComponent {
 		return amountError || gasError || toAddressError;
 	};
 
-	updateGas = async (gas, gasLimit) => {
-		await this.handleGasFeeSelection(gas, gasLimit);
+	updateGas = async (gas, gasLimit, warningGasPriceHigh) => {
+		this.handleGasFeeSelection(gas, gasLimit, warningGasPriceHigh);
 		const gasError = this.validateGas();
 		this.setState({ gasError });
 	};