Feature: ERC20 approve (#997)

* rm unnecessary code * mv calculations to didmount instead of render * render approve info * render alert * fix missing locales * render contract information * delete empty * snaps * left
MetaMask · Aug 16, 2019 · 06fc49a · 06fc49a
1 parent 345571a
commit 06fc49a
Show file tree

Hide file tree

Showing 11 changed files with 220 additions and 106 deletions.
diff --git a/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap b/app/components/UI/TransactionEdit/__snapshots__/index.test.js.snap
@@ -295,7 +295,7 @@ exports[`TransactionEdit should render correctly 1`] = `
           allowFontScaling={true}
           multiline={true}
           onChangeText={[Function]}
-          placeholder="[missing \\"en.transacton.optional\\" translation]"
+          placeholder="Optional"
           rejectResponderTermination={true}
           style={
             Object {

diff --git a/app/components/UI/TransactionEdit/index.js b/app/components/UI/TransactionEdit/index.js
@@ -450,7 +450,7 @@ class TransactionEdit extends PureComponent {
 									<TextInput
 										multiline
 										onChangeText={this.updateData}
-										placeholder={strings('transacton.optional')}
+										placeholder={strings('transaction.optional')}
 										style={styles.hexData}
 										value={data}
 									/>

diff --git a/...onents/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap b/...onents/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap
@@ -34,10 +34,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
           "fontSize": 12,
           "fontWeight": "600",
           "minWidth": 30,
+          "textTransform": "uppercase",
         }
       }
     >
-      TRANSACTION FEE
+      Transaction Fee
     </Text>
     <View>
       <Text
@@ -48,10 +49,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
             "fontSize": 24,
             "fontWeight": "600",
             "textAlign": "right",
+            "textTransform": "uppercase",
           }
         }
       >
-        0 USD
+        0 usd
       </Text>
       <Text
         style={
@@ -61,6 +63,7 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
             "fontSize": 16,
             "fontWeight": "400",
             "textAlign": "right",
+            "textTransform": "uppercase",
           }
         }
       >
@@ -86,10 +89,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
           "fontSize": 12,
           "fontWeight": "600",
           "minWidth": 30,
+          "textTransform": "uppercase",
         }
       }
     >
-      TOTAL
+      Total
     </Text>
     <View>
       <Text
@@ -101,13 +105,11 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
             "fontWeight": "400",
             "marginBottom": 6,
             "textAlign": "right",
+            "textTransform": "uppercase",
           }
         }
       >
-        AMOUNT
-         +
-         
-        TRANSACTION FEE
+        Amount Transaction Fee
       </Text>
       <Text
         style={
@@ -118,6 +120,7 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
               "fontSize": 24,
               "fontWeight": "600",
               "textAlign": "right",
+              "textTransform": "uppercase",
             },
             Object {
               "color": "#037dd6",

diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
@@ -56,13 +56,15 @@ const styles = StyleSheet.create({
 		color: colors.grey500,
 		flex: 1,
 		fontSize: 12,
-		minWidth: 30
+		minWidth: 30,
+		textTransform: 'uppercase'
 	},
 	overviewFiat: {
 		...fontStyles.bold,
 		color: colors.fontPrimary,
 		fontSize: 24,
-		textAlign: 'right'
+		textAlign: 'right',
+		textTransform: 'uppercase'
 	},
 	overviewAccent: {
 		color: colors.blue
@@ -71,14 +73,16 @@ const styles = StyleSheet.create({
 		...fontStyles.normal,
 		color: colors.grey500,
 		fontSize: 16,
-		textAlign: 'right'
+		textAlign: 'right',
+		textTransform: 'uppercase'
 	},
 	overviewInfo: {
 		...fontStyles.normal,
 		color: colors.grey500,
 		fontSize: 12,
 		marginBottom: 6,
-		textAlign: 'right'
+		textAlign: 'right',
+		textTransform: 'uppercase'
 	},
 	assetName: {
 		maxWidth: 200
@@ -123,7 +127,26 @@ class TransactionReviewInformation extends PureComponent {
 	state = {
 		toFocused: false,
 		amountError: '',
-		actionKey: strings('transactions.tx_review_confirm')
+		actionKey: strings('transactions.tx_review_confirm'),
+		totalGas: undefined,
+		totalGasFiat: undefined,
+		totalGasEth: undefined,
+		totalFiat: undefined,
+		totalValue: undefined
+	};
+
+	componentDidMount = () => {
+		const {
+			transaction: { gas, gasPrice },
+			currentCurrency,
+			conversionRate
+		} = this.props;
+		const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
+		const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency);
+		const totalGasEth = `${renderFromWei(totalGas)} ${strings('unit.eth')}`;
+
+		const [totalFiat, totalValue] = this.getRenderTotals(totalGas, totalGasFiat)();
+		this.setState({ totalGas, totalGasFiat, totalGasEth, totalFiat, totalValue });
 	};
 
 	getTotalFiat = (asset, totalGas, conversionRate, exchangeRate, currentCurrency, amountToken) => {
@@ -132,32 +155,28 @@ class TransactionReviewInformation extends PureComponent {
 		const balanceFiat = balanceToFiatNumber(parseFloat(amountToken), conversionRate, exchangeRate);
 		const base = Math.pow(10, 5);
 		total = ((parseFloat(gasFeeFiat) + parseFloat(balanceFiat)) * base) / base;
-		return `${total} ${currentCurrency.toUpperCase()}`;
+		return `${total} ${currentCurrency}`;
 	};
 
 	edit = () => {
 		const { edit } = this.props;
 		edit && edit();
 	};
 
-	getRenderTotals = () => {
+	getRenderTotals = (totalGas, totalGasFiat) => {
 		const {
-			transaction: { value, gas, gasPrice, selectedAsset, assetType },
+			transaction: { value, selectedAsset, assetType },
 			currentCurrency,
 			conversionRate,
 			contractExchangeRates
 		} = this.props;
-		const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
-		const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency.toUpperCase());
+
 		const totals = {
 			ETH: () => {
 				const totalEth = isBN(value) ? value.add(totalGas) : totalGas;
-				const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency.toUpperCase());
+				const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency);
 				const totalValue = (
-					<Text style={styles.overviewEth}>
-						{' '}
-						{renderFromWei(totalEth).toString() + ' ' + strings('unit.eth')}{' '}
-					</Text>
+					<Text style={styles.overviewEth}>{`${renderFromWei(totalEth)} ${strings('unit.eth')} `}</Text>
 				);
 				return [totalFiat, totalValue];
 			},
@@ -177,9 +196,7 @@ class TransactionReviewInformation extends PureComponent {
 						<Text numberOfLines={1} style={[styles.overviewEth, styles.assetName]}>
 							{amountToken + ' ' + selectedAsset.symbol}
 						</Text>
-						<Text style={styles.overviewEth}>
-							{' + ' + renderFromWei(totalGas).toString() + ' ' + strings('unit.eth')}
-						</Text>
+						<Text style={styles.overviewEth}>{`${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
 					</View>
 				);
 				return [totalFiat, totalValue];
@@ -194,9 +211,7 @@ class TransactionReviewInformation extends PureComponent {
 						<Text numberOfLines={1} style={styles.overviewEth}>
 							{' (#' + selectedAsset.tokenId + ')'}
 						</Text>
-						<Text style={styles.overviewEth}>
-							{' + ' + renderFromWei(totalGas).toString() + ' ' + strings('unit.eth')}
-						</Text>
+						<Text style={styles.overviewEth}>{` + ${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
 					</View>
 				);
 				return [totalFiat, totalValue];
@@ -207,48 +222,37 @@ class TransactionReviewInformation extends PureComponent {
 	};
 
 	render() {
-		const {
-			transaction: { gas, gasPrice },
-			currentCurrency,
-			conversionRate
-		} = this.props;
-		const { amountError } = this.state;
-		const totalGas = isBN(gas) && isBN(gasPrice) ? gas.mul(gasPrice) : toBN('0x0');
-		const totalGasFiat = weiToFiat(totalGas, conversionRate, currentCurrency.toUpperCase());
-		const totalGasEth = renderFromWei(totalGas).toString() + ' ' + strings('unit.eth');
-
-		const [totalFiat, totalValue] = this.getRenderTotals()();
+		const { amountError, totalGasFiat, totalGasEth, totalFiat, totalValue } = this.state;
 
 		return (
 			<View style={styles.overview}>
 				<View style={[styles.overviewRow, styles.topOverviewRow]}>
-					<Text style={styles.overviewLabel}>{strings('transaction.gas_fee').toUpperCase()}</Text>
+					<Text style={styles.overviewLabel}>{strings('transaction.gas_fee')}</Text>
 					<View style={styles.overviewContent}>
 						<Text style={styles.overviewFiat}>{totalGasFiat}</Text>
 						<Text style={styles.overviewEth}>{totalGasEth}</Text>
 					</View>
 				</View>
 
 				<View style={styles.overviewRow}>
-					<Text style={styles.overviewLabel}>{strings('transaction.total').toUpperCase()}</Text>
+					<Text style={styles.overviewLabel}>{strings('transaction.total')}</Text>
 					<View style={styles.overviewContent}>
 						<Text style={styles.overviewInfo}>
-							{strings('transaction.amount').toUpperCase()} +{' '}
-							{strings('transaction.gas_fee').toUpperCase()}
+							{`${strings('transaction.amount')} ${strings('transaction.gas_fee')}`}
 						</Text>
 						<Text style={[styles.overviewFiat, styles.overviewAccent]}>{totalFiat}</Text>
 						{totalValue}
 					</View>
 				</View>
 
-				{amountError ? (
+				{!!amountError && (
 					<View style={styles.overviewAlert}>
 						<MaterialIcon name={'error'} size={20} style={styles.overviewAlertIcon} />
 						<Text style={styles.overviewAlertText}>
 							{strings('transaction.alert')}: {amountError}.
 						</Text>
 					</View>
-				) : null}
+				)}
 			</View>
 		);
 	}

diff --git a/...components/UI/TransactionReview/TransactionReviewSummary/__snapshots__/index.test.js.snap b/...components/UI/TransactionReview/TransactionReviewSummary/__snapshots__/index.test.js.snap
@@ -4,39 +4,48 @@ exports[`TransactionReviewSummary should render correctly 1`] = `
 <View
   style={
     Object {
-      "backgroundColor": undefined,
-      "padding": 16,
+      "flex": 1,
     }
   }
 >
-  <Text
-    numberOfLines={1}
+  <View
     style={
       Object {
-        "alignItems": "center",
-        "borderColor": "#848c96",
-        "borderRadius": 4,
-        "borderWidth": 1,
-        "color": "#848c96",
-        "fontFamily": "Roboto",
-        "fontSize": 12,
-        "fontWeight": "400",
-        "lineHeight": 22,
-        "textAlign": "center",
-        "width": "50%",
+        "backgroundColor": undefined,
+        "padding": 16,
       }
     }
-  />
-  <Text
-    style={
-      Object {
-        "color": "#000000",
-        "fontFamily": "Roboto",
-        "fontSize": 44,
-        "fontWeight": "400",
-        "paddingVertical": 4,
+  >
+    <Text
+      numberOfLines={1}
+      style={
+        Object {
+          "alignItems": "center",
+          "borderColor": "#848c96",
+          "borderRadius": 4,
+          "borderWidth": 1,
+          "color": "#848c96",
+          "fontFamily": "Roboto",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "center",
+          "width": "50%",
+        }
       }
-    }
-  />
+    />
+    <Text
+      style={
+        Object {
+          "color": "#000000",
+          "fontFamily": "Roboto",
+          "fontSize": 44,
+          "fontWeight": "400",
+          "paddingVertical": 4,
+          "textTransform": "uppercase",
+        }
+      }
+    />
+  </View>
 </View>
 `;