Bugfix: custom rpc network (#1060)

* fix crash * use ticker * snaps * forgot ticker * fix unknown ticker * snaps
MetaMask · Sep 9, 2019 · 947650f · 947650f
1 parent 733b9de
commit 947650f
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 35 deletions.
diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js
@@ -640,7 +640,7 @@ class Main extends PureComponent {
 		}
 		// 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();
+		const networkId = Networks[this.props.providerType].networkId;
 		if (
 			this.props.paymentChannelsEnabled &&
 			AppConstants.CONNEXT.SUPPORTED_NETWORKS.includes(this.props.providerType) &&

diff --git a/...onents/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap b/...onents/UI/TransactionReview/TransactionReviewInformation/__snapshots__/index.test.js.snap
@@ -111,23 +111,6 @@ exports[`TransactionReviewInformation should render correctly 1`] = `
       >
         Amount + Transaction Fee
       </Text>
-      <Text
-        style={
-          Array [
-            Object {
-              "color": "#000000",
-              "fontFamily": "Roboto",
-              "fontSize": 24,
-              "fontWeight": "600",
-              "textAlign": "right",
-              "textTransform": "uppercase",
-            },
-            Object {
-              "color": "#037dd6",
-            },
-          ]
-        }
-      />
     </View>
   </View>
 </View>

diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.js
@@ -14,6 +14,7 @@ import {
 	renderFromWei
 } from '../../../../util/number';
 import { strings } from '../../../../../locales/i18n';
+import { getTicker } from '../../../../util/transactions';
 
 const styles = StyleSheet.create({
 	overview: {
@@ -59,7 +60,7 @@ const styles = StyleSheet.create({
 		minWidth: 30,
 		textTransform: 'uppercase'
 	},
-	overviewFiat: {
+	overviewPrimary: {
 		...fontStyles.bold,
 		color: colors.fontPrimary,
 		fontSize: 24,
@@ -121,7 +122,11 @@ class TransactionReviewInformation extends PureComponent {
 		/**
 		 * Callback for transaction edition
 		 */
-		edit: PropTypes.func
+		edit: PropTypes.func,
+		/**
+		 * Current provider ticker
+		 */
+		ticker: PropTypes.string
 	};
 
 	state = {
@@ -139,11 +144,12 @@ class TransactionReviewInformation extends PureComponent {
 		const {
 			transaction: { gas, gasPrice },
 			currentCurrency,
-			conversionRate
+			conversionRate,
+			ticker
 		} = 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 totalGasEth = `${renderFromWei(totalGas)} ${getTicker(ticker)}`;
 
 		const [totalFiat, totalValue] = this.getRenderTotals(totalGas, totalGasFiat)();
 		this.setState({ totalGas, totalGasFiat, totalGasEth, totalFiat, totalValue });
@@ -168,15 +174,18 @@ class TransactionReviewInformation extends PureComponent {
 			transaction: { value, selectedAsset, assetType },
 			currentCurrency,
 			conversionRate,
-			contractExchangeRates
+			contractExchangeRates,
+			ticker
 		} = this.props;
 
 		const totals = {
 			ETH: () => {
 				const totalEth = isBN(value) ? value.add(totalGas) : totalGas;
 				const totalFiat = weiToFiat(totalEth, conversionRate, currentCurrency);
 				const totalValue = (
-					<Text style={styles.overviewEth}>{`${renderFromWei(totalEth)} ${strings('unit.eth')} `}</Text>
+					<Text
+						style={totalFiat ? styles.overviewEth : [styles.overviewPrimary, styles.overviewAccent]}
+					>{`${renderFromWei(totalEth)} ${getTicker(ticker)} `}</Text>
 				);
 				return [totalFiat, totalValue];
 			},
@@ -196,7 +205,9 @@ 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={totalFiat ? styles.overviewEth : [styles.overviewPrimary, styles.overviewAccent]}
+						>{` + ${renderFromWei(totalGas)} ${getTicker(ticker)}`}</Text>
 					</View>
 				);
 				return [totalFiat, totalValue];
@@ -211,7 +222,7 @@ class TransactionReviewInformation extends PureComponent {
 						<Text numberOfLines={1} style={styles.overviewEth}>
 							{' (#' + selectedAsset.tokenId + ')'}
 						</Text>
-						<Text style={styles.overviewEth}>{` + ${renderFromWei(totalGas)} ${strings('unit.eth')}`}</Text>
+						<Text style={styles.overviewEth}>{` + ${renderFromWei(totalGas)} ${getTicker(ticker)}`}</Text>
 					</View>
 				);
 				return [totalFiat, totalValue];
@@ -223,14 +234,16 @@ class TransactionReviewInformation extends PureComponent {
 
 	render() {
 		const { amountError, totalGasFiat, totalGasEth, totalFiat, totalValue } = this.state;
+		const gasPrimary = totalGasFiat || totalGasEth;
+		const gasSeconday = totalGasFiat ? totalGasEth : null;
 
 		return (
 			<View style={styles.overview}>
 				<View style={[styles.overviewRow, styles.topOverviewRow]}>
 					<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>
+						<Text style={styles.overviewPrimary}>{gasPrimary}</Text>
+						{!!gasSeconday && <Text style={styles.overviewEth}>{totalGasEth}</Text>}
 					</View>
 				</View>
 
@@ -240,7 +253,9 @@ class TransactionReviewInformation extends PureComponent {
 						<Text style={styles.overviewInfo}>
 							{`${strings('transaction.amount')} + ${strings('transaction.gas_fee')}`}
 						</Text>
-						<Text style={[styles.overviewFiat, styles.overviewAccent]}>{totalFiat}</Text>
+						{!!totalFiat && (
+							<Text style={[styles.overviewPrimary, styles.overviewAccent]}>{totalFiat}</Text>
+						)}
 						{totalValue}
 					</View>
 				</View>
@@ -262,7 +277,8 @@ const mapStateToProps = state => ({
 	conversionRate: state.engine.backgroundState.CurrencyRateController.conversionRate,
 	currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency,
 	contractExchangeRates: state.engine.backgroundState.TokenRatesController.contractExchangeRates,
-	transaction: state.transaction
+	transaction: state.transaction,
+	ticker: state.engine.backgroundState.NetworkController.provider.ticker
 });
 
 export default connect(mapStateToProps)(TransactionReviewInformation);
diff --git a/app/components/UI/TransactionReview/TransactionReviewInformation/index.test.js b/app/components/UI/TransactionReview/TransactionReviewInformation/index.test.js
@@ -19,6 +19,11 @@ describe('TransactionReviewInformation', () => {
 					CurrencyRateController: {
 						currentCurrency: 'usd',
 						conversionRate: 0.1
+					},
+					NetworkController: {
+						provider: {
+							ticker: 'ETH'
+						}
 					}
 				}
 			},

diff --git a/app/components/UI/TransactionReview/TransactionReviewSummary/index.js b/app/components/UI/TransactionReview/TransactionReviewSummary/index.js
@@ -11,7 +11,7 @@ import {
 import { colors, fontStyles, baseStyles } from '../../../../styles/common';
 import { strings } from '../../../../../locales/i18n';
 import { connect } from 'react-redux';
-import { APPROVE_FUNCTION_SIGNATURE, decodeTransferData } from '../../../../util/transactions';
+import { APPROVE_FUNCTION_SIGNATURE, decodeTransferData, getTicker } from '../../../../util/transactions';
 import contractMap from 'eth-contract-metadata';
 import { toChecksumAddress } from 'ethereumjs-util';
 import IonicIcon from 'react-native-vector-icons/Ionicons';
@@ -92,7 +92,11 @@ class TransactionReviewSummary extends PureComponent {
 		/**
 		 * Array of ERC20 assets
 		 */
-		tokens: PropTypes.array
+		tokens: PropTypes.array,
+		/**
+		 * Current provider ticker
+		 */
+		ticker: PropTypes.string
 	};
 
 	state = {
@@ -125,11 +129,12 @@ class TransactionReviewSummary extends PureComponent {
 		const {
 			transaction: { value, selectedAsset, assetType },
 			currentCurrency,
-			contractExchangeRates
+			contractExchangeRates,
+			ticker
 		} = this.props;
 		const values = {
 			ETH: () => {
-				const assetAmount = `${renderFromWei(value)} ${strings('unit.eth')}`;
+				const assetAmount = `${renderFromWei(value)} ${getTicker(ticker)}`;
 				const conversionRate = this.props.conversionRate;
 				const fiatValue = weiToFiat(value, conversionRate, currentCurrency);
 				return [assetAmount, conversionRate, fiatValue];
@@ -195,7 +200,8 @@ const mapStateToProps = state => ({
 	currentCurrency: state.engine.backgroundState.CurrencyRateController.currentCurrency,
 	contractExchangeRates: state.engine.backgroundState.TokenRatesController.contractExchangeRates,
 	tokens: state.engine.backgroundState.AssetsController.tokens,
-	transaction: state.transaction
+	transaction: state.transaction,
+	ticker: state.engine.backgroundState.NetworkController.provider.ticker
 });
 
 export default connect(mapStateToProps)(TransactionReviewSummary);
diff --git a/app/components/UI/TransactionReview/TransactionReviewSummary/index.test.js b/app/components/UI/TransactionReview/TransactionReviewSummary/index.test.js
@@ -19,6 +19,11 @@ describe('TransactionReviewSummary', () => {
 					},
 					AssetsController: {
 						tokens: []
+					},
+					NetworkController: {
+						provider: {
+							ticker: 'ETH'
+						}
 					}
 				}
 			},