[EIP1559] UI adjustments

app/components/Base/RangeInput.js

@@ -105,9 +105,15 @@ const RangeInput = ({
 	const changeValue = useCallback(
 		(newValue, dontEmptyError) => {
 			if (!dontEmptyError) setErrorState('');
-			onChangeValue?.(newValue);
+			const cleanValue = newValue?.replace?.(',', '.');
+			if (cleanValue && new BigNumber(cleanValue).isNaN()) {
+				setErrorState(`${name} must be a number`);
+				return;
+			}
+
+			onChangeValue?.(cleanValue);
 		},
-		[onChangeValue]
+		[name, onChangeValue]
 	);
 
 	const increaseNumber = useCallback(() => {

app/components/UI/ApproveTransactionReview/index.js

@@ -28,7 +28,6 @@ import { ANALYTICS_EVENT_OPTS } from '../../../util/analytics';
 import AnalyticsV2 from '../../../util/analyticsV2';
 import TransactionHeader from '../../UI/TransactionHeader';
 import AccountInfoCard from '../../UI/AccountInfoCard';
-import IonicIcon from 'react-native-vector-icons/Ionicons';
 import TransactionReviewDetailsCard from '../../UI/TransactionReview/TransactionReivewDetailsCard';
 import Device from '../../../util/Device';
 import AppConstants from '../../../core/AppConstants';
@@ -39,26 +38,12 @@ import scaling from '../../../util/scaling';
 import { capitalize } from '../../../util/general';
 import EditPermission, { MINIMUM_VALUE } from './EditPermission';
 import Logger from '../../../util/Logger';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import InfoModal from '../Swaps/components/InfoModal';
 import Text from '../../Base/Text';
 import TransactionReviewEIP1559 from '../../UI/TransactionReview/TransactionReviewEIP1559';
-import FadeAnimationView from '../FadeAnimationView';
 
 const { hexToBN } = util;
 const styles = StyleSheet.create({
-	networkFee: {
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		borderWidth: 1,
-		borderColor: colors.grey200,
-		borderRadius: 10,
-		padding: 16
-	},
-	networkFeeArrow: {
-		paddingLeft: 20,
-		marginTop: 2
-	},
 	section: {
 		minWidth: '100%',
 		width: '100%',
@@ -106,20 +91,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'column',
 		alignItems: 'center'
 	},
-	sectionLeft: {
-		...fontStyles.bold,
-		color: colors.black,
-		fontSize: 14,
-		flex: 1
-	},
-	sectionRight: {
-		...fontStyles.bold,
-		color: colors.black,
-		fontSize: 14,
-		flex: 1,
-		textTransform: 'uppercase',
-		textAlign: 'right'
-	},
 	errorWrapper: {
 		marginTop: 12,
 		paddingHorizontal: 10,
@@ -150,18 +121,6 @@ const styles = StyleSheet.create({
 	},
 	paddingHorizontal: {
 		paddingHorizontal: 16
-	},
-	gasInfoContainer: {
-		paddingHorizontal: 2
-	},
-	gasInfoIcon: {
-		color: colors.blue
-	},
-	hitSlop: {
-		top: 10,
-		left: 10,
-		bottom: 10,
-		right: 10
 	}
 });
 
@@ -277,7 +236,11 @@ class ApproveTransactionReview extends PureComponent {
 		/**
 		 * Boolean to determine if the animation is happening
 		 */
-		isAnimating: PropTypes.bool
+		isAnimating: PropTypes.bool,
+		/**
+		 * If the gas estimations are ready
+		 */
+		gasEstimationReady: PropTypes.bool
 	};
 
 	state = {
@@ -561,7 +524,8 @@ class ApproveTransactionReview extends PureComponent {
 			onUpdatingValuesStart,
 			onUpdatingValuesEnd,
 			animateOnChange,
-			isAnimating
+			isAnimating,
+			gasEstimationReady
 		} = this.props;
 		const is_main_net = isMainNet(network);
 		const originIsDeeplink = origin === ORIGIN_DEEPLINK || origin === ORIGIN_QR_CODE;
@@ -630,44 +594,26 @@ class ApproveTransactionReview extends PureComponent {
 												onUpdatingValuesEnd={onUpdatingValuesEnd}
 												animateOnChange={animateOnChange}
 												isAnimating={isAnimating}
+												gasEstimationReady={gasEstimationReady}
 											/>
 										) : (
-											<TouchableOpacity onPress={this.edit} disabled={isAnimating}>
-												<View style={styles.networkFee}>
-													<Text reset style={styles.sectionLeft}>
-														{strings('transaction.transaction_fee')}
-														<TouchableOpacity
-															style={styles.gasInfoContainer}
-															onPress={this.toggleGasTooltip}
-															hitSlop={styles.hitSlop}
-														>
-															<MaterialCommunityIcons
-																name="information"
-																size={13}
-																style={styles.gasInfoIcon}
-															/>
-														</TouchableOpacity>
-													</Text>
-													<FadeAnimationView
-														onAnimationStart={onUpdatingValuesStart}
-														onAnimationEnd={onUpdatingValuesEnd}
-														animateOnChange={animateOnChange}
-														valueToWatch={LegacyGasData.transactionFee}
-													>
-														<Text reset style={styles.sectionRight}>
-															{LegacyGasData.transactionFee} (
-															{LegacyGasData.transactionFeeFiat})
-														</Text>
-													</FadeAnimationView>
-													<View style={styles.networkFeeArrow}>
-														<IonicIcon
-															name="ios-arrow-forward"
-															size={16}
-															color={colors.grey00}
-														/>
-													</View>
-												</View>
-											</TouchableOpacity>
+											<TransactionReviewEIP1559
+												totalNative={LegacyGasData.transactionTotalAmount}
+												totalConversion={LegacyGasData.transactionTotalAmountFiat}
+												gasFeeNative={LegacyGasData.transactionFee}
+												gasFeeConversion={LegacyGasData.transactionFeeFiat}
+												primaryCurrency={primaryCurrency}
+												hideTotal
+												noMargin
+												onEdit={this.edit}
+												over={Boolean(LegacyGasData.error)}
+												onUpdatingValuesStart={this.onUpdatingValuesStart}
+												onUpdatingValuesEnd={this.onUpdatingValuesEnd}
+												animateOnChange={animateOnChange}
+												isAnimating={isAnimating}
+												gasEstimationReady={gasEstimationReady}
+												legacy
+											/>
 										)}
 
 										{gasError && (

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

@@ -95,6 +95,7 @@ exports[`EditGasFee1559 should render correctly 1`] = `
               green={false}
               link={false}
               modal={false}
+              noMargin={true}
               numberOfLines={1}
               primary={false}
               red={false}
@@ -125,12 +126,18 @@ exports[`EditGasFee1559 should render correctly 1`] = `
             green={false}
             link={false}
             modal={false}
+            noMargin={true}
             primary={false}
             red={false}
             reset={false}
             right={false}
             small={false}
             strikethrough={false}
+            style={
+              Object {
+                "marginBottom": 6,
+              }
+            }
             underline={false}
             upper={false}
           >
@@ -143,6 +150,7 @@ exports[`EditGasFee1559 should render correctly 1`] = `
               green={false}
               link={false}
               modal={false}
+              noMargin={true}
               primary={false}
               red={false}
               reset={false}
@@ -155,13 +163,12 @@ exports[`EditGasFee1559 should render correctly 1`] = `
               Max fee:
 
             </Text>
-             (
-            )
+
           </Text>
           <Text
             black={false}
             blue={false}
-            bold={false}
+            bold={true}
             centered={false}
             disclaimer={false}
             green={false}

app/components/UI/EditGasFee1559/index.js

@@ -106,6 +106,9 @@ const styles = StyleSheet.create({
 	},
 	dappEditGasContainer: {
 		marginVertical: 20
+	},
+	subheader: {
+		marginBottom: 6
 	}
 });
 
@@ -471,17 +474,17 @@ const EditGasFee1559 = ({
 							animateOnChange={animateOnChange}
 						>
 							<View style={styles.headerTitle}>
-								<Text black style={styles.headerText} adjustsFontSizeToFit numberOfLines={1}>
+								<Text black style={styles.headerText} adjustsFontSizeToFit numberOfLines={1} noMargin>
 									~{gasFeePrimary}
 								</Text>
 							</View>
-							<Text big black>
-								<Text bold black>
+							<Text big black style={styles.subheader} noMargin>
+								<Text bold black noMargin>
 									Max fee:{' '}
 								</Text>
-								{gasFeeMaxPrimary} ({gasFeeMaxSecondary})
+								{gasFeeMaxPrimary} {isMainnet && `(${gasFeeMaxSecondary})`}
 							</Text>
-							<Text green={timeEstimateColor === 'green'} red={timeEstimateColor === 'red'}>
+							<Text green={timeEstimateColor === 'green'} red={timeEstimateColor === 'red'} bold>
 								{timeEstimate}
 							</Text>
 						</FadeAnimationView>

app/components/UI/Swaps/components/GasEditModal.js

@@ -28,6 +28,8 @@ const styles = StyleSheet.create({
 	}
 });
 
+const RECOMMENDED = 'high';
+
 function GasEditModal({
 	dismiss,
 	gasEstimateType,
@@ -75,7 +77,9 @@ function GasEditModal({
 							suggestedMaxFeePerGas: gasFeeEstimates[gasSelected].suggestedMaxFeePerGas,
 							suggestedMaxPriorityFeePerGas: gasFeeEstimates[gasSelected].suggestedMaxPriorityFeePerGas,
 							suggestedGasLimit: customGasLimit || selectedQuoteGasLimit,
-							estimatedBaseFee: gasFeeEstimates.estimatedBaseFee
+							estimatedBaseFee: gasFeeEstimates.estimatedBaseFee,
+							selectedOption: gasSelected,
+							recommended: RECOMMENDED
 						}
 					},
 					{ onlyGas: true }
@@ -127,7 +131,9 @@ function GasEditModal({
 							suggestedMaxFeePerGas,
 							suggestedMaxPriorityFeePerGas,
 							suggestedGasLimit,
-							estimatedBaseFee
+							estimatedBaseFee,
+							selectedOption: selected,
+							recommended: RECOMMENDED
 						}
 					},
 					{ onlyGas: true }

app/components/UI/TransactionEditor/index.js

@@ -174,7 +174,8 @@ class TransactionEditor extends PureComponent {
 
 			const EIP1559GasData = this.parseTransactionDataEIP1559({
 				...initialGas,
-				suggestedGasLimit
+				suggestedGasLimit,
+				selectedOption: gasSelected
 			});
 
 			let EIP1559GasDataTemp;
@@ -183,7 +184,8 @@ class TransactionEditor extends PureComponent {
 			} else {
 				EIP1559GasDataTemp = this.parseTransactionDataEIP1559({
 					...initialGasTemp,
-					suggestedGasLimit
+					suggestedGasLimit,
+					selectedOption: gasSelectedTemp
 				});
 			}
 
@@ -201,7 +203,7 @@ class TransactionEditor extends PureComponent {
 					this.setState({ animateOnChange: false });
 				}
 			);
-		} else {
+		} else if (this.props.gasEstimateType !== GAS_ESTIMATE_TYPES.NONE) {
 			const suggestedGasLimit = fromWei(transaction.gas, 'wei');
 			const getGas = selected =>
 				dappSuggestedGasPrice
@@ -227,7 +229,7 @@ class TransactionEditor extends PureComponent {
 			if (this.state.gasSelected === this.state.gasSelectedTemp) {
 				LegacyGasDataTemp = LegacyGasData;
 			} else {
-				LegacyGasDataTemp = this.parseTransactionDataEIP1559({
+				LegacyGasDataTemp = this.parseTransactionDataLegacy({
 					suggestedGasPrice: getGas(this.state.gasSelectedTemp),
 					suggestedGasLimit
 				});
@@ -606,7 +608,6 @@ class TransactionEditor extends PureComponent {
 			this.setState({ over: true });
 			error = strings('transaction.insufficient_amount', { amount, tokenSymbol });
 		}
-
 		return error;
 	};
 
@@ -801,7 +802,7 @@ class TransactionEditor extends PureComponent {
 		);
 		const amountError = await this.validateAmount(false);
 		const toAddressError = this.validateToAddress();
-		this.setState({ amountError, toAddressError });
+		this.setState({ amountError: totalError || amountError, toAddressError });
 		return totalError || amountError || toAddressError;
 	};
 
@@ -872,7 +873,7 @@ class TransactionEditor extends PureComponent {
 			gas.suggestedGasLimit = fromWei(transaction.gas, 'wei');
 		}
 		this.setState({
-			EIP1559GasDataTemp: this.parseTransactionDataEIP1559(gas),
+			EIP1559GasDataTemp: this.parseTransactionDataEIP1559({ ...gas, selectedOption: selected }),
 			stopUpdateGas: !selected,
 			gasSelectedTemp: selected
 		});

app/components/UI/TransactionReview/TransactionReviewEIP1559/__snapshots__/index.test.js.snap

@@ -112,9 +112,7 @@ exports[`TransactionReviewEIP1559 should render correctly 1`] = `
     <View
       style={
         Object {
-          "alignItems": "center",
-          "flex": 1,
-          "flexDirection": "row",
+          "marginTop": 4,
         }
       }
     >
@@ -128,6 +126,7 @@ exports[`TransactionReviewEIP1559 should render correctly 1`] = `
           green={false}
           link={false}
           modal={false}
+          noMargin={true}
           primary={true}
           red={false}
           reset={false}