Custom Gas + Data hotfixes (#1687)

* CustomGas: fix crash when navigating back to advanced gas during error * TransactionReviewData: fix data not displaying * fix snapshit test * TransactionReviewData: fix data not scrollable * snapsho * SendFlow: fix total fiat to be text component when passed down to TransactionReviewFeeCard * snapshotsssss baby * TransactionReviewInformation: fix totalFiat is now a Text component
MetaMask · Jul 17, 2020 · ef9137f · ef9137f
1 parent e956348
commit ef9137f
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 95 deletions.
diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js
@@ -305,9 +305,10 @@ class CustomGas extends PureComponent {
 		gasSlowSelected: false,
 		selected: 'average',
 		ready: false,
-		customGasPrice: Math.round(this.props.basicGasEstimates.averageGwei),
+		customGasPrice: '10',
 		customGasLimit: fromWei(this.props.gas, 'wei'),
-		customGasPriceBN: this.props.gasPrice,
+		customGasPriceBNWei: this.props.gasPrice,
+		customGasPriceBN: new BN(Math.round(this.props.basicGasEstimates.averageGwei)),
 		customGasLimitBN: this.props.gas,
 		warningGasLimit: '',
 		warningGasPrice: '',
@@ -329,7 +330,7 @@ class CustomGas extends PureComponent {
 			gasSlowSelected: false,
 			selected: 'fast',
 			customGasPrice: fastGwei,
-			customGasPriceBN: gasPriceBN
+			customGasPriceBNWei: gasPriceBN
 		});
 	};
 
@@ -346,7 +347,7 @@ class CustomGas extends PureComponent {
 			gasSlowSelected: false,
 			selected: 'average',
 			customGasPrice: averageGwei,
-			customGasPriceBN: gasPriceBN
+			customGasPriceBNWei: gasPriceBN
 		});
 	};
 
@@ -363,7 +364,7 @@ class CustomGas extends PureComponent {
 			gasSlowSelected: true,
 			selected: 'slow',
 			customGasPrice: safeLowGwei,
-			customGasPriceBN: gasPriceBN
+			customGasPriceBNWei: gasPriceBN
 		});
 	};
 
@@ -427,9 +428,9 @@ class CustomGas extends PureComponent {
 	};
 
 	onGasLimitChange = value => {
-		const { customGasPriceBN } = this.state;
+		const { customGasPriceBNWei } = this.state;
 		const bnValue = new BN(value);
-		const warningSufficientFunds = this.hasSufficientFunds(bnValue, customGasPriceBN);
+		const warningSufficientFunds = this.hasSufficientFunds(bnValue, customGasPriceBNWei);
 		let warningGasLimit;
 		if (!value || value === '' || !isDecimal(value)) warningGasLimit = strings('transaction.invalid_gas');
 		else if (bnValue && !isBN(bnValue)) warningGasLimit = strings('transaction.invalid_gas');
@@ -448,15 +449,17 @@ class CustomGas extends PureComponent {
 		const { customGasLimitBN } = this.state;
 		//Added because apiEstimateModifiedToWEI doesn't like empty strings
 		const gasPrice = value === '' ? '0' : value;
-		const gasPriceBN = apiEstimateModifiedToWEI(gasPrice);
-		const warningSufficientFunds = this.hasSufficientFunds(customGasLimitBN, gasPriceBN);
+		const gasPriceBN = new BN(gasPrice);
+		const gasPriceBNWei = apiEstimateModifiedToWEI(gasPrice);
+		const warningSufficientFunds = this.hasSufficientFunds(customGasLimitBN, gasPriceBNWei);
 		let warningGasPrice;
 		if (value < this.props.basicGasEstimates.safeLowGwei) warningGasPrice = strings('transaction.low_gas_price');
 		if (!value || value === '' || !isDecimal(value) || value <= 0)
 			warningGasPrice = strings('transaction.invalid_gas_price');
-		if (gasPriceBN && !isBN(gasPriceBN)) warningGasPrice = strings('transaction.invalid_gas_price');
+		if (gasPriceBNWei && !isBN(gasPriceBNWei)) warningGasPrice = strings('transaction.invalid_gas_price');
 		this.setState({
-			customGasPrice: value,
+			customGasPrice: gasPrice,
+			customGasPriceBNWei: gasPriceBNWei,
 			customGasPriceBN: gasPriceBN,
 			warningGasPrice,
 			warningSufficientFunds
@@ -569,9 +572,9 @@ class CustomGas extends PureComponent {
 	};
 
 	renderCustomGasInput = () => {
-		const { customGasPrice, customGasLimitBN, customGasPriceBN } = this.state;
+		const { customGasLimitBN, customGasPriceBNWei, customGasPriceBN } = this.state;
 		const { generateTransform } = this.props;
-		const totalGas = customGasLimitBN.mul(customGasPriceBN);
+		const totalGas = customGasLimitBN.mul(customGasPriceBNWei);
 		const ticker = getTicker(this.props.ticker);
 		return (
 			<Animated.View
@@ -605,7 +608,7 @@ class CustomGas extends PureComponent {
 						keyboardType="numeric"
 						style={styles.gasInput}
 						onChangeText={this.onGasPriceChange}
-						value={customGasPrice.toString()}
+						value={customGasPriceBN.toString()}
 					/>
 				</View>
 			</Animated.View>

diff --git a/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap b/app/components/UI/TransactionReview/TransactionReviewData/__snapshots__/index.test.js.snap
@@ -15,61 +15,59 @@ exports[`TransactionReviewData should render correctly 1`] = `
     ]
   }
 >
-  <View>
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "justifyContent": "space-between",
-          "marginBottom": 28,
-          "width": "100%",
-        }
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 28,
+        "width": "100%",
       }
-    >
-      <TouchableOpacity>
-        <Icon
-          allowFontScaling={false}
-          color="#000000"
-          name="ios-arrow-back"
-          size={24}
-        />
-      </TouchableOpacity>
-      <Text
-        style={
-          Object {
-            "alignSelf": "center",
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 14,
-            "fontWeight": "600",
-          }
-        }
-      >
-        Data
-      </Text>
+    }
+  >
+    <TouchableOpacity>
       <Icon
         allowFontScaling={false}
-        color="#FFFFFF"
+        color="#000000"
         name="ios-arrow-back"
         size={24}
       />
-    </View>
+    </TouchableOpacity>
     <Text
       style={
         Object {
+          "alignSelf": "center",
           "color": "#000000",
           "fontFamily": "CircularStd-Medium",
           "fontSize": 14,
-          "fontWeight": "400",
-          "marginBottom": 28,
-          "textAlign": "center",
+          "fontWeight": "600",
         }
       }
     >
-      Data associated with this transaction
+      Data
     </Text>
+    <Icon
+      allowFontScaling={false}
+      color="#FFFFFF"
+      name="ios-arrow-back"
+      size={24}
+    />
   </View>
+  <Text
+    style={
+      Object {
+        "color": "#000000",
+        "fontFamily": "CircularStd-Medium",
+        "fontSize": 14,
+        "fontWeight": "400",
+        "marginBottom": 28,
+        "textAlign": "center",
+      }
+    }
+  >
+    Data associated with this transaction
+  </Text>
   <View
     style={
       Object {
@@ -140,20 +138,49 @@ exports[`TransactionReviewData should render correctly 1`] = `
       Hex data
       : 
     </Text>
-    <ScrollViewMock>
-      <Text
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <KeyboardAwareScrollViewMock
+        enableAutomaticScroll={true}
+        enableOnAndroid={false}
+        enableResetScrollToCoords={true}
+        extraHeight={75}
+        extraScrollHeight={0}
+        keyboardOpeningTime={250}
         style={
           Object {
-            "backgroundColor": "#FFFFFF",
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "paddingTop": 0,
+            "flex": 1,
           }
         }
-      />
-    </ScrollViewMock>
+        viewIsInsideTabBar={false}
+      >
+        <TouchableWithoutFeedback
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        >
+          <Text
+            style={
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "color": "#000000",
+                "fontFamily": "CircularStd-Medium",
+                "fontSize": 14,
+                "fontWeight": "400",
+                "paddingTop": 0,
+              }
+            }
+          />
+        </TouchableWithoutFeedback>
+      </KeyboardAwareScrollViewMock>
+    </View>
   </View>
 </View>
 `;
diff --git a/app/components/UI/TransactionReview/TransactionReviewData/index.js b/app/components/UI/TransactionReview/TransactionReviewData/index.js
@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import IonicIcon from 'react-native-vector-icons/Ionicons';
 import { colors, fontStyles } from '../../../../styles/common';
 import { strings } from '../../../../../locales/i18n';
@@ -59,6 +60,9 @@ const styles = StyleSheet.create({
 		color: colors.black,
 		fontSize: 14,
 		paddingTop: 0
+	},
+	scrollView: {
+		flex: 1
 	}
 });
 
@@ -89,22 +93,22 @@ class TransactionReviewData extends PureComponent {
 
 	render = () => {
 		const {
-			transaction: { data },
+			transaction: {
+				transaction: { data }
+			},
 			actionKey,
 			toggleDataView
 		} = this.props;
 		return (
 			<View style={[styles.root, this.applyRootHeight()]}>
-				<View>
-					<View style={styles.dataHeader}>
-						<TouchableOpacity onPress={toggleDataView}>
-							<IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} />
-						</TouchableOpacity>
-						<Text style={styles.dataTitleText}>{strings('transaction.data')}</Text>
-						<IonicIcon name={'ios-arrow-back'} size={24} color={colors.white} />
-					</View>
-					<Text style={styles.dataDescription}>{strings('transaction.data_description')}</Text>
+				<View style={styles.dataHeader}>
+					<TouchableOpacity onPress={toggleDataView}>
+						<IonicIcon name={'ios-arrow-back'} size={24} color={colors.black} />
+					</TouchableOpacity>
+					<Text style={styles.dataTitleText}>{strings('transaction.data')}</Text>
+					<IonicIcon name={'ios-arrow-back'} size={24} color={colors.white} />
 				</View>
+				<Text style={styles.dataDescription}>{strings('transaction.data_description')}</Text>
 				<View style={styles.dataBox}>
 					{actionKey !== strings('transactions.tx_review_confirm') && (
 						<View style={styles.label}>
@@ -115,9 +119,13 @@ class TransactionReviewData extends PureComponent {
 						</View>
 					)}
 					<Text style={[styles.labelText, styles.boldLabel]}>{strings('transaction.review_hex_data')}: </Text>
-					<ScrollView style={styles.scrollView}>
-						<Text style={styles.hexData}>{data}</Text>
-					</ScrollView>
+					<View style={styles.scrollView}>
+						<KeyboardAwareScrollView style={styles.scrollView}>
+							<TouchableWithoutFeedback style={styles.scrollView}>
+								<Text style={styles.hexData}>{data}</Text>
+							</TouchableWithoutFeedback>
+						</KeyboardAwareScrollView>
+					</View>
 				</View>
 			</View>
 		);

diff --git a/app/components/UI/TransactionReview/TransactionReviewData/index.test.js b/app/components/UI/TransactionReview/TransactionReviewData/index.test.js
@@ -20,8 +20,10 @@ describe('TransactionReviewData', () => {
 				}
 			},
 			transaction: {
+				transaction: {
+					data: ''
+				},
 				value: '',
-				data: '',
 				from: '0x1',
 				gas: '',
 				gasPrice: '',

diff --git a/...components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap b/...components/UI/TransactionReview/TransactionReviewFeeCard/__snapshots__/index.test.js.snap
@@ -57,12 +57,17 @@ exports[`TransactionReviewFeeCard should render correctly 1`] = `
       </Text>
       <Text
         style={
-          Object {
-            "color": "#000000",
-            "fontFamily": "CircularStd-Medium",
-            "fontSize": 14,
-            "fontWeight": "600",
-          }
+          Array [
+            Object {
+              "color": "#000000",
+              "fontFamily": "CircularStd-Medium",
+              "fontSize": 14,
+              "fontWeight": "600",
+            },
+            Object {
+              "textTransform": "uppercase",
+            },
+          ]
         }
       />
     </View>

diff --git a/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js b/app/components/UI/TransactionReview/TransactionReviewFeeCard/index.js
@@ -50,6 +50,9 @@ const styles = StyleSheet.create({
 		color: colors.fontPrimary,
 		fontSize: 14
 	},
+	amountText: {
+		textTransform: 'uppercase'
+	},
 	networkFeeText: {
 		paddingRight: 5
 	},
@@ -83,15 +86,15 @@ class TransactionReviewFeeCard extends PureComponent {
 		/**
 		 * Total transaction value in fiat
 		 */
-		totalFiat: PropTypes.string,
+		totalFiat: PropTypes.object,
 		/**
 		 * Transaction value in fiat before gas fee
 		 */
 		fiat: PropTypes.string,
 		/**
 		 * Total transaction value in ETH
 		 */
-		totalValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+		totalValue: PropTypes.object,
 		/**
 		 * Transaction value in ETH before gas fee
 		 */
@@ -149,7 +152,7 @@ class TransactionReviewFeeCard extends PureComponent {
 				<View style={[styles.overviewCol, styles.topOverviewCol]}>
 					<View style={[styles.amountRow, styles.amountRowBottomSpace]}>
 						<Text style={styles.overviewText}>{strings('transaction.amount')}</Text>
-						<Text style={styles.overviewText}>{amount}</Text>
+						<Text style={[styles.overviewText, styles.amountText]}>{amount}</Text>
 					</View>
 					<View style={styles.amountRow}>
 						<View style={styles.networkTextWrapper}>