Merge pull request #5282 from MetaMask/tx-cancel-ui

Add Cancel Transaction feature. Refactor modals. Add Transaction Details modal.

2 files changed, 21 insertions, 2 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 951e24ec1..f6cf7cf69 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -61,6 +61,12 @@
   "attemptingConnect": {
     "message": "Attempting to connect to blockchain."
   },
+  "attemptToCancel": {
+    "message": "Attempt to Cancel?"
+  },
+  "attemptToCancelDescription": {
+    "message": "Attempting to cancel does not guarantee your original transaction will be cancelled. If cancelled, you are still required to pay a transaction fee to the network."
+  },
   "attributions": {
     "message": "Attributions"
   },
@@ -116,6 +122,12 @@
   "cancel": {
     "message": "Cancel"
   },
+  "cancelAttempt": {
+    "message": "Cancel Attempt"
+  },
+  "cancellationGasFee": {
+    "message": "Cancellation Gas Fee"
+  },
   "classicInterface": {
     "message": "Use classic interface"
   },
@@ -1109,6 +1121,9 @@
   "transactionCreated": {
     "message": "Transaction created with a value of $1 on $2."
   },
+  "transactionWithNonce": {
+    "message": "Transaction $1"
+  },
   "transactionDropped": {
     "message": "Transaction dropped on $2."
   },
@@ -1240,6 +1255,9 @@
   "whatsThis": {
     "message": "What's this?"
   },
+  "yesLetsTry": {
+    "message": "Yes, let's try"
+  },
   "youNeedToAllowCameraAccess": {
     "message": "You need to allow camera access to use this feature."
   },
diff --git a/app/scripts/controllers/transactions/index.js b/app/scripts/controllers/transactions/index.js
index 59e30cdde..e2965ceb6 100644
--- a/app/scripts/controllers/transactions/index.js
+++ b/app/scripts/controllers/transactions/index.js
@@ -18,7 +18,7 @@ const {
   TRANSACTION_STATUS_APPROVED,
 } = require('./enums')
 
-const { hexToBn, bnToHex } = require('../../lib/util')
+const { hexToBn, bnToHex, BnMultiplyByFraction } = require('../../lib/util')
 
 /**
   Transaction Controller is an aggregate of sub-controllers and trackers
@@ -244,7 +244,8 @@ class TransactionController extends EventEmitter {
     const originalTxMeta = this.txStateManager.getTx(originalTxId)
     const { txParams } = originalTxMeta
     const { gasPrice: lastGasPrice, from, nonce } = txParams
-    const newGasPrice = customGasPrice || bnToHex(hexToBn(lastGasPrice).mul(1.1))
+
+    const newGasPrice = customGasPrice || bnToHex(BnMultiplyByFraction(hexToBn(lastGasPrice), 11, 10))
     const newTxMeta = this.txStateManager.generateTxMeta({
       txParams: {
         from,