bugfix/cancel dapp tx when inactive (#1772)

* fix * check transaction.id * background android * appState !== 'active'
MetaMask · Aug 14, 2020 · 19593ce · 19593ce
1 parent 6384433
commit 19593ce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js
@@ -574,7 +574,7 @@ class CustomGas extends PureComponent {
 	renderCustomGasInput = () => {
 		const { customGasLimitBN, customGasPriceBNWei, customGasPriceBN } = this.state;
 		const { generateTransform } = this.props;
-		const totalGas = customGasLimitBN.mul(customGasPriceBNWei);
+		const totalGas = customGasLimitBN && customGasLimitBN.mul(customGasPriceBNWei);
 		const ticker = getTicker(this.props.ticker);
 		return (
 			<Animated.View
@@ -599,7 +599,7 @@ class CustomGas extends PureComponent {
 						style={styles.gasInput}
 						onChangeText={this.onGasLimitChange}
 						//useing BN here due to a glitch that causes it to sometimes render as x.00000001
-						value={customGasLimitBN.toString()}
+						value={customGasLimitBN ? customGasLimitBN.toString() : ''}
 					/>
 				</View>
 				<View style={styles.valueRow}>
@@ -608,7 +608,7 @@ class CustomGas extends PureComponent {
 						keyboardType="numeric"
 						style={styles.gasInput}
 						onChangeText={this.onGasPriceChange}
-						value={customGasPriceBN.toString()}
+						value={customGasPriceBN ? customGasPriceBN.toString() : ''}
 					/>
 				</View>
 			</Animated.View>

diff --git a/app/components/Views/Approval/index.js b/app/components/Views/Approval/index.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { StyleSheet, Alert, InteractionManager } from 'react-native';
+import { StyleSheet, AppState, Alert, InteractionManager } from 'react-native';
 import Engine from '../../../core/Engine';
 import PropTypes from 'prop-types';
 import TransactionEditor from '../../UI/TransactionEditor';
@@ -76,11 +76,21 @@ class Approval extends PureComponent {
 			Engine.context.TransactionController.cancelTransaction(transaction.id);
 		}
 		Engine.context.TransactionController.hub.removeAllListeners(`${transaction.id}:finished`);
+		AppState.removeEventListener('change', this.handleAppStateChange);
 		this.clear();
 	};
 
+	handleAppStateChange = appState => {
+		if (appState !== 'active') {
+			const { transaction } = this.props;
+			transaction && transaction.id && Engine.context.TransactionController.cancelTransaction(transaction.id);
+			this.props.toggleDappTransactionModal(false);
+		}
+	};
+
 	componentDidMount = () => {
 		const { navigation } = this.props;
+		AppState.addEventListener('change', this.handleAppStateChange);
 		navigation && navigation.setParams({ mode: REVIEW, dispatch: this.onModeChange });
 		this.trackConfirmScreen();
 	};

diff --git a/app/components/Views/SendFlow/CustomGas/index.js b/app/components/Views/SendFlow/CustomGas/index.js
@@ -477,7 +477,7 @@ class CustomGas extends PureComponent {
 	renderCustomGasInput = () => {
 		const { customGasLimit, customGasPrice, customGasLimitBN, customGasPriceBN } = this.state;
 		const ticker = getTicker(this.props.ticker);
-		const totalGas = customGasLimitBN.mul(customGasPriceBN);
+		const totalGas = customGasLimitBN && customGasLimitBN.mul(customGasPriceBN);
 		return (
 			<View style={styles.advancedOptionsContainer}>
 				<View style={styles.valueRow}>