Cancel propagated TX (#5899)

* lgtm

* linting

* Slight shortening

js/src/ui/TxList/TxRow/txRow.js

@@ -47,7 +47,8 @@ class TxRow extends Component {
     className: PropTypes.string,
     cancelTransaction: PropTypes.func,
     editTransaction: PropTypes.func,
-    historic: PropTypes.bool
+    historic: PropTypes.bool,
+    killTransaction: PropTypes.func
   };
 
   static defaultProps = {
@@ -368,8 +369,21 @@ class TxRow extends Component {
     return 'pending';
   }
 
+  killTx = () => {
+    const { killTransaction, tx } = this.props;
+
+    killTransaction(this, tx);
+  }
+
   cancelTx = () => {
     const { cancelTransaction, tx } = this.props;
+    const pendingStatus = this.getCondition();
+    const isPending = pendingStatus === 'pending';
+
+    if (isPending) {
+      this.killTx();
+      return;
+    }
 
     cancelTransaction(this, tx);
   }

js/src/ui/TxList/store.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import { action, observable } from 'mobx';
+import BigNumber from 'bignumber.js';
 
 export default class Store {
   @observable blocks = {};
@@ -125,6 +126,30 @@ export default class Store {
       });
   }
 
+  killTransaction = (txComponent, tx) => {
+    const { hash, gasPrice, from } = tx;
+
+    this._api.parity
+      .removeTransaction(hash)
+      .then(() => {
+        return this._api.parity.postTransaction({
+          from: from,
+          to: from,                    // set to owner
+          gas: new BigNumber(21000),   // set default gas
+          gasPrice: gasPrice.times(1.25),   // must be a minimum of 10% growth to be recognized as a replacement by miners (incentive)
+          value: new BigNumber(0),     // zero out the value
+          condition: null,             // ensure to post this instantly
+          data: '0x'
+        });
+      })
+      .then(() => {
+        tx.Component.setState({ canceled: true });
+      })
+      .catch((err) => {
+        this._onNewError({ message: err });
+      });
+  }
+
   editTransaction = (txComponent, tx) => {
     const { hash, gas, gasPrice, to, from, value, input, condition } = tx;
 

js/src/ui/TxList/txList.js

@@ -60,7 +60,7 @@ class TxList extends Component {
 
   renderRows () {
     const { address, netVersion, blockNumber } = this.props;
-    const { editTransaction, cancelTransaction } = this.store;
+    const { editTransaction, cancelTransaction, killTransaction } = this.store;
 
     return this.store.sortedHashes.map((txhash) => {
       const tx = this.store.transactions[txhash];
@@ -77,6 +77,7 @@ class TxList extends Component {
           netVersion={ netVersion }
           editTransaction={ editTransaction }
           cancelTransaction={ cancelTransaction }
+          killTransaction={ killTransaction }
         />
       );
     });