Fix: empty state when using fiat on non-mainnet transactions (#2776)

* Add mainnet condition * Implement secondary values * Design adjustments * Fix boldness * Update test Co-authored-by: ricky <ricky.miller@gmail.com>
MetaMask · Jun 11, 2021 · 824887c · 824887c
1 parent a8e2d58
commit 824887c
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 34 deletions.
diff --git a/...components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap b/...components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap
@@ -79,7 +79,8 @@ exports[`TransactionReviewFeeCard should render correctly 1`] = `
           strikethrough={false}
           style={
             Object {
-              "width": 66,
+              "marginLeft": 2,
+              "width": 86,
             }
           }
           underline={false}

diff --git a/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js b/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js
@@ -54,8 +54,9 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
-	fiatContainer: {
-		width: 66
+	primaryContainer: flex => {
+		if (flex) return { flex: 1 };
+		return { width: 86, marginLeft: 2 };
 	},
 	hitSlop: {
 		top: 10,
@@ -198,23 +199,32 @@ class TransactionReviewFeeCard extends PureComponent {
 			chainId
 		} = this.props;
 
+		const isMainnet = isMainnetByChainId(chainId);
+
 		let amount;
 		let networkFee;
 		let totalAmount;
-		let equivalentTotalAmount;
-		if (primaryCurrency === 'ETH') {
-			amount = transactionValue;
-			networkFee = totalGasEth;
-			totalAmount = totalValue;
-			equivalentTotalAmount = totalFiat;
-		} else {
+		let primaryAmount;
+		let primaryNetworkFee;
+		let primaryTotalAmount;
+		const showNativeCurrency = primaryCurrency === 'ETH' || !isMainnet;
+		if (showNativeCurrency) {
 			amount = fiat;
 			networkFee = totalGasFiat;
 			totalAmount = totalFiat;
-			equivalentTotalAmount = totalValue;
-		}
 
-		const isMainnet = isMainnetByChainId(chainId);
+			primaryAmount = transactionValue;
+			primaryNetworkFee = totalGasEth;
+			primaryTotalAmount = totalValue;
+		} else {
+			amount = transactionValue;
+			networkFee = totalGasEth;
+			totalAmount = totalValue;
+
+			primaryAmount = fiat;
+			primaryNetworkFee = totalGasFiat;
+			primaryTotalAmount = totalFiat;
+		}
 
 		return (
 			<View>
@@ -224,14 +234,15 @@ class TransactionReviewFeeCard extends PureComponent {
 							{strings('transaction.amount')}
 						</Text>
 						<View style={styles.valuesContainer}>
-							<Text upper right grey style={styles.amountContainer}>
-								{amount}
-							</Text>
 							{isMainnet && (
-								<Text upper primary bold right style={styles.fiatContainer}>
-									{fiat}
+								<Text upper right grey style={styles.amountContainer}>
+									{amount}
 								</Text>
 							)}
+
+							<Text upper primary bold right style={styles.primaryContainer(!isMainnet)}>
+								{primaryAmount}
+							</Text>
 						</View>
 					</Summary.Row>
 					<Summary.Row>
@@ -251,16 +262,35 @@ class TransactionReviewFeeCard extends PureComponent {
 						</View>
 						{this.renderIfGasEstimationReady(
 							<View style={styles.valuesContainer}>
-								<TouchableOpacity style={styles.amountContainer} onPress={edit}>
-									<Text upper right link underline style={[warningGasPriceHigh && styles.over]}>
-										{networkFee}
-									</Text>
-								</TouchableOpacity>
 								{isMainnet && (
-									<Text primary bold upper right style={styles.fiatContainer}>
-										{totalGasFiat}
-									</Text>
+									<View style={styles.amountContainer}>
+										<TouchableOpacity onPress={edit} disabled={showNativeCurrency}>
+											<Text
+												link={!showNativeCurrency}
+												underline={!showNativeCurrency}
+												upper
+												right
+											>
+												{networkFee}
+											</Text>
+										</TouchableOpacity>
+									</View>
 								)}
+								<View style={styles.primaryContainer(!isMainnet)}>
+									<TouchableOpacity onPress={edit} disabled={!showNativeCurrency}>
+										<Text
+											primary
+											bold
+											upper
+											link={showNativeCurrency}
+											underline={showNativeCurrency}
+											right
+											style={warningGasPriceHigh && styles.over}
+										>
+											{primaryNetworkFee}
+										</Text>
+									</TouchableOpacity>
+								</View>
 							</View>
 						)}
 					</Summary.Row>
@@ -273,14 +303,15 @@ class TransactionReviewFeeCard extends PureComponent {
 						{!!totalFiat &&
 							this.renderIfGasEstimationReady(
 								<View style={styles.valuesContainer}>
-									<Text blue upper right style={styles.amountContainer}>
-										{totalAmount}
-									</Text>
 									{isMainnet && (
-										<Text bold primary upper right style={styles.fiatContainer}>
-											{equivalentTotalAmount}
+										<Text grey upper right style={styles.amountContainer}>
+											{totalAmount}
 										</Text>
 									)}
+
+									<Text bold primary upper right style={styles.primaryContainer(!isMainnet)}>
+										{primaryTotalAmount}
+									</Text>
 								</View>
 							)}
 					</Summary.Row>

diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
@@ -59,7 +59,6 @@ const styles = StyleSheet.create({
 		color: colors.blue
 	},
 	overviewEth: {
-		...fontStyles.bold,
 		color: colors.fontPrimary,
 		fontSize: 14,
 		textAlign: 'right',

diff --git a/app/components/Views/SendFlow/Confirm/index.js b/app/components/Views/SendFlow/Confirm/index.js
@@ -510,12 +510,12 @@ class Confirm extends PureComponent {
 			transactionValueFiat = weiToFiat(valueBN, conversionRate, currentCurrency);
 			const transactionTotalAmountBN = weiTransactionFee && weiTransactionFee.add(valueBN);
 			transactionTotalAmount = (
-				<Text grey right upper style={[styles.totalAmount, over && styles.over]}>
+				<Text reset right upper style={[styles.totalAmount, over && styles.over]}>
 					{renderFromWei(transactionTotalAmountBN)} {parsedTicker}
 				</Text>
 			);
 			transactionTotalAmountFiat = (
-				<Text primary right upper bold style={[styles.totalAmount, over && styles.over]}>
+				<Text reset right upper style={[styles.totalAmount, over && styles.over]}>
 					{weiToFiat(transactionTotalAmountBN, conversionRate, currentCurrency)}
 				</Text>
 			);