From 3bf157244de8cdd1188850f6d885bdf95c84387a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Esteban=20Mi=C3=B1o?= <efmino@uc.cl>
Date: Tue, 27 Aug 2019 18:58:18 -0400
Subject: [PATCH] Improvement: approval token transfer data (#1027)

* get symbol and decimals

* snaps

* use local tokens first
---
 app/components/Nav/Main/index.js              | 32 +++++++++++++++----
 .../__snapshots__/index.test.js.snap          |  2 +-
 .../TransactionReviewInformation/index.js     |  4 +--
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
index 04a83c6bfb2..fd554ae364c 100644
--- a/app/components/Nav/Main/index.js
+++ b/app/components/Nav/Main/index.js
@@ -83,6 +83,7 @@ import { toChecksumAddress, isValidAddress } from 'ethereumjs-util';
 import { isENS } from '../../../util/address';
 import Logger from '../../../util/Logger';
 import contractMap from 'eth-contract-metadata';
+import { BN } from 'gaba';
 
 const styles = StyleSheet.create({
 	flex: {
@@ -358,6 +359,10 @@ class Main extends PureComponent {
 		 * Selected address
 		 */
 		selectedAddress: PropTypes.string,
+		/**
+		 * Array of ERC20 assets
+		 */
+		tokens: PropTypes.array,
 		/**
 		 * List of transactions
 		 */
@@ -634,32 +639,44 @@ class Main extends PureComponent {
 			return;
 		}
 		// Check if it's a payment channel deposit transaction to sign
+		const to = toChecksumAddress(transactionMeta.transaction.to);
 		const networkId = Networks[this.props.providerType].networkId.toString();
 		if (
 			this.props.paymentChannelsEnabled &&
 			AppConstants.CONNEXT.SUPPORTED_NETWORKS.includes(this.props.providerType) &&
 			transactionMeta.transaction.data.substr(0, 10) === CONNEXT_DEPOSIT &&
-			toChecksumAddress(transactionMeta.transaction.to) === AppConstants.CONNEXT.CONTRACTS[networkId]
+			to === AppConstants.CONNEXT.CONTRACTS[networkId]
 		) {
 			await this.paymentChannelDepositSign(transactionMeta);
 		} else {
 			const {
-				transaction: { value, gas, gasPrice, data, to }
+				transaction: { value, gas, gasPrice, data }
 			} = transactionMeta;
-
+			const { AssetsContractController } = Engine.context;
 			transactionMeta.transaction.gas = hexToBN(gas);
 			transactionMeta.transaction.gasPrice = hexToBN(gasPrice);
 
 			if (
-				value === '0x0' &&
+				(value === '0x0' || !value) &&
 				data !== '0x' &&
 				to &&
-				contractMap[toChecksumAddress(to)] &&
 				(await getMethodData(data)).name === TOKEN_METHOD_TRANSFER
 			) {
-				const decodedData = decodeTransferData('transfer', data);
-				const asset = contractMap[toChecksumAddress(to)];
+				let asset = this.props.tokens.find(({ address }) => address === to);
+				if (!asset && contractMap[to]) {
+					asset = contractMap[to];
+				} else if (!asset) {
+					try {
+						asset = {};
+						asset.decimals = await AssetsContractController.getTokenDecimals(to);
+						asset.symbol = await AssetsContractController.getAssetSymbol(to);
+					} catch (e) {
+						// This could fail when requesting a transfer in other network
+						asset = { symbol: 'ERC20', decimals: new BN(0) };
+					}
+				}
 
+				const decodedData = decodeTransferData('transfer', data);
 				transactionMeta.transaction.value = hexToBN(decodedData[2]);
 				transactionMeta.transaction.readableValue = renderFromTokenMinimalUnit(
 					hexToBN(decodedData[2]),
@@ -913,6 +930,7 @@ const mapStateToProps = state => ({
 	lockTime: state.settings.lockTime,
 	transaction: state.transaction,
 	selectedAddress: state.engine.backgroundState.PreferencesController.selectedAddress,
+	tokens: state.engine.backgroundState.AssetsController.tokens,
 	transactions: state.engine.backgroundState.TransactionController.transactions,
 	paymentChannelsEnabled: state.settings.paymentChannelsEnabled,
 	providerType: state.engine.backgroundState.NetworkController.provider.type
diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap b/app/components/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap
index 259415be07e..dc16dda1297 100644
--- a/app/components/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap
+++ b/app/components/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap
@@ -109,7 +109,7 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
           }
         }
       >
-        Amount Transaction Fee
+        Amount + Transaction Fee
       </Text>
       <Text
         style={
diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
index 59e572bee9d..b4904ff1b2f 100644
--- a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
+++ b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
@@ -196,7 +196,7 @@ class TransactionReviewInformation extends PureComponent {
 						<Text numberOfLines={1} style={[styles.overviewEth, styles.assetName]}>
 							{amountToken + ' ' + selectedAsset.symbol}
 						</Text>
-						<Text style={styles.overviewEth}>{`${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
+						<Text style={styles.overviewEth}>{` + ${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
 					</View>
 				);
 				return [totalFiat, totalValue];
@@ -238,7 +238,7 @@ class TransactionReviewInformation extends PureComponent {
 					<Text style={styles.overviewLabel}>{strings('transaction.total')}</Text>
 					<View style={styles.overviewContent}>
 						<Text style={styles.overviewInfo}>
-							{`${strings('transaction.amount')} ${strings('transaction.gas_fee')}`}
+							{`${strings('transaction.amount')} + ${strings('transaction.gas_fee')}`}
 						</Text>
 						<Text style={[styles.overviewFiat, styles.overviewAccent]}>{totalFiat}</Text>
 						{totalValue}